Mercurial > gemma
changeset 1575:51f924cbac23
Feat: Importscheduler renamed to "unattended imports"
We have now a prototypical user interface where the user
is able to select whether or not he wishes an scheduling.
If he chooses to, he is able to select simple/advanced scheduling
and gets a wizward to help with setting up the cron string.
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Thu, 13 Dec 2018 13:30:02 +0100 |
parents | df975eb2e80e |
children | b5d7770fe632 |
files | client/src/components/Sidebar.vue client/src/components/importschedule/Importschedule.vue client/src/components/importschedule/Importscheduledetail.vue |
diffstat | 3 files changed, 128 insertions(+), 61 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/Sidebar.vue Thu Dec 13 12:48:25 2018 +0100 +++ b/client/src/components/Sidebar.vue Thu Dec 13 13:30:02 2018 +0100 @@ -98,7 +98,7 @@ fixed-width icon="clock" ></font-awesome-icon> - <translate class="fix-trans-space">Importschedule</translate> + <translate class="fix-trans-space">Unattended Imports</translate> </router-link> </div> <hr class="m-0" />
--- a/client/src/components/importschedule/Importschedule.vue Thu Dec 13 12:48:25 2018 +0100 +++ b/client/src/components/importschedule/Importschedule.vue Thu Dec 13 13:30:02 2018 +0100 @@ -7,7 +7,7 @@ class="mb-0 py-2 px-3 border-bottom d-flex text-info align-items-center" > <font-awesome-icon icon="clock" class="mr-2"></font-awesome-icon> - <translate class="headline">Importschedule</translate> + <translate class="headline">Unattended Imports</translate> </h6> <div class="card-body schedulecardbody"> <div class="card-body schedulecardbody">
--- a/client/src/components/importschedule/Importscheduledetail.vue Thu Dec 13 12:48:25 2018 +0100 +++ b/client/src/components/importschedule/Importscheduledetail.vue Thu Dec 13 13:30:02 2018 +0100 @@ -29,7 +29,7 @@ </div> </div> <div class="d-flex flex-row mt-3 w-100 justify-content-between"> - <div class="flex-column w-100 mr-2"> + <div class="flex-column w-100"> <div class="flex-row text-left"> <small class="text-muted"> <translate>Importtype</translate> @@ -43,18 +43,6 @@ > </select> </div> - <div class="flex-column w-100 ml-2"> - <div class="flex-row text-left"> - <small class="text-muted"> - <translate>Schedule</translate> - </small> - </div> - <select v-model="schedule" class="custom-select" id="period"> - <option v-for="option in this.$options.periods" :key="option">{{ - option - }}</option> - </select> - </div> </div> <div class="flex-column mt-3 w-100 mr-2"> <div class="flex-row text-left"> @@ -83,128 +71,164 @@ </small> </div> <div v-if="easyCron" class="text-left w-50"> - <select class="form-control" - ><option> Weekly </option> - <option>Monthly</option> + <select v-model="simple" class="form-control" + ><option value=""><translate>No Schedule</translate></option> + <option value="weekly"><translate>Weekly</translate></option> + <option value="monthly"><translate>Monthly</translate></option> </select> </div> <div v-if="!easyCron" class="text-left w-100"> <div class="d-flex flex-row"> - <h4 class="mt-auto mb-auto mr-2">Every</h4> + <h4 class="mt-auto mb-auto mr-2"> + <translate>Every</translate> + </h4> <select style="width: 130px;" v-model="cronMode" class="form-control" + @change="clearInputs" > - <option value="15minutes">15 minutes</option> - <option value="minute">minute</option> - <option value="hour">hour</option> - <option value="day">day</option> - <option value="week">week</option> - <option value="month">month</option> - <option value="year">year</option> + <option value="15minutes" + ><translate>15 minutes</translate></option + > + <option value="hour"><translate>hour</translate></option> + <option value="day"><translate>day</translate></option> + <option value="week"><translate>week</translate></option> + <option value="month"><translate>month</translate></option> + <option value="year"><translate>year</translate></option> </select> <div v-if="cronMode == 'hour'" class="ml-2 d-flex flex-row"> - <h4 class="mt-auto mb-auto">at</h4> + <h4 class="mt-auto mb-auto"><translate>at</translate></h4> <input + v-model="minutes" style="width:50px" class="ml-2 mr-2 form-control" type="text" /> - <h4 class="mt-auto mb-auto">minutes past</h4> + <h4 class="mt-auto mb-auto"> + <translate>minutes past</translate> + </h4> </div> <div v-if="cronMode == 'day'" class="ml-2 d-flex flex-row"> - <h4 class="mt-auto mb-auto">at</h4> + <h4 class="mt-auto mb-auto"><translate>at</translate></h4> <input + v-model="hour" style="width:50px" class="ml-2 mr-2 form-control" type="text" /> <input + v-model="minutes" style="width:50px" class="ml-2 mr-2 form-control" type="text" /> - <h4 class="mt-auto mb-auto">o' clock</h4> + <h4 class="mt-auto mb-auto"> + <translate>o' clock</translate> + </h4> </div> <div v-if="cronMode == 'week'" class="ml-2 d-flex flex-row"> - <h4 class="ml-2 mr-3 mt-auto mb-auto">on</h4> - <select class="form-control"> - <option>Monday</option> - <option>Tuesday</option> - <option>Wednesday</option> - <option>Thursday</option> - <option>Friday</option> - <option>Saturday</option> - <option>Sunday</option> + <h4 class="ml-2 mr-3 mt-auto mb-auto"> + <translate>on</translate> + </h4> + <select v-model="day" class="form-control"> + <option value="1"><translate>Monday</translate></option> + <option value="2"><translate>Tuesday</translate></option> + <option value="3"><translate>Wednesday</translate></option> + <option value="4"><translate>Thursday</translate></option> + <option value="5"><translate>Friday</translate></option> + <option value="6"><translate>Saturday</translate></option> + <option value="0"><translate>Sunday</translate></option> </select> - <h4 class="ml-2 mt-auto mb-auto">at</h4> + <h4 class="ml-2 mt-auto mb-auto"> + <translate>at</translate> + </h4> <input + v-model="hour" style="width:50px" class="ml-2 mr-2 form-control" type="text" /> <input + v-model="minutes" style="width:50px" class="ml-2 mr-2 form-control" type="text" /> </div> <div v-if="cronMode == 'month'" class="ml-2 d-flex flex-row"> - <h4 class="ml-2 mt-auto mb-auto">on</h4> + <h4 class="ml-2 mt-auto mb-auto"> + <translate>on</translate> + </h4> <input + v-model="dayOfMonth" style="width:50px" class="ml-2 mr-2 form-control" type="text" /> - <h4 class="mt-auto mb-auto">at</h4> + <h4 class="mt-auto mb-auto"><translate>at</translate></h4> <input + v-model="hour" style="width:50px" class="ml-2 mr-2 form-control" type="text" /> <input + v-model="minutes" style="width:50px" class="ml-2 mr-2 form-control" type="text" /> - <h4 class="mt-auto mb-auto">o' clock</h4> + <h4 class="mt-auto mb-auto"> + <translate>o' clock</translate> + </h4> </div> <div v-if="cronMode == 'year'" class="ml-2 d-flex flex-row"> - <h4 class="ml-2 mt-auto mb-auto">on</h4> + <h4 class="ml-2 mt-auto mb-auto"> + <translate>on</translate> + </h4> <input + v-model="dayOfMonth" style="width:50px" class="ml-2 mr-2 form-control" type="text" /> - <h4 class="mt-auto mb-auto">of</h4> - <select class="ml-2 mr-2 form-control"> - <option>January</option> - <option>February</option> - <option>March</option> - <option>April</option> - <option>May</option> - <option>June</option> - <option>July</option> - <option>August</option> - <option>September</option> - <option>October</option> - <option>November</option> - <option>December</option> + <h4 class="mt-auto mb-auto"><translate>of</translate></h4> + <select v-model="month" class="ml-2 mr-2 form-control"> + <option value="1"><translate>January</translate></option> + <option value="2"><translate>February</translate></option> + <option value="3"><translate>March</translate></option> + <option value="4"><translate>April</translate></option> + <option value="5"><translate>May</translate></option> + <option value="6"><translate>June</translate></option> + <option value="7"><translate>July</translate></option> + <option value="8"><translate>August</translate></option> + <option value="9"><translate>September</translate></option> + <option value="10"><translate>October</translate></option> + <option value="11"><translate>November</translate></option> + <option value="12"><translate>December</translate></option> </select> - <h4 class="mt-auto mb-auto">at</h4> + <h4 class="mt-auto mb-auto"><translate>at</translate></h4> <input + v-model="hour" style="width:50px" class="ml-2 mr-2 form-control" type="text" /> <input + v-model="minutes" style="width:50px" class="ml-2 mr-2 form-control" type="text" /> </div> </div> + <div class="mt-3 w-50 d-flex flex-row"> + <h5 class="mt-auto mb-auto mr-2"> + <translate>Cronstring</translate> + </h5> + <input class="form-control" :value="cronString" type="text" /> + </div> </div> </div> <div class="flex-column mt-3 w-100 mr-2"> @@ -259,13 +283,56 @@ import_: null, eMailNotification: false, easyCron: true, - cronMode: "" + cronMode: "", + minutes: null, + month: null, + hour: null, + day: null, + dayOfMonth: null, + simple: null }; }, + watch: { + cronString() { + if (this.isWeekly(this.cronString)) { + this.simple = "weekly"; + } + if (this.isMonthly(this.cronString)) { + this.simple = "monthly"; + } + } + }, computed: { - ...mapState("imports", ["importScheduleDetailVisible"]) + ...mapState("imports", ["importScheduleDetailVisible"]), + cronString: { + get() { + let getValue = value => { + return this[value] ? this[value] : "*"; + }; + if (this.cronMode === "15minutes") return "*/15 * * * *"; + const min = getValue("minutes"); + const h = getValue("hour"); + const dm = getValue("dayOfMonth"); + const m = getValue("month"); + const wd = getValue("day"); + return `${min} ${h} ${dm} ${m} ${wd}`; + } + } }, methods: { + isWeekly(cron) { + return /\d{1,2} \d{1,2} \* \* \d{1}/.test(cron); + }, + isMonthly(cron) { + return /\d{1,2} \d{1,2} \d{1,2} \* \*/.test(cron); + }, + clearInputs() { + this.minutes = null; + this.month = null; + this.hour = null; + this.day = null; + this.dayOfMonth = null; + }, save() { displayInfo({ title: "Import",