Mercurial > gemma

annotate client/src/application/Main.vue @ 941:8a80ef09a62c

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: improve identify * Remove trigger that unfolds the box when features are identified. Rationale: This makes the user interface too "jumpy". * Instead add a style change for the icon to indicate if data is available. It will use the bootstrap `text-info` style class. * Simplify code that detects if a bottleneck was identified.
author Bernhard Reiter <bernhard@intevation.de>
date Tue, 09 Oct 2018 17:00:49 +0200
parents d612bc4dc3e9
children 15c3cc6f29a4
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">
844
c2cba785ca4d WIP Fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents: 841
diff changeset
5 <FairwayProfile :minAlt="minAlt" maxAlt="maxAlt" :selectedWaterLevel="selectedWaterLevel" :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 margin: {
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
34 top: 20,
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
35 right: 40,
901
36731fbe51a2 bottom margin increased for bottleneckdeselection
Thomas Junk <thomas.junk@intevation.de>
parents: 879
diff changeset
36 bottom: 30,
646
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
37 left: 40
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
38 }
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
39 };
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
40 },
593
c4a4dc612191 feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents: 592
diff changeset
41 computed: {
649
83081ba6c9c1 feat: Linetool added
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
42 ...mapGetters("application", ["isSplitscreen", "drawMode"]),
780
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 767
diff changeset
43 ...mapGetters("fairwayprofile", [
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 767
diff changeset
44 "currentProfile",
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 767
diff changeset
45 "minAlt",
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 767
diff changeset
46 "maxAlt",
786
1bee00039973 fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 780
diff changeset
47 "totalLength",
802
327aa4a18a1c Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 786
diff changeset
48 "waterLevels",
841
07be3e5f99a9 WIP Fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents: 802
diff changeset
49 "fairwayCoordinates",
07be3e5f99a9 WIP Fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents: 802
diff changeset
50 "selectedWaterLevel"
780
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 767
diff changeset
51 ]),
646
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
52 xAxis() {
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
53 return [this.xScale.x, this.xScale.y];
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
54 },
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
55 yAxisLeft() {
845
596ef3b46028 WIP Fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents: 844
diff changeset
56 const hi = Math.max(this.maxAlt, this.selectedWaterLevel);
596ef3b46028 WIP Fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents: 844
diff changeset
57 return [this.yScaleLeft.lo, hi];
646
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
58 },
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
59 yAxisRight() {
909
d612bc4dc3e9 profile redrawn
Thomas Junk <thomas.junk@intevation.de>
parents: 901
diff changeset
60 return [-this.maxAlt, 0];
646
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
61 },
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
62 margins() {
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
63 return this.margin;
767
dedf252b3e01 feat: fairwayprofile partially with retrieved data from the server
Thomas Junk <thomas.junk@intevation.de>
parents: 713
diff changeset
64 },
dedf252b3e01 feat: fairwayprofile partially with retrieved data from the server
Thomas Junk <thomas.junk@intevation.de>
parents: 713
diff changeset
65 yScaleLeft() {
dedf252b3e01 feat: fairwayprofile partially with retrieved data from the server
Thomas Junk <thomas.junk@intevation.de>
parents: 713
diff changeset
66 return {
dedf252b3e01 feat: fairwayprofile partially with retrieved data from the server
Thomas Junk <thomas.junk@intevation.de>
parents: 713
diff changeset
67 lo: this.minAlt,
dedf252b3e01 feat: fairwayprofile partially with retrieved data from the server
Thomas Junk <thomas.junk@intevation.de>
parents: 713
diff changeset
68 hi: this.maxAlt
dedf252b3e01 feat: fairwayprofile partially with retrieved data from the server
Thomas Junk <thomas.junk@intevation.de>
parents: 713
diff changeset
69 };
780
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 767
diff changeset
70 },
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 767
diff changeset
71 xScale() {
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 767
diff changeset
72 return {
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 767
diff changeset
73 x: 0,
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 767
diff changeset
74 y: this.totalLength
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 767
diff changeset
75 };
646
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
76 }
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
77 },
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
78 created() {
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
79 window.addEventListener("resize", debounce(this.scaleFairwayProfile), 100);
879
52fe3e20f750 client: improve print styling
Bernhard Reiter <bernhard@intevation.de>
parents: 849
diff changeset
80 window.addEventListener("onbeforeprint", this.test);
646
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
81 },
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
82 updated() {
767
dedf252b3e01 feat: fairwayprofile partially with retrieved data from the server
Thomas Junk <thomas.junk@intevation.de>
parents: 713
diff changeset
83 this.scaleFairwayProfile();
646
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
84 },
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
85 destroyed() {
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
86 window.removeEventListener("resize", debounce(this.scaleFairwayProfile));
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 methods: {
879
52fe3e20f750 client: improve print styling
Bernhard Reiter <bernhard@intevation.de>
parents: 849
diff changeset
89 test(evt) {
52fe3e20f750 client: improve print styling
Bernhard Reiter <bernhard@intevation.de>
parents: 849
diff changeset
90 console.log("test: ", evt);
52fe3e20f750 client: improve print styling
Bernhard Reiter <bernhard@intevation.de>
parents: 849
diff changeset
91 },
646
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
92 scaleFairwayProfile() {
767
dedf252b3e01 feat: fairwayprofile partially with retrieved data from the server
Thomas Junk <thomas.junk@intevation.de>
parents: 713
diff changeset
93 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
94 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
95 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
96 if (!clientHeight || !clientWidth) return;
646
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
97 this.height = document.querySelector(".profile").clientHeight - 25;
786
1bee00039973 fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 780
diff changeset
98 this.width = document.querySelector(".profile").clientWidth - 200;
646
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
99 }
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
100 }
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
101 };
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
102 </script>