Mercurial > gemma
changeset 593:c4a4dc612191
feat: Toggleable fairway profile
A prototypical fairway profile could be made visible
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Fri, 07 Sep 2018 13:45:49 +0200 |
parents | 8e67604d972a |
children | 6987b5c926b8 |
files | client/src/application/Main.vue client/src/application/Topbar.vue client/src/application/stores/application.js client/src/fairway/Fairwayprofile.vue client/src/map/Maplayer.vue |
diffstat | 5 files changed, 65 insertions(+), 23 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/application/Main.vue Fri Sep 07 12:30:20 2018 +0200 +++ b/client/src/application/Main.vue Fri Sep 07 13:45:49 2018 +0200 @@ -1,6 +1,9 @@ <template> <div class="main d-flex flex-column"> - <Maplayer :lat="6155376" :long="1819178" :zoom="11"></Maplayer> + <Maplayer :split="isSplitscreen" :lat="6155376" :long="1819178" :zoom="11"></Maplayer> + <div v-if="isSplitscreen" class="profile d-flex flex-row"> + <FairwayProfile height="300" width="1024" :xScale="[0, 300]" :yScaleLeft="[191, 199]" :yScaleRight="[-6, 1]" :margin="{ top: 20, right: 40, bottom: 20, left: 40 }"></FairwayProfile> + </div> </div> </template> @@ -10,15 +13,26 @@ .menubutton { margin-left: $small-offset; } + +.profile { + background-color: white; + height: 50vh; +} </style> <script> import Maplayer from "../map/Maplayer"; +import FairwayProfile from "../fairway/Fairwayprofile"; +import { mapGetters } from "vuex"; export default { name: "mainview", components: { - Maplayer + Maplayer, + FairwayProfile + }, + computed: { + ...mapGetters("application", ["isSplitscreen"]) } }; </script>
--- a/client/src/application/Topbar.vue Fri Sep 07 12:30:20 2018 +0200 +++ b/client/src/application/Topbar.vue Fri Sep 07 13:45:49 2018 +0200 @@ -11,6 +11,9 @@ </div> <input id="search" type="text" class="form-control ui-element search searchbar"> </div> + <div> + <i @click="splitScreen" class="ui-element splitscreen fa fa-window-restore"></i> + </div> <Layers v-if="routeName != 'usermanagement'"></Layers> </div> </template> @@ -18,6 +21,13 @@ <style lang="scss"> @import "./assets/application.scss"; +.splitscreen { + background-color: white; + padding: 0.5rem; + margin-right: 0.5rem; + margin-left: 1rem; +} + .menubutton { background-color: white; padding: 0.5rem; @@ -60,6 +70,9 @@ methods: { toggleSidebar() { this.$store.commit("application/toggleSidebar"); + }, + splitScreen() { + this.$store.commit("application/toggleSplitScreen"); } }, computed: {
--- a/client/src/application/stores/application.js Fri Sep 07 12:30:20 2018 +0200 +++ b/client/src/application/stores/application.js Fri Sep 07 13:45:49 2018 +0200 @@ -8,6 +8,10 @@ sidebar: { iscollapsed: defaultCollapseState }, + splitsceen: { + active: false, + mode: "v" + }, countries: ["AT", "SK", "HU", "HR", "RS", "BiH", "BG", "RO", "UA"] }, getters: { @@ -22,12 +26,21 @@ }, secondaryLogo: state => { return state.secondaryLogo; + }, + isSplitscreen: state => { + return state.splitsceen.active; + }, + splitMode: state => { + return state.splitsceen.mode; } }, mutations: { toggleSidebar: state => { state.sidebar.iscollapsed = !state.sidebar.iscollapsed; }, + toggleSplitScreen: state => { + state.splitsceen.active = !state.splitsceen.active; + }, resetSidebar: state => { state.sidebar.iscollapsed = defaultCollapseState; },
--- a/client/src/fairway/Fairwayprofile.vue Fri Sep 07 12:30:20 2018 +0200 +++ b/client/src/fairway/Fairwayprofile.vue Fri Sep 07 13:45:49 2018 +0200 @@ -22,7 +22,8 @@ const GROUND_COLOR = "#4A2F06"; const sampleData = [ - { x: 0, y: -3.0 }, + { x: 0, y: 1.0 }, + { x: 10, y: 1.0 }, { x: 25, y: -2.0 }, { x: 50, y: -4.5 }, { x: 75, y: -4.0 }, @@ -33,7 +34,8 @@ { x: 200, y: -3.0 }, { x: 225, y: -3.5 }, { x: 250, y: -3.0 }, - { x: 300, y: -2.5 } + { x: 290, y: 1 }, + { x: 300, y: 1 } ]; export default {
--- a/client/src/map/Maplayer.vue Fri Sep 07 12:30:20 2018 +0200 +++ b/client/src/map/Maplayer.vue Fri Sep 07 13:45:49 2018 +0200 @@ -1,25 +1,15 @@ <template> - <div class="mapdisplay"> - <div id="map"></div> - <!-- <div class="profile d-flex flex-row"> - <Fairwayprofile height="300" width="1024" :xScale="[0, 300]" :yScaleLeft="[191, 199]" :yScaleRight="[-6, 1]" :margin="{ top: 20, right: 40, bottom: 20, left: 40 }"></Fairwayprofile> - </div> --> - </div> + <div id="map" :class="mapStyle"></div> </template> <style lang="scss"> @import "../application/assets/application.scss"; -.profile { - background-color: white; - height: 50vh-$topbarheight; +.mapsplit { + height: 50vh; } -.mapdisplay { - height: 100vh; -} - -#map { +.mapfull { height: 100vh; } @@ -40,14 +30,10 @@ // import { greaterThan as greaterThanFilter } from "ol/format/filter.js"; import { WFS, GeoJSON } from "ol/format.js"; import { mapGetters } from "vuex"; -import Fairwayprofile from "../fairway/Fairwayprofile"; export default { name: "maplayer", - props: ["lat", "long", "zoom"], - components: { - Fairwayprofile - }, + props: ["lat", "long", "zoom", "split"], data() { return { projection: "EPSG:3857", @@ -56,6 +42,12 @@ }, computed: { ...mapGetters("mapstore", ["layers"]), + mapStyle() { + return { + mapfull: !this.split, + mapsplit: this.split + }; + }, layerData() { return this.layers.map(x => { return x.data; @@ -63,6 +55,14 @@ } }, methods: {}, + watch: { + split() { + const map = this.openLayersMap; + setTimeout(function() { + map.updateSize(); + }, 1); + } + }, mounted() { var that = this; this.openLayersMap = new Map({