functional editor

src/components/ConfigEditor.vue

@@ -1,7 +1,10 @@
 <template>
-  <div class="config-editor">
+  <div
+    v-if="enabled"
+    class="config-editor"
+  >
     <p
-      clasS="label"
+      class="label"
       v-text="template.name"
     />
     <!-- editor -->
@@ -12,8 +15,9 @@
       <ConfigEditor
         v-for="(prop,key) of template.properties"
         :key="key"
+        v-model="config[prop.name]"
         :template="prop"
-        :config="config[prop.name]"
+        :enabled="is_enabled(prop.if)"
       />
     </div>
     <div
@@ -23,12 +27,13 @@
       <ConfigEditor
         v-for="(child,key) of config"
         :key="key"
-        :config="child"
+        v-model="config[key]"
         :template="template.child"
+        :enabled="is_enabled(template.child.if)"
       />
       <button
         type="button"
-        @click="config.push(create_default(template.child))"
+        @click="add_item"
       >
         add
       </button>
@@ -37,7 +42,18 @@
       v-else-if="template.type === 'string'"
       class="editor"
     >
+      <select
+        v-if="Array.isArray(template.choices)"
+        v-model="config"
+      >
+        <option
+          v-for="(opt,optkey) in template.choices"
+          :key="optkey"
+          v-text="opt"
+        />
+      </select>
       <input
+        v-else
         v-model="config"
         type="text"
       >
@@ -67,17 +83,60 @@
 </template>
 
 <script>
+import { resolve_data } from '../helper';
+
 export default {
   name:  'ConfigEditor',
   props: {
     // eslint-disable-next-line vue/require-prop-types
-    config:   { required: true },
+    value:    { required: true },
     template: {
       type:     Object,
-      required: true
+      required: true,
+      enabled:  { type: Boolean, default: true }
+    },
+    enabled: {
+      type:    Boolean,
+      default: true
+    }
+  },
+  data () {
+    return { temp: this.value };
+  },
+  computed: {
+    config: {
+      get () {
+        return this.temp;
+      },
+      set (val) {
+        this.$emit ('input', val);
+        this.temp = val;
+      }
     }
   },
   methods: {
+    is_enabled (condition) {
+      if (typeof condition === 'undefined')
+        return true;
+      switch (condition.op) {
+        case '=':
+          return resolve_data (this.config, condition.prop) === condition.val;
+        case '<':
+          return resolve_data (this.config, condition.prop) < condition.val;
+        case '>':
+          return resolve_data (this.config, condition.prop) > condition.val;
+        default:
+          return false;
+      }
+    },
+    add_item () {
+      if (
+        typeof this.config === 'undefined'
+        || !Array.isArray (this.config)
+      )
+        this.config = [];
+      this.config.push (this.create_default (this.template.child));
+    },
     create_default (template) {
       if (typeof template.default !== 'undefined')
         return template.default;

src/template.js

@@ -4,21 +4,28 @@ export default {
     type:       'object',
     properties: [
       {
-        type: 'string',
-        name: 'type'
+        type:    'string',
+        name:    'type',
+        choices: [
+          'table',
+          'chart'
+        ]
       },
       {
         name:  'columns',
         type:  'array',
-        child: { type: 'string' }
+        child: { type: 'string' },
+        if:    { prop: 'type', op: '=', val: 'table' }
       },
       {
         name: 'x',
-        type: 'string'
+        type: 'string',
+        if:    { prop: 'type', op: '=', val: 'chart' }
       },
       {
         name:  'y',
         type:  'array',
+        if:    { prop: 'type', op: '=', val: 'chart' },
         child: {
           type:       'object',
           properties: [

src/views/AppView.vue

@@ -3,11 +3,11 @@
     class="grid"
   >
     <ConfigEditor
-      :config="config"
+      v-model="config"
       :template="template"
     />
     <ViewComponent
-      v-for="(item,key) of config"
+      v-for="(item,key) of saved_config"
       :key="key"
       :config="item"
       :data="parsed_log"
@@ -17,6 +17,7 @@
 
 <script>
 import Vuex from 'vuex';
+import { copy_object } from '@sapphirecode/utilities';
 import ViewComponent from '../components/ViewComponent.vue';
 import ConfigEditor from '../components/ConfigEditor.vue';
 import default_config from '../default';
@@ -26,8 +27,9 @@ export default {
   components: { ViewComponent, ConfigEditor },
   data () {
     return {
-      config:   default_config,
-      template: default_template
+      config:       copy_object (default_config),
+      saved_config: copy_object (default_config),
+      template:     default_template
     };
   },
   computed:   {
@@ -41,8 +43,25 @@ export default {
   },
   mounted () {
     this.get_log ();
+    document.body.addEventListener ('keydown', (ev) => {
+      if (ev.key === 's' && ev.ctrlKey) {
+        this.save_config ();
+        ev.preventDefault ();
+        return false;
+      }
+      return true;
+    });
   },
-  methods: { ...Vuex.mapActions ({ get_log: 'get_log' }) }
+  methods: {
+    save_config () {
+      fetch ('config', {
+        method: 'POST',
+        body:   JSON.stringify (this.config)
+      });
+      this.saved_config = copy_object (this.config);
+    },
+    ...Vuex.mapActions ({ get_log: 'get_log' })
+  }
 };
 </script>