Mercurial > gemma
changeset 1055:1ff8c072df18
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