Mercurial > gemma
annotate client/src/components/TimeSlider.vue @ 5126:ee559cd0731f
Backed out changeset 67efc7e4df4b
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Fri, 27 Mar 2020 10:17:09 +0100 |
parents | 67efc7e4df4b |
children | 21fe34ac7498 |
rev | line source |
---|---|
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
1 <template> |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
2 <div |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
3 id="slider" |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
4 :class="[ |
5037
9d288d9b851b
client: move selectedTime to store
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5036
diff
changeset
|
5 'd-flex box ui-element rounded bg-white flex-row', |
5094
f59ba73ff692
client: better positioning for time-slider during window resizing and opened diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5090
diff
changeset
|
6 { expanded: showTimeSlider }, |
f59ba73ff692
client: better positioning for time-slider during window resizing and opened diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5090
diff
changeset
|
7 { |
f59ba73ff692
client: better positioning for time-slider during window resizing and opened diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5090
diff
changeset
|
8 reposition: ['DEFAULT', 'COMPARESURVEYS'].indexOf(this.paneSetup) === -1 |
f59ba73ff692
client: better positioning for time-slider during window resizing and opened diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5090
diff
changeset
|
9 } |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
10 ]" |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
11 > |
5071
45d868476dea
timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents:
5070
diff
changeset
|
12 <div id="timeselection" class="d-flex mt-1 mr-1"> |
5038
9d26f67dd916
client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5037
diff
changeset
|
13 <input |
5046
b5e77c43fb8b
client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5045
diff
changeset
|
14 class="form-control-sm mr-1" |
5038
9d26f67dd916
client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5037
diff
changeset
|
15 type="date" |
5046
b5e77c43fb8b
client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5045
diff
changeset
|
16 v-model="dateSelection" |
5039
aec0923f9c52
icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents:
5038
diff
changeset
|
17 min="2015-01-01" |
5048
700758d22737
client: (minor) adjust max value for input field
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5046
diff
changeset
|
18 :max="new Date().toISOString().split('T')[0]" |
5074
8ec4f1a0db86
client: remove clear button on date/time picker
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5072
diff
changeset
|
19 required |
5038
9d26f67dd916
client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5037
diff
changeset
|
20 /> |
5046
b5e77c43fb8b
client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5045
diff
changeset
|
21 <input |
b5e77c43fb8b
client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5045
diff
changeset
|
22 type="time" |
b5e77c43fb8b
client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5045
diff
changeset
|
23 min="00:00" |
b5e77c43fb8b
client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5045
diff
changeset
|
24 max="23:59" |
b5e77c43fb8b
client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5045
diff
changeset
|
25 v-model="timeSelection" |
b5e77c43fb8b
client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5045
diff
changeset
|
26 class="form-control-sm" |
5074
8ec4f1a0db86
client: remove clear button on date/time picker
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5072
diff
changeset
|
27 required |
5046
b5e77c43fb8b
client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5045
diff
changeset
|
28 /> |
5038
9d26f67dd916
client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5037
diff
changeset
|
29 </div> |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
30 <div |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
31 id="sliderContainer" |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
32 class="d-flex sliderContainer" |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
33 style="width: 98%;" |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
34 ></div> |
5071
45d868476dea
timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents:
5070
diff
changeset
|
35 <div |
45d868476dea
timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents:
5070
diff
changeset
|
36 id="closebutton" |
45d868476dea
timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents:
5070
diff
changeset
|
37 @click="close" |
45d868476dea
timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents:
5070
diff
changeset
|
38 class="d-flex box-control mr-0" |
45d868476dea
timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents:
5070
diff
changeset
|
39 style="width: 2%;" |
45d868476dea
timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents:
5070
diff
changeset
|
40 > |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
41 <font-awesome-icon icon="times"></font-awesome-icon> |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
42 </div> |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
43 </div> |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
44 </template> |
5071
45d868476dea
timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents:
5070
diff
changeset
|
45 <style lang="scss" scoped> |
45d868476dea
timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents:
5070
diff
changeset
|
46 #slider { |
45d868476dea
timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents:
5070
diff
changeset
|
47 position: absolute; |
45d868476dea
timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents:
5070
diff
changeset
|
48 bottom: 0; |
45d868476dea
timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents:
5070
diff
changeset
|
49 min-width: 100vw; |
45d868476dea
timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents:
5070
diff
changeset
|
50 } |
5094
f59ba73ff692
client: better positioning for time-slider during window resizing and opened diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5090
diff
changeset
|
51 // reposition time slider in case of opened diagram |
f59ba73ff692
client: better positioning for time-slider during window resizing and opened diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5090
diff
changeset
|
52 #slider.reposition { |
f59ba73ff692
client: better positioning for time-slider during window resizing and opened diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5090
diff
changeset
|
53 bottom: 50%; |
f59ba73ff692
client: better positioning for time-slider during window resizing and opened diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5090
diff
changeset
|
54 } |
5071
45d868476dea
timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents:
5070
diff
changeset
|
55 #slider.expanded { |
45d868476dea
timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents:
5070
diff
changeset
|
56 max-height: 100%; |
45d868476dea
timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents:
5070
diff
changeset
|
57 max-width: 100%; |
45d868476dea
timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents:
5070
diff
changeset
|
58 margin: 0; |
45d868476dea
timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents:
5070
diff
changeset
|
59 } |
5074
8ec4f1a0db86
client: remove clear button on date/time picker
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5072
diff
changeset
|
60 input::-webkit-clear-button { |
8ec4f1a0db86
client: remove clear button on date/time picker
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5072
diff
changeset
|
61 display: none; |
8ec4f1a0db86
client: remove clear button on date/time picker
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5072
diff
changeset
|
62 } |
8ec4f1a0db86
client: remove clear button on date/time picker
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5072
diff
changeset
|
63 // hide clear button on IE |
8ec4f1a0db86
client: remove clear button on date/time picker
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5072
diff
changeset
|
64 input::-ms-clear { |
8ec4f1a0db86
client: remove clear button on date/time picker
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5072
diff
changeset
|
65 display: none; |
8ec4f1a0db86
client: remove clear button on date/time picker
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5072
diff
changeset
|
66 } |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
67 </style> |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
68 <script> |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
69 /* 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
|
70 * 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
|
71 * |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
72 * 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
|
73 * License-Filename: LICENSES/AGPL-3.0.txt |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
74 * |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
75 * Copyright (C) 2020 by via donau |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
76 * – Österreichische Wasserstraßen-Gesellschaft mbH |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
77 * Software engineering by Intevation GmbH |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
78 * |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
79 * Author(s): |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
80 * Fadi Abbud <fadiabbud@intevation.de> |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
81 */ |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
82 import { mapState } from "vuex"; |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
83 import * as d3 from "d3"; |
5043
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
84 import app from "@/main"; |
5044
ca5b1b5a553a
client: date localization for time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5043
diff
changeset
|
85 import { localeDateString } from "@/lib/datelocalization"; |
5082
c4ebb6ccc588
client: start a request for the last changed time on time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5080
diff
changeset
|
86 import { format, setHours, setMinutes, compareAsc } from "date-fns"; |
5067
99ac62a56dd2
client: add window resize event listener
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5066
diff
changeset
|
87 import debounce from "debounce"; |
5043
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
88 |
5038
9d26f67dd916
client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5037
diff
changeset
|
89 let zoom = null; |
5061
37371727f704
client: improve time-slider code
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5060
diff
changeset
|
90 let xScale = null; |
37371727f704
client: improve time-slider code
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5060
diff
changeset
|
91 let xAxis = null; |
5072
51b30f7c64a2
Timeslider proper rescale
Thomas Junk <thomas.junk@intevation.de>
parents:
5071
diff
changeset
|
92 let currentScaleFactor = 1; |
5061
37371727f704
client: improve time-slider code
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5060
diff
changeset
|
93 |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
94 export default { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
95 name: "timeslider", |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
96 data() { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
97 return { |
5067
99ac62a56dd2
client: add window resize event listener
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5066
diff
changeset
|
98 isSelectedTimeHourly: false, |
99ac62a56dd2
client: add window resize event listener
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5066
diff
changeset
|
99 resizeListenerFunction: null |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
100 }; |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
101 }, |
5040
066b76ef5e6a
selected time is refreshed after reloads
Thomas Junk <thomas.junk@intevation.de>
parents:
5039
diff
changeset
|
102 watch: { |
066b76ef5e6a
selected time is refreshed after reloads
Thomas Junk <thomas.junk@intevation.de>
parents:
5039
diff
changeset
|
103 ongoingRefresh() { |
066b76ef5e6a
selected time is refreshed after reloads
Thomas Junk <thomas.junk@intevation.de>
parents:
5039
diff
changeset
|
104 if (this.ongoingRefresh) return; |
066b76ef5e6a
selected time is refreshed after reloads
Thomas Junk <thomas.junk@intevation.de>
parents:
5039
diff
changeset
|
105 this.$store.commit("application/setSelectedTime", new Date()); |
5065
385cb52d32ee
client: enhanced time-slider behavior on updating selected time after reloads
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5064
diff
changeset
|
106 this.$nextTick(this.rescaleSlider(1)); |
5075
aeb100b4c41b
timeslider: prerequisites for time travel
Thomas Junk <thomas.junk@intevation.de>
parents:
5074
diff
changeset
|
107 }, |
aeb100b4c41b
timeslider: prerequisites for time travel
Thomas Junk <thomas.junk@intevation.de>
parents:
5074
diff
changeset
|
108 ongoingTimeSlide() { |
aeb100b4c41b
timeslider: prerequisites for time travel
Thomas Junk <thomas.junk@intevation.de>
parents:
5074
diff
changeset
|
109 if (this.ongoingTimeSlide) return; |
aeb100b4c41b
timeslider: prerequisites for time travel
Thomas Junk <thomas.junk@intevation.de>
parents:
5074
diff
changeset
|
110 this.$store.commit( |
aeb100b4c41b
timeslider: prerequisites for time travel
Thomas Junk <thomas.junk@intevation.de>
parents:
5074
diff
changeset
|
111 "application/setCurrentVisibleTime", |
5085
fe63733750d7
client: correct refresh layers request time
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5084
diff
changeset
|
112 this.refreshLayersTime |
5075
aeb100b4c41b
timeslider: prerequisites for time travel
Thomas Junk <thomas.junk@intevation.de>
parents:
5074
diff
changeset
|
113 ); |
5080
faa1521e597b
client: Reload layers with value from time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5075
diff
changeset
|
114 }, |
faa1521e597b
client: Reload layers with value from time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5075
diff
changeset
|
115 selectedTime() { |
faa1521e597b
client: Reload layers with value from time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5075
diff
changeset
|
116 this.triggerMapReload(); |
5082
c4ebb6ccc588
client: start a request for the last changed time on time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5080
diff
changeset
|
117 }, |
c4ebb6ccc588
client: start a request for the last changed time on time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5080
diff
changeset
|
118 sourcesLoading() { |
c4ebb6ccc588
client: start a request for the last changed time on time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5080
diff
changeset
|
119 // initiate refresh layers request if the time for the finished request |
c4ebb6ccc588
client: start a request for the last changed time on time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5080
diff
changeset
|
120 // differs from the selected time on time slider |
c4ebb6ccc588
client: start a request for the last changed time on time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5080
diff
changeset
|
121 if (this.sourcesLoading !== 0) return; |
c4ebb6ccc588
client: start a request for the last changed time on time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5080
diff
changeset
|
122 if (compareAsc(this.selectedTime, this.currentVisibleTime) === 0) return; |
5085
fe63733750d7
client: correct refresh layers request time
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5084
diff
changeset
|
123 this.triggerMapReload(); |
5040
066b76ef5e6a
selected time is refreshed after reloads
Thomas Junk <thomas.junk@intevation.de>
parents:
5039
diff
changeset
|
124 } |
066b76ef5e6a
selected time is refreshed after reloads
Thomas Junk <thomas.junk@intevation.de>
parents:
5039
diff
changeset
|
125 }, |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
126 computed: { |
5080
faa1521e597b
client: Reload layers with value from time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5075
diff
changeset
|
127 ...mapState("application", [ |
faa1521e597b
client: Reload layers with value from time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5075
diff
changeset
|
128 "showTimeSlider", |
faa1521e597b
client: Reload layers with value from time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5075
diff
changeset
|
129 "paneSetup", |
5085
fe63733750d7
client: correct refresh layers request time
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5084
diff
changeset
|
130 "currentVisibleTime", |
fe63733750d7
client: correct refresh layers request time
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5084
diff
changeset
|
131 "refreshLayersTime" |
5080
faa1521e597b
client: Reload layers with value from time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5075
diff
changeset
|
132 ]), |
faa1521e597b
client: Reload layers with value from time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5075
diff
changeset
|
133 ...mapState("map", [ |
faa1521e597b
client: Reload layers with value from time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5075
diff
changeset
|
134 "ongoingRefresh", |
faa1521e597b
client: Reload layers with value from time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5075
diff
changeset
|
135 "ongoingTimeSlide", |
faa1521e597b
client: Reload layers with value from time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5075
diff
changeset
|
136 "openLayersMaps" |
faa1521e597b
client: Reload layers with value from time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5075
diff
changeset
|
137 ]), |
5046
b5e77c43fb8b
client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5045
diff
changeset
|
138 dateSelection: { |
5038
9d26f67dd916
client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5037
diff
changeset
|
139 get() { |
9d26f67dd916
client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5037
diff
changeset
|
140 const date = this.$store.state.application.selectedTime; |
5045
a7cda81bf96f
client: better formatting of time
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5044
diff
changeset
|
141 return format(date, "YYYY-MM-DD"); |
5038
9d26f67dd916
client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5037
diff
changeset
|
142 }, |
9d26f67dd916
client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5037
diff
changeset
|
143 set(value) { |
5057
abe3a70526a6
fix accidental deletion of current input
Thomas Junk <thomas.junk@intevation.de>
parents:
5056
diff
changeset
|
144 if (!value) return; |
5063
43bebcc8961f
client: set time according to zoom level.
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5062
diff
changeset
|
145 let date = new Date(value); |
43bebcc8961f
client: set time according to zoom level.
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5062
diff
changeset
|
146 const [hours, minutes] = this.timeSelection.split(":"); |
43bebcc8961f
client: set time according to zoom level.
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5062
diff
changeset
|
147 date = setHours(date, hours); |
43bebcc8961f
client: set time according to zoom level.
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5062
diff
changeset
|
148 date = setMinutes(date, minutes); |
5038
9d26f67dd916
client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5037
diff
changeset
|
149 this.$store.commit("application/setSelectedTime", date); |
5060
ed1d963017e7
client: improve behavior of time-slider during the use of date/time picker
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5058
diff
changeset
|
150 this.rescaleSlider(50); |
5038
9d26f67dd916
client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5037
diff
changeset
|
151 } |
9d26f67dd916
client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5037
diff
changeset
|
152 }, |
5046
b5e77c43fb8b
client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5045
diff
changeset
|
153 timeSelection: { |
b5e77c43fb8b
client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5045
diff
changeset
|
154 get() { |
b5e77c43fb8b
client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5045
diff
changeset
|
155 const time = this.$store.state.application.selectedTime; |
b5e77c43fb8b
client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5045
diff
changeset
|
156 return format(time, "HH:mm"); |
b5e77c43fb8b
client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5045
diff
changeset
|
157 }, |
b5e77c43fb8b
client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5045
diff
changeset
|
158 set(value) { |
5057
abe3a70526a6
fix accidental deletion of current input
Thomas Junk <thomas.junk@intevation.de>
parents:
5056
diff
changeset
|
159 if (!value) return; |
5046
b5e77c43fb8b
client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5045
diff
changeset
|
160 let date = this.selectedTime; |
b5e77c43fb8b
client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5045
diff
changeset
|
161 date = setHours(date, value.split(":")[0]); |
b5e77c43fb8b
client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5045
diff
changeset
|
162 date = setMinutes(date, value.split(":")[1]); |
b5e77c43fb8b
client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5045
diff
changeset
|
163 this.$store.commit("application/setSelectedTime", date); |
5060
ed1d963017e7
client: improve behavior of time-slider during the use of date/time picker
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5058
diff
changeset
|
164 this.rescaleSlider(800); |
5046
b5e77c43fb8b
client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5045
diff
changeset
|
165 } |
b5e77c43fb8b
client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5045
diff
changeset
|
166 }, |
5037
9d288d9b851b
client: move selectedTime to store
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5036
diff
changeset
|
167 selectedTime: { |
9d288d9b851b
client: move selectedTime to store
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5036
diff
changeset
|
168 get() { |
9d288d9b851b
client: move selectedTime to store
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5036
diff
changeset
|
169 return this.$store.state.application.selectedTime; |
9d288d9b851b
client: move selectedTime to store
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5036
diff
changeset
|
170 }, |
9d288d9b851b
client: move selectedTime to store
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5036
diff
changeset
|
171 set(value) { |
5063
43bebcc8961f
client: set time according to zoom level.
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5062
diff
changeset
|
172 if (!this.isSelectedTimeHourly) { |
43bebcc8961f
client: set time according to zoom level.
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5062
diff
changeset
|
173 value = setHours(value, 12); |
43bebcc8961f
client: set time according to zoom level.
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5062
diff
changeset
|
174 value = setMinutes(value, 0); |
43bebcc8961f
client: set time according to zoom level.
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5062
diff
changeset
|
175 } |
5037
9d288d9b851b
client: move selectedTime to store
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5036
diff
changeset
|
176 this.$store.commit("application/setSelectedTime", value); |
9d288d9b851b
client: move selectedTime to store
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5036
diff
changeset
|
177 } |
5080
faa1521e597b
client: Reload layers with value from time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5075
diff
changeset
|
178 }, |
faa1521e597b
client: Reload layers with value from time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5075
diff
changeset
|
179 sourcesLoading() { |
5084
2c3108152497
timeslider: only watch timebased layers
Thomas Junk <thomas.junk@intevation.de>
parents:
5083
diff
changeset
|
180 const layers = [ |
2c3108152497
timeslider: only watch timebased layers
Thomas Junk <thomas.junk@intevation.de>
parents:
5083
diff
changeset
|
181 "BOTTLENECKS", |
2c3108152497
timeslider: only watch timebased layers
Thomas Junk <thomas.junk@intevation.de>
parents:
5083
diff
changeset
|
182 "GAUGES", |
2c3108152497
timeslider: only watch timebased layers
Thomas Junk <thomas.junk@intevation.de>
parents:
5083
diff
changeset
|
183 "FAIRWAYDIMENSIONSLOS1", |
2c3108152497
timeslider: only watch timebased layers
Thomas Junk <thomas.junk@intevation.de>
parents:
5083
diff
changeset
|
184 "FAIRWAYDIMENSIONSLOS2", |
2c3108152497
timeslider: only watch timebased layers
Thomas Junk <thomas.junk@intevation.de>
parents:
5083
diff
changeset
|
185 "FAIRWAYDIMENSIONSLOS3", |
2c3108152497
timeslider: only watch timebased layers
Thomas Junk <thomas.junk@intevation.de>
parents:
5083
diff
changeset
|
186 "WATERWAYAXIS", |
2c3108152497
timeslider: only watch timebased layers
Thomas Junk <thomas.junk@intevation.de>
parents:
5083
diff
changeset
|
187 "FAIRWAYMARKS" |
2c3108152497
timeslider: only watch timebased layers
Thomas Junk <thomas.junk@intevation.de>
parents:
5083
diff
changeset
|
188 ]; |
5080
faa1521e597b
client: Reload layers with value from time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5075
diff
changeset
|
189 let counter = 0; |
faa1521e597b
client: Reload layers with value from time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5075
diff
changeset
|
190 this.openLayersMaps.forEach(map => { |
faa1521e597b
client: Reload layers with value from time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5075
diff
changeset
|
191 for (let i = 0; i < layers.length; i++) { |
5084
2c3108152497
timeslider: only watch timebased layers
Thomas Junk <thomas.junk@intevation.de>
parents:
5083
diff
changeset
|
192 let layer = map.getLayer(layers[i]); |
2c3108152497
timeslider: only watch timebased layers
Thomas Junk <thomas.junk@intevation.de>
parents:
5083
diff
changeset
|
193 if (layer.getSource().loading) counter++; |
5080
faa1521e597b
client: Reload layers with value from time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5075
diff
changeset
|
194 } |
faa1521e597b
client: Reload layers with value from time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5075
diff
changeset
|
195 }); |
faa1521e597b
client: Reload layers with value from time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5075
diff
changeset
|
196 return counter; |
5082
c4ebb6ccc588
client: start a request for the last changed time on time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5080
diff
changeset
|
197 } |
c4ebb6ccc588
client: start a request for the last changed time on time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5080
diff
changeset
|
198 }, |
c4ebb6ccc588
client: start a request for the last changed time on time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5080
diff
changeset
|
199 methods: { |
c4ebb6ccc588
client: start a request for the last changed time on time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5080
diff
changeset
|
200 close() { |
c4ebb6ccc588
client: start a request for the last changed time on time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5080
diff
changeset
|
201 this.$store.commit("application/showTimeSlider", false); |
5090
70bd5c824639
client: distinguish time in refreshLayers requests during Time-slider enable/disable
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5085
diff
changeset
|
202 this.$store.commit("application/setStoredTime", this.currentVisibleTime); |
70bd5c824639
client: distinguish time in refreshLayers requests during Time-slider enable/disable
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5085
diff
changeset
|
203 this.$store.commit("application/setSelectedTime", new Date()); |
5082
c4ebb6ccc588
client: start a request for the last changed time on time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5080
diff
changeset
|
204 }, |
5085
fe63733750d7
client: correct refresh layers request time
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5084
diff
changeset
|
205 triggerMapReload() { |
fe63733750d7
client: correct refresh layers request time
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5084
diff
changeset
|
206 // trigger refresh layers only when last loading of layers was ended |
fe63733750d7
client: correct refresh layers request time
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5084
diff
changeset
|
207 if (this.sourcesLoading) { |
fe63733750d7
client: correct refresh layers request time
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5084
diff
changeset
|
208 return; |
fe63733750d7
client: correct refresh layers request time
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5084
diff
changeset
|
209 } |
fe63733750d7
client: correct refresh layers request time
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5084
diff
changeset
|
210 this.$store.commit( |
fe63733750d7
client: correct refresh layers request time
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5084
diff
changeset
|
211 "application/setLayerRefreshedTime", |
fe63733750d7
client: correct refresh layers request time
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5084
diff
changeset
|
212 this.selectedTime |
fe63733750d7
client: correct refresh layers request time
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5084
diff
changeset
|
213 ); |
5082
c4ebb6ccc588
client: start a request for the last changed time on time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5080
diff
changeset
|
214 this.$store.commit("map/startTimeSlide"); |
5083
5ec30f63fd58
client: reload only the relevant layers with changed value on time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5082
diff
changeset
|
215 this.$store.dispatch("map/refreshTimebasedLayers"); |
5082
c4ebb6ccc588
client: start a request for the last changed time on time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5080
diff
changeset
|
216 this.$nextTick(() => { |
c4ebb6ccc588
client: start a request for the last changed time on time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5080
diff
changeset
|
217 this.$store.commit("map/finishTimeSlide"); |
c4ebb6ccc588
client: start a request for the last changed time on time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5080
diff
changeset
|
218 }); |
c4ebb6ccc588
client: start a request for the last changed time on time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5080
diff
changeset
|
219 }, |
5060
ed1d963017e7
client: improve behavior of time-slider during the use of date/time picker
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5058
diff
changeset
|
220 rescaleSlider(scaleFactor) { |
ed1d963017e7
client: improve behavior of time-slider during the use of date/time picker
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5058
diff
changeset
|
221 const tx = |
ed1d963017e7
client: improve behavior of time-slider during the use of date/time picker
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5058
diff
changeset
|
222 -scaleFactor * |
ed1d963017e7
client: improve behavior of time-slider during the use of date/time picker
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5058
diff
changeset
|
223 this.getScale()(d3.isoParse(this.selectedTime.toISOString())) + |
ed1d963017e7
client: improve behavior of time-slider during the use of date/time picker
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5058
diff
changeset
|
224 document.getElementById("sliderContainer").clientWidth / 2; |
ed1d963017e7
client: improve behavior of time-slider during the use of date/time picker
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5058
diff
changeset
|
225 var t = d3.zoomIdentity.translate(tx, 0).scale(scaleFactor); |
ed1d963017e7
client: improve behavior of time-slider during the use of date/time picker
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5058
diff
changeset
|
226 this.getScale().domain(t.rescaleX(this.getScale())); |
ed1d963017e7
client: improve behavior of time-slider during the use of date/time picker
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5058
diff
changeset
|
227 d3.select(".zoom").call(zoom.transform, t); |
ed1d963017e7
client: improve behavior of time-slider during the use of date/time picker
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5058
diff
changeset
|
228 }, |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
229 createSlider() { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
230 const element = document.getElementById("sliderContainer"); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
231 const svgWidth = element ? element.clientWidth : 0, |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
232 svgHeight = 40, |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
233 marginTop = 20, |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
234 marginLeft = 0; |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
235 |
5044
ca5b1b5a553a
client: date localization for time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5043
diff
changeset
|
236 d3.timeFormatDefaultLocale(localeDateString); |
5061
37371727f704
client: improve time-slider code
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5060
diff
changeset
|
237 xScale = this.getScale(); |
37371727f704
client: improve time-slider code
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5060
diff
changeset
|
238 xAxis = this.getAxes(); |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
239 let svg = d3 |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
240 .select(".sliderContainer") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
241 .append("svg") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
242 .attr("width", svgWidth) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
243 .attr("height", svgHeight); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
244 |
5038
9d26f67dd916
client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5037
diff
changeset
|
245 zoom = d3 |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
246 .zoom() |
5041
abe9b75686ba
client: set wheeldelta to facilitate quick changes of zoomlevel
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5040
diff
changeset
|
247 .scaleExtent([0.8, 102000]) |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
248 .translateExtent([[0, 0], [svgWidth, svgHeight]]) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
249 .extent([[0, 0], [(svgWidth, svgHeight)]]) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
250 .on("zoom", this.zoomed); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
251 |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
252 svg |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
253 .append("g") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
254 .attr("class", "axis--x") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
255 .attr("transform", `translate(${marginLeft}, ${marginTop})`) |
5061
37371727f704
client: improve time-slider code
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5060
diff
changeset
|
256 .call(xAxis); |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
257 |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
258 // create rectanlge on the slider area to capture mouse events |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
259 const eventRect = svg |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
260 .append("rect") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
261 .attr("id", "zoom") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
262 .attr("class", "zoom") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
263 .attr("width", svgWidth) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
264 .attr("height", svgHeight) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
265 .attr("fill", "white") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
266 .attr("opacity", 0.2) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
267 .on("mouseover", () => { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
268 svg.select(".zoom").attr("cursor", "move"); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
269 }); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
270 eventRect.call(zoom).on("click", this.onClick); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
271 |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
272 const toIsoDate = d => { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
273 return d.toISOString(); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
274 }; |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
275 |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
276 let drag = d3 |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
277 .drag() |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
278 .on("start", () => { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
279 d3.select(".line") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
280 .raise() |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
281 .classed("active", true); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
282 }) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
283 .on("drag", this.onDrag) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
284 .on("end", () => { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
285 d3.select(".line").classed("active", false); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
286 }); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
287 |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
288 // Create cursor to indicate to the selected time |
5126
ee559cd0731f
Backed out changeset 67efc7e4df4b
Thomas Junk <thomas.junk@intevation.de>
parents:
5125
diff
changeset
|
289 svg |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
290 .append("rect") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
291 .attr("class", "line") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
292 .attr("id", "scrubber") |
5064
d87438a8c891
client: improve time-slider code
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5063
diff
changeset
|
293 .attr("x", xAxis.scale()(d3.isoParse(toIsoDate(this.selectedTime)))) |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
294 .attr("y", 0) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
295 .attr("width", 2) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
296 .attr("height", svgHeight) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
297 .attr("stroke", "#17a2b8") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
298 .attr("stroke-width", 2) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
299 .attr("opacity", 0.6) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
300 .on("mouseover", () => { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
301 svg.select(".line").attr("cursor", "e-resize"); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
302 }) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
303 .call(drag); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
304 }, |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
305 getScale() { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
306 return d3 |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
307 .scaleTime() |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
308 .range([0, document.getElementById("sliderContainer").clientWidth || 0]) |
5039
aec0923f9c52
icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents:
5038
diff
changeset
|
309 .domain([d3.isoParse(new Date("2015-01-01")), d3.isoParse(new Date())]); |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
310 }, |
5043
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
311 getAxes() { |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
312 const axesFormat = date => { |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
313 return (d3.timeSecond(date) < date |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
314 ? d3.timeFormat(".%L") |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
315 : d3.timeMinute(date) < date |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
316 ? d3.timeFormat(":%S") |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
317 : d3.timeHour(date) < date |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
318 ? d3.timeFormat("%H:%M") |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
319 : d3.timeDay(date) < date |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
320 ? d3.timeFormat("%H:%M") |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
321 : d3.timeMonth(date) < date |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
322 ? d3.timeWeek(date) < date |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
323 ? d3.timeFormat(app.$gettext("%a %d")) |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
324 : d3.timeFormat(app.$gettext("%b %d")) |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
325 : d3.timeYear(date) < date |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
326 ? d3.timeFormat("%B") |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
327 : d3.timeFormat("%Y"))(date); |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
328 }; |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
329 return d3 |
5064
d87438a8c891
client: improve time-slider code
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5063
diff
changeset
|
330 .axisBottom(xScale) |
5043
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
331 .ticks(12) |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
332 .tickFormat(axesFormat); |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
333 }, |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
334 zoomed() { |
5064
d87438a8c891
client: improve time-slider code
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5063
diff
changeset
|
335 let newX = d3.event.transform.rescaleX(xScale); |
5072
51b30f7c64a2
Timeslider proper rescale
Thomas Junk <thomas.junk@intevation.de>
parents:
5071
diff
changeset
|
336 currentScaleFactor = d3.event.transform.k; |
5062
da28a58eb10d
client: correct showing of time in toolbar according to zoom level(selected time)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5061
diff
changeset
|
337 const isHourly = currentScaleFactor > 400; |
5063
43bebcc8961f
client: set time according to zoom level.
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5062
diff
changeset
|
338 if (this.isSelectedTimeHourly != isHourly) |
43bebcc8961f
client: set time according to zoom level.
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5062
diff
changeset
|
339 this.isSelectedTimeHourly = isHourly; |
5064
d87438a8c891
client: improve time-slider code
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5063
diff
changeset
|
340 xAxis.scale(newX); |
5061
37371727f704
client: improve time-slider code
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5060
diff
changeset
|
341 d3.select(".axis--x").call(xAxis); |
5064
d87438a8c891
client: improve time-slider code
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5063
diff
changeset
|
342 d3.select(".line").attr("x", newX(d3.isoParse(this.selectedTime))); |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
343 }, |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
344 onClick() { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
345 // Extract the click location |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
346 let point = d3.mouse(document.getElementById("zoom")), |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
347 p = { x: point[0], y: point[1] }; |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
348 d3.select(".line").attr("x", p.x); |
5064
d87438a8c891
client: improve time-slider code
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5063
diff
changeset
|
349 this.selectedTime = d3.isoParse(xAxis.scale().invert(p.x + 2)); |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
350 }, |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
351 onDrag() { |
5064
d87438a8c891
client: improve time-slider code
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5063
diff
changeset
|
352 this.selectedTime = d3.isoParse(xAxis.scale().invert(d3.event.x + 2)); |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
353 d3.select(".line").attr("x", d3.event.x); |
5071
45d868476dea
timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents:
5070
diff
changeset
|
354 }, |
5072
51b30f7c64a2
Timeslider proper rescale
Thomas Junk <thomas.junk@intevation.de>
parents:
5071
diff
changeset
|
355 redrawTimeSlider() { |
5071
45d868476dea
timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents:
5070
diff
changeset
|
356 const bodyWidth = document.querySelector("body").clientWidth; |
45d868476dea
timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents:
5070
diff
changeset
|
357 const timeSelectionWidth = document.querySelector("#timeselection") |
45d868476dea
timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents:
5070
diff
changeset
|
358 .clientWidth; |
45d868476dea
timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents:
5070
diff
changeset
|
359 const closeButton = document.querySelector("#closebutton").clientWidth; |
45d868476dea
timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents:
5070
diff
changeset
|
360 const svgWidth = bodyWidth - timeSelectionWidth - closeButton; |
45d868476dea
timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents:
5070
diff
changeset
|
361 document |
45d868476dea
timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents:
5070
diff
changeset
|
362 .querySelector(".sliderContainer svg") |
45d868476dea
timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents:
5070
diff
changeset
|
363 .setAttribute("width", svgWidth); |
45d868476dea
timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents:
5070
diff
changeset
|
364 xScale.range([0, svgWidth]); |
45d868476dea
timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents:
5070
diff
changeset
|
365 xAxis.scale(xScale); |
45d868476dea
timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents:
5070
diff
changeset
|
366 d3.select(".axis--x").call(xAxis); |
45d868476dea
timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents:
5070
diff
changeset
|
367 d3.select(".line").attr( |
45d868476dea
timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents:
5070
diff
changeset
|
368 "x", |
45d868476dea
timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents:
5070
diff
changeset
|
369 xAxis.scale()(d3.isoParse(this.selectedTime)) |
45d868476dea
timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents:
5070
diff
changeset
|
370 ); |
5072
51b30f7c64a2
Timeslider proper rescale
Thomas Junk <thomas.junk@intevation.de>
parents:
5071
diff
changeset
|
371 this.rescaleSlider(currentScaleFactor); |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
372 } |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
373 }, |
5067
99ac62a56dd2
client: add window resize event listener
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5066
diff
changeset
|
374 created() { |
5072
51b30f7c64a2
Timeslider proper rescale
Thomas Junk <thomas.junk@intevation.de>
parents:
5071
diff
changeset
|
375 this.resizeListenerFunction = debounce(this.redrawTimeSlider, 100); |
5067
99ac62a56dd2
client: add window resize event listener
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5066
diff
changeset
|
376 window.addEventListener("resize", this.resizeListenerFunction); |
99ac62a56dd2
client: add window resize event listener
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5066
diff
changeset
|
377 }, |
5071
45d868476dea
timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents:
5070
diff
changeset
|
378 destroyed() { |
5067
99ac62a56dd2
client: add window resize event listener
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5066
diff
changeset
|
379 window.removeEventListener("resize", this.resizeListenerFunction); |
99ac62a56dd2
client: add window resize event listener
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5066
diff
changeset
|
380 }, |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
381 mounted() { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
382 setTimeout(this.createSlider, 150); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
383 } |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
384 }; |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
385 </script> |