changeset 1570:424793472f28

nice advanced schedule selection
author Thomas Junk <thomas.junk@intevation.de>
date Wed, 12 Dec 2018 17:17:53 +0100
parents cf0ca4a9812a
children b3f2d43f43e4
files client/src/components/importschedule/Importscheduledetail.vue
diffstat 1 files changed, 154 insertions(+), 3 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/importschedule/Importscheduledetail.vue	Wed Dec 12 15:48:33 2018 +0100
+++ b/client/src/components/importschedule/Importscheduledetail.vue	Wed Dec 12 17:17:53 2018 +0100
@@ -59,6 +59,156 @@
           <div class="flex-column mt-3 w-100 mr-2">
             <div class="flex-row text-left">
               <small class="text-muted">
+                <translate>Simple Schedule</translate>
+              </small>
+            </div>
+            <div class="flex-flex-row text-left">
+              <toggle-button
+                v-model="easyCron"
+                class="mt-2"
+                :speed="100"
+                :labels="{
+                  checked: this.$options.on,
+                  unchecked: this.$options.off
+                }"
+                :width="50"
+                :height="20"
+              />
+            </div>
+          </div>
+          <div class="flex-column w-100 mr-2">
+            <div class="flex-row text-left">
+              <small class="text-muted">
+                <translate>Schedule</translate>
+              </small>
+            </div>
+            <div v-if="easyCron" class="text-left w-50">
+              <select class="form-control"
+                ><option> Weekly </option>
+                <option>Monthly</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>
+                <select
+                  style="width: 100px;"
+                  v-model="cronMode"
+                  class="form-control"
+                >
+                  <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>
+                </select>
+                <div v-if="cronMode == 'hour'" class="ml-2 d-flex flex-row">
+                  <h4 class="mt-auto mb-auto">at</h4>
+                  <input
+                    style="width:50px"
+                    class="ml-2 mr-2 form-control"
+                    type="text"
+                  />
+                  <h4 class="mt-auto mb-auto">minutes past</h4>
+                </div>
+                <div v-if="cronMode == 'day'" class="ml-2 d-flex flex-row">
+                  <h4 class="mt-auto mb-auto">at</h4>
+                  <input
+                    style="width:50px"
+                    class="ml-2 mr-2 form-control"
+                    type="text"
+                  />
+                  <input
+                    style="width:50px"
+                    class="ml-2 mr-2 form-control"
+                    type="text"
+                  />
+                  <h4 class="mt-auto mb-auto">o' clock</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>
+                  </select>
+                  <h4 class="ml-2 mt-auto mb-auto">at</h4>
+                  <input
+                    style="width:50px"
+                    class="ml-2 mr-2 form-control"
+                    type="text"
+                  />
+                  <input
+                    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>
+                  <input
+                    style="width:50px"
+                    class="ml-2 mr-2 form-control"
+                    type="text"
+                  />
+                  <h4 class="mt-auto mb-auto">at</h4>
+                  <input
+                    style="width:50px"
+                    class="ml-2 mr-2 form-control"
+                    type="text"
+                  />
+                  <input
+                    style="width:50px"
+                    class="ml-2 mr-2 form-control"
+                    type="text"
+                  />
+                  <h4 class="mt-auto mb-auto">o' clock</h4>
+                </div>
+                <div v-if="cronMode == 'year'" class="ml-2 d-flex flex-row">
+                  <h4 class="ml-2 mt-auto mb-auto">on</h4>
+                  <input
+                    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>
+                  </select>
+                  <h4 class="mt-auto mb-auto">at</h4>
+                  <input
+                    style="width:50px"
+                    class="ml-2 mr-2 form-control"
+                    type="text"
+                  />
+                  <input
+                    style="width:50px"
+                    class="ml-2 mr-2 form-control"
+                    type="text"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="flex-column mt-3 w-100 mr-2">
+            <div class="flex-row text-left">
+              <small class="text-muted">
                 <translate>Email Notification</translate>
               </small>
             </div>
@@ -107,7 +257,8 @@
       schedule: null,
       import_: null,
       eMailNotification: false,
-      easyCron: true
+      easyCron: true,
+      cronMode: ""
     };
   },
   computed: {
@@ -138,8 +289,8 @@
 
 <style lang="scss" scoped>
 .importscheduledetails {
-  height: 420px;
-  width: 45%;
+  height: 620px;
+  width: 100%;
   margin-top: $offset;
   margin-right: $offset;
 }