Mercurial > gemma

annotate client/src/components/TimeSlider.vue @ 5045:a7cda81bf96f time-sliding

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: better formatting of time
author Fadi Abbud <fadi.abbud@intevation.de>
date Mon, 02 Mar 2020 10:27:40 +0100
parents ca5b1b5a553a
children b5e77c43fb8b
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',
9d288d9b851b client: move selectedTime to store
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5036
diff changeset
6 { expanded: showTimeSlider }
5036
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
7 ]"
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
8 >
5038
9d26f67dd916 client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5037
diff changeset
9 <div class="d-flex m-1">
9d26f67dd916 client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5037
diff changeset
10 <input
5039
aec0923f9c52 icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents: 5038
diff changeset
11 class="form-control form-control-sm"
5038
9d26f67dd916 client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5037
diff changeset
12 type="date"
9d26f67dd916 client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5037
diff changeset
13 v-model="timeSelection"
5039
aec0923f9c52 icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents: 5038
diff changeset
14 min="2015-01-01"
5038
9d26f67dd916 client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5037
diff changeset
15 max="2020-03-01"
9d26f67dd916 client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5037
diff changeset
16 />
9d26f67dd916 client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5037
diff changeset
17 </div>
5036
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
18 <div
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
19 id="sliderContainer"
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
20 class="d-flex sliderContainer"
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
21 style="width: 98%;"
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
22 ></div>
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
23 <div @click="close" class="d-flex box-control mr-0" style="width: 2%;">
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
24 <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
25 </div>
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
26 </div>
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
27 </template>
5037
9d288d9b851b client: move selectedTime to store
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5036
diff changeset
28 <style lang="sass" scoped>
5036
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
29 #slider
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
30 position: absolute
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
31 bottom: 0
5037
9d288d9b851b client: move selectedTime to store
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5036
diff changeset
32 min-width: 100vw;
9d288d9b851b client: move selectedTime to store
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5036
diff changeset
33 &.expanded
5036
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
34 max-height: 100%;
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
35 max-width: 100%;
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
36 margin: 0
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
37 </style>
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
38 <script>
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
39 /* 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
40 * 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
41 *
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
42 * 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
43 * License-Filename: LICENSES/AGPL-3.0.txt
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
44 *
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
45 * Copyright (C) 2020 by via donau
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
46 * – Österreichische Wasserstraßen-Gesellschaft mbH
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
47 * Software engineering by Intevation GmbH
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
48 *
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
49 * Author(s):
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
50 * Fadi Abbud <fadiabbud@intevation.de>
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
51 */
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
52 import { mapState } from "vuex";
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
53 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
54 import app from "@/main";
5044
ca5b1b5a553a client: date localization for time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5043
diff changeset
55 import { localeDateString } from "@/lib/datelocalization";
5045
a7cda81bf96f client: better formatting of time
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5044
diff changeset
56 import { format } from "date-fns";
5043
bae2548dc484 client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5041
diff changeset
57
5038
9d26f67dd916 client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5037
diff changeset
58 let zoom = null;
5036
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
59 export default {
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
60 name: "timeslider",
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
61 data() {
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
62 return {
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
63 newX: null
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
64 };
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
65 },
5040
066b76ef5e6a selected time is refreshed after reloads
Thomas Junk <thomas.junk@intevation.de>
parents: 5039
diff changeset
66 watch: {
066b76ef5e6a selected time is refreshed after reloads
Thomas Junk <thomas.junk@intevation.de>
parents: 5039
diff changeset
67 ongoingRefresh() {
066b76ef5e6a selected time is refreshed after reloads
Thomas Junk <thomas.junk@intevation.de>
parents: 5039
diff changeset
68 if (this.ongoingRefresh) return;
066b76ef5e6a selected time is refreshed after reloads
Thomas Junk <thomas.junk@intevation.de>
parents: 5039
diff changeset
69 this.$store.commit("application/setSelectedTime", new Date());
066b76ef5e6a selected time is refreshed after reloads
Thomas Junk <thomas.junk@intevation.de>
parents: 5039
diff changeset
70 this.$nextTick(this.redrawSlider);
066b76ef5e6a selected time is refreshed after reloads
Thomas Junk <thomas.junk@intevation.de>
parents: 5039
diff changeset
71 }
066b76ef5e6a selected time is refreshed after reloads
Thomas Junk <thomas.junk@intevation.de>
parents: 5039
diff changeset
72 },
5036
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
73 computed: {
5037
9d288d9b851b client: move selectedTime to store
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5036
diff changeset
74 ...mapState("application", ["showTimeSlider"]),
5040
066b76ef5e6a selected time is refreshed after reloads
Thomas Junk <thomas.junk@intevation.de>
parents: 5039
diff changeset
75 ...mapState("map", ["ongoingRefresh"]),
5038
9d26f67dd916 client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5037
diff changeset
76 timeSelection: {
9d26f67dd916 client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5037
diff changeset
77 get() {
9d26f67dd916 client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5037
diff changeset
78 const date = this.$store.state.application.selectedTime;
5045
a7cda81bf96f client: better formatting of time
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5044
diff changeset
79 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
80 },
9d26f67dd916 client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5037
diff changeset
81 set(value) {
9d26f67dd916 client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5037
diff changeset
82 const date = new Date(value);
9d26f67dd916 client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5037
diff changeset
83 this.$store.commit("application/setSelectedTime", date);
5040
066b76ef5e6a selected time is refreshed after reloads
Thomas Junk <thomas.junk@intevation.de>
parents: 5039
diff changeset
84 this.$nextTick(this.redrawSlider);
5038
9d26f67dd916 client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5037
diff changeset
85 }
9d26f67dd916 client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5037
diff changeset
86 },
5037
9d288d9b851b client: move selectedTime to store
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5036
diff changeset
87 selectedTime: {
9d288d9b851b client: move selectedTime to store
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5036
diff changeset
88 get() {
9d288d9b851b client: move selectedTime to store
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5036
diff changeset
89 return this.$store.state.application.selectedTime;
9d288d9b851b client: move selectedTime to store
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5036
diff changeset
90 },
9d288d9b851b client: move selectedTime to store
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5036
diff changeset
91 set(value) {
9d288d9b851b client: move selectedTime to store
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5036
diff changeset
92 this.$store.commit("application/setSelectedTime", value);
9d288d9b851b client: move selectedTime to store
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5036
diff changeset
93 }
9d288d9b851b client: move selectedTime to store
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5036
diff changeset
94 }
5036
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
95 },
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
96 methods: {
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
97 close() {
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
98 this.$store.commit("application/showTimeSlider", false);
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
99 },
5040
066b76ef5e6a selected time is refreshed after reloads
Thomas Junk <thomas.junk@intevation.de>
parents: 5039
diff changeset
100 redrawSlider() {
066b76ef5e6a selected time is refreshed after reloads
Thomas Junk <thomas.junk@intevation.de>
parents: 5039
diff changeset
101 this.createSlider();
066b76ef5e6a selected time is refreshed after reloads
Thomas Junk <thomas.junk@intevation.de>
parents: 5039
diff changeset
102 zoom.translateTo(
066b76ef5e6a selected time is refreshed after reloads
Thomas Junk <thomas.junk@intevation.de>
parents: 5039
diff changeset
103 d3.select(".line"),
066b76ef5e6a selected time is refreshed after reloads
Thomas Junk <thomas.junk@intevation.de>
parents: 5039
diff changeset
104 this.newX(d3.isoParse(this.selectedTime.toISOString())),
066b76ef5e6a selected time is refreshed after reloads
Thomas Junk <thomas.junk@intevation.de>
parents: 5039
diff changeset
105 1
066b76ef5e6a selected time is refreshed after reloads
Thomas Junk <thomas.junk@intevation.de>
parents: 5039
diff changeset
106 );
066b76ef5e6a selected time is refreshed after reloads
Thomas Junk <thomas.junk@intevation.de>
parents: 5039
diff changeset
107 },
5036
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
108 createSlider() {
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
109 const element = document.getElementById("sliderContainer");
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
110 const svgWidth = element ? element.clientWidth : 0,
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
111 svgHeight = 40,
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
112 marginTop = 20,
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
113 marginLeft = 0;
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
114
5044
ca5b1b5a553a client: date localization for time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5043
diff changeset
115 d3.timeFormatDefaultLocale(localeDateString);
5036
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
116 this.newX = this.getScale();
5038
9d26f67dd916 client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5037
diff changeset
117 d3.select(".sliderContainer svg").remove();
5036
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
118 let svg = d3
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
119 .select(".sliderContainer")
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
120 .append("svg")
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
121 .attr("width", svgWidth)
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
122 .attr("height", svgHeight);
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
123
5041
abe9b75686ba client: set wheeldelta to facilitate quick changes of zoomlevel
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5040
diff changeset
124 const wheelDelta = () => {
abe9b75686ba client: set wheeldelta to facilitate quick changes of zoomlevel
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5040
diff changeset
125 return (-d3.event.deltaY * (d3.event.deltaMode ? 120 : 1)) / 15;
abe9b75686ba client: set wheeldelta to facilitate quick changes of zoomlevel
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5040
diff changeset
126 };
5036
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
127 // zoom event
5038
9d26f67dd916 client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5037
diff changeset
128 zoom = d3
5036
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
129 .zoom()
5041
abe9b75686ba client: set wheeldelta to facilitate quick changes of zoomlevel
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5040
diff changeset
130 .scaleExtent([0.8, 102000])
5036
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
131 .translateExtent([[0, 0], [svgWidth, svgHeight]])
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
132 .extent([[0, 0], [(svgWidth, svgHeight)]])
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
133 .on("zoom", this.zoomed);
5041
abe9b75686ba client: set wheeldelta to facilitate quick changes of zoomlevel
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5040
diff changeset
134 zoom.wheelDelta(wheelDelta);
5036
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
135
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
136 svg
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
137 .append("g")
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
138 .attr("class", "axis--x")
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
139 .attr("transform", `translate(${marginLeft}, ${marginTop})`)
5043
bae2548dc484 client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5041
diff changeset
140 .call(this.getAxes());
5036
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
141
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
142 // create rectanlge on the slider area to capture mouse events
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
143 const eventRect = svg
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
144 .append("rect")
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
145 .attr("id", "zoom")
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
146 .attr("class", "zoom")
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
147 .attr("width", svgWidth)
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
148 .attr("height", svgHeight)
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
149 .attr("fill", "white")
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
150 .attr("opacity", 0.2)
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
151 .on("mouseover", () => {
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
152 svg.select(".zoom").attr("cursor", "move");
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
153 });
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
154 eventRect.call(zoom).on("click", this.onClick);
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
155
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
156 const toIsoDate = d => {
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
157 return d.toISOString();
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
158 };
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
159
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
160 let drag = d3
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
161 .drag()
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
162 .on("start", () => {
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
163 d3.select(".line")
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
164 .raise()
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
165 .classed("active", true);
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
166 })
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
167 .on("drag", this.onDrag)
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
168 .on("end", () => {
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
169 d3.select(".line").classed("active", false);
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
170 });
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
171
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
172 // Create cursor to indicate to the selected time
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
173 svg
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
174 .append("rect")
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
175 .attr("class", "line")
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
176 .attr("id", "scrubber")
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
177 .attr("x", this.newX(d3.isoParse(toIsoDate(this.selectedTime))))
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
178 .attr("y", 0)
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
179 .attr("width", 2)
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
180 .attr("height", svgHeight)
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
181 .attr("stroke", "#17a2b8")
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
182 .attr("stroke-width", 2)
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
183 .attr("opacity", 0.6)
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
184 .on("mouseover", () => {
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
185 svg.select(".line").attr("cursor", "e-resize");
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
186 })
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
187 .call(drag);
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
188 },
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
189 getScale() {
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
190 return d3
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
191 .scaleTime()
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
192 .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
193 .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
194 },
5043
bae2548dc484 client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5041
diff changeset
195 getAxes() {
bae2548dc484 client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5041
diff changeset
196 const axesFormat = date => {
bae2548dc484 client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5041
diff changeset
197 return (d3.timeSecond(date) < date
bae2548dc484 client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5041
diff changeset
198 ? d3.timeFormat(".%L")
bae2548dc484 client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5041
diff changeset
199 : d3.timeMinute(date) < date
bae2548dc484 client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5041
diff changeset
200 ? d3.timeFormat(":%S")
bae2548dc484 client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5041
diff changeset
201 : d3.timeHour(date) < date
bae2548dc484 client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5041
diff changeset
202 ? d3.timeFormat("%H:%M")
bae2548dc484 client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5041
diff changeset
203 : d3.timeDay(date) < date
bae2548dc484 client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5041
diff changeset
204 ? d3.timeFormat("%H:%M")
bae2548dc484 client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5041
diff changeset
205 : d3.timeMonth(date) < date
bae2548dc484 client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5041
diff changeset
206 ? d3.timeWeek(date) < date
bae2548dc484 client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5041
diff changeset
207 ? 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
208 : 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
209 : d3.timeYear(date) < date
bae2548dc484 client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5041
diff changeset
210 ? d3.timeFormat("%B")
bae2548dc484 client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5041
diff changeset
211 : d3.timeFormat("%Y"))(date);
bae2548dc484 client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5041
diff changeset
212 };
bae2548dc484 client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5041
diff changeset
213 return d3
bae2548dc484 client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5041
diff changeset
214 .axisBottom(this.newX)
bae2548dc484 client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5041
diff changeset
215 .ticks(12)
bae2548dc484 client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5041
diff changeset
216 .tickFormat(axesFormat);
bae2548dc484 client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5041
diff changeset
217 },
5036
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
218 zoomed() {
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
219 let scale = this.getScale();
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
220 this.newX = d3.event.transform.rescaleX(scale);
5043
bae2548dc484 client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5041
diff changeset
221 d3.select(".axis--x").call(this.getAxes());
5036
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
222 d3.select(".line").attr("x", this.newX(d3.isoParse(this.selectedTime)));
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
223 },
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
224 onClick() {
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
225 // Extract the click location
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
226 let point = d3.mouse(document.getElementById("zoom")),
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
227 p = { x: point[0], y: point[1] };
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
228 d3.select(".line").attr("x", p.x);
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
229 this.selectedTime = d3.isoParse(this.newX.invert(p.x + 2));
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
230 },
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
231 onDrag() {
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
232 this.selectedTime = d3.isoParse(this.newX.invert(d3.event.x + 2));
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
233 d3.select(".line").attr("x", d3.event.x);
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
234 }
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
235 },
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
236 mounted() {
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
237 setTimeout(this.createSlider, 150);
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
238 }
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
239 };
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
240 </script>