# HG changeset patch
# User Fadi Abbud <fadi.abbud@intevation.de>
# Date 1582822531 -3600
# Node ID 9d26f67dd91605f2f9638b65f0ea2b886d088941
# Parent  9d288d9b851b5c55425bd04a03e76e7eb6245e78
client: add date picker to the time-slider

diff -r 9d288d9b851b -r 9d26f67dd916 client/src/components/TimeSlider.vue
--- a/client/src/components/TimeSlider.vue	Thu Feb 27 09:53:11 2020 +0100
+++ b/client/src/components/TimeSlider.vue	Thu Feb 27 17:55:31 2020 +0100
@@ -6,6 +6,14 @@
       { expanded: showTimeSlider }
     ]"
   >
+    <div class="d-flex m-1">
+      <input
+        type="date"
+        v-model="timeSelection"
+        min="2020-01-01"
+        max="2020-03-01"
+      />
+    </div>
     <div
       id="sliderContainer"
       class="d-flex sliderContainer"
@@ -42,6 +50,7 @@
  */
 import { mapState } from "vuex";
 import * as d3 from "d3";
+let zoom = null;
 export default {
   name: "timeslider",
   data() {
@@ -51,6 +60,25 @@
   },
   computed: {
     ...mapState("application", ["showTimeSlider"]),
+    timeSelection: {
+      get() {
+        const date = this.$store.state.application.selectedTime;
+        return date.toISOString().split("T")[0];
+      },
+      set(value) {
+        const date = new Date(value);
+        this.$store.commit("application/setSelectedTime", date);
+        this.$nextTick(() => {
+          this.createSlider();
+          // redraw the time slider and move to right selected time
+          zoom.translateTo(
+            d3.select(".line"),
+            this.newX(d3.isoParse(this.selectedTime.toISOString())),
+            1
+          );
+        });
+      }
+    },
     selectedTime: {
       get() {
         return this.$store.state.application.selectedTime;
@@ -72,6 +100,7 @@
         marginLeft = 0;
 
       this.newX = this.getScale();
+      d3.select(".sliderContainer svg").remove();
       let svg = d3
         .select(".sliderContainer")
         .append("svg")
@@ -79,7 +108,7 @@
         .attr("height", svgHeight);
 
       // zoom event
-      let zoom = d3
+      zoom = d3
         .zoom()
         .scaleExtent([0, Infinity])
         .translateExtent([[0, 0], [svgWidth, svgHeight]])