Mercurial > gemma
view client/src/components/importschedule/Importscheduledetail.vue @ 1571:b3f2d43f43e4
added 15minutes as custom value
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Wed, 12 Dec 2018 17:21:11 +0100 |
parents | 424793472f28 |
children | 51f924cbac23 |
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 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: 130px;" v-model="cronMode" class="form-control" > <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> </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> <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: "" }; }, computed: { ...mapState("imports", ["importScheduleDetailVisible"]) }, methods: { 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>