Rules: add item state update to action module wizard (#675)

Depends on https://github.com/openhab/openhab-core/pull/1970.

Also:
- Add abiilty to create a Blockly script directly.

- Only update statuses that changed in the rules list (might help with #673 and similar to #466/#439).

Signed-off-by: Yannick Schaus <github@schaus.net>

bundles/org.openhab.ui/web/src/components/rule/action-module-wizard.vue

@@ -33,30 +33,43 @@
     </f7-list>
   </f7-block>
   <f7-block class="no-margin no-padding" v-else-if="category === 'item'">
+    <f7-list>
+      <f7-list-item radio :checked="itemEventType === 'command'" name="MediaEventType" title="send a command to" @click="updateItemEventType('command')" />
+      <f7-list-item radio :checked="itemEventType === 'update'" name="MediaEventType" title="update the state of" @click="updateItemEventType('update')" />
+    </f7-list>
     <f7-list>
       <item-picker :value="currentModule.configuration.itemName" title="Item" @input="(val) => $set(currentModule.configuration, 'itemName', val)" @itemSelected="(value) => { $set(this, 'currentItem', value); updateItemEventType('command') }" />
     </f7-list>
     <f7-list>
       <f7-list-input
+        v-if="itemEventType === 'command'"
         label="Command to send"
         name="command"
         type="text"
         :value="currentModule.configuration.command"
         @blur="(evt) => $set(currentModule.configuration, 'command', evt.target.value)"
         />
+      <f7-list-input
+        v-else-if="itemEventType === 'update'"
+        label="to state"
+        name="state"
+        type="text"
+        :value="currentModule.configuration.state"
+        @blur="(evt) => $set(currentModule.configuration, 'state', evt.target.value)"
+        />
     </f7-list>
-    <f7-list v-if="commandSuggestions.length">
+    <f7-list v-if="itemEventType === 'command' && commandSuggestions.length">
       <f7-list-item radio :checked="currentModule.configuration.command === suggestion.command" v-for="suggestion in commandSuggestions" :key="suggestion.command"
         :title="suggestion.label" @click="$set(currentModule.configuration, 'command', suggestion.command)" />
     </f7-list>
-    <!-- <f7-block v-if="currentItem && (currentItem.type === 'Dimmer' || currentItem.type === 'Rollershutter' || (currentItem.type === 'Number' && currentItem.stateDescription && currentItem.stateDescription.minimum !== undefined))">
+    <!-- <f7-block v-if="itemEventType === 'command' && currentItem && (currentItem.type === 'Dimmer' || currentItem.type === 'Rollershutter' || (currentItem.type === 'Number' && currentItem.stateDescription && currentItem.stateDescription.minimum !== undefined))">
       <f7-range :value="currentModule.configuration.command" @range:changed="(val) => $set(currentModule.configuration, 'command', val)"
         :min="(currentItem.stateDescription && currentItem.stateDescription.minimum) ? currentItem.stateDescription.minimum : 0"
         :max="(currentItem.stateDescription && currentItem.stateDescription.maximum) ? currentItem.stateDescription.maximum : 100"
         :step="(currentItem.stateDescription && currentItem.stateDescription.step) ? currentItem.stateDescription.step : 1"
         :scale="true" :label="true" :scaleSubSteps="5" />
     </f7-block> -->
-    <f7-list v-if="currentItem && currentItem.type === 'Color'" media-list>
+    <f7-list v-if="itemEventType === 'command' && currentItem && currentItem.type === 'Color'" media-list>
       <f7-list-input media-item type="colorpicker" label="Pick a color" :color-picker-params="{
           targetEl: '#color-picker-value',
           targetElSetBackgroundColor: true,
@@ -206,7 +219,12 @@ export default {
       this.itemEventType = type
       switch (type) {
         case 'command':
-          this.$emit('typeSelect', 'core.ItemCommandAction')
+          this.$emit('typeSelect', 'core.ItemCommandAction', true)
+          if (this.currentItem) this.$set(this.currentModule, 'configuration', Object.assign({}, { itemName: this.currentItem.name }))
+          break
+        case 'update':
+          this.$emit('typeSelect', 'core.ItemStateUpdateAction', true)
+          if (this.currentItem) this.$set(this.currentModule, 'configuration', Object.assign({}, { itemName: this.currentItem.name }))
           break
       }
     },
@@ -214,10 +232,10 @@ export default {
       this.rulesEventType = type
       switch (type) {
         case 'run':
-          this.$emit('typeSelect', 'core.RunRuleAction')
+          this.$emit('typeSelect', 'core.RunRuleAction', true)
           break
         case 'enable':
-          this.$emit('typeSelect', 'core.RuleEnablementAction')
+          this.$emit('typeSelect', 'core.RuleEnablementAction', true)
           break
       }
     },
@@ -225,10 +243,10 @@ export default {
       this.mediaEventType = type
       switch (type) {
         case 'say':
-          this.$emit('typeSelect', 'media.SayAction')
+          this.$emit('typeSelect', 'media.SayAction', true)
           break
         case 'play':
-          this.$emit('typeSelect', 'media.PlayAction')
+          this.$emit('typeSelect', 'media.PlayAction', true)
           break
       }
     },

bundles/org.openhab.ui/web/src/pages/settings/rules/module-description-suggestions.js

@@ -67,6 +67,9 @@ export default {
         case 'core.ItemCommandAction':
           if (!config.itemName || !config.command) return moduleType.label
           return 'Send command ' + config.command + ' to ' + config.itemName
+        case 'core.ItemStateUpdateAction':
+          if (!config.itemName || !config.state) return moduleType.label
+          return 'Update the state of ' + config.itemName + ' to ' + config.state
         case 'media.SayAction':
           if (!config.text) return moduleType.label
           return 'Say "' + config.text + '"'

bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue

@@ -181,7 +181,6 @@ export default {
     },
     startEventSource () {
       this.eventSource = this.$oh.sse.connect('/rest/events?topics=openhab/rules/*/*', null, (event) => {
-        console.log(event)
         const topicParts = event.topic.split('/')
         switch (topicParts[3]) {
           case 'added':
@@ -191,8 +190,11 @@ export default {
             break
           case 'state':
             const rule = this.rules.find((r) => r.uid === topicParts[2])
+            const newStatus = JSON.parse(event.payload)
             if (!rule) break
-            this.$set(rule, 'status', JSON.parse(event.payload))
+            if (rule.status.status !== newStatus.status) rule.status.status = newStatus.status
+            if (rule.status.statusDetail !== newStatus.statusDetail) rule.status.statusDetail = newStatus.statusDetail
+            if (rule.status.description !== newStatus.description) rule.status.description = newStatus.description
         }
       })
     },

bundles/org.openhab.ui/web/src/pages/settings/rules/script/script-edit.vue

@@ -31,15 +31,22 @@
     <script-general-settings v-else-if="createMode" :createMode="true" :rule="rule" />
     <f7-block class="block-narrow" v-if="newScript">
       <f7-col>
-        <f7-block-title medium class="margin-bottom">Script Language</f7-block-title>
+        <f7-list media-list>
+          <f7-block-title medium class="margin-bottom">Scripting Method</f7-block-title>
+          <f7-list-item media-item radio radio-icon="start"
+            title="Design with Blockly"
+            footer="A beginner-friendly way to build scripts visually by assembling blocks"
+            :value="'application/javascript+blockly'" :checked="mode === 'application/javascript+blockly'"
+            @change="mode = 'application/javascript+blockly'">
+            <img src="res/img/blockly.svg" height="32" width="32" slot="media" />
+          </f7-list-item>
+        </f7-list>
+        <f7-block-footer class="margin-vertical">or choose the scripting language:</f7-block-footer>
         <f7-list media-list>
           <f7-list-item media-item radio radio-icon="start"
             :value="mode" :checked="mode === language.contentType" @change="mode = language.contentType"
             v-for="language in languages" :key="language.contentType"
             :title="language.name" :after="language.version" :footer="language.contentType"></f7-list-item>
-          <!-- <f7-list-item media-item radio radio-icon="start"
-            :value="mode" :checked="mode === 'application/vnd.openhab.blockly.rule'" @change="mode = 'application/vnd.openhab.blockly.rule'"
-            :title="'Blockly editor'"></f7-list-item> -->
         </f7-list>
       </f7-col>
     </f7-block>
@@ -169,7 +176,7 @@ export default {
         actions: [],
         tags: ['Script']
       }
-      this.mode = 'application/javascript'
+      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',
@@ -203,7 +210,7 @@ export default {
           script: ''
         }
       }
-      if (this.mode === 'application/vnd.openhab.blockly.rule') {
+      if (this.mode === 'application/javascript+blockly') {
         actionModule.configuration.type = 'application/javascript'
         actionModule.configuration.blockSource = '<xml xmlns="https://developers.google.com/blockly/xml"></xml>'
       }
@@ -348,7 +355,6 @@ export default {
     },
     startEventSource () {
       this.eventSource = this.$oh.sse.connect('/rest/events?topics=openhab/rules/' + this.ruleId + '/*', null, (event) => {
-        console.log(event)
         const topicParts = event.topic.split('/')
         switch (topicParts[3]) {
           case 'state':