Mercurial > gemma

comparison client/src/components/ImportStretches.vue @ 1871:8ae7a1fba4cd

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
prototypical listview for stretches. new and back buttons. have fun
author Thomas Junk <thomas.junk@intevation.de>
date Thu, 17 Jan 2019 17:29:39 +0100
parents 3050d702913a
children 45197e7a7ad3
comparison
equal deleted inserted replaced
1870:3050d702913a 1871:8ae7a1fba4cd
2 <div class="d-flex flex-column mb-3"> 2 <div class="d-flex flex-column mb-3">
3 <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center"> 3 <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center">
4 <font-awesome-icon icon="road" class="mr-2"></font-awesome-icon> 4 <font-awesome-icon icon="road" class="mr-2"></font-awesome-icon>
5 <translate>Define stretches</translate> 5 <translate>Define stretches</translate>
6 </h6> 6 </h6>
7 <div class="ml-3 mr-3"> 7 <div v-if="!edit" class="mb-3">
8 <div class="d-flex flex-row justify-content-between"> 8 <div
9 <div class="mt-2 w-50 mr-2 text-left"> 9 class="mt-3 mr-3 ml-3 d-flex flex-row justify-content-between border-bottom"
10 <small class="text-muted"> <translate>ID</translate> </small> 10 >
11 <input 11 <div>id</div>
12 id="id" 12 <div>funktion</div>
13 type="text" 13 <div>startrhm</div>
14 class="form-control" 14 <div>endrhm</div>
15 placeholder="AT_Section_12" 15 </div>
16 aria-label="id" 16 <div
17 v-model="id" 17 class=" mr-3 ml-3 d-flex flex-row justify-content-between"
18 /> 18 v-for="stretch in stretches"
19 <span class="text-left text-danger"> 19 :key="stretch.id"
20 <small v-if="idError && !id"> 20 >
21 <translate>Please enter an id</translate> 21 <div>{{ stretch.id }}</div>
22 </small> 22 <div>{{ stretch.funktion }}</div>
23 </span> 23 <div>{{ stretch.startrhm }}</div>
24 </div> 24 <div>{{ stretch.endrhm }}</div>
25 <div class="mt-2 w-50 ml-2 text-left"> 25 </div>
26 <div> 26 <div class="mt-3" v-if="stretches.length == 0">
27 <small class="text-muted"> 27 <translate>No results.</translate>
28 <translate>Countrycode</translate> 28 </div>
29 </small> 29 </div>
30 <input 30 <div v-if="edit">
31 id="countryCode" 31 <div class="ml-3 mr-3">
32 <div class="d-flex flex-row justify-content-between">
33 <div class="mt-2 w-50 mr-2 text-left">
34 <small class="text-muted"> <translate>ID</translate> </small>
35 <input
36 id="id"
32 type="text" 37 type="text"
33 class="form-control" 38 class="form-control"
34 placeholder="AT" 39 placeholder="AT_Section_12"
35 aria-label="id" 40 aria-label="id"
36 v-model="id" 41 v-model="id"
37 /> 42 />
38 <span class="text-left text-danger"> 43 <span class="text-left text-danger">
39 <small v-if="countryCodeError && !countryCode"> 44 <small v-if="idError && !id">
40 <translate>Please enter a countrycode </translate> 45 <translate>Please enter an id</translate>
41 </small> 46 </small>
42 </span> 47 </span>
43 </div> 48 </div>
44 <div class="w-50 ml-2"></div> 49 <div class="mt-2 w-50 ml-2 text-left">
50 <div>
51 <small class="text-muted">
52 <translate>Countrycode</translate>
53 </small>
54 <input
55 id="countryCode"
56 type="text"
57 class="form-control"
58 placeholder="AT"
59 aria-label="id"
60 v-model="countryCode"
61 />
62 <span class="text-left text-danger">
63 <small v-if="countryCodeError && !countryCode">
64 <translate>Please enter a countrycode </translate>
65 </small>
66 </span>
67 </div>
68 <div class="w-50 ml-2"></div>
69 </div>
45 </div> 70 </div>
46 </div> 71 <div class="d-flex flex-column justify-content-between">
47 <div class="d-flex flex-column justify-content-between"> 72 <div class="mt-2 text-left">
48 <div class="mt-2 text-left"> 73 <small class="text-muted"> <translate>Start rhm</translate> </small>
49 <small class="text-muted"> <translate>Start rhm</translate> </small> 74 <div class="d-flex flex-row">
50 <div class="d-flex flex-row"> 75 <input
51 <input 76 id="startrhm"
52 id="startrhm" 77 type="text"
78 class="form-control"
79 placeholder="e.g. ATXXX00001000000019900"
80 aria-label="startrhm"
81 v-model="startrhm"
82 />
83 <span class="input-group-text">
84 <font-awesome-icon
85 @click="togglePipette('start')"
86 :class="{ 'text-info': pipetteStart }"
87 icon="bullseye"
88 ></font-awesome-icon>
89 </span>
90 </div>
91 <span class="text-left text-danger">
92 <small v-if="startrhmError && !startrhm">
93 <translate>Please enter a start point</translate>
94 </small>
95 </span>
96 </div>
97 <div class="mt-2 text-left">
98 <small class="text-muted"> <translate>End rhm</translate> </small>
99 <div class="d-flex flex-row">
100 <input
101 id="endrhm"
102 type="text"
103 class="form-control"
104 placeholder="e.g. ATXXX00001000000019900"
105 aria-label="endrhm"
106 v-model="endrhm"
107 />
108 <span class="input-group-text">
109 <font-awesome-icon
110 @click="togglePipette('end')"
111 :class="{ 'text-info': pipetteEnd }"
112 icon="bullseye"
113 ></font-awesome-icon>
114 </span>
115 </div>
116 <span class="text-left text-danger">
117 <small v-if="endrhmError && !endrhm">
118 <translate>Please enter an end point</translate>
119 </small>
120 </span>
121 </div>
122 </div>
123 <div class="d-flex flex-row justify-content-between">
124 <div class="mt-2 mr-2 w-50 text-left">
125 <small class="text-muted">
126 <translate>Object name</translate>
127 </small>
128 <input
129 id="objbn"
53 type="text" 130 type="text"
54 class="form-control" 131 class="form-control"
55 placeholder="e.g. ATXXX00001000000019900" 132 placeholder=""
56 aria-label="startrhm" 133 aria-label="objbn"
57 v-model="startrhm" 134 v-model="objbn"
58 /> 135 />
59 <span class="input-group-text"> 136 <span class="text-left text-danger">
60 <font-awesome-icon 137 <small v-if="objbnError && !objbn">
61 @click="togglePipette('start')" 138 <translate>Please enter an objectname</translate>
62 :class="{ 'text-info': pipetteStart }" 139 </small>
63 icon="bullseye" 140 </span>
64 ></font-awesome-icon> 141 </div>
65 </span> 142 <div class="mt-2 ml-2 w-50 text-left">
66 </div> 143 <small class="text-muted">
67 <span class="text-left text-danger"> 144 <translate>National Object name</translate>
68 <small v-if="startrhmError && !startrhm">
69 <translate>Please enter a start point</translate>
70 </small> 145 </small>
71 </span> 146 <input
147 id="nobjbn"
148 type="text"
149 class="form-control"
150 placeholder=""
151 aria-label="nobjbn"
152 v-model="nobjbn"
153 />
154 <span class="text-left text-danger">
155 <small v-if="nobjbnError && !nobjbn">
156 <translate>Please enter an objectname</translate>
157 </small>
158 </span>
159 </div>
72 </div> 160 </div>
73 <div class="mt-2 text-left"> 161 <div class="d-flex flex-row justify-content-between">
74 <small class="text-muted"> <translate>End rhm</translate> </small> 162 <div class="mt-2 mr-2 w-50 text-left">
75 <div class="d-flex flex-row"> 163 <small class="text-muted"> <translate>Date info</translate> </small>
76 <input 164 <input
77 id="endrhm" 165 id="date_info"
166 type="date"
167 class="form-control"
168 placeholder="date_info"
169 aria-label="date_info"
170 v-model="date_info"
171 />
172 <span class="text-left text-danger">
173 <small v-if="date_infoError && !date_info">
174 <translate>Please enter a date</translate>
175 </small>
176 </span>
177 </div>
178 <div class="mt-2 ml-2 w-50 text-left">
179 <small class="text-muted"> <translate>Source</translate> </small>
180 <input
181 id="source"
78 type="text" 182 type="text"
79 class="form-control" 183 class="form-control"
80 placeholder="e.g. ATXXX00001000000019900" 184 placeholder="source"
81 aria-label="endrhm" 185 aria-label="source"
82 v-model="endrhm" 186 v-model="source"
83 /> 187 />
84 <span class="input-group-text"> 188 <span class="text-left text-danger">
85 <font-awesome-icon 189 <small v-if="sourceError && !source">
86 @click="togglePipette('end')" 190 <translate>Please enter a source</translate>
87 :class="{ 'text-info': pipetteEnd }" 191 </small>
88 icon="bullseye" 192 </span>
89 ></font-awesome-icon> 193 </div>
90 </span>
91 </div>
92 <span class="text-left text-danger">
93 <small v-if="endrhmError && !endrhm">
94 <translate>Please enter an end point</translate>
95 </small>
96 </span>
97 </div> 194 </div>
98 </div> 195 </div>
99 <div class="d-flex flex-row justify-content-between"> 196 <div class="text-right mt-2 mr-3 mb-3">
100 <div class="mt-2 mr-2 w-50 text-left"> 197 <button @click="edit = false" class="btn btn-warning mr-2">Back</button>
101 <small class="text-muted"> <translate>Object name</translate> </small> 198 <button
102 <input 199 @click="save"
103 id="objbn" 200 type="submit"
104 type="text" 201 class="shadow-sm btn btn-info submit-button"
105 class="form-control" 202 >
106 placeholder="" 203 <translate>Submit</translate>
107 aria-label="objbn" 204 </button>
108 v-model="objbn"
109 />
110 <span class="text-left text-danger">
111 <small v-if="objbnError && !objbn">
112 <translate>Please enter an objectname</translate>
113 </small>
114 </span>
115 </div>
116 <div class="mt-2 ml-2 w-50 text-left">
117 <small class="text-muted">
118 <translate>National Object name</translate>
119 </small>
120 <input
121 id="nobjbn"
122 type="text"
123 class="form-control"
124 placeholder=""
125 aria-label="nobjbn"
126 v-model="nobjbn"
127 />
128 <span class="text-left text-danger">
129 <small v-if="nobjbnError && !nobjbn">
130 <translate>Please enter an objectname</translate>
131 </small>
132 </span>
133 </div>
134 </div>
135 <div class="d-flex flex-row justify-content-between">
136 <div class="mt-2 mr-2 w-50 text-left">
137 <small class="text-muted"> <translate>Date info</translate> </small>
138 <input
139 id="date_info"
140 type="date"
141 class="form-control"
142 placeholder="date_info"
143 aria-label="date_info"
144 v-model="date_info"
145 />
146 <span class="text-left text-danger">
147 <small v-if="date_infoError && !date_info">
148 <translate>Please enter a date</translate>
149 </small>
150 </span>
151 </div>
152 <div class="mt-2 ml-2 w-50 text-left">
153 <small class="text-muted"> <translate>Source</translate> </small>
154 <input
155 id="source"
156 type="text"
157 class="form-control"
158 placeholder="source"
159 aria-label="source"
160 v-model="source"
161 />
162 <span class="text-left text-danger">
163 <small v-if="sourceError && !source">
164 <translate>Please enter a source</translate>
165 </small>
166 </span>
167 </div>
168 </div> 205 </div>
169 </div> 206 </div>
170 <div class="text-right mt-2 mr-3 mb-3"> 207 <div class="text-right mr-3">
171 <button 208 <button v-if="!edit" @click="startEdit()" class="btn btn-info">
172 @click="submit" 209 <translate>New stretch</translate>
173 type="submit"
174 class="shadow-sm btn btn-info submit-button"
175 >
176 <translate>Submit</translate>
177 </button> 210 </button>
178 </div> 211 </div>
179 </div> 212 </div>
180 </template> 213 </template>
181 214
198 231
199 export default { 232 export default {
200 name: "importstretches", 233 name: "importstretches",
201 data() { 234 data() {
202 return { 235 return {
236 stretches: [],
237 edit: false,
203 id: "", 238 id: "",
204 funktion: "", 239 funktion: "",
205 startrhm: "", 240 startrhm: "",
206 endrhm: "", 241 endrhm: "",
207 objbn: "", 242 objbn: "",
220 date_infoError: false, 255 date_infoError: false,
221 sourceError: false, 256 sourceError: false,
222 countryCodeError: false 257 countryCodeError: false
223 }; 258 };
224 }, 259 },
260 mounted() {
261 this.edit = false;
262 },
225 methods: { 263 methods: {
264 clean() {
265 this.id = "";
266 this.funktion = "";
267 this.startrhm = "";
268 this.endrhm = "";
269 this.objbn = "";
270 this.nobjbn = "";
271 this.countryCode = "";
272 this.date_info = new Date().toISOString().split("T")[0];
273 this.source = "";
274 this.pipetteStart = false;
275 this.pipetteEnd = false;
276 this.idError = false;
277 this.funktionError = false;
278 this.startrhmError = false;
279 this.endrhmError = false;
280 this.objbnError = false;
281 this.nobjbnError = false;
282 this.date_infoError = false;
283 this.sourceError = false;
284 this.countryCodeError = false;
285 },
286 startEdit() {
287 this.clean();
288 this.edit = true;
289 },
226 togglePipette(t) { 290 togglePipette(t) {
227 if (t === "start") { 291 if (t === "start") {
228 this.pipetteStart = !this.pipetteStart; 292 this.pipetteStart = !this.pipetteStart;
229 this.pipetteEnd = false; 293 this.pipetteEnd = false;
230 } else { 294 } else {
249 } else { 313 } else {
250 this[field + "Error"] = false; 314 this[field + "Error"] = false;
251 } 315 }
252 }); 316 });
253 }, 317 },
254 submit() { 318 save() {
255 this.validate(); 319 this.validate();
320 this.stretches.push({
321 id: this.id,
322 funktion: this.funktion,
323 startrhm: this.startrhm,
324 endrhm: this.endrhm,
325 objbn: this.objbn,
326 nobjbn: this.nobjbn,
327 countryCode: this.countryCode,
328 date_info: this.date_info,
329 source: this.source
330 });
331 this.edit = false;
256 displayInfo({ 332 displayInfo({
257 title: this.$gettext("Sections"), 333 title: this.$gettext("Sections"),
258 message: this.$gettext("Not implemented!") 334 message: this.$gettext("Not implemented!")
259 }); 335 });
260 } 336 }