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