Mercurial > gemma

changeset 1055:1ff8c072df18

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
WIP: Bottleneck list/table
author Markus Kottlaender <markus@intevation.de>
date Thu, 25 Oct 2018 15:05:20 +0200
parents e3f3e645792b
children c9badb264d16
files client/src/App.vue client/src/application/Sidebar.vue client/src/application/stores/application.js client/src/bottlenecks/Bottlenecks.vue client/src/bottlenecks/store.js client/src/store.js
diffstat 6 files changed, 192 insertions(+), 0 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/App.vue	Thu Oct 25 11:31:59 2018 +0200
+++ b/client/src/App.vue	Thu Oct 25 15:05:20 2018 +0200
@@ -7,6 +7,7 @@
             <div class="midcontainer d-flex flex-row">
                 <div class="leftcontainer">
                     <Sidebar></Sidebar>
+                    <Bottlenecks></Bottlenecks>
                 </div>
                 <div class="middle">
 
@@ -99,8 +100,10 @@
  * 
  * Author(s):
  * Thomas Junk <thomas.junk@intevation.de>
+ * Markus Kottländer <markus.kottlaender@intevation.de>
  */
 import Sidebar from "./application/Sidebar";
+import Bottlenecks from "./bottlenecks/Bottlenecks";
 import Topbar from "./application/Topbar";
 import { mapGetters } from "vuex";
 import Userbar from "./application/Userbar";
@@ -119,6 +122,7 @@
   },
   components: {
     Sidebar,
+    Bottlenecks,
     Topbar,
     Userbar,
     Linetool,
--- a/client/src/application/Sidebar.vue	Thu Oct 25 11:31:59 2018 +0200
+++ b/client/src/application/Sidebar.vue	Thu Oct 25 15:05:20 2018 +0200
@@ -4,6 +4,9 @@
             <div class="menupoints" v-if="!this.sidebarCollapsed">
                 <router-link to="/" class="text-body d-flex flex-row nav-link">
                     <i class="fa fa-map-o align-self-center navicon"></i>Riverbed Morphology</router-link>
+                <a href="#" class="text-body d-flex flex-row nav-link" @click="toggleBottlenecks">
+                    Bottlenecks
+                </a>
                 <div v-if="isSysAdmin">
                     <hr />
                     <div class="nav-link d-flex menupadding text-muted">Administration</div>
@@ -36,6 +39,7 @@
  * 
  * Author(s):
  * Thomas Junk <thomas.junk@intevation.de>
+ * Markus Kottländer <markus.kottlaender@intevation.de>
  */
 import { mapGetters } from "vuex";
 
@@ -62,6 +66,12 @@
         "d-print-none": true
       };
     }
+  },
+  methods: {
+    toggleBottlenecks() {
+      this.$store.commit("application/toggleBottlenecks");
+      this.$store.commit("application/toggleSidebar");
+    }
   }
 };
 </script>
--- a/client/src/application/stores/application.js	Thu Oct 25 11:31:59 2018 +0200
+++ b/client/src/application/stores/application.js	Thu Oct 25 15:05:20 2018 +0200
@@ -11,6 +11,7 @@
  * 
  * Author(s):
  * Thomas Junk <thomas.junk@intevation.de>
+ * Markus Kottländer <markus.kottlaender@intevation.de>
  */
 
 import { version } from "../../../package.json";
@@ -36,6 +37,7 @@
     sidebar: {
       iscollapsed: defaultCollapseState
     },
+    bottlenecksCollapsed: true,
     splitsceen: initializeSplitScreen(),
     usermenu: {
       iscollapsed: defaultCollapseState
@@ -89,6 +91,9 @@
     toggleSidebar: state => {
       state.sidebar.iscollapsed = !state.sidebar.iscollapsed;
     },
+    toggleBottlenecks: state => {
+      state.bottlenecksCollapsed = !state.bottlenecksCollapsed;
+    },
     toggleUserMenu: state => {
       state.usermenu.iscollapsed = !state.usermenu.iscollapsed;
     },
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/bottlenecks/Bottlenecks.vue	Thu Oct 25 15:05:20 2018 +0200
@@ -0,0 +1,125 @@
+<template>
+    <div :class="bottlenecksStyle">
+        <div @click="$store.commit('application/toggleBottlenecks');" class="ui-element close-bottlenecks">
+            <i class="fa fa-close"></i>
+        </div>
+
+        <div v-if="!this.bottlenecksCollapsed">
+            <h4>Bottlenecks</h4>
+            <hr class="mb-0">
+            <div style="max-height: 500px; overflow-y: scroll">
+                <table class="table text-left mb-0" style="margin-top: -1px;">
+                    <tr v-for="(bottleneck, index) in bottlenecks">
+                        <td>
+                            <a href="#" class="d-block" @click="moveToBottleneck(bottleneck)">
+                                {{ bottleneck.name }}
+                            </a>
+                        </td>
+                    </tr>
+                </table>
+            </div>
+        </div>
+    </div>
+</template>
+
+<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";
+import { fromLonLat } from "ol/proj";
+
+export default {
+  name: "bottlenecks",
+  computed: {
+    ...mapState("application", ["bottlenecksCollapsed"]),
+    ...mapState("bottlenecks", ["bottlenecks"]),
+    ...mapState("mapstore", ["openLayersMap"]),
+    bottlenecksStyle() {
+      return {
+        "ui-element": true,
+        bottlenecks: true,
+        overlay: true,
+        bottleneckscollapsed: this.bottlenecksCollapsed,
+        bottlenecksextended: !this.bottlenecksCollapsed,
+        shadow: true
+      };
+    }
+  },
+  methods: {
+    // TODO: make this central, duplicates code from application/Topbar.vue
+    moveToBottleneck(bottleneck) {
+      if (bottleneck.geom.type == "Point") {
+        let view = this.openLayersMap.getView();
+        const currentZoom = view.getZoom();
+        const newZoom = Math.max(17, currentZoom);
+        view.animate(
+          {
+            zoom: newZoom,
+            center: fromLonLat(
+              bottleneck.geom.coordinates,
+              view.getProjection()
+            )
+          },
+          700
+        );
+      }
+      this.$store.commit("application/toggleBottlenecks");
+    }
+  },
+  mounted() {
+    this.$store.dispatch("bottlenecks/loadBottlenecks");
+  }
+};
+</script>
+
+<style lang="scss">
+.bottlenecks {
+  position: absolute;
+  z-index: -2;
+  top: $offset;
+  left: 64px;
+  background-color: #ffffff;
+  padding-top: $offset;
+  opacity: $slight-transparent;
+  border-radius: $border-radius;
+}
+
+.bottleneckscollapsed {
+  width: 0;
+  height: 0;
+  transition: $transition-fast;
+}
+
+.bottlenecksextended {
+  min-height: $sidebar-height;
+  width: 500px
+}
+
+.close-bottlenecks {
+  position: absolute;
+  z-index: 2;
+  right: 0;
+  top: 7px;
+  border-radius: $border-radius;
+  height: $icon-width;
+  width: $icon-height;
+  display: none;
+}
+
+.bottlenecksextended .close-bottlenecks {
+  display: block;
+}
+
+</style>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/bottlenecks/store.js	Thu Oct 25 15:05:20 2018 +0200
@@ -0,0 +1,45 @@
+/*
+ * 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 <markuks.kottlaender@intevation.de>
+ */
+import { HTTP } from "../application/lib/http";
+
+const Bottlenecks = {
+  namespaced: true,
+  state: {
+    bottlenecks: []
+  },
+  mutations: {
+    setBottlenecks: (state, bottlenecks) => {
+      state.bottlenecks = bottlenecks;
+    }
+  },
+  actions: {
+    loadBottlenecks({ commit, state }) {
+      return new Promise((resolve, reject) => {
+        HTTP.get("/bottlenecks", {
+          headers: { "X-Gemma-Auth": localStorage.getItem("token") }
+        })
+          .then(response => {
+            commit("setBottlenecks", response.data);
+            resolve(response);
+          })
+          .catch(error => {
+            reject(error);
+          });
+      });
+    }
+  }
+};
+
+export default Bottlenecks;
--- a/client/src/store.js	Thu Oct 25 11:31:59 2018 +0200
+++ b/client/src/store.js	Thu Oct 25 15:05:20 2018 +0200
@@ -11,6 +11,7 @@
  * 
  * Author(s):
  * Thomas Junk <thomas.junk@intevation.de>
+ * Markus Kottländer <markus.kottlaender@intevation.de>
  */
 
 import Vue from "vue";
@@ -21,6 +22,7 @@
 import mapstore from "./map/store";
 import FairwayProfile from "./fairway/store";
 import IdentifyStore from "./identify/store";
+import Bottlenecks from "./bottlenecks/store";
 
 Vue.use(Vuex);
 
@@ -29,6 +31,7 @@
     application: Application,
     fairwayprofile: FairwayProfile,
     identifystore: IdentifyStore,
+    bottlenecks: Bottlenecks,
     mapstore: mapstore,
     user: user,
     usermanagement: usermanagement