Mercurial > gemma

changeset 826:90a601884ff2

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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;
     }
   }