Mercurial > gemma

annotate client/src/application/Morphtool.vue @ 886:b1489669ba52

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