From 4c60c30b7df283cf2b846dd1d30863a4cc943428 Mon Sep 17 00:00:00 2001
From: Jonathan Bernard <jonathan@jdbernard.com>
Date: Fri, 19 Apr 2019 23:01:17 -0500
Subject: [PATCH] WIP stub for measure details page.

---
 web/src/models.d.ts        |  4 +++-
 web/src/router.ts          |  7 +++++++
 web/src/views/Measure.vue  | 15 +++++++++++++++
 web/src/views/measure.scss |  3 +++
 web/src/views/measure.ts   | 36 ++++++++++++++++++++++++++++++++++++
 5 files changed, 64 insertions(+), 1 deletion(-)
 create mode 100644 web/src/views/Measure.vue
 create mode 100644 web/src/views/measure.scss
 create mode 100644 web/src/views/measure.ts

diff --git a/web/src/models.d.ts b/web/src/models.d.ts
index 5065129..0e048bd 100644
--- a/web/src/models.d.ts
+++ b/web/src/models.d.ts
@@ -19,7 +19,9 @@ export interface MeasureConfig {
   isVisible: boolean;
 }
 
-export interface ListMeasureConfig extends MeasureConfig { }
+export interface ListMeasureConfig extends MeasureConfig {
+  showTimestamp: boolean;
+}
 
 export interface Measure<C extends MeasureConfig> {
   id: string;
diff --git a/web/src/router.ts b/web/src/router.ts
index c7e6ef6..5c226d7 100644
--- a/web/src/router.ts
+++ b/web/src/router.ts
@@ -2,6 +2,7 @@ import Vue from 'vue';
 import { default as Router, Route } from 'vue-router';
 
 import Login from '@/views/Login.vue';
+import Measure from '@/views/Measure.vue';
 import Measures from '@/views/Measures.vue';
 import NewMeasure from '@/views/NewMeasure.vue';
 import QuickPanels from '@/views/QuickPanels.vue';
@@ -33,6 +34,12 @@ const router = new Router({
       component: Measures,
       meta: { requiresAuth: true }
     },
+    {
+      path: '/measures/:slug',
+      name: 'measure',
+      component: Measure,
+      meta: { requiresAuth: true }
+    },
     {
       path: '/user-account',
       name: 'user-account',
diff --git a/web/src/views/Measure.vue b/web/src/views/Measure.vue
new file mode 100644
index 0000000..6b41d6e
--- /dev/null
+++ b/web/src/views/Measure.vue
@@ -0,0 +1,15 @@
+<template>
+  <div v-if="measure" :id="'measure-details-' + measure.slug">
+    <div class=header-action>
+      <h1>{{measure.name}}</h1>
+      <h2>{{measure.description}}</h2>
+    </div>
+  </div>
+  <div v-else>
+    <div class=header-action>
+      <h1>There is no measure named {{$route.params.slug}}.</h1>
+    </div>
+  </div>
+</template>
+<script lang="ts" src="./measure.ts"></script>
+<style lang="scss" src="./measure.scss"></style>
diff --git a/web/src/views/measure.scss b/web/src/views/measure.scss
new file mode 100644
index 0000000..800a262
--- /dev/null
+++ b/web/src/views/measure.scss
@@ -0,0 +1,3 @@
+@import '~@/styles/vars';
+
+
diff --git a/web/src/views/measure.ts b/web/src/views/measure.ts
new file mode 100644
index 0000000..69b96b3
--- /dev/null
+++ b/web/src/views/measure.ts
@@ -0,0 +1,36 @@
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import { Measure as MeasureModel, MeasureConfig, MeasureType, Measurement, MeasurementMeta } from '@/models';
+import { measureStore, measurementStore } from '@/store';
+
+@Component({
+  components: { }
+})
+export class Measure extends Vue {
+
+  private get measure(): MeasureModel<MeasureConfig> | null {
+    return measureStore.measures[this.$route.params.slug] || null;
+  }
+
+  private get measurements() {
+    if (this.measure && measurementStore.measurements[this.measure.id]) {
+      return measurementStore.measurements[this.measure.id];
+    } else {
+      return [];
+    }
+  }
+
+  private async mounted() {
+    // good chance we've already fetched this
+    // TODO: centralize this caching behavior?
+    if (!this.measure) {
+      await measureStore.fetchMeasure(this.$route.params.slug);
+    }
+
+    if (this.measure && this.measurements.length === 0) {
+      await measurementStore.fetchMeasurements(this.measure);
+    }
+  }
+
+}
+
+export default Measure;