Mercurial > gemma
changeset 826:90a601884ff2
client: improve survey selection for Morphtool
* Add backend request after a bottleneck has been selected.
Show a list of survey dates and save the selected survey to the store.
author | Bernhard Reiter <bernhard@intevation.de> |
---|---|
date | Thu, 27 Sep 2018 23:19:31 +0200 |
parents | a5452a001b46 |
children | 4e093c5560c3 797063af6dc8 |
files | client/src/application/Morphtool.vue client/src/map/store.js |
diffstat | 2 files changed, 65 insertions(+), 6 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/application/Morphtool.vue Thu Sep 27 21:30:52 2018 +0200 +++ b/client/src/application/Morphtool.vue Thu Sep 27 23:19:31 2018 +0200 @@ -1,7 +1,25 @@ <template> - <div v-if="selectedBottleneck" @click="clearSelection" class="float-right ui-element d-flex shadow morphtool"> + <div v-if="selectedBottleneck"> + <div v-if="surveyList" class="ui-element card card-body shadow"> + <div class="headline"> + <h5>{{selectedBottleneck.get("objnam")}}</h5> + </div> + <ul class="list-group"> + <li v-for="survey of surveyList.surveys" :key="survey.data_info" + class="list-group-item" @click.prevent="selectSurvey(survey)"> + <a href="#" @click.prevent="" + >{{survey.date_info}}</a> + </li> + </ul> + <div @click="clearSelection" + class="float-left ui-element d-flex shadow morphtoolminus"> + <i class="fa fa-minus morphtoolsminus"></i> + </div> + </div> + <div v-else @click="clearSelection" class="float-right ui-element d-flex shadow morphtool"> <i class="fa fa-object-ungroup"></i> </div> + </div> </template> <style lang="scss"> @@ -14,7 +32,16 @@ height: $icon-width; width: $icon-height; margin-bottom: $offset; - margin-right: 55px; + margin-right: $offset; + z-index: 2; +} +.morphtoolminus { + position: relative; + background-color: white; + padding: $small-offset; + border-radius: $border-radius; + height: $icon-width; + width: $icon-height; z-index: 2; } </style> @@ -22,6 +49,9 @@ <script> import { mapGetters, mapState } from "vuex"; +import { displayError } from "../application/lib/errors.js"; +import { HTTP } from "../application/lib/http"; + export default { name: "morphtool", data() { @@ -44,14 +74,43 @@ } }, watch: { - selectedBottleneck: function(bottleneck) { - console.log("now query for", bottleneck); - this.surveyList = [{ a: "b" }, { c: "d" }]; + selectedBottleneck: function(bottleneckFeature) { + if (bottleneckFeature) { + let bottleneckName = bottleneckFeature.get("objnam"); + if (bottleneckName) { + this.queryBottleneck(bottleneckName); + } + } } }, methods: { + queryBottleneck(name) { + HTTP.get("/surveys/" + name, { + headers: { + "X-Gemma-Auth": localStorage.getItem("token"), + "Content-type": "text/xml; charset=UTF-8" + } + }) + .then(response => { + this.surveyList = response.data; + }) + .catch(error => { + this.surveyList = null; + const { status, data } = error.response; + displayError({ + title: "Backend Error", + message: `${status}: ${data.message || data}` + }); + }); + }, + selectSurvey(survey) { + this.$store.commit("mapstore/setSelectedMorph", survey); + this.surveyList = null; + }, clearSelection() { this.$store.commit("mapstore/setIdentifiedFeatures", []); + this.$store.commit("mapstore/setSelectedMorph", null); + this.surveyList = null; } } };
--- a/client/src/map/store.js Thu Sep 27 21:30:52 2018 +0200 +++ b/client/src/map/store.js Thu Sep 27 23:19:31 2018 +0200 @@ -195,7 +195,7 @@ setCurrentMeasurement: (state, measurement) => { state.currentMeasurement = measurement; }, - setSelectedMorpth: (state, selectedMorph) => { + setSelectedMorph: (state, selectedMorph) => { state.selectedMorph = selectedMorph; } }