From 5f0e12ef1a895c5a4fc47f3dca689172f3b8d160 Mon Sep 17 00:00:00 2001
From: Cindy Chang <cindy.chang@dsp.im>
Date: Wed, 5 Jun 2024 13:08:52 +0800
Subject: [PATCH] pageAdmin add setActivePageComputedByRoute function

---
 .../Conformance/ConformanceSidebar.vue        | 217 +++++++++---------
 .../ConformanceSidebar/TimeRangeDuration.vue  |   8 +-
 src/components/Navbar.vue                     |  38 ++-
 src/components/durationjs.vue                 |   3 +-
 src/i18n/en.json                              |   7 +-
 src/module/alertModal.js                      |   6 +
 src/module/timeLabel.js                       |   8 +-
 src/stores/pageAdmin.js                       |  26 ++-
 src/utils/pageUtils.js                        |  19 ++
 src/views/MainContainer.vue                   |  16 +-
 10 files changed, 213 insertions(+), 135 deletions(-)

diff --git a/src/components/Discover/Conformance/ConformanceSidebar.vue b/src/components/Discover/Conformance/ConformanceSidebar.vue
index 408ed2f..7c100fe 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar.vue
@@ -24,53 +24,53 @@
         </div>
         <!-- select result -->
         <ConformanceSelectResult
-        :isSubmit="isAlreadySubmit"
-        :isSubmitTask="isSubmitTask"
-        :isSubmitStartAndEnd="isSubmitStartAndEnd"
-        :isSubmitCfmSeqDirectly="isSubmitCfmSeqDirectly"
-        :isSubmitCfmSeqEventually="isSubmitCfmSeqEventually"
-        :isSubmitDurationData="isSubmitDurationData"
-        :isSubmitCfmPtEteStart="isSubmitCfmPtEteStart"
-        :isSubmitCfmPtEteEnd="isSubmitCfmPtEteEnd"
-        :isSubmitCfmPtEteSE="isSubmitCfmPtEteSE"
-        :isSubmitCfmPtPStart="isSubmitCfmPtPStart"
-        :isSubmitCfmPtPEnd="isSubmitCfmPtPEnd"
-        :isSubmitCfmPtPSE="isSubmitCfmPtPSE"
-        :isSubmitCfmWtEteStart="isSubmitCfmWtEteStart"
-        :isSubmitCfmWtEteEnd="isSubmitCfmWtEteEnd"
-        :isSubmitCfmWtEteSE="isSubmitCfmWtEteSE"
-        :isSubmitCfmWtPStart="isSubmitCfmWtPStart"
-        :isSubmitCfmWtPEnd="isSubmitCfmWtPEnd"
-        :isSubmitCfmWtPSE="isSubmitCfmWtPSE"
-        :isSubmitCfmCtEteStart="isSubmitCfmCtEteStart"
-        :isSubmitCfmCtEteEnd="isSubmitCfmCtEteEnd"
-        :isSubmitCfmCtEteSE="isSubmitCfmCtEteSE"
+          :isSubmit="isAlreadySubmit"
+          :isSubmitTask="isSubmitTask"
+          :isSubmitStartAndEnd="isSubmitStartAndEnd"
+          :isSubmitCfmSeqDirectly="isSubmitCfmSeqDirectly"
+          :isSubmitCfmSeqEventually="isSubmitCfmSeqEventually"
+          :isSubmitDurationData="isSubmitDurationData"
+          :isSubmitCfmPtEteStart="isSubmitCfmPtEteStart"
+          :isSubmitCfmPtEteEnd="isSubmitCfmPtEteEnd"
+          :isSubmitCfmPtEteSE="isSubmitCfmPtEteSE"
+          :isSubmitCfmPtPStart="isSubmitCfmPtPStart"
+          :isSubmitCfmPtPEnd="isSubmitCfmPtPEnd"
+          :isSubmitCfmPtPSE="isSubmitCfmPtPSE"
+          :isSubmitCfmWtEteStart="isSubmitCfmWtEteStart"
+          :isSubmitCfmWtEteEnd="isSubmitCfmWtEteEnd"
+          :isSubmitCfmWtEteSE="isSubmitCfmWtEteSE"
+          :isSubmitCfmWtPStart="isSubmitCfmWtPStart"
+          :isSubmitCfmWtPEnd="isSubmitCfmWtPEnd"
+          :isSubmitCfmWtPSE="isSubmitCfmWtPSE"
+          :isSubmitCfmCtEteStart="isSubmitCfmCtEteStart"
+          :isSubmitCfmCtEteEnd="isSubmitCfmCtEteEnd"
+          :isSubmitCfmCtEteSE="isSubmitCfmCtEteSE"
         ></ConformanceSelectResult>
         <!-- Time Range -->
         <ConformanceTimeRange
-        @min-total-seconds="minTotalSeconds"
-        @max-total-seconds="maxTotalSeconds"
+          @min-total-seconds="minTotalSeconds"
+          @max-total-seconds="maxTotalSeconds"
 
-        :isSubmitDurationTime="isSubmitDurationTime"
+          :isSubmitDurationTime="isSubmitDurationTime"
 
-        :isSubmitTimeCfmPtEteAll="isSubmitTimeCfmPtEteAll"
-        :isSubmitTimeCfmPtEteStart="isSubmitTimeCfmPtEteStart"
-        :isSubmitTimeCfmPtEteEnd="isSubmitTimeCfmPtEteEnd"
-        :isSubmitTimeCfmPtEteSE="isSubmitTimeCfmPtEteSE"
-        :isSubmitTimeCfmPtPStart="isSubmitTimeCfmPtPStart"
-        :isSubmitTimeCfmPtPEnd="isSubmitTimeCfmPtPEnd"
-        :isSubmitTimeCfmPtPSE="isSubmitTimeCfmPtPSE"
-        :isSubmitTimeCfmWtEteAll="isSubmitTimeCfmWtEteAll"
-        :isSubmitTimeCfmWtEteStart="isSubmitTimeCfmWtEteStart"
-        :isSubmitTimeCfmWtEteEnd="isSubmitTimeCfmWtEteEnd"
-        :isSubmitTimeCfmWtEteSE="isSubmitTimeCfmWtEteSE"
-        :isSubmitTimeCfmWtPStart="isSubmitTimeCfmWtPStart"
-        :isSubmitTimeCfmWtPEnd="isSubmitTimeCfmWtPEnd"
-        :isSubmitTimeCfmWtPSE="isSubmitTimeCfmWtPSE"
-        :isSubmitTimeCfmCtEteAll="isSubmitTimeCfmCtEteAll"
-        :isSubmitTimeCfmCtEteStart="isSubmitTimeCfmCtEteStart"
-        :isSubmitTimeCfmCtEteEnd="isSubmitTimeCfmCtEteEnd"
-        :isSubmitTimeCfmCtEteSE="isSubmitTimeCfmCtEteSE"
+          :isSubmitTimeCfmPtEteAll="isSubmitTimeCfmPtEteAll"
+          :isSubmitTimeCfmPtEteStart="isSubmitTimeCfmPtEteStart"
+          :isSubmitTimeCfmPtEteEnd="isSubmitTimeCfmPtEteEnd"
+          :isSubmitTimeCfmPtEteSE="isSubmitTimeCfmPtEteSE"
+          :isSubmitTimeCfmPtPStart="isSubmitTimeCfmPtPStart"
+          :isSubmitTimeCfmPtPEnd="isSubmitTimeCfmPtPEnd"
+          :isSubmitTimeCfmPtPSE="isSubmitTimeCfmPtPSE"
+          :isSubmitTimeCfmWtEteAll="isSubmitTimeCfmWtEteAll"
+          :isSubmitTimeCfmWtEteStart="isSubmitTimeCfmWtEteStart"
+          :isSubmitTimeCfmWtEteEnd="isSubmitTimeCfmWtEteEnd"
+          :isSubmitTimeCfmWtEteSE="isSubmitTimeCfmWtEteSE"
+          :isSubmitTimeCfmWtPStart="isSubmitTimeCfmWtPStart"
+          :isSubmitTimeCfmWtPEnd="isSubmitTimeCfmWtPEnd"
+          :isSubmitTimeCfmWtPSE="isSubmitTimeCfmWtPSE"
+          :isSubmitTimeCfmCtEteAll="isSubmitTimeCfmCtEteAll"
+          :isSubmitTimeCfmCtEteStart="isSubmitTimeCfmCtEteStart"
+          :isSubmitTimeCfmCtEteEnd="isSubmitTimeCfmCtEteEnd"
+          :isSubmitTimeCfmCtEteSE="isSubmitTimeCfmCtEteSE"
          ></ConformanceTimeRange>
       </div>
       <!-- buttons -->
@@ -89,33 +89,33 @@
     </div>
     <!-- show bar -->
     <ConformanceShowBar v-if="!notShowActList" :class="isShowBarOpen?'':'hidden'"
-    :isSubmit="isAlreadySubmit"
-    :isSubmitTask="isSubmitTask"
-    :isSubmitStartAndEnd="isSubmitStartAndEnd"
-    :isSubmitCfmSeqDirectly="isSubmitCfmSeqDirectly"
-    :isSubmitCfmSeqEventually="isSubmitCfmSeqEventually"
-    :isSubmitDurationData="isSubmitDurationData"
-    :isSubmitCfmPtEteStart="isSubmitCfmPtEteStart"
-    :isSubmitCfmPtEteEnd="isSubmitCfmPtEteEnd"
-    :isSubmitCfmPtEteSE="isSubmitCfmPtEteSE"
-    :isSubmitCfmPtPStart="isSubmitCfmPtPStart"
-    :isSubmitCfmPtPEnd="isSubmitCfmPtPEnd"
-    :isSubmitCfmPtPSE="isSubmitCfmPtPSE"
-    :isSubmitCfmWtEteStart="isSubmitCfmWtEteStart"
-    :isSubmitCfmWtEteEnd="isSubmitCfmWtEteEnd"
-    :isSubmitCfmWtEteSE="isSubmitCfmWtEteSE"
-    :isSubmitCfmWtPStart="isSubmitCfmWtPStart"
-    :isSubmitCfmWtPEnd="isSubmitCfmWtPEnd"
-    :isSubmitCfmWtPSE="isSubmitCfmWtPSE"
-    :isSubmitCfmCtEteStart="isSubmitCfmCtEteStart"
-    :isSubmitCfmCtEteEnd="isSubmitCfmCtEteEnd"
-    :isSubmitCfmCtEteSE="isSubmitCfmCtEteSE"
-    :isSubmitShowDataSeq="isSubmitShowDataSeq"
-    :isSubmitShowDataPtEte="isSubmitShowDataPtEte"
-    :isSubmitShowDataPtP="isSubmitShowDataPtP"
-    :isSubmitShowDataWtEte="isSubmitShowDataWtEte"
-    :isSubmitShowDataWtP="isSubmitShowDataWtP"
-    :isSubmitShowDataCt="isSubmitShowDataCt"
+      :isSubmit="isAlreadySubmit"
+      :isSubmitTask="isSubmitTask"
+      :isSubmitStartAndEnd="isSubmitStartAndEnd"
+      :isSubmitCfmSeqDirectly="isSubmitCfmSeqDirectly"
+      :isSubmitCfmSeqEventually="isSubmitCfmSeqEventually"
+      :isSubmitDurationData="isSubmitDurationData"
+      :isSubmitCfmPtEteStart="isSubmitCfmPtEteStart"
+      :isSubmitCfmPtEteEnd="isSubmitCfmPtEteEnd"
+      :isSubmitCfmPtEteSE="isSubmitCfmPtEteSE"
+      :isSubmitCfmPtPStart="isSubmitCfmPtPStart"
+      :isSubmitCfmPtPEnd="isSubmitCfmPtPEnd"
+      :isSubmitCfmPtPSE="isSubmitCfmPtPSE"
+      :isSubmitCfmWtEteStart="isSubmitCfmWtEteStart"
+      :isSubmitCfmWtEteEnd="isSubmitCfmWtEteEnd"
+      :isSubmitCfmWtEteSE="isSubmitCfmWtEteSE"
+      :isSubmitCfmWtPStart="isSubmitCfmWtPStart"
+      :isSubmitCfmWtPEnd="isSubmitCfmWtPEnd"
+      :isSubmitCfmWtPSE="isSubmitCfmWtPSE"
+      :isSubmitCfmCtEteStart="isSubmitCfmCtEteStart"
+      :isSubmitCfmCtEteEnd="isSubmitCfmCtEteEnd"
+      :isSubmitCfmCtEteSE="isSubmitCfmCtEteSE"
+      :isSubmitShowDataSeq="isSubmitShowDataSeq"
+      :isSubmitShowDataPtEte="isSubmitShowDataPtEte"
+      :isSubmitShowDataPtP="isSubmitShowDataPtP"
+      :isSubmitShowDataWtEte="isSubmitShowDataWtEte"
+      :isSubmitShowDataWtP="isSubmitShowDataWtP"
+      :isSubmitShowDataCt="isSubmitShowDataCt"
     ></ConformanceShowBar>
   </div>
 </section>
@@ -160,7 +160,6 @@ export default {
       i18next: i18next,
       isMainBtnDisabled: true,
       isShowBarOpen: false,
-      visibleLeft: false,
       selectConformanceTask: null,
       selectConformanceStartAndEnd: null, // Activity sequence
       selectCfmSeqStart: null,
@@ -297,44 +296,44 @@ export default {
      * Apply button is disabled or not
      */
     isApplyBtnDisabled() {
-      let disabled = true;
+      let disabledBool = true;
       switch (this.selectedRuleType) {
         case 'Have activity': // Rule Type 選 Have activity 的行為
           if(this.selectConformanceTask?.length) {
-            disabled = false;
+            disabledBool = false;
           }
           break
         case 'Activity sequence': // Rule Type 選 Activity sequence 的行為
           switch (this.selectedActivitySequence) {
             case 'Start & End': // Activity Sequence 選 Start & End 的行為
               if(this.selectCfmSeqStart && this.selectCfmSeqEnd) {
-                disabled = false;
+                disabledBool = false;
               }
               break;
             case 'Sequence': // Activity Sequence 選 Sequence 的行為
               switch (this.selectedMode) {
                 case 'Directly follows':
                   if(this.selectCfmSeqDirectly.length >= 2) {
-                    disabled = false;
+                    disabledBool = false;
                   }
                   break;
                 case 'Eventually follows':
                   if(this.selectCfmSeqEventually.length >= 2) {
-                    disabled = false;
+                    disabledBool = false;
                   }
                   break;
                 case 'Short loop(s)':
                   disabled = false;
                   break;
                 case 'Self loop(s)':
-                  disabled = false;
+                  disabledBool = false;
                   break;
               };
           }
           break;
         case 'Activity duration': // Rule Type 選 Activity duration 的行為
           if(this.selectDurationData?.length) {
-            disabled = false;
+            disabledBool = false;
           }
           break;
         case 'Processing time': // Rule Type 選 Processing time 的行為
@@ -342,30 +341,30 @@ export default {
             case 'End to end':
               switch (this.selectedActSeqMore) {
                 case 'All':
-                  disabled = false;
+                  disabledBool = false;
                   break;
                 case 'Start':
                   if(this.selectCfmPtEteStart) {
-                    disabled = false;
+                    disabledBool = false;
                   }
                   break;
                 case 'End':
                   if(this.selectCfmPtEteEnd) {
-                    disabled = false;
+                    disabledBool = false;
                   }
                   break;
                 case 'Start & End':
                   if(!this.isAlreadySubmit) {
                     if(this.selectCfmPtEteSEStart && this.selectCfmPtEteSEEnd){
-                      disabled = false;
+                      disabledBool = false;
                     }
                   } else {
                     if((!this.selectCfmPtEteSEStart && this.selectCfmPtEteSEEnd) 
                     || (this.selectCfmPtEteSEStart && !this.selectCfmPtEteSEEnd)) {
-                      disabled = true;
+                      disabledBool = true;
                     }
                     else {
-                      disabled = false;
+                      disabledBool = false;
                     }
                   }
                 break;
@@ -375,26 +374,26 @@ export default {
               switch (this.selectedActSeqFromTo) {
                 case 'From':
                   if(this.selectCfmPtPStart) {
-                    disabled = false;
+                    disabledBool = false;
                   }
                   break;
                 case 'To':
                   if(this.selectCfmPtPEnd) {
-                    disabled = false;
+                    disabledBool = false;
                   }
                   break;
                 case 'From & To':
                   if(!this.isAlreadySubmit) {
                     if(this.selectCfmPtPSEStart && this.selectCfmPtPSEEnd) {
-                      disabled = false;
+                      disabledBool = false;
                     }
                   } else {
                     if((!this.selectCfmPtPSEStart && this.selectCfmPtPSEEnd) 
                     || (this.selectCfmPtPSEStart && !this.selectCfmPtPSEEnd)) {
-                      disabled = true;
+                      disabledBool = true;
                     }
                     else {
-                      disabled = false;
+                      disabledBool = false;
                     }
                   }
                 break;
@@ -408,25 +407,25 @@ export default {
               switch (this.selectedActSeqMore) {
                 case 'Start':
                   if(this.selectCfmWtEteStart) {
-                    disabled = false;
+                    disabledBool = false;
                   }
                   break;
                 case 'End':
                   if(this.selectCfmWtEteEnd) {
-                    disabled = false;
+                    disabledBool = false;
                   }
                   break;
                 case 'Start & End':
                   if(!this.isAlreadySubmit) {
                     if(this.selectCfmWtEteSEStart && this.selectCfmWtEteSEEnd) {
-                      disabled = false;                      
+                      disabledBool = false;                      
                     } else {
                       if((!this.selectCfmWtEteSEStart && this.selectCfmWtEteSEEnd) 
                       || (this.selectCfmWtEteSEStart && !this.selectCfmWtEteSEEnd)) {
-                        disabled = true;
+                        disabledBool = true;
                       }
                       else {
-                        disabled = false;
+                        disabledBool = false;
                       }
                     }
                     break;
@@ -437,26 +436,26 @@ export default {
               switch (this.selectedActSeqFromTo) {
                 case 'From':
                   if(this.selectCfmWtPStart) {
-                    disabled = false;
+                    disabledBool = false;
                   }
                   break;
                 case 'To':
                   if(this.selectCfmWtPEnd) {
-                    disabled = false;
+                    disabledBool = false;
                   }
                   break;
                 case 'From & To':
                   if(!this.isAlreadySubmit) {
                     if(this.selectCfmWtPSEStart && this.selectCfmWtPSEEnd) {
-                      disabled = false;
+                      disabledBool = false;
                     }
                   } else {
                     if((!this.selectCfmWtPSEStart && this.selectCfmWtPSEEnd) 
                     || (this.selectCfmWtPSEStart && !this.selectCfmWtPSEEnd)) {
-                      disabled = true;
+                      disabledBool = true;
                     }
                     else {
-                      disabled = false;
+                      disabledBool = false;
                     }
                   }
                   break;
@@ -467,30 +466,30 @@ export default {
         case 'Cycle time': // Rule Type 選 Cycle time 的行為
           switch (this.selectedActSeqMore) {
             case 'All':
-              disabled = false;
+              disabledBool = false;
               break;
             case 'Start':
               if(this.selectCfmCtEteStart) {
-                disabled = false;
+                disabledBool = false;
               }
               break;
             case 'End':
               if(this.selectCfmCtEteEnd) {
-                disabled = false;
+                disabledBool = false;
               }
               break;
             case 'Start & End':
               if(!this.isAlreadySubmit) {
                 if(this.selectCfmCtEteSEStart && this.selectCfmCtEteSEEnd) {
-                  disabled = false;
+                  disabledBool = false;
                 }
               } else {
                 if((!this.selectCfmCtEteSEStart && this.selectCfmCtEteSEEnd) 
                 || (this.selectCfmCtEteSEStart && !this.selectCfmCtEteSEEnd)) {
-                  disabled = true;
+                  disabledBool = true;
                 }
                 else {
-                  disabled = false;
+                  disabledBool = false;
                 }
               }
               break;
@@ -498,7 +497,7 @@ export default {
           break;
       };
       
-      return this.isMainBtnDisabled = disabled;
+      return this.isMainBtnDisabled = disabledBool;
       
     },
   },
@@ -902,7 +901,7 @@ export default {
       this.selectTimeReset();
       this.$emitter.emit('reset', null);
       // reset 成功訊息
-      this.$toast.success('Rule cleared.');
+      this.$toast.success(i18next.t("Conformance.RuleCleared"));
       this.isShowBarOpen = true;
     },
     /**
@@ -1292,10 +1291,10 @@ export default {
           break;
       };
       if(dataToSave.min > dataToSave.max) {
-        return this.$toast.error('Please check time range setting.');
+        return this.$toast.error(i18next.t("Conformance.PleaseCheckTimeRange"));
       }
       if(JSON.stringify(dataToSave) === JSON.stringify(this.isSubmittedData)) {
-        return this.$toast.error('Please set the new rule.');
+        return this.$toast.error(i18next.t("Conformance.PleaseSetNewRule"));
       }
 
       this.isLoading = true;
@@ -1308,7 +1307,7 @@ export default {
       this.isLoading = false;
       // Results page Cover Plate
       this.$emitter.emit('coverPlate', false);
-      this.$toast.success('Rule applied.');
+      this.$toast.success(i18next.t("Conformance.RuleApplied"));
     },
     setTaskByCategoryOnRadioEmitting () {
       this.$emitter.on('actRadioData', (data) => {
diff --git a/src/components/Discover/Conformance/ConformanceSidebar/TimeRangeDuration.vue b/src/components/Discover/Conformance/ConformanceSidebar/TimeRangeDuration.vue
index a122d39..fa23640 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar/TimeRangeDuration.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/TimeRangeDuration.vue
@@ -1,8 +1,12 @@
 <template>
   <div class="flex justify-between items-center" id="cyp-timerange">
-    <Durationjs :max="minVuemax" :min="minVuemin" :size="'min'" :updateMax="updateMax" @total-seconds="minTotalSeconds" :value="durationMin"></Durationjs>
+    <Durationjs :max="minVuemax" :min="minVuemin" :size="'min'" :updateMax="updateMax"
+      @total-seconds="minTotalSeconds" :value="durationMin">
+    </Durationjs>
       <span>~</span>
-    <Durationjs :max="maxVuemax" :min="maxVuemin" :size="'max'" :updateMin="updateMin" @total-seconds="maxTotalSeconds" :value="durationMax"></Durationjs>
+    <Durationjs :max="maxVuemax" :min="maxVuemin" :size="'max'" :updateMin="updateMin"
+      @total-seconds="maxTotalSeconds" :value="durationMax">
+    </Durationjs>
   </div>
 </template>
 <script>
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 05f4d0c..22a93e1 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -14,9 +14,11 @@
             <h2 v-else class="mr-14 py-3 text-2xl font-black text-neutral-10">FILES</h2>
           </div>
           <ul class="flex justify-center items-center space-x-4 text-xl font-semibold text-neutral-300 cursor-pointer">
-            <li @click="switchNavItem($event, item)" v-for="(item, index) in navViewData[navViewName]"
-              :key="index" class="nav-item" :class="{'active': activePage?.toUpperCase() === item}">
-                {{ item }}
+            <li @click="onNavItemBtnClick($event, item)"
+              v-for="(item, index) in navViewData[navViewName]"
+              :key="index" class="nav-item"
+              :class="{'active': activePageComputedByRoute === item}">
+              {{ item }}
             </li>
           </ul>
         </div>
@@ -131,18 +133,23 @@ export default {
     noShowSaveButton: function() {
       return this.navViewName === 'UPLOAD' || this.navViewName === 'COMPARE' || this.activePage === 'PERFORMANCE' ? true : false;
     },
-    ...mapState(PageAdminStore, ['activePage', 'pendingActivePage']),
+    ...mapState(PageAdminStore, [
+      'activePage',
+      'pendingActivePage',
+      'activePageComputedByRoute',
+    ]),
   },
   watch: {
     '$route':'getNavViewName',
     filterName: function(newVal, oldVal) {
       this.filterName = newVal;
     },
-    activePage: function(newVal) {
-    }
   },
   mounted() {
-    if(this.$route.params.type === 'filter') this.createFilterId= this.$route.params.fileId;
+    this.handleNavItemBtn();
+    if(this.$route.params.type === 'filter') {
+      this.createFilterId= this.$route.params.fileId;
+    }
     this.showNavbarBreadcrumb = this.$route.matched[0].name !== ('AuthContainer') ? true : false;
     this.getNavViewName();
   },
@@ -151,7 +158,8 @@ export default {
      * switch navbar item
      * @param {event} event 選取 Navbar 選項後傳入的值
      */
-    switchNavItem(event) {
+    onNavItemBtnClick(event) {
+      console.log('onNavItemBtnClick');
       let type;
       let fileId;
       let isCheckPage;
@@ -200,6 +208,7 @@ export default {
         return;
       }
 
+      // 說明this.$route.matched[1] 表示當前路由匹配的第二個路由記錄
       this.navViewName = this.$route.matched[1].name.toUpperCase();
       this.store.filesTag = 'ALL';
       switch (this.navViewName) {
@@ -233,6 +242,8 @@ export default {
 
       // Frontend is not sure which button will the user press on the modal,
       // so here we need to save to a pending state
+      // 前端無法確定用戶稍後會按下彈窗上的哪個按鈕(取消還是確認、儲存)，
+      // 因此我們需要將其保存到待處理狀態
       this.setPendingActivePage(valueToSet);
 
       return valueToSet;
@@ -299,10 +310,19 @@ export default {
           break;
       }
     },
+    /**
+     * Set nav item button background color in case the variable is an empty string
+     */
+    handleNavItemBtn() {
+      if(this.activePageComputedByRoute === "") {
+        this.setActivePageComputedByRoute(this.$route.matched[this.$route.matched.length - 1].name);
+      }
+    },
     ...mapActions(PageAdminStore, [
       'setPendingActivePage',
       'setPrevioiusPage',
-      'setActivePage'
+      'setActivePage',
+      'setActivePageComputedByRoute',
     ],),
   },
 }
diff --git a/src/components/durationjs.vue b/src/components/durationjs.vue
index 483611b..7a08d45 100644
--- a/src/components/durationjs.vue
+++ b/src/components/durationjs.vue
@@ -11,7 +11,8 @@
       <p v-show="seconds != 0">{{ seconds }}s</p>
     </div>
   </div>
-  <div class="duration-container absolute left-0 top-full translate-y-2" v-show="openTimeSelect" v-closable="{id: size, handler: onClose}">
+  <div class="duration-container absolute left-0 top-full translate-y-2" v-show="openTimeSelect"
+    v-closable="{id: size, handler: onClose}">
     <div class="duration-box" v-for="(unit, index) in inputTypes" :key="unit">
       <input
         type="text"
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 1ca145b..fb6d8fa 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -43,6 +43,11 @@
     },
     "Conformance": {
         "RuleSettings": "Rule Settings",
-        "ActivitySelector": "Activity Selector"
+        "ActivitySelector": "Activity Selector",
+        "RuleCleared": "Rule cleared",
+        "PleaseCheckTimeRange": "Please check time range setting.",
+        "PleaseSetNewRule": "Please set the new rule.",
+        "RuleApplied": "Rule applied."
+
     }
 }
\ No newline at end of file
diff --git a/src/module/alertModal.js b/src/module/alertModal.js
index 545665c..95e1b0d 100644
--- a/src/module/alertModal.js
+++ b/src/module/alertModal.js
@@ -54,6 +54,7 @@ export async function saveFilter(addFilterId) {
     fileName = '';
     return true;
   } else { // 點擊取消或空白處，為存檔失敗。
+    // console.log("PageAdminStore.activePage", PageAdminStore.activePage);
     PageAdminStore.keepPreviousPage();
     return false;
   }
@@ -100,6 +101,7 @@ export async function leaveFilter(next, addFilterId, toPath, logOut) {
   });
 
   if(result.isConfirmed) {
+    console.log('popup confirm case', );
 
     if(allMapDataStore.createFilterId) {
       await allMapDataStore.updataFilter();
@@ -116,13 +118,17 @@ export async function leaveFilter(next, addFilterId, toPath, logOut) {
 
     logOut ? logOut() : next(toPath);
   } else if(result.dismiss === 'cancel') {
+    console.log('popup cancel case', );
     // Handle page admin issue
+    console.log("PageAdminStore.activePage", PageAdminStore.activePage);
     pageAdminStore.keepPreviousPage();
 
     allMapDataStore.tempFilterId = null;
     logOut ? logOut() : next(toPath);
   } else if(result.dismiss === 'backdrop') {
+    console.log('popup backdrop case', );
     // Handle page admin issue
+    console.log("PageAdminStore.activePage", PageAdminStore.activePage);
     pageAdminStore.keepPreviousPage();
 
     logOut ? null : next(false);
diff --git a/src/module/timeLabel.js b/src/module/timeLabel.js
index 5047ef8..c92574a 100644
--- a/src/module/timeLabel.js
+++ b/src/module/timeLabel.js
@@ -111,17 +111,12 @@ export function followTimeLabel(second, max, fixedNumber = 0) {
   const day = 24 * 60 * 60;
   const hour = 60 * 60;
   const minutes = 60;
-  console.log("max / day", max / day);
-  console.log("max % day", max % day);
-  console.log('(max % day) / hour', (max % day) / hour);
-  console.log('max % hour', max % hour);
-  console.log('(max % hour) / minutes', (max % hour) / minutes);
+
   const dd = Math.floor(max / day);
   const hh = Math.floor((max % day) / hour);
   const mm = Math.floor((max % hour) / minutes);
   let maxUnit = '';
   let result;
-console.log("所以dd, hh, mm", dd, hh, mm)
   maxUnit = dd > 0 ? 'd' : hh > 0 ? 'h' : mm > 0 ? 'm' : 's';
   switch (maxUnit) {
     case 'd':
@@ -149,7 +144,6 @@ console.log("所以dd, hh, mm", dd, hh, mm)
       result = second.toFixed(fixedNumber) + 's';
       break;
   }
-  console.log("followTimeLabel() result", max, result)
   return result;
 }
 /**
diff --git a/src/stores/pageAdmin.js b/src/stores/pageAdmin.js
index fdf43a2..21890d4 100644
--- a/src/stores/pageAdmin.js
+++ b/src/stores/pageAdmin.js
@@ -1,5 +1,11 @@
 import { defineStore } from "pinia";
+import { mapPageNameToCapitalUnifiedName } from "../utils/pageUtils";
 
+// There are at least two ways to trigger a page navigation: 
+// clicking the navigation button and refreshing the page.
+// Therefore, we need to handle page transitions caused by both of these methods.
+// 至少有兩種方式引起畫面的導向: 點選導覽按鈕與重新整理網頁
+// 因此至少要處理這兩種方式所引起的畫面切換
 export default defineStore('pageAdminStore', {
   state: () => ({
      activePage: 'FILES',
@@ -7,17 +13,27 @@ export default defineStore('pageAdminStore', {
      pendingActivePage: 'FILES',
      isPending: false,
      shouldKeepPreviousPage: false, // false -- meaning modal is not pressed as "NO"
+     activePageComputedByRoute: "MAP",
   }),
   getters: {
   },
   actions: {
+    setActivePageComputedByRoute(routeMatched){
+      if (routeMatched.length && routeMatched[routeMatched.length - 1] 
+          && routeMatched[routeMatched.length - 1].name) {
+        // console.log('setActivePageComputedByRoute()', mapPageNameToCapitalUnifiedName(routeMatched[routeMatched.length - 1].name));
+        this.activePageComputedByRoute = mapPageNameToCapitalUnifiedName(
+          routeMatched[routeMatched.length - 1].name);
+      }
+      // console.log('this.activePageComputedByRoute', this.activePageComputedByRoute);
+    },
     /**
      * Set Active Page; the page which the user is currently visiting
      * @param {string} activePage 
      */
     setActivePage(activePage) {
-      console.log("setActivePage", activePage)
-      this.activePage = activePage;
+      // console.log("setActivePage", activePage)
+      this.activePage = mapPageNameToCapitalUnifiedName(activePage);
     },
     /**
      * Specify previous page state value.
@@ -36,16 +52,19 @@ export default defineStore('pageAdminStore', {
      * Copy(transit) the value of pendingActivePage to activePage
      */
     copyPendingPageToActivePage() {
+      // console.log('pinia copying  this.pendingActivePage', this.pendingActivePage);
       this.activePage = this.pendingActivePage;
     },    
     /**
      * Set Pending active Page, meaning we are not sure if user will chang her mind later on.
      * Also, start pending state.
      * Often, user triggers the modal and the pending state starts.
+     * Note: String conversion is needed. For Example, CheckMap is converted into MAP
      * @param {string} pendingActivePage 
      */
     setPendingActivePage(argPendingActivePage) {
-      this.pendingActivePage = argPendingActivePage;
+      // console.log('pinia setting this.pendingActivePage', this.pendingActivePage);
+      this.pendingActivePage = mapPageNameToCapitalUnifiedName(argPendingActivePage);
       this.isPending = true;
     },
     /**
@@ -61,6 +80,7 @@ export default defineStore('pageAdminStore', {
      * instead, we apply the previous page.
      */
     keepPreviousPage() {
+      // console.log('pinia keeping this.previousPage', this.previousPage);
       this.activePage = this.previousPage;
       this.isPending = false;
       this.shouldKeepPreviousPage = true;
diff --git a/src/utils/pageUtils.js b/src/utils/pageUtils.js
index df223d5..602e5f0 100644
--- a/src/utils/pageUtils.js
+++ b/src/utils/pageUtils.js
@@ -1,4 +1,23 @@
+/**
+ * Convert or map raw page name to an upper case string
+ * and possibly change the name to another name
+ * @param {string} rawPageName 
+ * @returns {string}
+ */
 const mapPageNameToCapitalUnifiedName = (rawPageName) => {
+    if(rawPageName) {
+        switch (rawPageName.toUpperCase()) {
+            case 'CHECKMAP':
+                return 'MAP';
+            case 'CHECKCONFORMANCE':
+                return 'CONFORMANCE';
+            case 'CHECKPERFORMANCE':
+                return 'PERFORMANCE';
+            default:
+                return rawPageName.toUpperCase();
+        }
+    }
+    
 };
 
 export {
diff --git a/src/views/MainContainer.vue b/src/views/MainContainer.vue
index 1b7b31d..5dfa85b 100644
--- a/src/views/MainContainer.vue
+++ b/src/views/MainContainer.vue
@@ -42,11 +42,17 @@ export default {
     Loading
   },
   computed: {
-    ...mapState(PageAdminStore, ['shouldKeepPreviousPage']),
+    ...mapState(PageAdminStore, [
+      'shouldKeepPreviousPage',
+      'activePageComputedByRoute'
+    ]),
   },
   methods: {
-    ...mapActions(PageAdminStore, ['copyPendingPageToActivePage', 'setPrevioiusPage',
+    ...mapActions(PageAdminStore, [
+      'copyPendingPageToActivePage',
+      'setPrevioiusPage',
       'clearShouldKeepPreviousPageBoolean',
+      'setActivePageComputedByRoute',
     ],),
   },
   created() {
@@ -54,10 +60,11 @@ export default {
     const token = document.cookie.replace(/(?:(?:^|.*;\s*)luciaToken\s*\=\s*([^;]*).*$)|^.*$/, "$1");
     this.$http.defaults.headers.common['Authorization'] = `Bearer ${token}`;
   },
-  // Swal modal handling is called before beforeRouteUpdate
+  // Rember, Swal modal handling is called before beforeRouteUpdate
   beforeRouteUpdate(to, from, next) {
     // console.log("beforeRouteUpdate", from.name, "to:", to.name);
     this.setPrevioiusPage(from.name);
+    this.setActivePageComputedByRoute(to.matched);
 
     // 離開 Map 頁時判斷是否有無資料和需要存檔
     if ((from.name === 'Map' || from.name === 'CheckMap') && this.tempFilterId) {
@@ -76,6 +83,9 @@ export default {
       // In this else block:
       // for those pages who don't need popup modals, we handle page administration right now.
       // By calling the following code, we decide the next visiting page.
+      // 在這個 else 區塊中：
+      // 對於那些不需要彈窗的頁面，我們現在就處理頁面管理。
+      // 透過呼叫以下代碼，我們決定出下一個將要走訪的頁面。
       this.copyPendingPageToActivePage();
       next();
     }