From 9aa738a223f942311b38488f3f9af6937d199f14 Mon Sep 17 00:00:00 2001
From: jgeorgi <justin.georgi@gmail.com>
Date: Sun, 17 Sep 2023 21:01:44 -0700
Subject: [PATCH] Add context dependent pages

Signed-off-by: jgeorgi <justin.georgi@gmail.com>
---
 .../components/developer/developer-dock.vue   | 20 +++++++++--
 .../developer/developer-sidebar.vue           |  8 +----
 .../src/components/developer/help-sidebar.vue | 29 +++++++++++----
 .../developer/help/addon-context.vue          | 29 +++++++++++++++
 .../developer/help/help-faq-defs.json         |  8 ++---
 .../developer/help/item-context.vue           | 26 ++++++++++++++
 .../developer/help/model-context.vue          | 32 +++++++++++++++++
 .../developer/help/page-context.vue           | 29 +++++++++++++++
 .../developer/help/rule-context.vue           | 35 +++++++++++++++++++
 .../developer/help/widget-context.vue         | 29 +++++++++++++++
 10 files changed, 224 insertions(+), 21 deletions(-)
 create mode 100644 bundles/org.openhab.ui/web/src/components/developer/help/addon-context.vue
 create mode 100644 bundles/org.openhab.ui/web/src/components/developer/help/item-context.vue
 create mode 100644 bundles/org.openhab.ui/web/src/components/developer/help/model-context.vue
 create mode 100644 bundles/org.openhab.ui/web/src/components/developer/help/page-context.vue
 create mode 100644 bundles/org.openhab.ui/web/src/components/developer/help/rule-context.vue
 create mode 100644 bundles/org.openhab.ui/web/src/components/developer/help/widget-context.vue

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
index b1653e944a..6d3b9b0d5c 100644
--- a/bundles/org.openhab.ui/web/src/components/developer/developer-dock.vue
+++ b/bundles/org.openhab.ui/web/src/components/developer/developer-dock.vue
@@ -5,8 +5,20 @@
       <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-segmented v-if="dockView === 'help'" 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 === 'binding'" icon-f7="bag_fill" icon-size="18" @click="activeHelpTab = 'binding'" />
+    </f7-segmented>
+    <f7-segmented v-if="dockView === 'tools'" 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>
+    <developer-sidebar v-if="dockView === 'tools'" :activeTab="activeTab"/>
+    <help-sidebar v-if="dockView === 'help'" :activeHelpTab="activeHelpTab"/>
   </f7-page>
 </template>
 
@@ -37,7 +49,9 @@ export default {
   },
   data () {
     return {
-      dockView: 'tools'
+      dockView: 'tools',
+      activeHelpTab: 'current',
+      activeTab: 'pin'
     }
   }
 }
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
index 01424585ce..266f15e8b4 100644
--- 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,11 +1,5 @@
 <template>
   <f7-block class="developer-sidebar">
-    <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>
@@ -355,12 +349,12 @@ export default {
     SearchResults,
     ExpressionTester
   },
+  props: ['activeTab'],
   data () {
     return {
       searchQuery: '',
       searchResultsLoading: false,
       searching: false,
-      activeTab: 'pin',
       monitoredItems: [],
       sseClient: null,
       eventTopicFilter: '',
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
index 941a0774b7..ed3bc0a34c 100644
--- 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,6 @@
 <template>
   <f7-block class="help-sidebar">
     <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)); 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 === '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">
           <f7-block-title class="padding-horizontal" medium>
@@ -71,6 +65,12 @@
         </f7-block>
         <f7-block class="no-margin no-padding">
           <thing-context v-if="($store.state.pagePath).indexOf('things')>=0"/>
+          <item-context v-if="($store.state.pagePath).indexOf('items')>=0"/>
+          <model-context v-if="($store.state.pagePath).indexOf('model')>=0"/>
+          <page-context v-if="($store.state.pagePath).indexOf('pages')>=0"/>
+          <rule-context v-if="($store.state.pagePath).indexOf('rules')>=0 || ($store.state.pagePath).indexOf('scenes')>=0 || ($store.state.pagePath).indexOf('scripts')>=0 || ($store.state.pagePath).indexOf('schedule')>=0"/>
+          <widget-context v-if="($store.state.pagePath).indexOf('widgets')>=0"/>
+          <addon-context v-if="($store.state.pagePath).indexOf('addons')>=0"/>
           <default-context v-else/>
         </f7-block>
         <f7-block>
@@ -110,21 +110,36 @@
   .help-sidebar
     &.page
       background #232323 !important
+
+.add-button-icon
+  color: blue
 </style>
 
 <script>
 import { loadLocaleMessages } from '@/js/i18n'
 import ThingContext from './help/thing-context.vue'
+import ItemContext from './help/item-context.vue'
+import ModelContext from './help/model-context.vue'
+import PageContext from './help/page-context.vue'
+import RuleContext from './help/rule-context.vue'
+import WidgetContext from './help/widget-context.vue'
+import AddonContext from './help/addon-context.vue'
 import DefaultContext from './help/default-context.vue'
 
 export default {
   components: {
     ThingContext,
+    ItemContext,
+    ModelContext,
+    PageContext,
+    RuleContext,
+    WidgetContext,
+    AddonContext,
     DefaultContext
   },
+  props: ['activeHelpTab'],
   data () {
     return {
-      activeHelpTab: 'quick',
       addons: []
     }
   },
diff --git a/bundles/org.openhab.ui/web/src/components/developer/help/addon-context.vue b/bundles/org.openhab.ui/web/src/components/developer/help/addon-context.vue
new file mode 100644
index 0000000000..da1a912a18
--- /dev/null
+++ b/bundles/org.openhab.ui/web/src/components/developer/help/addon-context.vue
@@ -0,0 +1,29 @@
+<template>
+  <f7-block>
+    <p>
+      <strong>Add-ons</strong> grow openHAB's functionality.
+    </p>
+    <p>
+      The Add-on Store allows you to install and remove many different types of add-ons.
+      <f7-list media-list>
+        <f7-list-item title="Bindings">
+          Communication functions between openHAB and different services or devices
+        </f7-list-item>
+        <f7-list-item title="Automation">
+          Scripting languages, pre-made rule template, and new Blockly functions
+        </f7-list-item>
+        <f7-list-item title="UI">
+          Pre-made UI widgets and other available UIs that work with openHAB
+        </f7-list-item>
+        <f7-list-item title="Other">
+          Full IoT ecosystem integration, data persistence services, item state transformations, and voice and speech.
+        </f7-list-item>
+      </f7-list>
+    </p>
+  </f7-block>
+</template>
+
+<script>
+export default {
+}
+</script>
diff --git a/bundles/org.openhab.ui/web/src/components/developer/help/help-faq-defs.json b/bundles/org.openhab.ui/web/src/components/developer/help/help-faq-defs.json
index 048c240d55..c41b84b9ed 100644
--- a/bundles/org.openhab.ui/web/src/components/developer/help/help-faq-defs.json
+++ b/bundles/org.openhab.ui/web/src/components/developer/help/help-faq-defs.json
@@ -5,7 +5,7 @@
         "target" : "settings/items/",
         "text" : "Settings > Items"
     },
-    "text" : "Click on the blue + in the lower right corner and select Add item.",
+    "text" : "Click on the <i class=\"f7-icons size-22 add-button-icon\">plus_circle_fill</i> in the lower right corner and select Add item.",
     "doclink" : "https://www.openhab.org/docs/configuration/items.html"
   },
   {
@@ -14,7 +14,7 @@
         "target" : "settings/pages/",
         "text" : "Settings > Pages"
     },
-    "text" : "Click on the blue + in the lower right corner and select the type of page you want to create.",
+    "text" : "Click on the <i class=\"f7-icons size-22 add-button-icon\">plus_circle_fill</i> in the lower right corner and select the type of page you want to create.",
     "doclink" : "https://www.openhab.org/docs/tutorial/rules_introduction.html"
   },
   {
@@ -23,7 +23,7 @@
         "target" : "settings/rules/",
         "text" : "Settings > Rules"
     },
-    "text" : "Click on the blue + in the lower right corner.",
+    "text" : "Click on the <i class=\"f7-icons size-22 add-button-icon\">plus_circle_fill</i> in the lower right corner.",
     "doclink" : "https://www.openhab.org/docs/tutorial/rules_introduction.html"
   },
   {
@@ -40,7 +40,7 @@
       "target" : "settings/items/",
       "text" : "Settings > Items"
     },
-    "text" : "Click on Select in the upper-right corner (or <kbd>ctrl</kbd> + click on an Item).  Select all Items to be deleted using the checkboxes and then click on the <span style=\"color: red\">Remove</span> button at the bottom of the screen."
+    "text" : "Click on Select in the upper-right corner (or Ctrl + Click on an Item).  Select all Items to be deleted using the checkboxes and then click on the <span style=\"color: red\">Remove</span> button at the bottom of the screen."
   },
   {
     "title" : "Find available icons",
diff --git a/bundles/org.openhab.ui/web/src/components/developer/help/item-context.vue b/bundles/org.openhab.ui/web/src/components/developer/help/item-context.vue
new file mode 100644
index 0000000000..3ad3aa7358
--- /dev/null
+++ b/bundles/org.openhab.ui/web/src/components/developer/help/item-context.vue
@@ -0,0 +1,26 @@
+<template>
+  <f7-block>
+    <p>
+      <strong>Items</strong> are openHAB's information storage and control structures.  Items can be Linked to the channels of a Thing to control and read data from a device or service. Items can also be used to store information that is just used by your openHAB system itself.
+    </p>
+    <p>
+      On these pages you can manage all the Items you have added to your system.
+      <f7-list media-list>
+        <f7-list-item title="Add new Items">
+          Add individual Items using the <i class="f7-icons size-22 add-button-icon">plus_circle_fill</i> button and, if needed, manually link them to Channel
+        </f7-list-item>
+        <f7-list-item title="Configure Items">
+          Click on any Item in the main list to see it's configuration page
+        </f7-list-item>
+        <f7-list-item title="Delete Items">
+          Select multiple Items using the top <strong>Select</strong> button and use the <strong>Remove</strong> button at the bottom or use the <span style="color: red">Remove Item</span> button on the individual Item pages
+        </f7-list-item>
+      </f7-list>
+    </p>
+  </f7-block>
+</template>
+
+<script>
+export default {
+}
+</script>
diff --git a/bundles/org.openhab.ui/web/src/components/developer/help/model-context.vue b/bundles/org.openhab.ui/web/src/components/developer/help/model-context.vue
new file mode 100644
index 0000000000..7640294a21
--- /dev/null
+++ b/bundles/org.openhab.ui/web/src/components/developer/help/model-context.vue
@@ -0,0 +1,32 @@
+<template>
+  <f7-block>
+    <p>
+      The <strong>Semantic Model</strong> is a way for you to group and categorize your openHAB Items to provide additional real-world relationships and information about them.  openHAB can use this information to automatically generate the location, equipment, and properties tabs of the home page.
+    </p>
+    <p>
+      Every semantic model object (location, equipment, or point) is just a regular openHAB item with semantic tags and arranged in semantic groups. It is important to note that not all of your items need to be included in the semantic model.  For most systems it only makes sence to inlcude those items that users will interact with.
+    </p>
+    <p>
+      On this page you can manage your system's semantic model.
+      <f7-list media-list>
+        <f7-list-item title="Add new locations">
+          Add group items with semantic group tags to represent physical locations in and around your home
+        </f7-list-item>
+        <f7-list-item title="Add new equipment">
+          Add group items with semantic equipment tags to represent devices of interest to users in specific locations
+        </f7-list-item>
+        <f7-list-item title="Add new points">
+          Add items with seemantic class and property tags to represent the actual information and interactions that users will need
+        </f7-list-item>
+        <f7-list-item title="Bulk creation of points">
+          Create equipement directly from your Things with the desired items for rapid building of a semantic model
+        </f7-list-item>
+      </f7-list>
+    </p>
+  </f7-block>
+</template>
+
+<script>
+export default {
+}
+</script>
diff --git a/bundles/org.openhab.ui/web/src/components/developer/help/page-context.vue b/bundles/org.openhab.ui/web/src/components/developer/help/page-context.vue
new file mode 100644
index 0000000000..80674be75d
--- /dev/null
+++ b/bundles/org.openhab.ui/web/src/components/developer/help/page-context.vue
@@ -0,0 +1,29 @@
+<template>
+  <f7-block>
+    <p>
+      <strong>Pages</strong> are the different MainUI presentations that you can make to present users with control over home system. The location, equipment, and properties tabs of the home page are automatically generated if you have a semantic model. All other pages, you must create for yourself.
+    </p>
+    <p>
+      On these pages you can manage all the Pages you have added to your system.
+      <f7-list media-list>
+        <f7-list-item title="Add new Pages">
+          Add individual Pages of all the different types using the <i class="f7-icons size-22 add-button-icon">plus_circle_fill</i> button
+        </f7-list-item>
+        <f7-list-item title="Configure Pages">
+          Click on any Page in the main list to see a graphical editor and a yaml code editor for that page
+        </f7-list-item>
+        <f7-list-item title="Delete Pages">
+          Select multiple Pages using the top <strong>Select</strong> button and use the <strong>Remove</strong> buttons at the bottom
+        </f7-list-item>
+        <f7-list-item title="Test Pages">
+          See your changes and test the page functions using the <strong>Run</strong> option in the editor
+        </f7-list-item>
+      </f7-list>
+    </p>
+  </f7-block>
+</template>
+
+<script>
+export default {
+}
+</script>
diff --git a/bundles/org.openhab.ui/web/src/components/developer/help/rule-context.vue b/bundles/org.openhab.ui/web/src/components/developer/help/rule-context.vue
new file mode 100644
index 0000000000..3dc4100aa5
--- /dev/null
+++ b/bundles/org.openhab.ui/web/src/components/developer/help/rule-context.vue
@@ -0,0 +1,35 @@
+<template>
+  <f7-block>
+    <p>
+      <strong>Rules</strong> are the heart of home automation.  They allow openHAB to respond to different events with automatic reactions. Rules can be a simple as a directive to turn on a single light at a given time but full scripting languages also allow for more complex reactions. Scenes, Scripts, and Schedules are all special types of rules.
+    </p>
+    <p>
+      Community made Rule Templates can also be added to your system from the <strong>Automation</strong> tab of the Add-on Store.
+    </p>
+    <p>
+      On these pages you can manage all the basic Rules you have added to your system.
+      <f7-list media-list>
+        <f7-list-item title="Add new Rules">
+          Add Rules using the <i class="f7-icons size-22 add-button-icon">plus_circle_fill</i> button
+        </f7-list-item>
+        <f7-list-item title="Configure Rules">
+          Click on any Rule in the main list to configure the rule or write a script action for the rule
+        </f7-list-item>
+        <f7-list-item title="Delete Rules">
+          Select multiple Pages using the top <strong>Select</strong> button and use the <strong>Remove</strong> button at the bottom or use the <span style="color: red">Remove Rule</span> button on the individual Rule pages 
+        </f7-list-item>
+        <f7-list-item title="Enable/Disable Rules">
+          Select multiple Rules using the top <strong>Select</strong> button and use the <strong>Enable</strong> or <strong>Disable</strong> buttons at the bottom or use the <i class="f7-icons size-22">play_circle</i> and <i class="f7-icons size-22">pause_circle</i> buttons on the individual Rule pages
+        </f7-list-item>
+        <f7-list-item title="Manually run Rules">
+          Use the <i class="f7-icons size-22">play</i> button on the individual Rule pages to have the rule run all actions immediately
+        </f7-list-item>
+      </f7-list>
+    </p>
+  </f7-block>
+</template>
+
+<script>
+export default {
+}
+</script>
diff --git a/bundles/org.openhab.ui/web/src/components/developer/help/widget-context.vue b/bundles/org.openhab.ui/web/src/components/developer/help/widget-context.vue
new file mode 100644
index 0000000000..1320fb4b68
--- /dev/null
+++ b/bundles/org.openhab.ui/web/src/components/developer/help/widget-context.vue
@@ -0,0 +1,29 @@
+<template>
+  <f7-block>
+    <p>
+      <strong>Widgets</strong> are interactive elements that can be placed on pages.
+    </p>
+    <p>
+      Community made Widgets can also be added to your system from the <strong>UI</strong> tab of the Add-on Store.
+    </p>
+    <p>
+      On these pages you can manage all the custom Widgets you have added to your system.
+      <f7-list media-list>
+        <f7-list-item title="Add new Rules">
+          Add Widgets using the <i class="f7-icons size-22 add-button-icon">plus_circle_fill</i> button
+        </f7-list-item>
+        <f7-list-item title="Edit Widgets">
+          Click on any Widget in the main list to open a code editor and graphical test space for the widget
+        </f7-list-item>
+        <f7-list-item title="Delete Widgets">
+          Select multiple Widgets using the top <strong>Select</strong> button and use the <strong>Remove</strong> button at the bottom
+        </f7-list-item>
+      </f7-list>
+    </p>
+  </f7-block>
+</template>
+
+<script>
+export default {
+}
+</script>