Mercurial > gemma

changeset 5046:b5e77c43fb8b time-sliding

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: add Time picker to the time-slider
author Fadi Abbud <fadi.abbud@intevation.de>
date Mon, 02 Mar 2020 13:41:57 +0100
parents a7cda81bf96f
children 644118078d50
files client/src/components/TimeSlider.vue
diffstat 1 files changed, 25 insertions(+), 5 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/TimeSlider.vue	Mon Mar 02 10:27:40 2020 +0100
+++ b/client/src/components/TimeSlider.vue	Mon Mar 02 13:41:57 2020 +0100
@@ -6,14 +6,21 @@
       { expanded: showTimeSlider }
     ]"
   >
-    <div class="d-flex m-1">
+    <div class="d-flex mt-1 mr-1">
       <input
-        class="form-control form-control-sm"
+        class="form-control-sm mr-1"
         type="date"
-        v-model="timeSelection"
+        v-model="dateSelection"
         min="2015-01-01"
         max="2020-03-01"
       />
+      <input
+        type="time"
+        min="00:00"
+        max="23:59"
+        v-model="timeSelection"
+        class="form-control-sm"
+      />
     </div>
     <div
       id="sliderContainer"
@@ -53,7 +60,7 @@
 import * as d3 from "d3";
 import app from "@/main";
 import { localeDateString } from "@/lib/datelocalization";
-import { format } from "date-fns";
+import { format, setHours, setMinutes } from "date-fns";
 
 let zoom = null;
 export default {
@@ -73,7 +80,7 @@
   computed: {
     ...mapState("application", ["showTimeSlider"]),
     ...mapState("map", ["ongoingRefresh"]),
-    timeSelection: {
+    dateSelection: {
       get() {
         const date = this.$store.state.application.selectedTime;
         return format(date, "YYYY-MM-DD");
@@ -84,6 +91,19 @@
         this.$nextTick(this.redrawSlider);
       }
     },
+    timeSelection: {
+      get() {
+        const time = this.$store.state.application.selectedTime;
+        return format(time, "HH:mm");
+      },
+      set(value) {
+        let date = this.selectedTime;
+        date = setHours(date, value.split(":")[0]);
+        date = setMinutes(date, value.split(":")[1]);
+        this.$store.commit("application/setSelectedTime", date);
+        this.$nextTick(this.redrawSlider);
+      }
+    },
     selectedTime: {
       get() {
         return this.$store.state.application.selectedTime;