From d67e184a443072dc40851a04d863f2fea199989a Mon Sep 17 00:00:00 2001
From: carboxaminoo <carboxaminoo@daum.net>
Date: Thu, 7 Mar 2024 11:07:26 +0900
Subject: [PATCH] Feat : Add result connection

- #8
---
 .../components/button/moving_filled.svelte    | 14 ++++-
 mz_v1_front/src/routes/result/+page.svelte    | 46 +++++++++++++--
 .../src/routes/resultlist/+page.svelte        | 56 +++++++++++++------
 3 files changed, 92 insertions(+), 24 deletions(-)

diff --git a/mz_v1_front/src/components/button/moving_filled.svelte b/mz_v1_front/src/components/button/moving_filled.svelte
index aff5185..f944dce 100644
--- a/mz_v1_front/src/components/button/moving_filled.svelte
+++ b/mz_v1_front/src/components/button/moving_filled.svelte
@@ -8,12 +8,24 @@
     export let name = "Do something";
     export let type = "button";
     export let targetPath = "/";
+    export let id;
+    export let latest_id;
+
+    async function handleClick() {
+        // id와 latest_id를 sessionStorage에 저장
+        sessionStorage.setItem('id', id);
+        sessionStorage.setItem('latest_id', latest_id);
+        alert(id, latest_id);
+
+        // targetPath로 페이지 이동
+        goto(targetPath);
+    }
     
   </script>
   
   <button
   type = {type}
-  on:click={goto(targetPath)}
+  on:click={handleClick}
     style="{'background: var(--neutral-10, #486284);border-radius: 50px; border-style: solid; border-color: var(--neutral-10, #486284); border-width: 1px; padding: 12px 20px 12px 20px; display: flex; flex-direction: row; gap: 10px; align-items: center; justify-content: center; position: relative; overflow: hidden;' + style}"
   >
     <div
diff --git a/mz_v1_front/src/routes/result/+page.svelte b/mz_v1_front/src/routes/result/+page.svelte
index f4e5eb7..4f71059 100644
--- a/mz_v1_front/src/routes/result/+page.svelte
+++ b/mz_v1_front/src/routes/result/+page.svelte
@@ -4,6 +4,7 @@
   import Header from "../../components/header_login.svelte";
   import StarRating from "../../components/rating/StarRating.svelte";
   import SaveImage from "../../components/button/result_save.svelte";
+  import { onMount } from 'svelte';
   let className = "";
   export { className as class };
   export let style;
@@ -13,6 +14,41 @@
   let voice_stretch_path = "https://blog.teamtailor.com/hs-fs/hubfs/giphy%20(3).gif?width=500&height=245&name=giphy%20(3).gif";
   let condition_stretch_path = "https://social-phinf.pstatic.net/20211122_62/1637573927058bhdFb_GIF/23ee09341fb3d26c2b57efc4dd3b928ea3364f68.gif";
   
+  let results = [];
+  let id = sessionStorage.getItem('id'); // 수정된 부분
+  let latest_id = sessionStorage.getItem('latest_id'); // 수정된 부분
+
+  onMount(async () => {
+    const token = sessionStorage.getItem('auth_token'); // sessionStorage에서 토큰 가져오기
+    const response = await fetch(`http://175.45.194.59:5050/api/v1/mz-request/${id}/mz-result/${latest_id}`, {
+      method: 'GET',
+      headers: {
+                'Token': token,
+      },
+      
+    });
+
+    if (response.ok) {
+      const data = await response.json();
+      results = data.mz_result; // 서버로부터 받은 데이터로 items 업데이트
+
+      console.log(results.voice_image_url)
+      console.log(results.condition_image_url)
+    } else if(response.status === 400) {
+      alert("데이터베이스 에러");
+    }else {
+      console.error('데이터를 가져오는 데 실패했습니다.');
+      alert("요청 중 에러가 발생했습니다.")
+    }
+  });
+
+  async function handleSubmit(event) {
+    event.preventDefault();
+
+  }
+  
+
+
 </script>
 <div
   style="{'background: var(--neutral-0, #ffffff);padding: 0px 0px 120px 0px; display: flex; flex-direction: column; gap: 30px; align-items: center; justify-content: flex-start; position: relative; ' + style}"
@@ -119,8 +155,8 @@
             </div>
           </div>
           <PlaceholderImage
-            style="flex-shrink: 0; width: 393px; height: 393px";
-            filename={voice_face_path}
+            style="flex-shrink: 0; width: 390px; height: 390px"
+            targetPath={results.voice_image_url}
           ></PlaceholderImage>
         </div>
         <div
@@ -156,7 +192,7 @@
             "
           >
           <StarRating />
-          <SaveImage targetImage= {voice_face_path}/>
+          <SaveImage targetImage= {results.voice_image_url}/>
             
           </div>
             
@@ -233,7 +269,7 @@
           </div>
           <PlaceholderImage
             style="flex-shrink: 0; width: 390px; height: 390px"
-            targetPath={condition_face_path}
+            targetPath={results.condition_image_url}
           ></PlaceholderImage>
         </div>
         <div
@@ -269,7 +305,7 @@
             "
           >
           <StarRating />
-          <SaveImage saveImage={condition_face_path} />
+          <SaveImage saveImage={results.condition_image_url} />
             
           </div>
             
diff --git a/mz_v1_front/src/routes/resultlist/+page.svelte b/mz_v1_front/src/routes/resultlist/+page.svelte
index 10ed7cf..ac0425e 100644
--- a/mz_v1_front/src/routes/resultlist/+page.svelte
+++ b/mz_v1_front/src/routes/resultlist/+page.svelte
@@ -1,17 +1,35 @@
 <script>
-  import ButtonStyleFilled from "../../components/button/basic_filled.svelte";
   import MovingFilled from "../../components/button/moving_filled.svelte";
   import Header from "../../components/header_login.svelte";
+  import { onMount } from 'svelte';
   let className = "";
   export { className as class };
   export let style;
-  import { Table, TableBody, TableBodyCell, TableBodyRow, TableHead, TableHeadCell, Checkbox} from 'flowbite-svelte';
+  import { Table, TableBody, TableBodyCell, TableBodyRow, TableHead, TableHeadCell} from 'flowbite-svelte';
 
- 
-  let items = [
-    { id: 1, request_date: 'Toyota', end_date: 'ABC', result_gender: 1 , result_age:1, make:1, result_audio: "url"},
-  
-  ];
+  let items = [];
+  // [id, user_id, age, gender, voice_url, created_at, latest_mz_result_id, statuss, updated_at]
+
+  onMount(async () => {
+    const token = sessionStorage.getItem('auth_token'); // sessionStorage에서 토큰 가져오기
+    const response = await fetch('http://175.45.194.59:5050/api/v1/mz-request', {
+      method: 'GET',
+      headers: {
+                'Token': token,
+      },
+    });
+
+    if (response.ok) {
+      const data = await response.json();
+      items = data.mz_request_list; // 서버로부터 받은 데이터로 items 업데이트
+      console.log(items[0]);
+    } else if(response.status === 400) {
+      alert("데이터베이스 에러");
+    }else {
+      console.error('데이터를 가져오는 데 실패했습니다.');
+      alert("요청 중 에러가 발생했습니다.")
+    }
+  });
   </script>
 
 
@@ -80,24 +98,26 @@ style="{'background: var(--neutral-0, #ffffff);padding: 0px 0px 120px 0px; displ
       {#each items as item}
         <TableBodyRow>
           <TableBodyCell>{item.id}</TableBodyCell>
-          <TableBodyCell>{item.request_date}</TableBodyCell>
-          <TableBodyCell>{item.end_date}</TableBodyCell>
-          <TableBodyCell>{item.result_gender}</TableBodyCell>
-          <TableBodyCell>{item.result_age}</TableBodyCell>
+          <TableBodyCell>{item.created_at}</TableBodyCell>
+          <TableBodyCell>
+            {#if item.updated_at != null} {item.updated_at}{/if}
+          </TableBodyCell>
+          <TableBodyCell>{item.gender}</TableBodyCell>
+          <TableBodyCell>{item.age}</TableBodyCell>
 
           <TableBodyCell>
-            {#if item.make == 0}<img src = "/resultlist/생성중.png" style="width: 100%; height: 45%; max-width: 100%; max-height: 100%; " alt="생성 중"/>
-            {:else if item.make == 1}<img src = "/resultlist/생성완료.png" style="width: 100%; height: 45%; max-width: 100%; max-height: 100%;" alt="생성 완료"/>
-            {:else if item.make == 2}<img src = "/resultlist/생성실패.png "style="width: 100%; height: 45%; max-width: 100%; max-height: 100%;" alt="생성 실패"/>
+            {#if item.status == null}<img src = "/resultlist/생성중.png" style="width: 100%; height: 45%; max-width: 100%; max-height: 100%; " alt="생성 중"/>
+            {:else if item.status == "Success"}<img src = "/resultlist/생성완료.png" style="width: 100%; height: 45%; max-width: 100%; max-height: 100%;" alt="생성 완료"/>
+            {:else}<img src = "/resultlist/생성실패.png "style="width: 100%; height: 45%; max-width: 100%; max-height: 100%;" alt="생성 실패"/>
             {/if}
           </TableBodyCell>
           <TableBodyCell>
-              <audio src={`/a4d0-472e-bb6d-d11ccac43e21`} controls></audio>
+              <audio src={item.voice_url} controls></audio>
             </TableBodyCell>
           <TableBodyCell>
-            {#if item.make ==1}
-              <MovingFilled targetPath='/result' name="결과 확인"> </MovingFilled>
-            {:else if item.make ==2}
+            {#if item.status =="Success"}
+              <MovingFilled targetPath='/result' name="결과 확인" id = {item.id} latest_id = {item.latest_mz_result_id}> </MovingFilled>
+            {:else if item.status == "Failed"}
               Error
               {/if}
             </TableBodyCell>