From 16b9f76f7dd1bae9e693e873b57ade26c447ee86 Mon Sep 17 00:00:00 2001 From: solderq35 Date: Sat, 30 Dec 2023 14:05:24 -0800 Subject: [PATCH] simplify multiple timestamps logic and add timestamp blocks --- src/components/map/sideView.vue | 3 +- src/components/view/modals/edit_card.vue | 101 ++++++++++++++++++++--- src/components/view/view.vue | 6 +- src/store/chart.module.js | 15 ++-- 4 files changed, 98 insertions(+), 27 deletions(-) diff --git a/src/components/map/sideView.vue b/src/components/map/sideView.vue index 8e9fa5ed..9323d968 100644 --- a/src/components/map/sideView.vue +++ b/src/components/map/sideView.vue @@ -137,8 +137,7 @@ export default { let searchTerm = 'block_' let chartIndex = blockpath.indexOf(searchTerm) let blockID = blockpath.slice(chartIndex + searchTerm.length) - this.$store.commit(blockpath + '/chart_' + blockID + '/resetMultStart', [this.dateStart]) - this.$store.commit(blockpath + '/chart_' + blockID + '/resetMultEnd', [this.dateEnd]) + this.$store.commit(blockpath + '/chart_' + blockID + '/resetMultTimeStamps') } this.$refs.prevArrow.style.display = 'none' if (this.buildingBlocks.length > 1) { diff --git a/src/components/view/modals/edit_card.vue b/src/components/view/modals/edit_card.vue index d2474b1d..af11089c 100644 --- a/src/components/view/modals/edit_card.vue +++ b/src/components/view/modals/edit_card.vue @@ -254,15 +254,21 @@ Save Time Period {{ this.form.tempMultStart.length + 1 }} - - Cancel - + Cancel +
+

Currently Saved Times:

+ + + {{ index + 1 }}: {{ convertTimeStamps(new Date(item)) }} + +
@@ -294,6 +300,7 @@ export default { set (value) { if (value === false) { this.$store.dispatch('modalController/closeModal') + this.cancelTimeSave() } } }, @@ -424,9 +431,58 @@ export default { this.form.tempMultEnd.push(this.form.end) }, + // Called whenever the edit modal is closed (cancel or x button) + // Checks what is in global state for multStart and multEnd (saved time periods), and removes any unsaved time periods cancelTimeSave: function () { - this.form.tempMultStart = [] - this.form.tempMultEnd = [] + let blockPath = this.$store.getters['modalController/data'].path + const charts = this.$store.getters[blockPath + '/charts'] + const chartPath = charts[0].path + this.form.tempMultStart.splice(this.$store.getters[chartPath + '/multStart'].length) + this.form.tempMultEnd.splice(this.$store.getters[chartPath + '/multEnd'].length) + }, + + // convert Unix time to English (to nearest minute), taken from src\components\charts\linechart.js + convertTimeStamps: function (d) { + let meridiem = 'am' + let hours = d.getHours() + if (hours > 12) { + hours -= 12 + meridiem = 'pm' + } else if (hours === 0) { + hours = 12 + } + let minutes = d.getMinutes() + if (minutes < 10) { + minutes = '0' + minutes + } + let year = d.getYear().toString().slice(1) + const dayCodes = ['Sun', 'Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat'] + return ( + dayCodes[d.getDay()] + + ' ' + + (d.getMonth() + 1).toString() + + '/' + + d.getDate() + + '/' + + year + + ' ' + + hours + + ':' + + minutes + + ' ' + + meridiem + ) + }, + + savedTimeButtonFirst: function (i) { + let style = {} + + // insert left margin on first "Saved Time Button" to ensure all buttons get same margin behavior + if (i === 0) { + style.marginLeft = '10px' + } + + return style }, deleteChart: function () { @@ -567,6 +623,15 @@ export default { point: '' }) } + }, + watch: { + $route: { + immediate: true, + handler: async function (to, from) { + this.form.tempMultStart = [] + this.form.tempMultEnd = [] + } + } } } @@ -626,4 +691,18 @@ export default { .pad-bottom { padding: 1em; } +.savedTimesP { + display: block; + font-size: 16px; + font-weight: bold; + margin-left: 10px; + margin-bottom: -5px; +} +.savedTimesDiv { + text-align: left; +} +.savedTimesButton { + display: inline-block; + margin-top: 10px; +} diff --git a/src/components/view/view.vue b/src/components/view/view.vue index bb2ae560..13d0ec7b 100644 --- a/src/components/view/view.vue +++ b/src/components/view/view.vue @@ -94,8 +94,7 @@ export default { let searchTerm = 'block_' let chartIndex = blockpath.indexOf(searchTerm) let blockID = blockpath.slice(chartIndex + searchTerm.length) - this.$store.commit(blockpath + '/chart_' + blockID + '/resetMultStart', [this.dateStart]) - this.$store.commit(blockpath + '/chart_' + blockID + '/resetMultEnd', [this.dateEnd]) + this.$store.commit(blockpath + '/chart_' + blockID + '/resetMultTimeStamps') }) } } @@ -173,8 +172,7 @@ export default { let searchTerm = 'block_' let chartIndex = blockpath.indexOf(searchTerm) let blockID = blockpath.slice(chartIndex + searchTerm.length) - this.$store.commit(blockpath + '/chart_' + blockID + '/resetMultStart', [this.dateStart]) - this.$store.commit(blockpath + '/chart_' + blockID + '/resetMultEnd', [this.dateEnd]) + this.$store.commit(blockpath + '/chart_' + blockID + '/resetMultTimeStamps') }) } } diff --git a/src/store/chart.module.js b/src/store/chart.module.js index b28d0f04..c8f9331d 100644 --- a/src/store/chart.module.js +++ b/src/store/chart.module.js @@ -223,13 +223,6 @@ const mutations = { } }, - // Function to remove all elements from VueX state array and insert a placeholder value - // You only need a mutation for this when you are dealing with global state (state.commit, this.store.getters, etc) - resetMultStart (state, payload) { - state.multStart = [] - state.multStart.push(...payload) - }, - multEnd (state, multEnd) { for (let i in multEnd) { if (typeof multEnd[i] === 'string') { @@ -244,10 +237,12 @@ const mutations = { } }, - resetMultEnd (state, payload) { + // Function to remove all elements from VueX state array + // You only need a mutation for this when you are dealing with global state (state.commit, this.store.getters, etc) + resetMultTimeStamps (state) { + state.multStart = [] state.multEnd = [] - state.multEnd.push(...payload) - } + }, } const getters = {