diff client/src/components/TimeSlider.vue @ 5063:43bebcc8961f time-sliding

client: set time according to zoom level. * in case zoom is at a hourly level hours respected * otherwise a default of 12:00 is set
author Fadi Abbud <fadi.abbud@intevation.de>
date Mon, 09 Mar 2020 16:30:57 +0100
parents da28a58eb10d
children d87438a8c891
line wrap: on
line diff
--- a/client/src/components/TimeSlider.vue	Mon Mar 09 15:38:00 2020 +0100
+++ b/client/src/components/TimeSlider.vue	Mon Mar 09 16:30:57 2020 +0100
@@ -71,6 +71,7 @@
   name: "timeslider",
   data() {
     return {
+      isSelectedTimeHourly: false,
       newX: null
     };
   },
@@ -82,11 +83,7 @@
     }
   },
   computed: {
-    ...mapState("application", [
-      "showTimeSlider",
-      "paneSetup",
-      "isSelectedTimeHourly"
-    ]),
+    ...mapState("application", ["showTimeSlider", "paneSetup"]),
     ...mapState("map", ["ongoingRefresh"]),
     reposition() {
       // reposition time slider in case of opened diagram
@@ -104,7 +101,10 @@
       },
       set(value) {
         if (!value) return;
-        const date = new Date(value);
+        let date = new Date(value);
+        const [hours, minutes] = this.timeSelection.split(":");
+        date = setHours(date, hours);
+        date = setMinutes(date, minutes);
         this.$store.commit("application/setSelectedTime", date);
         this.rescaleSlider(50);
       }
@@ -128,6 +128,11 @@
         return this.$store.state.application.selectedTime;
       },
       set(value) {
+        if (!this.isSelectedTimeHourly) {
+          value = setHours(value, 12);
+          value = setMinutes(value, 0);
+        }
+
         this.$store.commit("application/setSelectedTime", value);
       }
     }
@@ -265,8 +270,8 @@
       this.newX = d3.event.transform.rescaleX(xScale);
       const currentScaleFactor = d3.event.transform.k;
       const isHourly = currentScaleFactor > 400;
-      if (isHourly != this.isSelectedTimeHourly)
-        this.$store.commit("application/setSelectedTimeHourly", isHourly);
+      if (this.isSelectedTimeHourly != isHourly)
+        this.isSelectedTimeHourly = isHourly;
       xAxis.scale(this.newX);
       d3.select(".axis--x").call(xAxis);
       d3.select(".line").attr("x", this.newX(d3.isoParse(this.selectedTime)));