Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add tags & script language to script settings #1601

Merged
merged 7 commits into from
Jan 3, 2023
Merged

Add tags & script language to script settings #1601

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d8243db
[MainUI] Extend script settings for tags & language
florian-h05 Dec 22, 2022
c0fc1a7
[MainUI] Enable script language setting for rules
florian-h05 Dec 22, 2022
a64f712
[MainUI] Improve wording of toast messages in script editor
florian-h05 Dec 22, 2022
14df26f
[MainUI] Hide "Delete Script" if script part of rule
florian-h05 Dec 22, 2022
e79ab01
[MainUI] Hide "Script" tag in script editor
florian-h05 Dec 22, 2022
0829152
[MainUI] Fix regressions from previous commits
florian-h05 Dec 23, 2022
a42c802
[MainUI] Script Editor: Improve toast messages
florian-h05 Dec 30, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions bundles/org.openhab.ui/web/src/components/tags/tag-input.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<f7-list>
<f7-list-item>
<div slot="inner">
<f7-chip v-for="tag in item.tags.filter((t) => !isSemanticTag(t))" :key="tag" :text="tag" :deleteable="!disabled" @delete="deleteTag" media-bg-color="blue">
<f7-chip v-for="tag in item.tags.filter((t) => !isSemanticTag(t) && !isScriptTag(t))" :key="tag" :text="tag" :deleteable="!disabled" @delete="deleteTag" media-bg-color="blue">
<f7-icon slot="media" ios="f7:tag_fill" md="material:label" aurora="f7:tag_fill" />
</f7-chip>
</div>
Expand All @@ -28,7 +28,7 @@
import * as SemanticClasses from '@/assets/semantics.js'

export default {
props: ['item', 'disabled'],
props: ['item', 'disabled', 'inScriptEditor'],
data () {
return {
pendingTag: ''
Expand All @@ -41,6 +41,10 @@ export default {
SemanticClasses.Points,
SemanticClasses.Properties].some((t) => t.indexOf(tag) >= 0)
},
isScriptTag (tag) {
if (this.inScriptEditor !== true) return false
if (tag === 'Script') return true
},
addTag () {
if (this.pendingTag && this.item.tags.indexOf(this.pendingTag) === -1) {
this.item.tags.push(this.pendingTag)
Expand Down
61 changes: 36 additions & 25 deletions bundles/org.openhab.ui/web/src/pages/settings/rules/script/script-edit.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
<f7-button outline small :active="!blocklyCodePreview" icon-f7="ticket" :icon-size="($theme.aurora) ? 20 : 22" class="no-ripple" @click="blocklyCodePreview = false" />
<f7-button outline small :active="blocklyCodePreview" icon-f7="doc_text" :icon-size="($theme.aurora) ? 20 : 22" class="no-ripple" @click="showBlocklyCode" />
</f7-segmented>
<f7-link v-if="isScriptRule" class="right details-link padding-right" ref="detailsLink" @click="detailsOpened = true" icon-f7="chevron_up" />
<f7-link class="right details-link padding-right" ref="detailsLink" @click="detailsOpened = true" icon-f7="chevron_up" />
</span>
</f7-toolbar>
<f7-icon v-if="ready && !newScript && (!isBlockly && !isEditable) || (blocklyCodePreview && isBlockly)" f7="lock" class="float-right margin" style="opacity:0.5; z-index: 4000; user-select: none;" size="50" color="gray"
Expand Down Expand Up @@ -85,8 +85,8 @@
</div>
</f7-toolbar>
<f7-block class="block-narrow">
<script-general-settings :createMode="newScript" :rule="rule" />
<f7-col v-if="isEditable">
<script-general-settings :createMode="newScript" :rule="rule" :isScriptRule="isScriptRule" :mode="mode" :languages="languages" @newLanguage="changeLanguage" />
<f7-col v-if="isEditable && isScriptRule">
<f7-list>
<f7-list-button color="red" @click="deleteRule">
Remove Script
Expand Down Expand Up @@ -189,20 +189,8 @@ export default {
tags: ['Script']
}
this.mode = 'application/javascript+blockly'
this.$oh.api.get('/rest/module-types/script.ScriptAction').then((data) => {
this.$set(this, 'scriptModuleType', data)
this.$set(this, 'languages',
this.scriptModuleType.configDescriptions
.find((c) => c.name === 'type').options
.map((l) => {
return {
contentType: l.value,
name: l.label.split(' (')[0],
version: l.label.split(' (')[1].replace(')', '')
}
}))
this.ready = true
})
this.loadScriptModules()
this.ready = true
},
createScript () {
if (!this.rule.uid) {
Expand Down Expand Up @@ -243,6 +231,22 @@ export default {
this.load()
})
},
loadScriptModules () {
this.$oh.api.get('/rest/module-types/script.ScriptAction').then((data) => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One tiny general remark:
this component is also used to edit script conditions.
I understand you probably took this into account and figured there was no reason the list of languages would be different from the action to the condition, so good enough, but just pointing it out.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for that information.
I wasn‘t aware of this, but as there is no difference in the list of available languages for actions and conditions, this should be fine.
If I see it correctly, this component also did not take into account whether it edits an action or a condition before this PR.

this.$set(this, 'scriptModuleType', data)
let languages = this.scriptModuleType.configDescriptions
.find((c) => c.name === 'type').options
.map((l) => {
return {
contentType: l.value,
name: l.label.split(' (')[0],
version: l.label.split(' (')[1].replace(')', '')
}
})
if (this.isBlockly) languages = languages.filter((l) => l.contentType.startsWith('application/javascript'))
this.$set(this, 'languages', languages)
})
},
load () {
if (this.loading) return
this.loading = true
Expand Down Expand Up @@ -277,6 +281,8 @@ export default {
this.script = triggerDescriptionComments + '\n' + this.script
}

this.loadScriptModules()

this.ready = true
if (!this.eventSource) this.startEventSource()
})
Expand All @@ -285,7 +291,7 @@ export default {
if (!this.isEditable) return
if (this.rule.status.status === 'RUNNING') {
return this.$f7.toast.create({
text: 'Rule cannot be updated while running, please wait!',
text: `${this.isScriptRule ? 'Script' : 'Rule'} cannot be updated while running, please wait!`,
destroyOnClose: true,
closeTimeout: 2000
}).open()
Expand All @@ -300,29 +306,34 @@ export default {
}
}
this.currentModule.configuration.script = this.script
this.currentModule.configuration.type = this.mode
return this.$oh.api.put('/rest/rules/' + this.rule.uid, this.rule).then((data) => {
this.dirty = false
if (!noToast) {
this.$f7.toast.create({
text: 'Rule updated',
text: (this.isScriptRule ? 'Script' : 'Rule') + ' updated',
destroyOnClose: true,
closeTimeout: 2000
}).open()
}
}).catch((err) => {
this.$f7.toast.create({
text: 'Error while saving rule: ' + err,
text: 'Error while saving: ' + err,
destroyOnClose: true,
closeTimeout: 2000
}).open()
})
},
changeLanguage (contentType) {
if (this.createMode) return
this.mode = contentType
},
toggleDisabled () {
if (this.createMode) 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) ? 'Rule enabled' : 'Rule disabled',
text: (this.isScriptRule ? 'Script' : 'Rule') + (enable ? ' enabled' : ' disabled'),
destroyOnClose: true,
closeTimeout: 2000
}).open()
Expand All @@ -338,13 +349,13 @@ export default {
if (this.createMode) return
if (this.rule.status.status === 'RUNNING' || this.rule.status.status === 'UNINITIALIZED') {
return this.$f7.toast.create({
text: `Rule cannot be run ${(this.rule.status.status === 'RUNNING') ? 'while already running, please wait' : 'if it is disabled'}!`,
text: `${this.isScriptRule ? 'Script' : 'Rule'} cannot be run ${(this.rule.status.status === 'RUNNING') ? 'while already running, please wait' : 'if it is uninitialized'}!`,
destroyOnClose: true,
closeTimeout: 2000
}).open()
}
this.$f7.toast.create({
text: 'Running rule',
text: 'Running ' + (this.isScriptRule ? 'script' : 'rule'),
destroyOnClose: true,
closeTimeout: 2000
}).open()
Expand All @@ -354,7 +365,7 @@ export default {
savePromise.then(() => {
this.$oh.api.postPlain('/rest/rules/' + this.rule.uid + '/runnow', '').catch((err) => {
this.$f7.toast.create({
text: 'Error while running rule: ' + err,
text: 'Error while running: ' + err,
destroyOnClose: true,
closeTimeout: 2000
}).open()
Expand All @@ -364,7 +375,7 @@ export default {
deleteRule () {
this.$f7.dialog.confirm(
`Are you sure you want to delete ${this.rule.name}?`,
'Delete Rule',
'Delete ' + (this.isScriptRule ? 'Script' : 'Rule'),
() => {
this.$oh.api.delete('/rest/rules/' + this.rule.uid).then(() => {
this.$f7router.back('/settings/scripts/', { force: true })
Expand Down
23 changes: 21 additions & 2 deletions bundles/org.openhab.ui/web/src/pages/settings/rules/script/script-general-settings.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<f7-block v-if="!ready" class="block-narrow">
<f7-col>
<f7-col v-if="createMode || isScriptRule">
<f7-list class="no-margin" 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' : ''"
Expand All @@ -12,11 +12,30 @@
@input="rule.description = $event.target.value" clear-button />
</f7-list>
</f7-col>
<f7-col v-if="createMode || isScriptRule">
<f7-block-title>Tags</f7-block-title>
<tag-input :item="rule" :disabled="false" :inScriptEditor="true" />
</f7-col>
<f7-col v-if="!createMode && languages">
<f7-block-title>Scripting Language</f7-block-title>
<f7-list media-list>
<f7-list-item media-item radio radio-icon="start"
:value="mode" :checked="mode === language.contentType" @change="$emit('newLanguage', language.contentType)"
v-for="language in languages" :key="language.contentType"
:title="language.name" :after="language.version" :footer="language.contentType" />
</f7-list>
</f7-col>
</f7-block>
</template>

<script>
import TagInput from '@/components/tags/tag-input.vue'

export default {
props: ['rule', 'createMode', 'ready']
props: ['rule', 'createMode', 'ready', 'isScriptRule', 'languages', 'mode'],
emits: ['newLanguage'],
components: {
TagInput
}
}
</script>