Mercurial > gemma

annotate client/src/components/toolbar/TimeSlider.vue @ 5441:7d7b1bf53189 marking-single-beam

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Bottleneckoverview: Put selector for older scans into date column
author Thomas Junk <thomas.junk@intevation.de>
date Tue, 13 Jul 2021 16:17:01 +0200
parents 673f2a00c767
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>
5090
70bd5c824639 client: distinguish time in refreshLayers requests during Time-slider enable/disable
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5075
diff changeset
2 <div @click="showSlider" class="toolbar-button" v-tooltip.right="label">
5039
aec0923f9c52 icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents: 5036
diff changeset
3 <pre
aec0923f9c52 icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents: 5036
diff changeset
4 :class="[
aec0923f9c52 icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents: 5036
diff changeset
5 'menuEntry',
aec0923f9c52 icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents: 5036
diff changeset
6 {
aec0923f9c52 icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents: 5036
diff changeset
7 'text-info': this.showTimeSlider
aec0923f9c52 icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents: 5036
diff changeset
8 }
aec0923f9c52 icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents: 5036
diff changeset
9 ]"
aec0923f9c52 icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents: 5036
diff changeset
10 >{{ currentTimeSelection }}</pre
aec0923f9c52 icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents: 5036
diff changeset
11 >
5036
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
12 </div>
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
13 </template>
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
14
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
15 <script>
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
16 /* 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
17 * 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
18 *
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
19 * 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
20 * License-Filename: LICENSES/AGPL-3.0.txt
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
21 *
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
22 * Copyright (C) 2020 by via donau
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
23 * – Österreichische Wasserstraßen-Gesellschaft mbH
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
24 * Software engineering by Intevation GmbH
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
25 *
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
26 * Author(s):
5157
673f2a00c767 add missing Author in Timeslider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5090
diff changeset
27 * Fadi Abbud <fadi.abbud@intevation.de>
673f2a00c767 add missing Author in Timeslider
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5090
diff changeset
28 * Thomas Junk <thomas.junk@intevation.de>
5036
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
29 */
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
30 import { mapState } from "vuex";
5039
aec0923f9c52 icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents: 5036
diff changeset
31 import locale2 from "locale2";
aec0923f9c52 icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents: 5036
diff changeset
32 import { format } from "date-fns";
aec0923f9c52 icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents: 5036
diff changeset
33
5036
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
34 export default {
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
35 computed: {
5090
70bd5c824639 client: distinguish time in refreshLayers requests during Time-slider enable/disable
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5075
diff changeset
36 ...mapState("application", [
70bd5c824639 client: distinguish time in refreshLayers requests during Time-slider enable/disable
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5075
diff changeset
37 "showTimeSlider",
70bd5c824639 client: distinguish time in refreshLayers requests during Time-slider enable/disable
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5075
diff changeset
38 "currentVisibleTime",
70bd5c824639 client: distinguish time in refreshLayers requests during Time-slider enable/disable
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5075
diff changeset
39 "storedTime"
70bd5c824639 client: distinguish time in refreshLayers requests during Time-slider enable/disable
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5075
diff changeset
40 ]),
5036
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
41 label() {
5075
aeb100b4c41b timeslider: prerequisites for time travel
Thomas Junk <thomas.junk@intevation.de>
parents: 5063
diff changeset
42 const date = this.currentVisibleTime;
aeb100b4c41b timeslider: prerequisites for time travel
Thomas Junk <thomas.junk@intevation.de>
parents: 5063
diff changeset
43 return `<b>${this.currentVisibleTime.toLocaleDateString(locale2, {
5050
a970a1678b17 toolbar: smaller font for display of time in toolbar. Tooltip shows selected time
Thomas Junk <thomas.junk@intevation.de>
parents: 5049
diff changeset
44 day: "2-digit",
5051
72bf187cefc9 toolbar: use localized date
Thomas Junk <thomas.junk@intevation.de>
parents: 5050
diff changeset
45 month: "2-digit",
72bf187cefc9 toolbar: use localized date
Thomas Junk <thomas.junk@intevation.de>
parents: 5050
diff changeset
46 year: "numeric"
5052
89cd8937cc4b toolbar: fix display of time
Thomas Junk <thomas.junk@intevation.de>
parents: 5051
diff changeset
47 })} ${format(date, "HH:mm")}</b>`;
5039
aec0923f9c52 icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents: 5036
diff changeset
48 },
aec0923f9c52 icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents: 5036
diff changeset
49 currentTimeSelection() {
5075
aeb100b4c41b timeslider: prerequisites for time travel
Thomas Junk <thomas.junk@intevation.de>
parents: 5063
diff changeset
50 const date = this.currentVisibleTime;
5050
a970a1678b17 toolbar: smaller font for display of time in toolbar. Tooltip shows selected time
Thomas Junk <thomas.junk@intevation.de>
parents: 5049
diff changeset
51 const result = date.toLocaleDateString(locale2, {
a970a1678b17 toolbar: smaller font for display of time in toolbar. Tooltip shows selected time
Thomas Junk <thomas.junk@intevation.de>
parents: 5049
diff changeset
52 day: "2-digit",
a970a1678b17 toolbar: smaller font for display of time in toolbar. Tooltip shows selected time
Thomas Junk <thomas.junk@intevation.de>
parents: 5049
diff changeset
53 month: "2-digit"
a970a1678b17 toolbar: smaller font for display of time in toolbar. Tooltip shows selected time
Thomas Junk <thomas.junk@intevation.de>
parents: 5049
diff changeset
54 });
5063
43bebcc8961f client: set time according to zoom level.
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5062
diff changeset
55 return `${format(date, "HH:mm")}\n${result}\n${date.getFullYear()}`;
5036
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
56 }
5090
70bd5c824639 client: distinguish time in refreshLayers requests during Time-slider enable/disable
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5075
diff changeset
57 },
70bd5c824639 client: distinguish time in refreshLayers requests during Time-slider enable/disable
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5075
diff changeset
58 methods: {
70bd5c824639 client: distinguish time in refreshLayers requests during Time-slider enable/disable
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5075
diff changeset
59 showSlider() {
70bd5c824639 client: distinguish time in refreshLayers requests during Time-slider enable/disable
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5075
diff changeset
60 if (this.showTimeSlider) {
70bd5c824639 client: distinguish time in refreshLayers requests during Time-slider enable/disable
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5075
diff changeset
61 this.$store.commit(
70bd5c824639 client: distinguish time in refreshLayers requests during Time-slider enable/disable
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5075
diff changeset
62 "application/setStoredTime",
70bd5c824639 client: distinguish time in refreshLayers requests during Time-slider enable/disable
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5075
diff changeset
63 this.currentVisibleTime
70bd5c824639 client: distinguish time in refreshLayers requests during Time-slider enable/disable
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5075
diff changeset
64 );
70bd5c824639 client: distinguish time in refreshLayers requests during Time-slider enable/disable
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5075
diff changeset
65 this.$store.commit("application/setSelectedTime", new Date());
70bd5c824639 client: distinguish time in refreshLayers requests during Time-slider enable/disable
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5075
diff changeset
66 this.$store.commit("application/showTimeSlider", false);
70bd5c824639 client: distinguish time in refreshLayers requests during Time-slider enable/disable
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5075
diff changeset
67 } else {
70bd5c824639 client: distinguish time in refreshLayers requests during Time-slider enable/disable
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5075
diff changeset
68 this.$store.commit("application/setSelectedTime", this.storedTime);
70bd5c824639 client: distinguish time in refreshLayers requests during Time-slider enable/disable
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5075
diff changeset
69 this.$store.commit("application/showTimeSlider", true);
70bd5c824639 client: distinguish time in refreshLayers requests during Time-slider enable/disable
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5075
diff changeset
70 }
70bd5c824639 client: distinguish time in refreshLayers requests during Time-slider enable/disable
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5075
diff changeset
71 }
5036
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
72 }
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
73 };
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
74 </script>
5039
aec0923f9c52 icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents: 5036
diff changeset
75 <style lang="scss" scoped>
aec0923f9c52 icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents: 5036
diff changeset
76 .menuEntry {
5053
8b39081fa3aa toolbar: font for time display increased
Thomas Junk <thomas.junk@intevation.de>
parents: 5052
diff changeset
77 font-size: 9px;
5039
aec0923f9c52 icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents: 5036
diff changeset
78 font-weight: bold;
5042
28b260fdc303 client: reduce space between lines for the date info in toolbar
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5039
diff changeset
79 line-height: normal;
5039
aec0923f9c52 icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents: 5036
diff changeset
80 }
aec0923f9c52 icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents: 5036
diff changeset
81
aec0923f9c52 icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents: 5036
diff changeset
82 pre {
aec0923f9c52 icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents: 5036
diff changeset
83 margin-top: 0px;
aec0923f9c52 icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents: 5036
diff changeset
84 margin-bottom: 0px;
aec0923f9c52 icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents: 5036
diff changeset
85 text-align: left;
5050
a970a1678b17 toolbar: smaller font for display of time in toolbar. Tooltip shows selected time
Thomas Junk <thomas.junk@intevation.de>
parents: 5049
diff changeset
86 font-family: sans-serif;
5039
aec0923f9c52 icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents: 5036
diff changeset
87 }
aec0923f9c52 icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents: 5036
diff changeset
88
aec0923f9c52 icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents: 5036
diff changeset
89 .toolbar-button {
5042
28b260fdc303 client: reduce space between lines for the date info in toolbar
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5039
diff changeset
90 height: 2.5rem;
5047
644118078d50 client: (minor) fix size of time-slider for toolbar
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5042
diff changeset
91 width: auto;
5039
aec0923f9c52 icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents: 5036
diff changeset
92 }
aec0923f9c52 icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents: 5036
diff changeset
93 </style>