web: Add timestamp display format to measure configuration.

web/src/components/measure-config/MeasureConfigForm.vue

@@ -2,9 +2,11 @@
   <fieldset>
     <div>
       <label for=measureType>Type</label>
+      <span v-if=measureExists>{{value.type}}</span>
       <select
         :disabled=disabled
         name=measureType
+        v-if="!measureExists"
         v-model=value.type>
         <option value=simple>Simple</option>
         <option value=text>Text</option>
@@ -14,6 +16,25 @@
       <label for=measureIsVisible>Show by default.</label>
       <input type=checkbox v-model=value.isVisible :disabled=disabled />
     </div>
+    <div>
+      <label for=timestampDisplayFormat>Timestamp Format</label>
+      <select
+        v-on:change=formatSelectionChanged
+        :disabled=disabled
+        v-model=selectedFormat
+        name=timestampDisplayFormat>
+        <option v-for="fmtStr in formatStrings"
+                :value=fmtStr>{{now.format(fmtStr)}}</option>
+        <option value="custom">Custom</option>
+      </select>
+    </div>
+    <div v-if="selectedFormat === 'custom'">
+      <label for=timestampCustomDisplayFormat>
+        Custom Timestamp Format
+        (<a href="https://momentjs.com/docs/#/displaying/format/">see formatting options</a>)
+      </label>
+      <input type=text v-model=value.timestampDisplayFormat />
+    </div>
     <TextMeasureConfigForm v-model=value v-show="value.type === 'text'" :disabled=disabled />
   </fieldset>
 </template>

web/src/components/measure-config/measure-config-form.ts

@@ -2,6 +2,7 @@ import { Component, Emit, Prop, Vue, Watch } from 'vue-property-decorator';
 import { logService } from '@/services/logging';
 import { Measure, MeasureConfig } from '@/models';
 import TextMeasureConfigForm from './TextMeasureConfigForm.vue';
+import moment from 'moment';
 
 @Component({
   components: {
@@ -11,12 +12,41 @@ import TextMeasureConfigForm from './TextMeasureConfigForm.vue';
 export class MeasureConfigForm extends Vue {
   @Prop({}) public value!: MeasureConfig;
   @Prop({}) public disabled: boolean = false;
+  @Prop({}) public measureExists: boolean = false;
+
+  public now = moment();
+  public formatStrings = [
+    'l',
+    'L',
+    'll',
+    'LL',
+    'lll',
+    'LLL',
+    'llll',
+    'LLLL',
+    'Y-MM-DD',
+    'Y-MM-DDTHH:mm',
+    'Y-MM-DDTHH:mm:ss',
+    'Y-MM-DDTHH:mm:ss.SSSZZ',
+    'MM/DD',
+    'MMM Do',
+    'HH:mm',
+    'hh:mmA'
+  ];
+
+  private selectedFormat: string = 'l';
 
   @Watch('value', { immediate: true, deep: true })
   @Emit('input')
   private onConfigChanged(newVal: MeasureConfig, oldVal: MeasureConfig) {
     return newVal;
   }
+
+  private formatSelectionChanged() {
+    if (this.selectedFormat !== 'custom') {
+      this.value.timestampDisplayFormat = this.selectedFormat;
+    }
+  }
 }
 
 export default MeasureConfigForm;

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

@@ -1,10 +1,9 @@
 import { Component, Prop, Vue } from 'vue-property-decorator';
 import { Measure, MeasureConfig, MeasureType, Measurement, MeasurementMeta } from '@/models';
-import moment from 'moment';
 import assign from 'lodash.assign';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faPencilAlt } from '@fortawesome/free-solid-svg-icons';
-import { byTimestampComparator } from '@/util';
+import { byTimestampComparator, formatTS } from '@/util';
 
 library.add(faPencilAlt);
 
@@ -13,8 +12,6 @@ export class SimpleDetails extends Vue {
   @Prop() private measure!: Measure<MeasureConfig>;
   @Prop() private measurements!: Array<Measurement<MeasurementMeta>>;
 
-  // private newMeasurement;
-  private moment = moment;
   private chartOptions = {
     markers: { size: 6 },
     noData: { text: 'no data',
@@ -37,7 +34,7 @@ export class SimpleDetails extends Vue {
   private get measurementTableData() {
     return (this.measurements || []).map((m) => {
       return assign({}, m, {
-        tsDisplay: moment(m.timestamp).format('MMM Do, HH:mm'),
+        tsDisplay: formatTS(this.measure, m),
         tsSort: m.timestamp.toISOString()
       });
     });