Mercurial > gemma

changeset 1251:d1903250390b

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
splitted mophtool into two components one shows the survey results and the other the info bar when a bottleneck is selected (and no profile is shown)
author Markus Kottlaender <markus@intevation.de>
date Wed, 21 Nov 2018 12:10:12 +0100
parents 104d41ea7c15
children da51fd6a72a0
files client/src/App.vue client/src/identify/Identify.vue client/src/layers/Layers.vue client/src/morphtool/Infobar.vue client/src/morphtool/Morphtool.vue
diffstat 5 files changed, 61 insertions(+), 43 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/App.vue	Wed Nov 21 11:42:00 2018 +0100
+++ b/client/src/App.vue	Wed Nov 21 12:10:12 2018 +0100
@@ -19,6 +19,7 @@
             <div class="flex-fill"></div>
             <div class="d-flex flex-row align-items-end">
                 <Morphtool v-if="routeName == 'mainview'"></Morphtool>
+                <Infobar v-if="routeName == 'mainview'"></Infobar>
             </div>
             <Zoom v-if="routeName == 'mainview'"></Zoom>
         </div>
@@ -81,6 +82,7 @@
   },
   components: {
     Morphtool: () => import("./morphtool/Morphtool"),
+    Infobar: () => import("./morphtool/Infobar"),
     Pdftool: () => import("./pdftool/Pdftool"),
     Zoom: () => import("./zoom/zoom"),
     Identify: () => import("./identify/Identify"),
--- a/client/src/identify/Identify.vue	Wed Nov 21 11:42:00 2018 +0100
+++ b/client/src/identify/Identify.vue	Wed Nov 21 12:10:12 2018 +0100
@@ -60,8 +60,9 @@
  * Software engineering by Intevation GmbH
  *
  * Author(s):
- *   Thomas Junk <thomas.junk@intevation.de>
- *   Bernhard E. Reiter <bernhard.reiter@intevation.de>
+ * Thomas Junk <thomas.junk@intevation.de>
+ * Bernhard E. Reiter <bernhard.reiter@intevation.de>
+ * Markus Kottländer <markus.kottlaender@intevation.de>
  */
 import { mapState, mapGetters } from "vuex";
 
--- a/client/src/layers/Layers.vue	Wed Nov 21 11:42:00 2018 +0100
+++ b/client/src/layers/Layers.vue	Wed Nov 21 12:10:12 2018 +0100
@@ -33,6 +33,7 @@
  * 
  * Author(s):
  * Thomas Junk <thomas.junk@intevation.de>
+ * Markus Kottländer <markus.kottlaender@intevation.de>
  */
 import Layerselect from "./Layerselect";
 import { mapGetters, mapState } from "vuex";
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/morphtool/Infobar.vue	Wed Nov 21 12:10:12 2018 +0100
@@ -0,0 +1,45 @@
+<template>
+    <div v-if="selectedSurvey && !showSplitscreen" class="ui-element shadow infobar rounded bg-white ml-auto mb-3 mr-3">
+        <div class="d-flex flex-row justify-content-between">
+            <h6 class="my-auto px-2">
+                {{ selectedBottleneck }}
+                ({{ selectedSurvey.date_info }})
+            </h6>
+            <i class="fa fa-angle-up py-2 px-2 border-left" @click="$store.commit('application/showSplitscreen', true)" v-if="Object.keys(currentProfile).length"></i>
+            <i class="fa fa-close text-danger py-2 px-2 border-left" @click="$store.dispatch('fairwayprofile/clearSelection');"></i>
+        </div>
+    </div>
+</template>
+
+<style lang="sass" scoped>
+.infobar
+  height: $icon-width
+  z-index: 2
+</style>
+
+<script>
+/*
+ * This is Free Software under GNU Affero General Public License v >= 3.0
+ * without warranty, see README.md and license for details.
+ * 
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ * License-Filename: LICENSES/AGPL-3.0.txt
+ * 
+ * Copyright (C) 2018 by via donau 
+ *   – Österreichische Wasserstraßen-Gesellschaft mbH
+ * Software engineering by Intevation GmbH
+ * 
+ * Author(s):
+ * Markus Kottländer <markus.kottlaender@intevation.de>
+ */
+import { mapState } from "vuex";
+
+export default {
+  name: "infobar",
+  computed: {
+    ...mapState("application", ["showSplitscreen"]),
+    ...mapState("fairwayprofile", ["currentProfile"]),
+    ...mapState("bottlenecks", ["selectedBottleneck", "selectedSurvey"])
+  }
+};
+</script>
--- a/client/src/morphtool/Morphtool.vue	Wed Nov 21 11:42:00 2018 +0100
+++ b/client/src/morphtool/Morphtool.vue	Wed Nov 21 12:10:12 2018 +0100
@@ -1,51 +1,23 @@
 <template>
-    <div class="mb-3 mr-3 ml-auto rounded position-relative">
-        <div v-if="selectedBottleneck && surveys && !selectedSurvey" class="ui-element bg-white rounded p-3 shadow">
-            <h4 class="text-center mx-4">{{ selectedBottleneck }}</h4>
-            <hr>
-            <div
-                @click="$store.dispatch('fairwayprofile/clearSelection');"
-                class="ui-element d-flex morphtoolminus position-absolute"
-            >
-                <i class="fa fa-close p-2"></i>
-            </div>
-            <div>
+    <div :class="['box ui-element rounded bg-white ml-auto mr-3 mb-3 text-nowrap', { expanded: selectedBottleneck && surveys && !selectedSurvey }]">
+        <div style="width: 15rem">
+            <h5 class="mb-0 py-2 border-bottom">
+              {{ selectedBottleneck }}
+            </h5>
+            <div class="p-3">
                 <div
-                    v-for="survey of surveys"
+                    v-for="(survey, i) of surveys"
                     :key="survey.data_info"
-                    class="my-1"
+                    :class="{ 'mt-1': i }"
                     @click.prevent="$store.commit('bottlenecks/setSelectedSurvey', survey)"
                 >
                     <a href="#" @click.prevent>{{ survey.date_info }}</a>
                 </div>
             </div>
         </div>
-        <div v-if="selectedSurvey && !showSplitscreen" class="ui-element shadow morphtool rounded position-relative bg-white my-auto">
-            <div class="d-flex flex-row justify-content-between">
-                <h6 class="my-auto px-2">
-                    {{ selectedBottleneck }}
-                    ({{ selectedSurvey.date_info }})
-                </h6>
-                <i class="fa fa-angle-up py-2 px-2 border-left" @click="$store.commit('application/showSplitscreen', true)" v-if="Object.keys(currentProfile).length"></i>
-                <i class="fa fa-close text-danger py-2 px-2 border-left" @click="$store.dispatch('fairwayprofile/clearSelection');"></i>
-            </div>
-        </div>
     </div>
 </template>
 
-<style scoped lang="sass">
-.morphtool
-  height: $icon-width
-  z-index: 2
-
-.morphtoolminus
-  top: 0
-  right: 0
-  height: $icon-width
-  width: $icon-height
-  z-index: 2
-</style>
-
 <script>
 /*
  * This is Free Software under GNU Affero General Public License v >= 3.0
@@ -60,16 +32,13 @@
  * 
  * Author(s):
  * Thomas Junk <thomas.junk@intevation.de>
+ * Markus Kottländer <markus.kottlaender@intevation.de>
  */
-import { mapState, mapGetters } from "vuex";
+import { mapState } from "vuex";
 
 export default {
   name: "morphtool",
   computed: {
-    ...mapGetters("map", ["getLayerByName"]),
-    ...mapState("map", ["openLayersMap", "cutTool"]),
-    ...mapState("application", ["showSplitscreen"]),
-    ...mapState("fairwayprofile", ["currentProfile"]),
     ...mapState("bottlenecks", [
       "selectedBottleneck",
       "surveys",