WIP stub for measure details page.

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;

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',

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>

web/src/views/measure.scss

@@ -0,0 +1,3 @@
+@import '~@/styles/vars';
+
+

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;