started config editor

src/components/ConfigEditor.vue

@@ -0,0 +1,82 @@
+<template>
+  <div
+    v-if="template.type === 'object'"
+    class="editor"
+  >
+    <p v-text="template.name" />
+    <ConfigEditor
+      v-for="(prop,key) of template.properties"
+      :key="key"
+      :template="prop"
+      :config="config[prop.name]"
+    />
+  </div>
+  <div
+    v-else-if="template.type === 'array'"
+    class="editor"
+  >
+    <ConfigEditor
+      v-for="(child,key) of config"
+      :key="key"
+      :config="child"
+      :template="template.child"
+    />
+    <button type="button">
+      add
+    </button>
+  </div>
+  <div
+    v-else-if="template.type === 'string'"
+    class="editor"
+  >
+    <label v-text="template.name || ''" />
+    <input
+      v-model="config"
+      type="text"
+    >
+  </div>
+  <div
+    v-else-if="template.type === 'number'"
+    class="editor"
+  >
+    <label v-text="template.name || ''" />
+    <input
+      v-model="config"
+      type="number"
+    >
+  </div>
+  <div
+    v-else-if="template.type === 'boolean'"
+    class="editor"
+  >
+    <label v-text="template.name || ''" />
+    <input
+      v-model="config"
+      type="checkbox"
+    >
+  </div>
+  <pre v-else>
+    invalid config
+  </pre>
+</template>
+
+<script>
+export default {
+  name:  'ConfigEditor',
+  props: {
+    // eslint-disable-next-line vue/require-prop-types
+    config:   { required: true },
+    template: {
+      type:     Object,
+      required: true
+    }
+  }
+};
+</script>
+
+<style scoped>
+.editor {
+  border: 1px solid black;
+  margin-left: 10px;
+}
+</style>

src/template.js

@@ -0,0 +1,34 @@
+export default {
+  type:  'array',
+  child: {
+    type:       'object',
+    properties: [
+      {
+        type: 'string',
+        name: 'type'
+      },
+      {
+        name:  'columns',
+        type:  'array',
+        child: { type: 'string' }
+      },
+      {
+        name: 'x',
+        type: 'string'
+      },
+      {
+        name:  'y',
+        type:  'array',
+        child: {
+          type:       'object',
+          properties: [
+            { type: 'string', name: 'label' },
+            { type: 'string', name: 'field' },
+            { type: 'string', name: 'color' },
+            { type: 'string', name: 'fill' }
+          ]
+        }
+      }
+    ]
+  }
+};

src/views/AppView.vue

@@ -2,9 +2,12 @@
   <div
     class="grid"
   >
-    <textarea v-model="config" />
+    <ConfigEditor
+      :config="config"
+      :template="template"
+    />
     <ViewComponent
-      v-for="(item,key) of parsed_config"
+      v-for="(item,key) of config"
       :key="key"
       :config="item"
       :data="parsed_log"
@@ -14,25 +17,20 @@
 
 <script>
 import Vuex from 'vuex';
-import hjson from 'hjson';
 import ViewComponent from '../components/ViewComponent.vue';
+import ConfigEditor from '../components/ConfigEditor.vue';
 import default_config from '../default';
+import default_template from '../template';
 
 export default {
-  components: { ViewComponent },
+  components: { ViewComponent, ConfigEditor },
   data () {
-    return { config: hjson.stringify (default_config) };
+    return {
+      config:   default_config,
+      template: default_template
+    };
   },
   computed:   {
-    parsed_config () {
-      try {
-        return hjson.parse (this.config);
-      }
-      catch {
-        // noop
-      }
-      return [];
-    },
     parsed_log () {
       return this.log.map ((l) => {
         l.data = JSON.parse (l.data);