web: WIP work on adding create measure functionality in the UI.

web/src/views/NewMeasure.vue

@@ -4,34 +4,45 @@
       <h1>New Measure</h1>
       <h2>What do you want to measure?</h2>
     </div>
-    <form @submit.prevent=login() class=new-measure-form>
+    <form @submit.prevent=createMeasure() class=new-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>
-          <input
-            type=text
+          <textarea
+            :disabled=waiting
             name=measureDescription
             placeholder="optional description"
-            v-model="measure.description" />
+            v-model="measure.description" ></textarea>
         </div>
         <div>
-          <label for=measureSlug>Slug (short-name)</label>
+          <label for=measureSlug>Short name (slug)</label>
           <input
+            :disabled=waiting
             type=text
             name=measureDescription
-            :placeholder='slugFromName'
-            v-model="measure.slug" />
+            :placeholder='slugFromName + " (default)"'
+            :value="measure.slug"
+            @input="measure.slug = slugify($event.target.value)"/>
         </div>
       </fieldset>
-      <MeasureConfigForm :config=measure.config />
+      <MeasureConfigForm v-model=measure.config :disabled=waiting />
+      <div v-if='!waiting' class=form-actions>
+        <button class=btn-action>Create </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>

web/src/views/UserAccount.vue

@@ -1,16 +1,19 @@
 <template>
-  <div class=user-account>
+  <form class=user-account>
     <h1>Your Account</h1>
     <fieldset>
-      <legend>About You</legend>
-      <label for=name>Name: </label>
-      <input name=name type=text :value="user.displayName"></input>
-      <label for=name>Email Address: </label>
-      <input name=name type=text :value="user.email"></input>
+      <div>
+        <label for=name>Name:</label>
+        <input name=name type=text v-model="user.displayName" />
+      </div>
+      <div>
+        <label for=name>Email Address: </label>
+        <input name=name type=text v-model="user.email"></input>
+      </div>
     </fieldset>
     <section class=api-tokens>
       <h2>API Tokens</h2>
-      <v-table :data=apiTokens>
+      <v-table v-show='apiTokens && apiTokens.length > 0' :data=apiTokens>
         <thead slot=head>
           <v-th sortKey="name">Name</v-th>
           <v-th sortKey="created">Created</v-th>
@@ -24,11 +27,14 @@
           </tr>
         </tbody>
       </v-table>
+      <div class=no-data v-show='!apiTokens || apiTokens.length === 0'>
+        You have not created any API tokens.
+      </div>
     </section>
     <section class=device-data>
       <h2>Data on this Device</h2>
     </section>
-  </div>
+  </form>
 </template>
 <script lang="ts" src="./user-account.ts"></script>
 <style scoped lang="scss" src="./user-account.scss"></style>

web/src/views/measures.scss

@@ -8,3 +8,16 @@
     margin-right: 2rem;
   }
 }
+
+.measure-list {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+
+  .measure-summary {
+    height: 12rem;
+    width: 12rem;
+  }
+}
+

web/src/views/new-measure.scss

@@ -1,7 +1,8 @@
 @import '~@/styles/vars';
 
 input,
-select {
+select,
+textarea {
 //  background-color: $bg-primary;
 
 /*
@@ -13,17 +14,3 @@ select {
   border: solid thin $color1;
   border-radius: 4px;
 }
-
-select { background-color: white; }
-
-form {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-
-  label {
-    display: inline-block;
-    margin: .5rem 0;
-    min-width: 10em;
-  }
-}

web/src/views/new-measure.ts

@@ -1,16 +1,20 @@
 import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { faSync } from '@fortawesome/free-solid-svg-icons';
 import { logService } from '@/services/logging';
-import { userStore } from '@/store';
+import { measureStore, userStore } from '@/store';
 import { Measure, MeasureConfig, MeasureType } from '@/models';
 import MeasureConfigForm from '@/components/measure-config/MeasureConfigForm.vue';
 
+library.add(faSync);
+
 const logger = logService.getLogger('/views/new-measure');
 
 @Component({
   components: { MeasureConfigForm }
 })
 export class NewMeasure extends Vue {
-  private test: string = 'test';
+  private waiting = false;
   private measure: Measure<MeasureConfig> = {
     id: '',
     config: {
@@ -24,11 +28,33 @@ export class NewMeasure extends Vue {
   };
 
   private get slugFromName() {
-    return this.measure.name
+    return this.slugify(this.measure.name);
+  }
+
+  private slugify(s: string): string {
+    return s
       .toLowerCase()
-      .replace(/[^\w\s]/g, '')
+      .replace(/[^\w\s\-]/g, '')
       .replace(/\s+/g, '-');
   }
+
+  private async createMeasure() {
+    if (!this.measure.slug) {
+      this.measure.slug = this.slugify(this.measure.name);
+    }
+
+    this.waiting = true;
+    try {
+      await measureStore.createMeasure(this.measure);
+      this.$router.push({ name: 'measures' });
+    } catch (e) {
+      // TODO: show errors
+      logger.error('Unable to create measure. \n\t ' + JSON.stringify(this.measure), e.stack);
+    } finally {
+      this.waiting = false;
+    }
+  }
+
 }
 
 export default NewMeasure;