WIP Adding measurement details and entry for simple measurements.

web/src/components/measurement-entry/MeasurementEntry.vue

@@ -0,0 +1,8 @@
+<template>
+  <div>
+    <SimpleEntry v-if="measure.config.type === 'simple'"
+      :measure=measure v-model=value />
+  </div>
+</template>
+<script lang="ts" src="./measurement-entry.ts"></script>
+<style lang="scss" src="./measurement-entry.scss"></style>

web/src/components/measurement-entry/SimpleEntry.vue

@@ -0,0 +1,20 @@
+<template>
+  <fieldset>
+    <div>
+      <label for=timestamp>Timestamp</label>
+      <input type=datetime-local
+        v-model=value.timestamp
+        v-show=editTimestamp
+        :disabled=disabled />
+      <span v-show="!editTimestamp">
+        now <a href="#" v-on:click.stop.prevent="editTimestamp = true"> (set a time)</a>
+      </span>
+    </div>
+    <div>
+      <label for=measurementValue>{{measure.name}}</label>
+      <input required type=number v-model=value.value :disabled=disabled />
+    </div>
+  </fieldset>
+</template>
+<script lang="ts" src="./simple-entry.ts"></script>
+<style lang="scss" src="./simple-entry.scss"></style>

web/src/components/measurement-entry/measurement-entry.ts

@@ -0,0 +1,21 @@
+import { Component, Emit, Prop, Vue, Watch } from 'vue-property-decorator';
+import { Measure, MeasureConfig, MeasureType, Measurement, MeasurementMeta } from '@/models';
+import SimpleEntry from './SimpleEntry.vue';
+
+@Component({
+  components: { SimpleEntry }
+})
+export class MeasurementEntry extends Vue {
+  @Prop() private measure!: Measure<MeasureConfig>;
+  @Prop() private value!: Measurement<MeasurementMeta>;
+
+  @Watch('value', { immediate: true, deep: true })
+  @Emit('input')
+  private onMeasurementChanged(newVal: Measurement<MeasurementMeta>, oldVal: Measurement<MeasurementMeta>) {
+    newVal.measureId = this.measure.id;
+    return newVal;
+  }
+
+}
+
+export default MeasurementEntry;

web/src/components/measurement-entry/simple-entry.ts

@@ -0,0 +1,24 @@
+import { Component, Emit, Prop, Vue, Watch } from 'vue-property-decorator';
+import { Measure, MeasureConfig, MeasureType, Measurement, MeasurementMeta } from '@/models';
+
+@Component({})
+export class SimpleEntry extends Vue {
+  @Prop() public measure!: Measure<MeasureConfig>;
+  @Prop() public value!: Measurement<MeasurementMeta>;
+  @Prop() public disabled: boolean = false;
+  private editTimestamp: boolean = false;
+
+  @Watch('value', { immediate: true, deep: true })
+  @Emit('input')
+  private onMeasurementChanged(newVal: Measurement<MeasurementMeta>, oldVal: Measurement<MeasurementMeta>) {
+    newVal.extData.measureType = 'simple' as MeasureType;
+
+    if (typeof(newVal.value) === 'string' ) {
+      newVal.value = parseInt(newVal.value, 10);
+    }
+    return newVal;
+  }
+
+}
+
+export default SimpleEntry;