Mercurial > gemma
annotate client/src/components/TimeSlider.vue @ 5090:70bd5c824639 time-sliding
client: distinguish time in refreshLayers requests during Time-slider enable/disable
* We have now two states:
Time-slider enabled: make requests for the selected time
Time-slider disables: make request with value "now"
* Reactivate Time-slider initiates request with the last chosen time value
before Time-slider was deactivated.
author | Fadi Abbud <fadi.abbud@intevation.de> |
---|---|
date | Mon, 23 Mar 2020 17:33:26 +0100 |
parents | fe63733750d7 |
children | f59ba73ff692 |
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); |
5090
70bd5c824639
client: distinguish time in refreshLayers requests during Time-slider enable/disable
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5085
diff
changeset
|
205 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
|
206 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
|
207 }, |
5085
fe63733750d7
client: correct refresh layers request time
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5084
diff
changeset
|
208 triggerMapReload() { |
fe63733750d7
client: correct refresh layers request time
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5084
diff
changeset
|
209 // 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
|
210 if (this.sourcesLoading) { |
fe63733750d7
client: correct refresh layers request time
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5084
diff
changeset
|
211 return; |
fe63733750d7
client: correct refresh layers request time
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5084
diff
changeset
|
212 } |
fe63733750d7
client: correct refresh layers request time
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5084
diff
changeset
|
213 this.$store.commit( |
fe63733750d7
client: correct refresh layers request time
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5084
diff
changeset
|
214 "application/setLayerRefreshedTime", |
fe63733750d7
client: correct refresh layers request time
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5084
diff
changeset
|
215 this.selectedTime |
fe63733750d7
client: correct refresh layers request time
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5084
diff
changeset
|
216 ); |
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.$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
|
218 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
|
219 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
|
220 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
|
221 }); |
c4ebb6ccc588
client: start a request for the last changed time on time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5080
diff
changeset
|
222 }, |
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
|
223 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
|
224 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
|
225 -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()(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
|
227 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
|
228 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
|
229 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
|
230 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
|
231 }, |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
232 createSlider() { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
233 const element = document.getElementById("sliderContainer"); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
234 const svgWidth = element ? element.clientWidth : 0, |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
235 svgHeight = 40, |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
236 marginTop = 20, |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
237 marginLeft = 0; |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
238 |
5044
ca5b1b5a553a
client: date localization for time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5043
diff
changeset
|
239 d3.timeFormatDefaultLocale(localeDateString); |
5061
37371727f704
client: improve time-slider code
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5060
diff
changeset
|
240 xScale = this.getScale(); |
37371727f704
client: improve time-slider code
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5060
diff
changeset
|
241 xAxis = this.getAxes(); |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
242 let svg = d3 |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
243 .select(".sliderContainer") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
244 .append("svg") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
245 .attr("width", svgWidth) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
246 .attr("height", svgHeight); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
247 |
5038
9d26f67dd916
client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5037
diff
changeset
|
248 zoom = d3 |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
249 .zoom() |
5041
abe9b75686ba
client: set wheeldelta to facilitate quick changes of zoomlevel
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5040
diff
changeset
|
250 .scaleExtent([0.8, 102000]) |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
251 .translateExtent([[0, 0], [svgWidth, svgHeight]]) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
252 .extent([[0, 0], [(svgWidth, svgHeight)]]) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
253 .on("zoom", this.zoomed); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
254 |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
255 svg |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
256 .append("g") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
257 .attr("class", "axis--x") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
258 .attr("transform", `translate(${marginLeft}, ${marginTop})`) |
5061
37371727f704
client: improve time-slider code
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5060
diff
changeset
|
259 .call(xAxis); |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
260 |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
261 // 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
|
262 const eventRect = svg |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
263 .append("rect") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
264 .attr("id", "zoom") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
265 .attr("class", "zoom") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
266 .attr("width", svgWidth) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
267 .attr("height", svgHeight) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
268 .attr("fill", "white") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
269 .attr("opacity", 0.2) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
270 .on("mouseover", () => { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
271 svg.select(".zoom").attr("cursor", "move"); |
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 eventRect.call(zoom).on("click", this.onClick); |
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 const toIsoDate = d => { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
276 return d.toISOString(); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
277 }; |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
278 |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
279 let drag = d3 |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
280 .drag() |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
281 .on("start", () => { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
282 d3.select(".line") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
283 .raise() |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
284 .classed("active", true); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
285 }) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
286 .on("drag", this.onDrag) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
287 .on("end", () => { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
288 d3.select(".line").classed("active", false); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
289 }); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
290 |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
291 // 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
|
292 svg |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
293 .append("rect") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
294 .attr("class", "line") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
295 .attr("id", "scrubber") |
5064
d87438a8c891
client: improve time-slider code
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5063
diff
changeset
|
296 .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
|
297 .attr("y", 0) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
298 .attr("width", 2) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
299 .attr("height", svgHeight) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
300 .attr("stroke", "#17a2b8") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
301 .attr("stroke-width", 2) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
302 .attr("opacity", 0.6) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
303 .on("mouseover", () => { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
304 svg.select(".line").attr("cursor", "e-resize"); |
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 .call(drag); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
307 }, |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
308 getScale() { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
309 return d3 |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
310 .scaleTime() |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
311 .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
|
312 .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
|
313 }, |
5043
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
314 getAxes() { |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
315 const axesFormat = date => { |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
316 return (d3.timeSecond(date) < date |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
317 ? d3.timeFormat(".%L") |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
318 : d3.timeMinute(date) < date |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
319 ? d3.timeFormat(":%S") |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
320 : d3.timeHour(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.timeDay(date) < date |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
323 ? d3.timeFormat("%H:%M") |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
324 : d3.timeMonth(date) < date |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
325 ? d3.timeWeek(date) < date |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
326 ? 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
|
327 : 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
|
328 : d3.timeYear(date) < date |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
329 ? d3.timeFormat("%B") |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
330 : d3.timeFormat("%Y"))(date); |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
331 }; |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
332 return d3 |
5064
d87438a8c891
client: improve time-slider code
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5063
diff
changeset
|
333 .axisBottom(xScale) |
5043
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
334 .ticks(12) |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
335 .tickFormat(axesFormat); |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
336 }, |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
337 zoomed() { |
5064
d87438a8c891
client: improve time-slider code
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5063
diff
changeset
|
338 let newX = d3.event.transform.rescaleX(xScale); |
5072
51b30f7c64a2
Timeslider proper rescale
Thomas Junk <thomas.junk@intevation.de>
parents:
5071
diff
changeset
|
339 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
|
340 const isHourly = currentScaleFactor > 400; |
5063
43bebcc8961f
client: set time according to zoom level.
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5062
diff
changeset
|
341 if (this.isSelectedTimeHourly != isHourly) |
43bebcc8961f
client: set time according to zoom level.
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5062
diff
changeset
|
342 this.isSelectedTimeHourly = isHourly; |
5064
d87438a8c891
client: improve time-slider code
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5063
diff
changeset
|
343 xAxis.scale(newX); |
5061
37371727f704
client: improve time-slider code
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5060
diff
changeset
|
344 d3.select(".axis--x").call(xAxis); |
5064
d87438a8c891
client: improve time-slider code
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5063
diff
changeset
|
345 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
|
346 }, |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
347 onClick() { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
348 // Extract the click location |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
349 let point = d3.mouse(document.getElementById("zoom")), |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
350 p = { x: point[0], y: point[1] }; |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
351 d3.select(".line").attr("x", p.x); |
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(p.x + 2)); |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
353 }, |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
354 onDrag() { |
5064
d87438a8c891
client: improve time-slider code
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5063
diff
changeset
|
355 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
|
356 d3.select(".line").attr("x", d3.event.x); |
5071
45d868476dea
timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents:
5070
diff
changeset
|
357 }, |
5072
51b30f7c64a2
Timeslider proper rescale
Thomas Junk <thomas.junk@intevation.de>
parents:
5071
diff
changeset
|
358 redrawTimeSlider() { |
5071
45d868476dea
timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents:
5070
diff
changeset
|
359 const bodyWidth = document.querySelector("body").clientWidth; |
45d868476dea
timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents:
5070
diff
changeset
|
360 const timeSelectionWidth = document.querySelector("#timeselection") |
45d868476dea
timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents:
5070
diff
changeset
|
361 .clientWidth; |
45d868476dea
timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents:
5070
diff
changeset
|
362 const closeButton = document.querySelector("#closebutton").clientWidth; |
45d868476dea
timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents:
5070
diff
changeset
|
363 const svgWidth = bodyWidth - timeSelectionWidth - closeButton; |
45d868476dea
timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents:
5070
diff
changeset
|
364 document |
45d868476dea
timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents:
5070
diff
changeset
|
365 .querySelector(".sliderContainer svg") |
45d868476dea
timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents:
5070
diff
changeset
|
366 .setAttribute("width", svgWidth); |
45d868476dea
timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents:
5070
diff
changeset
|
367 xScale.range([0, svgWidth]); |
45d868476dea
timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents:
5070
diff
changeset
|
368 xAxis.scale(xScale); |
45d868476dea
timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents:
5070
diff
changeset
|
369 d3.select(".axis--x").call(xAxis); |
45d868476dea
timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents:
5070
diff
changeset
|
370 d3.select(".line").attr( |
45d868476dea
timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents:
5070
diff
changeset
|
371 "x", |
45d868476dea
timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents:
5070
diff
changeset
|
372 xAxis.scale()(d3.isoParse(this.selectedTime)) |
45d868476dea
timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents:
5070
diff
changeset
|
373 ); |
5072
51b30f7c64a2
Timeslider proper rescale
Thomas Junk <thomas.junk@intevation.de>
parents:
5071
diff
changeset
|
374 this.rescaleSlider(currentScaleFactor); |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
375 } |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
376 }, |
5067
99ac62a56dd2
client: add window resize event listener
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5066
diff
changeset
|
377 created() { |
5072
51b30f7c64a2
Timeslider proper rescale
Thomas Junk <thomas.junk@intevation.de>
parents:
5071
diff
changeset
|
378 this.resizeListenerFunction = debounce(this.redrawTimeSlider, 100); |
5067
99ac62a56dd2
client: add window resize event listener
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5066
diff
changeset
|
379 window.addEventListener("resize", this.resizeListenerFunction); |
99ac62a56dd2
client: add window resize event listener
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5066
diff
changeset
|
380 }, |
5071
45d868476dea
timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents:
5070
diff
changeset
|
381 destroyed() { |
5067
99ac62a56dd2
client: add window resize event listener
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5066
diff
changeset
|
382 window.removeEventListener("resize", this.resizeListenerFunction); |
99ac62a56dd2
client: add window resize event listener
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5066
diff
changeset
|
383 }, |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
384 mounted() { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
385 setTimeout(this.createSlider, 150); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
386 } |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
387 }; |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
388 </script> |