feat: save tab in URL bar

fixes simwrapper#134
sfcta · Mar 17, 2022 · f85f2a6 · f85f2a6
1 parent 131fca6
commit f85f2a6
Showing 1 changed file with 23 additions and 6 deletions.
diff --git a/src/views/TabbedDashboardView.vue b/src/views/TabbedDashboardView.vue
@@ -13,11 +13,11 @@
           a(@click="goUpOneFolder()") ^ UP
 
         ul(:style="{marginRight: wiide ? '4rem':'4rem'}")
-          li(v-for="tab in Object.keys(dashboards)" :key="tab"
+          li(v-for="tab,index in Object.keys(dashboards)" :key="tab"
             :class="{'is-active': tab===activeTab, 'is-not-active': tab!==activeTab}"
             :style="{opacity: tab===activeTab ? 1.0 : 0.5}"
           )
-            b: a(v-if="dashboards[tab].header" @click="switchTab(tab)") {{ dashboards[tab].header.tab }}
+            b: a(v-if="dashboards[tab].header" @click="switchTab(tab,index)") {{ dashboards[tab].header.tab }}
 
   dash-board(v-if="dashboardTabWithDelay && dashboardTabWithDelay !== 'FILE__BROWSER' && dashboards[dashboardTabWithDelay] && dashboards[dashboardTabWithDelay].header.tab !== '...'"
     :root="root"
@@ -163,8 +163,19 @@ export default class VueComponent extends Vue {
       // Add FileBrowser as "Files" tab
       Vue.set(this.dashboards, 'FILE__BROWSER', { header: { tab: 'Files' } })
 
-      // // Start on first tab
-      this.activeTab = Object.keys(this.dashboards)[0]
+      // // Start on correct tab
+      if (this.$route.query.tab) {
+        try {
+          const userSupplied = parseInt('' + this.$route.query.tab) - 1
+          const userTab = Object.keys(this.dashboards)[userSupplied]
+          this.activeTab = userTab || Object.keys(this.dashboards)[0]
+        } catch (e) {
+          // user spam; just use first tab
+          this.activeTab = Object.keys(this.dashboards)[0]
+        }
+      } else {
+        this.activeTab = Object.keys(this.dashboards)[0]
+      }
       this.dashboardTabWithDelay = this.activeTab
 
       // headers, footers, etc
@@ -275,21 +286,27 @@ export default class VueComponent extends Vue {
 
   private dashboardTabWithDelay = ''
 
-  private async switchTab(tab: string) {
+  private async switchTab(tab: string, index: number) {
     if (tab === this.activeTab) return
 
     // Force teardown the dashboard to ensure we start with a clean slate
     this.activeTab = ''
     this.dashboardTabWithDelay = ''
     this.showFooter = false
+
     await this.$nextTick()
 
     this.activeTab = tab
 
     // to give browser time to teardown
     setTimeout(() => {
       this.dashboardTabWithDelay = tab
-    }, 150)
+      if (index) {
+        this.$router.replace({ query: { tab: `${index + 1}` } })
+      } else {
+        this.$router.replace({ query: {} })
+      }
+    }, 125)
   }
 
   private handleZoom(isZoomed: any) {