Added custom layers support

src/components/LayersEditor.vue

 <template>
   <div class="layersEditor">
+    <h2 class="title is-6">Custom layers</h2>
+    <b-button class="actionButton addButton" icon-left="plus-box" type="is-success" @click="addLayer"> Add custom layer </b-button>
+    <b-field v-for="(layer, index) in layers" v-bind:key="layer.name" grouped>
+      <b-input :placeholder="'Layer ' + index + ' name'" :value="layer.name"/>
 
+      <p class="control">
+        <b-upload v-model="file">
+          <a class="button is-primary">
+            <b-icon icon="upload"></b-icon>
+            <span>Upload layer file</span>
+          </a>
+        </b-upload>
+        <span class="file-name" v-if="file">
+          {{ file.name }}
+        </span>
+      </p>
+
+      <p class="control">
+        <b-button class="actionButton" icon-left="delete" type="is-danger" outlined/>
+      </p>
+    </b-field>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'LayersEditor'
+  name: 'LayersEditor',
+  props: {
+    layers: {
+      type: Array,
+      default: function () {
+        return []
+      }
+    }
+  },
+  methods: {
+    addLayer () {
+      this.layers.push({
+        id: this.layers.length
+      })
+    },
+    deleteLayer (layer) {
+      const index = this.layers.indexOf(layer)
+      if (index > -1) {
+        this.layers.splice(index, 1)
+      }
+    }
+  }
 }
 </script>
 
-<style>
+<style scoped>
+.layersEditor h2 {
+  padding: 0;
+  margin: 0;
+  margin-top: 15px;
+}
 
+.layersEditor .addButton {
+  margin: 0;
+  margin-top: 5px;
+  margin-bottom: 10px;
+}
 </style>

src/components/ModelTable.vue

@@ -18,7 +18,7 @@
       </b-table-column>
 
       <b-table-column label="" centered>
-        <b-button class="actionButton" icon-left="pencil" type="is-warning" tag="router-link" :to="{ name: 'ModelEdit', props: {model: props.row} }" outlined/>
+        <b-button class="actionButton" icon-left="pencil" type="is-warning" tag="router-link" :to="{ name: 'ModelEdit', params: {model: props.row} }" outlined/>
         <b-button class="actionButton" icon-left="delete" type="is-danger" @click="removePrompt(props.row.id)" outlined/>
       </b-table-column>
     </template>
@@ -31,7 +31,7 @@ export default {
   data () {
     return {
       isLoading: true,
-      models: ''
+      models: []
     }
   },
   async mounted () {

src/components/TagEditor.vue

@@ -19,7 +19,7 @@
         </b-select>
       </p>
       <p class="control">
-        <b-button class="control" @click="addTagToModel">Add</b-button>
+        <b-button class="control is-primary" @click="addTagToModel">Add</b-button>
       </p>
     </b-field>
 
@@ -129,7 +129,6 @@ export default {
       this.tagName = ''
     },
     removeTagFromModel (tag) {
-      console.log('REMOVE TAG ' + tag)
       const index = this.tags.indexOf(tag)
       if (index > -1) {
         this.tags.splice(index, 1)

src/views/ModelEdit.vue

@@ -2,37 +2,36 @@
   <div class="modelEdit container">
     <div class="box">
       <b-field label="Model name">
-        <b-input maxlength="30" :v-model="model.name"/>
+        <b-input maxlength="30" v-model="model.name"/>
       </b-field>
 
+      <hr>
       <h1 class="title">Description</h1>
       <b-field label="Short description">
-        <b-input maxlength="200" type="textarea" :v-model="model.shortDescription"/>
+        <b-input maxlength="200" type="textarea" v-model="model.shortDescription"/>
       </b-field>
 
       <b-field label="Long description">
         <markdownEditor v-bind:input="model.longDescription"/>
       </b-field>
 
+      <hr>
       <h1 class="title">Tags</h1>
-      <tagEditor v-bind:input="model.tags"/>
+      <tagEditor v-bind:tags="model.tags"/>
 
+      <hr>
       <h1 class="title">Files</h1>
 
-      <h2 class="title is-6">Model</h2>
-      <b-field position="is-centered">
-        <b-upload v-model="dropFiles" multiple drag-drop>
-          <section class="section">
-            <div class="content has-text-centered">
-              <p><b-icon icon="upload" size="is-large"/></p>
-              <p>Drop your files here or click to upload</p>
-            </div>
-          </section>
+      <b-field position="is-centered" label="Model">
+        <b-upload v-model="file">
+          <a class="button is-primary">
+            <b-icon icon="upload"></b-icon>
+            <span>Upload model file</span>
+          </a>
         </b-upload>
       </b-field>
 
-      <h2 class="title is-6">Custom layers</h2>
-      <layersEditor/>
+      <layersEditor v-bind:layers="model.customLayers"/>
     </div>
     <div class="box">
       <b-button type="is-warning">Abort</b-button>
@@ -53,15 +52,17 @@ export default {
     tagEditor,
     layersEditor
   },
-  data () {
-    return {
-      model: '',
-      name: '',
-      shortDesc: '',
-      longDesc: '',
-      tags: ''
+  props: {
+    model: {
+      type: Object,
+      default: function () {
+        return {}
+      }
     }
   },
+  mounted () {
+    console.log('EDIT ' + this.model.name)
+  },
   methods: {
     async saveModel () {