Mercurial > gemma

comparison client/src/components/importschedule/Importscheduledetail.vue @ 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 b3f2d43f43e4
children b5d7770fe632
comparison
equal deleted inserted replaced
1574:df975eb2e80e 1575:51f924cbac23
27 }}</option> 27 }}</option>
28 </select> 28 </select>
29 </div> 29 </div>
30 </div> 30 </div>
31 <div class="d-flex flex-row mt-3 w-100 justify-content-between"> 31 <div class="d-flex flex-row mt-3 w-100 justify-content-between">
32 <div class="flex-column w-100 mr-2"> 32 <div class="flex-column w-100">
33 <div class="flex-row text-left"> 33 <div class="flex-row text-left">
34 <small class="text-muted"> 34 <small class="text-muted">
35 <translate>Importtype</translate> 35 <translate>Importtype</translate>
36 </small> 36 </small>
37 </div> 37 </div>
41 :key="option" 41 :key="option"
42 >{{ option }}</option 42 >{{ option }}</option
43 > 43 >
44 </select> 44 </select>
45 </div> 45 </div>
46 <div class="flex-column w-100 ml-2">
47 <div class="flex-row text-left">
48 <small class="text-muted">
49 <translate>Schedule</translate>
50 </small>
51 </div>
52 <select v-model="schedule" class="custom-select" id="period">
53 <option v-for="option in this.$options.periods" :key="option">{{
54 option
55 }}</option>
56 </select>
57 </div>
58 </div> 46 </div>
59 <div class="flex-column mt-3 w-100 mr-2"> 47 <div class="flex-column mt-3 w-100 mr-2">
60 <div class="flex-row text-left"> 48 <div class="flex-row text-left">
61 <small class="text-muted"> 49 <small class="text-muted">
62 <translate>Simple Schedule</translate> 50 <translate>Simple Schedule</translate>
81 <small class="text-muted"> 69 <small class="text-muted">
82 <translate>Schedule</translate> 70 <translate>Schedule</translate>
83 </small> 71 </small>
84 </div> 72 </div>
85 <div v-if="easyCron" class="text-left w-50"> 73 <div v-if="easyCron" class="text-left w-50">
86 <select class="form-control" 74 <select v-model="simple" class="form-control"
87 ><option> Weekly </option> 75 ><option value=""><translate>No Schedule</translate></option>
88 <option>Monthly</option> 76 <option value="weekly"><translate>Weekly</translate></option>
77 <option value="monthly"><translate>Monthly</translate></option>
89 </select> 78 </select>
90 </div> 79 </div>
91 <div v-if="!easyCron" class="text-left w-100"> 80 <div v-if="!easyCron" class="text-left w-100">
92 <div class="d-flex flex-row"> 81 <div class="d-flex flex-row">
93 <h4 class="mt-auto mb-auto mr-2">Every</h4> 82 <h4 class="mt-auto mb-auto mr-2">
83 <translate>Every</translate>
84 </h4>
94 <select 85 <select
95 style="width: 130px;" 86 style="width: 130px;"
96 v-model="cronMode" 87 v-model="cronMode"
97 class="form-control" 88 class="form-control"
89 @change="clearInputs"
98 > 90 >
99 <option value="15minutes">15 minutes</option> 91 <option value="15minutes"
100 <option value="minute">minute</option> 92 ><translate>15 minutes</translate></option
101 <option value="hour">hour</option> 93 >
102 <option value="day">day</option> 94 <option value="hour"><translate>hour</translate></option>
103 <option value="week">week</option> 95 <option value="day"><translate>day</translate></option>
104 <option value="month">month</option> 96 <option value="week"><translate>week</translate></option>
105 <option value="year">year</option> 97 <option value="month"><translate>month</translate></option>
98 <option value="year"><translate>year</translate></option>
106 </select> 99 </select>
107 <div v-if="cronMode == 'hour'" class="ml-2 d-flex flex-row"> 100 <div v-if="cronMode == 'hour'" class="ml-2 d-flex flex-row">
108 <h4 class="mt-auto mb-auto">at</h4> 101 <h4 class="mt-auto mb-auto"><translate>at</translate></h4>
109 <input 102 <input
110 style="width:50px" 103 v-model="minutes"
111 class="ml-2 mr-2 form-control" 104 style="width:50px"
112 type="text" 105 class="ml-2 mr-2 form-control"
113 /> 106 type="text"
114 <h4 class="mt-auto mb-auto">minutes past</h4> 107 />
108 <h4 class="mt-auto mb-auto">
109 <translate>minutes past</translate>
110 </h4>
115 </div> 111 </div>
116 <div v-if="cronMode == 'day'" class="ml-2 d-flex flex-row"> 112 <div v-if="cronMode == 'day'" class="ml-2 d-flex flex-row">
117 <h4 class="mt-auto mb-auto">at</h4> 113 <h4 class="mt-auto mb-auto"><translate>at</translate></h4>
118 <input 114 <input
119 style="width:50px" 115 v-model="hour"
120 class="ml-2 mr-2 form-control" 116 style="width:50px"
121 type="text" 117 class="ml-2 mr-2 form-control"
122 /> 118 type="text"
123 <input 119 />
124 style="width:50px" 120 <input
125 class="ml-2 mr-2 form-control" 121 v-model="minutes"
126 type="text" 122 style="width:50px"
127 /> 123 class="ml-2 mr-2 form-control"
128 <h4 class="mt-auto mb-auto">o' clock</h4> 124 type="text"
125 />
126 <h4 class="mt-auto mb-auto">
127 <translate>o' clock</translate>
128 </h4>
129 </div> 129 </div>
130 <div v-if="cronMode == 'week'" class="ml-2 d-flex flex-row"> 130 <div v-if="cronMode == 'week'" class="ml-2 d-flex flex-row">
131 <h4 class="ml-2 mr-3 mt-auto mb-auto">on</h4> 131 <h4 class="ml-2 mr-3 mt-auto mb-auto">
132 <select class="form-control"> 132 <translate>on</translate>
133 <option>Monday</option> 133 </h4>
134 <option>Tuesday</option> 134 <select v-model="day" class="form-control">
135 <option>Wednesday</option> 135 <option value="1"><translate>Monday</translate></option>
136 <option>Thursday</option> 136 <option value="2"><translate>Tuesday</translate></option>
137 <option>Friday</option> 137 <option value="3"><translate>Wednesday</translate></option>
138 <option>Saturday</option> 138 <option value="4"><translate>Thursday</translate></option>
139 <option>Sunday</option> 139 <option value="5"><translate>Friday</translate></option>
140 <option value="6"><translate>Saturday</translate></option>
141 <option value="0"><translate>Sunday</translate></option>
140 </select> 142 </select>
141 <h4 class="ml-2 mt-auto mb-auto">at</h4> 143 <h4 class="ml-2 mt-auto mb-auto">
142 <input 144 <translate>at</translate>
143 style="width:50px" 145 </h4>
144 class="ml-2 mr-2 form-control" 146 <input
145 type="text" 147 v-model="hour"
146 /> 148 style="width:50px"
147 <input 149 class="ml-2 mr-2 form-control"
150 type="text"
151 />
152 <input
153 v-model="minutes"
148 style="width:50px" 154 style="width:50px"
149 class="ml-2 mr-2 form-control" 155 class="ml-2 mr-2 form-control"
150 type="text" 156 type="text"
151 /> 157 />
152 </div> 158 </div>
153 <div v-if="cronMode == 'month'" class="ml-2 d-flex flex-row"> 159 <div v-if="cronMode == 'month'" class="ml-2 d-flex flex-row">
154 <h4 class="ml-2 mt-auto mb-auto">on</h4> 160 <h4 class="ml-2 mt-auto mb-auto">
155 <input 161 <translate>on</translate>
156 style="width:50px" 162 </h4>
157 class="ml-2 mr-2 form-control" 163 <input
158 type="text" 164 v-model="dayOfMonth"
159 /> 165 style="width:50px"
160 <h4 class="mt-auto mb-auto">at</h4> 166 class="ml-2 mr-2 form-control"
161 <input 167 type="text"
162 style="width:50px" 168 />
163 class="ml-2 mr-2 form-control" 169 <h4 class="mt-auto mb-auto"><translate>at</translate></h4>
164 type="text" 170 <input
165 /> 171 v-model="hour"
166 <input 172 style="width:50px"
167 style="width:50px" 173 class="ml-2 mr-2 form-control"
168 class="ml-2 mr-2 form-control" 174 type="text"
169 type="text" 175 />
170 /> 176 <input
171 <h4 class="mt-auto mb-auto">o' clock</h4> 177 v-model="minutes"
178 style="width:50px"
179 class="ml-2 mr-2 form-control"
180 type="text"
181 />
182 <h4 class="mt-auto mb-auto">
183 <translate>o' clock</translate>
184 </h4>
172 </div> 185 </div>
173 <div v-if="cronMode == 'year'" class="ml-2 d-flex flex-row"> 186 <div v-if="cronMode == 'year'" class="ml-2 d-flex flex-row">
174 <h4 class="ml-2 mt-auto mb-auto">on</h4> 187 <h4 class="ml-2 mt-auto mb-auto">
175 <input 188 <translate>on</translate>
176 style="width:50px" 189 </h4>
177 class="ml-2 mr-2 form-control" 190 <input
178 type="text" 191 v-model="dayOfMonth"
179 /> 192 style="width:50px"
180 <h4 class="mt-auto mb-auto">of</h4> 193 class="ml-2 mr-2 form-control"
181 <select class="ml-2 mr-2 form-control"> 194 type="text"
182 <option>January</option> 195 />
183 <option>February</option> 196 <h4 class="mt-auto mb-auto"><translate>of</translate></h4>
184 <option>March</option> 197 <select v-model="month" class="ml-2 mr-2 form-control">
185 <option>April</option> 198 <option value="1"><translate>January</translate></option>
186 <option>May</option> 199 <option value="2"><translate>February</translate></option>
187 <option>June</option> 200 <option value="3"><translate>March</translate></option>
188 <option>July</option> 201 <option value="4"><translate>April</translate></option>
189 <option>August</option> 202 <option value="5"><translate>May</translate></option>
190 <option>September</option> 203 <option value="6"><translate>June</translate></option>
191 <option>October</option> 204 <option value="7"><translate>July</translate></option>
192 <option>November</option> 205 <option value="8"><translate>August</translate></option>
193 <option>December</option> 206 <option value="9"><translate>September</translate></option>
207 <option value="10"><translate>October</translate></option>
208 <option value="11"><translate>November</translate></option>
209 <option value="12"><translate>December</translate></option>
194 </select> 210 </select>
195 <h4 class="mt-auto mb-auto">at</h4> 211 <h4 class="mt-auto mb-auto"><translate>at</translate></h4>
196 <input 212 <input
197 style="width:50px" 213 v-model="hour"
198 class="ml-2 mr-2 form-control" 214 style="width:50px"
199 type="text" 215 class="ml-2 mr-2 form-control"
200 /> 216 type="text"
201 <input 217 />
202 style="width:50px" 218 <input
203 class="ml-2 mr-2 form-control" 219 v-model="minutes"
204 type="text" 220 style="width:50px"
205 /> 221 class="ml-2 mr-2 form-control"
206 </div> 222 type="text"
223 />
224 </div>
225 </div>
226 <div class="mt-3 w-50 d-flex flex-row">
227 <h5 class="mt-auto mb-auto mr-2">
228 <translate>Cronstring</translate>
229 </h5>
230 <input class="form-control" :value="cronString" type="text" />
207 </div> 231 </div>
208 </div> 232 </div>
209 </div> 233 </div>
210 <div class="flex-column mt-3 w-100 mr-2"> 234 <div class="flex-column mt-3 w-100 mr-2">
211 <div class="flex-row text-left"> 235 <div class="flex-row text-left">
257 importType: null, 281 importType: null,
258 schedule: null, 282 schedule: null,
259 import_: null, 283 import_: null,
260 eMailNotification: false, 284 eMailNotification: false,
261 easyCron: true, 285 easyCron: true,
262 cronMode: "" 286 cronMode: "",
287 minutes: null,
288 month: null,
289 hour: null,
290 day: null,
291 dayOfMonth: null,
292 simple: null
263 }; 293 };
264 }, 294 },
295 watch: {
296 cronString() {
297 if (this.isWeekly(this.cronString)) {
298 this.simple = "weekly";
299 }
300 if (this.isMonthly(this.cronString)) {
301 this.simple = "monthly";
302 }
303 }
304 },
265 computed: { 305 computed: {
266 ...mapState("imports", ["importScheduleDetailVisible"]) 306 ...mapState("imports", ["importScheduleDetailVisible"]),
307 cronString: {
308 get() {
309 let getValue = value => {
310 return this[value] ? this[value] : "*";
311 };
312 if (this.cronMode === "15minutes") return "*/15 * * * *";
313 const min = getValue("minutes");
314 const h = getValue("hour");
315 const dm = getValue("dayOfMonth");
316 const m = getValue("month");
317 const wd = getValue("day");
318 return `${min} ${h} ${dm} ${m} ${wd}`;
319 }
320 }
267 }, 321 },
268 methods: { 322 methods: {
323 isWeekly(cron) {
324 return /\d{1,2} \d{1,2} \* \* \d{1}/.test(cron);
325 },
326 isMonthly(cron) {
327 return /\d{1,2} \d{1,2} \d{1,2} \* \*/.test(cron);
328 },
329 clearInputs() {
330 this.minutes = null;
331 this.month = null;
332 this.hour = null;
333 this.day = null;
334 this.dayOfMonth = null;
335 },
269 save() { 336 save() {
270 displayInfo({ 337 displayInfo({
271 title: "Import", 338 title: "Import",
272 message: "under construction" 339 message: "under construction"
273 }); 340 });