update websocket

frontend/src/api.ts

@@ -15,14 +15,12 @@ export const api = {
     const params = new URLSearchParams();
     params.append("username", username);
     params.append("password", password);
-
     return axios.post(`${apiUrl}/api/v1/login/access-token`, params);
   },
   async qrLogInGetToken(username: string, password: string,ser_no: string) {
     const params = new URLSearchParams();
     params.append("username", username);
     params.append("password", password);
-
     return axios.post(`${apiUrl}/api/v1/login/access-token?add_time_code=${ser_no}`, params);
   },
   async googleLogin(username: string) {

frontend/src/views/main/Dashboard.vue

@@ -11,7 +11,6 @@ const userProfile = mainStoreRef.readUserProfile;
 
 const greetedUser = computed(() => {
   const userProfile = mainStoreRef.readUserProfile;
-  console.log("userProfile", userProfile);
 
   if (userProfile.value) {
     if (userProfile.value!.full_name) {

frontend/src/views/main/Progress.vue

@@ -3,8 +3,11 @@ import { useMainStore } from "@/stores/main";
 import { storeToRefs } from "pinia";
 import { onMounted } from "vue";
 import { useI18n } from "vue-i18n";
+import { wsUrl } from "@/env";
 
 const { t } = useI18n();
+const WS = new WebSocket(`${wsUrl}/api/v1/videos`);
+
 const mainStore = useMainStore();
 const mainStoreRef = storeToRefs(mainStore);
 const videos = mainStoreRef.readVideos;
@@ -34,6 +37,14 @@ function previewVideo(name: String) {
 
 onMounted(async () => {
   await mainStore.actionGetVideos();
+  WS.onmessage = function (e) {
+    const data = e.data.split(':');
+    mainStore.videos.map(e=>{
+      if(e.stored_filename===data[0]) {
+        e.progress_state = data[1];
+      }
+    })
+  };
 });
 </script>
 
@@ -50,15 +61,15 @@ onMounted(async () => {
       :sort-by="[{ key: 'id', order: 'desc' }]"
     >
       <template v-slot:item.progress_state="{ item }">
-        <span v-if="item.raw.progress_state === 'completed'">
+        <span v-if="item.raw.progress_state === 'SUCCESS'">
           <v-icon icon="check_circle" color="success" />
           完成
         </span>
-        <span v-else-if="item.raw.progress_state === 'waiting'">
+        <span v-else-if="item.raw.progress_state === 'PENDING'">
           <v-icon icon="pending" color="warning" />
           等待中
         </span>
-        <span v-else-if="item.raw.progress_state === 'processing'">
+        <span v-else-if="item.raw.progress_state === 'STARTED'">
           <v-progress-circular
             indeterminate
             color="info"
@@ -74,8 +85,8 @@ onMounted(async () => {
       <template v-slot:item.id="{ item }">
         <v-btn
           flat
-          :disabled="item.raw.progress_state !== 'completed'"
-          @click="previewVideo(item.raw.stored_file_name)"
+          :disabled="item.raw.progress_state !== 'SUCCESS'"
+          @click="previewVideo(item.raw.stored_filename)"
         >
           <v-icon icon="play_circle" />
         </v-btn>

frontend/src/views/main/Upload.vue

@@ -3,6 +3,7 @@ import { ref, reactive, watch, computed } from "vue";
 import { useMainStore } from "@/stores/main";
 import { required } from "@/utils";
 import { useI18n } from "vue-i18n";
+import { wsUrl } from "@/env";
 import type { VideoCreate } from "@/interfaces";
 import router from "@/router";
 import Dialog from "@/components/Dialog.vue";
@@ -14,6 +15,8 @@ let dialog = reactive({
   show: false,
 });
 
+const WS = new WebSocket(`${wsUrl}/api/v1/videos`);
+
 const { t } = useI18n();
 const valid = ref(true);
 const title = ref("");
@@ -170,11 +173,12 @@ watch(dialog, (newVal, oldVal) => {
   if (!newVal.show) {
     setTimeout(() => {
       router.push("/main/progress");
-    }, 500);
+    }, 1000);
   }
 });
 
 async function Submit() {
+  WS.send("subscribe");
   setTimeout(() => {
     dialog.show = true;
   }, 2000);