Mercurial > gemma

annotate client/src/fairway/Fairwayprofile.vue @ 1146:74e180ad3d6b

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
fairway profile UI improvements splitscreen button position at top of profile container bottleneck name and survey date as headline in profile container moved logout button to sidebar menu to avoid unnecessary overlapping
author Markus Kottlaender <markus@intevation.de>
date Tue, 13 Nov 2018 11:12:12 +0100
parents dc3f0277628a
children fb5c83d4ea1d
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>
1146
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
2 <div :class="['position-relative', {show: showSplitscreen}]" v-if="Object.keys(currentProfile).length">
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
3 <button
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
4 class="rounded bg-white border-0 position-absolute splitscreen-toggle shadow"
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
5 @click="$store.commit('application/showSplitscreen', false)"
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
6 v-if="showSplitscreen">
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
7 <i class="fa fa-angle-down"></i>
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
8 </button>
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
9 <button
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
10 class="rounded bg-white border-0 position-absolute clear-selection shadow"
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
11 @click="$store.dispatch('fairwayprofile/clearSelection');"
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
12 v-if="showSplitscreen">
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
13 <i class="fa fa-times text-danger"></i>
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
14 </button>
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
15 <div class="profile d-flex flex-column">
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
16 <h5 class="mb-0 mt-2">{{ selectedBottleneck }} ({{ selectedSurvey.date_info }})</h5>
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
17 <div class="d-flex flex-fill">
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
18 <div class="fairwayprofile flex-fill"></div>
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
19 <div class="additionalsurveys d-flex flex-column">
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
20 <small class="label">Available Additional Surveys</small>
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
21 <select v-model="additionalSurvey">
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
22 <option value="">None</option>
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
23 <option
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
24 v-for="survey in additionalSurveys"
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
25 :key="survey.date_info"
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
26 :value="survey"
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
27 >{{survey.date_info}}</option>
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
28 </select>
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
29 <small class="mt-2">
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
30 <b>Start:</b>
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
31 <br>
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
32 Lat: {{ startPoint[1] }}
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
33 <br>
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
34 Lon: {{ startPoint[0] }}
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
35 <br>
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
36 <b>End:</b>
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
37 <br>
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
38 Lat: {{ endPoint[1] }}
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
39 <br>
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
40 Lon: {{ endPoint[0] }}
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
41 <br>
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
42 </small>
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
43 </div>
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
44 </div>
1015
d2f30a784fb3 feat: add selectfield to fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents: 909
diff changeset
45 </div>
646
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
46 </div>
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
47 </template>
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
48
1146
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
49 <style lang="sass" scoped>
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
50 .profile
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
51 background-color: white
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
52 width: 100vw
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
53 height: 0
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
54 overflow: hidden
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
55 position: relative
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
56 z-index: 2
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
57
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
58 .splitscreen-toggle,
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
59 .clear-selection
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
60 top: -$icon-height
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
61 right: $icon-width + $offset + $offset
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
62 width: $icon-width
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
63 height: $icon-height
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
64 margin-top: 2px
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
65 z-index: 1
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
66 outline: none
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
67
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
68 .clear-selection
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
69 right: $offset
786
1bee00039973 fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 780
diff changeset
70
1146
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
71 .show
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
72 .profile
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
73 height: 50vh
1015
d2f30a784fb3 feat: add selectfield to fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents: 909
diff changeset
74
1146
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
75 .label
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
76 margin-bottom: $small-offset
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
77
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
78 .waterlevelselection
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
79 margin-top: $large-offset
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
80 margin-right: $large-offset
1015
d2f30a784fb3 feat: add selectfield to fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents: 909
diff changeset
81
1146
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
82 .additionalsurveys
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
83 width: 200px
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
84 margin-top: $large-offset
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
85 margin-bottom: auto
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
86 margin-right: $large-offset
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
87 margin-left: auto
786
1bee00039973 fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 780
diff changeset
88
1146
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
89 .additionalsurveys input
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
90 margin-right: $small-offset
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
91
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
92 .fairwayprofile
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
93 background-color: white
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
94 margin: $offset
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
95 margin-top: 0
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
96 </style>
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
97
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
98 <script>
1019
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 1018
diff changeset
99 /*
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 1018
diff changeset
100 * This is Free Software under GNU Affero General Public License v >= 3.0
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 1018
diff changeset
101 * without warranty, see README.md and license for details.
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 1018
diff changeset
102 *
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 1018
diff changeset
103 * SPDX-License-Identifier: AGPL-3.0-or-later
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 1018
diff changeset
104 * License-Filename: LICENSES/AGPL-3.0.txt
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 1018
diff changeset
105 *
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 1018
diff changeset
106 * Copyright (C) 2018 by via donau
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 1018
diff changeset
107 * – Österreichische Wasserstraßen-Gesellschaft mbH
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 1018
diff changeset
108 * Software engineering by Intevation GmbH
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 1018
diff changeset
109 *
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 1018
diff changeset
110 * Author(s):
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 1018
diff changeset
111 * Thomas Junk <thomas.junk@intevation.de>
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 1018
diff changeset
112 */
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
113 import * as d3 from "d3";
1018
ab64c76af1b0 additional survey selection for 2nd crossprofile added
Thomas Junk <thomas.junk@intevation.de>
parents: 1015
diff changeset
114 import { mapState } from "vuex";
1054
9bd4f82fcd8d display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents: 1053
diff changeset
115 import { displayError } from "../application/lib/errors.js";
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
116
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
117 const GROUND_COLOR = "#4A2F06";
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
118
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
119 export default {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
120 name: "fairwayprofile",
646
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
121 props: [
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
122 "width",
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
123 "height",
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
124 "xScale",
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
125 "yScaleLeft",
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
126 "yScaleRight",
786
1bee00039973 fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 780
diff changeset
127 "margin",
1015
d2f30a784fb3 feat: add selectfield to fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents: 909
diff changeset
128 "additionalSurveys"
646
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
129 ],
786
1bee00039973 fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 780
diff changeset
130 computed: {
1146
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
131 ...mapState("application", ["showSplitscreen"]),
1030
bf10a7f990cc refac: fairway profile retrieves current data from store
Thomas Junk <thomas.junk@intevation.de>
parents: 1021
diff changeset
132 ...mapState("fairwayprofile", [
bf10a7f990cc refac: fairway profile retrieves current data from store
Thomas Junk <thomas.junk@intevation.de>
parents: 1021
diff changeset
133 "startPoint",
bf10a7f990cc refac: fairway profile retrieves current data from store
Thomas Junk <thomas.junk@intevation.de>
parents: 1021
diff changeset
134 "endPoint",
bf10a7f990cc refac: fairway profile retrieves current data from store
Thomas Junk <thomas.junk@intevation.de>
parents: 1021
diff changeset
135 "currentProfile",
1053
82ae9cb56982 refac: removed properties from fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents: 1046
diff changeset
136 "minAlt",
82ae9cb56982 refac: removed properties from fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents: 1046
diff changeset
137 "maxAlt",
82ae9cb56982 refac: removed properties from fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents: 1046
diff changeset
138 "totalLength",
82ae9cb56982 refac: removed properties from fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents: 1046
diff changeset
139 "fairwayCoordinates",
82ae9cb56982 refac: removed properties from fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents: 1046
diff changeset
140 "waterLevels",
82ae9cb56982 refac: removed properties from fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents: 1046
diff changeset
141 "selectedWaterLevel"
1030
bf10a7f990cc refac: fairway profile retrieves current data from store
Thomas Junk <thomas.junk@intevation.de>
parents: 1021
diff changeset
142 ]),
1146
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
143 ...mapState("bottlenecks", ["selectedBottleneck", "selectedSurvey"]),
1056
28eb62f7c676 additional survey as dynamic property
Thomas Junk <thomas.junk@intevation.de>
parents: 1054
diff changeset
144 additionalSurvey: {
28eb62f7c676 additional survey as dynamic property
Thomas Junk <thomas.junk@intevation.de>
parents: 1054
diff changeset
145 get() {
28eb62f7c676 additional survey as dynamic property
Thomas Junk <thomas.junk@intevation.de>
parents: 1054
diff changeset
146 return this.$store.getters["fairwayprofile/additionalSurvey"];
28eb62f7c676 additional survey as dynamic property
Thomas Junk <thomas.junk@intevation.de>
parents: 1054
diff changeset
147 },
28eb62f7c676 additional survey as dynamic property
Thomas Junk <thomas.junk@intevation.de>
parents: 1054
diff changeset
148 set(value) {
28eb62f7c676 additional survey as dynamic property
Thomas Junk <thomas.junk@intevation.de>
parents: 1054
diff changeset
149 this.$store.commit("fairwayprofile/setAdditionalSurvey", value);
28eb62f7c676 additional survey as dynamic property
Thomas Junk <thomas.junk@intevation.de>
parents: 1054
diff changeset
150 this.selectAdditionalSurveyData();
28eb62f7c676 additional survey as dynamic property
Thomas Junk <thomas.junk@intevation.de>
parents: 1054
diff changeset
151 }
28eb62f7c676 additional survey as dynamic property
Thomas Junk <thomas.junk@intevation.de>
parents: 1054
diff changeset
152 },
1030
bf10a7f990cc refac: fairway profile retrieves current data from store
Thomas Junk <thomas.junk@intevation.de>
parents: 1021
diff changeset
153 currentData() {
1111
f106aee673e7 selected bottleneck and surveys now handled by bottleneck store
Markus Kottlaender <markus@intevation.de>
parents: 1075
diff changeset
154 if (
f106aee673e7 selected bottleneck and surveys now handled by bottleneck store
Markus Kottlaender <markus@intevation.de>
parents: 1075
diff changeset
155 !this.selectedSurvey ||
f106aee673e7 selected bottleneck and surveys now handled by bottleneck store
Markus Kottlaender <markus@intevation.de>
parents: 1075
diff changeset
156 !this.currentProfile.hasOwnProperty(this.selectedSurvey.date_info)
1142
dc3f0277628a feat: Importqueue listing (Proof of concept)
Thomas Junk <thomas.junk@intevation.de>
parents: 1111
diff changeset
157 )
dc3f0277628a feat: Importqueue listing (Proof of concept)
Thomas Junk <thomas.junk@intevation.de>
parents: 1111
diff changeset
158 return [];
1111
f106aee673e7 selected bottleneck and surveys now handled by bottleneck store
Markus Kottlaender <markus@intevation.de>
parents: 1075
diff changeset
159 return this.currentProfile[this.selectedSurvey.date_info];
1030
bf10a7f990cc refac: fairway profile retrieves current data from store
Thomas Junk <thomas.junk@intevation.de>
parents: 1021
diff changeset
160 },
1038
e8ebfbc2aa05 feat: additional surveydata WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 1030
diff changeset
161 additionalData() {
1111
f106aee673e7 selected bottleneck and surveys now handled by bottleneck store
Markus Kottlaender <markus@intevation.de>
parents: 1075
diff changeset
162 if (
f106aee673e7 selected bottleneck and surveys now handled by bottleneck store
Markus Kottlaender <markus@intevation.de>
parents: 1075
diff changeset
163 !this.additionalSurvey ||
f106aee673e7 selected bottleneck and surveys now handled by bottleneck store
Markus Kottlaender <markus@intevation.de>
parents: 1075
diff changeset
164 !this.currentProfile.hasOwnProperty(this.additionalSurvey.date_info)
1142
dc3f0277628a feat: Importqueue listing (Proof of concept)
Thomas Junk <thomas.junk@intevation.de>
parents: 1111
diff changeset
165 )
dc3f0277628a feat: Importqueue listing (Proof of concept)
Thomas Junk <thomas.junk@intevation.de>
parents: 1111
diff changeset
166 return [];
1111
f106aee673e7 selected bottleneck and surveys now handled by bottleneck store
Markus Kottlaender <markus@intevation.de>
parents: 1075
diff changeset
167 return this.currentProfile[this.additionalSurvey.date_info];
1038
e8ebfbc2aa05 feat: additional surveydata WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 1030
diff changeset
168 },
786
1bee00039973 fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 780
diff changeset
169 waterColor() {
1bee00039973 fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 780
diff changeset
170 const result = this.waterLevels.find(
1bee00039973 fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 780
diff changeset
171 x => x.level === this.selectedWaterLevel
1bee00039973 fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 780
diff changeset
172 );
1bee00039973 fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 780
diff changeset
173 return result.color;
1bee00039973 fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 780
diff changeset
174 }
1bee00039973 fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 780
diff changeset
175 },
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
176 data() {
1018
ab64c76af1b0 additional survey selection for 2nd crossprofile added
Thomas Junk <thomas.junk@intevation.de>
parents: 1015
diff changeset
177 return {
1038
e8ebfbc2aa05 feat: additional surveydata WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 1030
diff changeset
178 wait: false
1018
ab64c76af1b0 additional survey selection for 2nd crossprofile added
Thomas Junk <thomas.junk@intevation.de>
parents: 1015
diff changeset
179 };
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
180 },
646
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
181 watch: {
1146
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
182 showSplitscreen() {
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
183 this.drawDiagram();
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
184 },
1038
e8ebfbc2aa05 feat: additional surveydata WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 1030
diff changeset
185 currentData() {
780
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
186 this.drawDiagram();
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
187 },
646
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
188 width() {
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
189 this.drawDiagram();
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
190 },
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
191 height() {
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
192 this.drawDiagram();
786
1bee00039973 fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 780
diff changeset
193 },
1bee00039973 fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 780
diff changeset
194 waterLevels() {
1bee00039973 fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 780
diff changeset
195 this.drawDiagram();
1bee00039973 fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 780
diff changeset
196 },
1bee00039973 fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 780
diff changeset
197 selectedWaterLevel() {
1bee00039973 fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 780
diff changeset
198 this.drawDiagram();
802
327aa4a18a1c Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 786
diff changeset
199 },
327aa4a18a1c Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 786
diff changeset
200 fairwayCoordinates() {
327aa4a18a1c Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 786
diff changeset
201 this.drawDiagram();
646
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
202 }
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
203 },
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
204 methods: {
1018
ab64c76af1b0 additional survey selection for 2nd crossprofile added
Thomas Junk <thomas.junk@intevation.de>
parents: 1015
diff changeset
205 selectAdditionalSurveyData() {
1054
9bd4f82fcd8d display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents: 1053
diff changeset
206 if (
9bd4f82fcd8d display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents: 1053
diff changeset
207 !this.additionalSurvey ||
9bd4f82fcd8d display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents: 1053
diff changeset
208 this.wait ||
1111
f106aee673e7 selected bottleneck and surveys now handled by bottleneck store
Markus Kottlaender <markus@intevation.de>
parents: 1075
diff changeset
209 this.currentProfile[this.additionalSurvey.date_info]
1054
9bd4f82fcd8d display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents: 1053
diff changeset
210 ) {
9bd4f82fcd8d display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents: 1053
diff changeset
211 this.drawDiagram();
9bd4f82fcd8d display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents: 1053
diff changeset
212 return;
9bd4f82fcd8d display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents: 1053
diff changeset
213 }
9bd4f82fcd8d display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents: 1053
diff changeset
214 this.$store
9bd4f82fcd8d display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents: 1053
diff changeset
215 .dispatch("fairwayprofile/loadProfile", this.additionalSurvey)
9bd4f82fcd8d display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents: 1053
diff changeset
216 .then(() => {
9bd4f82fcd8d display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents: 1053
diff changeset
217 this.wait = false;
9bd4f82fcd8d display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents: 1053
diff changeset
218 })
9bd4f82fcd8d display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents: 1053
diff changeset
219 .catch(error => {
9bd4f82fcd8d display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents: 1053
diff changeset
220 this.wait = false;
9bd4f82fcd8d display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents: 1053
diff changeset
221 let status = "ERROR";
9bd4f82fcd8d display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents: 1053
diff changeset
222 let data = error;
9bd4f82fcd8d display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents: 1053
diff changeset
223 const response = error.response;
9bd4f82fcd8d display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents: 1053
diff changeset
224 if (response) {
9bd4f82fcd8d display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents: 1053
diff changeset
225 status = response.status;
9bd4f82fcd8d display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents: 1053
diff changeset
226 data = response.data;
9bd4f82fcd8d display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents: 1053
diff changeset
227 }
9bd4f82fcd8d display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents: 1053
diff changeset
228 displayError({
9bd4f82fcd8d display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents: 1053
diff changeset
229 title: "Backend Error",
9bd4f82fcd8d display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents: 1053
diff changeset
230 message: `${status}: ${data.message || data}`
9bd4f82fcd8d display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents: 1053
diff changeset
231 });
9bd4f82fcd8d display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents: 1053
diff changeset
232 });
1015
d2f30a784fb3 feat: add selectfield to fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents: 909
diff changeset
233 },
646
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
234 drawDiagram() {
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
235 const chartDiv = document.querySelector(".fairwayprofile");
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
236 d3.select("svg").remove();
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
237 let svg = d3.select(chartDiv).append("svg");
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
238 svg.attr("width", this.width);
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
239 svg.attr("height", this.height);
786
1bee00039973 fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 780
diff changeset
240 const width = this.width - this.margin.right - 1.5 * this.margin.left;
1bee00039973 fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 780
diff changeset
241 const height = this.height - this.margin.top - 2 * this.margin.bottom;
1030
bf10a7f990cc refac: fairway profile retrieves current data from store
Thomas Junk <thomas.junk@intevation.de>
parents: 1021
diff changeset
242 const currentData = this.currentData;
1038
e8ebfbc2aa05 feat: additional surveydata WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 1030
diff changeset
243 const additionalData = this.additionalData;
780
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
244 const {
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
245 xScale,
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
246 yScaleRight,
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
247 yScaleLeft,
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
248 graph
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
249 } = this.generateCoordinates(svg, height, width);
646
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
250 this.drawWaterlevel({
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
251 graph,
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
252 xScale,
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
253 yScaleRight,
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
254 height,
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
255 width
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
256 });
1059
51d412a79e4f omit render while clearing profile
Thomas Junk <thomas.junk@intevation.de>
parents: 1056
diff changeset
257 if (currentData) {
51d412a79e4f omit render while clearing profile
Thomas Junk <thomas.junk@intevation.de>
parents: 1056
diff changeset
258 this.drawProfile({
51d412a79e4f omit render while clearing profile
Thomas Junk <thomas.junk@intevation.de>
parents: 1056
diff changeset
259 graph,
51d412a79e4f omit render while clearing profile
Thomas Junk <thomas.junk@intevation.de>
parents: 1056
diff changeset
260 xScale,
51d412a79e4f omit render while clearing profile
Thomas Junk <thomas.junk@intevation.de>
parents: 1056
diff changeset
261 yScaleRight,
51d412a79e4f omit render while clearing profile
Thomas Junk <thomas.junk@intevation.de>
parents: 1056
diff changeset
262 currentData,
51d412a79e4f omit render while clearing profile
Thomas Junk <thomas.junk@intevation.de>
parents: 1056
diff changeset
263 height,
51d412a79e4f omit render while clearing profile
Thomas Junk <thomas.junk@intevation.de>
parents: 1056
diff changeset
264 width,
51d412a79e4f omit render while clearing profile
Thomas Junk <thomas.junk@intevation.de>
parents: 1056
diff changeset
265 color: GROUND_COLOR,
51d412a79e4f omit render while clearing profile
Thomas Junk <thomas.junk@intevation.de>
parents: 1056
diff changeset
266 strokeColor: "black",
51d412a79e4f omit render while clearing profile
Thomas Junk <thomas.junk@intevation.de>
parents: 1056
diff changeset
267 opacity: 1
51d412a79e4f omit render while clearing profile
Thomas Junk <thomas.junk@intevation.de>
parents: 1056
diff changeset
268 });
51d412a79e4f omit render while clearing profile
Thomas Junk <thomas.junk@intevation.de>
parents: 1056
diff changeset
269 }
1038
e8ebfbc2aa05 feat: additional surveydata WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 1030
diff changeset
270 if (additionalData) {
e8ebfbc2aa05 feat: additional surveydata WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 1030
diff changeset
271 this.drawProfile({
e8ebfbc2aa05 feat: additional surveydata WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 1030
diff changeset
272 graph,
e8ebfbc2aa05 feat: additional surveydata WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 1030
diff changeset
273 xScale,
e8ebfbc2aa05 feat: additional surveydata WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 1030
diff changeset
274 yScaleRight,
1054
9bd4f82fcd8d display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents: 1053
diff changeset
275 currentData: additionalData,
1038
e8ebfbc2aa05 feat: additional surveydata WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 1030
diff changeset
276 height,
e8ebfbc2aa05 feat: additional surveydata WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 1030
diff changeset
277 width,
1054
9bd4f82fcd8d display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents: 1053
diff changeset
278 color: GROUND_COLOR,
9bd4f82fcd8d display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents: 1053
diff changeset
279 strokeColor: "#943007",
9bd4f82fcd8d display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents: 1053
diff changeset
280 opacity: 0.6
1038
e8ebfbc2aa05 feat: additional surveydata WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 1030
diff changeset
281 });
e8ebfbc2aa05 feat: additional surveydata WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 1030
diff changeset
282 }
786
1bee00039973 fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 780
diff changeset
283 this.drawLabels({
1bee00039973 fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 780
diff changeset
284 graph,
1bee00039973 fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 780
diff changeset
285 xScale,
1bee00039973 fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 780
diff changeset
286 yScaleLeft,
1bee00039973 fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 780
diff changeset
287 currentData,
1bee00039973 fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 780
diff changeset
288 height,
1bee00039973 fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 780
diff changeset
289 width
1bee00039973 fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 780
diff changeset
290 });
802
327aa4a18a1c Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 786
diff changeset
291 this.drawFairway({
327aa4a18a1c Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 786
diff changeset
292 graph,
327aa4a18a1c Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 786
diff changeset
293 xScale,
803
30ff051e75e9 Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 802
diff changeset
294 yScaleRight,
802
327aa4a18a1c Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 786
diff changeset
295 currentData,
327aa4a18a1c Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 786
diff changeset
296 height,
327aa4a18a1c Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 786
diff changeset
297 width
327aa4a18a1c Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 786
diff changeset
298 });
327aa4a18a1c Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 786
diff changeset
299 },
807
34b2cfcab24c Fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents: 803
diff changeset
300 drawFairway({ graph, xScale, yScaleRight }) {
803
30ff051e75e9 Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 802
diff changeset
301 for (let coordinates of this.fairwayCoordinates) {
30ff051e75e9 Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 802
diff changeset
302 const [startPoint, endPoint, depth] = coordinates;
30ff051e75e9 Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 802
diff changeset
303 let fairwayArea = d3
30ff051e75e9 Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 802
diff changeset
304 .area()
30ff051e75e9 Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 802
diff changeset
305 .x(function(d) {
30ff051e75e9 Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 802
diff changeset
306 return xScale(d.x);
30ff051e75e9 Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 802
diff changeset
307 })
849
d63e60b868bf WIP Fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents: 845
diff changeset
308 .y0(yScaleRight(0))
803
30ff051e75e9 Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 802
diff changeset
309 .y1(function(d) {
30ff051e75e9 Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 802
diff changeset
310 return yScaleRight(d.y);
30ff051e75e9 Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 802
diff changeset
311 });
30ff051e75e9 Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 802
diff changeset
312 graph
30ff051e75e9 Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 802
diff changeset
313 .append("path")
1075
c1989ebe1d8a feat: invert fairwayprofile scale
Thomas Junk <thomas.junk@intevation.de>
parents: 1059
diff changeset
314 .datum([{ x: startPoint, y: depth }, { x: endPoint, y: depth }])
803
30ff051e75e9 Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 802
diff changeset
315 .attr("fill", "#002AFF")
810
68a39aea942a Fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents: 807
diff changeset
316 .attr("stroke-opacity", 0.65)
68a39aea942a Fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents: 807
diff changeset
317 .attr("fill-opacity", 0.65)
803
30ff051e75e9 Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 802
diff changeset
318 .attr("stroke", "#FFD20D")
30ff051e75e9 Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 802
diff changeset
319 .attr("d", fairwayArea);
30ff051e75e9 Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 802
diff changeset
320 }
786
1bee00039973 fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 780
diff changeset
321 },
1bee00039973 fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 780
diff changeset
322 drawLabels({ graph, height }) {
1bee00039973 fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 780
diff changeset
323 graph
1bee00039973 fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 780
diff changeset
324 .append("text")
1bee00039973 fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 780
diff changeset
325 .attr("transform", ["rotate(-90)"])
1bee00039973 fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 780
diff changeset
326 .attr("y", this.width - 60)
1bee00039973 fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 780
diff changeset
327 .attr("x", -(this.height - this.margin.top - this.margin.bottom) / 2)
1bee00039973 fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 780
diff changeset
328 .attr("dy", "1em")
1bee00039973 fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 780
diff changeset
329 .attr("fill", "black")
1bee00039973 fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 780
diff changeset
330 .style("text-anchor", "middle")
1bee00039973 fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 780
diff changeset
331 .text("Depth [m]");
1bee00039973 fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 780
diff changeset
332 graph
1bee00039973 fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 780
diff changeset
333 .append("text")
1bee00039973 fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 780
diff changeset
334 .attr("y", 0 - this.margin.left)
1bee00039973 fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 780
diff changeset
335 .attr("x", 0 - height / 4)
1bee00039973 fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 780
diff changeset
336 .attr("dy", "1em")
1bee00039973 fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 780
diff changeset
337 .attr("fill", "black")
1bee00039973 fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 780
diff changeset
338 .style("text-anchor", "middle")
1bee00039973 fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 780
diff changeset
339 .attr("transform", [
1bee00039973 fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 780
diff changeset
340 "translate(" + this.width / 2 + "," + this.height + ")",
1bee00039973 fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 780
diff changeset
341 "rotate(0)"
1bee00039973 fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 780
diff changeset
342 ])
1bee00039973 fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 780
diff changeset
343 .text("Width [m]");
646
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
344 },
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
345 generateCoordinates(svg, height, width) {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
346 let xScale = d3
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
347 .scaleLinear()
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
348 .domain(this.xScale)
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
349 .rangeRound([0, width]);
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
350
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
351 xScale.ticks(5);
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
352 let yScaleLeft = d3
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
353 .scaleLinear()
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
354 .domain(this.yScaleLeft)
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
355 .rangeRound([height, 0]);
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
356
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
357 let yScaleRight = d3
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
358 .scaleLinear()
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
359 .domain(this.yScaleRight)
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
360 .rangeRound([height, 0]);
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
361
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
362 let xAxis = d3.axisBottom(xScale);
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
363 let yAxis2 = d3.axisRight(yScaleRight);
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
364 let graph = svg
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
365 .append("g")
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
366 .attr(
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
367 "transform",
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
368 "translate(" + this.margin.left + "," + this.margin.top + ")"
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
369 );
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
370 graph
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
371 .append("g")
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
372 .attr("transform", "translate(0," + height + ")")
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
373 .call(xAxis.ticks(5));
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
374 graph
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
375 .append("g")
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
376 .attr("transform", "translate(" + width + ",0)")
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
377 .call(yAxis2);
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
378 return { xScale, yScaleLeft, yScaleRight, graph };
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
379 },
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
380 drawWaterlevel({ graph, xScale, yScaleRight, height }) {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
381 let waterArea = d3
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
382 .area()
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
383 .x(function(d) {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
384 return xScale(d.x);
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
385 })
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
386 .y0(height)
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
387 .y1(function(d) {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
388 return yScaleRight(d.y);
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
389 });
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
390 graph
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
391 .append("path")
844
c2cba785ca4d WIP Fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents: 841
diff changeset
392 .datum([{ x: 0, y: 0 }, { x: this.totalLength, y: 0 }])
786
1bee00039973 fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 780
diff changeset
393 .attr("fill", this.waterColor)
1bee00039973 fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 780
diff changeset
394 .attr("stroke", this.waterColor)
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
395 .attr("d", waterArea);
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
396 },
1038
e8ebfbc2aa05 feat: additional surveydata WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 1030
diff changeset
397 drawProfile({
e8ebfbc2aa05 feat: additional surveydata WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 1030
diff changeset
398 graph,
e8ebfbc2aa05 feat: additional surveydata WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 1030
diff changeset
399 xScale,
e8ebfbc2aa05 feat: additional surveydata WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 1030
diff changeset
400 yScaleRight,
e8ebfbc2aa05 feat: additional surveydata WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 1030
diff changeset
401 currentData,
e8ebfbc2aa05 feat: additional surveydata WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 1030
diff changeset
402 height,
e8ebfbc2aa05 feat: additional surveydata WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 1030
diff changeset
403 color,
1054
9bd4f82fcd8d display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents: 1053
diff changeset
404 strokeColor,
9bd4f82fcd8d display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents: 1053
diff changeset
405 opacity
1038
e8ebfbc2aa05 feat: additional surveydata WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 1030
diff changeset
406 }) {
780
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
407 for (let part of currentData) {
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
408 let profileLine = d3
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
409 .line()
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
410 .x(d => {
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
411 return xScale(d.x);
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
412 })
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
413 .y(d => {
1075
c1989ebe1d8a feat: invert fairwayprofile scale
Thomas Junk <thomas.junk@intevation.de>
parents: 1059
diff changeset
414 return yScaleRight(d.y);
780
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
415 });
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
416 let profileArea = d3
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
417 .area()
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
418 .x(function(d) {
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
419 return xScale(d.x);
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
420 })
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
421 .y0(height)
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
422 .y1(function(d) {
1075
c1989ebe1d8a feat: invert fairwayprofile scale
Thomas Junk <thomas.junk@intevation.de>
parents: 1059
diff changeset
423 return yScaleRight(d.y);
780
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
424 });
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
425 graph
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
426 .append("path")
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
427 .datum(part)
1038
e8ebfbc2aa05 feat: additional surveydata WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 1030
diff changeset
428 .attr("fill", color)
e8ebfbc2aa05 feat: additional surveydata WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 1030
diff changeset
429 .attr("stroke", color)
780
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
430 .attr("stroke-width", 3)
1054
9bd4f82fcd8d display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents: 1053
diff changeset
431 .attr("stroke-opacity", opacity)
9bd4f82fcd8d display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents: 1053
diff changeset
432 .attr("fill-opacity", opacity)
780
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
433 .attr("d", profileArea);
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
434 graph
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
435 .append("path")
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
436 .datum(part)
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
437 .attr("fill", "none")
1038
e8ebfbc2aa05 feat: additional surveydata WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 1030
diff changeset
438 .attr("stroke", strokeColor)
780
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
439 .attr("stroke-linejoin", "round")
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
440 .attr("stroke-linecap", "round")
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
441 .attr("stroke-width", 3)
1054
9bd4f82fcd8d display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents: 1053
diff changeset
442 .attr("stroke-opacity", opacity)
9bd4f82fcd8d display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents: 1053
diff changeset
443 .attr("fill-opacity", opacity)
780
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
444 .attr("d", profileLine);
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
445 }
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
446 }
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
447 },
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
448 mounted() {
646
4450f2ab41e0 refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
449 this.drawDiagram();
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
450 }
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
451 };
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
452 </script>