update ui

frontend/src/api.ts

@@ -61,7 +61,7 @@ export const api = {
     const formData = new FormData();
     formData.append("title", title)
     formData.append("upload_file", file)
-    return axios.post<{msg:string}>(`${apiUrl}/api/v1/videos`, formData, authHeaders(token));
+    return axios.post<{msg:string}>(`${apiUrl}/api/v1/videos/`, formData, authHeaders(token));
   },
   async getVideos(token: string) {
     return axios.get<Video[]>(`${apiUrl}/api/v1/videos/`, authHeaders(token));

frontend/src/interfaces/index.ts

@@ -42,5 +42,6 @@ export interface MainState {
 export interface Video {
   id: number;
   title: string;
+  stored_file_name: string;
   progress_state: string;
 }

frontend/src/language/en.json

@@ -42,6 +42,7 @@
     "title": "Title",
     "state": "State",
     "download": "Download",
+    "preview": "Preview",
     "saving": "saving",
     "sending": "sending",
     "fileInput": "File input",

frontend/src/language/zh.json

@@ -42,6 +42,7 @@
     "title": "標題",
     "state": "狀態",
     "download": "下載",
+    "preview": "預覽",
     "saving": "儲存中",
     "sending": "上傳中",
     "fileInput": "檔案上傳",

frontend/src/views/main/Progress.vue

@@ -8,7 +8,6 @@ const { t } = useI18n();
 const mainStore = useMainStore();
 const mainStoreRef = storeToRefs(mainStore);
 const videos = mainStoreRef.readVideos;
-console.log('videos',videos);
 
 const headers = [
   {
@@ -24,11 +23,15 @@ const headers = [
     align: "left",
   },
   {
-    title: t("download"),
+    title: t("preview"),
     key: "id",
   },
 ];
 
+function previewVideo(name: String) {
+  window.open(`http://172.104.93.163:30080/${name}.mp4`);
+}
+
 onMounted(async () => {
   await mainStore.actionGetVideos();
 });
@@ -42,17 +45,35 @@ onMounted(async () => {
       </v-toolbar-title>
     </v-toolbar>
     <v-data-table :headers="headers" :items="videos">
+      <template v-slot:item.progress_state="{ item }">
+        <span v-if="item.raw.progress_state === 'completed'">
+          <v-icon icon="check_circle" color="success" />
+          完成
+        </span>
+        <span v-else-if="item.raw.progress_state === 'waiting'">
+          <v-icon icon="pending" color="warning" />
+          等待中
+        </span>
+        <span v-else-if="item.raw.progress_state === 'processing'">
+          <v-progress-circular
+            indeterminate
+            color="info"
+            style="width: 20px"
+          ></v-progress-circular>
+          處理中
+        </span>
+        <span v-else>
+          <v-icon icon="warning" color="error" />
+          失敗
+        </span>
+      </template>
       <template v-slot:item.id="{ item }">
         <v-btn
           flat
-          :to="{
-            name: 'main-admin-users-edit',
-            params: { id: item.columns.id },
-          }"
           :disabled="item.raw.progress_state !== 'completed'"
+          @click="previewVideo(item.raw.stored_file_name)"
         >
-         {{ item.progress_state }}
-          <v-icon icon="file_download" />
+          <v-icon icon="play_circle" />
         </v-btn>
       </template>
     </v-data-table>

frontend/src/views/main/Upload.vue

@@ -1,22 +1,31 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import { useMainStore } from "@/stores/main";
 import { required } from "@/utils";
 import { useI18n } from "vue-i18n";
+import router from "@/router";
 
 const { t } = useI18n();
 const valid = ref(true);
+const dialog = ref(false);
 const title = ref("");
 const zipFiles = ref();
 const Form = ref();
 
 const mainStore = useMainStore();
 
+watch(dialog, (newVal, oldVal) => {
+  if (!newVal) {
+    router.push("/main/progress");
+  }
+});
+
 async function Submit() {
   await (Form as any).value.validate();
   if (valid.value) {
     await mainStore.uploadPlot(title.value, zipFiles.value[0]);
     (Form as any).value.reset();
+    dialog.value = true;
   }
 }
 </script>
@@ -52,5 +61,29 @@ async function Submit() {
         </v-btn>
       </v-card-actions>
     </v-card>
+
+    <template>
+      <div class="text-center">
+        <v-dialog v-model="dialog" width="auto">
+          <v-card>
+            <v-card-text>
+              <section class="d-flex flex-column align-center">
+                <v-icon
+                  style="font-size: 70px"
+                  icon="info"
+                  color="orange-darken-3"
+                />
+                <p class="mt-3">影片處理需要約 5-10 分鐘，敬請耐心等候</p>
+              </section>
+            </v-card-text>
+            <v-card-actions>
+              <v-btn color="primary" block @click="dialog = false">{{
+                t("close")
+              }}</v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-dialog>
+      </div>
+    </template>
   </v-container>
 </template>