Add a transformations menu and editor (#1448)

Depends on openhab/openhab-core#3036 -- Signed-off-by: Jan N. Klug <github@klug.nrw> Signed-off-by: Florian Hotze <florianh_dev@icloud.com>
openhab · Apr 5, 2023 · dedd3f8 · dedd3f8
1 parent 5415abb
commit dedd3f8
Show file tree

Hide file tree

Showing 10 changed files with 653 additions and 3 deletions.
diff --git a/bundles/org.openhab.ui/web/src/assets/definitions/transformations.js b/bundles/org.openhab.ui/web/src/assets/definitions/transformations.js
@@ -0,0 +1,14 @@
+export default {
+  SNIPPETS: {
+    SCRIPT: {
+      'application/vnd.openhab.dsl.rule': 'var returnValue = "String has " + input.length + " characters"\n\nreturnValue',
+      'application/javascript': '(function(data) {\n  var returnValue = "String has " + data.length + " characters"\n  return returnValue\n})(input)',
+      'application/javascript;version=ECMAScript-5.1': '(function(data) {\n  var returnValue = "String has " + data.length + " characters"\n  return returnValue\n})(input)',
+      'application/x-ruby': '"String has #{input.length} characters"'
+    }
+  },
+  EDITOR_MODES: {
+    MAP: 'text/x-properties',
+    SCALE: 'text/x-properties'
+  }
+}
diff --git a/.../settings/rules/script/blockly-editor.vue → ...onents/config/controls/blockly-editor.vue b/.../settings/rules/script/blockly-editor.vue → ...onents/config/controls/blockly-editor.vue
diff --git a/bundles/org.openhab.ui/web/src/components/config/controls/script-editor.vue b/bundles/org.openhab.ui/web/src/components/config/controls/script-editor.vue
@@ -52,6 +52,7 @@ import 'codemirror/mode/groovy/groovy.js'
 import 'codemirror/mode/python/python.js'
 import 'codemirror/mode/ruby/ruby.js'
 import 'codemirror/mode/yaml/yaml.js'
+import 'codemirror/mode/properties/properties.js'
 
 // theme css
 import 'codemirror/theme/gruvbox-dark.css'
@@ -174,6 +175,7 @@ export default {
       if (this.mode && this.mode.indexOf('ruby') >= 0) return 'text/x-ruby'
       if (this.mode && this.mode.indexOf('groovy') >= 0) return 'text/x-groovy'
       if (this.mode && this.mode === 'rb') return 'text/x-ruby'
+      if (this.mode && this.mode === 'properties') return 'text/x-properties'
       return this.mode
     },
     ternComplete (file, query) {

diff --git a/bundles/org.openhab.ui/web/src/js/routes.js b/bundles/org.openhab.ui/web/src/js/routes.js
@@ -31,6 +31,9 @@ const AddThingPage = () => import(/* webpackChunkName: "admin-config" */ '../pag
 
 const InboxListPage = () => import(/* webpackChunkName: "admin-config" */ '../pages/settings/things/inbox/inbox-list.vue')
 
+const TransformationsListPage = () => import(/* webpackChunkName: "admin-config" */ '../pages/settings/transformations/transformations-list.vue')
+const TransformationsEditPage = () => import(/* webpackChunkName: "admin-rules" */ '../pages/settings/transformations/transformation-edit.vue')
+
 const SemanticModelPage = () => import(/* webpackChunkName: "admin-config" */ '../pages/settings/model/model.vue')
 
 const PagesListPage = () => import(/* webpackChunkName: "admin-pages" */ '../pages/settings/pages/pages-list.vue')
@@ -176,6 +179,17 @@ export default [
           }
         ]
       },
+      {
+        path: 'transformations/',
+        async: loadAsync(TransformationsListPage),
+        routes: [
+          {
+            path: ':transformationId',
+            beforeLeave: checkDirtyBeforeLeave,
+            async: loadAsync(TransformationsEditPage, (routeTo) => (routeTo.params.transformationId === 'add') ? { createMode: true } : {})
+          }
+        ]
+      },
       {
         path: 'things/',
         beforeEnter: [enforceAdminForRoute],

diff --git a/bundles/org.openhab.ui/web/src/pages/developer/blocks/blocks-edit.vue b/bundles/org.openhab.ui/web/src/pages/developer/blocks/blocks-edit.vue
@@ -104,7 +104,7 @@
 import YAML from 'yaml'
 import { strOptions } from 'yaml/types'
 
-import BlocklyEditor from '@/pages/settings/rules/script/blockly-editor.vue'
+import BlocklyEditor from '@/components/config/controls/blockly-editor.vue'
 import BlockPreview from './block-preview.vue'
 import ConfigSheet from '@/components/config/config-sheet.vue'
 import DirtyMixin from '@/pages/settings/dirty-mixin'
@@ -115,7 +115,7 @@ export default {
   mixins: [DirtyMixin],
   components: {
     'editor': () => import(/* webpackChunkName: "script-editor" */ '@/components/config/controls/script-editor.vue'),
-    BlocklyEditor, // 'blockly-editor': () => import(/* webpackChunkName: "blockly-editor" */ '@/pages/settings/rules/script/blockly-editor.vue'),
+    BlocklyEditor, // 'blockly-editor': () => import(/* webpackChunkName: "blockly-editor" */ '@/components/config/controls/blockly-editor.vue'),
     BlockPreview // 'block-preview': () => import(/* webpackChunkName: "blockly-editor" */ './block-preview.vue')
   },
   props: ['uid', 'createMode'],

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/rules/script/script-edit.vue b/bundles/org.openhab.ui/web/src/pages/settings/rules/script/script-edit.vue
@@ -118,7 +118,7 @@ export default {
   components: {
     ScriptGeneralSettings,
     'editor': () => import(/* webpackChunkName: "script-editor" */ '@/components/config/controls/script-editor.vue'),
-    'blockly-editor': () => import(/* webpackChunkName: "blockly-editor" */ './blockly-editor.vue')
+    'blockly-editor': () => import(/* webpackChunkName: "blockly-editor" */ '@/components/config/controls/blockly-editor.vue')
   },
   props: ['ruleId', 'moduleId', 'createMode'],
   data () {

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/settings-menu.vue b/bundles/org.openhab.ui/web/src/pages/settings/settings-menu.vue
@@ -60,6 +60,16 @@
               :footer="objectsSubtitles.pages">
               <f7-icon slot="media" f7="tv" color="gray" />
             </f7-list-item>
+            <f7-list-item
+              v-if="$store.getters.apiEndpoint('transformations')"
+              media-item
+              link="transformations/"
+              title="Transformations"
+              :after="transformationsCount"
+              badge-color="blue"
+              :footer="objectsSubtitles.transform">
+              <f7-icon slot="media" f7="arrow_2_squarepath" color="gray" />
+            </f7-list-item>
           </f7-list>
           <f7-block-title v-if="$store.getters.apiEndpoint('rules')">
             Automation
@@ -157,6 +167,7 @@ export default {
         model: 'The semantic model of your home',
         items: 'Manage the functional layer',
         pages: 'Design displays for user control & monitoring',
+        transform: 'Manage transformations',
         rules: 'Automate with triggers and actions',
         scenes: 'Store a set of desired states as a scene',
         scripts: 'Rules dedicated to running code',
@@ -165,6 +176,7 @@ export default {
       inboxCount: '',
       thingsCount: '',
       itemsCount: '',
+      transformationsCount: '',
       sitemapsCount: 0
     }
   },
@@ -199,6 +211,7 @@ export default {
       if (this.$store.getters.apiEndpoint('things')) this.$oh.api.get('/rest/things?summary=true').then((data) => { this.thingsCount = data.length.toString() })
       if (this.$store.getters.apiEndpoint('items')) this.$oh.api.get('/rest/items').then((data) => { this.itemsCount = data.length.toString() })
       if (this.$store.getters.apiEndpoint('ui')) this.$oh.api.get('/rest/ui/components/system:sitemap?summary=true').then((data) => { this.sitemapsCount = data.length })
+      if (this.$store.getters.apiEndpoint('transformations')) this.$oh.api.get('/rest/transformations').then((data) => { this.transformationsCount = data.length })
     },
     navigateToStore (tab) {
       this.$f7.views.main.router.navigate('addons', { props: { initialTab: tab } })