Skip to content

Commit

Permalink
Add context dependent pages
Browse files Browse the repository at this point in the history
Signed-off-by: jgeorgi <[email protected]>
  • Loading branch information
JustinGeorgi committed Sep 24, 2023
1 parent a22fdec commit 9aa738a
Show file tree
Hide file tree
Showing 10 changed files with 224 additions and 21 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down Expand Up @@ -37,7 +49,9 @@ export default {
},
data () {
return {
dockView: 'tools'
dockView: 'tools',
activeHelpTab: 'current',
activeTab: 'pin'
}
}
}
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
Expand Down Expand Up @@ -355,12 +349,12 @@ export default {
SearchResults,
ExpressionTester
},
props: ['activeTab'],
data () {
return {
searchQuery: '',
searchResultsLoading: false,
searching: false,
activeTab: 'pin',
monitoredItems: [],
sseClient: null,
eventTopicFilter: '',
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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: []
}
},
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
{
Expand All @@ -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"
},
{
Expand All @@ -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"
},
{
Expand All @@ -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",
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -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>

0 comments on commit 9aa738a

Please sign in to comment.