Mercurial > gemma

changeset 1575:51f924cbac23

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