Mercurial > gemma

annotate client/src/components/TimeSlider.vue @ 5627:7768f14f6535 729-node-js-newer-version

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Transformed scss variables into css custom properties
author Luisa Beerboom <lbeerboom@intevation.de>
date Tue, 09 May 2023 13:17:58 +0200
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>