From c685f55d1577204f953eeb597f1b90d60270ac1f Mon Sep 17 00:00:00 2001
From: Jonathan Bernard <jonathan@jdbernard.com>
Date: Sat, 14 Mar 2020 22:46:46 -0500
Subject: [PATCH] web: Add basic detail view of text measures.

---
 .../measure-details/MeasureDetails.vue        |  2 ++
 .../measure-details/TextDetails.vue           | 22 +++++++++++++++++++
 .../measure-details/measure-details.ts        |  6 ++++-
 .../measure-details/text-details.ts           | 22 +++++++++++++++++++
 4 files changed, 51 insertions(+), 1 deletion(-)
 create mode 100644 web/src/components/measure-details/TextDetails.vue
 create mode 100644 web/src/components/measure-details/text-details.ts

diff --git a/web/src/components/measure-details/MeasureDetails.vue b/web/src/components/measure-details/MeasureDetails.vue
index b3b6df2..cfd3b6a 100644
--- a/web/src/components/measure-details/MeasureDetails.vue
+++ b/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>
diff --git a/web/src/components/measure-details/TextDetails.vue b/web/src/components/measure-details/TextDetails.vue
new file mode 100644
index 0000000..9238154
--- /dev/null
+++ b/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>
diff --git a/web/src/components/measure-details/measure-details.ts b/web/src/components/measure-details/measure-details.ts
index d38fe04..c5661af 100644
--- a/web/src/components/measure-details/measure-details.ts
+++ b/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>;
diff --git a/web/src/components/measure-details/text-details.ts b/web/src/components/measure-details/text-details.ts
new file mode 100644
index 0000000..5f69a43
--- /dev/null
+++ b/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;