WIP Adding measurement details and entry for simple measurements.

web/src/components/measure-details/MeasureDetails.vue

@@ -0,0 +1,8 @@
+<template>
+  <div>
+    <SimpleDetails v-if="measure.config.type === 'simple'"
+      :measure=measure :measurements=measurements />
+  </div>
+</template>
+<script lang="ts" src="./measure-details.ts"></script>
+<style lang="scss" src="./measure-details.scss"></style>

web/src/components/measure-details/SimpleDetails.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class=simple-details>
+    <apex-chart type="line" :options=chartOptions :series=measurementChartData />
+    <v-table :data=measurementTableData>
+      <thead slot=head >
+        <tr>
+          <v-th sortKey=tsSort defaultSort=asc >Timestamp</v-th>
+          <v-th sortKey=value >{{measure.name}}</v-th>
+        </tr>
+      </thead>
+      <tbody slot=body slot-scope={displayData} >
+        <tr v-for="row in displayData" :key="row.id">
+          <td>{{row.tsDisplay}}</td>
+          <td>{{row.value}}</td>
+        </tr>
+      </tbody>
+    </v-table>
+    <SimpleEntry :measure=measure v-model=
+  </div>
+</template>
+<script lang="ts" src="./simple-details.ts"></script>
+<style lang="scss" src="./simple-details.scss"></style>

web/src/components/measure-details/measure-details.ts

@@ -0,0 +1,13 @@
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import { Measure, MeasureConfig, MeasureType, Measurement, MeasurementMeta } from '@/models';
+import SimpleDetails from './SimpleDetails.vue';
+
+@Component({
+  components: { SimpleDetails }
+})
+export class MeasureDetails extends Vue {
+  @Prop() private measure!: Measure<MeasureConfig>;
+  @Prop() private measurements!: Array<Measurement<MeasurementMeta>>;
+}
+
+export default MeasureDetails;

web/src/components/measure-details/simple-details.scss

@@ -0,0 +1,15 @@
+.simple-details {
+  display: flex;
+
+  table {
+    th {
+      border-bottom: 1px black solid;
+      min-width: 15em;
+      text-align: left;
+    }
+
+    td {
+      padding-left: 1em;
+    }
+  }
+}

web/src/components/measure-details/simple-details.ts

@@ -0,0 +1,44 @@
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import { Measure, MeasureConfig, MeasureType, Measurement, MeasurementMeta } from '@/models';
+import * as moment from 'moment';
+import assign from 'lodash.assign';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { faPencilAlt } from '@fortawesome/free-solid-svg-icons';
+
+library.add(faPencilAlt);
+
+@Component({})
+export class SimpleDetails extends Vue {
+  @Prop() private measure!: Measure<MeasureConfig>;
+  @Prop() private measurements!: Array<Measurement<MeasurementMeta>>;
+
+  private newMeasurement:
+  private moment = moment;
+  private chartOptions = {
+    noData: { text: 'no data',
+              style: { fontSize: '18px' } },
+    stroke: { curve: 'smooth' },
+    xaxis: { type: 'datetime' }
+  };
+
+  private get measurementChartData(): ApexAxisChartSeries {
+    const measurementData = this.measurements || [];
+
+    return [{
+      name: this.measure.name,
+      data: measurementData.map((m) => ({ x: m.timestamp.toISOString(), y: m.value }))
+    }];
+  }
+
+  private get measurementTableData() {
+    return (this.measurements || []).map((m) => {
+      return assign({}, m, {
+        tsDisplay: moment(m.timestamp).format('MMM Do, HH:mm'),
+        tsSort: m.timestamp.toISOString()
+      });
+    });
+  }
+
+}
+
+export default SimpleDetails;