update

frontend/src/api.ts

@@ -73,8 +73,27 @@ export const api = {
     }
     return axios.post<{ filenames: string[] }>(`${apiUrl}/api/v1/images/sr`, formData, authHeaders(token));
   },
-  async getImage(token: string, data: ImageDownload) {
-    axios({
+  // async getImage(token: string, data: ImageDownload) {
+  //   axios({
+  //     url: `${apiUrl}/api/v1/images/sr?stored_file_name=${data.stored_file_name}&file_name=${data.file_name}`,
+  //     method: 'GET',
+  //     responseType: 'blob',
+  //     headers: {
+  //       'Authorization': `Bearer ${token}`
+  //     },
+  //   }).then((response) => {
+  //     const href = URL.createObjectURL(response.data);
+  //     const link = document.createElement('a');
+  //     link.href = href;
+  //     link.setAttribute('download', `${data.file_name}_hr.png`);
+  //     document.body.appendChild(link);
+  //     link.click();
+  //     document.body.removeChild(link);
+  //     URL.revokeObjectURL(href);
+  //   });
+  // },
+  async downloadImage(token: string, data: ImageDownload) {
+    return axios({
       url: `${apiUrl}/api/v1/images/sr?stored_file_name=${data.stored_file_name}&file_name=${data.file_name}`,
       method: 'GET',
       responseType: 'blob',
@@ -82,14 +101,7 @@ export const api = {
         'Authorization': `Bearer ${token}`
       },
     }).then((response) => {
-      const href = URL.createObjectURL(response.data);
-      const link = document.createElement('a');
-      link.href = href;
-      link.setAttribute('download', `${data.file_name}_hr.png`);
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-      URL.revokeObjectURL(href);
+      return response;
     });
   },
   async uploadArticle(token: string, article_data: ArticleCreate) {

frontend/src/interfaces/index.ts

@@ -4,6 +4,7 @@ export interface IUserProfile {
   is_superuser: boolean;
   full_name?: string;
   id: number;
+  available_time: number; 
 }
 
 export interface IUserProfileUpdate {
@@ -64,6 +65,7 @@ export interface Image {
   stored_file_name: string;
   content: string;
   state: string;
+  link: any;
 }
 
 export interface ImageDownload {

frontend/src/language/en.json

@@ -1,6 +1,7 @@
 {
     "login" : "Login",
     "loggedIn" : "Logged in",
+    "loggedError" : "Incorrect email or password",
     "loginLink" : "Login",
     "logout": "Logout",
     "submit": "Submit",
@@ -18,6 +19,7 @@
     "signingUp": "signing up...",
     "registerLink": "Register",
     "registerSuccess": "Successfully registered",
+    "registerError": "The user with this email already exists in the system",
     "privacy_term_1": "Registeration implies acception of \n \n \n",
     "privacy_term_2": "terms of service and privacy policy",
     "forgotPsd": "Forgot Password",

frontend/src/language/zh.json

@@ -1,6 +1,7 @@
 {
     "login" : "登入",
     "loggedIn" : "登入成功",
+    "loggedError" : "帳號或密碼不正確",
     "loginLink" : "立即登入",
     "logout": "登出",
     "submit": "送出",
@@ -18,6 +19,7 @@
     "signingUp": "註冊中...",
     "registerLink": "立即註冊",
     "registerSuccess": "註冊成功",
+    "registerError": "此電子郵件地址已被使用",
     "privacy_term_1": "註冊即表示您已閱讀並同意",
     "privacy_term_2": "服務條款及隱私權政策",
     "forgotPsd": "忘記密碼",

frontend/src/stores/main.ts

@@ -70,6 +70,7 @@ export const useMainStore = defineStore("MainStoreId", {
           await this.logOut();
         }
       } catch (err) {
+        this.addNotification({ content: i18n.global.t("loggedError"), color: "error" });
         this.setLogInError(true);
         await this.logOut();
       }
@@ -188,6 +189,7 @@ export const useMainStore = defineStore("MainStoreId", {
           router.push("/login")
         }, 2000)
       } catch (error) {
+        this.addNotification({ content: i18n.global.t("registerError"), color: "error" });
         await this.checkApiError(error);
       }
     },
@@ -272,7 +274,8 @@ export const useMainStore = defineStore("MainStoreId", {
                 file_name: file[i].name,
                 stored_file_name: element,
                 content: "sr",
-                state: "subscribe"
+                state: "subscribe",
+                link: ""
               };
               this.addImage(tmpImage);
             }
@@ -289,38 +292,42 @@ export const useMainStore = defineStore("MainStoreId", {
         await mainStore.checkApiError(error);
       }
     },
-    async getImage(data: ImageDownload) {
-      const mainStore = useMainStore();
-      try {
-        const response = (
-          await Promise.all([
-            api.getImage(mainStore.token, data),
-            await new Promise<void>((resolve, _) => setTimeout(() => resolve(), 0)),
-          ])
-        );
-      } catch (error) {
-        await mainStore.checkApiError(error);
-      }
-    },
+    // async getImage(data: ImageDownload) {
+    //   const mainStore = useMainStore();
+    //   try {
+    //     const response = (
+    //       await Promise.all([
+    //         api.getImage(mainStore.token, data),
+    //         await new Promise<void>((resolve, _) => setTimeout(() => resolve(), 0)),
+    //       ])
+    //     );
+    //   } catch (error) {
+    //     await mainStore.checkApiError(error);
+    //   }
+    // },
     addImage(payload: Image) {
       this.images.push(payload);
     },
-    finishImage(payload: string) {
+    async finishImage(payload: ImageDownload) {
       const WS = new WebSocket(`${wsUrl}/api/v1/images/sr`);
       let image = this.images.filter(e => {
-        return payload.includes(e.stored_file_name)
+        return payload.stored_file_name.includes(e.stored_file_name)
       });
-
-      if (image) {
-        image.map(e => {
-          e.state = "completed";
-        })
+      const mainStore = useMainStore();
+      try {
+        const response = await api.downloadImage(mainStore.token, payload);
+        if (image) {
+          image.map(e => {
+            e.state = "completed";
+            e.link = response.data;
+          })
+        }
+      } catch (error) {
+        await mainStore.checkApiError(error);
       }
 
       // 全部完成後回傳 WebSocket
       let processing = this.images.find(e => e.state !== "completed");
-      console.log('processing', processing);
-
       if (!processing) {
         setTimeout(() => {
           // WS.close();

frontend/src/views/main/Dashboard.vue

@@ -11,6 +11,8 @@ const userProfile = mainStoreRef.readUserProfile;
 
 const greetedUser = computed(() => {
   const userProfile = mainStoreRef.readUserProfile;
+  console.log("userProfile", userProfile);
+
   if (userProfile.value) {
     if (userProfile.value!.full_name) {
       return userProfile.value!.full_name;
@@ -71,7 +73,7 @@ const greetedUser = computed(() => {
             <h3>已使用秒數</h3>
           </v-card-title>
           <v-card-text class="mt-3">
-            <strong>50</strong><small>秒</small>
+            <strong>0</strong><small>秒</small>
           </v-card-text>
           <v-divider></v-divider>
           <v-card-actions>
@@ -99,8 +101,12 @@ const greetedUser = computed(() => {
           <v-card-title primary-title>
             <h3>可使用秒數</h3>
           </v-card-title>
-          <v-card-text class="mt-3">
-            <strong>300</strong><small>秒</small>
+          <v-card-text
+            v-if="userProfile"
+            class="mt-3"
+          >
+            <strong>{{ userProfile.available_time }}</strong
+            ><small>秒</small>
           </v-card-text>
           <v-divider></v-divider>
           <v-card-actions>

frontend/src/views/main/Image.vue

@@ -68,18 +68,42 @@ onMounted(() => {
   // webSocket
   WS.onmessage = function (e) {
     setTimeout(() => {
-      mainStore.finishImage(e.data);
+      let image: ImageDownload = {
+        file_name: "",
+        stored_file_name: "",
+      };
+
+      mainStore.images.map((item) => {
+        if (item.stored_file_name === e.data) {
+          image.file_name = item.file_name;
+          image.stored_file_name = item.stored_file_name;
+        }
+      });
+      mainStore.finishImage(image);
     }, 1000);
   };
 });
 
-async function downloadImg(name: string, id: string) {
-  const data: ImageDownload = {
-    file_name: name.split(".")[0],
-    stored_file_name: id,
-  };
+async function downloadImg(file_name: string, stored_file_name: string) {
+  mainStore.images.map((item) => {
+    if (item.stored_file_name === stored_file_name) {
+      // 生成下載連結
+      const href = URL.createObjectURL(item.link);
+      const link = document.createElement("a");
+      link.href = href;
+      link.setAttribute("download", `${file_name}_hr.png`);
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(href);
+    }
+  });
+  // const data: ImageDownload = {
+  //   file_name: file_name.split(".")[0],
+  //   stored_file_name: stored_file_name,
+  // };
 
-  await mainStore.getImage(data);
+  // await mainStore.getImage(data);
 }
 
 const headers = [