Mercurial > gemma

annotate client/src/application/Main.vue @ 802:327aa4a18a1c

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Fairway profile WIP
author Thomas Junk <thomas.junk@intevation.de>
date Thu, 27 Sep 2018 13:36:43 +0200
parents 1bee00039973
children 07be3e5f99a9
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">
649
83081ba6c9c1 feat: Linetool added
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
3 <Maplayer :drawMode="drawMode" :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">
802
327aa4a18a1c Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 786
diff changeset
5 <FairwayProfile :fairwayCoordinates="fairwayCoordinates" :waterLevels="waterLevels" :data="currentProfile" :height="height" :width="width" :xScale="xAxis" :yScaleLeft="yAxisLeft" :yScaleRight="yAxisRight" :margin="margins" :totalLength="totalLength"></FairwayProfile>
621
b17a4482d07d feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
6 </div>
593
c4a4dc612191 feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents: 592
diff changeset
7 </div>
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
8 </template>
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
9
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
10 <style lang="scss">
593
c4a4dc612191 feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents: 592
diff changeset
11 .profile {
c4a4dc612191 feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents: 592
diff changeset
12 background-color: white;
c4a4dc612191 feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents: 592
diff changeset
13 height: 50vh;
c4a4dc612191 feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents: 592
diff changeset
14 }
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
15 </style>
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
16
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
17 <script>
592
8e67604d972a moved main.vue to application
Thomas Junk <thomas.junk@intevation.de>
parents: 585
diff changeset
18 import Maplayer from "../map/Maplayer";
593
c4a4dc612191 feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents: 592
diff changeset
19 import FairwayProfile from "../fairway/Fairwayprofile";
c4a4dc612191 feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents: 592
diff changeset
20 import { mapGetters } from "vuex";
646
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
21 import debounce from "debounce";
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
22
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
23 export default {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
24 name: "mainview",
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
25 components: {
593
c4a4dc612191 feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents: 592
diff changeset
26 Maplayer,
c4a4dc612191 feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents: 592
diff changeset
27 FairwayProfile
c4a4dc612191 feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents: 592
diff changeset
28 },
646
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
29 data() {
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
30 return {
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
31 width: null,
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
32 height: null,
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
33 yScaleRight: {
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
34 lo: -6,
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
35 hi: 1
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
36 },
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
37 margin: {
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
38 top: 20,
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
39 right: 40,
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
40 bottom: 20,
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
41 left: 40
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
42 }
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
43 };
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
44 },
593
c4a4dc612191 feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents: 592
diff changeset
45 computed: {
649
83081ba6c9c1 feat: Linetool added
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
46 ...mapGetters("application", ["isSplitscreen", "drawMode"]),
780
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 767
diff changeset
47 ...mapGetters("fairwayprofile", [
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 767
diff changeset
48 "currentProfile",
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 767
diff changeset
49 "minAlt",
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 767
diff changeset
50 "maxAlt",
786
1bee00039973 fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 780
diff changeset
51 "totalLength",
802
327aa4a18a1c Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 786
diff changeset
52 "waterLevels",
327aa4a18a1c Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 786
diff changeset
53 "fairwayCoordinates"
780
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 767
diff changeset
54 ]),
646
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
55 xAxis() {
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
56 return [this.xScale.x, this.xScale.y];
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
57 },
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
58 yAxisLeft() {
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
59 return [this.yScaleLeft.lo, this.yScaleLeft.hi];
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
60 },
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
61 yAxisRight() {
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
62 return [this.yScaleRight.lo, this.yScaleRight.hi];
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 margins() {
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
65 return this.margin;
767
dedf252b3e01 feat: fairwayprofile partially with retrieved data from the server
Thomas Junk <thomas.junk@intevation.de>
parents: 713
diff changeset
66 },
dedf252b3e01 feat: fairwayprofile partially with retrieved data from the server
Thomas Junk <thomas.junk@intevation.de>
parents: 713
diff changeset
67 yScaleLeft() {
dedf252b3e01 feat: fairwayprofile partially with retrieved data from the server
Thomas Junk <thomas.junk@intevation.de>
parents: 713
diff changeset
68 return {
dedf252b3e01 feat: fairwayprofile partially with retrieved data from the server
Thomas Junk <thomas.junk@intevation.de>
parents: 713
diff changeset
69 lo: this.minAlt,
dedf252b3e01 feat: fairwayprofile partially with retrieved data from the server
Thomas Junk <thomas.junk@intevation.de>
parents: 713
diff changeset
70 hi: this.maxAlt
dedf252b3e01 feat: fairwayprofile partially with retrieved data from the server
Thomas Junk <thomas.junk@intevation.de>
parents: 713
diff changeset
71 };
780
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 767
diff changeset
72 },
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 767
diff changeset
73 xScale() {
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 767
diff changeset
74 return {
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 767
diff changeset
75 x: 0,
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 767
diff changeset
76 y: this.totalLength
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 767
diff changeset
77 };
646
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
78 }
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
79 },
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
80 created() {
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
81 window.addEventListener("resize", debounce(this.scaleFairwayProfile), 100);
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
82 },
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
83 updated() {
767
dedf252b3e01 feat: fairwayprofile partially with retrieved data from the server
Thomas Junk <thomas.junk@intevation.de>
parents: 713
diff changeset
84 this.scaleFairwayProfile();
646
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
85 },
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
86 destroyed() {
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
87 window.removeEventListener("resize", debounce(this.scaleFairwayProfile));
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
88 },
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
89 methods: {
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
90 scaleFairwayProfile() {
767
dedf252b3e01 feat: fairwayprofile partially with retrieved data from the server
Thomas Junk <thomas.junk@intevation.de>
parents: 713
diff changeset
91 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
92 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
93 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
94 if (!clientHeight || !clientWidth) return;
646
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
95 this.height = document.querySelector(".profile").clientHeight - 25;
786
1bee00039973 fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 780
diff changeset
96 this.width = document.querySelector(".profile").clientWidth - 200;
646
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
97 }
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
98 }
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
99 };
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
100 </script>