web: WIP edit measure configuration.

web/src/views/EditMeasure.vue

@@ -0,0 +1,52 @@
+<template>
+  <div id=edit-measure>
+    <div class=header>
+      <h1>Edit Measure</h1>
+      <h2>{{measure.name}}</h2>
+    </div>
+    <form @submit.prevent=updateMeasure() class=edit-measure-form>
+      <fieldset>
+        <div>
+          <label for=measureName>Display Name</label>
+          <input
+            :disabled=waiting
+            type=text
+            name=measureName
+            placeholder="what you are measuring"
+            required
+            v-model="measure.name" />
+        </div>
+        <div>
+          <label for=measureDescription>Description</label>
+          <textarea
+            :disabled=waiting
+            name=measureDescription
+            placeholder="optional description"
+            v-model="measure.description" ></textarea>
+        </div>
+        <div>
+          <label for=measureSlug>Short name (slug)</label>
+          <input
+            :disabled=waiting
+            type=text
+            name=measureDescription
+            :placeholder='slugFromName + " (default)"'
+            :value="measure.slug"
+            @input="measure.slug = slugify($event.target.value)"/>
+        </div>
+      </fieldset>
+      <MeasureConfigForm
+        v-model=measure.config
+        :disabled=waiting
+        measureExists=false />
+      <div v-if='!waiting' class=form-actions>
+        <button class=btn-action>Update</button>
+        <a class=btn @click="$router.go(-1)">Cancel</a>
+      </div>
+      <div v-if='waiting' class=form-waiting>
+        <div class=wait-spinner>working <fa-icon icon=sync spin /></div>
+      </div>
+    </form>
+  </div>
+</template>
+<script lang=ts src=./edit-measure.ts></script>