Mercurial > gemma
annotate client/src/components/importconfiguration/types/Fairwaydimensions.vue @ 4329:83eb99662a91
client: improve ability to test FW diagrams
* Restructure code in fairwayavailability.js to seperate external data
retrieval and adding the data into the store. Good side effects are
that using a mutation for setting test data is easier and only
one commit call is necessary, which means less clutter in the state history.
* Adding an example how to use this for testing to docs/developers.md .
* Bump copyright year for one file.
author | Bernhard Reiter <bernhard@intevation.de> |
---|---|
date | Wed, 04 Sep 2019 17:05:43 +0200 |
parents | 439e1865a2d2 |
children | 3759b47f20f3 |
rev | line source |
---|---|
1992 | 1 <template> |
2 <div> | |
3281
439e1865a2d2
client: define stretches/imports: code cleanup / style improvements
Markus Kottlaender <markus@intevation.de>
parents:
2979
diff
changeset
|
3 <div class="d-flex px-2"> |
439e1865a2d2
client: define stretches/imports: code cleanup / style improvements
Markus Kottlaender <markus@intevation.de>
parents:
2979
diff
changeset
|
4 <div class="flex-column w-100"> |
1992 | 5 <div class="flex-row text-left"> |
6 <small class="text-muted"> <translate>URL</translate> </small> | |
7 </div> | |
8 <div class="w-100"> | |
1996 | 9 <input |
2089
c001eb18b33d
import schedule: fairway dimension fixed
Thomas Junk <thomas.junk@intevation.de>
parents:
2069
diff
changeset
|
10 @input="urlChanged" |
3281
439e1865a2d2
client: define stretches/imports: code cleanup / style improvements
Markus Kottlaender <markus@intevation.de>
parents:
2979
diff
changeset
|
11 class="url form-control form-control-sm" |
1996 | 12 type="url" |
13 :value="url" | |
1992 | 14 /> |
15 </div> | |
16 </div> | |
17 </div> | |
3281
439e1865a2d2
client: define stretches/imports: code cleanup / style improvements
Markus Kottlaender <markus@intevation.de>
parents:
2979
diff
changeset
|
18 <div v-if="!url" class="d-flex px-2"> |
1992 | 19 <small |
20 ><translate class="text-danger">Please enter a URL</translate></small | |
21 > | |
22 </div> | |
3281
439e1865a2d2
client: define stretches/imports: code cleanup / style improvements
Markus Kottlaender <markus@intevation.de>
parents:
2979
diff
changeset
|
23 <div class="d-flex px-2"> |
439e1865a2d2
client: define stretches/imports: code cleanup / style improvements
Markus Kottlaender <markus@intevation.de>
parents:
2979
diff
changeset
|
24 <div class="flex-column mt-2 mr-3 w-50"> |
1992 | 25 <div class="flex-row text-left"> |
26 <small class="text-muted"> <translate>Featuretype</translate> </small> | |
27 </div> | |
28 <div class="w-100"> | |
1996 | 29 <input |
2089
c001eb18b33d
import schedule: fairway dimension fixed
Thomas Junk <thomas.junk@intevation.de>
parents:
2069
diff
changeset
|
30 @input="featureTypeChanged" |
3281
439e1865a2d2
client: define stretches/imports: code cleanup / style improvements
Markus Kottlaender <markus@intevation.de>
parents:
2979
diff
changeset
|
31 class="featuretype form-control form-control-sm" |
1996 | 32 type="text" |
33 :value="featureType" | |
34 /> | |
1992 | 35 </div> |
36 <div v-if="!featureType" class="d-flex flex-row"> | |
37 <small | |
38 ><translate class="text-danger" | |
39 >Please enter a Featuretype</translate | |
40 ></small | |
41 > | |
42 </div> | |
43 </div> | |
3281
439e1865a2d2
client: define stretches/imports: code cleanup / style improvements
Markus Kottlaender <markus@intevation.de>
parents:
2979
diff
changeset
|
44 <div class="flex-column mt-2 w-50"> |
1992 | 45 <div class="flex-row text-left"> |
46 <small class="text-muted"> <translate>SortBy</translate> </small> | |
47 </div> | |
48 <div class="w-100"> | |
1996 | 49 <input |
2089
c001eb18b33d
import schedule: fairway dimension fixed
Thomas Junk <thomas.junk@intevation.de>
parents:
2069
diff
changeset
|
50 @input="sortByChanged" |
3281
439e1865a2d2
client: define stretches/imports: code cleanup / style improvements
Markus Kottlaender <markus@intevation.de>
parents:
2979
diff
changeset
|
51 class="sortby form-control form-control-sm" |
1996 | 52 type="text" |
53 :value="sortBy" | |
54 /> | |
1992 | 55 </div> |
56 <div v-if="!sortBy" class="d-flex flex-row"> | |
57 <small | |
58 ><translate class="text-danger" | |
59 >Please enter SortBy</translate | |
60 ></small | |
61 > | |
62 </div> | |
63 </div> | |
64 </div> | |
3281
439e1865a2d2
client: define stretches/imports: code cleanup / style improvements
Markus Kottlaender <markus@intevation.de>
parents:
2979
diff
changeset
|
65 <div class="d-flex px-2"> |
439e1865a2d2
client: define stretches/imports: code cleanup / style improvements
Markus Kottlaender <markus@intevation.de>
parents:
2979
diff
changeset
|
66 <div class="flex-column mt-2 mr-3 w-50"> |
1992 | 67 <div class="flex-row text-left"> |
68 <small class="text-muted"> <translate>LOS</translate> </small> | |
69 </div> | |
70 <div class="w-100"> | |
3281
439e1865a2d2
client: define stretches/imports: code cleanup / style improvements
Markus Kottlaender <markus@intevation.de>
parents:
2979
diff
changeset
|
71 <select v-model="los" class="form-control form-control-sm"> |
2099
1baae9d31b3d
importschedule: LOS fixed, default level=3
Thomas Junk <thomas.junk@intevation.de>
parents:
2089
diff
changeset
|
72 <option>1</option> |
1baae9d31b3d
importschedule: LOS fixed, default level=3
Thomas Junk <thomas.junk@intevation.de>
parents:
2089
diff
changeset
|
73 <option>2</option> |
1baae9d31b3d
importschedule: LOS fixed, default level=3
Thomas Junk <thomas.junk@intevation.de>
parents:
2089
diff
changeset
|
74 <option>3</option> |
1992 | 75 </select> |
76 </div> | |
77 <div v-if="!LOS" class="d-flex flex-row"> | |
78 <small | |
79 ><translate class="text-danger" | |
80 >Please enter a level of service</translate | |
81 ></small | |
82 > | |
83 </div> | |
84 </div> | |
3281
439e1865a2d2
client: define stretches/imports: code cleanup / style improvements
Markus Kottlaender <markus@intevation.de>
parents:
2979
diff
changeset
|
85 <div class="flex-column mt-2 w-50"> |
1992 | 86 <div class="flex-row text-left"> |
87 <small class="text-muted"> <translate>Depth</translate> </small> | |
88 </div> | |
89 <div class="d-flex flex-row"> | |
1996 | 90 <input |
91 @input="depthChanged" | |
3281
439e1865a2d2
client: define stretches/imports: code cleanup / style improvements
Markus Kottlaender <markus@intevation.de>
parents:
2979
diff
changeset
|
92 class="depth form-control form-control-sm" |
1996 | 93 type="number" |
94 :value="depth" | |
95 /> | |
1992 | 96 <div class="ml-2 my-auto">cm</div> |
97 </div> | |
98 <div v-if="!depth" class="d-flex flex-row"> | |
99 <small | |
100 ><translate class="text-danger" | |
101 >Please enter a depth</translate | |
102 ></small | |
103 > | |
104 </div> | |
105 </div> | |
106 </div> | |
3281
439e1865a2d2
client: define stretches/imports: code cleanup / style improvements
Markus Kottlaender <markus@intevation.de>
parents:
2979
diff
changeset
|
107 <div class="d-flex px-2"> |
439e1865a2d2
client: define stretches/imports: code cleanup / style improvements
Markus Kottlaender <markus@intevation.de>
parents:
2979
diff
changeset
|
108 <div class="flex-column mt-2 mr-3 w-50"> |
1992 | 109 <div class="flex-row text-left"> |
110 <small class="text-muted"> <translate>MinWidth</translate> </small> | |
111 </div> | |
112 <div class="d-flex flex-row"> | |
1996 | 113 <input |
114 @input="minWidthChanged" | |
3281
439e1865a2d2
client: define stretches/imports: code cleanup / style improvements
Markus Kottlaender <markus@intevation.de>
parents:
2979
diff
changeset
|
115 class="minwidth form-control form-control-sm" |
1996 | 116 type="number" |
117 :value="minWidth" | |
118 /> | |
1992 | 119 <div class="ml-2 my-auto"> m</div> |
120 </div> | |
121 <div v-if="!minWidth" class="d-flex flex-row"> | |
122 <small | |
123 ><translate class="text-danger" | |
124 >Please enter a minimum width</translate | |
125 ></small | |
126 > | |
127 </div> | |
128 </div> | |
3281
439e1865a2d2
client: define stretches/imports: code cleanup / style improvements
Markus Kottlaender <markus@intevation.de>
parents:
2979
diff
changeset
|
129 <div class="flex-column mt-2 w-50"> |
1992 | 130 <div class="flex-row text-left"> |
131 <small class="text-muted"> <translate>MaxWidth</translate> </small> | |
132 </div> | |
133 <div class="d-flex flex-row"> | |
1996 | 134 <input |
135 @input="maxWidthChanged" | |
3281
439e1865a2d2
client: define stretches/imports: code cleanup / style improvements
Markus Kottlaender <markus@intevation.de>
parents:
2979
diff
changeset
|
136 class="maxwidth form-control form-control-sm" |
1996 | 137 type="number" |
138 :value="maxWidth" | |
139 /> | |
1992 | 140 <div class="ml-2 my-auto"> m</div> |
141 </div> | |
142 <div v-if="!maxWidth" class="d-flex flex-row"> | |
143 <small | |
144 ><translate class="text-danger" | |
145 >Please enter a maximum width</translate | |
146 ></small | |
147 > | |
148 </div> | |
149 </div> | |
150 </div> | |
3281
439e1865a2d2
client: define stretches/imports: code cleanup / style improvements
Markus Kottlaender <markus@intevation.de>
parents:
2979
diff
changeset
|
151 <div class="d-flex px-2"> |
439e1865a2d2
client: define stretches/imports: code cleanup / style improvements
Markus Kottlaender <markus@intevation.de>
parents:
2979
diff
changeset
|
152 <div class="flex-column mt-2 w-50"> |
1992 | 153 <div class="flex-row text-left"> |
154 <small class="text-muted"> | |
155 <translate>Source orgranization</translate> | |
156 </small> | |
157 </div> | |
158 <div class="w-100"> | |
159 <input | |
2089
c001eb18b33d
import schedule: fairway dimension fixed
Thomas Junk <thomas.junk@intevation.de>
parents:
2069
diff
changeset
|
160 @input="sourceOrganizationChanged" |
3281
439e1865a2d2
client: define stretches/imports: code cleanup / style improvements
Markus Kottlaender <markus@intevation.de>
parents:
2979
diff
changeset
|
161 class="sourceorganization form-control form-control-sm" |
1992 | 162 type="text" |
1996 | 163 :value="sourceOrganization" |
1992 | 164 /> |
165 </div> | |
166 <div v-if="!sourceOrganization" class="d-flex flex-row"> | |
167 <small | |
168 ><translate class="text-danger" | |
169 >Please enter a source orgranization</translate | |
170 ></small | |
171 > | |
172 </div> | |
173 </div> | |
174 </div> | |
175 </div> | |
176 </template> | |
177 | |
178 <script> | |
2069 | 179 /* This is Free Software under GNU Affero General Public License v >= 3.0 |
180 * without warranty, see README.md and license for details. | |
181 * | |
182 * SPDX-License-Identifier: AGPL-3.0-or-later | |
183 * License-Filename: LICENSES/AGPL-3.0.txt | |
184 * | |
185 * Copyright (C) 2018 by via donau | |
186 * – Österreichische Wasserstraßen-Gesellschaft mbH | |
187 * Software engineering by Intevation GmbH | |
188 * | |
189 * Author(s): | |
190 * Thomas Junk <thomas.junk@intevation.de> | |
191 */ | |
1992 | 192 export default { |
1996 | 193 name: "fairwaydimensions", |
194 props: [ | |
195 "url", | |
196 "featureType", | |
197 "sortBy", | |
198 "depth", | |
199 "LOS", | |
200 "minWidth", | |
201 "maxWidth", | |
202 "sourceOrganization" | |
203 ], | |
204 methods: { | |
205 urlChanged(e) { | |
206 this.$emit("urlChanged", e.target.value); | |
207 }, | |
208 featureTypeChanged(e) { | |
209 this.$emit("featureTypeChanged", e.target.value); | |
210 }, | |
211 sortByChanged(e) { | |
212 this.$emit("sortByChanged", e.target.value); | |
213 }, | |
214 depthChanged(e) { | |
1999
c420add2dec2
small errors fixed
Thomas Junk <thomas.junk@intevation.de>
parents:
1996
diff
changeset
|
215 this.$emit("depthChanged", e.target.value * 1); |
1996 | 216 }, |
217 LOSChanged(e) { | |
1999
c420add2dec2
small errors fixed
Thomas Junk <thomas.junk@intevation.de>
parents:
1996
diff
changeset
|
218 this.$emit("LOSChanged", e.target.value * 1); |
1996 | 219 }, |
220 minWidthChanged(e) { | |
1999
c420add2dec2
small errors fixed
Thomas Junk <thomas.junk@intevation.de>
parents:
1996
diff
changeset
|
221 this.$emit("minWidthChanged", e.target.value * 1); |
1996 | 222 }, |
223 maxWidthChanged(e) { | |
1999
c420add2dec2
small errors fixed
Thomas Junk <thomas.junk@intevation.de>
parents:
1996
diff
changeset
|
224 this.$emit("maxWidthChanged", e.target.value * 1); |
1996 | 225 }, |
226 sourceOrganizationChanged(e) { | |
227 this.$emit("sourceOrganizationChanged", e.target.value); | |
228 } | |
2099
1baae9d31b3d
importschedule: LOS fixed, default level=3
Thomas Junk <thomas.junk@intevation.de>
parents:
2089
diff
changeset
|
229 }, |
1baae9d31b3d
importschedule: LOS fixed, default level=3
Thomas Junk <thomas.junk@intevation.de>
parents:
2089
diff
changeset
|
230 computed: { |
1baae9d31b3d
importschedule: LOS fixed, default level=3
Thomas Junk <thomas.junk@intevation.de>
parents:
2089
diff
changeset
|
231 los: { |
1baae9d31b3d
importschedule: LOS fixed, default level=3
Thomas Junk <thomas.junk@intevation.de>
parents:
2089
diff
changeset
|
232 get() { |
1baae9d31b3d
importschedule: LOS fixed, default level=3
Thomas Junk <thomas.junk@intevation.de>
parents:
2089
diff
changeset
|
233 return this.LOS; |
1baae9d31b3d
importschedule: LOS fixed, default level=3
Thomas Junk <thomas.junk@intevation.de>
parents:
2089
diff
changeset
|
234 }, |
1baae9d31b3d
importschedule: LOS fixed, default level=3
Thomas Junk <thomas.junk@intevation.de>
parents:
2089
diff
changeset
|
235 set(value) { |
1baae9d31b3d
importschedule: LOS fixed, default level=3
Thomas Junk <thomas.junk@intevation.de>
parents:
2089
diff
changeset
|
236 this.$emit("LOSChanged", value * 1); |
1baae9d31b3d
importschedule: LOS fixed, default level=3
Thomas Junk <thomas.junk@intevation.de>
parents:
2089
diff
changeset
|
237 } |
1baae9d31b3d
importschedule: LOS fixed, default level=3
Thomas Junk <thomas.junk@intevation.de>
parents:
2089
diff
changeset
|
238 } |
1996 | 239 } |
1992 | 240 }; |
241 </script> | |
242 | |
243 <style></style> |