Mercurial > gemma

annotate client/src/application/Morphtool.vue @ 892:81b84ad962f8

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
morphtool streamlined
author Thomas Junk <thomas.junk@intevation.de>
date Tue, 02 Oct 2018 14:34:57 +0200
parents 074ce4891466
children 5ea4c3f5d2a7
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>
886
b1489669ba52 morphtool layout fixed
Thomas Junk <thomas.junk@intevation.de>
parents: 836
diff changeset
2 <div v-if="selectedBottleneck || selectedMorph" class="morphcontainer">
891
074ce4891466 fix: selection of profile data only when not in draw mode
Thomas Junk <thomas.junk@intevation.de>
parents: 886
diff changeset
3 <div v-if="surveyList && !drawmode" class="ui-element card card-body shadow">
886
b1489669ba52 morphtool layout fixed
Thomas Junk <thomas.junk@intevation.de>
parents: 836
diff changeset
4 <div class="headline">
892
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
5 <h4>{{selectedBottleneck.get("objnam")}}</h4>
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
6 <hr>
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
7 <div @click="clearSelection" class="float-left ui-element d-flex morphtoolminus">
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
8 <i class="fa fa-close morphtoolsminus"></i>
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
9 </div>
886
b1489669ba52 morphtool layout fixed
Thomas Junk <thomas.junk@intevation.de>
parents: 836
diff changeset
10 </div>
b1489669ba52 morphtool layout fixed
Thomas Junk <thomas.junk@intevation.de>
parents: 836
diff changeset
11 <ul class="list-group surveylist">
b1489669ba52 morphtool layout fixed
Thomas Junk <thomas.junk@intevation.de>
parents: 836
diff changeset
12 <li v-for="survey of surveyList.surveys" :key="survey.data_info" class="list-group-item" @click.prevent="selectSurvey(survey)">
b1489669ba52 morphtool layout fixed
Thomas Junk <thomas.junk@intevation.de>
parents: 836
diff changeset
13 <a href="#" @click.prevent="">{{survey.date_info}}</a>
b1489669ba52 morphtool layout fixed
Thomas Junk <thomas.junk@intevation.de>
parents: 836
diff changeset
14 </li>
b1489669ba52 morphtool layout fixed
Thomas Junk <thomas.junk@intevation.de>
parents: 836
diff changeset
15 </ul>
892
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
16 </div>
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
17 <div v-if="selectedMorph" @click="clearSelection" class="ui-element shadow morphtool">
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
18 <div class="d-flex flex-row justify-content-between">
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
19 <i class="fa fa-close"></i>
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
20 <h6>{{selectedBottleneck.get("objnam")}}</h6>
886
b1489669ba52 morphtool layout fixed
Thomas Junk <thomas.junk@intevation.de>
parents: 836
diff changeset
21 </div>
b1489669ba52 morphtool layout fixed
Thomas Junk <thomas.junk@intevation.de>
parents: 836
diff changeset
22 </div>
826
90a601884ff2 client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents: 823
diff changeset
23 </div>
823
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
24 </template>
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
25
892
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
26 <style scoped lang="scss">
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
27 .headline {
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
28 margin-right: $offset;
886
b1489669ba52 morphtool layout fixed
Thomas Junk <thomas.junk@intevation.de>
parents: 836
diff changeset
29 margin-left: $offset;
b1489669ba52 morphtool layout fixed
Thomas Junk <thomas.junk@intevation.de>
parents: 836
diff changeset
30 }
892
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
31 .morphcontainer {
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
32 margin-bottom: $offset;
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
33 margin-left: auto;
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
34 margin-right: auto;
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
35 border-radius: $border-radius;
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
36 }
886
b1489669ba52 morphtool layout fixed
Thomas Junk <thomas.junk@intevation.de>
parents: 836
diff changeset
37 .surveylist {
892
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
38 text-align: left;
886
b1489669ba52 morphtool layout fixed
Thomas Junk <thomas.junk@intevation.de>
parents: 836
diff changeset
39 margin-bottom: $offset !important;
b1489669ba52 morphtool layout fixed
Thomas Junk <thomas.junk@intevation.de>
parents: 836
diff changeset
40 margin-left: $offset;
b1489669ba52 morphtool layout fixed
Thomas Junk <thomas.junk@intevation.de>
parents: 836
diff changeset
41 margin-right: $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
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
44 .surveylist li {
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
45 margin-left: auto;
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
46 margin-right: auto;
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
47 border-style: none;
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
48 padding-bottom: 0rem;
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
49 }
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
50
823
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
51 .morphtool {
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
52 position: relative;
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
53 background-color: white;
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
54 padding: $small-offset;
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
55 border-radius: $border-radius;
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
56 height: $icon-width;
826
90a601884ff2 client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents: 823
diff changeset
57 margin-right: $offset;
892
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
58 margin-top: auto;
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
59 margin-bottom: auto;
826
90a601884ff2 client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents: 823
diff changeset
60 z-index: 2;
90a601884ff2 client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents: 823
diff changeset
61 }
892
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
62
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
63 .morphcontainer i {
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
64 margin-right: $small-offset;
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
65 }
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
66
826
90a601884ff2 client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents: 823
diff changeset
67 .morphtoolminus {
886
b1489669ba52 morphtool layout fixed
Thomas Junk <thomas.junk@intevation.de>
parents: 836
diff changeset
68 position: absolute;
892
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
69 top: 0;
81b84ad962f8 morphtool streamlined
Thomas Junk <thomas.junk@intevation.de>
parents: 891
diff changeset
70 right: 0;
826
90a601884ff2 client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents: 823
diff changeset
71 background-color: white;
90a601884ff2 client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents: 823
diff changeset
72 padding: $small-offset;
90a601884ff2 client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents: 823
diff changeset
73 border-radius: $border-radius;
90a601884ff2 client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents: 823
diff changeset
74 height: $icon-width;
90a601884ff2 client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents: 823
diff changeset
75 width: $icon-height;
823
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
76 z-index: 2;
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
77 }
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
78 </style>
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
79
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
80 <script>
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
81 import { mapGetters, mapState } from "vuex";
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
82
826
90a601884ff2 client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents: 823
diff changeset
83 import { displayError } from "../application/lib/errors.js";
90a601884ff2 client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents: 823
diff changeset
84 import { HTTP } from "../application/lib/http";
90a601884ff2 client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents: 823
diff changeset
85
823
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
86 export default {
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
87 name: "morphtool",
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
88 data() {
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
89 return {
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
90 surveyList: null
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 },
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
93 computed: {
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
94 ...mapGetters("application", ["drawMode"]),
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
95 ...mapState("mapstore", ["identifiedFeatures", "selectedMorph"]),
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
96 selectedBottleneck: function() {
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
97 if (this.identifiedFeatures) {
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
98 for (let feature of this.identifiedFeatures) {
836
0b994949a4a0 client: make Morphtool selection more robust
Bernhard Reiter <bernhard@intevation.de>
parents: 829
diff changeset
99 let id = feature.getId();
0b994949a4a0 client: make Morphtool selection more robust
Bernhard Reiter <bernhard@intevation.de>
parents: 829
diff changeset
100 if (id && id.replace(/[.][^.]*$/, "") === "bottlenecks") {
823
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
101 return feature;
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
102 }
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
103 }
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
104 }
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
105 return null;
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
106 }
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
107 },
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
108 watch: {
826
90a601884ff2 client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents: 823
diff changeset
109 selectedBottleneck: function(bottleneckFeature) {
90a601884ff2 client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents: 823
diff changeset
110 if (bottleneckFeature) {
90a601884ff2 client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents: 823
diff changeset
111 let bottleneckName = bottleneckFeature.get("objnam");
90a601884ff2 client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents: 823
diff changeset
112 if (bottleneckName) {
90a601884ff2 client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents: 823
diff changeset
113 this.queryBottleneck(bottleneckName);
90a601884ff2 client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents: 823
diff changeset
114 }
90a601884ff2 client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents: 823
diff changeset
115 }
823
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
116 }
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
117 },
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
118 methods: {
826
90a601884ff2 client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents: 823
diff changeset
119 queryBottleneck(name) {
836
0b994949a4a0 client: make Morphtool selection more robust
Bernhard Reiter <bernhard@intevation.de>
parents: 829
diff changeset
120 // DEBUG console.log("starting to query bottleneck", name);
826
90a601884ff2 client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents: 823
diff changeset
121 HTTP.get("/surveys/" + name, {
90a601884ff2 client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents: 823
diff changeset
122 headers: {
90a601884ff2 client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents: 823
diff changeset
123 "X-Gemma-Auth": localStorage.getItem("token"),
90a601884ff2 client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents: 823
diff changeset
124 "Content-type": "text/xml; charset=UTF-8"
90a601884ff2 client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents: 823
diff changeset
125 }
90a601884ff2 client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents: 823
diff changeset
126 })
90a601884ff2 client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents: 823
diff changeset
127 .then(response => {
90a601884ff2 client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents: 823
diff changeset
128 this.surveyList = response.data;
90a601884ff2 client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents: 823
diff changeset
129 })
90a601884ff2 client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents: 823
diff changeset
130 .catch(error => {
90a601884ff2 client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents: 823
diff changeset
131 this.surveyList = null;
90a601884ff2 client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents: 823
diff changeset
132 const { status, data } = error.response;
90a601884ff2 client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents: 823
diff changeset
133 displayError({
90a601884ff2 client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents: 823
diff changeset
134 title: "Backend Error",
90a601884ff2 client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents: 823
diff changeset
135 message: `${status}: ${data.message || data}`
90a601884ff2 client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents: 823
diff changeset
136 });
90a601884ff2 client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents: 823
diff changeset
137 });
90a601884ff2 client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents: 823
diff changeset
138 },
90a601884ff2 client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents: 823
diff changeset
139 selectSurvey(survey) {
90a601884ff2 client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents: 823
diff changeset
140 this.$store.commit("mapstore/setSelectedMorph", survey);
90a601884ff2 client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents: 823
diff changeset
141 this.surveyList = null;
90a601884ff2 client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents: 823
diff changeset
142 },
823
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
143 clearSelection() {
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
144 this.$store.commit("mapstore/setIdentifiedFeatures", []);
826
90a601884ff2 client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents: 823
diff changeset
145 this.$store.commit("mapstore/setSelectedMorph", null);
90a601884ff2 client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents: 823
diff changeset
146 this.surveyList = null;
823
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
147 }
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
148 }
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
149 };
d7ae7338872d client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
150 </script>