From e9de9aebf3aedc1197df582778ff31b64e056a47 Mon Sep 17 00:00:00 2001 From: Jonathan Bernard Date: Sat, 14 Mar 2020 22:45:59 -0500 Subject: [PATCH] web: Add timestamp display format to measure configuration. --- web/package-lock.json | 8 +++++ web/package.json | 1 + .../measure-config/MeasureConfigForm.vue | 21 +++++++++++++ .../measure-config/measure-config-form.ts | 30 +++++++++++++++++++ .../measure-details/simple-details.ts | 7 ++--- web/src/models.d.ts | 1 + web/src/styles/ui-common.scss | 20 +++++++++++-- web/src/util.ts | 20 ++++++++++++- web/src/views/measure.scss | 7 ----- web/src/views/new-measure.ts | 3 +- 10 files changed, 101 insertions(+), 17 deletions(-) diff --git a/web/package-lock.json b/web/package-lock.json index 89fbc99..75cb590 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -1059,6 +1059,14 @@ "@types/lodash": "*" } }, + "@types/lodash.omit": { + "version": "4.5.6", + "resolved": "https://registry.npmjs.org/@types/lodash.omit/-/lodash.omit-4.5.6.tgz", + "integrity": "sha512-KXPpOSNX2h0DAG2w7ajpk7TXvWF28ZHs5nJhOJyP0BQHkehgr948RVsToItMme6oi0XJkp19CbuNXkIX8FiBlQ==", + "requires": { + "@types/lodash": "*" + } + }, "@types/minimatch": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz", diff --git a/web/package.json b/web/package.json index 601c373..20faacf 100644 --- a/web/package.json +++ b/web/package.json @@ -18,6 +18,7 @@ "@types/lodash.assign": "^4.2.6", "@types/lodash.findindex": "^4.6.6", "@types/lodash.merge": "^4.6.6", + "@types/lodash.omit": "^4.5.6", "apexcharts": "^3.15.6", "axios": "^0.18.1", "js-cookie": "^2.2.1", diff --git a/web/src/components/measure-config/MeasureConfigForm.vue b/web/src/components/measure-config/MeasureConfigForm.vue index b127e1e..a9afcdd 100644 --- a/web/src/components/measure-config/MeasureConfigForm.vue +++ b/web/src/components/measure-config/MeasureConfigForm.vue @@ -2,9 +2,11 @@
+ {{value.type}}
+
+ + +
+
+ + +
diff --git a/web/src/components/measure-config/measure-config-form.ts b/web/src/components/measure-config/measure-config-form.ts index e8518dd..ad50aab 100644 --- a/web/src/components/measure-config/measure-config-form.ts +++ b/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; diff --git a/web/src/components/measure-details/simple-details.ts b/web/src/components/measure-details/simple-details.ts index ef28330..ab8599a 100644 --- a/web/src/components/measure-details/simple-details.ts +++ b/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; @Prop() private measurements!: Array>; - // 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() }); }); diff --git a/web/src/models.d.ts b/web/src/models.d.ts index 69dd13a..c3aa91a 100644 --- a/web/src/models.d.ts +++ b/web/src/models.d.ts @@ -17,6 +17,7 @@ export interface LoginSubmit { export interface MeasureConfig { type: MeasureType; isVisible: boolean; + timestampDisplayFormat: string; } export interface TextMeasureConfig extends MeasureConfig { diff --git a/web/src/styles/ui-common.scss b/web/src/styles/ui-common.scss index aa9a170..4f7388d 100644 --- a/web/src/styles/ui-common.scss +++ b/web/src/styles/ui-common.scss @@ -2,7 +2,8 @@ button, .btn, -.btn-action { +.btn-action, +.btn-icon { border: 0; border-radius: .25em; cursor: pointer; @@ -14,14 +15,27 @@ button, a { text-decoration: none; } } +.btn, .btn-icon { color: $fg-primary; } + +.btn-icon { + + border-radius: 1em; + padding: .5em; + margin: 0 .5em; + + &:hover, &:focus { + background-color: darken($bg-primary, 20%); + } +} + .btn-action { background-color: $color2; color: $color3; cursor: pointer; position: relative; - &:hover { - background-color: darken($color2, 5%); + &:hover, &:focus { + background-color: lighten($color2, 20%); } } diff --git a/web/src/util.ts b/web/src/util.ts index c51f4b9..0ba5cf2 100644 --- a/web/src/util.ts +++ b/web/src/util.ts @@ -1,7 +1,25 @@ -import { Measurement, MeasurementMeta } from '@/models'; +import { Measure, MeasureConfig, Measurement, MeasurementMeta } from '@/models'; +import moment from 'moment'; export function byTimestampComparator( a: Measurement, b: Measurement): number { return a.timestamp.getTime() - b.timestamp.getTime(); } + +export function formatTS( + m: Measure, + mm: Measurement +): string { + return moment(mm.timestamp).format( + m.config.timestampDisplayFormat || 'MMM Do'); +} + +export function slugify(s: string): string { + return s + .toLowerCase() + .replace(/[^\w\s\-]/g, '') + .replace(/\s+/g, '-'); +} + + diff --git a/web/src/views/measure.scss b/web/src/views/measure.scss index 462c19a..b26ac24 100644 --- a/web/src/views/measure.scss +++ b/web/src/views/measure.scss @@ -1,8 +1 @@ @import '~@/styles/vars'; - -.header-action .btn { - color: inherit; - margin-left: auto; - margin-right: 2rem; - background-color: none; -} diff --git a/web/src/views/new-measure.ts b/web/src/views/new-measure.ts index 5ccef19..4c6cc42 100644 --- a/web/src/views/new-measure.ts +++ b/web/src/views/new-measure.ts @@ -19,7 +19,8 @@ export class NewMeasure extends Vue { id: '', config: { type: 'simple' as MeasureType, - isVisible: true + isVisible: true, + timestampDisplayFormat: 'l' }, description: '', name: '',