Make tabbed pages routable (#2647)

This adds the ability to route through tabbed page by their index,
i.e. 0 for the first tab and so on.

Signed-off-by: Florian Hotze <florianh_dev@icloud.com>

bundles/org.openhab.ui/web/src/js/routes.js

@@ -11,8 +11,6 @@ const UserProfilePage = () => import(/* webpackChunkName: "profile-page" */ '../
 
 const SettingsMenuPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/menu/settings-menu.vue')
 const ServiceSettingsPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/services/service-settings.vue')
-const AddonsListPage = () => import(/* webpackChunkName: "admin-base" */ '@/pages/addons/addons-list.vue')
-const AddonsAddPage = () => import(/* webpackChunkName: "admin-base" */ '@/pages/addons/addons-add.vue')
 const AddonsConfigureBindingPage = () => import(/* webpackChunkName: "admin-base" */ '@/pages/addons/addon-config.vue')
 const AddonsStorePage = () => import(/* webpackChunkName: "admin-base" */ '@/pages/addons/addons-store.vue')
 const AddonDetailsPage = () => import(/* webpackChunkName: "admin-base" */ '@/pages/addons/addon-details.vue')
@@ -145,6 +143,10 @@ export default [
     path: '/page/:uid',
     component: PageViewPage
   },
+  {
+    path: '/page/:uid/:initialTab',
+    component: PageViewPage
+  },
   {
     path: '/about/',
     async: loadAsync(AboutPage),

bundles/org.openhab.ui/web/src/pages/page/page-view.vue

@@ -59,13 +59,20 @@ export default {
     'oh-plan-page': () => import(/* webpackChunkName: "plan-page" */ '@/components/widgets/plan/oh-plan-page.vue'),
     'oh-chart-page': () => import(/* webpackChunkName: "chart-page" */ '@/components/widgets/chart/oh-chart-page.vue')
   },
-  props: ['uid', 'deep', 'defineVars'],
+  props: ['uid', 'initialTab', 'deep', 'defineVars'],
   data () {
     return {
-      currentTab: 0,
+      currentTab: this.initialTab ? Number(this.initialTab) : 0,
       fullscreen: this.$fullscreen.getState()
     }
   },
+  watch: {
+    pageType (newType, oldType) {
+      if (oldType === null && newType === 'tabs') {
+        this.onTabChange(this.currentTab)
+      }
+    }
+  },
   computed: {
     pageStyle () {
       if (!this.context) return null
@@ -131,6 +138,9 @@ export default {
     onTabChange (idx) {
       this.currentTab = idx
       this.$set(this, 'vars', {})
+      const url = '/page/' + this.uid + '/' + this.currentTab
+      this.$f7router.updateCurrentUrl(url)
+      this.$f7router.url = url
     },
     onCommand (itemName, command) {
       this.$store.dispatch('sendCommand', { itemName, command })