Mercurial > gemma
annotate client/src/components/fairway/Fairwayprofile.vue @ 2462:9ae2a2f758bb
client: make use of new table header/body components
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Mon, 04 Mar 2019 14:50:23 +0100 |
parents | e2f05ac81471 |
children | 3c17d401fbd4 |
rev | line source |
---|---|
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1 <template> |
1480 | 2 <div :class="['position-relative', { show: showSplitscreen }]"> |
1361
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1313
diff
changeset
|
3 <div class="profile bg-white position-relative d-flex flex-column"> |
2460
e2f05ac81471
client: available waterlevels in fairway profile: improved styling
Markus Kottlaender <markus@intevation.de>
parents:
2392
diff
changeset
|
4 <div |
e2f05ac81471
client: available waterlevels in fairway profile: improved styling
Markus Kottlaender <markus@intevation.de>
parents:
2392
diff
changeset
|
5 class="d-flex flex-row justify-content-between align-items-center border-bottom position-relative" |
e2f05ac81471
client: available waterlevels in fairway profile: improved styling
Markus Kottlaender <markus@intevation.de>
parents:
2392
diff
changeset
|
6 > |
e2f05ac81471
client: available waterlevels in fairway profile: improved styling
Markus Kottlaender <markus@intevation.de>
parents:
2392
diff
changeset
|
7 <div class="d-flex flex-row align-items-center position-absolute"> |
e2f05ac81471
client: available waterlevels in fairway profile: improved styling
Markus Kottlaender <markus@intevation.de>
parents:
2392
diff
changeset
|
8 <small class="text-muted px-2 text-right" style="line-height: 1rem;"> |
e2f05ac81471
client: available waterlevels in fairway profile: improved styling
Markus Kottlaender <markus@intevation.de>
parents:
2392
diff
changeset
|
9 <translate v-if="availableWaterlevels.length > 1" |
e2f05ac81471
client: available waterlevels in fairway profile: improved styling
Markus Kottlaender <markus@intevation.de>
parents:
2392
diff
changeset
|
10 >Available Waterlevels:</translate |
e2f05ac81471
client: available waterlevels in fairway profile: improved styling
Markus Kottlaender <markus@intevation.de>
parents:
2392
diff
changeset
|
11 > |
e2f05ac81471
client: available waterlevels in fairway profile: improved styling
Markus Kottlaender <markus@intevation.de>
parents:
2392
diff
changeset
|
12 <translate v-else>Waterlevel:</translate> |
e2f05ac81471
client: available waterlevels in fairway profile: improved styling
Markus Kottlaender <markus@intevation.de>
parents:
2392
diff
changeset
|
13 </small> |
e2f05ac81471
client: available waterlevels in fairway profile: improved styling
Markus Kottlaender <markus@intevation.de>
parents:
2392
diff
changeset
|
14 <select |
e2f05ac81471
client: available waterlevels in fairway profile: improved styling
Markus Kottlaender <markus@intevation.de>
parents:
2392
diff
changeset
|
15 class="form-control pl-1" |
e2f05ac81471
client: available waterlevels in fairway profile: improved styling
Markus Kottlaender <markus@intevation.de>
parents:
2392
diff
changeset
|
16 v-model="currentLevel" |
e2f05ac81471
client: available waterlevels in fairway profile: improved styling
Markus Kottlaender <markus@intevation.de>
parents:
2392
diff
changeset
|
17 v-if="availableWaterlevels.length > 1" |
e2f05ac81471
client: available waterlevels in fairway profile: improved styling
Markus Kottlaender <markus@intevation.de>
parents:
2392
diff
changeset
|
18 style="width: 100px; height: 30px; font-size: 80%;" |
2389
13de09e30645
fairway_profile: available_waterlevels selection with dummy data added
Thomas Junk <thomas.junk@intevation.de>
parents:
2368
diff
changeset
|
19 > |
13de09e30645
fairway_profile: available_waterlevels selection with dummy data added
Thomas Junk <thomas.junk@intevation.de>
parents:
2368
diff
changeset
|
20 <option |
13de09e30645
fairway_profile: available_waterlevels selection with dummy data added
Thomas Junk <thomas.junk@intevation.de>
parents:
2368
diff
changeset
|
21 v-for="level in availableWaterlevels" |
13de09e30645
fairway_profile: available_waterlevels selection with dummy data added
Thomas Junk <thomas.junk@intevation.de>
parents:
2368
diff
changeset
|
22 :value="level" |
13de09e30645
fairway_profile: available_waterlevels selection with dummy data added
Thomas Junk <thomas.junk@intevation.de>
parents:
2368
diff
changeset
|
23 :key="level" |
13de09e30645
fairway_profile: available_waterlevels selection with dummy data added
Thomas Junk <thomas.junk@intevation.de>
parents:
2368
diff
changeset
|
24 > |
13de09e30645
fairway_profile: available_waterlevels selection with dummy data added
Thomas Junk <thomas.junk@intevation.de>
parents:
2368
diff
changeset
|
25 {{ formatSurveyDate(level) }} |
13de09e30645
fairway_profile: available_waterlevels selection with dummy data added
Thomas Junk <thomas.junk@intevation.de>
parents:
2368
diff
changeset
|
26 </option> |
13de09e30645
fairway_profile: available_waterlevels selection with dummy data added
Thomas Junk <thomas.junk@intevation.de>
parents:
2368
diff
changeset
|
27 </select> |
2460
e2f05ac81471
client: available waterlevels in fairway profile: improved styling
Markus Kottlaender <markus@intevation.de>
parents:
2392
diff
changeset
|
28 <small v-else>{{ formatSurveyDate(currentLevel) }}</small> |
2389
13de09e30645
fairway_profile: available_waterlevels selection with dummy data added
Thomas Junk <thomas.junk@intevation.de>
parents:
2368
diff
changeset
|
29 </div> |
13de09e30645
fairway_profile: available_waterlevels selection with dummy data added
Thomas Junk <thomas.junk@intevation.de>
parents:
2368
diff
changeset
|
30 <div class="flex-row mr-auto ml-auto"> |
13de09e30645
fairway_profile: available_waterlevels selection with dummy data added
Thomas Junk <thomas.junk@intevation.de>
parents:
2368
diff
changeset
|
31 <h5 |
13de09e30645
fairway_profile: available_waterlevels selection with dummy data added
Thomas Junk <thomas.junk@intevation.de>
parents:
2368
diff
changeset
|
32 class="headline mb-0 py-2" |
13de09e30645
fairway_profile: available_waterlevels selection with dummy data added
Thomas Junk <thomas.junk@intevation.de>
parents:
2368
diff
changeset
|
33 v-if="selectedBottleneck && selectedSurvey" |
13de09e30645
fairway_profile: available_waterlevels selection with dummy data added
Thomas Junk <thomas.junk@intevation.de>
parents:
2368
diff
changeset
|
34 > |
13de09e30645
fairway_profile: available_waterlevels selection with dummy data added
Thomas Junk <thomas.junk@intevation.de>
parents:
2368
diff
changeset
|
35 {{ selectedBottleneck }} ({{ selectedSurvey.date_info }}) |
13de09e30645
fairway_profile: available_waterlevels selection with dummy data added
Thomas Junk <thomas.junk@intevation.de>
parents:
2368
diff
changeset
|
36 </h5> |
13de09e30645
fairway_profile: available_waterlevels selection with dummy data added
Thomas Junk <thomas.junk@intevation.de>
parents:
2368
diff
changeset
|
37 </div> |
13de09e30645
fairway_profile: available_waterlevels selection with dummy data added
Thomas Junk <thomas.junk@intevation.de>
parents:
2368
diff
changeset
|
38 <div> |
13de09e30645
fairway_profile: available_waterlevels selection with dummy data added
Thomas Junk <thomas.junk@intevation.de>
parents:
2368
diff
changeset
|
39 <button |
13de09e30645
fairway_profile: available_waterlevels selection with dummy data added
Thomas Junk <thomas.junk@intevation.de>
parents:
2368
diff
changeset
|
40 class="rounded-bottom bg-white border-0 splitscreen-toggle" |
13de09e30645
fairway_profile: available_waterlevels selection with dummy data added
Thomas Junk <thomas.junk@intevation.de>
parents:
2368
diff
changeset
|
41 @click="$store.commit('application/showSplitscreen', false)" |
13de09e30645
fairway_profile: available_waterlevels selection with dummy data added
Thomas Junk <thomas.junk@intevation.de>
parents:
2368
diff
changeset
|
42 v-if="showSplitscreen" |
13de09e30645
fairway_profile: available_waterlevels selection with dummy data added
Thomas Junk <thomas.junk@intevation.de>
parents:
2368
diff
changeset
|
43 > |
13de09e30645
fairway_profile: available_waterlevels selection with dummy data added
Thomas Junk <thomas.junk@intevation.de>
parents:
2368
diff
changeset
|
44 <font-awesome-icon icon="angle-down" /> |
13de09e30645
fairway_profile: available_waterlevels selection with dummy data added
Thomas Junk <thomas.junk@intevation.de>
parents:
2368
diff
changeset
|
45 </button> |
13de09e30645
fairway_profile: available_waterlevels selection with dummy data added
Thomas Junk <thomas.junk@intevation.de>
parents:
2368
diff
changeset
|
46 <button |
13de09e30645
fairway_profile: available_waterlevels selection with dummy data added
Thomas Junk <thomas.junk@intevation.de>
parents:
2368
diff
changeset
|
47 class="rounded-bottom bg-white border-0 clear-selection" |
13de09e30645
fairway_profile: available_waterlevels selection with dummy data added
Thomas Junk <thomas.junk@intevation.de>
parents:
2368
diff
changeset
|
48 @click="$store.dispatch('fairwayprofile/clearSelection')" |
13de09e30645
fairway_profile: available_waterlevels selection with dummy data added
Thomas Junk <thomas.junk@intevation.de>
parents:
2368
diff
changeset
|
49 v-if="showSplitscreen" |
13de09e30645
fairway_profile: available_waterlevels selection with dummy data added
Thomas Junk <thomas.junk@intevation.de>
parents:
2368
diff
changeset
|
50 > |
13de09e30645
fairway_profile: available_waterlevels selection with dummy data added
Thomas Junk <thomas.junk@intevation.de>
parents:
2368
diff
changeset
|
51 <font-awesome-icon icon="times" class="pointer" /> |
13de09e30645
fairway_profile: available_waterlevels selection with dummy data added
Thomas Junk <thomas.junk@intevation.de>
parents:
2368
diff
changeset
|
52 </button> |
13de09e30645
fairway_profile: available_waterlevels selection with dummy data added
Thomas Junk <thomas.junk@intevation.de>
parents:
2368
diff
changeset
|
53 </div> |
13de09e30645
fairway_profile: available_waterlevels selection with dummy data added
Thomas Junk <thomas.junk@intevation.de>
parents:
2368
diff
changeset
|
54 </div> |
1361
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1313
diff
changeset
|
55 <div class="d-flex flex-fill"> |
1449 | 56 <div |
57 class="loading d-flex justify-content-center align-items-center" | |
58 v-if="surveysLoading || profileLoading" | |
59 > | |
1480 | 60 <font-awesome-icon icon="spinner" spin /> |
1382
8b85032ed3cd
added loading animation to profile
Markus Kottlaender <markus@intevation.de>
parents:
1372
diff
changeset
|
61 </div> |
1361
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1313
diff
changeset
|
62 <div class="fairwayprofile m-3 mt-0 bg-white flex-grow-1"></div> |
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1313
diff
changeset
|
63 </div> |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
64 </div> |
1361
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1313
diff
changeset
|
65 </div> |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
66 </template> |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
67 |
1449 | 68 <style lang="scss" scoped> |
69 .profile { | |
70 width: 100vw; | |
71 height: 0; | |
72 overflow: hidden; | |
73 z-index: 2; | |
74 } | |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
75 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
76 .splitscreen-toggle, |
1449 | 77 .clear-selection { |
78 width: 2rem; | |
79 height: 2rem; | |
80 margin-top: 8px; | |
81 z-index: 3; | |
82 outline: none; | |
83 } | |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
84 |
1449 | 85 .splitscreen-toggle svg path, |
86 .clear-selection svg path { | |
87 fill: #666; | |
88 } | |
89 | |
90 .splitscreen-toggle { | |
91 right: 2.5rem; | |
92 } | |
1305
6c0c204f6bce
improved fairwayprofile headline/buttons style
Markus Kottlaender <markus@intevation.de>
parents:
1299
diff
changeset
|
93 |
1449 | 94 .clear-selection { |
95 right: 0.5rem; | |
96 } | |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
97 |
1449 | 98 .show .profile { |
99 height: 50vh; | |
100 } | |
1382
8b85032ed3cd
added loading animation to profile
Markus Kottlaender <markus@intevation.de>
parents:
1372
diff
changeset
|
101 |
1449 | 102 .loading { |
103 background: rgba(255, 255, 255, 0.96); | |
104 position: absolute; | |
105 z-index: 99; | |
106 top: 0; | |
107 right: 0; | |
108 bottom: 0; | |
109 left: 0; | |
110 } | |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
111 </style> |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
112 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
113 <script> |
1362
ca33ad696594
remove the first empyty lines
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1361
diff
changeset
|
114 /* This is Free Software under GNU Affero General Public License v >= 3.0 |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
115 * without warranty, see README.md and license for details. |
1361
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1313
diff
changeset
|
116 * |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
117 * SPDX-License-Identifier: AGPL-3.0-or-later |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
118 * License-Filename: LICENSES/AGPL-3.0.txt |
1361
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1313
diff
changeset
|
119 * |
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1313
diff
changeset
|
120 * Copyright (C) 2018 by via donau |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
121 * – Österreichische Wasserstraßen-Gesellschaft mbH |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
122 * Software engineering by Intevation GmbH |
1361
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1313
diff
changeset
|
123 * |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
124 * Author(s): |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
125 * Thomas Junk <thomas.junk@intevation.de> |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
126 */ |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
127 import * as d3 from "d3"; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
128 import { mapState, mapGetters } from "vuex"; |
1312
3c37017f5eb8
fixed cross profile diagram after switching to to admin context and back and it's responsive behavior
Markus Kottlaender <markus@intevation.de>
parents:
1305
diff
changeset
|
129 import debounce from "debounce"; |
2389
13de09e30645
fairway_profile: available_waterlevels selection with dummy data added
Thomas Junk <thomas.junk@intevation.de>
parents:
2368
diff
changeset
|
130 import { formatSurveyDate } from "@/lib/date.js"; |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
131 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
132 const GROUND_COLOR = "#4A2F06"; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
133 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
134 export default { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
135 name: "fairwayprofile", |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
136 data() { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
137 return { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
138 coordinatesInput: "", |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
139 coordinatesSelect: null, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
140 cutLabel: "", |
1312
3c37017f5eb8
fixed cross profile diagram after switching to to admin context and back and it's responsive behavior
Markus Kottlaender <markus@intevation.de>
parents:
1305
diff
changeset
|
141 showLabelInput: false, |
3c37017f5eb8
fixed cross profile diagram after switching to to admin context and back and it's responsive behavior
Markus Kottlaender <markus@intevation.de>
parents:
1305
diff
changeset
|
142 width: null, |
1372
553aadd97087
new cross profile workflow (WIP)
Markus Kottlaender <markus@intevation.de>
parents:
1362
diff
changeset
|
143 height: null, |
553aadd97087
new cross profile workflow (WIP)
Markus Kottlaender <markus@intevation.de>
parents:
1362
diff
changeset
|
144 margin: { |
553aadd97087
new cross profile workflow (WIP)
Markus Kottlaender <markus@intevation.de>
parents:
1362
diff
changeset
|
145 top: 20, |
553aadd97087
new cross profile workflow (WIP)
Markus Kottlaender <markus@intevation.de>
parents:
1362
diff
changeset
|
146 right: 40, |
553aadd97087
new cross profile workflow (WIP)
Markus Kottlaender <markus@intevation.de>
parents:
1362
diff
changeset
|
147 bottom: 30, |
553aadd97087
new cross profile workflow (WIP)
Markus Kottlaender <markus@intevation.de>
parents:
1362
diff
changeset
|
148 left: 40 |
553aadd97087
new cross profile workflow (WIP)
Markus Kottlaender <markus@intevation.de>
parents:
1362
diff
changeset
|
149 } |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
150 }; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
151 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
152 computed: { |
1394
b350b0b5cb6c
refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents:
1391
diff
changeset
|
153 ...mapGetters("fairwayprofile", ["totalLength"]), |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
154 ...mapState("application", ["showSplitscreen"]), |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
155 ...mapState("fairwayprofile", [ |
2392
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
156 "additionalSurvey", |
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
157 "currentProfile", |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
158 "endPoint", |
2392
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
159 "fairwayData", |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
160 "minAlt", |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
161 "maxAlt", |
2392
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
162 "profileLoading", |
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
163 "referenceWaterLevel", |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
164 "selectedWaterLevel", |
2392
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
165 "startPoint", |
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
166 "waterLevels" |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
167 ]), |
1394
b350b0b5cb6c
refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents:
1391
diff
changeset
|
168 ...mapState("bottlenecks", [ |
b350b0b5cb6c
refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents:
1391
diff
changeset
|
169 "selectedBottleneck", |
b350b0b5cb6c
refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents:
1391
diff
changeset
|
170 "selectedSurvey", |
b350b0b5cb6c
refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents:
1391
diff
changeset
|
171 "surveysLoading" |
b350b0b5cb6c
refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents:
1391
diff
changeset
|
172 ]), |
2392
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
173 relativeWaterLevelDelta() { |
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
174 return this.selectedWaterLevel.value - this.referenceWaterLevel; |
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
175 }, |
2389
13de09e30645
fairway_profile: available_waterlevels selection with dummy data added
Thomas Junk <thomas.junk@intevation.de>
parents:
2368
diff
changeset
|
176 currentLevel: { |
13de09e30645
fairway_profile: available_waterlevels selection with dummy data added
Thomas Junk <thomas.junk@intevation.de>
parents:
2368
diff
changeset
|
177 get() { |
13de09e30645
fairway_profile: available_waterlevels selection with dummy data added
Thomas Junk <thomas.junk@intevation.de>
parents:
2368
diff
changeset
|
178 return this.selectedWaterLevel.date; |
13de09e30645
fairway_profile: available_waterlevels selection with dummy data added
Thomas Junk <thomas.junk@intevation.de>
parents:
2368
diff
changeset
|
179 }, |
13de09e30645
fairway_profile: available_waterlevels selection with dummy data added
Thomas Junk <thomas.junk@intevation.de>
parents:
2368
diff
changeset
|
180 set(value) { |
13de09e30645
fairway_profile: available_waterlevels selection with dummy data added
Thomas Junk <thomas.junk@intevation.de>
parents:
2368
diff
changeset
|
181 this.$store.commit("fairwayprofile/setSelectedWaterLevel", value); |
13de09e30645
fairway_profile: available_waterlevels selection with dummy data added
Thomas Junk <thomas.junk@intevation.de>
parents:
2368
diff
changeset
|
182 } |
13de09e30645
fairway_profile: available_waterlevels selection with dummy data added
Thomas Junk <thomas.junk@intevation.de>
parents:
2368
diff
changeset
|
183 }, |
13de09e30645
fairway_profile: available_waterlevels selection with dummy data added
Thomas Junk <thomas.junk@intevation.de>
parents:
2368
diff
changeset
|
184 availableWaterlevels() { |
13de09e30645
fairway_profile: available_waterlevels selection with dummy data added
Thomas Junk <thomas.junk@intevation.de>
parents:
2368
diff
changeset
|
185 return Object.keys(this.waterLevels); |
13de09e30645
fairway_profile: available_waterlevels selection with dummy data added
Thomas Junk <thomas.junk@intevation.de>
parents:
2368
diff
changeset
|
186 }, |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
187 currentData() { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
188 if ( |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
189 !this.selectedSurvey || |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
190 !this.currentProfile.hasOwnProperty(this.selectedSurvey.date_info) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
191 ) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
192 return []; |
1394
b350b0b5cb6c
refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents:
1391
diff
changeset
|
193 return this.currentProfile[this.selectedSurvey.date_info].points; |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
194 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
195 additionalData() { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
196 if ( |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
197 !this.additionalSurvey || |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
198 !this.currentProfile.hasOwnProperty(this.additionalSurvey.date_info) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
199 ) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
200 return []; |
1394
b350b0b5cb6c
refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents:
1391
diff
changeset
|
201 return this.currentProfile[this.additionalSurvey.date_info].points; |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
202 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
203 waterColor() { |
2368
96b0314f2bd6
fairway_profile: consuming the offered waterlevel WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2358
diff
changeset
|
204 return "#005DFF"; |
1394
b350b0b5cb6c
refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents:
1391
diff
changeset
|
205 }, |
b350b0b5cb6c
refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents:
1391
diff
changeset
|
206 xScale() { |
b350b0b5cb6c
refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents:
1391
diff
changeset
|
207 return [0, this.totalLength]; |
b350b0b5cb6c
refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents:
1391
diff
changeset
|
208 }, |
b350b0b5cb6c
refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents:
1391
diff
changeset
|
209 yScaleRight() { |
2392
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
210 //ToDO calcReleativeDepth(this.maxAlt) to get the |
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
211 // maximum depth according to the actual waterlevel |
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
212 // additionally: take the one which is higher reference or current waterlevel |
1394
b350b0b5cb6c
refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents:
1391
diff
changeset
|
213 const DELTA = this.maxAlt * 1.1 - this.maxAlt; |
b350b0b5cb6c
refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents:
1391
diff
changeset
|
214 return [this.maxAlt * 1 + DELTA, -DELTA]; |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
215 } |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
216 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
217 watch: { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
218 currentData() { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
219 this.drawDiagram(); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
220 }, |
1382
8b85032ed3cd
added loading animation to profile
Markus Kottlaender <markus@intevation.de>
parents:
1372
diff
changeset
|
221 additionalData() { |
8b85032ed3cd
added loading animation to profile
Markus Kottlaender <markus@intevation.de>
parents:
1372
diff
changeset
|
222 this.drawDiagram(); |
8b85032ed3cd
added loading animation to profile
Markus Kottlaender <markus@intevation.de>
parents:
1372
diff
changeset
|
223 }, |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
224 width() { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
225 this.drawDiagram(); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
226 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
227 height() { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
228 this.drawDiagram(); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
229 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
230 waterLevels() { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
231 this.drawDiagram(); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
232 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
233 selectedWaterLevel() { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
234 this.drawDiagram(); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
235 }, |
2264
627bfcbbf631
client: Draw fairway dimensions for all LoS and in more "cut cases".
Raimund Renkert <raimund.renkert@intevation.de>
parents:
2154
diff
changeset
|
236 fairwayData() { |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
237 this.drawDiagram(); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
238 } |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
239 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
240 methods: { |
2389
13de09e30645
fairway_profile: available_waterlevels selection with dummy data added
Thomas Junk <thomas.junk@intevation.de>
parents:
2368
diff
changeset
|
241 formatSurveyDate(value) { |
13de09e30645
fairway_profile: available_waterlevels selection with dummy data added
Thomas Junk <thomas.junk@intevation.de>
parents:
2368
diff
changeset
|
242 return formatSurveyDate(value); |
13de09e30645
fairway_profile: available_waterlevels selection with dummy data added
Thomas Junk <thomas.junk@intevation.de>
parents:
2368
diff
changeset
|
243 }, |
2392
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
244 calcRelativeDepth(depth) { |
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
245 /* takes a depth value and substracts the delta of the relative waterlevel |
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
246 * say the reference level is above the current level, the ground is nearer, |
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
247 * thus, the depth is lower. |
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
248 * |
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
249 * E.g.: |
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
250 * |
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
251 * Reference waterlevel 5m, current 4m => delta = -1m |
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
252 * If the distance to the ground was 3m from the 5m mark |
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
253 * it is now only 2m from the current waterlevel. |
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
254 * |
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
255 * Vice versa: |
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
256 * |
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
257 * If the reference level is 5m and the current 6m => delta = +1m |
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
258 * The ground is one meter farer away from the current waterlevel |
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
259 * |
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
260 */ |
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
261 return depth - this.relativeWaterLevelDelta; |
0b8793a1947c
fairway_profile: calc relative depth WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2389
diff
changeset
|
262 }, |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
263 drawDiagram() { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
264 this.coordinatesSelect = null; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
265 const chartDiv = document.querySelector(".fairwayprofile"); |
1299
2738a6ae9ad8
fontawesome 4 -> 5
Markus Kottlaender <markus@intevation.de>
parents:
1272
diff
changeset
|
266 d3.select(".fairwayprofile svg").remove(); |
1312
3c37017f5eb8
fixed cross profile diagram after switching to to admin context and back and it's responsive behavior
Markus Kottlaender <markus@intevation.de>
parents:
1305
diff
changeset
|
267 this.scaleFairwayProfile(); |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
268 let svg = d3.select(chartDiv).append("svg"); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
269 svg.attr("width", this.width); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
270 svg.attr("height", this.height); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
271 const width = this.width - this.margin.right - 1.5 * this.margin.left; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
272 const height = this.height - this.margin.top - 2 * this.margin.bottom; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
273 const currentData = this.currentData; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
274 const additionalData = this.additionalData; |
1394
b350b0b5cb6c
refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents:
1391
diff
changeset
|
275 const { xScale, yScaleRight, graph } = this.generateCoordinates( |
b350b0b5cb6c
refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents:
1391
diff
changeset
|
276 svg, |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
277 height, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
278 width |
1394
b350b0b5cb6c
refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents:
1391
diff
changeset
|
279 ); |
1588
2888bfacd331
fairwayprofile: do not try to render fairwayprofile without dimensions
Thomas Junk <thomas.junk@intevation.de>
parents:
1558
diff
changeset
|
280 if (!this.height || !this.width) return; // do not try to render when height and width are unknown |
1394
b350b0b5cb6c
refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents:
1391
diff
changeset
|
281 this.drawWaterlevel({ graph, xScale, yScaleRight, height }); |
b350b0b5cb6c
refactored fairwayprofile cross cuts
Markus Kottlaender <markus@intevation.de>
parents:
1391
diff
changeset
|
282 this.drawLabels({ graph, height }); |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
283 if (currentData) { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
284 this.drawProfile({ |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
285 graph, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
286 xScale, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
287 yScaleRight, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
288 currentData, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
289 height, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
290 color: GROUND_COLOR, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
291 strokeColor: "black", |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
292 opacity: 1 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
293 }); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
294 } |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
295 if (additionalData) { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
296 this.drawProfile({ |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
297 graph, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
298 xScale, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
299 yScaleRight, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
300 currentData: additionalData, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
301 height, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
302 color: GROUND_COLOR, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
303 strokeColor: "#943007", |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
304 opacity: 0.6 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
305 }); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
306 } |
2358
da75385887b9
fairway_profile: render riverbed on layer behind LOS
Thomas Junk <thomas.junk@intevation.de>
parents:
2265
diff
changeset
|
307 this.drawFairway({ graph, xScale, yScaleRight }); |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
308 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
309 drawFairway({ graph, xScale, yScaleRight }) { |
2264
627bfcbbf631
client: Draw fairway dimensions for all LoS and in more "cut cases".
Raimund Renkert <raimund.renkert@intevation.de>
parents:
2154
diff
changeset
|
310 if (this.fairwayData === undefined) { |
2265
940ae7c20326
client: pdf-gen: use default template when backend does not provide any
Markus Kottlaender <markus@intevation.de>
parents:
2264
diff
changeset
|
311 return; |
2264
627bfcbbf631
client: Draw fairway dimensions for all LoS and in more "cut cases".
Raimund Renkert <raimund.renkert@intevation.de>
parents:
2154
diff
changeset
|
312 } |
627bfcbbf631
client: Draw fairway dimensions for all LoS and in more "cut cases".
Raimund Renkert <raimund.renkert@intevation.de>
parents:
2154
diff
changeset
|
313 for (let data of this.fairwayData) { |
627bfcbbf631
client: Draw fairway dimensions for all LoS and in more "cut cases".
Raimund Renkert <raimund.renkert@intevation.de>
parents:
2154
diff
changeset
|
314 const [startPoint, endPoint, depth] = data.coordinates[0]; |
627bfcbbf631
client: Draw fairway dimensions for all LoS and in more "cut cases".
Raimund Renkert <raimund.renkert@intevation.de>
parents:
2154
diff
changeset
|
315 const style = data.style(); |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
316 let fairwayArea = d3 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
317 .area() |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
318 .x(function(d) { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
319 return xScale(d.x); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
320 }) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
321 .y0(yScaleRight(0)) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
322 .y1(function(d) { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
323 return yScaleRight(d.y); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
324 }); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
325 graph |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
326 .append("path") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
327 .datum([{ x: startPoint, y: depth }, { x: endPoint, y: depth }]) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
328 .attr("fill", "#002AFF") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
329 .attr("fill-opacity", 0.65) |
2264
627bfcbbf631
client: Draw fairway dimensions for all LoS and in more "cut cases".
Raimund Renkert <raimund.renkert@intevation.de>
parents:
2154
diff
changeset
|
330 .attr("stroke", style[0].getStroke().getColor()) |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
331 .attr("d", fairwayArea); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
332 } |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
333 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
334 drawLabels({ graph, height }) { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
335 graph |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
336 .append("text") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
337 .attr("transform", ["rotate(-90)"]) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
338 .attr("y", this.width - 60) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
339 .attr("x", -(this.height - this.margin.top - this.margin.bottom) / 2) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
340 .attr("dy", "1em") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
341 .attr("fill", "black") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
342 .style("text-anchor", "middle") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
343 .text("Depth [m]"); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
344 graph |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
345 .append("text") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
346 .attr("y", 0 - this.margin.left) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
347 .attr("x", 0 - height / 4) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
348 .attr("dy", "1em") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
349 .attr("fill", "black") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
350 .style("text-anchor", "middle") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
351 .attr("transform", [ |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
352 "translate(" + this.width / 2 + "," + this.height + ")", |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
353 "rotate(0)" |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
354 ]) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
355 .text("Width [m]"); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
356 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
357 generateCoordinates(svg, height, width) { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
358 let xScale = d3 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
359 .scaleLinear() |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
360 .domain(this.xScale) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
361 .rangeRound([0, width]); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
362 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
363 xScale.ticks(5); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
364 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
365 let yScaleRight = d3 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
366 .scaleLinear() |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
367 .domain(this.yScaleRight) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
368 .rangeRound([height, 0]); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
369 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
370 let xAxis = d3.axisBottom(xScale); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
371 let yAxis2 = d3.axisRight(yScaleRight); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
372 let graph = svg |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
373 .append("g") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
374 .attr( |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
375 "transform", |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
376 "translate(" + this.margin.left + "," + this.margin.top + ")" |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
377 ); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
378 graph |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
379 .append("g") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
380 .attr("transform", "translate(0," + height + ")") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
381 .call(xAxis.ticks(5)); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
382 graph |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
383 .append("g") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
384 .attr("transform", "translate(" + width + ",0)") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
385 .call(yAxis2); |
2368
96b0314f2bd6
fairway_profile: consuming the offered waterlevel WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
2358
diff
changeset
|
386 return { xScale, yScaleRight, graph }; |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
387 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
388 drawWaterlevel({ graph, xScale, yScaleRight, height }) { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
389 let waterArea = d3 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
390 .area() |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
391 .x(function(d) { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
392 return xScale(d.x); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
393 }) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
394 .y0(height) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
395 .y1(function(d) { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
396 return yScaleRight(d.y); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
397 }); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
398 graph |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
399 .append("path") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
400 .datum([{ x: 0, y: 0 }, { x: this.totalLength, y: 0 }]) |
2264
627bfcbbf631
client: Draw fairway dimensions for all LoS and in more "cut cases".
Raimund Renkert <raimund.renkert@intevation.de>
parents:
2154
diff
changeset
|
401 .attr("fill-opacity", 0.65) |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
402 .attr("fill", this.waterColor) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
403 .attr("stroke", this.waterColor) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
404 .attr("d", waterArea); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
405 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
406 drawProfile({ |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
407 graph, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
408 xScale, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
409 yScaleRight, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
410 currentData, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
411 height, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
412 color, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
413 strokeColor, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
414 opacity |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
415 }) { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
416 for (let part of currentData) { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
417 let profileLine = d3 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
418 .line() |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
419 .x(d => { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
420 return xScale(d.x); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
421 }) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
422 .y(d => { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
423 return yScaleRight(d.y); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
424 }); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
425 let profileArea = d3 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
426 .area() |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
427 .x(function(d) { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
428 return xScale(d.x); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
429 }) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
430 .y0(height) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
431 .y1(function(d) { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
432 return yScaleRight(d.y); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
433 }); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
434 graph |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
435 .append("path") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
436 .datum(part) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
437 .attr("fill", color) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
438 .attr("stroke", color) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
439 .attr("stroke-width", 3) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
440 .attr("stroke-opacity", opacity) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
441 .attr("fill-opacity", opacity) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
442 .attr("d", profileArea); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
443 graph |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
444 .append("path") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
445 .datum(part) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
446 .attr("fill", "none") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
447 .attr("stroke", strokeColor) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
448 .attr("stroke-linejoin", "round") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
449 .attr("stroke-linecap", "round") |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
450 .attr("stroke-width", 3) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
451 .attr("stroke-opacity", opacity) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
452 .attr("fill-opacity", opacity) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
453 .attr("d", profileLine); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
454 } |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
455 }, |
1312
3c37017f5eb8
fixed cross profile diagram after switching to to admin context and back and it's responsive behavior
Markus Kottlaender <markus@intevation.de>
parents:
1305
diff
changeset
|
456 scaleFairwayProfile() { |
3c37017f5eb8
fixed cross profile diagram after switching to to admin context and back and it's responsive behavior
Markus Kottlaender <markus@intevation.de>
parents:
1305
diff
changeset
|
457 if (!document.querySelector(".fairwayprofile")) return; |
3c37017f5eb8
fixed cross profile diagram after switching to to admin context and back and it's responsive behavior
Markus Kottlaender <markus@intevation.de>
parents:
1305
diff
changeset
|
458 const clientHeight = document.querySelector(".fairwayprofile") |
3c37017f5eb8
fixed cross profile diagram after switching to to admin context and back and it's responsive behavior
Markus Kottlaender <markus@intevation.de>
parents:
1305
diff
changeset
|
459 .clientHeight; |
3c37017f5eb8
fixed cross profile diagram after switching to to admin context and back and it's responsive behavior
Markus Kottlaender <markus@intevation.de>
parents:
1305
diff
changeset
|
460 const clientWidth = document.querySelector(".fairwayprofile").clientWidth; |
3c37017f5eb8
fixed cross profile diagram after switching to to admin context and back and it's responsive behavior
Markus Kottlaender <markus@intevation.de>
parents:
1305
diff
changeset
|
461 if (!clientHeight || !clientWidth) return; |
3c37017f5eb8
fixed cross profile diagram after switching to to admin context and back and it's responsive behavior
Markus Kottlaender <markus@intevation.de>
parents:
1305
diff
changeset
|
462 this.height = clientHeight; |
3c37017f5eb8
fixed cross profile diagram after switching to to admin context and back and it's responsive behavior
Markus Kottlaender <markus@intevation.de>
parents:
1305
diff
changeset
|
463 this.width = clientWidth; |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
464 } |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
465 }, |
1312
3c37017f5eb8
fixed cross profile diagram after switching to to admin context and back and it's responsive behavior
Markus Kottlaender <markus@intevation.de>
parents:
1305
diff
changeset
|
466 created() { |
3c37017f5eb8
fixed cross profile diagram after switching to to admin context and back and it's responsive behavior
Markus Kottlaender <markus@intevation.de>
parents:
1305
diff
changeset
|
467 window.addEventListener("resize", debounce(this.drawDiagram), 100); |
3c37017f5eb8
fixed cross profile diagram after switching to to admin context and back and it's responsive behavior
Markus Kottlaender <markus@intevation.de>
parents:
1305
diff
changeset
|
468 }, |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
469 mounted() { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
470 this.drawDiagram(); |
1312
3c37017f5eb8
fixed cross profile diagram after switching to to admin context and back and it's responsive behavior
Markus Kottlaender <markus@intevation.de>
parents:
1305
diff
changeset
|
471 }, |
3c37017f5eb8
fixed cross profile diagram after switching to to admin context and back and it's responsive behavior
Markus Kottlaender <markus@intevation.de>
parents:
1305
diff
changeset
|
472 updated() { |
3c37017f5eb8
fixed cross profile diagram after switching to to admin context and back and it's responsive behavior
Markus Kottlaender <markus@intevation.de>
parents:
1305
diff
changeset
|
473 this.scaleFairwayProfile(); |
3c37017f5eb8
fixed cross profile diagram after switching to to admin context and back and it's responsive behavior
Markus Kottlaender <markus@intevation.de>
parents:
1305
diff
changeset
|
474 }, |
3c37017f5eb8
fixed cross profile diagram after switching to to admin context and back and it's responsive behavior
Markus Kottlaender <markus@intevation.de>
parents:
1305
diff
changeset
|
475 destroyed() { |
3c37017f5eb8
fixed cross profile diagram after switching to to admin context and back and it's responsive behavior
Markus Kottlaender <markus@intevation.de>
parents:
1305
diff
changeset
|
476 window.removeEventListener("resize", debounce(this.drawDiagram)); |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
477 } |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
478 }; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
479 </script> |