# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1585732747 -7200
# Node ID 21fe34ac74983ec68473112bb1bb9e9f256dd6e1
# Parent  004f41497f97a87134fcc8348c94dd7fc6f8bd39
timelider: greyout future

diff -r 004f41497f97 -r 21fe34ac7498 client/src/components/TimeSlider.vue
--- a/client/src/components/TimeSlider.vue	Wed Apr 01 11:10:39 2020 +0200
+++ b/client/src/components/TimeSlider.vue	Wed Apr 01 11:19:07 2020 +0200
@@ -146,6 +146,7 @@
         const [hours, minutes] = this.timeSelection.split(":");
         date = setHours(date, hours);
         date = setMinutes(date, minutes);
+        if (date > new Date()) return;
         this.$store.commit("application/setSelectedTime", date);
         this.rescaleSlider(50);
       }
@@ -160,6 +161,7 @@
         let date = this.selectedTime;
         date = setHours(date, value.split(":")[0]);
         date = setMinutes(date, value.split(":")[1]);
+        if (date > new Date()) return;
         this.$store.commit("application/setSelectedTime", date);
         this.rescaleSlider(800);
       }
@@ -283,8 +285,24 @@
         .on("drag", this.onDrag)
         .on("end", () => {
           d3.select(".line").classed("active", false);
+          const now = new Date();
+          if (this.selectedTime > now) this.selectedTime = now;
+          d3.select(".line").attr(
+            "x",
+            xAxis.scale()(d3.isoParse(this.selectedTime))
+          );
         });
 
+      svg
+        .append("rect")
+        .attr("class", "future")
+        .attr("x", xAxis.scale()(d3.isoParse(toIsoDate(new Date()))))
+        .attr("y", 0)
+        .attr("width", svgWidth)
+        .attr("height", svgHeight)
+        .attr("fill", "#333333")
+        .attr("opacity", 0.3);
+
       // Create cursor to indicate to the selected time
       svg
         .append("rect")
@@ -340,13 +358,20 @@
       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())));
     },
     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 newTime = d3.isoParse(xAxis.scale().invert(p.x + 2));
+      const now = new Date();
+      this.selectedTime = newTime > now ? now : newTime;
+      d3.select(".line").attr(
+        "x",
+        xAxis.scale()(d3.isoParse(this.selectedTime))
+      );
     },
     onDrag() {
       this.selectedTime = d3.isoParse(xAxis.scale().invert(d3.event.x + 2));