Mercurial > gemma
annotate client/src/fairway/Fairwayprofile.vue @ 1217:ba8cd80d68b6
made more use of bootstrap classes instead of custom css
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Mon, 19 Nov 2018 15:20:22 +0100 |
parents | ddfdf440da24 |
children |
rev | line source |
---|---|
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
1 <template> |
1146
74e180ad3d6b
fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents:
1142
diff
changeset
|
2 <div :class="['position-relative', {show: showSplitscreen}]" v-if="Object.keys(currentProfile).length"> |
74e180ad3d6b
fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents:
1142
diff
changeset
|
3 <button |
1166
0cddb3b24d24
moved fairway profile close/collapse buttons into profile container
Markus Kottlaender <markus@intevation.de>
parents:
1165
diff
changeset
|
4 class="rounded-bottom bg-white border-0 position-absolute splitscreen-toggle shadow-sm" |
1146
74e180ad3d6b
fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents:
1142
diff
changeset
|
5 @click="$store.commit('application/showSplitscreen', false)" |
74e180ad3d6b
fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents:
1142
diff
changeset
|
6 v-if="showSplitscreen"> |
74e180ad3d6b
fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents:
1142
diff
changeset
|
7 <i class="fa fa-angle-down"></i> |
74e180ad3d6b
fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents:
1142
diff
changeset
|
8 </button> |
74e180ad3d6b
fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents:
1142
diff
changeset
|
9 <button |
1166
0cddb3b24d24
moved fairway profile close/collapse buttons into profile container
Markus Kottlaender <markus@intevation.de>
parents:
1165
diff
changeset
|
10 class="rounded-bottom bg-white border-0 position-absolute clear-selection shadow-sm" |
1146
74e180ad3d6b
fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents:
1142
diff
changeset
|
11 @click="$store.dispatch('fairwayprofile/clearSelection');" |
74e180ad3d6b
fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents:
1142
diff
changeset
|
12 v-if="showSplitscreen"> |
74e180ad3d6b
fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents:
1142
diff
changeset
|
13 <i class="fa fa-times text-danger"></i> |
74e180ad3d6b
fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents:
1142
diff
changeset
|
14 </button> |
1217
ba8cd80d68b6
made more use of bootstrap classes instead of custom css
Markus Kottlaender <markus@intevation.de>
parents:
1204
diff
changeset
|
15 <div class="profile bg-white position-relative d-flex flex-column pr-5"> |
1146
74e180ad3d6b
fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents:
1142
diff
changeset
|
16 <h5 class="mb-0 mt-2">{{ selectedBottleneck }} ({{ selectedSurvey.date_info }})</h5> |
74e180ad3d6b
fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents:
1142
diff
changeset
|
17 <div class="d-flex flex-fill"> |
1217
ba8cd80d68b6
made more use of bootstrap classes instead of custom css
Markus Kottlaender <markus@intevation.de>
parents:
1204
diff
changeset
|
18 <div class="fairwayprofile m-3 mt-0 bg-white flex-grow-1"></div> |
1146
74e180ad3d6b
fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents:
1142
diff
changeset
|
19 <div class="additionalsurveys d-flex flex-column"> |
1176
fdab87f013e2
improve fairway profile UI
Markus Kottlaender <markus@intevation.de>
parents:
1166
diff
changeset
|
20 <small> |
fdab87f013e2
improve fairway profile UI
Markus Kottlaender <markus@intevation.de>
parents:
1166
diff
changeset
|
21 Additional Surveys |
fdab87f013e2
improve fairway profile UI
Markus Kottlaender <markus@intevation.de>
parents:
1166
diff
changeset
|
22 <select v-model="additionalSurvey" class="form-control form-control-sm"> |
fdab87f013e2
improve fairway profile UI
Markus Kottlaender <markus@intevation.de>
parents:
1166
diff
changeset
|
23 <option value="">None</option> |
fdab87f013e2
improve fairway profile UI
Markus Kottlaender <markus@intevation.de>
parents:
1166
diff
changeset
|
24 <option |
fdab87f013e2
improve fairway profile UI
Markus Kottlaender <markus@intevation.de>
parents:
1166
diff
changeset
|
25 v-for="survey in additionalSurveys" |
fdab87f013e2
improve fairway profile UI
Markus Kottlaender <markus@intevation.de>
parents:
1166
diff
changeset
|
26 :key="survey.date_info" |
fdab87f013e2
improve fairway profile UI
Markus Kottlaender <markus@intevation.de>
parents:
1166
diff
changeset
|
27 :value="survey" |
fdab87f013e2
improve fairway profile UI
Markus Kottlaender <markus@intevation.de>
parents:
1166
diff
changeset
|
28 >{{survey.date_info}}</option> |
fdab87f013e2
improve fairway profile UI
Markus Kottlaender <markus@intevation.de>
parents:
1166
diff
changeset
|
29 </select> |
fdab87f013e2
improve fairway profile UI
Markus Kottlaender <markus@intevation.de>
parents:
1166
diff
changeset
|
30 <hr> |
fdab87f013e2
improve fairway profile UI
Markus Kottlaender <markus@intevation.de>
parents:
1166
diff
changeset
|
31 <div class="d-flex text-left mb-2"> |
fdab87f013e2
improve fairway profile UI
Markus Kottlaender <markus@intevation.de>
parents:
1166
diff
changeset
|
32 <div class="text-nowrap mr-1"> |
fdab87f013e2
improve fairway profile UI
Markus Kottlaender <markus@intevation.de>
parents:
1166
diff
changeset
|
33 <b>Start:</b> |
fdab87f013e2
improve fairway profile UI
Markus Kottlaender <markus@intevation.de>
parents:
1166
diff
changeset
|
34 <br> |
fdab87f013e2
improve fairway profile UI
Markus Kottlaender <markus@intevation.de>
parents:
1166
diff
changeset
|
35 Lat: {{ startPoint[1] }} |
fdab87f013e2
improve fairway profile UI
Markus Kottlaender <markus@intevation.de>
parents:
1166
diff
changeset
|
36 <br> |
fdab87f013e2
improve fairway profile UI
Markus Kottlaender <markus@intevation.de>
parents:
1166
diff
changeset
|
37 Lon: {{ startPoint[0] }} |
fdab87f013e2
improve fairway profile UI
Markus Kottlaender <markus@intevation.de>
parents:
1166
diff
changeset
|
38 </div> |
fdab87f013e2
improve fairway profile UI
Markus Kottlaender <markus@intevation.de>
parents:
1166
diff
changeset
|
39 <div class="text-nowrap ml-1"> |
fdab87f013e2
improve fairway profile UI
Markus Kottlaender <markus@intevation.de>
parents:
1166
diff
changeset
|
40 <b>End:</b> |
fdab87f013e2
improve fairway profile UI
Markus Kottlaender <markus@intevation.de>
parents:
1166
diff
changeset
|
41 <br> |
fdab87f013e2
improve fairway profile UI
Markus Kottlaender <markus@intevation.de>
parents:
1166
diff
changeset
|
42 Lat: {{ endPoint[1] }} |
fdab87f013e2
improve fairway profile UI
Markus Kottlaender <markus@intevation.de>
parents:
1166
diff
changeset
|
43 <br> |
fdab87f013e2
improve fairway profile UI
Markus Kottlaender <markus@intevation.de>
parents:
1166
diff
changeset
|
44 Lon: {{ endPoint[0] }} |
fdab87f013e2
improve fairway profile UI
Markus Kottlaender <markus@intevation.de>
parents:
1166
diff
changeset
|
45 </div> |
1177
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
46 <button class="btn btn-outline-secondary btn-sm ml-2 mt-auto" |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
47 @click="showLabelInput = !showLabelInput"> |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
48 <i :class="'fa fa-' + (showLabelInput ? 'times' : 'save')"></i> |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
49 </button> |
1176
fdab87f013e2
improve fairway profile UI
Markus Kottlaender <markus@intevation.de>
parents:
1166
diff
changeset
|
50 <button v-clipboard:copy="coordinatesForClipboard" |
fdab87f013e2
improve fairway profile UI
Markus Kottlaender <markus@intevation.de>
parents:
1166
diff
changeset
|
51 v-clipboard:success="onCopyCoordinates" |
fdab87f013e2
improve fairway profile UI
Markus Kottlaender <markus@intevation.de>
parents:
1166
diff
changeset
|
52 class="btn btn-outline-secondary btn-sm ml-2 mt-auto"> |
fdab87f013e2
improve fairway profile UI
Markus Kottlaender <markus@intevation.de>
parents:
1166
diff
changeset
|
53 <i class="fa fa-copy"></i> |
fdab87f013e2
improve fairway profile UI
Markus Kottlaender <markus@intevation.de>
parents:
1166
diff
changeset
|
54 </button> |
fdab87f013e2
improve fairway profile UI
Markus Kottlaender <markus@intevation.de>
parents:
1166
diff
changeset
|
55 </div> |
1177
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
56 <div v-if="showLabelInput"> |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
57 Enter label for cross profile: |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
58 <div class="position-relative"> |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
59 <input class="form-control form-control-sm pr-5" v-model="cutLabel" /><br> |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
60 <button class="btn btn-sm btn-outline-secondary position-absolute" |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
61 @click="saveCut" |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
62 v-if="cutLabel" |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
63 style="top: 0; right: 0;"> |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
64 <i class="fa fa-check"></i> |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
65 </button> |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
66 </div> |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
67 </div> |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
68 Saved cross profiles: |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
69 <select class="form-control form-control-sm mb-2" v-model="coordinatesSelect"> |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
70 <option></option> |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
71 <option v-for="(cut, index) in previousCuts" :value="cut.coordinates" :key="index"> |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
72 {{ cut.label }} |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
73 </option> |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
74 </select> |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
75 Enter coordinates manually: |
1176
fdab87f013e2
improve fairway profile UI
Markus Kottlaender <markus@intevation.de>
parents:
1166
diff
changeset
|
76 <div class="position-relative"> |
fdab87f013e2
improve fairway profile UI
Markus Kottlaender <markus@intevation.de>
parents:
1166
diff
changeset
|
77 <input class="form-control form-control-sm pr-5" placeholder="Lat,Lon,Lat,Lon" v-model="coordinatesInput" /><br> |
1181 | 78 <button class="btn btn-sm btn-outline-secondary position-absolute" |
79 @click="applyManualCoordinates" | |
80 style="top: 0; right: 0;" | |
81 v-if="coordinatesInput"> | |
1176
fdab87f013e2
improve fairway profile UI
Markus Kottlaender <markus@intevation.de>
parents:
1166
diff
changeset
|
82 <i class="fa fa-check"></i> |
fdab87f013e2
improve fairway profile UI
Markus Kottlaender <markus@intevation.de>
parents:
1166
diff
changeset
|
83 </button> |
fdab87f013e2
improve fairway profile UI
Markus Kottlaender <markus@intevation.de>
parents:
1166
diff
changeset
|
84 </div> |
1146
74e180ad3d6b
fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents:
1142
diff
changeset
|
85 </small> |
74e180ad3d6b
fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents:
1142
diff
changeset
|
86 </div> |
74e180ad3d6b
fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents:
1142
diff
changeset
|
87 </div> |
1015
d2f30a784fb3
feat: add selectfield to fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents:
909
diff
changeset
|
88 </div> |
646
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
89 </div> |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
90 </template> |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
91 |
1146
74e180ad3d6b
fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents:
1142
diff
changeset
|
92 <style lang="sass" scoped> |
74e180ad3d6b
fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents:
1142
diff
changeset
|
93 .profile |
74e180ad3d6b
fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents:
1142
diff
changeset
|
94 width: 100vw |
74e180ad3d6b
fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents:
1142
diff
changeset
|
95 height: 0 |
74e180ad3d6b
fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents:
1142
diff
changeset
|
96 overflow: hidden |
74e180ad3d6b
fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents:
1142
diff
changeset
|
97 z-index: 2 |
74e180ad3d6b
fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents:
1142
diff
changeset
|
98 |
74e180ad3d6b
fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents:
1142
diff
changeset
|
99 .splitscreen-toggle, |
74e180ad3d6b
fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents:
1142
diff
changeset
|
100 .clear-selection |
1166
0cddb3b24d24
moved fairway profile close/collapse buttons into profile container
Markus Kottlaender <markus@intevation.de>
parents:
1165
diff
changeset
|
101 right: $icon-width + $offset |
1146
74e180ad3d6b
fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents:
1142
diff
changeset
|
102 width: $icon-width |
74e180ad3d6b
fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents:
1142
diff
changeset
|
103 height: $icon-height |
74e180ad3d6b
fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents:
1142
diff
changeset
|
104 margin-top: 2px |
1166
0cddb3b24d24
moved fairway profile close/collapse buttons into profile container
Markus Kottlaender <markus@intevation.de>
parents:
1165
diff
changeset
|
105 z-index: 3 |
1146
74e180ad3d6b
fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents:
1142
diff
changeset
|
106 outline: none |
74e180ad3d6b
fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents:
1142
diff
changeset
|
107 |
74e180ad3d6b
fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents:
1142
diff
changeset
|
108 .clear-selection |
74e180ad3d6b
fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents:
1142
diff
changeset
|
109 right: $offset |
786
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
110 |
1146
74e180ad3d6b
fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents:
1142
diff
changeset
|
111 .show |
74e180ad3d6b
fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents:
1142
diff
changeset
|
112 .profile |
74e180ad3d6b
fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents:
1142
diff
changeset
|
113 height: 50vh |
1015
d2f30a784fb3
feat: add selectfield to fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents:
909
diff
changeset
|
114 |
1146
74e180ad3d6b
fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents:
1142
diff
changeset
|
115 .waterlevelselection |
74e180ad3d6b
fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents:
1142
diff
changeset
|
116 margin-top: $large-offset |
74e180ad3d6b
fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents:
1142
diff
changeset
|
117 margin-right: $large-offset |
1015
d2f30a784fb3
feat: add selectfield to fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents:
909
diff
changeset
|
118 |
1146
74e180ad3d6b
fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents:
1142
diff
changeset
|
119 .additionalsurveys |
74e180ad3d6b
fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents:
1142
diff
changeset
|
120 margin-top: $large-offset |
74e180ad3d6b
fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents:
1142
diff
changeset
|
121 margin-bottom: auto |
74e180ad3d6b
fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents:
1142
diff
changeset
|
122 margin-right: $large-offset |
74e180ad3d6b
fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents:
1142
diff
changeset
|
123 margin-left: auto |
1177
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
124 max-width: 300px |
786
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
125 |
1146
74e180ad3d6b
fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents:
1142
diff
changeset
|
126 .additionalsurveys input |
74e180ad3d6b
fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents:
1142
diff
changeset
|
127 margin-right: $small-offset |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
128 </style> |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
129 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
130 <script> |
1019
ca628dce90dd
Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents:
1018
diff
changeset
|
131 /* |
ca628dce90dd
Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents:
1018
diff
changeset
|
132 * This is Free Software under GNU Affero General Public License v >= 3.0 |
ca628dce90dd
Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents:
1018
diff
changeset
|
133 * without warranty, see README.md and license for details. |
ca628dce90dd
Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents:
1018
diff
changeset
|
134 * |
ca628dce90dd
Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents:
1018
diff
changeset
|
135 * SPDX-License-Identifier: AGPL-3.0-or-later |
ca628dce90dd
Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents:
1018
diff
changeset
|
136 * License-Filename: LICENSES/AGPL-3.0.txt |
ca628dce90dd
Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents:
1018
diff
changeset
|
137 * |
ca628dce90dd
Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents:
1018
diff
changeset
|
138 * Copyright (C) 2018 by via donau |
ca628dce90dd
Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents:
1018
diff
changeset
|
139 * – Österreichische Wasserstraßen-Gesellschaft mbH |
ca628dce90dd
Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents:
1018
diff
changeset
|
140 * Software engineering by Intevation GmbH |
ca628dce90dd
Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents:
1018
diff
changeset
|
141 * |
ca628dce90dd
Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents:
1018
diff
changeset
|
142 * Author(s): |
ca628dce90dd
Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents:
1018
diff
changeset
|
143 * Thomas Junk <thomas.junk@intevation.de> |
ca628dce90dd
Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents:
1018
diff
changeset
|
144 */ |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
145 import * as d3 from "d3"; |
1164
dc99decbf9e3
added input to enter cross cut coordinates manually
Markus Kottlaender <markus@intevation.de>
parents:
1163
diff
changeset
|
146 import { mapState, mapGetters } from "vuex"; |
1163
fb5c83d4ea1d
added copy coordinates button to fairway profile
Markus Kottlaender <markus@intevation.de>
parents:
1146
diff
changeset
|
147 import { displayError, displayInfo } from "../application/lib/errors.js"; |
1164
dc99decbf9e3
added input to enter cross cut coordinates manually
Markus Kottlaender <markus@intevation.de>
parents:
1163
diff
changeset
|
148 import Feature from "ol/Feature"; |
dc99decbf9e3
added input to enter cross cut coordinates manually
Markus Kottlaender <markus@intevation.de>
parents:
1163
diff
changeset
|
149 import LineString from "ol/geom/LineString"; |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
150 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
151 const GROUND_COLOR = "#4A2F06"; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
152 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
153 export default { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
154 name: "fairwayprofile", |
646
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
155 props: [ |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
156 "width", |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
157 "height", |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
158 "xScale", |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
159 "yScaleLeft", |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
160 "yScaleRight", |
786
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
161 "margin", |
1015
d2f30a784fb3
feat: add selectfield to fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents:
909
diff
changeset
|
162 "additionalSurveys" |
646
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
163 ], |
1164
dc99decbf9e3
added input to enter cross cut coordinates manually
Markus Kottlaender <markus@intevation.de>
parents:
1163
diff
changeset
|
164 data() { |
dc99decbf9e3
added input to enter cross cut coordinates manually
Markus Kottlaender <markus@intevation.de>
parents:
1163
diff
changeset
|
165 return { |
dc99decbf9e3
added input to enter cross cut coordinates manually
Markus Kottlaender <markus@intevation.de>
parents:
1163
diff
changeset
|
166 wait: false, |
1177
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
167 coordinatesInput: "", |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
168 coordinatesSelect: null, |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
169 cutLabel: "", |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
170 showLabelInput: false |
1164
dc99decbf9e3
added input to enter cross cut coordinates manually
Markus Kottlaender <markus@intevation.de>
parents:
1163
diff
changeset
|
171 }; |
dc99decbf9e3
added input to enter cross cut coordinates manually
Markus Kottlaender <markus@intevation.de>
parents:
1163
diff
changeset
|
172 }, |
786
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
173 computed: { |
1164
dc99decbf9e3
added input to enter cross cut coordinates manually
Markus Kottlaender <markus@intevation.de>
parents:
1163
diff
changeset
|
174 ...mapGetters("map", ["getLayerByName"]), |
1146
74e180ad3d6b
fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents:
1142
diff
changeset
|
175 ...mapState("application", ["showSplitscreen"]), |
1030
bf10a7f990cc
refac: fairway profile retrieves current data from store
Thomas Junk <thomas.junk@intevation.de>
parents:
1021
diff
changeset
|
176 ...mapState("fairwayprofile", [ |
bf10a7f990cc
refac: fairway profile retrieves current data from store
Thomas Junk <thomas.junk@intevation.de>
parents:
1021
diff
changeset
|
177 "startPoint", |
bf10a7f990cc
refac: fairway profile retrieves current data from store
Thomas Junk <thomas.junk@intevation.de>
parents:
1021
diff
changeset
|
178 "endPoint", |
bf10a7f990cc
refac: fairway profile retrieves current data from store
Thomas Junk <thomas.junk@intevation.de>
parents:
1021
diff
changeset
|
179 "currentProfile", |
1053
82ae9cb56982
refac: removed properties from fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents:
1046
diff
changeset
|
180 "minAlt", |
82ae9cb56982
refac: removed properties from fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents:
1046
diff
changeset
|
181 "maxAlt", |
82ae9cb56982
refac: removed properties from fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents:
1046
diff
changeset
|
182 "totalLength", |
82ae9cb56982
refac: removed properties from fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents:
1046
diff
changeset
|
183 "fairwayCoordinates", |
82ae9cb56982
refac: removed properties from fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents:
1046
diff
changeset
|
184 "waterLevels", |
1177
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
185 "selectedWaterLevel", |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
186 "previousCuts" |
1030
bf10a7f990cc
refac: fairway profile retrieves current data from store
Thomas Junk <thomas.junk@intevation.de>
parents:
1021
diff
changeset
|
187 ]), |
1146
74e180ad3d6b
fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents:
1142
diff
changeset
|
188 ...mapState("bottlenecks", ["selectedBottleneck", "selectedSurvey"]), |
1056
28eb62f7c676
additional survey as dynamic property
Thomas Junk <thomas.junk@intevation.de>
parents:
1054
diff
changeset
|
189 additionalSurvey: { |
28eb62f7c676
additional survey as dynamic property
Thomas Junk <thomas.junk@intevation.de>
parents:
1054
diff
changeset
|
190 get() { |
28eb62f7c676
additional survey as dynamic property
Thomas Junk <thomas.junk@intevation.de>
parents:
1054
diff
changeset
|
191 return this.$store.getters["fairwayprofile/additionalSurvey"]; |
28eb62f7c676
additional survey as dynamic property
Thomas Junk <thomas.junk@intevation.de>
parents:
1054
diff
changeset
|
192 }, |
28eb62f7c676
additional survey as dynamic property
Thomas Junk <thomas.junk@intevation.de>
parents:
1054
diff
changeset
|
193 set(value) { |
28eb62f7c676
additional survey as dynamic property
Thomas Junk <thomas.junk@intevation.de>
parents:
1054
diff
changeset
|
194 this.$store.commit("fairwayprofile/setAdditionalSurvey", value); |
28eb62f7c676
additional survey as dynamic property
Thomas Junk <thomas.junk@intevation.de>
parents:
1054
diff
changeset
|
195 this.selectAdditionalSurveyData(); |
28eb62f7c676
additional survey as dynamic property
Thomas Junk <thomas.junk@intevation.de>
parents:
1054
diff
changeset
|
196 } |
28eb62f7c676
additional survey as dynamic property
Thomas Junk <thomas.junk@intevation.de>
parents:
1054
diff
changeset
|
197 }, |
1030
bf10a7f990cc
refac: fairway profile retrieves current data from store
Thomas Junk <thomas.junk@intevation.de>
parents:
1021
diff
changeset
|
198 currentData() { |
1111
f106aee673e7
selected bottleneck and surveys now handled by bottleneck store
Markus Kottlaender <markus@intevation.de>
parents:
1075
diff
changeset
|
199 if ( |
f106aee673e7
selected bottleneck and surveys now handled by bottleneck store
Markus Kottlaender <markus@intevation.de>
parents:
1075
diff
changeset
|
200 !this.selectedSurvey || |
f106aee673e7
selected bottleneck and surveys now handled by bottleneck store
Markus Kottlaender <markus@intevation.de>
parents:
1075
diff
changeset
|
201 !this.currentProfile.hasOwnProperty(this.selectedSurvey.date_info) |
1142
dc3f0277628a
feat: Importqueue listing (Proof of concept)
Thomas Junk <thomas.junk@intevation.de>
parents:
1111
diff
changeset
|
202 ) |
dc3f0277628a
feat: Importqueue listing (Proof of concept)
Thomas Junk <thomas.junk@intevation.de>
parents:
1111
diff
changeset
|
203 return []; |
1111
f106aee673e7
selected bottleneck and surveys now handled by bottleneck store
Markus Kottlaender <markus@intevation.de>
parents:
1075
diff
changeset
|
204 return this.currentProfile[this.selectedSurvey.date_info]; |
1030
bf10a7f990cc
refac: fairway profile retrieves current data from store
Thomas Junk <thomas.junk@intevation.de>
parents:
1021
diff
changeset
|
205 }, |
1038
e8ebfbc2aa05
feat: additional surveydata WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
1030
diff
changeset
|
206 additionalData() { |
1111
f106aee673e7
selected bottleneck and surveys now handled by bottleneck store
Markus Kottlaender <markus@intevation.de>
parents:
1075
diff
changeset
|
207 if ( |
f106aee673e7
selected bottleneck and surveys now handled by bottleneck store
Markus Kottlaender <markus@intevation.de>
parents:
1075
diff
changeset
|
208 !this.additionalSurvey || |
f106aee673e7
selected bottleneck and surveys now handled by bottleneck store
Markus Kottlaender <markus@intevation.de>
parents:
1075
diff
changeset
|
209 !this.currentProfile.hasOwnProperty(this.additionalSurvey.date_info) |
1142
dc3f0277628a
feat: Importqueue listing (Proof of concept)
Thomas Junk <thomas.junk@intevation.de>
parents:
1111
diff
changeset
|
210 ) |
dc3f0277628a
feat: Importqueue listing (Proof of concept)
Thomas Junk <thomas.junk@intevation.de>
parents:
1111
diff
changeset
|
211 return []; |
1111
f106aee673e7
selected bottleneck and surveys now handled by bottleneck store
Markus Kottlaender <markus@intevation.de>
parents:
1075
diff
changeset
|
212 return this.currentProfile[this.additionalSurvey.date_info]; |
1038
e8ebfbc2aa05
feat: additional surveydata WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
1030
diff
changeset
|
213 }, |
786
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
214 waterColor() { |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
215 const result = this.waterLevels.find( |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
216 x => x.level === this.selectedWaterLevel |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
217 ); |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
218 return result.color; |
1163
fb5c83d4ea1d
added copy coordinates button to fairway profile
Markus Kottlaender <markus@intevation.de>
parents:
1146
diff
changeset
|
219 }, |
fb5c83d4ea1d
added copy coordinates button to fairway profile
Markus Kottlaender <markus@intevation.de>
parents:
1146
diff
changeset
|
220 coordinatesForClipboard() { |
fb5c83d4ea1d
added copy coordinates button to fairway profile
Markus Kottlaender <markus@intevation.de>
parents:
1146
diff
changeset
|
221 return ( |
fb5c83d4ea1d
added copy coordinates button to fairway profile
Markus Kottlaender <markus@intevation.de>
parents:
1146
diff
changeset
|
222 this.startPoint[1] + |
fb5c83d4ea1d
added copy coordinates button to fairway profile
Markus Kottlaender <markus@intevation.de>
parents:
1146
diff
changeset
|
223 "," + |
fb5c83d4ea1d
added copy coordinates button to fairway profile
Markus Kottlaender <markus@intevation.de>
parents:
1146
diff
changeset
|
224 this.startPoint[0] + |
fb5c83d4ea1d
added copy coordinates button to fairway profile
Markus Kottlaender <markus@intevation.de>
parents:
1146
diff
changeset
|
225 "," + |
fb5c83d4ea1d
added copy coordinates button to fairway profile
Markus Kottlaender <markus@intevation.de>
parents:
1146
diff
changeset
|
226 this.endPoint[1] + |
fb5c83d4ea1d
added copy coordinates button to fairway profile
Markus Kottlaender <markus@intevation.de>
parents:
1146
diff
changeset
|
227 "," + |
fb5c83d4ea1d
added copy coordinates button to fairway profile
Markus Kottlaender <markus@intevation.de>
parents:
1146
diff
changeset
|
228 this.endPoint[0] |
fb5c83d4ea1d
added copy coordinates button to fairway profile
Markus Kottlaender <markus@intevation.de>
parents:
1146
diff
changeset
|
229 ); |
786
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
230 } |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
231 }, |
646
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
232 watch: { |
1146
74e180ad3d6b
fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents:
1142
diff
changeset
|
233 showSplitscreen() { |
74e180ad3d6b
fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents:
1142
diff
changeset
|
234 this.drawDiagram(); |
74e180ad3d6b
fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents:
1142
diff
changeset
|
235 }, |
1038
e8ebfbc2aa05
feat: additional surveydata WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
1030
diff
changeset
|
236 currentData() { |
780 | 237 this.drawDiagram(); |
238 }, | |
646
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
239 width() { |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
240 this.drawDiagram(); |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
241 }, |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
242 height() { |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
243 this.drawDiagram(); |
786
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
244 }, |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
245 waterLevels() { |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
246 this.drawDiagram(); |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
247 }, |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
248 selectedWaterLevel() { |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
249 this.drawDiagram(); |
802
327aa4a18a1c
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
786
diff
changeset
|
250 }, |
327aa4a18a1c
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
786
diff
changeset
|
251 fairwayCoordinates() { |
327aa4a18a1c
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
786
diff
changeset
|
252 this.drawDiagram(); |
1177
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
253 }, |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
254 selectedBottleneck() { |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
255 this.$store.dispatch("fairwayprofile/previousCuts"); |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
256 this.cutLabel = |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
257 this.selectedBottleneck + " (" + new Date().toISOString() + ")"; |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
258 }, |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
259 coordinatesSelect(newValue) { |
1199
181b8a947ecd
fixed property of null bug
Markus Kottlaender <markus@intevation.de>
parents:
1181
diff
changeset
|
260 if (newValue) { |
181b8a947ecd
fixed property of null bug
Markus Kottlaender <markus@intevation.de>
parents:
1181
diff
changeset
|
261 this.applyCoordinates(newValue); |
181b8a947ecd
fixed property of null bug
Markus Kottlaender <markus@intevation.de>
parents:
1181
diff
changeset
|
262 } |
646
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
263 } |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
264 }, |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
265 methods: { |
1018
ab64c76af1b0
additional survey selection for 2nd crossprofile added
Thomas Junk <thomas.junk@intevation.de>
parents:
1015
diff
changeset
|
266 selectAdditionalSurveyData() { |
1054
9bd4f82fcd8d
display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents:
1053
diff
changeset
|
267 if ( |
9bd4f82fcd8d
display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents:
1053
diff
changeset
|
268 !this.additionalSurvey || |
9bd4f82fcd8d
display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents:
1053
diff
changeset
|
269 this.wait || |
1111
f106aee673e7
selected bottleneck and surveys now handled by bottleneck store
Markus Kottlaender <markus@intevation.de>
parents:
1075
diff
changeset
|
270 this.currentProfile[this.additionalSurvey.date_info] |
1054
9bd4f82fcd8d
display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents:
1053
diff
changeset
|
271 ) { |
9bd4f82fcd8d
display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents:
1053
diff
changeset
|
272 this.drawDiagram(); |
9bd4f82fcd8d
display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents:
1053
diff
changeset
|
273 return; |
9bd4f82fcd8d
display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents:
1053
diff
changeset
|
274 } |
9bd4f82fcd8d
display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents:
1053
diff
changeset
|
275 this.$store |
9bd4f82fcd8d
display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents:
1053
diff
changeset
|
276 .dispatch("fairwayprofile/loadProfile", this.additionalSurvey) |
9bd4f82fcd8d
display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents:
1053
diff
changeset
|
277 .then(() => { |
9bd4f82fcd8d
display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents:
1053
diff
changeset
|
278 this.wait = false; |
9bd4f82fcd8d
display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents:
1053
diff
changeset
|
279 }) |
9bd4f82fcd8d
display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents:
1053
diff
changeset
|
280 .catch(error => { |
9bd4f82fcd8d
display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents:
1053
diff
changeset
|
281 this.wait = false; |
9bd4f82fcd8d
display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents:
1053
diff
changeset
|
282 let status = "ERROR"; |
9bd4f82fcd8d
display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents:
1053
diff
changeset
|
283 let data = error; |
9bd4f82fcd8d
display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents:
1053
diff
changeset
|
284 const response = error.response; |
9bd4f82fcd8d
display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents:
1053
diff
changeset
|
285 if (response) { |
9bd4f82fcd8d
display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents:
1053
diff
changeset
|
286 status = response.status; |
9bd4f82fcd8d
display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents:
1053
diff
changeset
|
287 data = response.data; |
9bd4f82fcd8d
display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents:
1053
diff
changeset
|
288 } |
9bd4f82fcd8d
display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents:
1053
diff
changeset
|
289 displayError({ |
9bd4f82fcd8d
display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents:
1053
diff
changeset
|
290 title: "Backend Error", |
9bd4f82fcd8d
display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents:
1053
diff
changeset
|
291 message: `${status}: ${data.message || data}` |
9bd4f82fcd8d
display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents:
1053
diff
changeset
|
292 }); |
9bd4f82fcd8d
display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents:
1053
diff
changeset
|
293 }); |
1015
d2f30a784fb3
feat: add selectfield to fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents:
909
diff
changeset
|
294 }, |
646
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
295 drawDiagram() { |
1177
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
296 this.coordinatesSelect = null; |
646
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
297 const chartDiv = document.querySelector(".fairwayprofile"); |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
298 d3.select("svg").remove(); |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
299 let svg = d3.select(chartDiv).append("svg"); |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
300 svg.attr("width", this.width); |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
301 svg.attr("height", this.height); |
786
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
302 const width = this.width - this.margin.right - 1.5 * this.margin.left; |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
303 const height = this.height - this.margin.top - 2 * this.margin.bottom; |
1030
bf10a7f990cc
refac: fairway profile retrieves current data from store
Thomas Junk <thomas.junk@intevation.de>
parents:
1021
diff
changeset
|
304 const currentData = this.currentData; |
1038
e8ebfbc2aa05
feat: additional surveydata WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
1030
diff
changeset
|
305 const additionalData = this.additionalData; |
780 | 306 const { |
307 xScale, | |
308 yScaleRight, | |
309 yScaleLeft, | |
310 graph | |
311 } = this.generateCoordinates(svg, height, width); | |
646
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
312 this.drawWaterlevel({ |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
313 graph, |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
314 xScale, |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
315 yScaleRight, |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
316 height, |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
317 width |
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
318 }); |
1059
51d412a79e4f
omit render while clearing profile
Thomas Junk <thomas.junk@intevation.de>
parents:
1056
diff
changeset
|
319 if (currentData) { |
51d412a79e4f
omit render while clearing profile
Thomas Junk <thomas.junk@intevation.de>
parents:
1056
diff
changeset
|
320 this.drawProfile({ |
51d412a79e4f
omit render while clearing profile
Thomas Junk <thomas.junk@intevation.de>
parents:
1056
diff
changeset
|
321 graph, |
51d412a79e4f
omit render while clearing profile
Thomas Junk <thomas.junk@intevation.de>
parents:
1056
diff
changeset
|
322 xScale, |
51d412a79e4f
omit render while clearing profile
Thomas Junk <thomas.junk@intevation.de>
parents:
1056
diff
changeset
|
323 yScaleRight, |
51d412a79e4f
omit render while clearing profile
Thomas Junk <thomas.junk@intevation.de>
parents:
1056
diff
changeset
|
324 currentData, |
51d412a79e4f
omit render while clearing profile
Thomas Junk <thomas.junk@intevation.de>
parents:
1056
diff
changeset
|
325 height, |
51d412a79e4f
omit render while clearing profile
Thomas Junk <thomas.junk@intevation.de>
parents:
1056
diff
changeset
|
326 width, |
51d412a79e4f
omit render while clearing profile
Thomas Junk <thomas.junk@intevation.de>
parents:
1056
diff
changeset
|
327 color: GROUND_COLOR, |
51d412a79e4f
omit render while clearing profile
Thomas Junk <thomas.junk@intevation.de>
parents:
1056
diff
changeset
|
328 strokeColor: "black", |
51d412a79e4f
omit render while clearing profile
Thomas Junk <thomas.junk@intevation.de>
parents:
1056
diff
changeset
|
329 opacity: 1 |
51d412a79e4f
omit render while clearing profile
Thomas Junk <thomas.junk@intevation.de>
parents:
1056
diff
changeset
|
330 }); |
51d412a79e4f
omit render while clearing profile
Thomas Junk <thomas.junk@intevation.de>
parents:
1056
diff
changeset
|
331 } |
1038
e8ebfbc2aa05
feat: additional surveydata WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
1030
diff
changeset
|
332 if (additionalData) { |
e8ebfbc2aa05
feat: additional surveydata WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
1030
diff
changeset
|
333 this.drawProfile({ |
e8ebfbc2aa05
feat: additional surveydata WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
1030
diff
changeset
|
334 graph, |
e8ebfbc2aa05
feat: additional surveydata WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
1030
diff
changeset
|
335 xScale, |
e8ebfbc2aa05
feat: additional surveydata WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
1030
diff
changeset
|
336 yScaleRight, |
1054
9bd4f82fcd8d
display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents:
1053
diff
changeset
|
337 currentData: additionalData, |
1038
e8ebfbc2aa05
feat: additional surveydata WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
1030
diff
changeset
|
338 height, |
e8ebfbc2aa05
feat: additional surveydata WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
1030
diff
changeset
|
339 width, |
1054
9bd4f82fcd8d
display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents:
1053
diff
changeset
|
340 color: GROUND_COLOR, |
9bd4f82fcd8d
display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents:
1053
diff
changeset
|
341 strokeColor: "#943007", |
9bd4f82fcd8d
display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents:
1053
diff
changeset
|
342 opacity: 0.6 |
1038
e8ebfbc2aa05
feat: additional surveydata WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
1030
diff
changeset
|
343 }); |
e8ebfbc2aa05
feat: additional surveydata WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
1030
diff
changeset
|
344 } |
786
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
345 this.drawLabels({ |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
346 graph, |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
347 xScale, |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
348 yScaleLeft, |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
349 currentData, |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
350 height, |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
351 width |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
352 }); |
802
327aa4a18a1c
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
786
diff
changeset
|
353 this.drawFairway({ |
327aa4a18a1c
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
786
diff
changeset
|
354 graph, |
327aa4a18a1c
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
786
diff
changeset
|
355 xScale, |
803
30ff051e75e9
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
802
diff
changeset
|
356 yScaleRight, |
802
327aa4a18a1c
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
786
diff
changeset
|
357 currentData, |
327aa4a18a1c
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
786
diff
changeset
|
358 height, |
327aa4a18a1c
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
786
diff
changeset
|
359 width |
327aa4a18a1c
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
786
diff
changeset
|
360 }); |
327aa4a18a1c
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
786
diff
changeset
|
361 }, |
807 | 362 drawFairway({ graph, xScale, yScaleRight }) { |
803
30ff051e75e9
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
802
diff
changeset
|
363 for (let coordinates of this.fairwayCoordinates) { |
30ff051e75e9
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
802
diff
changeset
|
364 const [startPoint, endPoint, depth] = coordinates; |
30ff051e75e9
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
802
diff
changeset
|
365 let fairwayArea = d3 |
30ff051e75e9
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
802
diff
changeset
|
366 .area() |
30ff051e75e9
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
802
diff
changeset
|
367 .x(function(d) { |
30ff051e75e9
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
802
diff
changeset
|
368 return xScale(d.x); |
30ff051e75e9
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
802
diff
changeset
|
369 }) |
849 | 370 .y0(yScaleRight(0)) |
803
30ff051e75e9
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
802
diff
changeset
|
371 .y1(function(d) { |
30ff051e75e9
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
802
diff
changeset
|
372 return yScaleRight(d.y); |
30ff051e75e9
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
802
diff
changeset
|
373 }); |
30ff051e75e9
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
802
diff
changeset
|
374 graph |
30ff051e75e9
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
802
diff
changeset
|
375 .append("path") |
1075
c1989ebe1d8a
feat: invert fairwayprofile scale
Thomas Junk <thomas.junk@intevation.de>
parents:
1059
diff
changeset
|
376 .datum([{ x: startPoint, y: depth }, { x: endPoint, y: depth }]) |
803
30ff051e75e9
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
802
diff
changeset
|
377 .attr("fill", "#002AFF") |
810 | 378 .attr("stroke-opacity", 0.65) |
379 .attr("fill-opacity", 0.65) | |
803
30ff051e75e9
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
802
diff
changeset
|
380 .attr("stroke", "#FFD20D") |
30ff051e75e9
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
802
diff
changeset
|
381 .attr("d", fairwayArea); |
30ff051e75e9
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
802
diff
changeset
|
382 } |
786
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
383 }, |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
384 drawLabels({ graph, height }) { |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
385 graph |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
386 .append("text") |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
387 .attr("transform", ["rotate(-90)"]) |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
388 .attr("y", this.width - 60) |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
389 .attr("x", -(this.height - this.margin.top - this.margin.bottom) / 2) |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
390 .attr("dy", "1em") |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
391 .attr("fill", "black") |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
392 .style("text-anchor", "middle") |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
393 .text("Depth [m]"); |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
394 graph |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
395 .append("text") |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
396 .attr("y", 0 - this.margin.left) |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
397 .attr("x", 0 - height / 4) |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
398 .attr("dy", "1em") |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
399 .attr("fill", "black") |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
400 .style("text-anchor", "middle") |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
401 .attr("transform", [ |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
402 "translate(" + this.width / 2 + "," + this.height + ")", |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
403 "rotate(0)" |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
404 ]) |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
405 .text("Width [m]"); |
646
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
406 }, |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
407 generateCoordinates(svg, height, width) { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
408 let xScale = d3 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
409 .scaleLinear() |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
410 .domain(this.xScale) |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
411 .rangeRound([0, width]); |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
412 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
413 xScale.ticks(5); |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
414 let yScaleLeft = d3 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
415 .scaleLinear() |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
416 .domain(this.yScaleLeft) |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
417 .rangeRound([height, 0]); |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
418 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
419 let yScaleRight = d3 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
420 .scaleLinear() |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
421 .domain(this.yScaleRight) |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
422 .rangeRound([height, 0]); |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
423 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
424 let xAxis = d3.axisBottom(xScale); |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
425 let yAxis2 = d3.axisRight(yScaleRight); |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
426 let graph = svg |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
427 .append("g") |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
428 .attr( |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
429 "transform", |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
430 "translate(" + this.margin.left + "," + this.margin.top + ")" |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
431 ); |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
432 graph |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
433 .append("g") |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
434 .attr("transform", "translate(0," + height + ")") |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
435 .call(xAxis.ticks(5)); |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
436 graph |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
437 .append("g") |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
438 .attr("transform", "translate(" + width + ",0)") |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
439 .call(yAxis2); |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
440 return { xScale, yScaleLeft, yScaleRight, graph }; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
441 }, |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
442 drawWaterlevel({ graph, xScale, yScaleRight, height }) { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
443 let waterArea = d3 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
444 .area() |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
445 .x(function(d) { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
446 return xScale(d.x); |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
447 }) |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
448 .y0(height) |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
449 .y1(function(d) { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
450 return yScaleRight(d.y); |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
451 }); |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
452 graph |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
453 .append("path") |
844 | 454 .datum([{ x: 0, y: 0 }, { x: this.totalLength, y: 0 }]) |
786
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
455 .attr("fill", this.waterColor) |
1bee00039973
fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
780
diff
changeset
|
456 .attr("stroke", this.waterColor) |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
457 .attr("d", waterArea); |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
458 }, |
1038
e8ebfbc2aa05
feat: additional surveydata WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
1030
diff
changeset
|
459 drawProfile({ |
e8ebfbc2aa05
feat: additional surveydata WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
1030
diff
changeset
|
460 graph, |
e8ebfbc2aa05
feat: additional surveydata WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
1030
diff
changeset
|
461 xScale, |
e8ebfbc2aa05
feat: additional surveydata WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
1030
diff
changeset
|
462 yScaleRight, |
e8ebfbc2aa05
feat: additional surveydata WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
1030
diff
changeset
|
463 currentData, |
e8ebfbc2aa05
feat: additional surveydata WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
1030
diff
changeset
|
464 height, |
e8ebfbc2aa05
feat: additional surveydata WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
1030
diff
changeset
|
465 color, |
1054
9bd4f82fcd8d
display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents:
1053
diff
changeset
|
466 strokeColor, |
9bd4f82fcd8d
display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents:
1053
diff
changeset
|
467 opacity |
1038
e8ebfbc2aa05
feat: additional surveydata WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
1030
diff
changeset
|
468 }) { |
780 | 469 for (let part of currentData) { |
470 let profileLine = d3 | |
471 .line() | |
472 .x(d => { | |
473 return xScale(d.x); | |
474 }) | |
475 .y(d => { | |
1075
c1989ebe1d8a
feat: invert fairwayprofile scale
Thomas Junk <thomas.junk@intevation.de>
parents:
1059
diff
changeset
|
476 return yScaleRight(d.y); |
780 | 477 }); |
478 let profileArea = d3 | |
479 .area() | |
480 .x(function(d) { | |
481 return xScale(d.x); | |
482 }) | |
483 .y0(height) | |
484 .y1(function(d) { | |
1075
c1989ebe1d8a
feat: invert fairwayprofile scale
Thomas Junk <thomas.junk@intevation.de>
parents:
1059
diff
changeset
|
485 return yScaleRight(d.y); |
780 | 486 }); |
487 graph | |
488 .append("path") | |
489 .datum(part) | |
1038
e8ebfbc2aa05
feat: additional surveydata WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
1030
diff
changeset
|
490 .attr("fill", color) |
e8ebfbc2aa05
feat: additional surveydata WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
1030
diff
changeset
|
491 .attr("stroke", color) |
780 | 492 .attr("stroke-width", 3) |
1054
9bd4f82fcd8d
display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents:
1053
diff
changeset
|
493 .attr("stroke-opacity", opacity) |
9bd4f82fcd8d
display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents:
1053
diff
changeset
|
494 .attr("fill-opacity", opacity) |
780 | 495 .attr("d", profileArea); |
496 graph | |
497 .append("path") | |
498 .datum(part) | |
499 .attr("fill", "none") | |
1038
e8ebfbc2aa05
feat: additional surveydata WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
1030
diff
changeset
|
500 .attr("stroke", strokeColor) |
780 | 501 .attr("stroke-linejoin", "round") |
502 .attr("stroke-linecap", "round") | |
503 .attr("stroke-width", 3) | |
1054
9bd4f82fcd8d
display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents:
1053
diff
changeset
|
504 .attr("stroke-opacity", opacity) |
9bd4f82fcd8d
display additional profile
Thomas Junk <thomas.junk@intevation.de>
parents:
1053
diff
changeset
|
505 .attr("fill-opacity", opacity) |
780 | 506 .attr("d", profileLine); |
507 } | |
1163
fb5c83d4ea1d
added copy coordinates button to fairway profile
Markus Kottlaender <markus@intevation.de>
parents:
1146
diff
changeset
|
508 }, |
fb5c83d4ea1d
added copy coordinates button to fairway profile
Markus Kottlaender <markus@intevation.de>
parents:
1146
diff
changeset
|
509 onCopyCoordinates() { |
fb5c83d4ea1d
added copy coordinates button to fairway profile
Markus Kottlaender <markus@intevation.de>
parents:
1146
diff
changeset
|
510 displayInfo({ |
fb5c83d4ea1d
added copy coordinates button to fairway profile
Markus Kottlaender <markus@intevation.de>
parents:
1146
diff
changeset
|
511 title: "Success", |
fb5c83d4ea1d
added copy coordinates button to fairway profile
Markus Kottlaender <markus@intevation.de>
parents:
1146
diff
changeset
|
512 message: "Coordinates copied to clipboard!" |
fb5c83d4ea1d
added copy coordinates button to fairway profile
Markus Kottlaender <markus@intevation.de>
parents:
1146
diff
changeset
|
513 }); |
1164
dc99decbf9e3
added input to enter cross cut coordinates manually
Markus Kottlaender <markus@intevation.de>
parents:
1163
diff
changeset
|
514 }, |
1177
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
515 applyManualCoordinates() { |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
516 const coordinates = this.coordinatesInput |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
517 .split(",") |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
518 .map(coord => parseFloat(coord.trim())); |
1200
502e0b960424
improve manual coordinate input validation
Markus Kottlaender <markus@intevation.de>
parents:
1199
diff
changeset
|
519 this.applyCoordinates([ |
502e0b960424
improve manual coordinate input validation
Markus Kottlaender <markus@intevation.de>
parents:
1199
diff
changeset
|
520 coordinates[1], |
502e0b960424
improve manual coordinate input validation
Markus Kottlaender <markus@intevation.de>
parents:
1199
diff
changeset
|
521 coordinates[0], |
502e0b960424
improve manual coordinate input validation
Markus Kottlaender <markus@intevation.de>
parents:
1199
diff
changeset
|
522 coordinates[3], |
502e0b960424
improve manual coordinate input validation
Markus Kottlaender <markus@intevation.de>
parents:
1199
diff
changeset
|
523 coordinates[2] |
502e0b960424
improve manual coordinate input validation
Markus Kottlaender <markus@intevation.de>
parents:
1199
diff
changeset
|
524 ]); |
1177
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
525 }, |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
526 applyCoordinates(coordinates) { |
1200
502e0b960424
improve manual coordinate input validation
Markus Kottlaender <markus@intevation.de>
parents:
1199
diff
changeset
|
527 // allow only numbers |
1204
ddfdf440da24
made searchbar contextual
Markus Kottlaender <markus@intevation.de>
parents:
1200
diff
changeset
|
528 coordinates = coordinates.filter(c => Number(c) === c); |
1177
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
529 if (coordinates.length === 4) { |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
530 // draw line on map |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
531 const cutLayer = this.getLayerByName("Cut Tool"); |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
532 cutLayer.data.getSource().clear(); |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
533 const cut = new Feature({ |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
534 geometry: new LineString([ |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
535 [coordinates[0], coordinates[1]], |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
536 [coordinates[2], coordinates[3]] |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
537 ]).transform("EPSG:4326", "EPSG:3857") |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
538 }); |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
539 cutLayer.data.getSource().addFeature(cut); |
1164
dc99decbf9e3
added input to enter cross cut coordinates manually
Markus Kottlaender <markus@intevation.de>
parents:
1163
diff
changeset
|
540 |
1177
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
541 // draw diagram |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
542 this.$store.dispatch("fairwayprofile/cut", cut); |
1200
502e0b960424
improve manual coordinate input validation
Markus Kottlaender <markus@intevation.de>
parents:
1199
diff
changeset
|
543 } else { |
502e0b960424
improve manual coordinate input validation
Markus Kottlaender <markus@intevation.de>
parents:
1199
diff
changeset
|
544 displayError({ |
502e0b960424
improve manual coordinate input validation
Markus Kottlaender <markus@intevation.de>
parents:
1199
diff
changeset
|
545 title: "Invalid input", |
1204
ddfdf440da24
made searchbar contextual
Markus Kottlaender <markus@intevation.de>
parents:
1200
diff
changeset
|
546 message: |
ddfdf440da24
made searchbar contextual
Markus Kottlaender <markus@intevation.de>
parents:
1200
diff
changeset
|
547 "Please enter correct coordinates in the format: Lat,Lon,Lat,Lon" |
1200
502e0b960424
improve manual coordinate input validation
Markus Kottlaender <markus@intevation.de>
parents:
1199
diff
changeset
|
548 }); |
1164
dc99decbf9e3
added input to enter cross cut coordinates manually
Markus Kottlaender <markus@intevation.de>
parents:
1163
diff
changeset
|
549 } |
1177
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
550 }, |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
551 saveCut() { |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
552 const previousCuts = |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
553 JSON.parse(localStorage.getItem("previousCuts")) || []; |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
554 const newEntry = { |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
555 label: this.cutLabel, |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
556 bottleneckName: this.selectedBottleneck, |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
557 coordinates: [...this.startPoint, ...this.endPoint] |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
558 }; |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
559 const existingEntry = previousCuts.find(cut => { |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
560 return JSON.stringify(cut) === JSON.stringify(newEntry); |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
561 }); |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
562 if (!existingEntry) previousCuts.push(newEntry); |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
563 if (previousCuts.length > 100) previousCuts.shift(); |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
564 localStorage.setItem("previousCuts", JSON.stringify(previousCuts)); |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
565 this.$store.dispatch("fairwayprofile/previousCuts"); |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
566 |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
567 this.showLabelInput = false; |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
568 displayInfo({ |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
569 title: "Coordinates saved!", |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
570 message: |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
571 'You can now select these coordinates from the "Saved cross profiles" menu to restore this cross profile.' |
48ae4458710d
save cross profiles to local storage to restore them from a dropdown
Markus Kottlaender <markus@intevation.de>
parents:
1176
diff
changeset
|
572 }); |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
573 } |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
574 }, |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
575 mounted() { |
646
4450f2ab41e0
refac: Fairwawprofile view adapted
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
576 this.drawDiagram(); |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
577 } |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
578 }; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
579 </script> |