Functional test version

Signed-off-by: jgeorgi <[email protected]>
JustinGeorgi · Sep 24, 2023 · a22fdec · a22fdec
1 parent e1998e9
commit a22fdec
Show file tree

Hide file tree

Showing 9 changed files with 370 additions and 150 deletions.
diff --git a/bundles/org.openhab.ui/web/src/components/app.vue b/bundles/org.openhab.ui/web/src/components/app.vue
@@ -97,8 +97,8 @@
                             :class="{ currentsection: currentUrl.indexOf('/developer/api-explorer') >= 0 }">
                 <f7-icon slot="media" f7="burn" color="gray" />
               </f7-list-item>
-              <!-- <f7-list-item link="" @click="$f7.emit('toggleDeveloperSidebar')" title="Sidebar" view=".view-main" panel-close :animate="false" no-chevron>
-                <f7-icon slot="media" :f7="$store.state.developerSidebar ? 'wrench_fill' : 'wrench'" color="gray" />
+              <!-- <f7-list-item link="" @click="$f7.emit('toggleDeveloperDock')" title="Dock" view=".view-main" panel-close :animate="false" no-chevron>
+                <f7-icon slot="media" :f7="$store.state.developerDock ? 'wrench_fill' : 'wrench'" color="gray" />
               </f7-list-item> -->
             </ul>
           </li>
@@ -137,7 +137,7 @@
     <!-- <f7-view url="/panel-right/"></f7-view> -->
     </f7-panel>
 
-    <f7-panel v-if="showDeveloperSidebar" right :visible-breakpoint="1280" resizable>
+    <f7-panel v-if="showDeveloperDock" right :visible-breakpoint="1280" resizable>
       <developer-dock />
     </f7-panel>
 
@@ -384,7 +384,7 @@ export default {
 
       showSettingsSubmenu: false,
       showDeveloperSubmenu: false,
-      showDeveloperSidebar: false,
+      showDeveloperDock: false,
       currentUrl: '',
 
       communicationFailureToast: null,
@@ -602,11 +602,11 @@ export default {
         this.$nextTick(() => this.$f7.panel.get('left').disableVisibleBreakpoint())
       }
     },
-    toggleDeveloperSidebar () {
+    toggleDeveloperDock () {
       if (!this.$store.getters.isAdmin) return
-      this.showDeveloperSidebar = !this.showDeveloperSidebar
-      if (this.showDeveloperSidebar) this.$store.dispatch('startTrackingStates')
-      this.$store.commit('setDeveloperSidebar', this.showDeveloperSidebar)
+      this.showDeveloperDock = !this.showDeveloperDock
+      if (this.showDeveloperDock) this.$store.dispatch('startTrackingStates')
+      this.$store.commit('setDeveloperDock', this.showDeveloperDock)
     },
     toggleVisibleBreakpoint () {
       this.$f7.panel.get('left').toggleVisibleBreakpoint()
@@ -615,7 +615,7 @@ export default {
     },
     keyDown (ev) {
       if (ev.keyCode === 68 && ev.shiftKey && ev.altKey) {
-        this.toggleDeveloperSidebar()
+        this.toggleDeveloperDock()
         ev.stopPropagation()
         ev.preventDefault()
       }
@@ -758,6 +758,7 @@ export default {
           this.showSettingsSubmenu = page.route.url.indexOf('/settings/') === 0 && page.route.url.indexOf('addons') === -1
           this.showDeveloperSubmenu = page.route.url.indexOf('/developer/') === 0
           this.currentUrl = page.route.url
+          this.$store.commit('setPagePath', this.currentUrl)
         }
       })
 
@@ -777,8 +778,8 @@ export default {
         this.updateThemeOptions()
       })
 
-      this.$f7.on('toggleDeveloperSidebar', () => {
-        this.toggleDeveloperSidebar()
+      this.$f7.on('toggleDeveloperDock', () => {
+        this.toggleDeveloperDock()
       })
 
       this.$f7.on('smartSelectOpened', (smartSelect) => {

diff --git a/bundles/org.openhab.ui/web/src/components/developer/developer-dock.vue b/bundles/org.openhab.ui/web/src/components/developer/developer-dock.vue
@@ -1,27 +1,12 @@
 <template>
   <f7-page class="developer-dock">
-    <f7-navbar title="Developer Sidebar" subtitle="(Shift+Alt+D)" style="width: 100%" :color="$f7.data.themeOptions.dark === 'dark' ? '' : 'black'">
-      <!--
-      <f7-navbar-right>
-        <f7-menu-item icon-f7="line_horizontal_3" dropdown>
-          <f7-menu-dropdown right>
-            <f7-menu-dropdown-item href="#" text="Tools"></f7-menu-dropdown-item>
-            <f7-menu-dropdown-item href="#" text="Help"></f7-menu-dropdown-item>
-          </f7-menu-dropdown>
-        </f7-menu-item>
-      </f7-navbar-right>
-      -->
-    </f7-navbar>
-    <f7-row class="align-items-stretch">
-      <f7-col resizable class="display-flex flex-direction-column" style="padding: 0px; border: none; min-width: 50px; background-color: transparent">
-        <f7-row resizable style="height: 50%; min-height: 50px; margin: 0">
-          <developer-sidebar />
-        </f7-row>
-        <f7-row resizable style="height: 50%; min-height: 50px; margin: 0">
-          <help-sidebar />
-        </f7-row>
-      </f7-col>
-    </f7-row>
+    <f7-navbar title="Developer Sidebar" subtitle="(Shift+Alt+D)" style="width: 100%" :color="$f7.data.themeOptions.dark === 'dark' ? '' : 'black'"></f7-navbar>
+    <f7-segmented strong tag="p" style="margin-right: calc(var(--f7-searchbar-inner-padding-right) + var(--f7-safe-area-right)); margin-left: calc(var(--f7-searchbar-inner-padding-left) + var(--f7-safe-area-left)); margin-top: 5px; margin-bottom: 5px">
+      <f7-button :active="dockView === 'tools'" @click="dockView = 'tools'">Tools</f7-button>
+      <f7-button :active="dockView === 'help'" @click="dockView = 'help'">Help</f7-button>
+    </f7-segmented>
+    <developer-sidebar v-if="dockView === 'tools'"/>
+    <help-sidebar v-if="dockView === 'help'"/>
   </f7-page>
 </template>
 
@@ -50,5 +35,10 @@ export default {
     DeveloperSidebar,
     HelpSidebar
   },
+  data () {
+    return {
+      dockView: 'tools'
+    }
+  }
 }
 </script>
diff --git a/bundles/org.openhab.ui/web/src/components/developer/developer-sidebar.vue b/bundles/org.openhab.ui/web/src/components/developer/developer-sidebar.vue
@@ -1,20 +1,18 @@
 <template>
   <f7-block class="developer-sidebar">
-    <f7-navbar title="Tools" :color="$f7.data.themeOptions.dark === 'dark' ? '' : 'black'">
-      <f7-subnavbar :inner="false" v-if="!$theme.md">
-        <f7-searchbar style="width: 100%" custom-search placeholder="Search and Pin" :backdrop="false" @searchbar:search="search" @searchbar:clear="clearSearch" />
-      </f7-subnavbar>
-    </f7-navbar>
-    <f7-subnavbar style="width: 100%" :inner="false" v-if="$theme.md">
+    <f7-segmented strong tag="p" style="margin-right: calc(var(--f7-searchbar-inner-padding-right) + var(--f7-safe-area-right)); margin-left: calc(var(--f7-searchbar-inner-padding-left) + var(--f7-safe-area-left)); margin-top: 0">
+      <f7-button :active="activeTab === 'pin'" icon-f7="pin_fill" icon-size="18" @click="activeTab = 'pin'" />
+      <f7-button :active="activeTab === 'events'" icon-f7="bolt_horizontal_fill" icon-size="18" @click="activeTab = 'events'" />
+      <f7-button :active="activeTab === 'scripting'" icon-f7="pencil_ellipsis_rectangle" icon-size="18" @click="activeTab = 'scripting'" />
+      <f7-button :active="activeTab === 'tools'" icon-f7="rectangle_stack_badge_plus" icon-size="18" @click="activeTab = 'tools'" />
+    </f7-segmented>
+    <f7-row :inner="false" v-if="!$theme.md">
+      <f7-searchbar style="width: 100%" custom-search placeholder="Search and Pin" :backdrop="false" @searchbar:search="search" @searchbar:clear="clearSearch" />
+    </f7-row>
+    <f7-row style="width: 100%" :inner="false" v-if="$theme.md">
       <f7-searchbar custom-search placeholder="Search and Pin" :backdrop="false" @searchbar:search="search" @searchbar:clear="clearSearch" />
-    </f7-subnavbar>
+    </f7-row>
     <div v-if="!searching" class="developer-sidebar-content">
-      <f7-segmented strong tag="p" style="margin-right: calc(var(--f7-searchbar-inner-padding-right) + var(--f7-safe-area-right)); margin-left: calc(var(--f7-searchbar-inner-padding-left) + var(--f7-safe-area-left))">
-        <f7-button :active="activeTab === 'pin'" icon-f7="pin_fill" icon-size="18" @click="activeTab = 'pin'" />
-        <f7-button :active="activeTab === 'events'" icon-f7="bolt_horizontal_fill" icon-size="18" @click="activeTab = 'events'" />
-        <f7-button :active="activeTab === 'scripting'" icon-f7="pencil_ellipsis_rectangle" icon-size="18" @click="activeTab = 'scripting'" />
-        <f7-button :active="activeTab === 'tools'" icon-f7="rectangle_stack_badge_plus" icon-size="18" @click="activeTab = 'tools'" />
-      </f7-segmented>
       <div v-if="activeTab === 'pin'">
         <f7-block class="no-margin no-padding">
           <f7-block-title class="padding-horizontal" medium>
@@ -315,26 +313,15 @@
 </template>
 
 <style lang="stylus">
-.panel-right.panel-in-breakpoint:before
-  position absolute
-  left 0
-  top 0
-  height 100%
-  width 1px
-  background rgba(0,0,0,0.1)
-  content ''
-  z-index 6000
-
 .developer-sidebar
   scrollbar-width none /* Firefox */
   -ms-overflow-style none  /* IE 10+ */
   margin 0 !important
   padding 0
+  padding-top 0.3rem
   width 100%
 
   .developer-sidebar-content
-    margin-top var(--f7-subnavbar-height)
-    margin-bottom 16px
     padding-top 0.3rem
 
   &.page

diff --git a/bundles/org.openhab.ui/web/src/components/developer/help-sidebar.vue b/bundles/org.openhab.ui/web/src/components/developer/help-sidebar.vue
@@ -1,12 +1,11 @@
 <template>
   <f7-block class="help-sidebar">
-    <f7-navbar style="width: 100%" title="Help" :color="$f7.data.themeOptions.dark === 'dark' ? '' : 'black'" />
     <div class="help-sidebar-content">
-      <f7-segmented strong tag="p" style="margin-right: calc(var(--f7-searchbar-inner-padding-right) + var(--f7-safe-area-right)); margin-left: calc(var(--f7-searchbar-inner-padding-left) + var(--f7-safe-area-left))">
+      <f7-segmented strong tag="p" style="margin-right: calc(var(--f7-searchbar-inner-padding-right) + var(--f7-safe-area-right)); margin-left: calc(var(--f7-searchbar-inner-padding-left) + var(--f7-safe-area-left)); margin-top: 0">
         <f7-button :active="activeHelpTab === 'quick'" icon-f7="cursor_rays" icon-size="18" @click="activeHelpTab = 'quick'" />
+        <f7-button :active="activeHelpTab === 'current'" icon-f7="doc_richtext" icon-size="18" @click="activeHelpTab = 'current'" />
         <f7-button :active="activeHelpTab === 'faq'" icon-f7="question_diamond_fill" icon-size="18" @click="activeHelpTab = 'faq'" />
-        <f7-button :active="activeHelpTab === 'glossary'" icon-f7="square_favorites_fill" icon-size="18" @click="activeHelpTab = 'glossary'" />
-        <f7-button :active="activeHelpTab === 'more'" icon-f7="text_bubble_fill" icon-size="18" @click="activeHelpTab = 'more'" />
+        <f7-button :active="activeHelpTab === 'binding'" icon-f7="bag_fill" icon-size="18" @click="activeHelpTab = 'binding'" />
       </f7-segmented>
       <div v-if="activeHelpTab === 'quick'">
         <f7-block class="no-margin no-padding">
@@ -15,25 +14,15 @@
           </f7-block-title>
         </f7-block>
         <f7-block class="no-margin no-padding">
-          <f7-list>
-            <f7-list-item link="/settings/addons" title="1. Install a Binding"></f7-list-item>
-            <f7-list-item link="/settings/things/inbox" title="2. Add a Thing"></f7-list-item>
-            <f7-list-item link="/settings/things" title="3. Configure the Thing"></f7-list-item>
-            <f7-list-item link="/settings/items" title="4. Create an Item"></f7-list-item>
-            <f7-list-item link="/settings/pages" title="5. Display Item in UI"></f7-list-item>
-          </f7-list>
-        </f7-block>
-        <f7-block class="no-margin no-padding">
-          <f7-block-title class="padding-horizontal" medium>
-            Semantic Model
-          </f7-block-title>
-        </f7-block>
-        <f7-block class="no-margin no-padding">
-          <f7-list>
-            <f7-list-item link="addons/" title="1. Create Base Location"></f7-list-item>
-            <f7-list-item link="things/inbox/" title="2. Add Additional Locations"></f7-list-item>
-            <f7-list-item link="things/" title="3. Add Equipment"></f7-list-item>
-            <f7-list-item link="pages/" title="4. View Autogenerated Model Cards"></f7-list-item>
+          <f7-list accordion-list>
+            <f7-list-item v-for="instruct in qstart" :key="instruct.title" accordion-item :accordion-item-opened="instruct.opened" :title="instruct.title">
+              <f7-accordion-content>
+                <f7-list media-list>
+                  <f7-list-item v-for="step in instruct.steps" :key="step.title" :link="step.link" :title="step.title" :text="step.text"></f7-list-item>
+                  <f7-list-button v-if="instruct.button" :external="true" :title="instruct.button.title" :href="instruct.button.link" target="_blank"></f7-list-button>
+                </f7-list>
+              </f7-accordion-content>
+            </f7-list-item>
           </f7-list>
         </f7-block>
       </div>
@@ -46,84 +35,49 @@
         </f7-block>
         <f7-block class="no-margin no-padding">
           <f7-list accordion-list>
-            <f7-list-item accordion-item title="Create a rule?">
-              <f7-accordion-content>
-                <f7-block>
-                  <p>
-                    In the left panel go to <f7-link href="rules/">Settings -> Rules</f7-link> and then click on the blue plus in the lower right corner.
-                  </p>
-                  <p><f7-link external target="_blank" href="https://www.openhab.org/docs/tutorial/rules_introduction.html">Full Help Docs</f7-link></p>
-                </f7-block>
-              </f7-accordion-content>
-            </f7-list-item>
-            <f7-list-item accordion-item title="Delete an Item?">
-              <f7-accordion-content>
-                <f7-block>
-                  <p>
-                    Lorem Ipsum
-                  </p>
-                </f7-block>
-              </f7-accordion-content>
-            </f7-list-item>
-            <f7-list-item accordion-item title="Do this other thing?">
+            <f7-list-item  accordion-item v-for="faq in faqs" :key="faq.title" :title="faq.title">
               <f7-accordion-content>
                 <f7-block>
-                  <p>
-                    Lorem Ipsum
+                  <p v-if="faq.goto">
+                    In the left panel go to <f7-link :href="faq.goto.target">{{ faq.goto.text }}</f7-link>
                   </p>
+                  <p v-html="faq.text"></p>
+                  <p v-if="faq.doclink"><f7-link external target="_blank" :href="faq.doclink">Full Help Docs</f7-link></p>
                 </f7-block>
               </f7-accordion-content>
             </f7-list-item>
           </f7-list>
         </f7-block>
       </div>
 
-      <div v-else-if="activeHelpTab === 'glossary'">
+      <div v-else-if="activeHelpTab === 'binding'">
         <f7-block class="no-margin no-padding">
           <f7-block-title class="padding-horizontal" medium>
-            Glossary
+            Add-on Docs
           </f7-block-title>
         </f7-block>
         <f7-block class="no-margin no-padding">
-          <f7-list accordion-list>
-            <f7-list-item accordion-item title="Binding">
-              <f7-accordion-content>
-                <f7-block>
-                  <p>
-                    An add-on to openHAB that allows some 3rd party service or device(s) to communicate with the core software.
-                  </p>
-                </f7-block>
-              </f7-accordion-content>
-            </f7-list-item>
-            <f7-list-item accordion-item title="Channel">
-              <f7-accordion-content>
-                <f7-block>
-                  <p>
-                    One single attribute of a Thing which openHAB can read and/or write
-                  </p>
-                </f7-block>
-              </f7-accordion-content>
-            </f7-list-item>
-            <f7-list-item accordion-item title="Event">
-              <f7-accordion-content>
-                <f7-block>
-                  <p>
-                    An occurrence such as a change in Item State or the triggering of a Channel with the potential to trigger a reaction. See events.log.
-                  </p>
-                </f7-block>
-              </f7-accordion-content>
-            </f7-list-item>
+          <f7-list media-list>
+            <f7-list-item v-for="addon in addons" :key="addon.uid" :link="addon.link" :external="true" target="_blank" :title="addon.label.replaceAll(/Binding|Transformation|Persistence/gi,'')" :text="addon.type"></f7-list-item>
           </f7-list>
         </f7-block>
       </div>
 
-      <div v-else-if="activeHelpTab === 'more'">
+      <div v-else-if="activeHelpTab === 'current'">
         <f7-block class="no-margin no-padding">
           <f7-block-title class="padding-horizontal" medium>
-            More Resources
+            Page Help
           </f7-block-title>
         </f7-block>
+        <f7-block class="no-margin no-padding">
+          <thing-context v-if="($store.state.pagePath).indexOf('things')>=0"/>
+          <default-context v-else/>
+        </f7-block>
         <f7-block>
+          <f7-block-title class="padding-horizontal" medium>
+            More Help
+          </f7-block-title>
+          <p>You can find many more details and help at these resources</p>
           <p><f7-link external target="_blank" href="https://www.openhab.org/" v-t="'about.homePage'" /></p>
           <p><f7-link external target="_blank" href="https://www.openhab.org/docs/" v-t="'about.documentation'" /></p>
           <p><f7-link external target="_blank" href="https://community.openhab.org/" v-t="'about.communityForum'" /></p>
@@ -135,20 +89,10 @@
 </template>
 
 <style lang="stylus">
-.panel-right.panel-in-breakpoint:before
-  position absolute
-  left 0
-  top 0
-  height 100%
-  width 1px
-  background rgba(0,0,0,0.1)
-  content ''
-  z-index 6000
-
 .help-sidebar
   scrollbar-width none /* Firefox */
   -ms-overflow-style none  /* IE 10+ */
-  margin 0
+  margin 0 !important
   padding 0
   width 100%
 
@@ -169,12 +113,34 @@
 </style>
 
 <script>
+import { loadLocaleMessages } from '@/js/i18n'
+import ThingContext from './help/thing-context.vue'
+import DefaultContext from './help/default-context.vue'
 
 export default {
+  components: {
+    ThingContext,
+    DefaultContext
+  },
   data () {
     return {
-      activeHelpTab: 'quick'
+      activeHelpTab: 'quick',
+      addons: []
     }
+  },
+  created () {
+    this.faqs = require('./help/help-faq-defs.json')
+    this.qstart = require('./help/help-qstart-defs.json')
+    this.$oh.api.get('/rest/addons').then(data => {
+      this.addons = data.filter(addon => addon.installed).sort((a, b) => a.label.toUpperCase().localeCompare(b.label.toUpperCase()))
+    }).catch((err) => {
+      // sometimes we get 502 errors ('Jersey is not ready yet!'), keep trying
+      console.log('Error while accessing the API, retrying every 5 seconds: ', err)
+      setTimeout(this.load, 5000)
+    })
+  },
+  i18n: {
+    messages: loadLocaleMessages(require.context('@/assets/i18n/about'))
   }
 }
 </script>