Mercurial > gemma

annotate client/src/components/toolbar/TimeSlider.vue @ 5069:7ef8d3dab29b time-sliding

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
timeslider: resizable
author Thomas Junk <thomas.junk@intevation.de>
date Wed, 11 Mar 2020 16:26:31 +0100
parents 43bebcc8961f
children aeb100b4c41b
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 @click="$store.commit('application/showTimeSlider', !showTimeSlider)"
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
4 class="toolbar-button"
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
5 v-tooltip.right="label"
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
6 >
5039
aec0923f9c52 icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents: 5036
diff changeset
7 <pre
aec0923f9c52 icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents: 5036
diff changeset
8 :class="[
aec0923f9c52 icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents: 5036
diff changeset
9 'menuEntry',
aec0923f9c52 icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents: 5036
diff changeset
10 {
aec0923f9c52 icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents: 5036
diff changeset
11 'text-info': this.showTimeSlider
aec0923f9c52 icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents: 5036
diff changeset
12 }
aec0923f9c52 icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents: 5036
diff changeset
13 ]"
aec0923f9c52 icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents: 5036
diff changeset
14 >{{ currentTimeSelection }}</pre
aec0923f9c52 icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents: 5036
diff changeset
15 >
5036
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
16 </div>
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
17 </template>
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 <script>
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
20 /* 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
21 * 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
22 *
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
23 * 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
24 * License-Filename: LICENSES/AGPL-3.0.txt
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 * Copyright (C) 2020 by via donau
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
27 * – Österreichische Wasserstraßen-Gesellschaft mbH
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
28 * Software engineering by Intevation GmbH
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 * Author(s):
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
31 * Fadi Abbud <fadiabbud@intevation.de>
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
32 */
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
33 import { mapState } from "vuex";
5039
aec0923f9c52 icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents: 5036
diff changeset
34 import locale2 from "locale2";
aec0923f9c52 icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents: 5036
diff changeset
35 import { format } from "date-fns";
aec0923f9c52 icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents: 5036
diff changeset
36
5036
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
37 export default {
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
38 computed: {
5063
43bebcc8961f client: set time according to zoom level.
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5062
diff changeset
39 ...mapState("application", ["showTimeSlider", "selectedTime"]),
5036
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
40 label() {
5052
89cd8937cc4b toolbar: fix display of time
Thomas Junk <thomas.junk@intevation.de>
parents: 5051
diff changeset
41 const date = this.selectedTime;
5051
72bf187cefc9 toolbar: use localized date
Thomas Junk <thomas.junk@intevation.de>
parents: 5050
diff changeset
42 return `<b>${this.selectedTime.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
43 day: "2-digit",
5051
72bf187cefc9 toolbar: use localized date
Thomas Junk <thomas.junk@intevation.de>
parents: 5050
diff changeset
44 month: "2-digit",
72bf187cefc9 toolbar: use localized date
Thomas Junk <thomas.junk@intevation.de>
parents: 5050
diff changeset
45 year: "numeric"
5052
89cd8937cc4b toolbar: fix display of time
Thomas Junk <thomas.junk@intevation.de>
parents: 5051
diff changeset
46 })} ${format(date, "HH:mm")}</b>`;
5039
aec0923f9c52 icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents: 5036
diff changeset
47 },
aec0923f9c52 icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents: 5036
diff changeset
48 currentTimeSelection() {
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
49 const date = this.selectedTime;
a970a1678b17 toolbar: smaller font for display of time in toolbar. Tooltip shows selected time
Thomas Junk <thomas.junk@intevation.de>
parents: 5049
diff changeset
50 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
51 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
52 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
53 });
5063
43bebcc8961f client: set time according to zoom level.
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5062
diff changeset
54 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
55 }
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
56 }
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
57 };
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff changeset
58 </script>
5039
aec0923f9c52 icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents: 5036
diff changeset
59 <style lang="scss" scoped>
aec0923f9c52 icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents: 5036
diff changeset
60 .menuEntry {
5053
8b39081fa3aa toolbar: font for time display increased
Thomas Junk <thomas.junk@intevation.de>
parents: 5052
diff changeset
61 font-size: 9px;
5039
aec0923f9c52 icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents: 5036
diff changeset
62 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
63 line-height: normal;
5039
aec0923f9c52 icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents: 5036
diff changeset
64 }
aec0923f9c52 icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents: 5036
diff changeset
65
aec0923f9c52 icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents: 5036
diff changeset
66 pre {
aec0923f9c52 icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents: 5036
diff changeset
67 margin-top: 0px;
aec0923f9c52 icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents: 5036
diff changeset
68 margin-bottom: 0px;
aec0923f9c52 icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents: 5036
diff changeset
69 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
70 font-family: sans-serif;
5039
aec0923f9c52 icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents: 5036
diff changeset
71 }
aec0923f9c52 icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents: 5036
diff changeset
72
aec0923f9c52 icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents: 5036
diff changeset
73 .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
74 height: 2.5rem;
5047
644118078d50 client: (minor) fix size of time-slider for toolbar
Fadi Abbud <fadi.abbud@intevation.de>
parents: 5042
diff changeset
75 width: auto;
5039
aec0923f9c52 icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents: 5036
diff changeset
76 }
aec0923f9c52 icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents: 5036
diff changeset
77 </style>