Mercurial > gemma
changeset 5037:9d288d9b851b time-sliding
client: move selectedTime to store
| author | Fadi Abbud <fadi.abbud@intevation.de> |
|---|---|
| date | Thu, 27 Feb 2020 09:53:11 +0100 |
| parents | 8f421cd3c746 |
| children | 9d26f67dd916 |
| files | client/src/components/TimeSlider.vue client/src/store/application.js |
| diffstat | 2 files changed, 16 insertions(+), 9 deletions(-) [+] |
line wrap: on
line diff
--- 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() {
--- 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) => {