Mercurial > gemma
annotate client/src/components/toolbar/TimeSlider.vue @ 5300:70fa8f8b0ab4
Added tag v5.3 for changeset 1beb407cf7d0
author | Sascha Wilde <wilde@intevation.de> |
---|---|
date | Wed, 11 Nov 2020 11:03:08 +0100 |
parents | 673f2a00c767 |
children | 84d01a536bec |
rev | line source |
---|---|
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
1 <template> |
5090
70bd5c824639
client: distinguish time in refreshLayers requests during Time-slider enable/disable
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5075
diff
changeset
|
2 <div @click="showSlider" class="toolbar-button" v-tooltip.right="label"> |
5039
aec0923f9c52
icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents:
5036
diff
changeset
|
3 <pre |
aec0923f9c52
icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents:
5036
diff
changeset
|
4 :class="[ |
aec0923f9c52
icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents:
5036
diff
changeset
|
5 'menuEntry', |
aec0923f9c52
icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents:
5036
diff
changeset
|
6 { |
aec0923f9c52
icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents:
5036
diff
changeset
|
7 'text-info': this.showTimeSlider |
aec0923f9c52
icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents:
5036
diff
changeset
|
8 } |
aec0923f9c52
icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents:
5036
diff
changeset
|
9 ]" |
aec0923f9c52
icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents:
5036
diff
changeset
|
10 >{{ currentTimeSelection }}</pre |
aec0923f9c52
icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents:
5036
diff
changeset
|
11 > |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
12 </div> |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
13 </template> |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
14 |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
15 <script> |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
16 /* This is Free Software under GNU Affero General Public License v >= 3.0 |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
17 * without warranty, see README.md and license for details. |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
18 * |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
19 * SPDX-License-Identifier: AGPL-3.0-or-later |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
20 * License-Filename: LICENSES/AGPL-3.0.txt |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
21 * |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
22 * Copyright (C) 2020 by via donau |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
23 * – Österreichische Wasserstraßen-Gesellschaft mbH |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
24 * Software engineering by Intevation GmbH |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
25 * |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
26 * Author(s): |
5157
673f2a00c767
add missing Author in Timeslider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5090
diff
changeset
|
27 * Fadi Abbud <fadi.abbud@intevation.de> |
673f2a00c767
add missing Author in Timeslider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5090
diff
changeset
|
28 * Thomas Junk <thomas.junk@intevation.de> |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
29 */ |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
30 import { mapState } from "vuex"; |
5039
aec0923f9c52
icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents:
5036
diff
changeset
|
31 import locale2 from "locale2"; |
aec0923f9c52
icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents:
5036
diff
changeset
|
32 import { format } from "date-fns"; |
aec0923f9c52
icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents:
5036
diff
changeset
|
33 |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
34 export default { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
35 computed: { |
5090
70bd5c824639
client: distinguish time in refreshLayers requests during Time-slider enable/disable
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5075
diff
changeset
|
36 ...mapState("application", [ |
70bd5c824639
client: distinguish time in refreshLayers requests during Time-slider enable/disable
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5075
diff
changeset
|
37 "showTimeSlider", |
70bd5c824639
client: distinguish time in refreshLayers requests during Time-slider enable/disable
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5075
diff
changeset
|
38 "currentVisibleTime", |
70bd5c824639
client: distinguish time in refreshLayers requests during Time-slider enable/disable
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5075
diff
changeset
|
39 "storedTime" |
70bd5c824639
client: distinguish time in refreshLayers requests during Time-slider enable/disable
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5075
diff
changeset
|
40 ]), |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
41 label() { |
5075
aeb100b4c41b
timeslider: prerequisites for time travel
Thomas Junk <thomas.junk@intevation.de>
parents:
5063
diff
changeset
|
42 const date = this.currentVisibleTime; |
aeb100b4c41b
timeslider: prerequisites for time travel
Thomas Junk <thomas.junk@intevation.de>
parents:
5063
diff
changeset
|
43 return `<b>${this.currentVisibleTime.toLocaleDateString(locale2, { |
5050
a970a1678b17
toolbar: smaller font for display of time in toolbar. Tooltip shows selected time
Thomas Junk <thomas.junk@intevation.de>
parents:
5049
diff
changeset
|
44 day: "2-digit", |
5051
72bf187cefc9
toolbar: use localized date
Thomas Junk <thomas.junk@intevation.de>
parents:
5050
diff
changeset
|
45 month: "2-digit", |
72bf187cefc9
toolbar: use localized date
Thomas Junk <thomas.junk@intevation.de>
parents:
5050
diff
changeset
|
46 year: "numeric" |
5052
89cd8937cc4b
toolbar: fix display of time
Thomas Junk <thomas.junk@intevation.de>
parents:
5051
diff
changeset
|
47 })} ${format(date, "HH:mm")}</b>`; |
5039
aec0923f9c52
icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents:
5036
diff
changeset
|
48 }, |
aec0923f9c52
icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents:
5036
diff
changeset
|
49 currentTimeSelection() { |
5075
aeb100b4c41b
timeslider: prerequisites for time travel
Thomas Junk <thomas.junk@intevation.de>
parents:
5063
diff
changeset
|
50 const date = this.currentVisibleTime; |
5050
a970a1678b17
toolbar: smaller font for display of time in toolbar. Tooltip shows selected time
Thomas Junk <thomas.junk@intevation.de>
parents:
5049
diff
changeset
|
51 const result = date.toLocaleDateString(locale2, { |
a970a1678b17
toolbar: smaller font for display of time in toolbar. Tooltip shows selected time
Thomas Junk <thomas.junk@intevation.de>
parents:
5049
diff
changeset
|
52 day: "2-digit", |
a970a1678b17
toolbar: smaller font for display of time in toolbar. Tooltip shows selected time
Thomas Junk <thomas.junk@intevation.de>
parents:
5049
diff
changeset
|
53 month: "2-digit" |
a970a1678b17
toolbar: smaller font for display of time in toolbar. Tooltip shows selected time
Thomas Junk <thomas.junk@intevation.de>
parents:
5049
diff
changeset
|
54 }); |
5063
43bebcc8961f
client: set time according to zoom level.
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5062
diff
changeset
|
55 return `${format(date, "HH:mm")}\n${result}\n${date.getFullYear()}`; |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
56 } |
5090
70bd5c824639
client: distinguish time in refreshLayers requests during Time-slider enable/disable
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5075
diff
changeset
|
57 }, |
70bd5c824639
client: distinguish time in refreshLayers requests during Time-slider enable/disable
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5075
diff
changeset
|
58 methods: { |
70bd5c824639
client: distinguish time in refreshLayers requests during Time-slider enable/disable
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5075
diff
changeset
|
59 showSlider() { |
70bd5c824639
client: distinguish time in refreshLayers requests during Time-slider enable/disable
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5075
diff
changeset
|
60 if (this.showTimeSlider) { |
70bd5c824639
client: distinguish time in refreshLayers requests during Time-slider enable/disable
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5075
diff
changeset
|
61 this.$store.commit( |
70bd5c824639
client: distinguish time in refreshLayers requests during Time-slider enable/disable
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5075
diff
changeset
|
62 "application/setStoredTime", |
70bd5c824639
client: distinguish time in refreshLayers requests during Time-slider enable/disable
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5075
diff
changeset
|
63 this.currentVisibleTime |
70bd5c824639
client: distinguish time in refreshLayers requests during Time-slider enable/disable
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5075
diff
changeset
|
64 ); |
70bd5c824639
client: distinguish time in refreshLayers requests during Time-slider enable/disable
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5075
diff
changeset
|
65 this.$store.commit("application/setSelectedTime", new Date()); |
70bd5c824639
client: distinguish time in refreshLayers requests during Time-slider enable/disable
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5075
diff
changeset
|
66 this.$store.commit("application/showTimeSlider", false); |
70bd5c824639
client: distinguish time in refreshLayers requests during Time-slider enable/disable
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5075
diff
changeset
|
67 } else { |
70bd5c824639
client: distinguish time in refreshLayers requests during Time-slider enable/disable
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5075
diff
changeset
|
68 this.$store.commit("application/setSelectedTime", this.storedTime); |
70bd5c824639
client: distinguish time in refreshLayers requests during Time-slider enable/disable
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5075
diff
changeset
|
69 this.$store.commit("application/showTimeSlider", true); |
70bd5c824639
client: distinguish time in refreshLayers requests during Time-slider enable/disable
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5075
diff
changeset
|
70 } |
70bd5c824639
client: distinguish time in refreshLayers requests during Time-slider enable/disable
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5075
diff
changeset
|
71 } |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
72 } |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
73 }; |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
74 </script> |
5039
aec0923f9c52
icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents:
5036
diff
changeset
|
75 <style lang="scss" scoped> |
aec0923f9c52
icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents:
5036
diff
changeset
|
76 .menuEntry { |
5053
8b39081fa3aa
toolbar: font for time display increased
Thomas Junk <thomas.junk@intevation.de>
parents:
5052
diff
changeset
|
77 font-size: 9px; |
5039
aec0923f9c52
icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents:
5036
diff
changeset
|
78 font-weight: bold; |
5042
28b260fdc303
client: reduce space between lines for the date info in toolbar
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5039
diff
changeset
|
79 line-height: normal; |
5039
aec0923f9c52
icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents:
5036
diff
changeset
|
80 } |
aec0923f9c52
icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents:
5036
diff
changeset
|
81 |
aec0923f9c52
icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents:
5036
diff
changeset
|
82 pre { |
aec0923f9c52
icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents:
5036
diff
changeset
|
83 margin-top: 0px; |
aec0923f9c52
icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents:
5036
diff
changeset
|
84 margin-bottom: 0px; |
aec0923f9c52
icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents:
5036
diff
changeset
|
85 text-align: left; |
5050
a970a1678b17
toolbar: smaller font for display of time in toolbar. Tooltip shows selected time
Thomas Junk <thomas.junk@intevation.de>
parents:
5049
diff
changeset
|
86 font-family: sans-serif; |
5039
aec0923f9c52
icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents:
5036
diff
changeset
|
87 } |
aec0923f9c52
icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents:
5036
diff
changeset
|
88 |
aec0923f9c52
icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents:
5036
diff
changeset
|
89 .toolbar-button { |
5042
28b260fdc303
client: reduce space between lines for the date info in toolbar
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5039
diff
changeset
|
90 height: 2.5rem; |
5047
644118078d50
client: (minor) fix size of time-slider for toolbar
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5042
diff
changeset
|
91 width: auto; |
5039
aec0923f9c52
icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents:
5036
diff
changeset
|
92 } |
aec0923f9c52
icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents:
5036
diff
changeset
|
93 </style> |