changeset 823:d7ae7338872d

client: add morphtool again
author Bernhard Reiter <bernhard@intevation.de>
date Thu, 27 Sep 2018 19:26:38 +0200
parents 8926c413db21
children 221e64cb0c82
files client/src/App.vue client/src/application/Morphtool.vue
diffstat 2 files changed, 62 insertions(+), 2 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/App.vue	Thu Sep 27 18:52:41 2018 +0200
+++ b/client/src/App.vue	Thu Sep 27 19:26:38 2018 +0200
@@ -22,7 +22,7 @@
             </div>
         </div>
         <div class="d-flex flex-column">
-            <router-view />
+            <router-view/>
         </div>
     </div>
 </template>
@@ -90,6 +90,7 @@
 import { mapGetters } from "vuex";
 import Userbar from "./application/Userbar";
 import Linetool from "./application/Linetool";
+import Morphtool from "./application/Morphtool";
 
 export default {
   name: "app",
@@ -104,7 +105,8 @@
     Sidebar,
     Topbar,
     Userbar,
-    Linetool
+    Linetool,
+    Morphtool
   }
 };
 </script>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/application/Morphtool.vue	Thu Sep 27 19:26:38 2018 +0200
@@ -0,0 +1,58 @@
+<template>
+    <div v-if="selectedBottleneck" @click="clearSelection" class="float-right ui-element d-flex shadow morphtool">
+        <i class="fa fa-object-ungroup"></i>
+    </div>
+</template>
+
+<style lang="scss">
+.morphtool {
+  position: relative;
+  background-color: white;
+  padding: $small-offset;
+  border-radius: $border-radius;
+  margin-left: $offset;
+  height: $icon-width;
+  width: $icon-height;
+  margin-bottom: $offset;
+  margin-right: 55px;
+  z-index: 2;
+}
+</style>
+
+<script>
+import { mapGetters, mapState } from "vuex";
+
+export default {
+  name: "morphtool",
+  data() {
+    return {
+      surveyList: null
+    };
+  },
+  computed: {
+    ...mapGetters("application", ["drawMode"]),
+    ...mapState("mapstore", ["identifiedFeatures", "selectedMorph"]),
+    selectedBottleneck: function() {
+      if (this.identifiedFeatures) {
+        for (let feature of this.identifiedFeatures) {
+          if (feature.getId().replace(/[.][^.]*$/, "") === "bottlenecks") {
+            return feature;
+          }
+        }
+      }
+      return null;
+    }
+  },
+  watch: {
+    selectedBottleneck: function(bottleneck) {
+      console.log("now query for", bottleneck);
+      this.surveyList = [{ a: "b" }, { c: "d" }];
+    }
+  },
+  methods: {
+    clearSelection() {
+      this.$store.commit("mapstore/setIdentifiedFeatures", []);
+    }
+  }
+};
+</script>