Mercurial > gemma
view client/src/components/importschedule/Importscheduledetail.vue @ 1576:b5d7770fe632
fix: error with translations
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Thu, 13 Dec 2018 13:41:27 +0100 |
parents | 51f924cbac23 |
children | 3a30a6f4c96d |
line wrap: on
line source
<template> <div class="importscheduledetails fadeIn animated" v-if="importScheduleDetailVisible" > <div class="card h-100 shadow-xs"> <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-3"> <div class="d-flex flex-row w-100"> <div class="flex-column w-100"> <div class="flex-row text-left"> <small class="text-muted"> <translate>Imports</translate> </small> </div> <select v-model="import_" class="custom-select" id="import_"> <option v-for="option in this.$options.imports" :key="option">{{ option }}</option> </select> </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-row text-left"> <small class="text-muted"> <translate>Importtype</translate> </small> </div> <select v-model="import_" class="custom-select" id="importtype"> <option v-for="option in this.$options.importtype" :key="option" >{{ option }}</option > </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"> <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 v-model="simple" class="form-control" ><option value="weekly"> Weekly </option> <option value="monthly">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: 130px;" v-model="cronMode" class="form-control" @change="clearInputs" > <option value="15minutes">15 minutes</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 v-model="minutes" 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 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> </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 v-model="day" class="form-control"> <option value="1">Monday</option> <option value="2">Tuesday</option> <option value="3">Wednesday</option> <option value="4">Thursday</option> <option value="5">Friday</option> <option value="6">Saturday</option> <option value="0">Sunday</option> </select> <h4 class="ml-2 mt-auto mb-auto">at</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> <input v-model="dayOfMonth" style="width:50px" class="ml-2 mr-2 form-control" type="text" /> <h4 class="mt-auto mb-auto">at</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> </div> <div v-if="cronMode == 'year'" class="ml-2 d-flex flex-row"> <h4 class="ml-2 mt-auto mb-auto">on</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 v-model="month" class="ml-2 mr-2 form-control"> <option value="1">January</option> <option value="2">February</option> <option value="3">March</option> <option value="4">April</option> <option value="5">May</option> <option value="6">June</option> <option value="7">July</option> <option value="8">August</option> <option value="9">September</option> <option value="10">October</option> <option value="11">November</option> <option value="12">December</option> </select> <h4 class="mt-auto mb-auto">at</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">Cronstring</h5> <input class="form-control" :value="cronString" type="text" /> </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="50" :height="20" /> </div> </div> <div class="flex-column w-100 mr-2"> <div class="flex-row text-left"> <small class="text-muted"> <translate>Email</translate> </small> </div> <input :disabled="!eMailNotification" class="form-control" type="text" /> </div> <button type="submit" class="shadow-sm btn btn-info submit-button"> <translate>Submit</translate> </button> </form> </div> </div> </div> </template> <script> import { mapState } from "vuex"; import { displayInfo } from "../../lib/errors.js"; export default { name: "importscheduledetail", data() { return { importType: null, schedule: null, import_: null, eMailNotification: false, easyCron: true, 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"]), 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", message: "under construction" }); }, closeDetailview() { this.$store.commit("imports/clearImportScheduleDetail"); this.$store.commit("imports/setImportScheduleDetailInvisible"); } }, imports: [], importtype: [], on: "on", off: "off", periods: { DAILY: "daily", MONTHLY: "monthly" } }; </script> <style lang="scss" scoped> .importscheduledetails { height: 620px; width: 100%; margin-top: $offset; margin-right: $offset; } .submit-button { position: absolute; right: $offset; bottom: $offset; } </style>