-
-
Notifications
You must be signed in to change notification settings - Fork 243
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
This adds a complete filter configuration from the UI together with support through the YAML code tab. Filter configuration provides input validation and automatically adds required parameters if they are not set. Signed-off-by: Florian Hotze <florianh_dev@icloud.com>
- Loading branch information
1 parent
34275a6
commit f157804
Showing
5 changed files
with
365 additions
and
12 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
52 changes: 52 additions & 0 deletions
52
bundles/org.openhab.ui/web/src/pages/settings/persistence/filter-picker.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| <template> | ||
| <f7-list class="strategy-picker-container" v-if="filters"> | ||
| <f7-list-item title="Select filters" :smart-select="disabled !== true" :smart-select-params="smartSelectParams" | ||
| ref="smartSelect" class="defaults-picker"> | ||
| <select v-if="disabled !== true" name="filters" multiple @change="select"> | ||
| <option v-for="s in filters" :key="s" :value="s" | ||
| :selected="value.includes(s)"> | ||
| {{ s }} | ||
| </option> | ||
| </select> | ||
| <div v-else> | ||
| {{ value.join(', ') }} | ||
| </div> | ||
| </f7-list-item> | ||
| </f7-list> | ||
| </template> | ||
|
|
||
| <style lang="stylus"> | ||
| .strategy-picker-container | ||
| .item-content | ||
| padding-left calc(var(--f7-list-item-padding-horizontal) / 2 + var(--f7-safe-area-left)) | ||
| .item-media | ||
| padding 0 | ||
| .item-inner:after | ||
| display none | ||
| </style> | ||
|
|
||
| <script> | ||
| export default { | ||
| props: ['filters', 'value', 'disabled'], | ||
| emits: ['filtersSelected'], | ||
| data () { | ||
| return { | ||
| smartSelectParams: { | ||
| view: this.$f7.view.main, | ||
| openIn: 'popup', | ||
| virtualList: true, | ||
| virtualListHeight: (this.$theme.aurora) ? 32 : undefined | ||
| } | ||
| } | ||
| }, | ||
| methods: { | ||
| select () { | ||
| this.$f7.input.validateInputs(this.$refs.smartSelect.$el) | ||
| const value = this.$refs.smartSelect.f7SmartSelect.getValue() | ||
| this.$emit('filtersSelected', value) | ||
| } | ||
| } | ||
| } | ||
| </script> |
65 changes: 65 additions & 0 deletions
65
bundles/org.openhab.ui/web/src/pages/settings/persistence/filter-popup.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| <template> | ||
| <f7-popup ref="modulePopup" class="moduleconfig-popup"> | ||
| <f7-page> | ||
| <f7-navbar> | ||
| <f7-nav-left> | ||
| <f7-link icon-ios="f7:arrow_left" icon-md="material:arrow_back" icon-aurora="f7:arrow_left" popup-close /> | ||
| </f7-nav-left> | ||
| <f7-nav-title> | ||
| Configure {{ filterType.label.toLowerCase() }} filter | ||
| </f7-nav-title> | ||
| <f7-nav-right> | ||
| <f7-link v-show="currentFilter.name" @click="updateModuleConfig"> | ||
| Done | ||
| </f7-link> | ||
| </f7-nav-right> | ||
| </f7-navbar> | ||
| <f7-block class="no-margin no-padding"> | ||
| <f7-col> | ||
| <f7-list> | ||
| <f7-list-input ref="name" label="Name" type="text" placeholder="Required" :value="currentFilter.name" | ||
| @input="currentFilter.name = $event.target.value" | ||
| :disabled="!createMode" | ||
| :info="(createMode) ? 'Note: cannot be changed after the creation' : ''" | ||
| required validate pattern="[A-Za-z]+" error-message="Required. A-Z,a-z only" /> | ||
| </f7-list> | ||
| </f7-col> | ||
| <f7-col> | ||
| <f7-block-title medium> | ||
| Configuration | ||
| </f7-block-title> | ||
| <config-sheet ref="config-sheet" :parameter-groups="[]" :parameters="filterConfigDescriptionParameters" | ||
| :configuration="currentFilter" /> | ||
| </f7-col> | ||
| </f7-block> | ||
| </f7-page> | ||
| </f7-popup> | ||
| </template> | ||
|
|
||
| <script> | ||
| import ConfigSheet from '@/components/config/config-sheet.vue' | ||
| export default { | ||
| components: { ConfigSheet }, | ||
| props: ['filter', 'filterType', 'filterConfigDescriptionParameters'], | ||
| emits: ['filterUpdate'], | ||
| data () { | ||
| return { | ||
| createMode: !this.filter, | ||
| currentFilter: this.filter || { | ||
| name: null | ||
| } | ||
| } | ||
| }, | ||
| methods: { | ||
| updateModuleConfig () { | ||
| if (!this.$refs['config-sheet'].isValid()) { | ||
| this.$f7.dialog.alert('Please review the configuration and correct validation errors') | ||
| return | ||
| } | ||
| this.$f7.emit('filterUpdate', this.currentFilter, this.filterType.name) | ||
| this.$refs.modulePopup.close() | ||
| } | ||
| } | ||
| } | ||
| </script> |
Oops, something went wrong.