web: Add basic detail view of text measures.

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

@@ -2,6 +2,8 @@
   <div>
     <SimpleDetails v-if="measure.config.type === 'simple'"
       :measure=measure :measurements=measurements />
+    <TextDetails v-if="measure.config.type === 'text'"
+      :measure=measure :measurements=measurements />
   </div>
 </template>
 <script lang="ts" src="./measure-details.ts"></script>

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

@@ -0,0 +1,22 @@
+<template>
+  <div class=text-details>
+    <v-table :data=measurementTableData>
+      <thead slot=head>
+        <tr>
+          <v-th
+            v-if="measure.config.showTimestamp"
+            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 v-if="measure.config.showTimestamp">{{row.tsDisplay}}</td>
+          <td>{{row.extData.entry}}</td>
+        </tr>
+      </tbody>
+    </v-table>
+  </div>
+</template>
+<script lang=ts src=./text-details.ts></script>

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

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

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

@@ -0,0 +1,22 @@
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import assign from 'lodash.assign';
+import { Measure, Measurement, TextMeasureConfig, TextMeasurementMeta } from '@/models';
+import { formatTS } from '@/util';
+
+@Component({})
+export class TextDetails extends Vue {
+  @Prop() private measure!: Measure<TextMeasureConfig>;
+  @Prop() private measurements!: Array<Measurement<TextMeasurementMeta>>;
+
+  private get measurementTableData() {
+    return (this.measurements || []).map((m) => {
+      return assign({}, m, {
+        tsDisplay: formatTS(this.measure, m),
+        tsSort: m.timestamp.toISOString()
+      });
+    });
+  }
+
+}
+
+export default TextDetails;