Mercurial > gemma

annotate client/src/identify/Identify.vue @ 1202:68fb4af05b73

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
fix: prevent identify tool from jumping during page load In order to prevent jumping search embedded in spacer div with 100% size.
author Thomas Junk <thomas.junk@intevation.de>
date Mon, 19 Nov 2018 10:09:25 +0100
parents 1ae93a0438df
children 4f666dbb9abd
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">
1202
68fb4af05b73 fix: prevent identify tool from jumping during page load
Thomas Junk <thomas.junk@intevation.de>
parents: 1167
diff changeset
3 <div
68fb4af05b73 fix: prevent identify tool from jumping during page load
Thomas Junk <thomas.junk@intevation.de>
parents: 1167
diff changeset
4 @click="$store.commit('application/showIdentify', !showIdentify)"
68fb4af05b73 fix: prevent identify tool from jumping during page load
Thomas Junk <thomas.junk@intevation.de>
parents: 1167
diff changeset
5 class="d-flex flex-column ui-element minimizer"
68fb4af05b73 fix: prevent identify tool from jumping during page load
Thomas Junk <thomas.junk@intevation.de>
parents: 1167
diff changeset
6 >
966
6114c512508b refac: extracted indentify from layers
Thomas Junk <thomas.junk@intevation.de>
parents: 953
diff changeset
7 <div :class="infoStyle">
770
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
8 <i class="fa fa-info"></i>
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
9 </div>
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
10 </div>
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
11 <div :class="identifyStyle">
1123
d9e6a1f6f394 moved all collapse flags for UI elements to store
Markus Kottlaender <markus@intevation.de>
parents: 1113
diff changeset
12 <div v-if="showIdentify" class="card-body">
770
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
13 <div class="headline">
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
14 <h4 class="card-title">Identified</h4>
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
15 </div>
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
16 <hr>
884
616418a6adde fix: overflow behaviour of identify menu fixed
Thomas Junk <thomas.junk@intevation.de>
parents: 816
diff changeset
17 <div class="d-flex flex-column features">
1071
f8f398e36e38 client: improve area measurement
Bernhard Reiter <bernhard@intevation.de>
parents: 1063
diff changeset
18 <small v-if="currentMeasurement">
1202
68fb4af05b73 fix: prevent identify tool from jumping during page load
Thomas Junk <thomas.junk@intevation.de>
parents: 1167
diff changeset
19 {{ currentMeasurement.quantity }}
68fb4af05b73 fix: prevent identify tool from jumping during page load
Thomas Junk <thomas.junk@intevation.de>
parents: 1167
diff changeset
20 ({{ currentMeasurement.unitSymbol }}):
68fb4af05b73 fix: prevent identify tool from jumping during page load
Thomas Junk <thomas.junk@intevation.de>
parents: 1167
diff changeset
21 {{ currentMeasurement.value }}
1071
f8f398e36e38 client: improve area measurement
Bernhard Reiter <bernhard@intevation.de>
parents: 1063
diff changeset
22 </small>
798
383fac3e5d1e Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 793
diff changeset
23 <div v-for="feature of identifiedFeatures" :key="feature.getId()">
383fac3e5d1e Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 793
diff changeset
24 <div v-if="feature.getId()">
383fac3e5d1e Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 793
diff changeset
25 {{ feature.getId().replace(/[.][^.]*$/,"") /* cut away everything from the last . to the end */}}:
1202
68fb4af05b73 fix: prevent identify tool from jumping during page load
Thomas Junk <thomas.junk@intevation.de>
parents: 1167
diff changeset
26 <small
68fb4af05b73 fix: prevent identify tool from jumping during page load
Thomas Junk <thomas.junk@intevation.de>
parents: 1167
diff changeset
27 v-for="(value, key) in prepareProperties(feature)"
68fb4af05b73 fix: prevent identify tool from jumping during page load
Thomas Junk <thomas.junk@intevation.de>
parents: 1167
diff changeset
28 :key="key"
68fb4af05b73 fix: prevent identify tool from jumping during page load
Thomas Junk <thomas.junk@intevation.de>
parents: 1167
diff changeset
29 >
798
383fac3e5d1e Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 793
diff changeset
30 <div v-if="value">{{key}}:{{value}}</div>
383fac3e5d1e Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 793
diff changeset
31 </small>
383fac3e5d1e Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 793
diff changeset
32 </div>
793
073394629ec6 client: add measurement and improve identify
Bernhard Reiter <bernhard@intevation.de>
parents: 785
diff changeset
33 </div>
770
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
34 </div>
806
5ef542130865 client: add info section
Bernhard Reiter <bernhard@intevation.de>
parents: 798
diff changeset
35 <div class="versioninfo">
1202
68fb4af05b73 fix: prevent identify tool from jumping during page load
Thomas Junk <thomas.junk@intevation.de>
parents: 1167
diff changeset
36 <hr>gemma
68fb4af05b73 fix: prevent identify tool from jumping during page load
Thomas Junk <thomas.junk@intevation.de>
parents: 1167
diff changeset
37 <a href="https://hg.intevation.de/gemma/file/tip">source-code</a>
68fb4af05b73 fix: prevent identify tool from jumping during page load
Thomas Junk <thomas.junk@intevation.de>
parents: 1167
diff changeset
38 {{ versionStr }}
68fb4af05b73 fix: prevent identify tool from jumping during page load
Thomas Junk <thomas.junk@intevation.de>
parents: 1167
diff changeset
39 <br>Some data ©
68fb4af05b73 fix: prevent identify tool from jumping during page load
Thomas Junk <thomas.junk@intevation.de>
parents: 1167
diff changeset
40 <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
41 </div>
770
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
42 </div>
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
43 </div>
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
44 </div>
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
45 </template>
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
46
1167
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
47 <style lang="sass" scoped>
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
48 .features
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
49 max-height: $identify-height
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
50 overflow-y: auto
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
51 margin-bottom: $x-large-offset + $large-offset
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
52
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
53 .versioninfo
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
54 font-size: 60%
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
55 position: absolute
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
56 bottom: $large-offset
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
57
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
58 .identifymenu
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
59 position: relative
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
60 margin-left: $offset
770
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
61
1167
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
62 .identify
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
63 background-color: white
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
64 opacity: $slight-transparent
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
65 text-align: left
770
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
66
1167
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
67 .identifycollapsed
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
68 min-height: $icon-height
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
69 width: $icon-width
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
70 transition: $transition-fast
770
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
71
1167
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
72 .identifyexpanded
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
73 width: $identify-width
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
74
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
75 .minimizer
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
76 position: absolute
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
77 z-index: 2
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
78 right: 0
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
79 margin-top: $x-small-offset
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
80 border-radius: $border-radius
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
81 height: $icon-width
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
82 width: $icon-height
770
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 */
1123
d9e6a1f6f394 moved all collapse flags for UI elements to store
Markus Kottlaender <markus@intevation.de>
parents: 1113
diff changeset
100 import { mapState, mapGetters } from "vuex";
770
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
101
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
102 export default {
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
103 name: "identify",
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
104 computed: {
1014
77202406b1a7 reverted demo build target, include revision number based on version tag
Markus Kottlaender <markus@intevation.de>
parents: 1007
diff changeset
105 ...mapGetters("application", ["versionStr"]),
1123
d9e6a1f6f394 moved all collapse flags for UI elements to store
Markus Kottlaender <markus@intevation.de>
parents: 1113
diff changeset
106 ...mapState("application", ["showIdentify"]),
1113
595654ad3f66 renamed mapstore to map (like other stores)
Markus Kottlaender <markus@intevation.de>
parents: 1112
diff changeset
107 ...mapState("map", ["identifiedFeatures", "currentMeasurement"]),
770
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
108 identifyStyle() {
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
109 return {
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
110 "ui-element": true,
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
111 card: true,
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
112 identify: true,
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
113 shadow: true,
1123
d9e6a1f6f394 moved all collapse flags for UI elements to store
Markus Kottlaender <markus@intevation.de>
parents: 1113
diff changeset
114 identifyexpanded: this.showIdentify,
d9e6a1f6f394 moved all collapse flags for UI elements to store
Markus Kottlaender <markus@intevation.de>
parents: 1113
diff changeset
115 identifycollapsed: !this.showIdentify
770
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
116 };
941
8a80ef09a62c client: improve identify
Bernhard Reiter <bernhard@intevation.de>
parents: 911
diff changeset
117 },
8a80ef09a62c client: improve identify
Bernhard Reiter <bernhard@intevation.de>
parents: 911
diff changeset
118 infoStyle() {
8a80ef09a62c client: improve identify
Bernhard Reiter <bernhard@intevation.de>
parents: 911
diff changeset
119 return {
8a80ef09a62c client: improve identify
Bernhard Reiter <bernhard@intevation.de>
parents: 911
diff changeset
120 info: true,
8a80ef09a62c client: improve identify
Bernhard Reiter <bernhard@intevation.de>
parents: 911
diff changeset
121 "text-info":
8a80ef09a62c client: improve identify
Bernhard Reiter <bernhard@intevation.de>
parents: 911
diff changeset
122 this.identifiedFeatures && this.identifiedFeatures.length > 0
8a80ef09a62c client: improve identify
Bernhard Reiter <bernhard@intevation.de>
parents: 911
diff changeset
123 };
1019
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 1014
diff changeset
124 }
770
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
125 },
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
126 methods: {
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
127 prepareProperties(feature) {
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
128 // 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
129 var properties = feature.getProperties();
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
130 delete properties[feature.getGeometryName()];
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
131 return properties;
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
132 }
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
133 }
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 </script>