# HG changeset patch
# User Fadi Abbud <fadi.abbud@intevation.de>
# Date 1582793591 -3600
# Node ID 9d288d9b851b5c55425bd04a03e76e7eb6245e78
# Parent  8f421cd3c74656eac87c4f0808cf6288da86c7eb
client: move selectedTime to store

diff -r 8f421cd3c746 -r 9d288d9b851b client/src/components/TimeSlider.vue
--- a/client/src/components/TimeSlider.vue	Thu Feb 27 09:18:17 2020 +0100
+++ b/client/src/components/TimeSlider.vue	Thu Feb 27 09:53:11 2020 +0100
@@ -2,8 +2,8 @@
   <div
     id="slider"
     :class="[
-      'd-flex box ui-element rounded bg-white mw-100 flex-row',
-      { expand: showTimeSlider }
+      'd-flex box ui-element rounded bg-white flex-row',
+      { expanded: showTimeSlider }
     ]"
   >
     <div
@@ -16,12 +16,12 @@
     </div>
   </div>
 </template>
-<style lang="sass">
+<style lang="sass" scoped>
 #slider
   position: absolute
   bottom: 0
-  width: 100%
-  &.expand
+  min-width: 100vw;
+  &.expanded
     max-height: 100%;
     max-width: 100%;
     margin: 0
@@ -46,12 +46,19 @@
   name: "timeslider",
   data() {
     return {
-      selectedTime: new Date("2020-01-04"),
       newX: null
     };
   },
   computed: {
-    ...mapState("application", ["showTimeSlider"])
+    ...mapState("application", ["showTimeSlider"]),
+    selectedTime: {
+      get() {
+        return this.$store.state.application.selectedTime;
+      },
+      set(value) {
+        this.$store.commit("application/setSelectedTime", value);
+      }
+    }
   },
   methods: {
     close() {
diff -r 8f421cd3c746 -r 9d288d9b851b client/src/store/application.js
--- a/client/src/store/application.js	Thu Feb 27 09:18:17 2020 +0100
+++ b/client/src/store/application.js	Thu Feb 27 09:53:11 2020 +0100
@@ -46,7 +46,7 @@
     expandToolbar: true,
     countries: ["AT", "SK", "HU", "HR", "RS", "BG", "RO"],
     searchQuery: "",
-    selectedTime: "2020-01-04",
+    selectedTime: new Date("2020-01-04"),
     version,
     tempRoute: "",
     config: {}
@@ -95,7 +95,7 @@
         if (state.paneRotate === 5) state.paneRotate = 1;
       }
     },
-    setselectedTime: (state, time) => {
+    setSelectedTime: (state, time) => {
       state.selectedTime = time;
     },
     showTimeSlider: (state, show) => {