Mercurial > gemma

annotate client/src/application/Main.vue @ 1076:e99b2b7d76a1

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
feat: fairwayprofile configurable scale-delta for profile added
author Thomas Junk <thomas.junk@intevation.de>
date Fri, 26 Oct 2018 13:29:46 +0200
parents c1989ebe1d8a
children 80b47f5d41c3
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
1 <template>
621
b17a4482d07d feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
2 <div class="main d-flex flex-column">
1075
c1989ebe1d8a feat: invert fairwayprofile scale
Thomas Junk <thomas.junk@intevation.de>
parents: 1064
diff changeset
3 <Maplayer :split="isSplitscreen" :lat="6155376" :long="1819178" :zoom="11"></Maplayer>
621
b17a4482d07d feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
4 <div v-if="isSplitscreen" class="profile d-flex flex-row">
1025
a55f20dc8d8d refac: store profiles by date
Thomas Junk <thomas.junk@intevation.de>
parents: 1019
diff changeset
5 <FairwayProfile
a55f20dc8d8d refac: store profiles by date
Thomas Junk <thomas.junk@intevation.de>
parents: 1019
diff changeset
6 :additionalSurveys="additionalSurveys"
a55f20dc8d8d refac: store profiles by date
Thomas Junk <thomas.junk@intevation.de>
parents: 1019
diff changeset
7 :height="height"
a55f20dc8d8d refac: store profiles by date
Thomas Junk <thomas.junk@intevation.de>
parents: 1019
diff changeset
8 :width="width"
a55f20dc8d8d refac: store profiles by date
Thomas Junk <thomas.junk@intevation.de>
parents: 1019
diff changeset
9 :xScale="xAxis"
a55f20dc8d8d refac: store profiles by date
Thomas Junk <thomas.junk@intevation.de>
parents: 1019
diff changeset
10 :yScaleLeft="yAxisLeft"
a55f20dc8d8d refac: store profiles by date
Thomas Junk <thomas.junk@intevation.de>
parents: 1019
diff changeset
11 :yScaleRight="yAxisRight"
a55f20dc8d8d refac: store profiles by date
Thomas Junk <thomas.junk@intevation.de>
parents: 1019
diff changeset
12 :margin="margins"
a55f20dc8d8d refac: store profiles by date
Thomas Junk <thomas.junk@intevation.de>
parents: 1019
diff changeset
13 ></FairwayProfile>
621
b17a4482d07d feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
14 </div>
593
c4a4dc612191 feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents: 592
diff changeset
15 </div>
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
16 </template>
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
17
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
18 <style lang="scss">
593
c4a4dc612191 feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents: 592
diff changeset
19 .profile {
c4a4dc612191 feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents: 592
diff changeset
20 background-color: white;
c4a4dc612191 feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents: 592
diff changeset
21 height: 50vh;
c4a4dc612191 feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents: 592
diff changeset
22 }
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
23 </style>
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
24
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
25 <script>
1019
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 1015
diff changeset
26 /*
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 1015
diff changeset
27 * This is Free Software under GNU Affero General Public License v >= 3.0
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 1015
diff changeset
28 * without warranty, see README.md and license for details.
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 1015
diff changeset
29 *
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 1015
diff changeset
30 * SPDX-License-Identifier: AGPL-3.0-or-later
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 1015
diff changeset
31 * License-Filename: LICENSES/AGPL-3.0.txt
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 1015
diff changeset
32 *
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 1015
diff changeset
33 * Copyright (C) 2018 by via donau
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 1015
diff changeset
34 * – Österreichische Wasserstraßen-Gesellschaft mbH
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 1015
diff changeset
35 * Software engineering by Intevation GmbH
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 1015
diff changeset
36 *
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 1015
diff changeset
37 * Author(s):
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 1015
diff changeset
38 * Thomas Junk <thomas.junk@intevation.de>
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 1015
diff changeset
39 */
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 1015
diff changeset
40
592
8e67604d972a moved main.vue to application
Thomas Junk <thomas.junk@intevation.de>
parents: 585
diff changeset
41 import Maplayer from "../map/Maplayer";
593
c4a4dc612191 feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents: 592
diff changeset
42 import FairwayProfile from "../fairway/Fairwayprofile";
1013
15c3cc6f29a4 refac: fairwayprofile store cleanup
Thomas Junk <thomas.junk@intevation.de>
parents: 909
diff changeset
43 import { mapGetters, mapState } from "vuex";
646
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
44 import debounce from "debounce";
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
45
1076
e99b2b7d76a1 feat: fairwayprofile configurable scale-delta for profile added
Thomas Junk <thomas.junk@intevation.de>
parents: 1075
diff changeset
46 const DELTA = 0.2;
e99b2b7d76a1 feat: fairwayprofile configurable scale-delta for profile added
Thomas Junk <thomas.junk@intevation.de>
parents: 1075
diff changeset
47
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
48 export default {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
49 name: "mainview",
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
50 components: {
593
c4a4dc612191 feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents: 592
diff changeset
51 Maplayer,
c4a4dc612191 feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents: 592
diff changeset
52 FairwayProfile
c4a4dc612191 feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents: 592
diff changeset
53 },
646
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
54 data() {
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
55 return {
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
56 width: null,
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
57 height: null,
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
58 margin: {
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
59 top: 20,
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
60 right: 40,
901
36731fbe51a2 bottom margin increased for bottleneckdeselection
Thomas Junk <thomas.junk@intevation.de>
parents: 879
diff changeset
61 bottom: 30,
646
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
62 left: 40
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
63 }
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
64 };
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
65 },
593
c4a4dc612191 feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents: 592
diff changeset
66 computed: {
1062
d3bdad8ed8d3 client: simply code structure and add author
Bernhard Reiter <bernhard@intevation.de>
parents: 1045
diff changeset
67 ...mapGetters("application", ["isSplitscreen"]),
1013
15c3cc6f29a4 refac: fairwayprofile store cleanup
Thomas Junk <thomas.junk@intevation.de>
parents: 909
diff changeset
68 ...mapState("fairwayprofile", [
780
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 767
diff changeset
69 "currentProfile",
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 767
diff changeset
70 "minAlt",
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 767
diff changeset
71 "maxAlt",
786
1bee00039973 fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 780
diff changeset
72 "totalLength",
802
327aa4a18a1c Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 786
diff changeset
73 "waterLevels",
841
07be3e5f99a9 WIP Fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents: 802
diff changeset
74 "fairwayCoordinates",
1015
d2f30a784fb3 feat: add selectfield to fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents: 1013
diff changeset
75 "selectedWaterLevel",
d2f30a784fb3 feat: add selectfield to fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents: 1013
diff changeset
76 "availableSurveys"
780
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 767
diff changeset
77 ]),
1027
04a9e78dcc5f refac: remove morphstore. not necessary
Thomas Junk <thomas.junk@intevation.de>
parents: 1025
diff changeset
78 ...mapState("fairwayprofile", ["selectedMorph"]),
1015
d2f30a784fb3 feat: add selectfield to fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents: 1013
diff changeset
79 additionalSurveys() {
d2f30a784fb3 feat: add selectfield to fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents: 1013
diff changeset
80 if (!this.availableSurveys) return [];
d2f30a784fb3 feat: add selectfield to fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents: 1013
diff changeset
81 return this.availableSurveys.surveys.filter(x => {
d2f30a784fb3 feat: add selectfield to fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents: 1013
diff changeset
82 return x.date_info !== this.selectedMorph.date_info;
d2f30a784fb3 feat: add selectfield to fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents: 1013
diff changeset
83 });
d2f30a784fb3 feat: add selectfield to fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents: 1013
diff changeset
84 },
646
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
85 xAxis() {
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
86 return [this.xScale.x, this.xScale.y];
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
87 },
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
88 yAxisLeft() {
845
596ef3b46028 WIP Fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents: 844
diff changeset
89 const hi = Math.max(this.maxAlt, this.selectedWaterLevel);
596ef3b46028 WIP Fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents: 844
diff changeset
90 return [this.yScaleLeft.lo, hi];
646
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
91 },
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
92 yAxisRight() {
1076
e99b2b7d76a1 feat: fairwayprofile configurable scale-delta for profile added
Thomas Junk <thomas.junk@intevation.de>
parents: 1075
diff changeset
93 return [this.maxAlt * 1 + DELTA, -DELTA];
646
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
94 },
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
95 margins() {
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
96 return this.margin;
767
dedf252b3e01 feat: fairwayprofile partially with retrieved data from the server
Thomas Junk <thomas.junk@intevation.de>
parents: 713
diff changeset
97 },
dedf252b3e01 feat: fairwayprofile partially with retrieved data from the server
Thomas Junk <thomas.junk@intevation.de>
parents: 713
diff changeset
98 yScaleLeft() {
dedf252b3e01 feat: fairwayprofile partially with retrieved data from the server
Thomas Junk <thomas.junk@intevation.de>
parents: 713
diff changeset
99 return {
dedf252b3e01 feat: fairwayprofile partially with retrieved data from the server
Thomas Junk <thomas.junk@intevation.de>
parents: 713
diff changeset
100 lo: this.minAlt,
dedf252b3e01 feat: fairwayprofile partially with retrieved data from the server
Thomas Junk <thomas.junk@intevation.de>
parents: 713
diff changeset
101 hi: this.maxAlt
dedf252b3e01 feat: fairwayprofile partially with retrieved data from the server
Thomas Junk <thomas.junk@intevation.de>
parents: 713
diff changeset
102 };
780
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 767
diff changeset
103 },
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 767
diff changeset
104 xScale() {
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 767
diff changeset
105 return {
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 767
diff changeset
106 x: 0,
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 767
diff changeset
107 y: this.totalLength
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 767
diff changeset
108 };
646
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
109 }
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
110 },
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
111 created() {
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
112 window.addEventListener("resize", debounce(this.scaleFairwayProfile), 100);
879
52fe3e20f750 client: improve print styling
Bernhard Reiter <bernhard@intevation.de>
parents: 849
diff changeset
113 window.addEventListener("onbeforeprint", this.test);
646
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
114 },
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
115 updated() {
767
dedf252b3e01 feat: fairwayprofile partially with retrieved data from the server
Thomas Junk <thomas.junk@intevation.de>
parents: 713
diff changeset
116 this.scaleFairwayProfile();
646
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
117 },
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
118 destroyed() {
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
119 window.removeEventListener("resize", debounce(this.scaleFairwayProfile));
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
120 },
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
121 methods: {
879
52fe3e20f750 client: improve print styling
Bernhard Reiter <bernhard@intevation.de>
parents: 849
diff changeset
122 test(evt) {
52fe3e20f750 client: improve print styling
Bernhard Reiter <bernhard@intevation.de>
parents: 849
diff changeset
123 console.log("test: ", evt);
52fe3e20f750 client: improve print styling
Bernhard Reiter <bernhard@intevation.de>
parents: 849
diff changeset
124 },
646
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
125 scaleFairwayProfile() {
767
dedf252b3e01 feat: fairwayprofile partially with retrieved data from the server
Thomas Junk <thomas.junk@intevation.de>
parents: 713
diff changeset
126 if (!document.querySelector(".profile")) return;
dedf252b3e01 feat: fairwayprofile partially with retrieved data from the server
Thomas Junk <thomas.junk@intevation.de>
parents: 713
diff changeset
127 const clientHeight = document.querySelector(".profile").clientHeight;
dedf252b3e01 feat: fairwayprofile partially with retrieved data from the server
Thomas Junk <thomas.junk@intevation.de>
parents: 713
diff changeset
128 const clientWidth = document.querySelector(".profile").clientWidth;
dedf252b3e01 feat: fairwayprofile partially with retrieved data from the server
Thomas Junk <thomas.junk@intevation.de>
parents: 713
diff changeset
129 if (!clientHeight || !clientWidth) return;
646
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
130 this.height = document.querySelector(".profile").clientHeight - 25;
1015
d2f30a784fb3 feat: add selectfield to fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents: 1013
diff changeset
131 this.width = document.querySelector(".profile").clientWidth - 220;
646
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
132 }
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
133 }
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
134 };
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
135 </script>