Some improvements to rule editing, misc fixes (openhab#232)

Remove the ability to close script editors with the ESC key

Save the code being edited when saving the rule (for instance
with Ctrl-S/Cmd-S)

Add Ctrl-R/Cmd-R keyboard shortcut to run the rule

Fix player controls & add oh-player-card as default for Player items
Don't display the title/track part of the player card until items
are set; otherwise only display the playback controls

Add the ability (unstable/not documented for now) to use standard
widgets in modals

Fix modal config not being considered in popover

Fix default slider control min/max bounds using stateDescription

auth: check the token validity when the app becomes visible again
and renew it if necessary

Remove test card widget

Fix rule module reordering

Signed-off-by: Yannick Schaus <[email protected]>

Author: ghys

bundles/org.openhab.ui/web/src/components/config/controls/script-editor-popup.vue

@@ -1,5 +1,5 @@
 <template>
-  <f7-popup :id="popupId" class="editor-popup" close-on-escape :tablet-fullscreen="fullscreen" @popup:opened="() => showEditor = true" @popup:closed="popupClosed" :opened="opened">
+  <f7-popup :id="popupId" class="editor-popup" :tablet-fullscreen="fullscreen" @popup:opened="() => showEditor = true" @popup:closed="popupClosed" :opened="opened">
     <f7-page class="code-editor-content">
       <f7-navbar :title="title">
         <f7-nav-right>

bundles/org.openhab.ui/web/src/components/item/item-standalone-control.vue

@@ -33,8 +33,8 @@ export default {
               scale: true,
               label: true,
               scaleSubSteps: 5,
-              min: stateDescription.min,
-              max: stateDescription.max,
+              min: stateDescription.minimum,
+              max: stateDescription.maximum,
               step: stateDescription.step
             }
           }
@@ -58,6 +58,15 @@ export default {
             }
           }
         }
+
+        if (this.item.type === 'Player' && !stateDescription.readOnly) {
+          ctx.component = {
+            component: 'oh-player-card',
+            config: {
+              vertical: true
+            }
+          }
+        }
       }
 
       if (!ctx.component) {

bundles/org.openhab.ui/web/src/components/thing/channel-link.vue

@@ -27,7 +27,7 @@
         :title="(link.item.label) ? link.item.label : link.item.name"
         :footer="(link.item.label) ? link.item.name : '\xa0'"
         :subtitle="getItemTypeAndMetaLabel(link.item)"
-        :after="context.store[link.item.name].displayState || context.store[link.item.name].state"
+        :after="context.store[link.item.name] ? context.store[link.item.name].displayState || context.store[link.item.name].state : link.item.state"
       >
         <oh-icon v-if="link.item.category" slot="media" :icon="link.item.category" height="32" width="32" />
         <span v-else slot="media" class="item-initial">{{link.item.name[0]}}</span>

bundles/org.openhab.ui/web/src/components/widgets/modals/oh-popover.vue

@@ -27,10 +27,9 @@ export default {
   computed: {
     context () {
       return {
-        component: this.page || this.widget,
+        component: Object.assign({}, this.page || this.widget || this.standard, { config: this.modalParams }),
         store: this.$store.getters.trackedItems,
-        props: this.modalParams,
-        config: this.modalParams
+        props: this.modalParams
       }
     },
     page () {
@@ -39,13 +38,16 @@ export default {
     widget () {
       return (this.uid.indexOf('widget:') === 0) ? this.$store.getters.widget(this.uid.substring(7)) : null
     },
+    standard () {
+      return (this.uid.indexOf('oh-') === 0) ? { component: this.uid } : null
+    },
     ready () {
-      return this.page || this.widget
+      return this.page || this.widget || this.standard
     },
     componentType () {
       if (this.page) {
         return this.page.component
-      } else if (this.widget) {
+      } else if (this.widget || this.standard) {
         return 'generic-widget-component'
       }
       return null

bundles/org.openhab.ui/web/src/components/widgets/modals/oh-popup.vue

@@ -43,7 +43,7 @@ export default {
   computed: {
     context () {
       return {
-        component: this.page || this.widget,
+        component: Object.assign({}, this.page || this.widget || this.standard, { config: this.modalParams }),
         store: this.$store.getters.trackedItems,
         config: this.modalParams
       }
@@ -54,13 +54,16 @@ export default {
     widget () {
       return (this.uid.indexOf('widget:') === 0) ? this.$store.getters.widget(this.uid.substring(7)) : null
     },
+    standard () {
+      return (this.uid.indexOf('oh-') === 0) ? { component: this.uid } : null
+    },
     ready () {
-      return this.page || this.widget
+      return this.page || this.widget || this.standard
     },
     componentType () {
       if (this.page) {
         return this.page.component
-      } else if (this.widget) {
+      } else if (this.widget || this.standard) {
         return 'generic-widget-component'
       }
       return null

bundles/org.openhab.ui/web/src/components/widgets/modals/oh-sheet.vue

@@ -32,7 +32,7 @@ export default {
   computed: {
     context () {
       return {
-        component: this.page || this.widget,
+        component: Object.assign({}, this.page || this.widget || this.standard, { config: this.modalParams }),
         store: this.$store.getters.trackedItems,
         config: this.modalParams
       }
@@ -43,13 +43,16 @@ export default {
     widget () {
       return (this.uid.indexOf('widget:') === 0) ? this.$store.getters.widget(this.uid.substring(7)) : null
     },
+    standard () {
+      return (this.uid.indexOf('oh-') === 0) ? { component: this.uid } : null
+    },
     ready () {
-      return this.page || this.widget
+      return this.page || this.widget || this.standard
     },
     componentType () {
       if (this.page) {
         return this.page.component
-      } else if (this.widget) {
+      } else if (this.widget || this.standard) {
         return 'generic-widget-component'
       }
       return null

bundles/org.openhab.ui/web/src/components/widgets/standard/index.js

@@ -1,6 +1,5 @@
 /* Add any new widget to this file - the name of the export should be "OhSomething" */
 
-export { default as OhTestCard } from './oh-test-card.vue'
 export { default as OhLabelCard } from './oh-label-card.vue'
 export { default as OhToggleCard } from './oh-toggle-card.vue'
 export { default as OhRollershutterCard } from './oh-rollershutter-card.vue'

bundles/org.openhab.ui/web/src/components/widgets/standard/oh-label-card.vue

@@ -32,6 +32,7 @@
     .item-content
       flex-direction column
       padding-left 0
+      padding-right 0
   .item-inner
     padding 0 !important
     justify-content center !important

bundles/org.openhab.ui/web/src/components/widgets/standard/oh-player-card.vue

@@ -3,7 +3,7 @@
     <f7-card-header v-if="config.title">
       <div>{{config.title}}</div>
     </f7-card-header>
-    <f7-card-content>
+    <f7-card-content v-if="config.artistItem && config.trackItem">
       <f7-list>
         <f7-list-item>
           <div class="display-block">

bundles/org.openhab.ui/web/src/components/widgets/standard/oh-test-card.vue

@@ -26,7 +26,7 @@ export default {
   },
   computed: {
     isPlaying () {
-      const value = this.context.store[this.config.item]
+      const value = this.context.store[this.config.item].state
       return value === 'PLAY'
     }
   },

bundles/org.openhab.ui/web/src/components/widgets/system/oh-player-controls.vue

@@ -191,7 +191,7 @@ export const actionsMixin = {
         case 'sheet':
           const actionModal = this.config[prefix + 'actionModal']
           const actionModalConfig = this.config[prefix + 'actionModalConfig']
-          if (actionModal.indexOf('page:') !== 0 && actionModal.indexOf('widget:') !== 0) {
+          if (actionModal.indexOf('page:') !== 0 && actionModal.indexOf('widget:') !== 0 && actionModal.indexOf('oh-') !== 0) {
             console.log('Action target is not of the format page:uid or widget:uid')
             return
           }

bundles/org.openhab.ui/web/src/components/widgets/widget-actions.js

@@ -1,6 +1,11 @@
 import { Utils } from 'framework7'
 
 export default {
+  data () {
+    return {
+      currentTokenExpireTime: null
+    }
+  },
   methods: {
     getRefreshToken () {
       return localStorage.getItem('openhab.ui:refreshToken') || null
@@ -38,6 +43,8 @@ export default {
             'code': queryParams.code,
             'code_verifier': codeVerifier
           })
+
+          this.$oh.setAccessToken(null)
           this.$oh.api.postPlain('/rest/auth/token?useCookie=true', payload, 'application/json', 'application/x-www-form-urlencoded').then((data) => {
             const resp = JSON.parse(data)
             localStorage.setItem('openhab.ui:refreshToken', resp.refresh_token)
@@ -64,11 +71,16 @@ export default {
           'redirect_uri': window.location.origin,
           'refresh_token': refreshToken
         })
+
+        this.$oh.setAccessToken(null)
         this.$oh.api.postPlain('/rest/auth/token', payload, 'application/json', 'application/x-www-form-urlencoded').then((data) => {
           const resp = JSON.parse(data)
           this.$oh.setAccessToken(resp.access_token)
           // schedule the next token refresh when 95% of this token's lifetime has elapsed, i.e. 3 minutes before a 1-hour token is due to expire
           setTimeout(this.refreshAccessToken, resp.expires_in * 950)
+          // also make sure to check the token and renew it when the app becomes visible again
+          this.currentTokenExpireTime = new Date().getTime() + resp.expires_in * 950
+          document.addEventListener('visibilitychange', this.checkTokenAfterVisibilityChange)
           this.$store.commit('setUser', { user: resp.user })
           resolve(resp.user)
         }).catch((err) => {
@@ -77,6 +89,12 @@ export default {
         })
       })
     },
+    checkTokenAfterVisibilityChange (evt) {
+      if (!document.hidden && this.currentTokenExpireTime && this.currentTokenExpireTime < new Date().getTime()) {
+        console.log('Refreshing expired token')
+        this.refreshAccessToken()
+      }
+    },
     cleanSession () {
       return new Promise((resolve, reject) => {
         const refreshToken = this.getRefreshToken()

bundles/org.openhab.ui/web/src/js/openhab/auth.js

@@ -17,7 +17,7 @@
             <div class="float-right align-items-flex-start align-items-center">
               <!-- <f7-toggle class="enable-toggle"></f7-toggle> -->
               <f7-link :icon-color="(rule.status.statusDetail === 'DISABLED') ? 'orange' : 'gray'" icon-ios="f7:pause_circle" icon-md="f7:pause_circle" icon-aurora="f7:pause_circle" icon-size="32" color="orange" @click="toggleDisabled"></f7-link>
-              <f7-link icon-ios="f7:play_round" icon-md="f7:play_round" icon-aurora="f7:play_round" icon-size="32" color="blue" @click="runNow"></f7-link>
+              <f7-link :tooltip="'Run Now' + (($device.desktop) ? ' (Ctrl-R)' : '')" icon-ios="f7:play_round" icon-md="f7:play_round" icon-aurora="f7:play_round" icon-size="32" color="blue" @click="runNow"></f7-link>
             </div>
             Status:
             <f7-chip class="margin-left"
@@ -161,7 +161,7 @@
       </f7-page>
     </f7-popup>
 
-    <script-editor-popup v-if="currentModule" title="Edit Script" popup-id="edit-rule-script-direct-popup" :value="scriptCode" :fullscreen="false" :opened="codeEditorOpened" @closed="codePopupClosed"></script-editor-popup>
+    <script-editor-popup v-if="currentModule" title="Edit Script" ref="codePopup" popup-id="edit-rule-script-direct-popup" :value="scriptCode" :fullscreen="false" :opened="codeEditorOpened" @closed="codePopupClosed"></script-editor-popup>
     <cron-editor popup-id="edit-rule-cron-popup" :value="cronExpression" :opened="cronPopupOpened" @closed="cronPopupOpened = false" @input="(value) => updateCronExpression(value)" />
   </f7-page>
 </template>
@@ -310,9 +310,20 @@ export default {
           return
         }
       }
-      // TODO properly validate rule
-      if (!this.rule.uid) return
-      if (!this.rule.name) return
+      if (!this.rule.uid) {
+        this.$f7.dialog.alert('Please give an ID to the rule')
+        return
+      }
+      if (!this.rule.name) {
+        this.$f7.dialog.alert('Please give a name to the rule')
+        return
+      }
+      if (this.codeEditorOpened) {
+        // save the code currently being edited if the dialog is open
+        // this allows to hit ctrl-S to save (and ctrl-R to run the rule) while editing the code
+        // without closing the window
+        this.currentModule.configuration.script = this.$refs.codePopup.code
+      }
       const promise = (this.createMode)
         ? this.$oh.api.postPlain('/rest/rules', JSON.stringify(this.rule), 'text/plain', 'application/json')
         : this.$oh.api.put('/rest/rules/' + this.rule.uid, this.rule)
@@ -360,13 +371,12 @@ export default {
     runNow () {
       if (this.createMode) return
       if (this.rule.status === 'RUNNING') return
-      this.$oh.api.postPlain('/rest/rules/' + this.rule.uid + '/runnow', '').then((data) => {
-        this.$f7.toast.create({
-          text: 'Running rule',
-          destroyOnClose: true,
-          closeTimeout: 2000
-        }).open()
-      }).catch((err) => {
+      this.$f7.toast.create({
+        text: 'Running rule',
+        destroyOnClose: true,
+        closeTimeout: 2000
+      }).open()
+      this.$oh.api.postPlain('/rest/rules/' + this.rule.uid + '/runnow', '').catch((err) => {
         this.$f7.toast.create({
           text: 'Error while running rule: ' + err,
           destroyOnClose: true,
@@ -375,7 +385,7 @@ export default {
       })
     },
     startEventSource () {
-      this.eventSource = this.$oh.sse.connect('/rest/events?topics=smarthome/rules/*/*', null, (event) => {
+      this.eventSource = this.$oh.sse.connect('/rest/events?topics=smarthome/rules/' + this.ruleId + '/*', null, (event) => {
         console.log(event)
         const topicParts = event.topic.split('/')
         switch (topicParts[3]) {
@@ -390,10 +400,19 @@ export default {
       this.eventSource = null
     },
     keyDown (ev) {
-      if (ev.keyCode === 83 && (ev.ctrlKey || ev.metaKey)) {
-        this.save(!this.createMode)
-        ev.stopPropagation()
-        ev.preventDefault()
+      if (ev.ctrlKey || ev.metakKey) {
+        switch (ev.keyCode) {
+          case 82:
+            this.runNow()
+            ev.stopPropagation()
+            ev.preventDefault()
+            break
+          case 83:
+            this.save(!this.createMode)
+            ev.stopPropagation()
+            ev.preventDefault()
+            break
+        }
       }
     },
     toggleModuleControls () {
@@ -453,7 +472,9 @@ export default {
       this.$refs.modulePopup.f7Popup.open()
     },
     reorderModule (ev, section) {
-      this.rule[section].splice(ev.detail.to, 0, this.rule[section].splice(ev.detail.from, 1)[0])
+      const newSection = [...this.rule[section]]
+      newSection.splice(ev.to, 0, newSection.splice(ev.from, 1)[0])
+      this.$set(this.rule, section, newSection)
     },
     saveModule () {
       if (!this.currentModule.type) return