Mercurial > gemma

annotate client/src/fairway/Fairwayprofile.vue @ 1217:ba8cd80d68b6

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
1 <template>
1146
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
2 <div :class="['position-relative', {show: showSplitscreen}]" v-if="Object.keys(currentProfile).length">
74e180ad3d6b fairway profile UI improvements
Markus Kottlaender <markus@intevation.de>
parents: 1142
diff changeset
3 <button
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
1335e088e7ef fixed bug
Markus Kottlaender <markus@intevation.de>
parents: 1177
diff changeset
78 <button class="btn btn-sm btn-outline-secondary position-absolute"
1335e088e7ef fixed bug
Markus Kottlaender <markus@intevation.de>
parents: 1177
diff changeset
79 @click="applyManualCoordinates"
1335e088e7ef fixed bug
Markus Kottlaender <markus@intevation.de>
parents: 1177
diff changeset
80 style="top: 0; right: 0;"
1335e088e7ef fixed bug
Markus Kottlaender <markus@intevation.de>
parents: 1177
diff changeset
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
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
237 this.drawDiagram();
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
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
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
306 const {
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
307 xScale,
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
308 yScaleRight,
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
309 yScaleLeft,
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
310 graph
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
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
34b2cfcab24c Fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents: 803
diff changeset
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
d63e60b868bf WIP Fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents: 845
diff changeset
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
68a39aea942a Fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents: 807
diff changeset
378 .attr("stroke-opacity", 0.65)
68a39aea942a Fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents: 807
diff changeset
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
c2cba785ca4d WIP Fairwayprofile
Thomas Junk <thomas.junk@intevation.de>
parents: 841
diff changeset
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
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
469 for (let part of currentData) {
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
470 let profileLine = d3
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
471 .line()
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
472 .x(d => {
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
473 return xScale(d.x);
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
474 })
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
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
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
477 });
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
478 let profileArea = d3
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
479 .area()
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
480 .x(function(d) {
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
481 return xScale(d.x);
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
482 })
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
483 .y0(height)
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
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
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
486 });
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
487 graph
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
488 .append("path")
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
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
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
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
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
495 .attr("d", profileArea);
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
496 graph
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
497 .append("path")
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
498 .datum(part)
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
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
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
501 .attr("stroke-linejoin", "round")
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
502 .attr("stroke-linecap", "round")
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
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
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
506 .attr("d", profileLine);
c98f88ac08a4 Fairwayprofile WIP
Thomas Junk <thomas.junk@intevation.de>
parents: 646
diff changeset
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>