WIP Adding measurement details and entry for simple measurements.

web/src/views/Measure.vue

@@ -1,9 +1,13 @@
 <template>
   <div v-if="measure" :id="'measure-details-' + measure.slug">
     <div class=header-action>
-      <h1>{{measure.name}}</h1>
-      <h2>{{measure.description}}</h2>
+      <div>
+        <h1>{{measure.name}}</h1>
+        <h2>{{measure.description}}</h2>
+      </div>
+      <router-link :to="'/new/measurement/' + measure.slug" class=btn-action>Add Measurement</router-link>
     </div>
+    <MeasureDetails :measure=measure :measurements=measurements />
   </div>
   <div v-else>
     <div class=header-action>

web/src/views/NewMeasurement.vue

@@ -0,0 +1,26 @@
+<template>
+  <div v-if=measure id=new-measurement>
+    <div class=header>
+      <h1>New Measurement</h1>
+      <h2>Enter a new measurement for {{measure.name}}</h2>
+    </div>
+    <form @submit.prevent=createMeasurement() class=new-measurement-form>
+      <MeasurementEntry v-model=measurement :measure=measure :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>
+  <div v-else>
+    <div class=header-action>
+      <h1>There is no measure named {{$route.params.slug}}.</h1>
+    </div>
+
+  </div>
+</template>
+<script lang="ts" src="./new-measurement.ts"></script>
+<style lang="scss" src="./new-measurement.scss"></style>

web/src/views/measure.ts

@@ -1,9 +1,12 @@
 import { Component, Prop, Vue } from 'vue-property-decorator';
-import { Measure as MeasureModel, MeasureConfig, MeasureType, Measurement, MeasurementMeta } from '@/models';
+import { Measure as MeasureModel, MeasureConfig } from '@/models';
 import { measureStore, measurementStore } from '@/store';
+import MeasureDetails from '@/components/measure-details/MeasureDetails.vue';
 
 @Component({
-  components: { }
+  components: {
+    MeasureDetails
+  }
 })
 export class Measure extends Vue {
 

web/src/views/nav-bar.scss

@@ -40,6 +40,7 @@ nav {
 
   .logo {
     padding: 0 0 1rem;
+    white-space: nowrap;
   }
 
   & > .collapse-handle {

web/src/views/new-measurement.ts

@@ -0,0 +1,57 @@
+import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
+import { Measure, MeasureConfig, Measurement, MeasurementMeta, MeasureType } from '@/models';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { faSync } from '@fortawesome/free-solid-svg-icons';
+import { logService } from '@/services/logging';
+import { measureStore, measurementStore } from '@/store';
+import MeasurementEntry from '@/components/measurement-entry/MeasurementEntry.vue';
+
+library.add(faSync);
+
+const logger = logService.getLogger('/views/new-measurement');
+
+@Component({ components: { MeasurementEntry } })
+export class NewMeasurement extends Vue {
+  private get measure(): Measure<MeasureConfig> | null {
+    return measureStore.measures[this.$route.params.slug] || null;
+  }
+
+  private waiting = false;
+  private measurement: Measurement<MeasurementMeta> = {
+    id: '',
+    measureId: '',
+    value: 0,
+    timestamp: new Date(),
+    extData: {
+      measureType: 'simple' as MeasureType
+    }
+  };
+
+  private async mounted() {
+    if (!this.measure) {
+      await measureStore.fetchMeasure(this.$route.params.slug);
+    }
+  }
+
+  private async createMeasurement() {
+    this.waiting = true;
+    try {
+      if (this.measure) {
+        // Browsers that don't support datetime-local will fallback to text.
+        if (typeof(this.measurement.timestamp) === 'string') {
+          this.measurement.timestamp = new Date(this.measurement.timestamp);
+        }
+
+        await measurementStore.createMeasurement({ measure: this.measure, measurement: this.measurement});
+        this.$router.push({ name: 'measure', params: { slug: this.measure.slug } });
+      } else { /* TODO: shouldn't be possible */ }
+    } catch (e) {
+      // TODO: show errors in the UI.
+      logger.error('Unable to create measurement: ' + e.message + '. \n\t' + JSON.stringify(this.measurement), e.stack);
+    } finally {
+      this.waiting = false;
+    }
+  }
+}
+
+export default NewMeasurement;