add check zip frontend

frontend/src/api.ts

@@ -1,6 +1,6 @@
 import axios from "axios";
 import { apiUrl } from "@/env";
-import type { IUserProfile, IUserProfileUpdate, IUserProfileCreate, Video, VideoCreate, ArticleCreate, ImageDownload } from "@/interfaces";
+import type { IUserProfile, IUserProfileUpdate, IUserProfileCreate, Video, VideoCreate, ArticleCreate, ImageDownload, VideoUploaded } from "@/interfaces";
 
 function authHeaders(token: string) {
   return {
@@ -84,7 +84,7 @@ export const api = {
     formData.append("anchor_id", video_data.anchor_id.toString())
     formData.append("lang_id", video_data.lang_id.toString())
     formData.append("upload_file", file)
-    return axios.post<{ msg: string }>(`${apiUrl}/api/v1/videos/`, formData, authHeaders(token));
+    return axios.post<VideoUploaded>(`${apiUrl}/api/v1/videos/`, formData, authHeaders(token));
   },
   async uploadImage(token: string, file: File[]) {
     const formData = new FormData();

frontend/src/interfaces/index.ts

@@ -55,6 +55,12 @@ export interface VideoCreate {
   lang_id: number;
 }
 
+export interface VideoUploaded {
+  accepted: boolean;
+  error_message: string | null;
+  video_info: Video | null;
+}
+
 export interface ArticleCreate {
   title: string;
   link: string;

frontend/src/language/en.json

@@ -58,5 +58,6 @@
     "editUserProfile": "Edit User Profile",
     "incorrectUsername": "Incorrect username",
     "sendingEmail": "Sending password recovery email",
-    "passwordMailSent": "Password recovery email sent"
+    "passwordMailSent": "Password recovery email sent",
+    "acceptZipMessage": "Video processing takes about 5-10 minutes, please be patient"
 }

frontend/src/language/zh.json

@@ -58,5 +58,6 @@
     "editUserProfile": "編輯資料",
     "incorrectUsername": "使用者名稱不正確",
     "sendingEmail": "傳送電子郵件中",
-    "passwordMailSent": "重置密碼電子郵件已傳送"
+    "passwordMailSent": "重置密碼電子郵件已傳送",
+    "acceptZipMessage": "影片處理需要約 5-10 分鐘，敬請耐心等候"
 }

frontend/src/router/index.ts

@@ -129,6 +129,18 @@ const router = createRouter({
                   component: () => import(
                     /* webpackChunkName: "main-admin-users-create" */ '@/views/main/admin/TestCelery.vue'),
                 },
+                {
+                  path: 'test-ecpay',
+                  name: 'test-ecpay',
+                  component: () => import(
+                    /* webpackChunkName: "main-admin-users-create" */ '@/views/main/admin/TestECPay.vue'),
+                },
+                {
+                  path: 'test-style-preview',
+                  name: 'test-style-preview',
+                  component: () => import(
+                    /* webpackChunkName: "main-admin-users-create" */ '@/views/main/admin/TestStylePreview.vue'),
+                },
               ],
             },
           ],

frontend/src/stores/main.ts

@@ -4,7 +4,7 @@ import { api } from "@/api"
 import router from "@/router"
 import { getLocalToken, removeLocalToken, saveLocalToken } from "@/utils";
 import type { AppNotification } from '@/interfaces';
-import type { IUserProfile, IUserProfileCreate, IUserProfileUpdate, MainState, Video, VideoCreate, ArticleCreate, Image, ImageDownload } from '@/interfaces';
+import type { IUserProfile, IUserProfileCreate, IUserProfileUpdate, MainState, Video, VideoCreate, ArticleCreate, Image, ImageDownload, VideoUploaded } from '@/interfaces';
 import i18n from '@/plugins/i18n'
 import { wsUrl } from "@/env";
 
@@ -324,9 +324,12 @@ export const useMainStore = defineStore("MainStoreId", {
           color: "success",
         })
         this.actionGetVideos();
+        return response[0].data;
       } catch (error) {
         await mainStore.checkApiError(error);
       }
+      const ret: VideoUploaded = {accepted:false, error_message:"api error", video_info: null}
+      return ret
     },
     async uploadImage(file: File[]) {
       const mainStore = useMainStore();

frontend/src/views/main/Main.vue

@@ -149,6 +149,18 @@ const routeGuardAdmin = async (
             >
               <v-list-item-title>Test Celery</v-list-item-title>
             </v-list-item>
+            <v-list-item
+              to="/main/admin/test-ecpay"
+              prepend-icon="payments"
+            >
+              <v-list-item-title>Test ECPay</v-list-item-title>
+            </v-list-item>
+            <v-list-item
+              to="/main/admin/test-style-preview"
+              prepend-icon="preview"
+            >
+              <v-list-item-title>Test Style Preview</v-list-item-title>
+            </v-list-item>
           </v-list>
         </v-sheet>
         <!-- <v-spacer></v-spacer> -->

frontend/src/views/main/admin/TestECPay.vue

@@ -0,0 +1,55 @@
+<template>
+  <v-container fluid>
+    <v-card class="ma-3 pa-3">
+      <v-card-title primary-title>
+        <div class="headline primary--text">Test ECPay</div>
+      </v-card-title>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn @click="ECPaySubmit">
+              Send
+            </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-container>
+</template>
+<script setup lang="ts">
+import { ref} from 'vue';
+import { required } from '@/utils';
+import { useAdminStore } from '@/stores/admin';
+import axios from "axios"; 
+
+async function ECPaySubmit() {
+  console.log("ECPay button pushed")
+  const formData = new URLSearchParams();
+  formData.append("MerchantID", "3002607") //必填
+  formData.append("MerchantTradeNo", "AAA000") //必填
+  formData.append("MerchantTradeDate", "2023/05/15 10:35:10") //必填
+  formData.append("PaymentType", "aio") //必填
+  formData.append("TotalAmount", "600") //必填
+  formData.append("TradeDesc", "choozmo SaaS") //必填
+  formData.append("ItemName", "charge600") //必填
+  formData.append("ReturnURL", "https:cloud.choozmo.com") //必填
+  formData.append("ChoosePayment", "ALL") //必填
+  formData.append("CheckMacValue", "choaho")
+  formData.append("EncryptType", "1") //必填
+  formData.append("StoreID", "")
+  formData.append("ClientBackURL", "")
+  formData.append("ItemURL", "")
+  formData.append("Remark", "")
+  formData.append("ChooseSubPayment", "")
+  formData.append("OrderResultURL", "")
+  formData.append("NeedExtraPaidInfo", "")
+  formData.append("IgnorePayment", "")
+  formData.append("PlatformID", "")
+  formData.append("IgnorePayment", "")
+  formData.append("CustomField1 ", "")
+  formData.append("CustomField2", "")
+  formData.append("CustomField3", "")
+  formData.append("CustomField4", "")
+  formData.append("Language", "")
+  return axios.post("https://payment-stage.ecpay.com.tw/Cashier/AioCheckOut/V5", formData)
+  
+
+}
+</script>

frontend/src/views/main/admin/TestStylePreview.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { ref, reactive, watch, computed } from "vue";
+
+const inputFiles = ref();
+const preview_list:any = ref([]);
+const image_list:any = ref([]);
+
+
+function uploadImage() {
+  console.log(inputFiles.value[0])
+  const reader = new FileReader();
+  
+  reader.onload = function () {
+    preview_list.value.push(reader.result)
+  }
+  image_list.value.push(inputFiles.value[0]);
+  reader.readAsDataURL(inputFiles.value[0]);
+  console.log('finish uploadImage')
+  console.log(image_list.value[0].name)
+};
+</script>
+<template>
+  <div class="border p-2 mt-3">
+    <p>Style Preview</p>
+  </div>
+  
+  
+
+  <v-file-input
+    v-model="inputFiles"
+    accept="image/*, video/*"
+    :label="$t('fileInput')"
+    prepend-icon="add_photo_alternate"
+    @update:model-value="uploadImage"
+  ></v-file-input>
+  <v-sheet  class="canvas d-flex">
+    <template v-if="preview_list.length">
+      <div v-for="item in preview_list">
+        <img :src="item" class="img-fluid" />
+      </div>
+    </template>
+  </v-sheet> 
+  <v-sheet class="img-list"  color="grey-lighten-3">
+    <template v-if="image_list.length">
+      <div v-for="item in image_list">
+        <p class="mb-0">file name: {{ item.name }}</p>
+      </div>
+    </template>
+  </v-sheet>
+
+
+</template>
+<style lang="scss">
+.img-fluid {
+  
+}
+</style>
+