Mercurial > gemma

annotate client/src/morphtool/Morphtool.vue @ 1140:2e06bc53b002

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
separating line/polygon/cut tools in UI Measurements can now be made while a bottleneck and sounding data is selected. The open layers interaction object(s) are now in the vuex store to disable them from other components (Morphtool.vue). Line and Polygon are now to separate buttons.
author Markus Kottlaender <markus@intevation.de>
date Mon, 12 Nov 2018 14:45:07 +0100
parents d9e6a1f6f394
children 5f98d0c9d738
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
823
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
1 <template>
1011
9d4af4b1c5c8 refac: make template logic more clear
Thomas Junk <thomas.junk@intevation.de>
parents: 1002
diff changeset
2 <div class="morphcontainer">
1111
f106aee673e7 selected bottleneck and surveys now handled by bottleneck store
Markus Kottlaender <markus@intevation.de>
parents: 1064
diff changeset
3 <div v-if="selectedBottleneck && surveys && !selectedSurvey" class="ui-element card card-body shadow">
f106aee673e7 selected bottleneck and surveys now handled by bottleneck store
Markus Kottlaender <markus@intevation.de>
parents: 1064
diff changeset
4 <div class="headline">
f106aee673e7 selected bottleneck and surveys now handled by bottleneck store
Markus Kottlaender <markus@intevation.de>
parents: 1064
diff changeset
5 <h4>{{ selectedBottleneck }}</h4>
f106aee673e7 selected bottleneck and surveys now handled by bottleneck store
Markus Kottlaender <markus@intevation.de>
parents: 1064
diff changeset
6 <hr>
f106aee673e7 selected bottleneck and surveys now handled by bottleneck store
Markus Kottlaender <markus@intevation.de>
parents: 1064
diff changeset
7 <div
f106aee673e7 selected bottleneck and surveys now handled by bottleneck store
Markus Kottlaender <markus@intevation.de>
parents: 1064
diff changeset
8 @click="clearSelection"
f106aee673e7 selected bottleneck and surveys now handled by bottleneck store
Markus Kottlaender <markus@intevation.de>
parents: 1064
diff changeset
9 class="float-left ui-element d-flex morphtoolminus"
f106aee673e7 selected bottleneck and surveys now handled by bottleneck store
Markus Kottlaender <markus@intevation.de>
parents: 1064
diff changeset
10 >
f106aee673e7 selected bottleneck and surveys now handled by bottleneck store
Markus Kottlaender <markus@intevation.de>
parents: 1064
diff changeset
11 <i class="fa fa-close morphtoolsminus"></i>
892
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
12 </div>
886
b1489669ba52 morphtool layout fixed
Thomas Junk <thomas.junk@intevation.de>
parents: 836
diff changeset
13 </div>
1111
f106aee673e7 selected bottleneck and surveys now handled by bottleneck store
Markus Kottlaender <markus@intevation.de>
parents: 1064
diff changeset
14 <ul class="list-group surveylist">
f106aee673e7 selected bottleneck and surveys now handled by bottleneck store
Markus Kottlaender <markus@intevation.de>
parents: 1064
diff changeset
15 <li
f106aee673e7 selected bottleneck and surveys now handled by bottleneck store
Markus Kottlaender <markus@intevation.de>
parents: 1064
diff changeset
16 v-for="survey of surveys"
f106aee673e7 selected bottleneck and surveys now handled by bottleneck store
Markus Kottlaender <markus@intevation.de>
parents: 1064
diff changeset
17 :key="survey.data_info"
f106aee673e7 selected bottleneck and surveys now handled by bottleneck store
Markus Kottlaender <markus@intevation.de>
parents: 1064
diff changeset
18 class="list-group-item"
f106aee673e7 selected bottleneck and surveys now handled by bottleneck store
Markus Kottlaender <markus@intevation.de>
parents: 1064
diff changeset
19 @click.prevent="$store.commit('bottlenecks/setSelectedSurvey', survey)"
f106aee673e7 selected bottleneck and surveys now handled by bottleneck store
Markus Kottlaender <markus@intevation.de>
parents: 1064
diff changeset
20 >
f106aee673e7 selected bottleneck and surveys now handled by bottleneck store
Markus Kottlaender <markus@intevation.de>
parents: 1064
diff changeset
21 <a href="#" @click.prevent>{{ survey.date_info }}</a>
f106aee673e7 selected bottleneck and surveys now handled by bottleneck store
Markus Kottlaender <markus@intevation.de>
parents: 1064
diff changeset
22 </li>
f106aee673e7 selected bottleneck and surveys now handled by bottleneck store
Markus Kottlaender <markus@intevation.de>
parents: 1064
diff changeset
23 </ul>
892
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
24 </div>
1111
f106aee673e7 selected bottleneck and surveys now handled by bottleneck store
Markus Kottlaender <markus@intevation.de>
parents: 1064
diff changeset
25 <div v-if="selectedSurvey" @click="clearSelection" class="ui-element shadow morphtool">
892
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
26 <div class="d-flex flex-row justify-content-between">
894
1cd749dcb6a3 red cross
Thomas Junk <thomas.junk@intevation.de>
parents: 893
diff changeset
27 <i class="fa fa-close text-danger"></i>
893
5ea4c3f5d2a7 refinement of bottleneck selection
Thomas Junk <thomas.junk@intevation.de>
parents: 892
diff changeset
28 <small>Bottleneck:&nbsp;</small>
1027
04a9e78dcc5f refac: remove morphstore. not necessary
Thomas Junk <thomas.junk@intevation.de>
parents: 1019
diff changeset
29 <h6>
1111
f106aee673e7 selected bottleneck and surveys now handled by bottleneck store
Markus Kottlaender <markus@intevation.de>
parents: 1064
diff changeset
30 {{ selectedBottleneck }}
f106aee673e7 selected bottleneck and surveys now handled by bottleneck store
Markus Kottlaender <markus@intevation.de>
parents: 1064
diff changeset
31 <small>( {{ selectedSurvey.date_info }} )</small>
1027
04a9e78dcc5f refac: remove morphstore. not necessary
Thomas Junk <thomas.junk@intevation.de>
parents: 1019
diff changeset
32 </h6>
886
b1489669ba52 morphtool layout fixed
Thomas Junk <thomas.junk@intevation.de>
parents: 836
diff changeset
33 </div>
b1489669ba52 morphtool layout fixed
Thomas Junk <thomas.junk@intevation.de>
parents: 836
diff changeset
34 </div>
826
90a601884ff2 client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents: 823
diff changeset
35 </div>
823
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
36 </template>
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
37
892
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
38 <style scoped lang="scss">
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
39 .headline {
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
40 margin-right: $offset;
886
b1489669ba52 morphtool layout fixed
Thomas Junk <thomas.junk@intevation.de>
parents: 836
diff changeset
41 margin-left: $offset;
b1489669ba52 morphtool layout fixed
Thomas Junk <thomas.junk@intevation.de>
parents: 836
diff changeset
42 }
892
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
43 .morphcontainer {
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
44 margin-bottom: $offset;
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
45 margin-left: auto;
899
038ba806f323 fix: typo
Thomas Junk <thomas.junk@intevation.de>
parents: 894
diff changeset
46 margin-right: $large-offset + $icon-width;
892
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
47 border-radius: $border-radius;
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
48 }
886
b1489669ba52 morphtool layout fixed
Thomas Junk <thomas.junk@intevation.de>
parents: 836
diff changeset
49 .surveylist {
892
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
50 text-align: left;
886
b1489669ba52 morphtool layout fixed
Thomas Junk <thomas.junk@intevation.de>
parents: 836
diff changeset
51 margin-bottom: $offset !important;
b1489669ba52 morphtool layout fixed
Thomas Junk <thomas.junk@intevation.de>
parents: 836
diff changeset
52 margin-left: $offset;
b1489669ba52 morphtool layout fixed
Thomas Junk <thomas.junk@intevation.de>
parents: 836
diff changeset
53 margin-right: $offset;
b1489669ba52 morphtool layout fixed
Thomas Junk <thomas.junk@intevation.de>
parents: 836
diff changeset
54 }
892
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
55
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
56 .surveylist li {
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
57 margin-left: auto;
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
58 margin-right: auto;
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
59 border-style: none;
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
60 padding-bottom: 0rem;
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
61 }
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
62
823
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
63 .morphtool {
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
64 position: relative;
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
65 background-color: white;
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
66 padding: $small-offset;
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
67 border-radius: $border-radius;
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
68 height: $icon-width;
826
90a601884ff2 client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents: 823
diff changeset
69 margin-right: $offset;
892
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
70 margin-top: auto;
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
71 margin-bottom: auto;
826
90a601884ff2 client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents: 823
diff changeset
72 z-index: 2;
90a601884ff2 client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents: 823
diff changeset
73 }
892
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
74
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
75 .morphcontainer i {
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
76 margin-right: $small-offset;
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
77 }
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
78
826
90a601884ff2 client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents: 823
diff changeset
79 .morphtoolminus {
886
b1489669ba52 morphtool layout fixed
Thomas Junk <thomas.junk@intevation.de>
parents: 836
diff changeset
80 position: absolute;
892
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
81 top: 0;
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
82 right: 0;
826
90a601884ff2 client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents: 823
diff changeset
83 background-color: white;
90a601884ff2 client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents: 823
diff changeset
84 padding: $small-offset;
90a601884ff2 client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents: 823
diff changeset
85 border-radius: $border-radius;
90a601884ff2 client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents: 823
diff changeset
86 height: $icon-width;
90a601884ff2 client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents: 823
diff changeset
87 width: $icon-height;
823
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
88 z-index: 2;
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
89 }
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
90 </style>
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
91
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
92 <script>
1019
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 1015
diff changeset
93 /*
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 1015
diff changeset
94 * This is Free Software under GNU Affero General Public License v >= 3.0
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 1015
diff changeset
95 * without warranty, see README.md and license for details.
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 1015
diff changeset
96 *
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 1015
diff changeset
97 * SPDX-License-Identifier: AGPL-3.0-or-later
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 1015
diff changeset
98 * License-Filename: LICENSES/AGPL-3.0.txt
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 1015
diff changeset
99 *
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 1015
diff changeset
100 * Copyright (C) 2018 by via donau
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 1015
diff changeset
101 * – Österreichische Wasserstraßen-Gesellschaft mbH
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 1015
diff changeset
102 * Software engineering by Intevation GmbH
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 1015
diff changeset
103 *
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 1015
diff changeset
104 * Author(s):
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 1015
diff changeset
105 * Thomas Junk <thomas.junk@intevation.de>
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 1015
diff changeset
106 */
1140
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents: 1123
diff changeset
107 import { mapState, mapGetters } from "vuex";
826
90a601884ff2 client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents: 823
diff changeset
108
823
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
109 export default {
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
110 name: "morphtool",
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
111 computed: {
1140
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents: 1123
diff changeset
112 ...mapGetters("map", ["getLayerByName"]),
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents: 1123
diff changeset
113 ...mapState("map", ["openLayersMap", "cutTool"]),
1118
7e788814cbde removed unnecessary imports and formatted code
Markus Kottlaender <markus@intevation.de>
parents: 1115
diff changeset
114 ...mapState("bottlenecks", [
7e788814cbde removed unnecessary imports and formatted code
Markus Kottlaender <markus@intevation.de>
parents: 1115
diff changeset
115 "selectedBottleneck",
7e788814cbde removed unnecessary imports and formatted code
Markus Kottlaender <markus@intevation.de>
parents: 1115
diff changeset
116 "surveys",
7e788814cbde removed unnecessary imports and formatted code
Markus Kottlaender <markus@intevation.de>
parents: 1115
diff changeset
117 "selectedSurvey"
7e788814cbde removed unnecessary imports and formatted code
Markus Kottlaender <markus@intevation.de>
parents: 1115
diff changeset
118 ])
823
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
119 },
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
120 methods: {
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
121 clearSelection() {
1111
f106aee673e7 selected bottleneck and surveys now handled by bottleneck store
Markus Kottlaender <markus@intevation.de>
parents: 1064
diff changeset
122 this.$store.dispatch("bottlenecks/setSelectedBottleneck", null);
1123
d9e6a1f6f394 moved all collapse flags for UI elements to store
Markus Kottlaender <markus@intevation.de>
parents: 1118
diff changeset
123 this.$store.commit("application/showSplitscreen", false);
1140
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents: 1123
diff changeset
124 this.$store.commit("map/cutMode", false);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents: 1123
diff changeset
125 this.getLayerByName("Cut Tool").data.getSource().clear();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents: 1123
diff changeset
126 this.openLayersMap.removeInteraction(this.cutTool)
823
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
127 }
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
128 }
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
129 };
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
130 </script>