# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1582882158 -3600
# Node ID aec0923f9c520de2016bb59997e50ee642797425
# Parent  9d26f67dd91605f2f9638b65f0ea2b886d088941
icon shows now date and time

diff -r 9d26f67dd916 -r aec0923f9c52 client/src/components/TimeSlider.vue
--- a/client/src/components/TimeSlider.vue	Thu Feb 27 17:55:31 2020 +0100
+++ b/client/src/components/TimeSlider.vue	Fri Feb 28 10:29:18 2020 +0100
@@ -8,9 +8,10 @@
   >
     <div class="d-flex m-1">
       <input
+        class="form-control form-control-sm"
         type="date"
         v-model="timeSelection"
-        min="2020-01-01"
+        min="2015-01-01"
         max="2020-03-01"
       />
     </div>
@@ -175,10 +176,7 @@
       return d3
         .scaleTime()
         .range([0, document.getElementById("sliderContainer").clientWidth || 0])
-        .domain([
-          d3.isoParse(new Date("2020-01-01")),
-          d3.isoParse(new Date("2020-03-01"))
-        ]);
+        .domain([d3.isoParse(new Date("2015-01-01")), d3.isoParse(new Date())]);
     },
     zoomed() {
       let scale = this.getScale();
diff -r 9d26f67dd916 -r aec0923f9c52 client/src/components/toolbar/TimeSlider.vue
--- a/client/src/components/toolbar/TimeSlider.vue	Thu Feb 27 17:55:31 2020 +0100
+++ b/client/src/components/toolbar/TimeSlider.vue	Fri Feb 28 10:29:18 2020 +0100
@@ -4,7 +4,15 @@
     class="toolbar-button"
     v-tooltip.right="label"
   >
-    <font-awesome-icon icon="clock" :class="{ 'text-info': showTimeSlider }" />
+    <pre
+      :class="[
+        'menuEntry',
+        {
+          'text-info': this.showTimeSlider
+        }
+      ]"
+      >{{ currentTimeSelection }}</pre
+    >
   </div>
 </template>
 
@@ -23,13 +31,42 @@
  * Fadi Abbud <fadiabbud@intevation.de>
  */
 import { mapState } from "vuex";
+import locale2 from "locale2";
+import { format } from "date-fns";
+
+const formatDate = date => {
+  const result = date.toLocaleDateString(locale2, {
+    day: "2-digit",
+    month: "2-digit"
+  });
+  return `${format(date, "hh:mm")}\n${result}\n${date.getFullYear()}`;
+};
 
 export default {
   computed: {
-    ...mapState("application", ["showTimeSlider"]),
+    ...mapState("application", ["showTimeSlider", "selectedTime"]),
     label() {
       return this.$gettext("Time slider");
+    },
+    currentTimeSelection() {
+      return formatDate(this.selectedTime);
     }
   }
 };
 </script>
+<style lang="scss" scoped>
+.menuEntry {
+  font-size: 9px;
+  font-weight: bold;
+}
+
+pre {
+  margin-top: 0px;
+  margin-bottom: 0px;
+  text-align: left;
+}
+
+.toolbar-button {
+  height: 3rem;
+}
+</style>