Mercurial > gemma

comparison client/src/components/importconfiguration/ScheduledImports.vue @ 3281:439e1865a2d2

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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: