update available time

frontend/src/interfaces/index.ts

@@ -39,6 +39,7 @@ export interface MainState {
   notifications: AppNotification[];
   videos: Video[];
   images: Image[];
+  videosWebSocket: WebSocket;
 };
 
 export interface Video {
@@ -71,4 +72,4 @@ export interface Image {
 export interface ImageDownload {
   file_name: string;
   stored_file_name: string;
-}
+}

frontend/src/stores/main.ts

@@ -18,6 +18,7 @@ const defaultState: MainState = {
   notifications: [],
   videos: [],
   images: [],
+  videosWebSocket: new WebSocket(`${wsUrl}/api/v1/videos`)
 };
 
 export const useMainStore = defineStore("MainStoreId", {

frontend/src/views/main/Dashboard.vue

@@ -25,7 +25,7 @@ const greetedUser = computed(() => {
 <template>
   <v-container fluid>
     <v-row dense>
-      <v-col cols="12">
+      <v-col cols="6">
         <v-card class="ma-3 pa-3">
           <v-card-title primary-title>
             <h3>Welcome {{ greetedUser }}</h3>
@@ -66,7 +66,7 @@ const greetedUser = computed(() => {
       </v-card-actions> -->
         </v-card>
       </v-col>
-      <v-col cols="6">
+      <!-- <v-col cols="6">
         <v-card class="ma-3 pa-3 second-item">
           <v-card-title primary-title>
             <h3>已使用秒數</h3>
@@ -85,16 +85,9 @@ const greetedUser = computed(() => {
             >
               查看詳情
             </v-btn>
-            <!-- <v-btn
-              to="/main/profile/password"
-              variant="flat"
-              color="primary"
-              style="padding: 0 15px"
-              >{{ t("changePassword") }}</v-btn
-            > -->
           </v-card-actions>
         </v-card>
-      </v-col>
+      </v-col> -->
       <v-col cols="6">
         <v-card class="ma-3 pa-3 second-item">
           <v-card-title primary-title>
@@ -141,6 +134,9 @@ h4 {
 }
 
 .second-item {
+  height: 255px;
+  display: flex;
+  flex-direction: column;
   strong {
     font-size: 30px;
     font-weight: 500;

frontend/src/views/main/Progress.vue

@@ -3,14 +3,12 @@ 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;
+const WS = mainStore.videosWebSocket;
 
 const headers = [
   {
@@ -38,14 +36,19 @@ function previewVideo(name: String) {
 onMounted(async () => {
   await mainStore.actionGetVideos();
   WS.onmessage = function (e) {
+    console.log('onmessage',e);
     const data = e.data.split(':');
     mainStore.videos.map(e=>{
       if(e.stored_filename===data[0]) {
-        e.progress_state = data[1];
+        e.progress_state = data[1]; // 影片狀態
+        if (mainStore.userProfile && data[2]) {
+          mainStore.userProfile.available_time = mainStore.userProfile.available_time - parseInt(data[2]); // 使用秒數
+        }
       }
     })
   };
 });
+
 </script>
 
 <template>

frontend/src/views/main/Upload.vue

@@ -15,9 +15,9 @@ let dialog = reactive({
   show: false,
 });
 
-const WS = new WebSocket(`${wsUrl}/api/v1/videos`);
-
 const { t } = useI18n();
+const mainStore = useMainStore();
+const WS = mainStore.videosWebSocket;
 const valid = ref(true);
 const title = ref("");
 const zipFiles = ref();
@@ -167,8 +167,6 @@ const getImageUrl = (imgFolder: string, name: string) => {
     .href;
 };
 
-const mainStore = useMainStore();
-
 watch(dialog, (newVal, oldVal) => {
   if (!newVal.show) {
     setTimeout(() => {
@@ -193,6 +191,7 @@ async function Submit() {
     };
 
     await mainStore.uploadPlot(video_data, zipFiles.value[0]);
+    valid.value = true;
     // (Form as any).value.reset();
   }
 }