Router: change /Discover to /Discover/map/type/filterId

src/views/Discover/Conformance/index.vue

@@ -0,0 +1,29 @@
+<template>
+  <StatusBar></StatusBar>
+  <h1>Conformance</h1>
+</template>
+<script>
+import { storeToRefs } from 'pinia';
+import LoadingStore from '@/stores/loading.js';
+import StatusBar from '@/components/Discover/Conformance/StatusBar.vue';
+
+export default {
+  setup() {
+    const loadingStore = LoadingStore();
+    const { isLoading } = storeToRefs(loadingStore);
+
+    return { isLoading }
+  },
+  components: {
+    StatusBar,
+  },
+  async created() {
+    let logId;
+    if(this.$route.params.type === 'log') logId = this.$route.params.fileId;
+    console.log(logId);
+
+    // this.isLoading = true;
+    this.isLoading = false;
+  },
+}
+</script>

src/views/Discover/Map/index.vue

@@ -58,10 +58,10 @@ import { storeToRefs } from 'pinia';
 import LoadingStore from '@/stores/loading.js';
 import AllMapDataStore from '@/stores/allMapData.js';
 import cytoscapeMap from '@/module/cytoscapeMap.js';
-import SidebarView from '@/components/Discover/SidebarView.vue';
-import SidebarState from '@/components/Discover/SidebarState.vue';
-import SidebarTraces from '@/components/Discover/SidebarTraces.vue';
-import SidebarFilter from '@/components/Discover/SidebarFilter.vue';
+import SidebarView from '@/components/Discover/Map/SidebarView.vue';
+import SidebarState from '@/components/Discover/Map/SidebarState.vue';
+import SidebarTraces from '@/components/Discover/Map/SidebarTraces.vue';
+import SidebarFilter from '@/components/Discover/Map/SidebarFilter.vue';
 
 export default {
   setup() {
@@ -293,11 +293,13 @@ export default {
     },
   },
   async created() {
-    // Log 檔前往 DiscoverLog 頁, Filter 檔前往 DiscoverFilter 頁
-    if(this.$route.name === 'DiscoverLog'){
-      this.logId = this.$route.params.logId;
-    }else if(this.$route.name === 'DiscoverFilter') {
-      this.createFilterId = this.$route.params.filterId;
+    // 先 loading 再執行以下程式
+    this.isLoading = true;
+    // Log 檔前往 Map Log 頁, Filter 檔前往 Map Filter 頁
+    if(this.$route.params.type === 'log'){
+      this.logId = this.$route.params.fileId;
+    }else if(this.$route.params.type === 'filter') {
+      this.createFilterId = this.$route.params.fileId;
       // 取得 logID 和上次儲存的 Funnel
       await this.allMapDataStore.fetchFunnel(this.createFilterId);
       this.isRuleData = await Array.from(this.temporaryData);
@@ -310,8 +312,7 @@ export default {
     this.createCy(this.mapType);
     await this.allMapDataStore.getFilterParams();
 
-    this.isLoading = true;
-    await new Promise(resolve => setTimeout(resolve, 1000));
+    // 執行完後才取消 loading
     this.isLoading = false;
   },
 }

src/views/Files/index.vue

@@ -132,18 +132,20 @@
        * @param {object} file
        */
       enterDiscover(file){
-        let logId;
-        let filterId;
+        let type;
+        let fileId;
 
         if(file.fileType === 'Log'){
           this.createFilterId = null;
-          logId = file.id;
-          this.$router.push({name: 'DiscoverLog', params: { logId: logId }})
+          fileId = file.id;
+          type = 'log';
+          this.$router.push({name: 'Map', params: { type: type, fileId: fileId }})
         }
         else if(file.fileType === 'Filter') {
           this.createFilterId = file.id;
-          filterId = file.id;
-          this.$router.push({name: 'DiscoverFilter', params: { filterId: filterId }})
+          fileId = file.id;
+          type = 'filter';
+          this.$router.push({name: 'Map', params: { type: type, fileId: fileId }})
         }
       }
     },

src/views/MainContainer.vue

@@ -27,17 +27,17 @@ export default {
     const loadingStore = LoadingStore();
     const allMapDataStore = AllMapDataStore();
     const { checkLogin } = loginStore;
-    const { tempFilterId, createFilterId,  temporaryData, postRuleData } = storeToRefs(allMapDataStore);
+    const { tempFilterId, createFilterId,  temporaryData, postRuleData, ruleData } = storeToRefs(allMapDataStore);
 
-    return { checkLogin, loadingStore, temporaryData, tempFilterId, createFilterId, postRuleData, allMapDataStore };
+    return { checkLogin, loadingStore, temporaryData, tempFilterId, createFilterId, postRuleData, ruleData, allMapDataStore };
   },
   watch: {
     $route: function(to, from) {
-      // 離開 DiscoverLog 頁要將 Funnel 的規則刪除, DiscoverFilter 會帶上次儲存的 Funnel, 所以不用錯做
-      if(to.name !== 'DiscoverLog') {
+      // 離開 Map Log 頁要將 Funnel 的規則刪除, Map Filter 會帶上次儲存的 Funnel, 所以不用做
+      if(from.name === 'Map' && from.params.type === 'log') {
         this.tempFilterId = null;
-        this.temporaryData = []
-        this.postRuleData = []
+        this.temporaryData = [];
+        this.postRuleData = [];
       }
     }
   },
@@ -61,8 +61,8 @@ export default {
   },
   beforeRouteUpdate(to, from, next) {
     // 離開 Discover 頁時判斷是否有無資料和需要存檔
-    if ((from.name === 'DiscoverLog' || from.name === 'DiscoverFilter') && this.tempFilterId) {
-      leaveFilter(next, this.allMapDataStore.addFilterId)
+    if ((from.name === 'Map') && this.tempFilterId) {
+      leaveFilter(next, this.allMapDataStore.addFilterId, to.path)
     } else {
       next();
     }