annotate client/src/identify/Identify.vue @ 1112:2c3d32322126 store-refactoring

moved identifystore properties to mapstore
author Markus Kottlaender <markus@intevation.de>
date Mon, 05 Nov 2018 13:32:10 +0100
parents f8f398e36e38
children 595654ad3f66
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
770
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
1 <template>
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
2 <div class="identifymenu">
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
3 <div @click="collapse" class="d-flex flex-column ui-element minimizer">
966
6114c512508b refac: extracted indentify from layers
Thomas Junk <thomas.junk@intevation.de>
parents: 953
diff changeset
4 <div :class="infoStyle">
770
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
5 <i class="fa fa-info"></i>
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
6 </div>
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
7 </div>
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
8 <div :class="identifyStyle">
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
9 <div v-if="!collapsed" class="card-body">
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
10 <div class="headline">
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
11 <h4 class="card-title">Identified</h4>
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
12 </div>
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
13 <hr>
884
616418a6adde fix: overflow behaviour of identify menu fixed
Thomas Junk <thomas.junk@intevation.de>
parents: 816
diff changeset
14 <div class="d-flex flex-column features">
1071
f8f398e36e38 client: improve area measurement
Bernhard Reiter <bernhard@intevation.de>
parents: 1063
diff changeset
15 <small v-if="currentMeasurement">
f8f398e36e38 client: improve area measurement
Bernhard Reiter <bernhard@intevation.de>
parents: 1063
diff changeset
16 {{ currentMeasurement.quantity }}
f8f398e36e38 client: improve area measurement
Bernhard Reiter <bernhard@intevation.de>
parents: 1063
diff changeset
17 ({{ currentMeasurement.unitSymbol }}):
f8f398e36e38 client: improve area measurement
Bernhard Reiter <bernhard@intevation.de>
parents: 1063
diff changeset
18 {{ currentMeasurement.value }}
f8f398e36e38 client: improve area measurement
Bernhard Reiter <bernhard@intevation.de>
parents: 1063
diff changeset
19 </small>
798
383fac3e5d1e Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 793
diff changeset
20 <div v-for="feature of identifiedFeatures" :key="feature.getId()">
383fac3e5d1e Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 793
diff changeset
21 <div v-if="feature.getId()">
383fac3e5d1e Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 793
diff changeset
22 {{ feature.getId().replace(/[.][^.]*$/,"") /* cut away everything from the last . to the end */}}:
383fac3e5d1e Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 793
diff changeset
23 <small v-for="(value, key) in prepareProperties(feature)" :key="key">
383fac3e5d1e Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 793
diff changeset
24 <div v-if="value">{{key}}:{{value}}</div>
383fac3e5d1e Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 793
diff changeset
25 </small>
383fac3e5d1e Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 793
diff changeset
26 </div>
793
073394629ec6 client: add measurement and improve identify
Bernhard Reiter <bernhard@intevation.de>
parents: 785
diff changeset
27 </div>
770
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
28 </div>
806
5ef542130865 client: add info section
Bernhard Reiter <bernhard@intevation.de>
parents: 798
diff changeset
29 <div class="versioninfo">
966
6114c512508b refac: extracted indentify from layers
Thomas Junk <thomas.junk@intevation.de>
parents: 953
diff changeset
30 <hr />
1014
77202406b1a7 reverted demo build target, include revision number based on version tag
Markus Kottlaender <markus@intevation.de>
parents: 1007
diff changeset
31 gemma <a href="https://hg.intevation.de/gemma/file/tip">source-code</a> {{ versionStr }}
966
6114c512508b refac: extracted indentify from layers
Thomas Junk <thomas.junk@intevation.de>
parents: 953
diff changeset
32 <br />
6114c512508b refac: extracted indentify from layers
Thomas Junk <thomas.junk@intevation.de>
parents: 953
diff changeset
33 Some data ©
884
616418a6adde fix: overflow behaviour of identify menu fixed
Thomas Junk <thomas.junk@intevation.de>
parents: 816
diff changeset
34 <a href="https://www.openstreetmap.org/copyright">OpenSteetMap</a> contributors
806
5ef542130865 client: add info section
Bernhard Reiter <bernhard@intevation.de>
parents: 798
diff changeset
35
5ef542130865 client: add info section
Bernhard Reiter <bernhard@intevation.de>
parents: 798
diff changeset
36 </div>
770
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
37 </div>
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
38 </div>
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
39 </div>
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
40 </template>
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
41
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
42 <style lang="scss">
884
616418a6adde fix: overflow behaviour of identify menu fixed
Thomas Junk <thomas.junk@intevation.de>
parents: 816
diff changeset
43 .features {
911
86278692c30c UI: Identify Tool, nicer dynamic height.
Sascha Wilde <wilde@intevation.de>
parents: 908
diff changeset
44 max-height: $identify-height;
891
074ce4891466 fix: selection of profile data only when not in draw mode
Thomas Junk <thomas.junk@intevation.de>
parents: 884
diff changeset
45 overflow-y: auto;
884
616418a6adde fix: overflow behaviour of identify menu fixed
Thomas Junk <thomas.junk@intevation.de>
parents: 816
diff changeset
46 margin-bottom: $x-large-offset + $large-offset;
616418a6adde fix: overflow behaviour of identify menu fixed
Thomas Junk <thomas.junk@intevation.de>
parents: 816
diff changeset
47 }
806
5ef542130865 client: add info section
Bernhard Reiter <bernhard@intevation.de>
parents: 798
diff changeset
48 .versioninfo {
816
cd79f62794dd client: prepare survey selection
Bernhard Reiter <bernhard@intevation.de>
parents: 806
diff changeset
49 font-size: 60%;
884
616418a6adde fix: overflow behaviour of identify menu fixed
Thomas Junk <thomas.junk@intevation.de>
parents: 816
diff changeset
50 position: absolute;
616418a6adde fix: overflow behaviour of identify menu fixed
Thomas Junk <thomas.junk@intevation.de>
parents: 816
diff changeset
51 bottom: $large-offset;
806
5ef542130865 client: add info section
Bernhard Reiter <bernhard@intevation.de>
parents: 798
diff changeset
52 }
770
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
53 .identifymenu {
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
54 position: relative;
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
55 margin-right: $offset;
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
56 }
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
57 .identify {
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
58 background-color: white;
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
59 margin-left: $small-offset;
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
60 opacity: $slight-transparent;
798
383fac3e5d1e Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 793
diff changeset
61 text-align: left;
770
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
62 }
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
63
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
64 .identifycollapsed {
884
616418a6adde fix: overflow behaviour of identify menu fixed
Thomas Junk <thomas.junk@intevation.de>
parents: 816
diff changeset
65 min-height: $icon-height;
770
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
66 width: $icon-width;
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
67 transition: $transition-fast;
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
68 }
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
69
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
70 .identifyexpanded {
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
71 width: $identify-width;
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
72 }
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
73
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
74 .minimizer {
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
75 position: absolute;
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
76 z-index: 2;
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
77 right: 0;
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
78 margin-top: $x-small-offset;
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
79 border-radius: $border-radius;
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
80 height: $icon-width;
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
81 width: $icon-height;
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
82 }
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
83 </style>
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
84
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
85 <script>
1063
7ec2133c6404 client: add area measurement. simpify code
Bernhard Reiter <bernhard@intevation.de>
parents: 1019
diff changeset
86 /* This is Free Software under GNU Affero General Public License v >= 3.0
1019
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 1014
diff changeset
87 * without warranty, see README.md and license for details.
1063
7ec2133c6404 client: add area measurement. simpify code
Bernhard Reiter <bernhard@intevation.de>
parents: 1019
diff changeset
88 *
1019
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 1014
diff changeset
89 * SPDX-License-Identifier: AGPL-3.0-or-later
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 1014
diff changeset
90 * License-Filename: LICENSES/AGPL-3.0.txt
1063
7ec2133c6404 client: add area measurement. simpify code
Bernhard Reiter <bernhard@intevation.de>
parents: 1019
diff changeset
91 *
1019
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 1014
diff changeset
92 * Copyright (C) 2018 by via donau
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 1014
diff changeset
93 * – Österreichische Wasserstraßen-Gesellschaft mbH
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 1014
diff changeset
94 * Software engineering by Intevation GmbH
1063
7ec2133c6404 client: add area measurement. simpify code
Bernhard Reiter <bernhard@intevation.de>
parents: 1019
diff changeset
95 *
1019
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 1014
diff changeset
96 * Author(s):
1063
7ec2133c6404 client: add area measurement. simpify code
Bernhard Reiter <bernhard@intevation.de>
parents: 1019
diff changeset
97 * Thomas Junk <thomas.junk@intevation.de>
7ec2133c6404 client: add area measurement. simpify code
Bernhard Reiter <bernhard@intevation.de>
parents: 1019
diff changeset
98 * Bernhard E. Reiter <bernhard.reiter@intevation.de>
1019
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 1014
diff changeset
99 */
782
cb6dc630c702 client: improve identify code
Bernhard Reiter <bernhard@intevation.de>
parents: 771
diff changeset
100 import { mapState } from "vuex";
1014
77202406b1a7 reverted demo build target, include revision number based on version tag
Markus Kottlaender <markus@intevation.de>
parents: 1007
diff changeset
101 import { mapGetters } from "vuex";
770
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
102
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
103 export default {
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
104 name: "identify",
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
105 data() {
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
106 return {
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
107 collapsed: true
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
108 };
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
109 },
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
110 computed: {
1014
77202406b1a7 reverted demo build target, include revision number based on version tag
Markus Kottlaender <markus@intevation.de>
parents: 1007
diff changeset
111 ...mapGetters("application", ["versionStr"]),
1112
2c3d32322126 moved identifystore properties to mapstore
Markus Kottlaender <markus@intevation.de>
parents: 1071
diff changeset
112 ...mapState("mapstore", ["identifiedFeatures", "currentMeasurement"]),
770
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
113 identifyStyle() {
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
114 return {
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
115 "ui-element": true,
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
116 card: true,
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
117 identify: true,
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
118 shadow: true,
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
119 identifyexpanded: !this.collapsed,
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
120 identifycollapsed: this.collapsed
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
121 };
941
8a80ef09a62c client: improve identify
Bernhard Reiter <bernhard@intevation.de>
parents: 911
diff changeset
122 },
8a80ef09a62c client: improve identify
Bernhard Reiter <bernhard@intevation.de>
parents: 911
diff changeset
123 infoStyle() {
8a80ef09a62c client: improve identify
Bernhard Reiter <bernhard@intevation.de>
parents: 911
diff changeset
124 return {
8a80ef09a62c client: improve identify
Bernhard Reiter <bernhard@intevation.de>
parents: 911
diff changeset
125 info: true,
8a80ef09a62c client: improve identify
Bernhard Reiter <bernhard@intevation.de>
parents: 911
diff changeset
126 "text-info":
8a80ef09a62c client: improve identify
Bernhard Reiter <bernhard@intevation.de>
parents: 911
diff changeset
127 this.identifiedFeatures && this.identifiedFeatures.length > 0
8a80ef09a62c client: improve identify
Bernhard Reiter <bernhard@intevation.de>
parents: 911
diff changeset
128 };
1019
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 1014
diff changeset
129 }
770
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
130 },
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
131 methods: {
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
132 collapse() {
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
133 this.collapsed = !this.collapsed;
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
134 },
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
135 prepareProperties(feature) {
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
136 // return dict object with propertyname:plainvalue prepared for display
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
137 var properties = feature.getProperties();
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
138 delete properties[feature.getGeometryName()];
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
139 return properties;
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
140 }
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
141 }
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
142 };
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
143 </script>