From 1511f04c612472c2fae7fa64fa22624d78e3b77a Mon Sep 17 00:00:00 2001
From: s-egge <ssteele836@gmail.com>
Date: Tue, 9 Jan 2024 11:18:43 -0800
Subject: [PATCH] Label update, delete time period progress

Added energy type to top chart labels. Delete time period is deleting some of the data but not the labels
---
 src/components/charts/chartController.vue |  2 +-
 src/components/view/modals/edit_card.vue  | 33 +++++++++++++++++------
 2 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/src/components/charts/chartController.vue b/src/components/charts/chartController.vue
index a4926a62..e54f0161 100644
--- a/src/components/charts/chartController.vue
+++ b/src/components/charts/chartController.vue
@@ -364,7 +364,7 @@ export default {
     formatMultipleTimePeriods: function (charts) {
       // change the labels to match the time period for each chart
       for (let chart of charts) {
-        chart.label = chart.data[0].x.toDateString() + ' to ' + chart.data[chart.data.length - 1].x.toDateString()
+        chart.label = chart.data[0].x.toDateString() + ' to ' + chart.data[chart.data.length - 1].x.toDateString() + ', ' + this.buildLabel('y')
       }
 
       // find chart with largest dataset
diff --git a/src/components/view/modals/edit_card.vue b/src/components/view/modals/edit_card.vue
index a499440f..a6540852 100644
--- a/src/components/view/modals/edit_card.vue
+++ b/src/components/view/modals/edit_card.vue
@@ -268,6 +268,9 @@
           <!-- Since tempMultStart and tempMultEnd share the same array lengths it *should* be fine to call form.tempMultEnd[index]-->
           {{ index + 1 }}: {{ convertTimeStamps(new Date(item)) }} to
           {{ convertTimeStamps(new Date(form.tempMultEnd[index])) }}
+
+          <i class="el-icon-close deleteTimeButton" @click="deleteTimePeriod(index)"></i>
+
         </el-button>
       </div>
     </span>
@@ -392,9 +395,12 @@ export default {
 
       const charts = this.$store.getters[blockPath + '/charts']
       console.log(charts)
+      console.log(this.form.sets)
 
       for (let index in this.form.sets) {
-        if (index < charts.length) {
+        if (index < charts.length || (this.form.sets[0].multStart && this.form.sets[0].multStart.length < charts[0].multStart.length)) {
+          console.log("Conditions met")
+
           const chartPath = charts[index].path
           // console.log(chartPath)
           this.form.sets[0].multStart = this.form.tempMultStart
@@ -402,13 +408,6 @@ export default {
           // console.log(this.form.sets[0])
           this.$store.dispatch(chartPath + '/update', this.form.sets[index])
           // console.log(this.$store.getters[blockPath + '/charts'])
-          // update legend name
-          // line below is what "resets" the chart name, maybe comment it out but needs more testing
-          /* update 12/28/23:
-              moving this line into the if-statement below seems to fix the issue of resetting the
-              chart name when comparing two buildings. It still resets when comparing multiple time periods, but
-              those are going to be changed manually in chartController.vue anyway
-          */
           if (this.$route.path.includes('building')) {
             this.$store.commit(chartPath + '/name', this.$store.getters[chartPath + '/pointString'])
           }
@@ -486,6 +485,20 @@ export default {
       return style
     },
 
+    deleteTimePeriod: function (index) {
+
+      console.log("Form: " , this.form);
+
+      this.form.tempMultStart.splice(index, 1)
+      this.form.tempMultEnd.splice(index, 1)
+      
+
+      this.form.sets[0].multStart = this.form.tempMultStart
+      this.form.sets[0].multEnd = this.form.tempMultEnd
+
+      console.log("Form: ", this.form);
+    },
+
     deleteChart: function () {
       this.form.sets.splice(this.currentIndex, 1)
       this.currentIndex = 0
@@ -706,4 +719,8 @@ export default {
   display: inline-block;
   margin-top: 10px;
 }
+
+.deleteTimeButton:hover {
+  color: #d76740;
+}
 </style>