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