Add routes for home page tabs (openhab#2074)

Adds routes for `/overview`, `/locations`, `/equipment` and `/properties` so a home page reload keeps the tab and routing to individual tabs is possible. --------- Signed-off-by: Florian Hotze <florianh_dev@icloud.com> Signed-off-by: jgeorgi <justin.georgi@gmail.com>
JustinGeorgi · Sep 24, 2023 · 6f1ceaa · 6f1ceaa
1 parent 8691f2b
commit 6f1ceaa
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 7 deletions.
diff --git a/bundles/org.openhab.ui/web/src/js/routes.js b/bundles/org.openhab.ui/web/src/js/routes.js
@@ -92,7 +92,45 @@ export default [
     // keepAlive: true,
     options: {
       transition: 'f7-dive'
-    }
+    },
+    routes: [
+      {
+        path: 'overview',
+        component: HomePage,
+        options: {
+          props: {
+            initialTab: 'overview'
+          }
+        }
+      },
+      {
+        path: 'locations',
+        component: HomePage,
+        options: {
+          props: {
+            initialTab: 'locations'
+          }
+        }
+      },
+      {
+        path: 'equipment',
+        component: HomePage,
+        options: {
+          props: {
+            initialTab: 'equipment'
+          }
+        }
+      },
+      {
+        path: 'properties',
+        component: HomePage,
+        options: {
+          props: {
+            initialTab: 'properties'
+          }
+        }
+      }
+    ]
   },
   {
     path: '/page/:uid',

diff --git a/bundles/org.openhab.ui/web/src/pages/home.vue b/bundles/org.openhab.ui/web/src/pages/home.vue
@@ -21,10 +21,10 @@
       </f7-nav-right>
     </f7-navbar>
     <f7-toolbar tabbar labels bottom v-if="tabsVisible">
-      <f7-link tab-link @click="currentTab = 'overview'" :tab-link-active="currentTab === 'overview'" icon-ios="f7:house_fill" icon-aurora="f7:house_fill" icon-md="material:home" :text="$t('home.overview.tab')" />
-      <f7-link tab-link v-if="tabVisible('locations')" @click="currentTab = 'locations'" :tab-link-active="currentTab === 'locations'" icon-ios="f7:placemark_fill" icon-aurora="f7:placemark_fill" icon-md="material:place" :text="$t('home.locations.tab')" />
-      <f7-link tab-link v-if="tabVisible('equipment')" @click="currentTab = 'equipment'" :tab-link-active="currentTab === 'equipment'" icon-ios="f7:cube_box_fill" icon-aurora="f7:cube_box_fill" icon-md="material:payments" :text="$t('home.equipment.tab')" />
-      <f7-link tab-link v-if="tabVisible('properties')" @click="currentTab = 'properties'" :tab-link-active="currentTab === 'properties'" icon-ios="f7:bolt_fill" icon-aurora="f7:bolt_fill" icon-md="material:flash_on" :text="$t('home.properties.tab')" />
+      <f7-link tab-link @click="switchTab('overview')" :tab-link-active="currentTab === 'overview'" icon-ios="f7:house_fill" icon-aurora="f7:house_fill" icon-md="material:home" :text="$t('home.overview.tab')" />
+      <f7-link tab-link v-if="tabVisible('locations')" @click="switchTab('locations')" :tab-link-active="currentTab === 'locations'" icon-ios="f7:placemark_fill" icon-aurora="f7:placemark_fill" icon-md="material:place" :text="$t('home.locations.tab')" />
+      <f7-link tab-link v-if="tabVisible('equipment')" @click="switchTab('equipment')" :tab-link-active="currentTab === 'equipment'" icon-ios="f7:cube_box_fill" icon-aurora="f7:cube_box_fill" icon-md="material:payments" :text="$t('home.equipment.tab')" />
+      <f7-link tab-link v-if="tabVisible('properties')" @click="switchTab('properties')" :tab-link-active="currentTab === 'properties'" icon-ios="f7:bolt_fill" icon-aurora="f7:bolt_fill" icon-md="material:flash_on" :text="$t('home.properties.tab')" />
     </f7-toolbar>
 
     <f7-block v-if="!ready || (currentTab !== 'overview' && !modelReady)" class="text-align-center padding-top margin-top">
@@ -88,6 +88,7 @@ import ModelTab from './home/model-tab.vue'
 import HomeCards from './home/homecards-mixin'
 
 export default {
+  props: ['initialTab'],
   mixins: [HomeCards],
   components: {
     OverviewTab,
@@ -100,7 +101,7 @@ export default {
       showCards: false,
       showPinToHome: false,
       showExitToApp: false,
-      currentTab: 'overview',
+      currentTab: this.initialTab || 'overview',
       overviewPageKey: this.$utils.id(),
       items: []
     }
@@ -164,6 +165,7 @@ export default {
   },
   methods: {
     onPageBeforeIn () {
+      this.$f7router.updateCurrentUrl('/' + this.currentTab)
       this.overviewPageKey = this.$utils.id()
     },
     onPageAfterIn () {
@@ -193,6 +195,10 @@ export default {
     exitToApp () {
       window.OHApp.exitToApp()
     },
+    switchTab (tab) {
+      this.currentTab = tab
+      this.$f7router.updateCurrentUrl('/' + this.currentTab)
+    },
     tabVisible (tab) {
       if (!this.tabsVisible) return false
       if (!this.homePageComponent) return true

diff --git a/bundles/org.openhab.ui/web/src/pages/home/homecards-mixin.js b/bundles/org.openhab.ui/web/src/pages/home/homecards-mixin.js
@@ -114,7 +114,6 @@ export default {
       item.children.forEach(child => this.sortModel(child))
     },
     loadModel (page) {
-      this.modelReady = false
       console.debug('Loading semantic model and building semantic homepages ...')
       this.$oh.api.get('/rest/items?staticDataOnly=true&metadata=semantics,listWidget,widgetOrder')
         .then((data) => {