Thing Details: Use core's file-format service to display code in YAML and DSL

Signed-off-by: Jimmy Tanagra <[email protected]>

Author: jimtng

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

@@ -172,6 +172,12 @@ export default {
       this.codemirror.closeHint()
     }
   },
+  watch: {
+    mode (newMode) {
+      this.cmOptions.mode = this.translateMode(newMode)
+      this.codemirror.setOption('mode', this.cmOptions.mode)
+    }
+  },
   methods: {
     translateMode (mode) {
       // Translations required for some special modes used in MainUI

bundles/org.openhab.ui/web/src/pages/settings/file-definition-mixin.js

@@ -35,6 +35,12 @@ export default {
       THING: 'thing',
       ITEM: 'item'
     })
+    this.MediaType = Object.freeze({
+      YAML: 'application/yaml',
+      THING_DSL: 'text/vnd.openhab.dsl.thing',
+      ITEM_DSL: 'text/vnd.openhab.dsl.item',
+      JSON: 'application/json'
+    })
   },
   methods: {
     /**

bundles/org.openhab.ui/web/src/pages/settings/things/thing-details.vue

@@ -195,12 +195,22 @@
       <f7-tab id="code" :tab-active="currentTab === 'code'">
         <f7-icon v-if="!editable" f7="lock" class="float-right margin"
                  style="opacity:0.5; z-index: 4000; user-select: none;" size="50" color="gray" :tooltip="notEditableMsg" />
-        <editor v-if="ready" class="thing-code-editor" mode="application/vnd.openhab.thing+yaml" :value="thingYaml"
+        <editor v-if="ready" class="thing-code-editor" :mode="editorMode" :value="thingCode"
                 :hint-context="{ thingType: thingType, channelTypes: channelTypes }" @input="onEditorInput"
                 :read-only="!editable" />
         <!-- <pre class="yaml-message padding-horizontal" :class="[yamlError === 'OK' ? 'text-color-green' : 'text-color-red']">{{yamlError}}</pre> -->
       </f7-tab>
     </f7-tabs>
+    <f7-toolbar bottom v-if="currentTab === 'code'">
+      <f7-segmented tag="div">
+        <f7-button outline small :active="codeType === 'YAML'" class="no-ripple" style="width: 5em;" @click="switchCodeType('YAML')">
+          YAML
+        </f7-button>
+        <f7-button outline small :active="codeType === 'DSL'" class="no-ripple" style="width: 5em;" @click="switchCodeType('DSL')">
+          DSL
+        </f7-button>
+      </f7-segmented>
+    </f7-toolbar> 
   </f7-page>
 </template>
 
@@ -252,7 +262,7 @@ p.action-description
   .thing-code-editor.vue-codemirror
     display block
     top calc(var(--f7-navbar-height) + var(--f7-tabbar-height))
-    height calc(100% - 2*var(--f7-navbar-height))
+    height calc(100% - 2*var(--f7-navbar-height) - var(--f7-toolbar-height))
     width 100%
 
   .item-title-content, .item-after-content
@@ -317,6 +327,9 @@ export default {
     'editor': () => import(/* webpackChunkName: "script-editor" */ '@/components/config/controls/script-editor.vue')
   },
   props: ['thingId'],
+  created () {
+    this.ThingMediaType = {YAML: this.MediaType.YAML, DSL: this.MediaType.THING_DSL}
+  },
   data () {
     return {
       ready: false,
@@ -339,7 +352,9 @@ export default {
       configActionsByGroup: [],
       thingEnabled: true,
       eventSource: null,
-      thingYaml: null,
+      codeType: localStorage.getItem('openhab.ui:codeViewer.type') || 'YAML',
+      thingCode: null,
+      originalCode: null,
       notEditableMsg: 'This Thing is not editable because it has been provisioned from a file.',
       propertyTruncation: {}
     }
@@ -348,6 +363,12 @@ export default {
     editable () {
       return this.thing && this.thing.editable
     },
+    editorMode () {
+      if (this.codeType === 'DSL') {
+        return 'text/x-java'
+      }
+      return 'application/vnd.openhab.thing+yaml'
+    },
     pageTitle () {
       if (!this.ready) return ''
       return this.thing.label || this.thing.UID
@@ -422,19 +443,19 @@ export default {
       }
     },
     onEditorInput (value) {
-      this.thingYaml = value
+      this.thingCode = value
+      this.dirty = this.configDirty || this.thingDirty || this.originalCode !== this.thingCode
     },
     switchTab (tab) {
       if (this.currentTab === tab) return
       if (this.currentTab === 'code') {
-        const previousYaml = this.toYaml()
-        if (this.thingYaml !== previousYaml && this.fromYaml()) {
-          this.save()
+        if (this.originalCode !== this.thingCode) {
+          this.fromCode()
         }
       }
       this.currentTab = tab
       if (this.currentTab === 'code') {
-        this.thingYaml = this.toYaml()
+        this.toCode(this.codeType)        
       }
     },
     /**
@@ -539,13 +560,12 @@ export default {
         }
       })
     },
-    save (saveThing) {
+    save (checkCode = true) {
       if (!this.ready || !this.editable) return
 
-      if (this.currentTab === 'code') {
-        if (!this.fromYaml()) {
-          return
-        }
+      if (checkCode && this.currentTab === 'code') {
+        this.fromCode(() => this.save(false))
+        return
       }
 
       let endpoint, payload, successMessage
@@ -771,7 +791,7 @@ export default {
       })
     },
     onChannelsUpdated (save) {
-      if (save) this.save(true)
+      if (save) this.save()
       if (!this.eventSource) this.startEventSource()
     },
     unlinkAll (removeItems) {
@@ -858,37 +878,69 @@ export default {
       this.$oh.sse.close(this.eventSource)
       this.eventSource = null
     },
-    toYaml () {
-      const editableThing = {
-        UID: this.thing.UID,
-        label: this.thing.label,
-        thingTypeUID: this.thing.thingTypeUID,
-        configuration: this.thing.configuration
+    switchCodeType (type) {
+      if (this.codeType === type) return
+      if (this.editable) {
+        this.fromCode(() => {
+          this.toCode(type, () => {
+            localStorage.setItem('openhab.ui:codeViewer.type', type)
+            this.codeType = type
+          })
+        })
+      } else {
+        this.toCode(type, () => {
+          localStorage.setItem('openhab.ui:codeViewer.type', type)
+          this.codeType = type
+        })
       }
-
-      if (this.thing.bridgeUID) editableThing.bridgeUID = this.thing.bridgeUID
-      if (this.thing.location) editableThing.location = this.thing.location
-
-      const editableChannels = []
-
-      for (const channel of this.thing.channels) {
-        const editableChannel = {
-          id: channel.id,
-          channelTypeUID: channel.channelTypeUID,
-          label: channel.label,
-          description: channel.description,
-          configuration: channel.configuration
-        }
-        editableChannels.push(editableChannel)
+    },
+    toCode (codeType, successCallback) {
+      const mediaType = this.ThingMediaType[codeType]
+      console.log('toCode', mediaType)
+      const payload = { things: [this.thing] }
+      this.$oh.api.postPlain('/rest/file-format/create', JSON.stringify(payload), null, 'application/json', { accept: mediaType })
+        .then((code) => {
+          if (codeType === 'YAML') {
+            // skip version:, things: and UID: lines, and unindent lines
+            code = code.split('\n').slice(3).map(line => line.replace(/^\s{4}/, '')).join('\n')
+          }
+          this.thingCode = code
+          this.originalCode = cloneDeep(code)
+          if (successCallback) {
+            successCallback()
+          }
+        })
+        .catch((err) => {
+          this.$f7.dialog.alert(`Error creating ${codeType}: ${err}`).open()
+        })
+    },
+    fromCode (successCallback) {
+      const mediaType = this.ThingMediaType[this.codeType]
+      let payload = null
+      if (this.codeType === 'YAML') {
+        const indentedCode = this.thingCode.split('\n').map(line => ' '.repeat(4) + line).join('\n')
+        payload = `version: 2\nthings:\n  ${this.thing.UID}:\n${indentedCode}`
+      } else {
+        payload = this.thingCode
       }
-
-      if (editableChannels.length > 0) editableThing.channels = editableChannels
-
-      return YAML.stringify(editableThing)
+      this.$oh.api.postPlain('/rest/file-format/parse', payload, null, mediaType, { accept: 'application/json' })
+        .then((data) => {
+          data = JSON.parse(data)
+          if (data.things && data.things.length > 0) {
+            const updatedThing = data.things[0]
+            this.updateThing(updatedThing)
+            if (successCallback) {
+              successCallback()
+            }
+          } else {
+            this.$f7.dialog.alert('Error parsing ' + this.codeType + ': no things found').open()
+          }
+        })
+        .catch((err) => {
+          this.$f7.dialog.alert(`Error parsing ${this.codeType}: ${err}`).open()
+        })
     },
-    fromYaml () {
-      const updatedThing = YAML.parse(this.thingYaml)
-
+    updateThing (updatedThing) {
       const isExtensible = (channel, thingType) => {
         if (!channel || !channel.channelTypeUID) return false
         const bindingId = thingType.UID.split(':')[0]