Mercurial > gemma
annotate client/src/application/Morphtool.vue @ 829:797063af6dc8
client: complete simple survey selection
* Change code to only request a profile if a selectedMorph is there
and use the selected date and bottleneck id for the backend request.
author | Bernhard Reiter <bernhard@intevation.de> |
---|---|
date | Thu, 27 Sep 2018 23:45:58 +0200 |
parents | 90a601884ff2 |
children | 0b994949a4a0 |
rev | line source |
---|---|
823
d7ae7338872d
client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
1 <template> |
829
797063af6dc8
client: complete simple survey selection
Bernhard Reiter <bernhard@intevation.de>
parents:
826
diff
changeset
|
2 <div v-if="selectedBottleneck || selectedMorph"> |
826
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
3 <div v-if="surveyList" class="ui-element card card-body shadow"> |
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
4 <div class="headline"> |
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
5 <h5>{{selectedBottleneck.get("objnam")}}</h5> |
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
6 </div> |
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
7 <ul class="list-group"> |
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
8 <li v-for="survey of surveyList.surveys" :key="survey.data_info" |
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
9 class="list-group-item" @click.prevent="selectSurvey(survey)"> |
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
10 <a href="#" @click.prevent="" |
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
11 >{{survey.date_info}}</a> |
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
12 </li> |
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
13 </ul> |
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
14 <div @click="clearSelection" |
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
15 class="float-left ui-element d-flex shadow morphtoolminus"> |
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
16 <i class="fa fa-minus morphtoolsminus"></i> |
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
17 </div> |
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
18 </div> |
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
19 <div v-else @click="clearSelection" class="float-right ui-element d-flex shadow morphtool"> |
823
d7ae7338872d
client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
20 <i class="fa fa-object-ungroup"></i> |
d7ae7338872d
client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
21 </div> |
826
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
22 </div> |
823
d7ae7338872d
client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
23 </template> |
d7ae7338872d
client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
24 |
d7ae7338872d
client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
25 <style lang="scss"> |
d7ae7338872d
client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
26 .morphtool { |
d7ae7338872d
client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
27 position: relative; |
d7ae7338872d
client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
28 background-color: white; |
d7ae7338872d
client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
29 padding: $small-offset; |
d7ae7338872d
client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
30 border-radius: $border-radius; |
d7ae7338872d
client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
31 margin-left: $offset; |
d7ae7338872d
client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
32 height: $icon-width; |
d7ae7338872d
client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
33 width: $icon-height; |
d7ae7338872d
client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
34 margin-bottom: $offset; |
826
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
35 margin-right: $offset; |
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
36 z-index: 2; |
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
37 } |
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
38 .morphtoolminus { |
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
39 position: relative; |
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
40 background-color: white; |
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
41 padding: $small-offset; |
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
42 border-radius: $border-radius; |
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
43 height: $icon-width; |
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
44 width: $icon-height; |
823
d7ae7338872d
client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
45 z-index: 2; |
d7ae7338872d
client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
46 } |
d7ae7338872d
client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
47 </style> |
d7ae7338872d
client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
48 |
d7ae7338872d
client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
49 <script> |
d7ae7338872d
client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
50 import { mapGetters, mapState } from "vuex"; |
d7ae7338872d
client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
51 |
826
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
52 import { displayError } from "../application/lib/errors.js"; |
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
53 import { HTTP } from "../application/lib/http"; |
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
54 |
823
d7ae7338872d
client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
55 export default { |
d7ae7338872d
client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
56 name: "morphtool", |
d7ae7338872d
client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
57 data() { |
d7ae7338872d
client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
58 return { |
d7ae7338872d
client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
59 surveyList: null |
d7ae7338872d
client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
60 }; |
d7ae7338872d
client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
61 }, |
d7ae7338872d
client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
62 computed: { |
d7ae7338872d
client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
63 ...mapGetters("application", ["drawMode"]), |
d7ae7338872d
client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
64 ...mapState("mapstore", ["identifiedFeatures", "selectedMorph"]), |
d7ae7338872d
client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
65 selectedBottleneck: function() { |
d7ae7338872d
client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
66 if (this.identifiedFeatures) { |
d7ae7338872d
client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
67 for (let feature of this.identifiedFeatures) { |
d7ae7338872d
client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
68 if (feature.getId().replace(/[.][^.]*$/, "") === "bottlenecks") { |
d7ae7338872d
client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
69 return feature; |
d7ae7338872d
client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
70 } |
d7ae7338872d
client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
71 } |
d7ae7338872d
client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
72 } |
d7ae7338872d
client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
73 return null; |
d7ae7338872d
client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
74 } |
d7ae7338872d
client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
75 }, |
d7ae7338872d
client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
76 watch: { |
826
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
77 selectedBottleneck: function(bottleneckFeature) { |
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
78 if (bottleneckFeature) { |
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
79 let bottleneckName = bottleneckFeature.get("objnam"); |
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
80 if (bottleneckName) { |
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
81 this.queryBottleneck(bottleneckName); |
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
82 } |
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
83 } |
823
d7ae7338872d
client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
84 } |
d7ae7338872d
client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
85 }, |
d7ae7338872d
client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
86 methods: { |
826
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
87 queryBottleneck(name) { |
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
88 HTTP.get("/surveys/" + name, { |
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
89 headers: { |
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
90 "X-Gemma-Auth": localStorage.getItem("token"), |
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
91 "Content-type": "text/xml; charset=UTF-8" |
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
92 } |
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
93 }) |
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
94 .then(response => { |
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
95 this.surveyList = response.data; |
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
96 }) |
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
97 .catch(error => { |
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
98 this.surveyList = null; |
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
99 const { status, data } = error.response; |
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
100 displayError({ |
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
101 title: "Backend Error", |
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
102 message: `${status}: ${data.message || data}` |
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
103 }); |
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
104 }); |
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
105 }, |
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
106 selectSurvey(survey) { |
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
107 this.$store.commit("mapstore/setSelectedMorph", survey); |
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
108 this.surveyList = null; |
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
109 }, |
823
d7ae7338872d
client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
110 clearSelection() { |
d7ae7338872d
client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
111 this.$store.commit("mapstore/setIdentifiedFeatures", []); |
826
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
112 this.$store.commit("mapstore/setSelectedMorph", null); |
90a601884ff2
client: improve survey selection for Morphtool
Bernhard Reiter <bernhard@intevation.de>
parents:
823
diff
changeset
|
113 this.surveyList = null; |
823
d7ae7338872d
client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
114 } |
d7ae7338872d
client: add morphtool again
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
115 } |
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 </script> |