Mercurial > gemma
view client/src/application/Main.vue @ 1027:04a9e78dcc5f
refac: remove morphstore. not necessary
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Wed, 24 Oct 2018 14:17:51 +0200 |
parents | a55f20dc8d8d |
children | bf10a7f990cc |
line wrap: on
line source
<template> <div class="main d-flex flex-column"> <Maplayer :drawMode="drawMode" :split="isSplitscreen" :lat="6155376" :long="1819178" :zoom="11" ></Maplayer> <div v-if="isSplitscreen" class="profile d-flex flex-row"> <FairwayProfile :additionalSurveys="additionalSurveys" :minAlt="minAlt" maxAlt="maxAlt" :selectedWaterLevel="selectedWaterLevel" :fairwayCoordinates="fairwayCoordinates" :waterLevels="waterLevels" :data="coordinates" :height="height" :width="width" :xScale="xAxis" :yScaleLeft="yAxisLeft" :yScaleRight="yAxisRight" :margin="margins" :totalLength="totalLength" ></FairwayProfile> </div> </div> </template> <style lang="scss"> .profile { background-color: white; height: 50vh; } </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): * Thomas Junk <thomas.junk@intevation.de> */ import Maplayer from "../map/Maplayer"; import FairwayProfile from "../fairway/Fairwayprofile"; import { mapGetters, mapState } from "vuex"; import debounce from "debounce"; export default { name: "mainview", components: { Maplayer, FairwayProfile }, data() { return { width: null, height: null, margin: { top: 20, right: 40, bottom: 30, left: 40 } }; }, computed: { ...mapGetters("application", ["isSplitscreen", "drawMode"]), ...mapState("fairwayprofile", [ "currentProfile", "minAlt", "maxAlt", "totalLength", "waterLevels", "fairwayCoordinates", "selectedWaterLevel", "availableSurveys" ]), ...mapState("fairwayprofile", ["selectedMorph"]), coordinates() { const currentSurveyDate = this.selectedMorph.date_info; return this.currentProfile[currentSurveyDate]; }, additionalSurveys() { if (!this.availableSurveys) return []; return this.availableSurveys.surveys.filter(x => { return x.date_info !== this.selectedMorph.date_info; }); }, xAxis() { return [this.xScale.x, this.xScale.y]; }, yAxisLeft() { const hi = Math.max(this.maxAlt, this.selectedWaterLevel); return [this.yScaleLeft.lo, hi]; }, yAxisRight() { return [-this.maxAlt, 0]; }, margins() { return this.margin; }, yScaleLeft() { return { lo: this.minAlt, hi: this.maxAlt }; }, xScale() { return { x: 0, y: this.totalLength }; } }, created() { window.addEventListener("resize", debounce(this.scaleFairwayProfile), 100); window.addEventListener("onbeforeprint", this.test); }, updated() { this.scaleFairwayProfile(); }, destroyed() { window.removeEventListener("resize", debounce(this.scaleFairwayProfile)); }, methods: { test(evt) { console.log("test: ", evt); }, scaleFairwayProfile() { if (!document.querySelector(".profile")) return; const clientHeight = document.querySelector(".profile").clientHeight; const clientWidth = document.querySelector(".profile").clientWidth; if (!clientHeight || !clientWidth) return; this.height = document.querySelector(".profile").clientHeight - 25; this.width = document.querySelector(".profile").clientWidth - 220; } } }; </script>