-
-
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.
Rule/script/scene edit: Update tag input & Refactoring (#2083)
- Refactor rule & scene settings into rule-general-settings Vue component and use this component on rule-edit, scene-edit pages and inside script-general-settings component. - Replace semantic tag picker & custom tag input with accordion tag input (inspired by #2078) and show number of tags. - Refactor shared code from rules & scenes into mixin (`rule-edit-mixin.js`). - Fix Scene tag is not hidden from tag input. - Show number of tags on page settings page, follow up for #2078. --------- Signed-off-by: Florian Hotze <[email protected]>
- Loading branch information
1 parent
5a9c0c9
commit ba7f126
Showing
7 changed files
with
222 additions
and
315 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
70 changes: 70 additions & 0 deletions
70
bundles/org.openhab.ui/web/src/components/rule/rule-general-settings.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,70 @@ | ||
| <template> | ||
| <div> | ||
| <f7-block v-if="ready" class="block-narrow"> | ||
| <f7-col> | ||
| <f7-list inline-labels no-hairlines-md> | ||
| <f7-list-input label="Unique ID" type="text" placeholder="Required" :value="rule.uid" required validate | ||
| :disabled="!createMode" :info="(createMode) ? 'Note: cannot be changed after the creation' : ''" | ||
| pattern="[A-Za-z0-9_\-]+" error-message="Required. A-Z,a-z,0-9,_,- only" | ||
| @input="rule.uid = $event.target.value" :clear-button="createMode" /> | ||
| <f7-list-input label="Name" type="text" placeholder="Required" :value="rule.name" required validate | ||
| :disabled="!isEditable" @input="rule.name = $event.target.value" :clear-button="isEditable" /> | ||
| <f7-list-input label="Description" type="text" :value="rule.description" | ||
| :disabled="!isEditable" @input="rule.description = $event.target.value" :clear-button="isEditable" /> | ||
| <f7-list-item v-if="(isEditable || rule.tags.length > 0) && (!createMode || !hasRuleTemplate)" accordion-item title="Tags" :after="numberOfTags" :disabled="!isEditable"> | ||
| <f7-accordion-content> | ||
| <tag-input :item="rule" :showSemanticTags="true" :inScriptEditor="inScriptEditor" :inSceneEditor="inSceneEditor" /> | ||
| </f7-accordion-content> | ||
| </f7-list-item> | ||
| </f7-list> | ||
| </f7-col> | ||
| </f7-block> | ||
|
|
||
| <!-- skeletons for not ready--> | ||
| <f7-block v-else class="block-narrow"> | ||
| <f7-col class="skeleton-text skeleton-effect-blink"> | ||
| <f7-list inline-labels no-hairlines-md> | ||
| <f7-list-input label="Unique ID" type="text" placeholder="Required" value="_______" required validate | ||
| :disabled="true" :info="(createMode) ? 'Note: cannot be changed after the creation' : ''" | ||
| @input="rule.uid = $event.target.value" :clear-button="createMode" /> | ||
| <f7-list-input label="Name" type="text" placeholder="Required" required validate | ||
| :disabled="true" @input="rule.name = $event.target.value" :clear-button="isEditable" /> | ||
| <f7-list-input label="Description" type="text" value="__ _____ ___ __ ___" | ||
| :disabled="true" @input="rule.description = $event.target.value" :clear-button="isEditable" /> | ||
| <f7-list-item accordion-item title="Tags" :disabled="!isEditable"> | ||
| <f7-accordion-content> | ||
| <tag-input :item="rule" :showSemanticTags="true" /> | ||
| </f7-accordion-content> | ||
| </f7-list-item> | ||
| </f7-list> | ||
| </f7-col> | ||
| </f7-block> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| import TagInput from '@/components/tags/tag-input.vue' | ||
| export default { | ||
| props: ['rule', 'ready', 'createMode', 'isEditable', 'hasRuleTemplate', 'inScriptEditor', 'inSceneEditor'], | ||
| components: { | ||
| TagInput | ||
| }, | ||
| computed: { | ||
| numberOfTags () { | ||
| if (!this.rule.tags) return 0 | ||
| return this.rule.tags.filter((t) => !this.isScriptTag(t) && !this.isSceneTag(t)).length | ||
| } | ||
| }, | ||
| methods: { | ||
| isScriptTag (tag) { | ||
| if (this.inScriptEditor !== true) return false | ||
| if (tag === 'Script') return true | ||
| }, | ||
| isSceneTag (tag) { | ||
| if (this.inSceneEditor !== true) return false | ||
| if (tag === 'Scene') return true | ||
| } | ||
| } | ||
| } | ||
| </script> |
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
111 changes: 111 additions & 0 deletions
111
bundles/org.openhab.ui/web/src/pages/settings/rules/rule-edit-mixin.js
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,111 @@ | ||
| import YAML from 'yaml' | ||
|
|
||
| export default { | ||
| data () { | ||
| return { | ||
| showModuleControls: false, | ||
| eventSource: null, | ||
| keyHandler: null | ||
| } | ||
| }, | ||
| computed: { | ||
| isEditable () { | ||
| return this.rule && this.rule.editable !== false | ||
| }, | ||
| yamlError () { | ||
| if (this.currentTab !== 'code') return null | ||
| try { | ||
| YAML.parse(this.ruleYaml, { prettyErrors: true }) | ||
| return 'OK' | ||
| } catch (e) { | ||
| return e | ||
| } | ||
| } | ||
| }, | ||
| methods: { | ||
| onPageAfterIn () { | ||
| if (window) { | ||
| window.addEventListener('keydown', this.keyDown) | ||
| } | ||
| this.load() | ||
| }, | ||
| onPageAfterOut () { | ||
| this.stopEventSource() | ||
| if (window) { | ||
| window.removeEventListener('keydown', this.keyDown) | ||
| } | ||
| }, | ||
| onEditorInput (value) { | ||
| this.ruleYaml = value | ||
| this.dirty = true | ||
| }, | ||
| toggleDisabled () { | ||
| if (this.createMode) return | ||
| if (this.copyMode) return | ||
| const enable = (this.rule.status.statusDetail === 'DISABLED') | ||
| this.$oh.api.postPlain('/rest/rules/' + this.rule.uid + '/enable', enable.toString()).then((data) => { | ||
| this.$f7.toast.create({ | ||
| text: (enable) ? 'Enabled' : 'Disabled', | ||
| destroyOnClose: true, | ||
| closeTimeout: 2000 | ||
| }).open() | ||
| }).catch((err) => { | ||
| this.$f7.toast.create({ | ||
| text: 'Error while disabling or enabling: ' + err, | ||
| destroyOnClose: true, | ||
| closeTimeout: 2000 | ||
| }).open() | ||
| }) | ||
| }, | ||
| keyDown (ev) { | ||
| if ((ev.ctrlKey || ev.metaKey) && !(ev.altKey || ev.shiftKey)) { | ||
| if (this.currentModule) return | ||
| switch (ev.keyCode) { | ||
| case 68: | ||
| this.toggleDisabled() | ||
| ev.stopPropagation() | ||
| ev.preventDefault() | ||
| break | ||
| case 82: | ||
| this.runNow() | ||
| ev.stopPropagation() | ||
| ev.preventDefault() | ||
| break | ||
| case 83: | ||
| this.save() | ||
| ev.stopPropagation() | ||
| ev.preventDefault() | ||
| break | ||
| } | ||
| } | ||
| }, | ||
| toggleModuleControls () { | ||
| this.showModuleControls = !this.showModuleControls | ||
| }, | ||
| showSwipeout (ev) { | ||
| let swipeoutElement = ev.target | ||
| ev.cancelBubble = true | ||
| while (!swipeoutElement.classList.contains('swipeout')) { | ||
| swipeoutElement = swipeoutElement.parentElement | ||
| } | ||
|
|
||
| if (swipeoutElement) { | ||
| this.$f7.swipeout.open(swipeoutElement) | ||
| } | ||
| }, | ||
| startEventSource () { | ||
| this.eventSource = this.$oh.sse.connect('/rest/events?topics=openhab/rules/' + this.ruleId + '/*', null, (event) => { | ||
| const topicParts = event.topic.split('/') | ||
| switch (topicParts[3]) { | ||
| case 'state': | ||
| this.$set(this.rule, 'status', JSON.parse(event.payload)) // e.g. {"status":"RUNNING","statusDetail":"NONE"} | ||
| break | ||
| } | ||
| }) | ||
| }, | ||
| stopEventSource () { | ||
| this.$oh.sse.close(this.eventSource) | ||
| this.eventSource = null | ||
| } | ||
| } | ||
| } |
Oops, something went wrong.