Mercurial > gemma
changeset 1251:d1903250390b
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",