Add script view config

extensions/web-scripts/script-editor.xml

@@ -13,6 +13,6 @@
     <button v-on:click="onSave" title="Save"><i class="far fa-save"></i></button>
   </template>
   <article class="content">
-    <textarea v-model="text" spellcheck="false" wrap="off" class="full" placeholder="Enter your Lua script here"></textarea>
+    <textarea v-model="text" v-on:keydown.ctrl.s.exact.prevent.stop="onSave()" spellcheck="false" wrap="off" class="full" placeholder="Enter your Lua script here"></textarea>
   </article>
 </app-page>

extensions/web-scripts/script-view-config.xml

@@ -0,0 +1,9 @@
+<app-page id="scriptsViewConfig" title="View Configuration" transition-class="hideTop">
+  <template slot="bar-right">
+    <button v-on:click="app.back()" title="Close"><i class="fa fa-window-close"></i></button>
+  </template>
+  <page-article>
+    <json :name="'Configuration'" :obj="config" :schema="schema"></json>
+    <button v-on:click="onSave()"><i class="far fa-save"></i>&nbsp;Save</button>
+  </page-article>
+</app-page>

extensions/web-scripts/script-view.xml

@@ -9,10 +9,11 @@
   </template>
   <template slot="bar-right">
     <button v-on:click="onDelete()" title="Delete"><i class="fa fa-trash"></i>&nbsp;Delete</button>
+    <button v-on:click="app.toPage('scriptsViewConfig', scriptId)" title="Configuration"><i class="fas fa-cog"></i></button>
     <button v-on:click="onApply()" title="Save then reload"><i class="fas fa-redo"></i></button>
     <button v-on:click="onSave" title="Save"><i class="far fa-save"></i></button>
   </template>
   <article class="content">
-    <textarea v-model="text" spellcheck="false" wrap="off" class="full"></textarea>
+    <textarea v-model="text" v-on:keydown.ctrl.s.exact.prevent.stop="onSave()" spellcheck="false" wrap="off" class="full"></textarea>
   </article>
 </app-page>

extensions/web-scripts/view-init.js

@@ -0,0 +1,70 @@
+define(['./config.json', './view.xml'], function(config, viewXml) {
+
+  var viewTemplate = [
+    '<app-page id="' + config.id + '" title="' + config.title + '">',
+    viewXml,
+    '</app-page>'
+  ].join('\n');
+
+  var viewVue = new Vue({
+    template: viewTemplate,
+    data: {
+      property: {}
+    },
+    methods: {
+      onShow: function() {
+        this.onDataChange();
+      },
+      onDataChange: function() {
+        Promise.all([
+          app.getThings(),
+          app.getPropertiesByThingId()
+        ]).then(apply(this, function(things, properties) {
+          this.refreshProperties(things, properties);
+        }));
+      },
+      refreshProperties: function(things, properties) {
+        var propertyMap = {};
+        for (var i = 0; i < config.properties.length; i++) {
+          var cfgProp = config.properties[i];
+          var parts = cfgProp.path.split('/', 2);
+          var thingId = parts[0];
+          var propName = parts[1];
+          var props = properties[thingId];
+          var value;
+          if (props) {
+            value = props[propName];
+            if (value !== undefined) {
+              propertyMap[cfgProp.name] = value;
+              continue;
+            }
+          }
+          var thing = things[thingId];
+          if (thing) {
+            var thgProp = thing.properties[propName];
+            if (thgProp) {
+              var propType = thgProp['@type'];
+              switch (propType) {
+              case 'integer':
+              case 'number':
+                value = 0;
+                break;
+              case 'string':
+                value = '';
+                break;
+              case 'boolean':
+                value = false;
+                break;
+              }
+              propertyMap[cfgProp.name] = value;
+            }
+          }
+        }
+        this.property = propertyMap;
+      }
+    }
+  });
+
+  addPageComponent(viewVue, config.icon);
+
+});

extensions/web-scripts/view-schema.json

@@ -0,0 +1,41 @@
+{
+  "type": "object",
+  "properties": {
+    "id": {
+      "title": "Id",
+      "type": "string",
+      "default": "view",
+      "required": true
+    },
+    "title": {
+      "title": "Title",
+      "type": "string",
+      "default": "View",
+      "required": true
+    },
+    "icon": {
+      "title": "Icon",
+      "description": "The fontawesome icon to use for the view tile and menu entry, such as 'house'",
+      "type": "string"
+    },
+    "properties": {
+      "title": "Properties",
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "name": {
+            "title": "Name",
+            "type": "string",
+            "required": true
+          },
+          "path": {
+            "title": "Property",
+            "type": "string",
+            "enumVar": "readablePropertyPaths"
+          }
+        }
+      }
+    }
+  }
+}

extensions/web-scripts/view-script.lua

@@ -0,0 +1,5 @@
+local extension = ...
+local loader = require('jls.lang.loader')
+local coreExtPath = extension:getEngine().lhaExtensionsDir:getPath()
+local webBaseAddons = loader.load('web-base.addons', coreExtPath)
+webBaseAddons.registerAddonExtension(extension, 'init.js')