WIP Adding measurement details and entry for simple measurements.

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;