Mercurial > gemma

annotate client/src/components/TimeSlider.vue @ 5560:f2204f91d286

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Join the log lines of imports to the log exports to recover data from them. Used in SR export to extract information that where in the meta json but now are only found in the log.
author Sascha L. Teichmann <sascha.teichmann@intevation.de>
date Wed, 09 Feb 2022 18:34:40 +0100
parents de86a96d55c3
children 84d01a536bec
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
5036
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
1 <template>
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
2 <div
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
3 id="slider"
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
4 :class="[
5037
9d288d9b851b client: move selectedTime to store
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5036
diff changeset
5 'd-flex box ui-element rounded bg-white flex-row',
5094
f59ba73ff692 client: better positioning for time-slider during window resizing and opened diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5090
diff changeset
6 { expanded: showTimeSlider },
f59ba73ff692 client: better positioning for time-slider during window resizing and opened diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5090
diff changeset
7 {
f59ba73ff692 client: better positioning for time-slider during window resizing and opened diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5090
diff changeset
8 reposition: ['DEFAULT', 'COMPARESURVEYS'].indexOf(this.paneSetup) === -1
f59ba73ff692 client: better positioning for time-slider during window resizing and opened diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5090
diff changeset
9 }
5036
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
10 ]"
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
11 >
5071
45d868476dea timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents: 5070
diff changeset
12 <div id="timeselection" class="d-flex mt-1 mr-1">
5038
9d26f67dd916 client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5037
diff changeset
13 <input
5046
b5e77c43fb8b client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5045
diff changeset
14 class="form-control-sm mr-1"
5038
9d26f67dd916 client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5037
diff changeset
15 type="date"
5046
b5e77c43fb8b client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5045
diff changeset
16 v-model="dateSelection"
5039
aec0923f9c52 icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents: 5038
diff changeset
17 min="2015-01-01"
5048
700758d22737 client: (minor) adjust max value for input field
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5046
diff changeset
18 :max="new Date().toISOString().split('T')[0]"
5074
8ec4f1a0db86 client: remove clear button on date/time picker
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5072
diff changeset
19 required
5038
9d26f67dd916 client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5037
diff changeset
20 />
5046
b5e77c43fb8b client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5045
diff changeset
21 <input
b5e77c43fb8b client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5045
diff changeset
22 type="time"
b5e77c43fb8b client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5045
diff changeset
23 min="00:00"
b5e77c43fb8b client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5045
diff changeset
24 max="23:59"
b5e77c43fb8b client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5045
diff changeset
25 v-model="timeSelection"
b5e77c43fb8b client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5045
diff changeset
26 class="form-control-sm"
5074
8ec4f1a0db86 client: remove clear button on date/time picker
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5072
diff changeset
27 required
5046
b5e77c43fb8b client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5045
diff changeset
28 />
5038
9d26f67dd916 client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5037
diff changeset
29 </div>
5036
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
30 <div
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
31 id="sliderContainer"
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
32 class="d-flex sliderContainer"
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
33 style="width: 98%;"
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
34 ></div>
5071
45d868476dea timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents: 5070
diff changeset
35 <div
45d868476dea timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents: 5070
diff changeset
36 id="closebutton"
45d868476dea timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents: 5070
diff changeset
37 @click="close"
45d868476dea timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents: 5070
diff changeset
38 class="d-flex box-control mr-0"
45d868476dea timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents: 5070
diff changeset
39 style="width: 2%;"
45d868476dea timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents: 5070
diff changeset
40 >
5036
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
41 <font-awesome-icon icon="times"></font-awesome-icon>
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
42 </div>
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
43 </div>
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
44 </template>
5071
45d868476dea timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents: 5070
diff changeset
45 <style lang="scss" scoped>
45d868476dea timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents: 5070
diff changeset
46 #slider {
45d868476dea timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents: 5070
diff changeset
47 position: absolute;
45d868476dea timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents: 5070
diff changeset
48 bottom: 0;
45d868476dea timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents: 5070
diff changeset
49 min-width: 100vw;
45d868476dea timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents: 5070
diff changeset
50 }
5094
f59ba73ff692 client: better positioning for time-slider during window resizing and opened diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5090
diff changeset
51 // reposition time slider in case of opened diagram
f59ba73ff692 client: better positioning for time-slider during window resizing and opened diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5090
diff changeset
52 #slider.reposition {
f59ba73ff692 client: better positioning for time-slider during window resizing and opened diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5090
diff changeset
53 bottom: 50%;
f59ba73ff692 client: better positioning for time-slider during window resizing and opened diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5090
diff changeset
54 }
5071
45d868476dea timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents: 5070
diff changeset
55 #slider.expanded {
45d868476dea timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents: 5070
diff changeset
56 max-height: 100%;
45d868476dea timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents: 5070
diff changeset
57 max-width: 100%;
45d868476dea timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents: 5070
diff changeset
58 margin: 0;
45d868476dea timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents: 5070
diff changeset
59 }
5074
8ec4f1a0db86 client: remove clear button on date/time picker
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5072
diff changeset
60 input::-webkit-clear-button {
8ec4f1a0db86 client: remove clear button on date/time picker
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5072
diff changeset
61 display: none;
8ec4f1a0db86 client: remove clear button on date/time picker
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5072
diff changeset
62 }
8ec4f1a0db86 client: remove clear button on date/time picker
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5072
diff changeset
63 // hide clear button on IE
8ec4f1a0db86 client: remove clear button on date/time picker
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5072
diff changeset
64 input::-ms-clear {
8ec4f1a0db86 client: remove clear button on date/time picker
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5072
diff changeset
65 display: none;
8ec4f1a0db86 client: remove clear button on date/time picker
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5072
diff changeset
66 }
5036
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
67 </style>
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
68 <script>
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
69 /* This is Free Software under GNU Affero General Public License v >= 3.0
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
70 * without warranty, see README.md and license for details.
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
71 *
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
72 * SPDX-License-Identifier: AGPL-3.0-or-later
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
73 * License-Filename: LICENSES/AGPL-3.0.txt
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
74 *
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
75 * Copyright (C) 2020 by via donau
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
76 * – Österreichische Wasserstraßen-Gesellschaft mbH
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
77 * Software engineering by Intevation GmbH
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
78 *
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
79 * Author(s):
5157
673f2a00c767 add missing Author in Timeslider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5150
diff changeset
80 * Fadi Abbud <fadi.abbud@intevation.de>
673f2a00c767 add missing Author in Timeslider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5150
diff changeset
81 * Thomas Junk <thomas.junk@intevation.de>
5036
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
82 */
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
83 import { mapState } from "vuex";
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
84 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
85 import app from "@/main";
5044
ca5b1b5a553a client: date localization for time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5043
diff changeset
86 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
87 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
88 import debounce from "debounce";
5043
bae2548dc484 client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5041
diff changeset
89
5038
9d26f67dd916 client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5037
diff changeset
90 let zoom = null;
5061
37371727f704 client: improve time-slider code
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5060
diff changeset
91 let xScale = null;
37371727f704 client: improve time-slider code
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5060
diff changeset
92 let xAxis = null;
5072
51b30f7c64a2 Timeslider proper rescale
Thomas Junk <thomas.junk@intevation.de>
parents: 5071
diff changeset
93 let currentScaleFactor = 1;
5061
37371727f704 client: improve time-slider code
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5060
diff changeset
94
5036
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
95 export default {
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
96 name: "timeslider",
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
97 data() {
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
98 return {
5067
99ac62a56dd2 client: add window resize event listener
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5066
diff changeset
99 isSelectedTimeHourly: false,
99ac62a56dd2 client: add window resize event listener
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5066
diff changeset
100 resizeListenerFunction: null
5036
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
101 };
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
102 },
5040
066b76ef5e6a selected time is refreshed after reloads
Thomas Junk <thomas.junk@intevation.de>
parents: 5039
diff changeset
103 watch: {
066b76ef5e6a selected time is refreshed after reloads
Thomas Junk <thomas.junk@intevation.de>
parents: 5039
diff changeset
104 ongoingRefresh() {
066b76ef5e6a selected time is refreshed after reloads
Thomas Junk <thomas.junk@intevation.de>
parents: 5039
diff changeset
105 if (this.ongoingRefresh) return;
066b76ef5e6a selected time is refreshed after reloads
Thomas Junk <thomas.junk@intevation.de>
parents: 5039
diff changeset
106 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
107 this.$nextTick(this.rescaleSlider(1));
5075
aeb100b4c41b timeslider: prerequisites for time travel
Thomas Junk <thomas.junk@intevation.de>
parents: 5074
diff changeset
108 },
aeb100b4c41b timeslider: prerequisites for time travel
Thomas Junk <thomas.junk@intevation.de>
parents: 5074
diff changeset
109 ongoingTimeSlide() {
aeb100b4c41b timeslider: prerequisites for time travel
Thomas Junk <thomas.junk@intevation.de>
parents: 5074
diff changeset
110 if (this.ongoingTimeSlide) return;
aeb100b4c41b timeslider: prerequisites for time travel
Thomas Junk <thomas.junk@intevation.de>
parents: 5074
diff changeset
111 this.$store.commit(
aeb100b4c41b timeslider: prerequisites for time travel
Thomas Junk <thomas.junk@intevation.de>
parents: 5074
diff changeset
112 "application/setCurrentVisibleTime",
5085
fe63733750d7 client: correct refresh layers request time
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5084
diff changeset
113 this.refreshLayersTime
5075
aeb100b4c41b timeslider: prerequisites for time travel
Thomas Junk <thomas.junk@intevation.de>
parents: 5074
diff changeset
114 );
5080
faa1521e597b client: Reload layers with value from time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5075
diff changeset
115 },
faa1521e597b client: Reload layers with value from time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5075
diff changeset
116 selectedTime() {
faa1521e597b client: Reload layers with value from time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5075
diff changeset
117 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
118 },
c4ebb6ccc588 client: start a request for the last changed time on time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5080
diff changeset
119 sourcesLoading() {
c4ebb6ccc588 client: start a request for the last changed time on time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5080
diff changeset
120 // 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
121 // 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
122 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
123 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
124 this.triggerMapReload();
5040
066b76ef5e6a selected time is refreshed after reloads
Thomas Junk <thomas.junk@intevation.de>
parents: 5039
diff changeset
125 }
066b76ef5e6a selected time is refreshed after reloads
Thomas Junk <thomas.junk@intevation.de>
parents: 5039
diff changeset
126 },
5036
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
127 computed: {
5080
faa1521e597b client: Reload layers with value from time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5075
diff changeset
128 ...mapState("application", [
faa1521e597b client: Reload layers with value from time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5075
diff changeset
129 "showTimeSlider",
faa1521e597b client: Reload layers with value from time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5075
diff changeset
130 "paneSetup",
5085
fe63733750d7 client: correct refresh layers request time
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5084
diff changeset
131 "currentVisibleTime",
fe63733750d7 client: correct refresh layers request time
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5084
diff changeset
132 "refreshLayersTime"
5080
faa1521e597b client: Reload layers with value from time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5075
diff changeset
133 ]),
faa1521e597b client: Reload layers with value from time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5075
diff changeset
134 ...mapState("map", [
faa1521e597b client: Reload layers with value from time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5075
diff changeset
135 "ongoingRefresh",
faa1521e597b client: Reload layers with value from time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5075
diff changeset
136 "ongoingTimeSlide",
faa1521e597b client: Reload layers with value from time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5075
diff changeset
137 "openLayersMaps"
faa1521e597b client: Reload layers with value from time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5075
diff changeset
138 ]),
5046
b5e77c43fb8b client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5045
diff changeset
139 dateSelection: {
5038
9d26f67dd916 client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5037
diff changeset
140 get() {
9d26f67dd916 client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5037
diff changeset
141 const date = this.$store.state.application.selectedTime;
5045
a7cda81bf96f client: better formatting of time
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5044
diff changeset
142 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
143 },
9d26f67dd916 client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5037
diff changeset
144 set(value) {
5057
abe3a70526a6 fix accidental deletion of current input
Thomas Junk <thomas.junk@intevation.de>
parents: 5056
diff changeset
145 if (!value) return;
5063
43bebcc8961f client: set time according to zoom level.
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5062
diff changeset
146 let date = new Date(value);
43bebcc8961f client: set time according to zoom level.
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5062
diff changeset
147 const [hours, minutes] = this.timeSelection.split(":");
43bebcc8961f client: set time according to zoom level.
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5062
diff changeset
148 date = setHours(date, hours);
43bebcc8961f client: set time according to zoom level.
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5062
diff changeset
149 date = setMinutes(date, minutes);
5163
745c7d8aadbe timeslider: prevent manual selection of future dates
Thomas Junk <thomas.junk@intevation.de>
parents: 5162
diff changeset
150 const now = new Date();
745c7d8aadbe timeslider: prevent manual selection of future dates
Thomas Junk <thomas.junk@intevation.de>
parents: 5162
diff changeset
151 if (date > now) {
745c7d8aadbe timeslider: prevent manual selection of future dates
Thomas Junk <thomas.junk@intevation.de>
parents: 5162
diff changeset
152 date = now;
745c7d8aadbe timeslider: prevent manual selection of future dates
Thomas Junk <thomas.junk@intevation.de>
parents: 5162
diff changeset
153 }
5038
9d26f67dd916 client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5037
diff changeset
154 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
155 this.rescaleSlider(50);
5038
9d26f67dd916 client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5037
diff changeset
156 }
9d26f67dd916 client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5037
diff changeset
157 },
5046
b5e77c43fb8b client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5045
diff changeset
158 timeSelection: {
b5e77c43fb8b client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5045
diff changeset
159 get() {
b5e77c43fb8b client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5045
diff changeset
160 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
161 return format(time, "HH:mm");
b5e77c43fb8b client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5045
diff changeset
162 },
b5e77c43fb8b client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5045
diff changeset
163 set(value) {
5057
abe3a70526a6 fix accidental deletion of current input
Thomas Junk <thomas.junk@intevation.de>
parents: 5056
diff changeset
164 if (!value) return;
5046
b5e77c43fb8b client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5045
diff changeset
165 let date = this.selectedTime;
b5e77c43fb8b client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5045
diff changeset
166 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
167 date = setMinutes(date, value.split(":")[1]);
5163
745c7d8aadbe timeslider: prevent manual selection of future dates
Thomas Junk <thomas.junk@intevation.de>
parents: 5162
diff changeset
168 const now = new Date();
745c7d8aadbe timeslider: prevent manual selection of future dates
Thomas Junk <thomas.junk@intevation.de>
parents: 5162
diff changeset
169 if (date > now) {
745c7d8aadbe timeslider: prevent manual selection of future dates
Thomas Junk <thomas.junk@intevation.de>
parents: 5162
diff changeset
170 date = now;
745c7d8aadbe timeslider: prevent manual selection of future dates
Thomas Junk <thomas.junk@intevation.de>
parents: 5162
diff changeset
171 }
5046
b5e77c43fb8b client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5045
diff changeset
172 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
173 this.rescaleSlider(800);
5046
b5e77c43fb8b client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5045
diff changeset
174 }
b5e77c43fb8b client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5045
diff changeset
175 },
5037
9d288d9b851b client: move selectedTime to store
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5036
diff changeset
176 selectedTime: {
9d288d9b851b client: move selectedTime to store
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5036
diff changeset
177 get() {
9d288d9b851b client: move selectedTime to store
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5036
diff changeset
178 return this.$store.state.application.selectedTime;
9d288d9b851b client: move selectedTime to store
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5036
diff changeset
179 },
9d288d9b851b client: move selectedTime to store
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5036
diff changeset
180 set(value) {
5063
43bebcc8961f client: set time according to zoom level.
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5062
diff changeset
181 if (!this.isSelectedTimeHourly) {
43bebcc8961f client: set time according to zoom level.
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5062
diff changeset
182 value = setHours(value, 12);
43bebcc8961f client: set time according to zoom level.
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5062
diff changeset
183 value = setMinutes(value, 0);
43bebcc8961f client: set time according to zoom level.
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5062
diff changeset
184 }
5037
9d288d9b851b client: move selectedTime to store
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5036
diff changeset
185 this.$store.commit("application/setSelectedTime", value);
9d288d9b851b client: move selectedTime to store
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5036
diff changeset
186 }
5080
faa1521e597b client: Reload layers with value from time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5075
diff changeset
187 },
faa1521e597b client: Reload layers with value from time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5075
diff changeset
188 sourcesLoading() {
5084
2c3108152497 timeslider: only watch timebased layers
Thomas Junk <thomas.junk@intevation.de>
parents: 5083
diff changeset
189 const layers = [
2c3108152497 timeslider: only watch timebased layers
Thomas Junk <thomas.junk@intevation.de>
parents: 5083
diff changeset
190 "BOTTLENECKS",
2c3108152497 timeslider: only watch timebased layers
Thomas Junk <thomas.junk@intevation.de>
parents: 5083
diff changeset
191 "GAUGES",
2c3108152497 timeslider: only watch timebased layers
Thomas Junk <thomas.junk@intevation.de>
parents: 5083
diff changeset
192 "FAIRWAYDIMENSIONSLOS1",
2c3108152497 timeslider: only watch timebased layers
Thomas Junk <thomas.junk@intevation.de>
parents: 5083
diff changeset
193 "FAIRWAYDIMENSIONSLOS2",
2c3108152497 timeslider: only watch timebased layers
Thomas Junk <thomas.junk@intevation.de>
parents: 5083
diff changeset
194 "FAIRWAYDIMENSIONSLOS3",
2c3108152497 timeslider: only watch timebased layers
Thomas Junk <thomas.junk@intevation.de>
parents: 5083
diff changeset
195 "WATERWAYAXIS",
2c3108152497 timeslider: only watch timebased layers
Thomas Junk <thomas.junk@intevation.de>
parents: 5083
diff changeset
196 "FAIRWAYMARKS"
2c3108152497 timeslider: only watch timebased layers
Thomas Junk <thomas.junk@intevation.de>
parents: 5083
diff changeset
197 ];
5080
faa1521e597b client: Reload layers with value from time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5075
diff changeset
198 let counter = 0;
faa1521e597b client: Reload layers with value from time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5075
diff changeset
199 this.openLayersMaps.forEach(map => {
faa1521e597b client: Reload layers with value from time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5075
diff changeset
200 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
201 let layer = map.getLayer(layers[i]);
2c3108152497 timeslider: only watch timebased layers
Thomas Junk <thomas.junk@intevation.de>
parents: 5083
diff changeset
202 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
203 }
faa1521e597b client: Reload layers with value from time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5075
diff changeset
204 });
faa1521e597b client: Reload layers with value from time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5075
diff changeset
205 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
206 }
c4ebb6ccc588 client: start a request for the last changed time on time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5080
diff changeset
207 },
c4ebb6ccc588 client: start a request for the last changed time on time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5080
diff changeset
208 methods: {
c4ebb6ccc588 client: start a request for the last changed time on time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5080
diff changeset
209 close() {
c4ebb6ccc588 client: start a request for the last changed time on time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5080
diff changeset
210 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
211 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
212 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
213 },
5085
fe63733750d7 client: correct refresh layers request time
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5084
diff changeset
214 triggerMapReload() {
fe63733750d7 client: correct refresh layers request time
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5084
diff changeset
215 // 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
216 if (this.sourcesLoading) {
fe63733750d7 client: correct refresh layers request time
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5084
diff changeset
217 return;
fe63733750d7 client: correct refresh layers request time
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5084
diff changeset
218 }
fe63733750d7 client: correct refresh layers request time
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5084
diff changeset
219 this.$store.commit(
fe63733750d7 client: correct refresh layers request time
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5084
diff changeset
220 "application/setLayerRefreshedTime",
fe63733750d7 client: correct refresh layers request time
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5084
diff changeset
221 this.selectedTime
fe63733750d7 client: correct refresh layers request time
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5084
diff changeset
222 );
5082
c4ebb6ccc588 client: start a request for the last changed time on time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5080
diff changeset
223 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
224 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
225 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
226 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
227 });
c4ebb6ccc588 client: start a request for the last changed time on time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5080
diff changeset
228 },
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
229 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
230 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
231 -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
232 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
233 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
234 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
235 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
236 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
237 },
5036
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
238 createSlider() {
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
239 const element = document.getElementById("sliderContainer");
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
240 const svgWidth = element ? element.clientWidth : 0,
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
241 svgHeight = 40,
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
242 marginTop = 20,
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
243 marginLeft = 0;
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
244
5044
ca5b1b5a553a client: date localization for time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5043
diff changeset
245 d3.timeFormatDefaultLocale(localeDateString);
5160
c86ce16937fd client: Refactor code to let zoom works on the cursor
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5157
diff changeset
246 const toIsoDate = d => {
c86ce16937fd client: Refactor code to let zoom works on the cursor
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5157
diff changeset
247 return d.toISOString();
c86ce16937fd client: Refactor code to let zoom works on the cursor
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5157
diff changeset
248 };
5061
37371727f704 client: improve time-slider code
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5060
diff changeset
249 xScale = this.getScale();
37371727f704 client: improve time-slider code
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5060
diff changeset
250 xAxis = this.getAxes();
5036
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
251 let svg = d3
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
252 .select(".sliderContainer")
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
253 .append("svg")
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
254 .attr("width", svgWidth)
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
255 .attr("height", svgHeight);
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
256
5038
9d26f67dd916 client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5037
diff changeset
257 zoom = d3
5036
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
258 .zoom()
5041
abe9b75686ba client: set wheeldelta to facilitate quick changes of zoomlevel
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5040
diff changeset
259 .scaleExtent([0.8, 102000])
5219
Thomas Junk <thomas.junk@intevation.de>
parents: 5167
diff changeset
260 .translateExtent([
Thomas Junk <thomas.junk@intevation.de>
parents: 5167
diff changeset
261 [0, 0],
Thomas Junk <thomas.junk@intevation.de>
parents: 5167
diff changeset
262 [svgWidth, svgHeight]
Thomas Junk <thomas.junk@intevation.de>
parents: 5167
diff changeset
263 ])
5036
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
264 .extent([[0, 0], [(svgWidth, svgHeight)]])
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
265 .on("zoom", this.zoomed);
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
266
5160
c86ce16937fd client: Refactor code to let zoom works on the cursor
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5157
diff changeset
267 const drag = d3
5036
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
268 .drag()
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
269 .on("start", () => {
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
270 d3.select(".line")
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
271 .raise()
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
272 .classed("active", true);
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
273 })
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
274 .on("drag", this.onDrag)
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
275 .on("end", () => {
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
276 d3.select(".line").classed("active", false);
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
277 });
5160
c86ce16937fd client: Refactor code to let zoom works on the cursor
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5157
diff changeset
278 const main = svg
c86ce16937fd client: Refactor code to let zoom works on the cursor
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5157
diff changeset
279 .append("g")
c86ce16937fd client: Refactor code to let zoom works on the cursor
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5157
diff changeset
280 .attr("id", "zoom")
c86ce16937fd client: Refactor code to let zoom works on the cursor
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5157
diff changeset
281 .attr("class", "zoom")
c86ce16937fd client: Refactor code to let zoom works on the cursor
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5157
diff changeset
282 .attr("width", svgWidth)
c86ce16937fd client: Refactor code to let zoom works on the cursor
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5157
diff changeset
283 .attr("height", svgHeight)
c86ce16937fd client: Refactor code to let zoom works on the cursor
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5157
diff changeset
284 .on("mouseover", () => {
c86ce16937fd client: Refactor code to let zoom works on the cursor
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5157
diff changeset
285 svg.select(".zoom").attr("cursor", "move");
c86ce16937fd client: Refactor code to let zoom works on the cursor
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5157
diff changeset
286 });
c86ce16937fd client: Refactor code to let zoom works on the cursor
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5157
diff changeset
287
c86ce16937fd client: Refactor code to let zoom works on the cursor
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5157
diff changeset
288 main
c86ce16937fd client: Refactor code to let zoom works on the cursor
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5157
diff changeset
289 .append("rect")
c86ce16937fd client: Refactor code to let zoom works on the cursor
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5157
diff changeset
290 .attr("class", "main")
c86ce16937fd client: Refactor code to let zoom works on the cursor
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5157
diff changeset
291 .attr("width", svgWidth)
c86ce16937fd client: Refactor code to let zoom works on the cursor
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5157
diff changeset
292 .attr("height", svgHeight)
c86ce16937fd client: Refactor code to let zoom works on the cursor
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5157
diff changeset
293 .attr("opacity", 0)
c86ce16937fd client: Refactor code to let zoom works on the cursor
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5157
diff changeset
294 .on("mouseover", () => {
c86ce16937fd client: Refactor code to let zoom works on the cursor
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5157
diff changeset
295 svg.select(".main").attr("cursor", "move");
c86ce16937fd client: Refactor code to let zoom works on the cursor
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5157
diff changeset
296 });
c86ce16937fd client: Refactor code to let zoom works on the cursor
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5157
diff changeset
297
c86ce16937fd client: Refactor code to let zoom works on the cursor
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5157
diff changeset
298 main
c86ce16937fd client: Refactor code to let zoom works on the cursor
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5157
diff changeset
299 .append("g")
c86ce16937fd client: Refactor code to let zoom works on the cursor
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5157
diff changeset
300 .attr("class", "axis--x")
c86ce16937fd client: Refactor code to let zoom works on the cursor
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5157
diff changeset
301 .attr("id", "zoom")
c86ce16937fd client: Refactor code to let zoom works on the cursor
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5157
diff changeset
302 .attr("transform", `translate(${marginLeft}, ${marginTop})`)
c86ce16937fd client: Refactor code to let zoom works on the cursor
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5157
diff changeset
303 .call(xAxis);
c86ce16937fd client: Refactor code to let zoom works on the cursor
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5157
diff changeset
304
5149
21fe34ac7498 timelider: greyout future
Thomas Junk <thomas.junk@intevation.de>
parents: 5126
diff changeset
305 svg
21fe34ac7498 timelider: greyout future
Thomas Junk <thomas.junk@intevation.de>
parents: 5126
diff changeset
306 .append("rect")
21fe34ac7498 timelider: greyout future
Thomas Junk <thomas.junk@intevation.de>
parents: 5126
diff changeset
307 .attr("class", "future")
21fe34ac7498 timelider: greyout future
Thomas Junk <thomas.junk@intevation.de>
parents: 5126
diff changeset
308 .attr("x", xAxis.scale()(d3.isoParse(toIsoDate(new Date()))))
21fe34ac7498 timelider: greyout future
Thomas Junk <thomas.junk@intevation.de>
parents: 5126
diff changeset
309 .attr("y", 0)
21fe34ac7498 timelider: greyout future
Thomas Junk <thomas.junk@intevation.de>
parents: 5126
diff changeset
310 .attr("width", svgWidth)
21fe34ac7498 timelider: greyout future
Thomas Junk <thomas.junk@intevation.de>
parents: 5126
diff changeset
311 .attr("height", svgHeight)
21fe34ac7498 timelider: greyout future
Thomas Junk <thomas.junk@intevation.de>
parents: 5126
diff changeset
312 .attr("fill", "#333333")
21fe34ac7498 timelider: greyout future
Thomas Junk <thomas.junk@intevation.de>
parents: 5126
diff changeset
313 .attr("opacity", 0.3);
21fe34ac7498 timelider: greyout future
Thomas Junk <thomas.junk@intevation.de>
parents: 5126
diff changeset
314
5036
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
315 // Create cursor to indicate to the selected time
5160
c86ce16937fd client: Refactor code to let zoom works on the cursor
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5157
diff changeset
316 main
5036
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
317 .append("rect")
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
318 .attr("class", "line")
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
319 .attr("id", "scrubber")
5064
d87438a8c891 client: improve time-slider code
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5063
diff changeset
320 .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
321 .attr("y", 0)
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
322 .attr("width", 2)
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
323 .attr("height", svgHeight)
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
324 .attr("stroke", "#17a2b8")
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
325 .attr("stroke-width", 2)
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
326 .attr("opacity", 0.6)
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
327 .on("mouseover", () => {
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
328 svg.select(".line").attr("cursor", "e-resize");
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
329 })
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
330 .call(drag);
5160
c86ce16937fd client: Refactor code to let zoom works on the cursor
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5157
diff changeset
331
c86ce16937fd client: Refactor code to let zoom works on the cursor
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5157
diff changeset
332 main.call(zoom).on("click", this.onClick);
5036
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
333 },
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
334 getScale() {
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
335 return d3
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
336 .scaleTime()
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
337 .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
338 .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
339 },
5043
bae2548dc484 client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5041
diff changeset
340 getAxes() {
bae2548dc484 client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5041
diff changeset
341 const axesFormat = date => {
bae2548dc484 client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5041
diff changeset
342 return (d3.timeSecond(date) < date
bae2548dc484 client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5041
diff changeset
343 ? d3.timeFormat(".%L")
bae2548dc484 client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5041
diff changeset
344 : d3.timeMinute(date) < date
bae2548dc484 client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5041
diff changeset
345 ? d3.timeFormat(":%S")
bae2548dc484 client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5041
diff changeset
346 : d3.timeHour(date) < date
bae2548dc484 client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5041
diff changeset
347 ? d3.timeFormat("%H:%M")
bae2548dc484 client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5041
diff changeset
348 : d3.timeDay(date) < date
bae2548dc484 client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5041
diff changeset
349 ? d3.timeFormat("%H:%M")
bae2548dc484 client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5041
diff changeset
350 : d3.timeMonth(date) < date
bae2548dc484 client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5041
diff changeset
351 ? d3.timeWeek(date) < date
bae2548dc484 client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5041
diff changeset
352 ? 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
353 : 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
354 : d3.timeYear(date) < date
bae2548dc484 client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5041
diff changeset
355 ? d3.timeFormat("%B")
bae2548dc484 client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5041
diff changeset
356 : d3.timeFormat("%Y"))(date);
bae2548dc484 client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5041
diff changeset
357 };
bae2548dc484 client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5041
diff changeset
358 return d3
5064
d87438a8c891 client: improve time-slider code
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5063
diff changeset
359 .axisBottom(xScale)
5043
bae2548dc484 client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5041
diff changeset
360 .ticks(12)
bae2548dc484 client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5041
diff changeset
361 .tickFormat(axesFormat);
bae2548dc484 client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5041
diff changeset
362 },
5036
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
363 zoomed() {
5064
d87438a8c891 client: improve time-slider code
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5063
diff changeset
364 let newX = d3.event.transform.rescaleX(xScale);
5072
51b30f7c64a2 Timeslider proper rescale
Thomas Junk <thomas.junk@intevation.de>
parents: 5071
diff changeset
365 currentScaleFactor = d3.event.transform.k;
5167
a5fd84c4f2fe timeslider: avoid moving cursor to future area (click event)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5166
diff changeset
366 this.checkSelectedTimeHourly();
5064
d87438a8c891 client: improve time-slider code
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5063
diff changeset
367 xAxis.scale(newX);
5061
37371727f704 client: improve time-slider code
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5060
diff changeset
368 d3.select(".axis--x").call(xAxis);
5064
d87438a8c891 client: improve time-slider code
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5063
diff changeset
369 d3.select(".line").attr("x", newX(d3.isoParse(this.selectedTime)));
5149
21fe34ac7498 timelider: greyout future
Thomas Junk <thomas.junk@intevation.de>
parents: 5126
diff changeset
370 d3.select(".future").attr("x", newX(d3.isoParse(new Date())));
5036
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
371 },
5167
a5fd84c4f2fe timeslider: avoid moving cursor to future area (click event)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5166
diff changeset
372 checkSelectedTimeHourly() {
a5fd84c4f2fe timeslider: avoid moving cursor to future area (click event)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5166
diff changeset
373 const isHourly = currentScaleFactor > 400;
a5fd84c4f2fe timeslider: avoid moving cursor to future area (click event)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5166
diff changeset
374 if (this.isSelectedTimeHourly != isHourly)
a5fd84c4f2fe timeslider: avoid moving cursor to future area (click event)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5166
diff changeset
375 this.isSelectedTimeHourly = isHourly;
a5fd84c4f2fe timeslider: avoid moving cursor to future area (click event)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5166
diff changeset
376 },
5036
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
377 onClick() {
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
378 // Extract the click location
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
379 let point = d3.mouse(document.getElementById("zoom")),
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
380 p = { x: point[0], y: point[1] };
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
381 d3.select(".line").attr("x", p.x);
5167
a5fd84c4f2fe timeslider: avoid moving cursor to future area (click event)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5166
diff changeset
382 const xTime = d3.isoParse(xAxis.scale().invert(p.x + 2)).toDateString();
a5fd84c4f2fe timeslider: avoid moving cursor to future area (click event)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5166
diff changeset
383 const now = new Date();
a5fd84c4f2fe timeslider: avoid moving cursor to future area (click event)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5166
diff changeset
384 // Avoid moving the cursor to future area if the "now" value is earlier than 12:00
a5fd84c4f2fe timeslider: avoid moving cursor to future area (click event)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5166
diff changeset
385 if (
a5fd84c4f2fe timeslider: avoid moving cursor to future area (click event)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5166
diff changeset
386 xTime === now.toDateString() &&
a5fd84c4f2fe timeslider: avoid moving cursor to future area (click event)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5166
diff changeset
387 !this.isSelectedTimeHourly &&
a5fd84c4f2fe timeslider: avoid moving cursor to future area (click event)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5166
diff changeset
388 now.getHours() < 12
a5fd84c4f2fe timeslider: avoid moving cursor to future area (click event)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5166
diff changeset
389 ) {
a5fd84c4f2fe timeslider: avoid moving cursor to future area (click event)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5166
diff changeset
390 this.isSelectedTimeHourly = true;
a5fd84c4f2fe timeslider: avoid moving cursor to future area (click event)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5166
diff changeset
391 this.selectedTime = d3.isoParse(new Date());
a5fd84c4f2fe timeslider: avoid moving cursor to future area (click event)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5166
diff changeset
392 } else {
a5fd84c4f2fe timeslider: avoid moving cursor to future area (click event)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5166
diff changeset
393 this.selectedTime = d3.isoParse(xAxis.scale().invert(p.x + 2));
a5fd84c4f2fe timeslider: avoid moving cursor to future area (click event)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5166
diff changeset
394 }
a5fd84c4f2fe timeslider: avoid moving cursor to future area (click event)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5166
diff changeset
395 this.checkSelectedTimeHourly();
5036
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
396 },
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
397 onDrag() {
5064
d87438a8c891 client: improve time-slider code
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5063
diff changeset
398 this.selectedTime = d3.isoParse(xAxis.scale().invert(d3.event.x + 2));
5162
eb4683befb39 timeslider: prevent selecting future dates while dragging
Thomas Junk <thomas.junk@intevation.de>
parents: 5161
diff changeset
399 const now = new Date();
5165
78086edb682a timeslider: prevent dragging outside the time-slider(right margin)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5164
diff changeset
400 const startTimeOnSlider = d3.isoParse(xAxis.scale().invert(0));
78086edb682a timeslider: prevent dragging outside the time-slider(right margin)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5164
diff changeset
401 const endTimeOnSlider = d3.isoParse(
78086edb682a timeslider: prevent dragging outside the time-slider(right margin)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5164
diff changeset
402 xAxis.scale().invert(xScale.range()[1])
78086edb682a timeslider: prevent dragging outside the time-slider(right margin)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5164
diff changeset
403 );
78086edb682a timeslider: prevent dragging outside the time-slider(right margin)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5164
diff changeset
404 // Prevent dragging outside the visible area on slider
78086edb682a timeslider: prevent dragging outside the time-slider(right margin)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5164
diff changeset
405 if (endTimeOnSlider < this.selectedTime) {
78086edb682a timeslider: prevent dragging outside the time-slider(right margin)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5164
diff changeset
406 this.selectedTime = endTimeOnSlider;
78086edb682a timeslider: prevent dragging outside the time-slider(right margin)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5164
diff changeset
407 d3.select(".line").attr(
78086edb682a timeslider: prevent dragging outside the time-slider(right margin)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5164
diff changeset
408 "x",
78086edb682a timeslider: prevent dragging outside the time-slider(right margin)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5164
diff changeset
409 xAxis.scale()(d3.isoParse(endTimeOnSlider))
78086edb682a timeslider: prevent dragging outside the time-slider(right margin)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5164
diff changeset
410 );
5162
eb4683befb39 timeslider: prevent selecting future dates while dragging
Thomas Junk <thomas.junk@intevation.de>
parents: 5161
diff changeset
411 } else {
5165
78086edb682a timeslider: prevent dragging outside the time-slider(right margin)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5164
diff changeset
412 if (startTimeOnSlider > this.selectedTime) {
78086edb682a timeslider: prevent dragging outside the time-slider(right margin)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5164
diff changeset
413 this.selectedTime = startTimeOnSlider;
78086edb682a timeslider: prevent dragging outside the time-slider(right margin)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5164
diff changeset
414 d3.select(".line").attr(
78086edb682a timeslider: prevent dragging outside the time-slider(right margin)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5164
diff changeset
415 "x",
78086edb682a timeslider: prevent dragging outside the time-slider(right margin)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5164
diff changeset
416 xAxis.scale()(d3.isoParse(startTimeOnSlider))
78086edb682a timeslider: prevent dragging outside the time-slider(right margin)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5164
diff changeset
417 );
5164
600d337fe5f1 timeslider: prevent selecting values outside the visible area while dragging
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5163
diff changeset
418 } else {
5165
78086edb682a timeslider: prevent dragging outside the time-slider(right margin)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5164
diff changeset
419 if (this.selectedTime > now) {
5166
bc7855cfb801 timeslider: respect hour by reverting cursor to now while dragging in future area
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5165
diff changeset
420 this.isSelectedTimeHourly = true;
5165
78086edb682a timeslider: prevent dragging outside the time-slider(right margin)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5164
diff changeset
421 this.selectedTime = now;
78086edb682a timeslider: prevent dragging outside the time-slider(right margin)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5164
diff changeset
422 d3.select(".line").attr("x", xAxis.scale()(d3.isoParse(now)));
5167
a5fd84c4f2fe timeslider: avoid moving cursor to future area (click event)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5166
diff changeset
423 this.checkSelectedTimeHourly();
5165
78086edb682a timeslider: prevent dragging outside the time-slider(right margin)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5164
diff changeset
424 } else {
78086edb682a timeslider: prevent dragging outside the time-slider(right margin)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5164
diff changeset
425 d3.select(".line").attr("x", d3.event.x);
78086edb682a timeslider: prevent dragging outside the time-slider(right margin)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5164
diff changeset
426 }
5164
600d337fe5f1 timeslider: prevent selecting values outside the visible area while dragging
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5163
diff changeset
427 }
5162
eb4683befb39 timeslider: prevent selecting future dates while dragging
Thomas Junk <thomas.junk@intevation.de>
parents: 5161
diff changeset
428 }
5071
45d868476dea timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents: 5070
diff changeset
429 },
5072
51b30f7c64a2 Timeslider proper rescale
Thomas Junk <thomas.junk@intevation.de>
parents: 5071
diff changeset
430 redrawTimeSlider() {
5071
45d868476dea timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents: 5070
diff changeset
431 const bodyWidth = document.querySelector("body").clientWidth;
45d868476dea timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents: 5070
diff changeset
432 const timeSelectionWidth = document.querySelector("#timeselection")
45d868476dea timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents: 5070
diff changeset
433 .clientWidth;
45d868476dea timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents: 5070
diff changeset
434 const closeButton = document.querySelector("#closebutton").clientWidth;
45d868476dea timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents: 5070
diff changeset
435 const svgWidth = bodyWidth - timeSelectionWidth - closeButton;
45d868476dea timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents: 5070
diff changeset
436 document
45d868476dea timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents: 5070
diff changeset
437 .querySelector(".sliderContainer svg")
45d868476dea timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents: 5070
diff changeset
438 .setAttribute("width", svgWidth);
45d868476dea timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents: 5070
diff changeset
439 xScale.range([0, svgWidth]);
45d868476dea timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents: 5070
diff changeset
440 xAxis.scale(xScale);
45d868476dea timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents: 5070
diff changeset
441 d3.select(".axis--x").call(xAxis);
45d868476dea timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents: 5070
diff changeset
442 d3.select(".line").attr(
45d868476dea timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents: 5070
diff changeset
443 "x",
45d868476dea timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents: 5070
diff changeset
444 xAxis.scale()(d3.isoParse(this.selectedTime))
45d868476dea timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents: 5070
diff changeset
445 );
5072
51b30f7c64a2 Timeslider proper rescale
Thomas Junk <thomas.junk@intevation.de>
parents: 5071
diff changeset
446 this.rescaleSlider(currentScaleFactor);
5036
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
447 }
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
448 },
5067
99ac62a56dd2 client: add window resize event listener
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5066
diff changeset
449 created() {
5072
51b30f7c64a2 Timeslider proper rescale
Thomas Junk <thomas.junk@intevation.de>
parents: 5071
diff changeset
450 this.resizeListenerFunction = debounce(this.redrawTimeSlider, 100);
5067
99ac62a56dd2 client: add window resize event listener
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5066
diff changeset
451 window.addEventListener("resize", this.resizeListenerFunction);
99ac62a56dd2 client: add window resize event listener
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5066
diff changeset
452 },
5071
45d868476dea timeslider: resizable
Thomas Junk <thomas.junk@intevation.de>
parents: 5070
diff changeset
453 destroyed() {
5067
99ac62a56dd2 client: add window resize event listener
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5066
diff changeset
454 window.removeEventListener("resize", this.resizeListenerFunction);
99ac62a56dd2 client: add window resize event listener
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5066
diff changeset
455 },
5036
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
456 mounted() {
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
457 setTimeout(this.createSlider, 150);
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
458 }
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
459 };
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
460 </script>