Mercurial > gemma

comparison client/src/components/sections/SectionForm.vue @ 3290:3ada3d0347bd

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: define sections: duplicated and adjusted code from stretches
author Markus Kottlaender <markus@intevation.de>
date Thu, 16 May 2019 13:18:11 +0200
parents
children 0358bf723769
comparison
equal deleted inserted replaced
3289:c2cba529658d 3290:3ada3d0347bd
1 <template>
2 <div class="d-flex flex-column">
3 <div class="d-flex justify-content-between mt-2 px-2">
4 <div class="text-left flex-fill mr-1">
5 <small class="text-muted">
6 <translate>ID</translate>
7 </small>
8 <input
9 id="id"
10 type="text"
11 class="form-control form-control-sm"
12 placeholder="AT_Section_12"
13 v-model="id"
14 :disabled="editSection"
15 />
16 <span class="text-left text-danger">
17 <small v-if="errors.id && !id">
18 <translate>Please enter an id</translate>
19 </small>
20 </span>
21 </div>
22 </div>
23 <div class="d-flex justify-content-between mt-2 px-2">
24 <div class="text-left flex-fill">
25 <small class="text-muted">
26 <translate>Start rhm</translate>
27 </small>
28 <div class="d-flex flex-row position-relative">
29 <input
30 id="startrhm"
31 type="text"
32 class="form-control form-control-sm"
33 placeholder="e.g. ATXXX000010000019900"
34 v-model="startrhm"
35 ref="startrhm"
36 @focus="enablePipette('start')"
37 @blur="disablePipette('start')"
38 />
39 <span
40 class="input-group-text position-absolute input-button"
41 @click="$refs.startrhm.focus()"
42 v-tooltip="pipetteTooltip"
43 >
44 <font-awesome-icon
45 :class="{ 'text-info': pipetteStart }"
46 icon="crosshairs"
47 />
48 </span>
49 </div>
50 <span class="text-left text-danger">
51 <small v-if="errors.startrhm && !startrhm">
52 <translate>Please enter a start point</translate>
53 </small>
54 </span>
55 </div>
56 <div class="text-left flex-fill ml-2">
57 <small class="text-muted">
58 <translate>End rhm</translate>
59 </small>
60 <div class="d-flex flex-row position-relative">
61 <input
62 id="endrhm"
63 type="text"
64 class="form-control form-control-sm"
65 placeholder="e.g. ATXXX000010000019900"
66 v-model="endrhm"
67 ref="endrhm"
68 @focus="enablePipette('end')"
69 @blur="disablePipette('end')"
70 />
71 <span
72 class="input-group-text position-absolute input-button"
73 @click="$refs.endrhm.focus()"
74 v-tooltip="pipetteTooltip"
75 >
76 <font-awesome-icon
77 :class="{ 'text-info': pipetteEnd }"
78 icon="crosshairs"
79 />
80 </span>
81 </div>
82 <span class="text-left text-danger">
83 <small v-if="errors.endrhm && !endrhm">
84 <translate>Please enter an end point</translate>
85 </small>
86 </span>
87 </div>
88 <div class="text-left ml-2" v-if="!editSection">
89 <small class="text-muted">
90 <translate>Tolerance for snapping to axis</translate>
91 </small>
92 <div class="d-flex flex-row position-relative">
93 <input
94 class="form-control form-control-sm"
95 v-model.number="tolerance"
96 type="number"
97 min="0"
98 step="any"
99 id="tolerance"
100 />
101 <span class="input-group-text position-absolute input-button">
102 m
103 </span>
104 </div>
105 <span class="text-left text-danger">
106 <small v-if="errors.tolerance && !tolerance">
107 <translate>Please enter a tolerance value</translate>
108 </small>
109 </span>
110 </div>
111 </div>
112 <div class="d-flex flex-row justify-content-between px-2">
113 <div class="mt-2 mr-2 w-50 text-left">
114 <small class="text-muted">
115 <translate>Object name</translate>
116 </small>
117 <input
118 id="objbn"
119 type="text"
120 class="form-control form-control-sm"
121 placeholder=""
122 v-model="objbn"
123 />
124 <span class="text-left text-danger">
125 <small v-if="errors.objbn && !objbn">
126 <translate>Please enter an objectname</translate>
127 </small>
128 </span>
129 </div>
130 <div class="mt-2 w-50 text-left">
131 <small class="text-muted">
132 <translate>National Object name</translate>
133 </small>
134 <input
135 id="nobjbn"
136 type="text"
137 class="form-control form-control-sm"
138 v-model="nobjbn"
139 />
140 </div>
141 </div>
142 <div class="d-flex flex-row justify-content-between px-2">
143 <div class="mt-2 w-50 text-left">
144 <small class="text-muted">
145 <translate>Date info</translate>
146 </small>
147 <input
148 id="date_info"
149 type="date"
150 class="form-control form-control-sm"
151 placeholder="date_info"
152 v-model="date_info"
153 />
154 <span class="text-left text-danger">
155 <small v-if="errors.date_info && !date_info">
156 <translate>Please enter a date</translate>
157 </small>
158 </span>
159 </div>
160 <div class="mt-2 ml-2 w-50 text-left">
161 <small class="text-muted">
162 <translate>Source Organization</translate>
163 </small>
164 <input
165 id="source_organization"
166 type="text"
167 class="form-control form-control-sm"
168 v-model="source_organization"
169 />
170 <span class="text-left text-danger">
171 <small v-if="errors.source_organization && !source_organization">
172 <translate>Please enter a source organization</translate>
173 </small>
174 </span>
175 </div>
176 </div>
177 <div class="d-flex justify-content-between mt-2 p-2 border-top">
178 <button @click="$parent.showForm = false" class="btn btn-sm btn-warning">
179 <translate>Back</translate>
180 </button>
181 <button
182 @click="save"
183 type="submit"
184 class="shadow-sm btn btn-sm btn-info submit-button"
185 >
186 <translate>Submit</translate>
187 </button>
188 </div>
189 </div>
190 </template>
191
192 <style lang="sass" scoped>
193 .input-button
194 border-top-left-radius: 0
195 border-bottom-left-radius: 0
196 right: 0
197 height: 31px
198 </style>
199
200 <script>
201 /* This is Free Software under GNU Affero General Public License v >= 3.0
202 * without warranty, see README.md and license for details.
203 *
204 * SPDX-License-Identifier: AGPL-3.0-or-later
205 * License-Filename: LICENSES/AGPL-3.0.txt
206 *
207 * Copyright (C) 2018, 2019 by via donau
208 * – Österreichische Wasserstraßen-Gesellschaft mbH
209 * Software engineering by Intevation GmbH
210 *
211 * Author(s):
212 * Thomas Junk <thomas.junk@intevation.de>
213 * Tom Gottfried <tom.gottfried@intevation.de>
214 * Markus Kottländer <markus.kottlaender@intevation.de>
215 */
216 import { mapState, mapGetters } from "vuex";
217 import { displayError, displayInfo } from "@/lib/errors";
218 import { sortTable } from "@/lib/mixins";
219
220 export default {
221 mixins: [sortTable],
222 props: ["editSection"],
223 data() {
224 return {
225 pipetteStart: false,
226 pipetteEnd: false,
227 id: null,
228 startrhm: null,
229 endrhm: null,
230 tolerance: 5,
231 objbn: null,
232 nobjbn: null,
233 date_info: new Date().toISOString().split("T")[0],
234 source_organization: null,
235 errors: {
236 id: false,
237 startrhm: false,
238 endrhm: false,
239 tolerance: false,
240 objbn: false,
241 nobjbn: false,
242 date_info: false,
243 source_organization: false
244 }
245 };
246 },
247 computed: {
248 ...mapState("map", ["identifiedFeatures"]),
249 ...mapGetters("map", ["openLayersMap"]),
250 pipetteTooltip() {
251 return this.$gettext("Choose a distance mark by clicking on the map.");
252 }
253 },
254 watch: {
255 identifiedFeatures() {
256 const distanceMark = this.identifiedFeatures.find(x =>
257 /^distance_marks_geoserver/.test(x["id_"])
258 );
259 if (distanceMark) {
260 const location = distanceMark.get("location");
261 this.startrhm = this.pipetteStart ? location : this.startrhm;
262 this.endrhm = this.pipetteEnd ? location : this.endrhm;
263 this.pipetteStart = false;
264 this.pipetteEnd = false;
265 this.$store.commit("map/mapPopupEnabled", true);
266 }
267 }
268 },
269 methods: {
270 enablePipette(t) {
271 this.openLayersMap()
272 .getLayer("DISTANCEMARKSAXIS")
273 .setVisible(true);
274 this.$store.commit("map/mapPopupEnabled", false);
275 if (t === "start") {
276 this.pipetteStart = true;
277 this.pipetteEnd = false;
278 } else {
279 this.pipetteStart = false;
280 this.pipetteEnd = true;
281 }
282 },
283 disablePipette() {
284 this.$store.commit("map/mapPopupEnabled", true);
285 this.pipetteStart = false;
286 this.pipetteEnd = false;
287 },
288 validate() {
289 const fields = [
290 "id",
291 "startrhm",
292 "endrhm",
293 "objbn",
294 "date_info",
295 "source_organization"
296 ];
297 if (!this.editSection) fields.push("tolerance");
298 fields.forEach(field => {
299 if (!this[field]) {
300 this.errors[field] = true;
301 } else {
302 this.errors[field] = false;
303 }
304 });
305
306 // return true if no errors
307 return !Object.values(this.errors).reduce((a, b) => a + b, 0);
308 },
309 save() {
310 if (this.validate()) {
311 const data = {
312 name: this.id,
313 from: this.startrhm,
314 to: this.endrhm,
315 "source-organization": this.source_organization,
316 "date-info": this.date_info,
317 objnam: this.objbn,
318 nobjnam: this.nobjbn
319 };
320 if (!this.editSection) {
321 data["tolerance"] = this.tolerance;
322 }
323 this.$parent.loading = true;
324 this.$store
325 .dispatch("imports/saveSection", data)
326 .then(() => {
327 displayInfo({
328 title: this.$gettext("Import"),
329 message: this.$gettext("Starting import of section")
330 });
331 this.$store.dispatch("imports/loadSections").then(() => {
332 this.$parent.loading = false;
333 this.$parent.showForm = false;
334 });
335 })
336 .catch(error => {
337 const { status, data } = error.response;
338 displayError({
339 title: this.$gettext("Backend Error"),
340 message: `${status}: ${data.message || data}`
341 });
342 });
343 }
344 }
345 },
346 mounted() {
347 if (this.editSection) {
348 const props = this.editSection.properties;
349 this.id = props.name;
350 this.startrhm = props.lower.replace(/[,()]/g, "");
351 this.endrhm = props.upper.replace(/[,()]/g, "");
352 this.tolerance = props.tolerance;
353 this.objbn = props.objnam;
354 this.nobjbn = props.nobjnam;
355 this.date_info = props.date_info.split("T")[0];
356 this.source_organization = props.source_organization;
357 }
358 }
359 };
360 </script>