Mercurial > gemma

changeset 962:d7f34791b18d

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
refac: moved linetool and morphtool
author Thomas Junk <thomas.junk@intevation.de>
date Wed, 17 Oct 2018 15:22:21 +0200
parents e23ae2c83427
children e0825645f00e
files client/src/App.vue client/src/application/Linetool.vue client/src/application/Morphtool.vue client/src/linetool/Linetool.vue client/src/morphtool/Morphtool.vue
diffstat 5 files changed, 211 insertions(+), 211 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/App.vue	Wed Oct 17 12:23:39 2018 +0200
+++ b/client/src/App.vue	Wed Oct 17 15:22:21 2018 +0200
@@ -22,7 +22,7 @@
             </div>
         </div>
         <div class="d-flex flex-column">
-            <router-view/>
+            <router-view />
         </div>
     </div>
 </template>
@@ -89,8 +89,8 @@
 import Topbar from "./application/Topbar";
 import { mapGetters } from "vuex";
 import Userbar from "./application/Userbar";
-import Linetool from "./application/Linetool";
-import Morphtool from "./application/Morphtool";
+import Linetool from "./linetool/Linetool";
+import Morphtool from "./morphtool/Morphtool";
 
 export default {
   name: "app",
--- a/client/src/application/Linetool.vue	Wed Oct 17 12:23:39 2018 +0200
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,52 +0,0 @@
-<template>
-    <div @click="drawLine" class="ui-element d-flex shadow drawtool">
-        <i :class="icon"></i>
-    </div>
-</template>
-
-<style lang="scss">
-.drawtool {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  background-color: white;
-  padding: $small-offset;
-  border-radius: $border-radius;
-  margin-left: $offset;
-  height: $icon-width;
-  width: $icon-height;
-  margin-bottom: $offset;
-  margin-right: $offset;
-  z-index: 2;
-}
-
-.inverted {
-  color: #0077ff;
-}
-</style>
-
-<script>
-import { mapGetters, mapState } from "vuex";
-
-export default {
-  name: "linetool",
-  methods: {
-    drawLine() {
-      this.$store.commit("application/toggleDrawModeLine");
-    }
-  },
-  computed: {
-    ...mapGetters("application", ["drawMode"]),
-    ...mapState("mapstore", ["identifiedFeatures", "selectedMorph"]),
-    icon() {
-      return {
-        fa: true,
-        "fa-pencil": !this.selectedMorph,
-        "fa-pencil inverted": !this.selectedMorph && this.drawMode,
-        "fa-cut": this.selectedMorph,
-        "fa-cut inverted": this.selectedMorph && this.drawMode
-      };
-    }
-  }
-};
-</script>
--- a/client/src/application/Morphtool.vue	Wed Oct 17 12:23:39 2018 +0200
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,156 +0,0 @@
-<template>
-    <div v-if="selectedBottleneck || selectedMorph" class="morphcontainer">
-        <div v-if="surveyList && !drawMode" class="ui-element card card-body shadow">
-            <div class="headline">
-                <h4>{{selectedBottleneck.get("objnam")}}</h4>
-                <hr>
-                <div @click="clearSelection" class="float-left ui-element d-flex morphtoolminus">
-                    <i class="fa fa-close morphtoolsminus"></i>
-                </div>
-            </div>
-            <ul class="list-group surveylist">
-                <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>
-        <div v-if="selectedMorph" @click="clearSelection" class="ui-element shadow morphtool">
-            <div class="d-flex flex-row justify-content-between">
-                <i class="fa fa-close text-danger"></i>
-                <small>Bottleneck:&nbsp;</small>
-                <h6>{{selectedBottleneck.get("objnam")}} <small>( {{selectedMorph.date_info}} )</small></h6>
-            </div>
-        </div>
-    </div>
-</template>
-
-<style scoped lang="scss">
-.headline {
-  margin-right: $offset;
-  margin-left: $offset;
-}
-.morphcontainer {
-  margin-bottom: $offset;
-  margin-left: auto;
-  margin-right: $large-offset + $icon-width;
-  border-radius: $border-radius;
-}
-.surveylist {
-  text-align: left;
-  margin-bottom: $offset !important;
-  margin-left: $offset;
-  margin-right: $offset;
-}
-
-.surveylist li {
-  margin-left: auto;
-  margin-right: auto;
-  border-style: none;
-  padding-bottom: 0rem;
-}
-
-.morphtool {
-  position: relative;
-  background-color: white;
-  padding: $small-offset;
-  border-radius: $border-radius;
-  height: $icon-width;
-  margin-right: $offset;
-  margin-top: auto;
-  margin-bottom: auto;
-  z-index: 2;
-}
-
-.morphcontainer i {
-  margin-right: $small-offset;
-}
-
-.morphtoolminus {
-  position: absolute;
-  top: 0;
-  right: 0;
-  background-color: white;
-  padding: $small-offset;
-  border-radius: $border-radius;
-  height: $icon-width;
-  width: $icon-height;
-  z-index: 2;
-}
-</style>
-
-<script>
-import { mapGetters, mapState } from "vuex";
-
-import { displayError } from "../application/lib/errors.js";
-import { HTTP } from "../application/lib/http";
-
-export default {
-  name: "morphtool",
-  data() {
-    return {
-      surveyList: null
-    };
-  },
-  computed: {
-    ...mapGetters("application", ["drawMode"]),
-    ...mapState("mapstore", ["identifiedFeatures", "selectedMorph"]),
-    selectedBottleneck: function() {
-      if (this.identifiedFeatures && !this.drawMode) {
-        for (let feature of this.identifiedFeatures) {
-          let id = feature.getId();
-          // RegExp.prototype.test() works with number, str and undefined
-          if (/^bottlenecks\./.test(id)) {
-            this.$store.commit("mapstore/setSelectedMorph", null);
-            return feature;
-          }
-        }
-      }
-      return null;
-    }
-  },
-  watch: {
-    selectedBottleneck: function(bottleneckFeature) {
-      if (bottleneckFeature) {
-        let bottleneckName = bottleneckFeature.get("objnam");
-        if (bottleneckName) {
-          this.queryBottleneck(bottleneckName);
-        }
-      }
-    }
-  },
-  methods: {
-    queryBottleneck(name) {
-      // DEBUG console.log("starting to query bottleneck", 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;
-      if (this.drawMode) {
-        this.$store.commit("application/toggleDrawModeLine");
-      }
-    }
-  }
-};
-</script>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/linetool/Linetool.vue	Wed Oct 17 15:22:21 2018 +0200
@@ -0,0 +1,52 @@
+<template>
+    <div @click="drawLine" class="ui-element d-flex shadow drawtool">
+        <i :class="icon"></i>
+    </div>
+</template>
+
+<style lang="scss">
+.drawtool {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  background-color: white;
+  padding: $small-offset;
+  border-radius: $border-radius;
+  margin-left: $offset;
+  height: $icon-width;
+  width: $icon-height;
+  margin-bottom: $offset;
+  margin-right: $offset;
+  z-index: 2;
+}
+
+.inverted {
+  color: #0077ff;
+}
+</style>
+
+<script>
+import { mapGetters, mapState } from "vuex";
+
+export default {
+  name: "linetool",
+  methods: {
+    drawLine() {
+      this.$store.commit("application/toggleDrawModeLine");
+    }
+  },
+  computed: {
+    ...mapGetters("application", ["drawMode"]),
+    ...mapState("mapstore", ["identifiedFeatures", "selectedMorph"]),
+    icon() {
+      return {
+        fa: true,
+        "fa-pencil": !this.selectedMorph,
+        "fa-pencil inverted": !this.selectedMorph && this.drawMode,
+        "fa-cut": this.selectedMorph,
+        "fa-cut inverted": this.selectedMorph && this.drawMode
+      };
+    }
+  }
+};
+</script>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/morphtool/Morphtool.vue	Wed Oct 17 15:22:21 2018 +0200
@@ -0,0 +1,156 @@
+<template>
+    <div v-if="selectedBottleneck || selectedMorph" class="morphcontainer">
+        <div v-if="surveyList && !drawMode" class="ui-element card card-body shadow">
+            <div class="headline">
+                <h4>{{selectedBottleneck.get("objnam")}}</h4>
+                <hr>
+                <div @click="clearSelection" class="float-left ui-element d-flex morphtoolminus">
+                    <i class="fa fa-close morphtoolsminus"></i>
+                </div>
+            </div>
+            <ul class="list-group surveylist">
+                <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>
+        <div v-if="selectedMorph" @click="clearSelection" class="ui-element shadow morphtool">
+            <div class="d-flex flex-row justify-content-between">
+                <i class="fa fa-close text-danger"></i>
+                <small>Bottleneck:&nbsp;</small>
+                <h6>{{selectedBottleneck.get("objnam")}} <small>( {{selectedMorph.date_info}} )</small></h6>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.headline {
+  margin-right: $offset;
+  margin-left: $offset;
+}
+.morphcontainer {
+  margin-bottom: $offset;
+  margin-left: auto;
+  margin-right: $large-offset + $icon-width;
+  border-radius: $border-radius;
+}
+.surveylist {
+  text-align: left;
+  margin-bottom: $offset !important;
+  margin-left: $offset;
+  margin-right: $offset;
+}
+
+.surveylist li {
+  margin-left: auto;
+  margin-right: auto;
+  border-style: none;
+  padding-bottom: 0rem;
+}
+
+.morphtool {
+  position: relative;
+  background-color: white;
+  padding: $small-offset;
+  border-radius: $border-radius;
+  height: $icon-width;
+  margin-right: $offset;
+  margin-top: auto;
+  margin-bottom: auto;
+  z-index: 2;
+}
+
+.morphcontainer i {
+  margin-right: $small-offset;
+}
+
+.morphtoolminus {
+  position: absolute;
+  top: 0;
+  right: 0;
+  background-color: white;
+  padding: $small-offset;
+  border-radius: $border-radius;
+  height: $icon-width;
+  width: $icon-height;
+  z-index: 2;
+}
+</style>
+
+<script>
+import { mapGetters, mapState } from "vuex";
+
+import { displayError } from "../application/lib/errors.js";
+import { HTTP } from "../application/lib/http";
+
+export default {
+  name: "morphtool",
+  data() {
+    return {
+      surveyList: null
+    };
+  },
+  computed: {
+    ...mapGetters("application", ["drawMode"]),
+    ...mapState("mapstore", ["identifiedFeatures", "selectedMorph"]),
+    selectedBottleneck: function() {
+      if (this.identifiedFeatures && !this.drawMode) {
+        for (let feature of this.identifiedFeatures) {
+          let id = feature.getId();
+          // RegExp.prototype.test() works with number, str and undefined
+          if (/^bottlenecks\./.test(id)) {
+            this.$store.commit("mapstore/setSelectedMorph", null);
+            return feature;
+          }
+        }
+      }
+      return null;
+    }
+  },
+  watch: {
+    selectedBottleneck: function(bottleneckFeature) {
+      if (bottleneckFeature) {
+        let bottleneckName = bottleneckFeature.get("objnam");
+        if (bottleneckName) {
+          this.queryBottleneck(bottleneckName);
+        }
+      }
+    }
+  },
+  methods: {
+    queryBottleneck(name) {
+      // DEBUG console.log("starting to query bottleneck", 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;
+      if (this.drawMode) {
+        this.$store.commit("application/toggleDrawModeLine");
+      }
+    }
+  }
+};
+</script>