Mercurial > gemma
view client/src/components/importschedule/Importscheduledetail.vue @ 1712:1368e2a52c29
schedule_detail: scheduling last
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Tue, 08 Jan 2019 15:53:22 +0100 |
parents | aec17976528e |
children | d4702b0ff15f |
line wrap: on
line source
<template> <div class="importscheduledetails fadeIn animated" v-if="importScheduleDetailVisible" > <div class="card shadow-xs importscheduledetailscard pb-5"> <h6 class="mb-0 py-2 px-3 border-bottom d-flex text-info align-items-center" > <translate>New import</translate> <span @click="closeDetailview" class="closebutton"> <font-awesome-icon icon="times"></font-awesome-icon> </span> </h6> <div class="card-body"> <form @submit.prevent="save" class="ml-2 mr-2"> <div class="d-flex flex-row w-100"> <div class="flex-column w-50 mr-3"> <div class="flex-row text-left"> <small class="text-muted"> <translate>Imports</translate> </small> </div> <select v-model="import_" class="custom-select" id="importtype"> <option :value="$options.IMPORTTYPES.BOTTLENECK" ><translate>Bottlenecks</translate></option > </select> </div> <div v-if="import_" class="flex-column w-50"> <div class="flex-row text-left"> <small class="text-muted"> <translate>Importtype</translate> </small> </div> <select :disabled="fixedSource" v-model="importSource" class="custom-select" id="importsource" > <option :value="this.$options.IMPORTSOURCES.SOAP" ><translate>SOAP</translate></option > </select> </div> </div> <div v-if="isURLRequired"> <div class="d-flex flex-row"> <div class="flex-column mt-3 mr-3 w-100"> <div class="flex-row text-left"> <small class="text-muted"> <translate>URL</translate> </small> </div> <div class="w-100"> <input v-model="url" class="form-control" type="url" /> </div> </div> <div class="flex-column mt-3 text-left"> <div class="d-flex flex-row"> <small class="text-muted mr-2" ><translate>Insecure</translate> </small> </div> <div class="d-flex flex-row"> <toggle-button v-model="insecure" class="mt-2" :speed="100" :color="{ checked: '#FF0000', unchecked: '#E9ECEF', disabled: '#CCCCCC' }" :labels="{ checked: this.$options.on, unchecked: this.$options.off }" :width="60" :height="30" /> </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> <div class="flex-flex-row text-left"> <toggle-button v-model="eMailNotification" class="mt-2" :speed="100" :labels="{ checked: this.$options.on, unchecked: this.$options.off }" :width="60" :height="30" /> </div> </div> <div class="d-flex flex-row"> <div class="flex-column mt-3 mr-4"> <div class="flex-row text-left"> <small class="text-muted"> <translate>Scheduled</translate>? </small> </div> <div class="flex-flex-row text-left"> <toggle-button v-model="scheduled" class="mt-2" :speed="100" :labels="{ checked: this.$options.on, unchecked: this.$options.off }" :width="60" :height="30" /> </div> </div> <div class="flex-column mt-3 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 :disabled="!scheduled" v-model="easyCron" class="mt-2" :speed="100" :labels="{ checked: this.$options.on, unchecked: this.$options.off }" :width="60" :height="30" /> </div> </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 :disabled="!scheduled" v-model="simple" class="form-control" ><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">{{ $options.EVERY }}</h4> <select style="width: 130px;" v-model="cronMode" class="form-control" @change="clearInputs" > <option v-for="(option, key) in $options.CRONMODE" :value="key" :key="key" >{{ option }}</option > </select> <div v-if="cronMode == 'hour'" class="ml-1 d-flex flex-row"> <h4 class="mt-auto mb-auto">{{ $options.ON }}</h4> <input v-model="minutes" class="cronfield ml-1 mr-1 form-control" type="number" /> <h4 class="mt-auto mb-auto">{{ $options.MINUTESPAST }}</h4> </div> <div v-if="cronMode == 'day'" class="ml-1 d-flex flex-row"> <h4 class="mt-auto mb-auto">{{ $options.AT }}</h4> <input v-model="hour" class="cronfield ml-1 mr-1 form-control" type="number" /> <input v-model="minutes" class="cronfield ml-1 mr-1 form-control" type="number" /> <h4 class="mt-auto mb-auto">{{ $options.OCLOCK }}</h4> </div> <div v-if="cronMode == 'week'" class="ml-1 d-flex flex-row"> <h4 class="ml-1 mr-1 mt-auto mb-auto">{{ $options.ON }}</h4> <select v-model="day" class="form-control"> <option v-for="(option, key) in $options.DAYSOFWEEK" :key="key" :value="key" >{{ option }}</option > </select> <h4 class="ml-1 mt-auto mb-auto">{{ $options.AT }}</h4> <input v-model="hour" class="cronfield ml-1 mr-1 form-control" type="number" /> <input v-model="minutes" class="cronfield ml-1 mr-1 form-control" type="number" /> </div> <div v-if="cronMode == 'month'" class="ml-1 d-flex flex-row"> <h4 class="ml-1 mt-auto mb-auto">{{ $options.ON }}</h4> <input v-model="dayOfMonth" class="cronfield ml-1 mr-1 form-control" type="number" /> <h4 class="mt-auto mb-auto">{{ $options.AT }}</h4> <input v-model="hour" class="cronfield ml-1 mr-2 form-control" type="number" /> <input v-model="minutes" class="cronfield ml-1 mr-2 form-control" type="number" /> <h4 class="mt-auto mb-auto">{{ $options.OCLOCK }}</h4> </div> <div v-if="cronMode == 'year'" class="ml-1 d-flex flex-row"> <h4 class="ml-1 mt-auto mb-auto">{{ $options.ON }}</h4> <input v-model="dayOfMonth" class="cronfield ml-1 mr-1 form-control" type="number" /> <h4 class="mt-auto mb-auto">{{ $options.OF }}</h4> <select v-model="month" class="ml-1 mr-1 form-control"> <option v-for="(option, key) in $options.MONTHS" :value="key" :key="key" >{{ option }}</option > </select> <h4 class="mt-auto mb-auto">{{ $options.ON }}</h4> <input v-model="hour" class="cronfield ml-1 mr-1 form-control" type="number" /> <input v-model="minutes" class="cronfield ml-1 mr-1 form-control" type="number" /> </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> <button type="submit" class="shadow-sm btn btn-info submit-button"> <translate>Submit</translate> </button> <button @click="triggerManualImport" type="button" class="shadow-sm btn btn-outline-info trigger" :disabled="!triggerActive" > <font-awesome-icon class="fa-fw mr-2" fixed-width icon="play" ></font-awesome-icon ><translate>Trigger import</translate> </button> </form> </div> </div> </div> </template> <script> import { IMPORTTYPES } from "@/store/imports.js"; import { mapState } from "vuex"; import { displayInfo, displayError } from "@/lib/errors.js"; import app from "@/main.js"; export default { name: "importscheduledetail", data() { return { importType: null, schedule: null, import_: null, importSource: null, eMailNotification: false, scheduled: false, easyCron: true, cronMode: "", minutes: null, month: null, hour: null, day: null, dayOfMonth: null, simple: null, url: null, insecure: false, triggerActive: true }; }, IMPORTTYPES: { BOTTLENECK: "BOTTLENECK" }, IMPORTSOURCES: { SOAP: "SOAP" }, EVERY: app.$gettext("Every"), MINUTESPAST: app.$gettext("minutes past"), ON: app.$gettext("on"), OF: app.$gettext("of"), AT: app.$gettext("at"), OCLOCK: app.$gettext("o' clock"), CRONMODE: { "15minutes": app.$gettext("15 minutes"), hour: app.$gettext("hour"), day: app.$gettext("day"), week: app.$gettext("week"), month: app.$gettext("month"), year: app.$gettext("year") }, DAYSOFWEEK: { 1: app.$gettext("Monday"), 2: app.$gettext("Tuesday"), 3: app.$gettext("Wednesday"), 4: app.$gettext("Thursday"), 5: app.$gettext("Friday"), 6: app.$gettext("Saturday"), 0: app.$gettext("Sunday") }, MONTHS: { 1: app.$gettext("January"), 2: app.$gettext("February"), 3: app.$gettext("March"), 4: app.$gettext("April"), 5: app.$gettext("May"), 6: app.$gettext("June"), 7: app.$gettext("July"), 8: app.$gettext("August"), 9: app.$gettext("September"), 10: app.$gettext("October"), 11: app.$gettext("November"), 12: app.$gettext("December") }, watch: { cronString() { if (this.isWeekly(this.cronString)) { this.simple = "weekly"; } if (this.isMonthly(this.cronString)) { this.simple = "monthly"; } }, import_() { if (this.import_ === this.$options.IMPORTTYPES.BOTTLENECK) { this.importSource = this.$options.IMPORTSOURCES.SOAP; } } }, computed: { ...mapState("imports", ["importScheduleDetailVisible"]), isURLRequired() { if (this.import_ === this.$options.IMPORTTYPES.BOTTLENECK) return true; return false; }, 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}`; } }, fixedSource() { if (this.import_ === this.$options.IMPORTTYPES.BOTTLENECK) return true; return false; } }, 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); }, initialize() { this.importType = null; this.schedule = null; this.import_ = null; this.importSource = null; this.eMailNotification = false; this.easyCron = true; this.cronMode = ""; this.minutes = null; this.month = null; this.hour = null; this.day = null; this.dayOfMonth = null; this.simple = null; this.url = null; this.insecure = false; }, clearInputs() { this.minutes = null; this.month = null; this.hour = null; this.day = null; this.dayOfMonth = null; }, triggerManualImport() { if (!this.triggerActive) return; let data = {}; if (this.import_ === this.$options.IMPORTTYPES.BOTTLENECK) { if (!this.url) return; data["url"] = this.url; data["insecure"] = this.insecure; } this.triggerActive = false; const type = IMPORTTYPES[this.import_]; this.$store .dispatch("imports/triggerImport", { type, data }) .then(response => { const { id } = response.data; displayInfo({ title: this.$gettext("Import"), message: this.$gettext("Manually triggered import: #") + id }); }) .catch(error => { const { status, data } = error.response; displayError({ title: this.gettext("Backend Error"), message: `${status}: ${data.message || data}` }); }) .finally(() => { this.triggerActive = true; }); }, save() { displayInfo({ title: this.$gettext("Import"), message: this.$gettext("under construction") }); }, closeDetailview() { this.initialize(); this.$store.commit("imports/setImportScheduleDetailInvisible"); } }, imports: [], on: "on", off: "off", periods: { DAILY: "daily", MONTHLY: "monthly" } }; </script> <style lang="scss" scoped> .cronfield { width: 55px; } .importscheduledetailscard { min-height: 550px; } .importscheduledetails { width: 100%; margin-top: $offset; margin-right: $offset; } .trigger { position: absolute; left: $large-offset; bottom: $offset; } .submit-button { position: absolute; right: $large-offset; bottom: $offset; } </style>