Merge 311dcb1 into a08c347

openhab · Aug 21, 2023 · 1976fd0 · 1976fd0
2 parents a08c347 + 311dcb1
commit 1976fd0
Show file tree

Hide file tree

Showing 11 changed files with 241 additions and 130 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
@@ -29,33 +29,6 @@ export const Formats = {
   'karaf': 'Karaf'
 }
 
-export const AddonStoreTabShortcuts = [
-  {
-    id: 'bindings',
-    label: 'Bindings',
-    icon: 'circle_grid_hex',
-    subtitle: 'Connect and control hardware and online services'
-  },
-  {
-    id: 'automation',
-    label: 'Automation',
-    icon: 'sparkles',
-    subtitle: 'Scripting languages, templates and module types'
-  },
-  {
-    id: 'ui',
-    label: 'User Interfaces',
-    icon: 'play_rectangle',
-    subtitle: 'Community widgets & alternative frontends'
-  },
-  {
-    id: 'other',
-    label: 'Other Add-ons',
-    icon: 'ellipsis',
-    subtitle: 'System integrations, persistence, voice & more'
-  }
-]
-
 export function compareAddons (a1, a2) {
   if (a1.installed && !a2.installed) return -1
   if (a2.installed && !a1.installed) return 1

diff --git a/bundles/org.openhab.ui/web/src/assets/i18n/empty-states/en.json b/bundles/org.openhab.ui/web/src/assets/i18n/empty-states/en.json
@@ -11,6 +11,9 @@
   "things.nobindings.title": "No bindings",
   "things.nobindings.text": "To add things to your system, you first need to install binding add-ons.",
 
+  "transformations.title": "No transformations yet",
+  "transformations.text": "Transformations are used to translate data from a cluttered or technical raw value to a processed human-readable representation.",
+
   "model.title": "Start modelling your home",
   "model.text": "Build a model from your items to organize them and relate them to each other semantically.<br><br>Begin with a hierarchy of locations: buildings, outside areas, floors and rooms, as needed. Then, insert equipment and points from your things (or manually).",
 

diff --git a/bundles/org.openhab.ui/web/src/js/routes.js b/bundles/org.openhab.ui/web/src/js/routes.js
@@ -9,7 +9,7 @@ import AnalyzerPopup from '../pages/analyzer/analyzer-popup.vue'
 const AboutPage = () => import(/* webpackChunkName: "about-page" */ '../pages/about.vue')
 const UserProfilePage = () => import(/* webpackChunkName: "profile-page" */ '../pages/profile.vue')
 
-const SettingsMenuPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/settings-menu.vue')
+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/settings/addons/addons-list.vue')
 const AddonsAddPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/addons/addons-add.vue')

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/items/items-list-vlist.vue b/bundles/org.openhab.ui/web/src/pages/settings/items/items-list-vlist.vue
@@ -30,8 +30,9 @@
     <f7-list class="searchbar-not-found">
       <f7-list-item title="Nothing found" />
     </f7-list>
-    <!-- skeleton for not ready -->
+
     <f7-block class="block-narrow">
+      <!-- skeleton for not ready -->
       <f7-col v-show="!ready">
         <f7-block-title>&nbsp;Loading...</f7-block-title>
         <f7-list media-list class="col wide">
@@ -50,9 +51,11 @@
           </f7-list-group>
         </f7-list>
       </f7-col>
-      <f7-col v-show="ready">
+
+      <f7-col v-show="ready && items.length > 0">
         <f7-block-title class="searchbar-hide-on-search">
-          {{ items.length }} Items
+          {{ items.length }} Items -
+          <f7-link external :href="documentationLink" target="_blank" text="Open documentation" color="blue" />
         </f7-block-title>
         <f7-list
           v-show="items.length > 0"
@@ -88,9 +91,14 @@
         </f7-list>
       </f7-col>
     </f7-block>
+
     <f7-block v-if="ready && !items.length" class="service-config block-narrow">
       <empty-state-placeholder icon="square_on_circle" title="items.title" text="items.text" />
+      <f7-row class="display-flex justify-content-center">
+        <f7-button large fill color="blue" external :href="documentationLink" target="_blank" v-t="'home.overview.button.documentation'" />
+      </f7-row>
     </f7-block>
+
     <f7-fab v-show="!showCheckboxes" position="center-bottom" text="Refresh" slot="fixed" color="blue" @click="load()">
       <f7-icon ios="f7:arrow_clockwise" md="material:refresh" aurora="f7:arrow_clockwise" />
     </f7-fab>
@@ -281,6 +289,9 @@ export default {
     }
   },
   computed: {
+    documentationLink () {
+      return `https://${this.$store.state.runtimeInfo.buildString === 'Release Build' ? 'www' : 'next'}.openhab.org/link/items`
+    },
     searchPlaceholder () {
       return window.innerWidth >= 1280 ? 'Search (for advanced search, use the developer sidebar (Shift+Alt+D))' : 'Search'
     }

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/menu/add-on-section.vue b/bundles/org.openhab.ui/web/src/pages/settings/menu/add-on-section.vue
@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <f7-block-title>
+      Add-ons
+    </f7-block-title>
+    <f7-list media-list>
+      <f7-list-item
+        media-item
+        :link="true"
+        @click="$f7.views.main.router.navigate('addons')"
+        title="Add-on Store"
+        footer="Bindings, automations, UIs and others">
+        <f7-icon slot="media" f7="bag" color="gray" />
+      </f7-list-item>
+    </f7-list>
+    <f7-list class="search-list">
+      <f7-list-item
+        v-for="a in addonsSettings"
+        :key="a.uid"
+        :link="'addons/' + a.uid + '/config'"
+        :title="a.label" />
+      <f7-list-button v-if="!expanded && addonsInstalled.length > addonsSettings.length" color="blue" @click="expanded = true">
+        Show All
+      </f7-list-button>
+    </f7-list>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['addonsInstalled', 'addonsServices'],
+  data () {
+    return {
+      ready: false,
+      expanded: false
+    }
+  },
+  computed: {
+    addonsSettings () {
+      if (this.expanded) return this.addonsInstalled
+      return this.addonsInstalled.filter((a) =>
+        a.type === 'persistence' ||
+        this.addonsServices.findIndex((as) => as.configDescriptionURI.split(':')[1] === a.id) > -1
+      )
+    }
+  }
+}
+</script>
diff --git a/.../web/src/pages/settings/settings-menu.vue → ...src/pages/settings/menu/settings-menu.vue b/.../web/src/pages/settings/settings-menu.vue → ...src/pages/settings/menu/settings-menu.vue
@@ -16,9 +16,9 @@
         search-in=".item-title"
         :disable-button="!$theme.aurora" />
     </f7-navbar>
-    <f7-block class="block-narrow after-big-title settings-menu" v-show="servicesLoaded">
+    <f7-block class="block-narrow settings-menu" v-show="servicesLoaded && addonsLoaded">
       <f7-row>
-        <f7-col width="100" medium="50">
+        <f7-col class="settings-col" width="100" medium="50">
           <f7-block-title>Configuration</f7-block-title>
           <f7-list media-list class="search-list">
             <f7-list-item
@@ -60,6 +60,8 @@
               :footer="objectsSubtitles.pages">
               <f7-icon slot="media" f7="tv" color="gray" />
             </f7-list-item>
+          </f7-list>
+          <f7-list media-list class="search-list">
             <f7-list-item
               v-if="$store.getters.apiEndpoint('transformations')"
               media-item
@@ -68,7 +70,7 @@
               :after="transformationsCount"
               badge-color="blue"
               :footer="objectsSubtitles.transform">
-              <f7-icon slot="media" f7="arrow_2_squarepath" color="gray" />
+              <f7-icon slot="media" f7="function" color="gray" />
             </f7-list-item>
           </f7-list>
           <f7-block-title v-if="$store.getters.apiEndpoint('rules')">
@@ -79,6 +81,7 @@
               media-item
               link="rules/"
               title="Rules"
+              :after="rulesCount"
               badge-color="blue"
               :footer="objectsSubtitles.rules">
               <f7-icon slot="media" f7="wand_stars" color="gray" />
@@ -87,6 +90,7 @@
               media-item
               link="scenes/"
               title="Scenes"
+              :after="scenesCount"
               badge-color="blue"
               :footer="objectsSubtitles.scenes">
               <f7-icon slot="media" f7="film" color="gray" />
@@ -95,6 +99,7 @@
               media-item
               link="scripts/"
               title="Scripts"
+              :after="scriptsCount"
               badge-color="blue"
               :footer="objectsSubtitles.scripts">
               <f7-icon slot="media" f7="doc_plaintext" color="gray" />
@@ -108,32 +113,29 @@
               <f7-icon slot="media" f7="calendar" color="gray" />
             </f7-list-item>
           </f7-list>
-          <f7-block-title v-if="$store.getters.apiEndpoint('addons')">
-            Add-ons
-          </f7-block-title>
-          <f7-list media-list class="search-list"
-                   v-if="$store.getters.apiEndpoint('addons')">
-            <f7-list-item
-              media-item
-              v-for="shortcut in addonStoreTabShortcuts"
-              :key="shortcut.id"
-              :link="true"
-              @click="navigateToStore(shortcut.id)"
-              :title="shortcut.label"
-              :footer="shortcut.subtitle">
-              <f7-icon slot="media" :f7="shortcut.icon" color="gray" />
-            </f7-list-item>
-          </f7-list>
         </f7-col>
-        <f7-col width="100" medium="50" v-if="$store.getters.apiEndpoint('services') && servicesLoaded">
-          <f7-block-title>System Services</f7-block-title>
-          <f7-list class="search-list">
-            <f7-list-item
-              v-for="service in systemServices"
-              :key="service.id"
-              :link="'services/' + service.id"
-              :title="service.label" />
-          </f7-list>
+        <f7-col class="settings-col" width="100" medium="50">
+          <div v-if="$store.getters.apiEndpoint('services') && servicesLoaded">
+            <f7-block-title>System Settings</f7-block-title>
+            <f7-list class="search-list">
+              <f7-list-item
+                v-for="service in systemSettings"
+                :key="service.id"
+                :link="'services/' + service.id"
+                :title="service.label" />
+              <f7-list-button v-if="!showingAll('systemSettings')" color="blue" @click="$set(expandedTypes, 'systemSettings', true)">
+                Show All
+              </f7-list-button>
+            </f7-list>
+          </div>
+          <div v-if="$store.getters.apiEndpoint('addons') && addonsLoaded && $f7.width < 1450">
+            <add-on-section class="add-on-section" :addonsInstalled="addonsInstalled" :addonsServices="addonsServices" />
+          </div>
+        </f7-col>
+        <f7-col width="33" class="add-on-col">
+          <div v-if="$store.getters.apiEndpoint('addons') && addonsLoaded && $f7.width >= 1450">
+            <add-on-section :addonsInstalled="addonsInstalled" :addonsServices="addonsServices" />
+          </div>
         </f7-col>
       </f7-row>
       <f7-block-footer v-if="$t('home.overview.title') !== 'Overview'" class="margin text-align-center">
@@ -144,21 +146,25 @@
 </template>
 
 <script>
-import { AddonStoreTabShortcuts } from '@/assets/addon-store'
+import AddOnSection from './add-on-section.vue'
 
 export default {
+  components: {
+    AddOnSection: AddOnSection
+  },
   data () {
     return {
       addonsLoaded: false,
       servicesLoaded: false,
-      addonStoreTabShortcuts: AddonStoreTabShortcuts,
+      addonsInstalled: [],
+      addonsServices: [],
       systemServices: [],
       objectsSubtitles: {
         things: 'Manage the physical layer',
         model: 'The semantic model of your home',
         items: 'Manage the functional layer',
         pages: 'Design displays for user control & monitoring',
-        transform: 'Manage transformations',
+        transform: 'Make raw data human-readable',
         rules: 'Automate with triggers and actions',
         scenes: 'Store a set of desired states as a scene',
         scripts: 'Rules dedicated to running code',
@@ -168,12 +174,32 @@ export default {
       thingsCount: '',
       itemsCount: '',
       transformationsCount: '',
-      sitemapsCount: 0
+      sitemapsCount: 0,
+      rulesCount: '',
+      scenesCount: '',
+      scriptsCount: '',
+
+      advancedSystemServices: [
+        'org.openhab.storage.json',
+        'org.openhab.restauth',
+        'org.openhab.addons',
+        'org.openhab.marketplace',
+        'org.openhab.jsonaddonservice',
+        'org.openhab.inbox',
+        'org.openhab.sitemap',
+        'org.openhab.lsp'
+      ],
+
+      expandedTypes: {}
     }
   },
   computed: {
     apiEndpoints () {
       return this.$store.state.apiEndpoints
+    },
+    systemSettings () {
+      if (this.expandedTypes.systemSettings) return this.systemServices
+      return this.systemServices.filter((s) => this.advancedSystemServices.indexOf(s.id) < 0)
     }
   },
   watch: {
@@ -187,24 +213,36 @@ export default {
       if (!this.apiEndpoints) return
 
       const servicesPromise = (this.$store.getters.apiEndpoint('services')) ? this.$oh.api.get('/rest/services') : Promise.resolve([])
-      const addonsPromise = (this.$store.getters.apiEndpoint('addons')) ? this.$oh.api.get('/rest/addons/types') : Promise.resolve([])
+      const addonsPromise = (this.$store.getters.apiEndpoint('addons')) ? this.$oh.api.get('/rest/addons') : Promise.resolve([])
 
       // can be done in parallel!
       servicesPromise.then((data) => {
         this.systemServices = data.filter(s => s.category === 'system')
+        this.addonsServices = data.filter(s => s.category !== 'system')
         this.servicesLoaded = true
       })
+      addonsPromise.then((data) => {
+        this.addonsInstalled = data.filter(a => a.installed === true)
+        this.addonsLoaded = true
+      })
     },
     loadCounters () {
       if (!this.apiEndpoints) return
       if (this.$store.getters.apiEndpoint('inbox')) this.$oh.api.get('/rest/inbox').then((data) => { this.inboxCount = data.filter((e) => e.flag === 'NEW').length.toString() })
       if (this.$store.getters.apiEndpoint('things')) this.$oh.api.get('/rest/things?staticDataOnly=true').then((data) => { this.thingsCount = data.length.toString() })
       if (this.$store.getters.apiEndpoint('items')) this.$oh.api.get('/rest/items?staticDataOnly=true').then((data) => { this.itemsCount = data.length.toString() })
       if (this.$store.getters.apiEndpoint('ui')) this.$oh.api.get('/rest/ui/components/system:sitemap').then((data) => { this.sitemapsCount = data.length })
-      if (this.$store.getters.apiEndpoint('transformations')) this.$oh.api.get('/rest/transformations').then((data) => { this.transformationsCount = data.length })
+      if (this.$store.getters.apiEndpoint('transformations')) this.$oh.api.get('/rest/transformations').then((data) => { this.transformationsCount = data.length.toString() })
+      if (this.$store.getters.apiEndpoint('rules')) {
+        this.$oh.api.get('/rest/rules?staticDataOnly=true').then((data) => {
+          this.rulesCount = data.filter((r) => r.tags.indexOf('Scene') < 0 && r.tags.indexOf('Script') < 0).length.toString()
+          this.scenesCount = data.filter((r) => r.tags.indexOf('Scene') >= 0).length.toString()
+          this.scriptsCount = data.filter((r) => r.tags.indexOf('Script') >= 0).length.toString()
+        })
+      }
     },
-    navigateToStore (tab) {
-      this.$f7.views.main.router.navigate('addons', { props: { initialTab: tab } })
+    showingAll (type) {
+      return (this.expandedTypes[type] || this[type].length <= 5)
     },
     onPageInit () {
       this.loadMenu()
@@ -220,6 +258,12 @@ export default {
 <style lang="stylus">
 .device-desktop .settings-menu
   --f7-list-item-footer-line-height 1.3
+  @media (min-width 1450px)
+    .row
+      width 1065px
+      max-width 100%
+    .settings-col
+      width 33%
 .settings-menu .icon
   color var(--f7-color-blue)
 .theme-filled .settings-menu .icon