Mercurial > gemma
comparison client/src/components/importconfiguration/ScheduledImports.vue @ 3281:439e1865a2d2
client: define stretches/imports: code cleanup / style improvements
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Thu, 16 May 2019 09:52:32 +0200 |
parents | 23f4fb9a205a |
children | 489e583498e3 |
comparison
equal
deleted
inserted
replaced
3280:8fb81b45085f | 3281:439e1865a2d2 |
---|---|
1 <template> | 1 <template> |
2 <form @submit.prevent="save" class="w-100"> | 2 <form @submit.prevent="save" class="w-100"> |
3 <div class="d-flex flex-row"> | 3 <div class="d-flex px-2"> |
4 <div :key="1" class="flex-column mr-4"> | 4 <div :key="1" class="flex-column"> |
5 <div class="flex-row text-left"> | 5 <small class="text-muted"> |
6 <small class="text-muted"> | 6 <translate>Email Notification</translate> |
7 <translate>Email Notification</translate> | 7 </small> |
8 </small> | |
9 </div> | |
10 <div class="flex-flex-row text-left"> | 8 <div class="flex-flex-row text-left"> |
11 <toggle-button | 9 <toggle-button |
12 v-model="eMailNotification" | 10 v-model="eMailNotification" |
13 class="mt-2" | 11 class="mt-2" |
14 :speed="100" | 12 :speed="100" |
19 :width="60" | 17 :width="60" |
20 :height="30" | 18 :height="30" |
21 /> | 19 /> |
22 </div> | 20 </div> |
23 </div> | 21 </div> |
24 <div :key="2" v-if="directImportAvailable" class="flex-column text-left"> | 22 <div |
25 <div> | 23 :key="2" |
26 <small class="text-muted"> | 24 v-if="directImportAvailable" |
27 <translate>Import via</translate> | 25 class="flex-column text-left ml-3" |
28 </small> | 26 > |
29 </div> | 27 <small class="text-muted"> |
28 <translate>Import via</translate> | |
29 </small> | |
30 <div> | 30 <div> |
31 <!-- '#75c791' is the DEFAULT_COLOR_CHECKED | 31 <!-- '#75c791' is the DEFAULT_COLOR_CHECKED |
32 from vue-js-toggle-button as here both states are active --> | 32 from vue-js-toggle-button as here both states are active --> |
33 <toggle-button | 33 <toggle-button |
34 :color="{ unchecked: '#75c791' }" | 34 :color="{ unchecked: '#75c791' }" |
128 :url="url" | 128 :url="url" |
129 :featureType="featureType" | 129 :featureType="featureType" |
130 :sortBy="sortBy" | 130 :sortBy="sortBy" |
131 /> | 131 /> |
132 | 132 |
133 <div class="d-flex flex-row mt-3"> | 133 <div class="d-flex p-2"> |
134 <template v-if="!directImport || !directImportAvailable"> | 134 <template v-if="!directImport || !directImportAvailable"> |
135 <div class="flex-column mr-4"> | 135 <div class="flex-column mr-4"> |
136 <div class="flex-row text-left"> | 136 <div class="flex-row text-left"> |
137 <small class="text-muted"> | 137 <small class="text-muted"> |
138 <translate>Scheduled</translate>? | 138 <translate>Scheduled</translate>? |
181 </div> | 181 </div> |
182 <div> | 182 <div> |
183 <input | 183 <input |
184 style="width:120px;" | 184 style="width:120px;" |
185 v-model="trys" | 185 v-model="trys" |
186 class="mr-1 form-control" | 186 class="mr-1 form-control form-control-sm" |
187 type="number" | 187 type="number" |
188 /> | 188 /> |
189 </div> | 189 </div> |
190 </div> | 190 </div> |
191 <div class="flex-column"> | 191 <div class="flex-column"> |
196 </div> | 196 </div> |
197 <div> | 197 <div> |
198 <input | 198 <input |
199 style="width:120px;" | 199 style="width:120px;" |
200 v-model="waitRetry" | 200 v-model="waitRetry" |
201 class="ml-1 form-control" | 201 class="ml-1 form-control form-control-sm" |
202 /> | 202 /> |
203 </div> | 203 </div> |
204 </div> | 204 </div> |
205 </template> | 205 </template> |
206 </div> | 206 </div> |
207 <template v-if="!directImport || !directImportAvailable"> | 207 <template v-if="!directImport || !directImportAvailable"> |
208 <div class="flex-column w-100 mr-2"> | 208 <div class="flex-column w-100 px-2 pb-3"> |
209 <div class="flex-row text-left"> | 209 <div class="flex-row text-left"> |
210 <small class="text-muted"> | 210 <small class="text-muted"> |
211 <translate>Schedule</translate> | 211 <translate>Schedule</translate> |
212 </small> | 212 </small> |
213 </div> | 213 </div> |
214 <div v-if="easyCron" class="text-left w-50"> | 214 <div v-if="easyCron" class="text-left w-50"> |
215 <select :disabled="!scheduled" v-model="simple" class="form-control" | 215 <select |
216 :disabled="!scheduled" | |
217 v-model="simple" | |
218 class="form-control form-control-sm" | |
216 ><option value="weekly"><translate>Weekly</translate></option> | 219 ><option value="weekly"><translate>Weekly</translate></option> |
217 <option value="monthly"><translate>Monthly</translate> </option> | 220 <option value="monthly"><translate>Monthly</translate> </option> |
218 </select> | 221 </select> |
219 </div> | 222 </div> |
220 <div v-if="!easyCron" class="text-left w-100"> | 223 <div v-if="!easyCron" class="text-left w-100"> |
221 <div class="d-flex flex-row"> | 224 <div class="d-flex flex-row"> |
222 <h4 class="mt-auto mb-auto mr-2">{{ $options.EVERY }}</h4> | 225 <div class="my-auto mr-2">{{ $options.EVERY }}</div> |
223 <select | 226 <select |
224 :disabled="!scheduled" | 227 :disabled="!scheduled" |
225 style="width: 130px;" | 228 style="width: 130px;" |
226 v-model="cronMode" | 229 v-model="cronMode" |
227 class="form-control" | 230 class="form-control form-control-sm" |
228 @change="clearInputs" | 231 @change="clearInputs" |
229 > | 232 > |
230 <option :value="null"></option> | 233 <option :value="null"></option> |
231 <option | 234 <option |
232 v-for="(option, key) in $options.CRONMODE" | 235 v-for="(option, key) in $options.CRONMODE" |
234 :key="key" | 237 :key="key" |
235 >{{ option }}</option | 238 >{{ option }}</option |
236 > | 239 > |
237 </select> | 240 </select> |
238 <div v-if="cronMode == 'hour'" class="ml-1 d-flex flex-row"> | 241 <div v-if="cronMode == 'hour'" class="ml-1 d-flex flex-row"> |
239 <h4 class="mt-auto mb-auto">{{ $options.ON }}</h4> | 242 <div class="mt-auto mb-auto">{{ $options.ON }}</div> |
240 <input | 243 <input |
241 :disabled="!scheduled" | 244 :disabled="!scheduled" |
242 v-model="minutes" | 245 v-model="minutes" |
243 class="cronfield ml-1 mr-1 form-control" | 246 class="cronfield ml-1 mr-1 form-control form-control-sm" |
244 type="number" | 247 type="number" |
245 /> | 248 /> |
246 <h4 class="mt-auto mb-auto">{{ $options.MINUTESPAST }}</h4> | 249 <div class="mt-auto mb-auto">{{ $options.MINUTESPAST }}</div> |
247 </div> | 250 </div> |
248 <div v-if="cronMode == 'day'" class="ml-1 d-flex flex-row"> | 251 <div v-if="cronMode == 'day'" class="ml-1 d-flex flex-row"> |
249 <h4 class="mt-auto mb-auto">{{ $options.AT }}</h4> | 252 <div class="mt-auto mb-auto">{{ $options.AT }}</div> |
250 <input | 253 <input |
251 :disabled="!scheduled" | 254 :disabled="!scheduled" |
252 v-model="hour" | 255 v-model="hour" |
253 class="cronfield ml-1 mr-1 form-control" | 256 class="cronfield ml-1 mr-1 form-control form-control-sm" |
254 type="number" | 257 type="number" |
255 /> | 258 /> |
256 <input | 259 <input |
257 :disabled="!scheduled" | 260 :disabled="!scheduled" |
258 v-model="minutes" | 261 v-model="minutes" |
259 class="cronfield ml-1 mr-1 form-control" | 262 class="cronfield ml-1 mr-1 form-control form-control-sm" |
260 type="number" | 263 type="number" |
261 /> | 264 /> |
262 <h4 class="mt-auto mb-auto">{{ $options.OCLOCK }}</h4> | 265 <div class="mt-auto mb-auto">{{ $options.OCLOCK }}</div> |
263 </div> | 266 </div> |
264 <div v-if="cronMode == 'week'" class="ml-1 d-flex flex-row"> | 267 <div v-if="cronMode == 'week'" class="ml-1 d-flex flex-row"> |
265 <h4 class="ml-1 mr-1 mt-auto mb-auto">{{ $options.ON }}</h4> | 268 <div class="ml-1 mr-1 mt-auto mb-auto">{{ $options.ON }}</div> |
266 <select :disabled="!scheduled" v-model="day" class="form-control"> | 269 <select |
270 :disabled="!scheduled" | |
271 v-model="day" | |
272 class="form-control form-control-sm" | |
273 > | |
267 <option | 274 <option |
268 v-for="(option, key) in $options.DAYSOFWEEK" | 275 v-for="(option, key) in $options.DAYSOFWEEK" |
269 :key="key" | 276 :key="key" |
270 :value="key" | 277 :value="key" |
271 >{{ option }}</option | 278 >{{ option }}</option |
272 > | 279 > |
273 </select> | 280 </select> |
274 <h4 class="ml-1 mt-auto mb-auto">{{ $options.AT }}</h4> | 281 <div class="ml-1 mt-auto mb-auto">{{ $options.AT }}</div> |
275 <input | 282 <input |
276 :disabled="!scheduled" | 283 :disabled="!scheduled" |
277 v-model="hour" | 284 v-model="hour" |
278 class="cronfield ml-1 mr-1 form-control" | 285 class="cronfield ml-1 mr-1 form-control form-control-sm" |
279 type="number" | 286 type="number" |
280 /> | 287 /> |
281 <input | 288 <input |
282 :disabled="!scheduled" | 289 :disabled="!scheduled" |
283 v-model="minutes" | 290 v-model="minutes" |
284 class="cronfield ml-1 mr-1 form-control" | 291 class="cronfield ml-1 mr-1 form-control form-control-sm" |
285 type="number" | 292 type="number" |
286 /> | 293 /> |
287 </div> | 294 </div> |
288 <div v-if="cronMode == 'month'" class="ml-1 d-flex flex-row"> | 295 <div v-if="cronMode == 'month'" class="ml-1 d-flex flex-row"> |
289 <h4 class="ml-1 mt-auto mb-auto">{{ $options.ON }}</h4> | 296 <div class="ml-1 mt-auto mb-auto">{{ $options.ON }}</div> |
290 <input | 297 <input |
291 :disabled="!scheduled" | 298 :disabled="!scheduled" |
292 v-model="dayOfMonth" | 299 v-model="dayOfMonth" |
293 class="cronfield ml-1 mr-1 form-control" | 300 class="cronfield ml-1 mr-1 form-control form-control-sm" |
294 type="number" | 301 type="number" |
295 /> | 302 /> |
296 <h4 class="mt-auto mb-auto">{{ $options.AT }}</h4> | 303 <div class="mt-auto mb-auto">{{ $options.AT }}</div> |
297 <input | 304 <input |
298 :disabled="!scheduled" | 305 :disabled="!scheduled" |
299 v-model="hour" | 306 v-model="hour" |
300 class="cronfield ml-1 mr-2 form-control" | 307 class="cronfield ml-1 mr-2 form-control form-control-sm" |
301 type="number" | 308 type="number" |
302 /> | 309 /> |
303 <input | 310 <input |
304 :disabled="!scheduled" | 311 :disabled="!scheduled" |
305 v-model="minutes" | 312 v-model="minutes" |
306 class="cronfield ml-1 mr-2 form-control" | 313 class="cronfield ml-1 mr-2 form-control form-control-sm" |
307 type="number" | 314 type="number" |
308 /> | 315 /> |
309 <h4 class="mt-auto mb-auto">{{ $options.OCLOCK }}</h4> | 316 <div class="mt-auto mb-auto">{{ $options.OCLOCK }}</div> |
310 </div> | 317 </div> |
311 <div v-if="cronMode == 'year'" class="ml-1 d-flex flex-row"> | 318 <div v-if="cronMode == 'year'" class="ml-1 d-flex flex-row"> |
312 <h4 class="ml-1 mt-auto mb-auto">{{ $options.ON }}</h4> | 319 <div class="ml-1 mt-auto mb-auto">{{ $options.ON }}</div> |
313 <input | 320 <input |
314 :disabled="!scheduled" | 321 :disabled="!scheduled" |
315 v-model="dayOfMonth" | 322 v-model="dayOfMonth" |
316 class="cronfield ml-1 mr-1 form-control" | 323 class="cronfield ml-1 mr-1 form-control form-control-sm" |
317 type="number" | 324 type="number" |
318 /> | 325 /> |
319 <h4 class="mt-auto mb-auto">{{ $options.OF }}</h4> | 326 <div class="mt-auto mb-auto">{{ $options.OF }}</div> |
320 <select | 327 <select |
321 :disabled="!scheduled" | 328 :disabled="!scheduled" |
322 v-model="month" | 329 v-model="month" |
323 class="ml-1 mr-1 form-control" | 330 class="ml-1 mr-1 form-control form-control-sm" |
324 > | 331 > |
325 <option | 332 <option |
326 v-for="(option, key) in $options.MONTHS" | 333 v-for="(option, key) in $options.MONTHS" |
327 :value="key" | 334 :value="key" |
328 :key="key" | 335 :key="key" |
329 >{{ option }}</option | 336 >{{ option }}</option |
330 > | 337 > |
331 </select> | 338 </select> |
332 <h4 class="mt-auto mb-auto">{{ $options.ON }}</h4> | 339 <div class="mt-auto mb-auto">{{ $options.ON }}</div> |
333 <input | 340 <input |
334 :disabled="!scheduled" | 341 :disabled="!scheduled" |
335 v-model="hour" | 342 v-model="hour" |
336 class="cronfield ml-1 mr-1 form-control" | 343 class="cronfield ml-1 mr-1 form-control form-control-sm" |
337 type="number" | 344 type="number" |
338 /> | 345 /> |
339 <input | 346 <input |
340 :disabled="!scheduled" | 347 :disabled="!scheduled" |
341 v-model="minutes" | 348 v-model="minutes" |
342 class="cronfield ml-1 mr-1 form-control" | 349 class="cronfield ml-1 mr-1 form-control form-control-sm" |
343 type="number" | 350 type="number" |
344 /> | 351 /> |
345 </div> | 352 </div> |
346 </div> | 353 </div> |
347 <div class="mt-3 w-50 d-flex flex-row"> | 354 <div class="mt-3 w-50 d-flex"> |
348 <h5 class="mt-auto mb-auto mr-2"> | 355 <div class="my-auto mr-2"> |
349 <translate>Cronstring</translate> | 356 <translate>Cronstring</translate> |
350 </h5> | 357 </div> |
351 <input | 358 <input |
352 :disabled="!scheduled" | 359 :disabled="!scheduled" |
353 class="form-control" | 360 class="form-control form-control-sm" |
354 v-model="cronString" | 361 v-model="cronString" |
355 type="text" | 362 type="text" |
356 /> | 363 /> |
357 </div> | 364 </div> |
358 </div> | 365 </div> |
359 </div> | 366 </div> |
360 </template> | 367 </template> |
361 <div v-else class="d-flex flex-row text-left"> | 368 <div v-else class="d-flex text-left px-2 pb-3"> |
362 <div class="mt-3 mb-3 flex-column w-100"> | 369 <div class="flex-column w-100"> |
363 <div class="custom-file"> | 370 <div class="custom-file"> |
364 <input | 371 <input |
365 accept=".xml" | 372 accept=".xml" |
366 type="file" | 373 type="file" |
367 @change="fileSelected" | 374 @change="fileSelected" |
368 class="custom-file-input" | 375 class="custom-file-input custom-file-input-sm" |
369 id="uploadFile" | 376 id="uploadFile" |
370 /> | 377 /> |
371 <label class="pointer custom-file-label" for="uploadFile"> | 378 <label class="pointer custom-file-label" for="uploadFile"> |
372 {{ uploadLabel }} | 379 {{ uploadLabel }} |
373 </label> | 380 </label> |
374 </div> | 381 </div> |
375 </div> | 382 </div> |
376 </div> | 383 </div> |
377 <div class="w-100 d-flex flex-row mt-3"> | 384 <div class="d-flex justify-content-between p-2 border-top"> |
378 <button | 385 <button :key="1" @click="back()" class="btn btn-sm btn-warning"> |
379 @click="triggerManualImport" | |
380 type="button" | |
381 class="shadow-sm btn btn-outline-info mr-auto" | |
382 :disabled="!triggerActive || !isValid" | |
383 > | |
384 <font-awesome-icon class="fa-fw mr-2" fixed-width icon="play" /> | |
385 <translate>Trigger import</translate> | |
386 </button> | |
387 <button | |
388 v-if="!directImport || !directImportAvailable" | |
389 :disabled="!isValid" | |
390 type="submit" | |
391 class="shadow-sm btn btn-info mr-3" | |
392 > | |
393 <translate>Save</translate> | |
394 </button> | |
395 <button :key="1" @click="back()" class="btn btn-warning"> | |
396 Back | 386 Back |
397 </button> | 387 </button> |
388 <div> | |
389 <button | |
390 @click="triggerManualImport" | |
391 type="button" | |
392 class="btn btn-sm btn-outline-info" | |
393 :disabled="!triggerActive || !isValid" | |
394 > | |
395 <font-awesome-icon fixed-width icon="play" /> | |
396 <translate>Trigger import</translate> | |
397 </button> | |
398 <button | |
399 v-if="!directImport || !directImportAvailable" | |
400 :disabled="!isValid" | |
401 type="submit" | |
402 class="btn btn-sm btn-info ml-3" | |
403 > | |
404 <translate>Save</translate> | |
405 </button> | |
406 </div> | |
398 </div> | 407 </div> |
399 </form> | 408 </form> |
400 </template> | 409 </template> |
401 | 410 |
402 <script> | 411 <script> |
485 "importScheduleDetailVisible", | 494 "importScheduleDetailVisible", |
486 "currentSchedule" | 495 "currentSchedule" |
487 ]), | 496 ]), |
488 import_() { | 497 import_() { |
489 return this.currentSchedule.importType; | 498 return this.currentSchedule.importType; |
490 }, | |
491 dialogLabel() { | |
492 if (this.id) return this.$gettext("Import") + " " + this.id; | |
493 return this.$gettext("New Import"); | |
494 }, | 499 }, |
495 directImportAvailable() { | 500 directImportAvailable() { |
496 switch (this.import_) { | 501 switch (this.import_) { |
497 case this.$options.IMPORTTYPES.BOTTLENECK: | 502 case this.$options.IMPORTTYPES.BOTTLENECK: |
498 case this.$options.IMPORTTYPES.FAIRWAYAVAILABILITY: | 503 case this.$options.IMPORTTYPES.FAIRWAYAVAILABILITY: |