Addon-store: add sub menu items and various improvements

Signed-off-by: Jimmy Tanagra <jcode@tanagra.id.au>
openhab · Feb 20, 2024 · 1788712 · 1788712
1 parent b30b7e2
commit 1788712
Show file tree

Hide file tree

Showing 7 changed files with 229 additions and 143 deletions.
diff --git a/bundles/org.openhab.ui/web/src/assets/addon-store.js b/bundles/org.openhab.ui/web/src/assets/addon-store.js
@@ -1,13 +1,23 @@
 export const AddonIcons = {
-  automation: 'wand_stars',
   binding: 'circle_grid_hex_fill',
-  persistence: 'download_circle',
+  automation: 'wand_stars',
   transformation: 'function',
-  misc: 'rectangle_3_offgrid',
+  persistence: 'download_circle',
   ui: 'play_rectangle',
+  misc: 'rectangle_3_offgrid',
   voice: 'chat_bubble_2_fill'
 }
 
+export const AddonTitles = {
+  binding: 'Bindings',
+  automation: 'Automation',
+  transformation: 'Transformations',
+  persistence: 'Persistence',
+  ui: 'User Interfaces',
+  misc: 'System Integrations',
+  voice: 'Voice & Speech'
+}
+
 export const ContentTypes = {
   'application/java-archive': 'Java Archive',
   'application/vnd.openhab.bundle': 'OSGi Bundle',

diff --git a/bundles/org.openhab.ui/web/src/components/addons/addon-card.vue b/bundles/org.openhab.ui/web/src/components/addons/addon-card.vue
@@ -1,5 +1,5 @@
 <template>
-  <f7-link v-if="addon" class="addon-card padding-right-half" :href="'/addons/' + addon.uid">
+  <f7-link v-if="addon" class="addon-card padding-right-half" :href="`/addons/${addon.type}/${addon.uid}`">
     <div class="addon-card-inner card">
       <div class="addon-card-headline">
         <div>{{ headline || autoHeadline || "&nbsp;" }}</div>

diff --git a/bundles/org.openhab.ui/web/src/components/addons/addon-list-item.vue b/bundles/org.openhab.ui/web/src/components/addons/addon-list-item.vue
@@ -3,7 +3,7 @@
     v-if="addon"
     class="addon-list-item padding-right-half"
     :title="addon.label"
-    :link="'/addons/' + addon.uid">
+    :link="`/addons/${addon.type}/${addon.uid}`">
     <div v-if="addon.verifiedAuthor" slot="subtitle">
       {{ addon.author }}
       <f7-icon v-if="addon.verifiedAuthor" size="15" :color="$f7.data.themeOptions.dark === 'dark' ? 'white' : 'blue'" f7="checkmark_seal_fill" style="margin-top: -3px" />

diff --git a/bundles/org.openhab.ui/web/src/components/app.vue b/bundles/org.openhab.ui/web/src/components/app.vue
@@ -75,10 +75,22 @@
           </li>
 
           <!-- Add-on Store -->
-          <f7-list-item link="/addons/" :title="$t('sidebar.addOnStore')" panel-close :animate="false"
-                        :class="{ currentsection: currentUrl.indexOf('/addons/') === 0 }">
+          <f7-list-item link="/addons/" :title="$t('sidebar.addOnStore')" view=".view-main" panel-close :animate="false"
+                        :class="{ currentsection: currentUrl === '/addons/' }">
             <f7-icon slot="media" ios="f7:bag_fill" aurora="f7:bag_fill" md="material:shopping_bag" color="gray" />
           </f7-list-item>
+          <li v-if="showAddonsSubmenu && $store.getters.apiEndpoint('addons')">
+            <ul class="menu-sublinks">
+              <f7-list-item v-for="section in Object.keys(AddonTitles)"
+                            :key="section"
+                            :link="`/addons/${section}/`"
+                            :title="AddonTitles[section]"
+                            view=".view-main" panel-close :animate="false" no-chevron
+                            :class="{ currentsection: currentUrl.indexOf(`/addons/${section}`) === 0 }">
+                <f7-icon slot="media" :f7="AddonIcons[section]" color="gray" />
+              </f7-list-item>
+            </ul>
+          </li>
 
           <!-- Developer Tools -->
           <f7-list-item link="/developer/" :title="$t('sidebar.developerTools')" panel-close :animate="false"
@@ -260,6 +272,8 @@ import sseEvents from './sse-events-mixin'
 import dayjs from 'dayjs'
 import dayjsLocales from 'dayjs/locale.json'
 
+import { AddonIcons, AddonTitles } from '@/assets/addon-store'
+
 export default {
   mixins: [auth, i18n, connectionHealth, sseEvents],
   components: {
@@ -368,6 +382,7 @@ export default {
       },
 
       showSettingsSubmenu: false,
+      showAddonsSubmenu: false,
       showDeveloperSubmenu: false,
       showDeveloperDock: false,
       activeDock: 'tools',
@@ -614,6 +629,13 @@ export default {
         ev.stopPropagation()
         ev.preventDefault()
       }
+    },
+    updateUrl (newUrl) {
+      this.showSettingsSubmenu = newUrl.indexOf('/settings/') === 0 || newUrl.indexOf('/settings/addons/') === 0
+      this.showAddonsSubmenu = newUrl.indexOf('/addons/') === 0
+      this.showDeveloperSubmenu = newUrl.indexOf('/developer/') === 0
+      this.currentUrl = newUrl
+      this.$store.commit('setPagePath', this.currentUrl)
     }
   },
   created () {
@@ -639,6 +661,9 @@ export default {
     } else {
       this.init = true
     }
+
+    this.AddonIcons = AddonIcons
+    this.AddonTitles = AddonTitles
   },
   mounted () {
     this.$f7ready((f7) => {
@@ -679,13 +704,15 @@ export default {
 
       this.$f7.on('pageBeforeIn', (page) => {
         if (page.route && page.route.url) {
-          this.showSettingsSubmenu = page.route.url.indexOf('/settings/') === 0 || page.route.url.indexOf('/settings/addons/') === 0
-          this.showDeveloperSubmenu = page.route.url.indexOf('/developer/') === 0
-          this.currentUrl = page.route.url
-          this.$store.commit('setPagePath', this.currentUrl)
+          this.updateUrl(page.route.url)
         }
       })
 
+      // needed by updateCurrentUrl() inside addon-store onTabShow()
+      this.$f7.on('routeUrlUpdate', (newRoute, router) => {
+        this.updateUrl(newRoute.url)
+      })
+
       this.$f7.on('sidebarRefresh', () => {
         this.loadData()
       })

diff --git a/bundles/org.openhab.ui/web/src/js/routes.js b/bundles/org.openhab.ui/web/src/js/routes.js
@@ -5,6 +5,7 @@ import HomePage from '../pages/home.vue'
 import NotFoundPage from '../pages/not-found.vue'
 import PageViewPage from '../pages/page/page-view.vue'
 import AnalyzerPopup from '../pages/analyzer/analyzer-popup.vue'
+import { AddonTitles } from '@/assets/addon-store'
 
 const AboutPage = () => import(/* webpackChunkName: "about-page" */ '../pages/about.vue')
 const UserProfilePage = () => import(/* webpackChunkName: "profile-page" */ '../pages/profile.vue')
@@ -380,34 +381,20 @@ export default [
     path: '/addons/',
     beforeEnter: [enforceAdminForRoute],
     async: loadAsync(AddonsStorePage),
-    routes: [
-      {
-        path: 'bindings/',
-        beforeEnter: [enforceAdminForRoute],
-        async: loadAsync(AddonsStorePage, { initialTab: 'bindings' })
-      },
-      {
-        path: 'automation/',
-        beforeEnter: [enforceAdminForRoute],
-        async: loadAsync(AddonsStorePage, { initialTab: 'automation' })
-      },
-      {
-        path: 'ui/',
-        beforeEnter: [enforceAdminForRoute],
-        async: loadAsync(AddonsStorePage, { initialTab: 'ui' })
-      },
+    tabs: [
       {
-        path: 'other/',
-        beforeEnter: [enforceAdminForRoute],
-        async: loadAsync(AddonsStorePage, { initialTab: 'other' })
-      },
-      {
-        path: 'search/',
-        beforeEnter: [enforceAdminForRoute],
-        async: loadAsync(AddonsStorePage, { initialTab: 'search' })
-      },
+        path: '/',
+        id: 'main'
+      }
+    ].concat(Object.keys(AddonTitles).map((section) => {
+      return {
+        path: `/${section}/`,
+        id: section
+      }
+    })),
+    routes: [
       {
-        path: ':addonId',
+        path: ':section/:addonId',
         beforeEnter: [enforceAdminForRoute],
         async: loadAsync(AddonDetailsPage)
       }