diff client/src/components/TimeSlider.vue @ 5167:a5fd84c4f2fe

timeslider: avoid moving cursor to future area (click event) * move the cursor to "now" instead of 12:00 in case "now" is earlier when clicking on value of "today" on time slider and zoom level is for days.
author Fadi Abbud <fadi.abbud@intevation.de>
date Tue, 07 Apr 2020 15:16:11 +0200
parents bc7855cfb801
children de86a96d55c3
line wrap: on
line diff
--- a/client/src/components/TimeSlider.vue	Mon Apr 06 15:09:20 2020 +0200
+++ b/client/src/components/TimeSlider.vue	Tue Apr 07 15:16:11 2020 +0200
@@ -360,20 +360,36 @@
     zoomed() {
       let newX = d3.event.transform.rescaleX(xScale);
       currentScaleFactor = d3.event.transform.k;
-      const isHourly = currentScaleFactor > 400;
-      if (this.isSelectedTimeHourly != isHourly)
-        this.isSelectedTimeHourly = isHourly;
+      this.checkSelectedTimeHourly();
       xAxis.scale(newX);
       d3.select(".axis--x").call(xAxis);
       d3.select(".line").attr("x", newX(d3.isoParse(this.selectedTime)));
       d3.select(".future").attr("x", newX(d3.isoParse(new Date())));
     },
+    checkSelectedTimeHourly() {
+      const isHourly = currentScaleFactor > 400;
+      if (this.isSelectedTimeHourly != isHourly)
+        this.isSelectedTimeHourly = isHourly;
+    },
     onClick() {
       // Extract the click location
       let point = d3.mouse(document.getElementById("zoom")),
         p = { x: point[0], y: point[1] };
       d3.select(".line").attr("x", p.x);
-      this.selectedTime = d3.isoParse(xAxis.scale().invert(p.x + 2));
+      const xTime = d3.isoParse(xAxis.scale().invert(p.x + 2)).toDateString();
+      const now = new Date();
+      // Avoid moving the cursor to future area if the "now" value is earlier than 12:00
+      if (
+        xTime === now.toDateString() &&
+        !this.isSelectedTimeHourly &&
+        now.getHours() < 12
+      ) {
+        this.isSelectedTimeHourly = true;
+        this.selectedTime = d3.isoParse(new Date());
+      } else {
+        this.selectedTime = d3.isoParse(xAxis.scale().invert(p.x + 2));
+      }
+      this.checkSelectedTimeHourly();
     },
     onDrag() {
       this.selectedTime = d3.isoParse(xAxis.scale().invert(d3.event.x + 2));
@@ -401,9 +417,7 @@
             this.isSelectedTimeHourly = true;
             this.selectedTime = now;
             d3.select(".line").attr("x", xAxis.scale()(d3.isoParse(now)));
-            const isHourly = currentScaleFactor > 400;
-            if (this.isSelectedTimeHourly != isHourly)
-              this.isSelectedTimeHourly = isHourly;
+            this.checkSelectedTimeHourly();
           } else {
             d3.select(".line").attr("x", d3.event.x);
           }