100 lines
2.5 KiB
Vue
100 lines
2.5 KiB
Vue
<template>
|
|
<div>
|
|
<div class="columns has-text-centered">
|
|
<div class="column">
|
|
<p class="subtitle is-5">Selecciona la hora de inicio</p>
|
|
<b-clockpicker
|
|
type="is-info"
|
|
v-model="horaInicio"
|
|
inline
|
|
:min-time="minTime"
|
|
:max-time="maxTime"
|
|
:locale="locale"
|
|
:hour-format="hourFormat"
|
|
></b-clockpicker>
|
|
</div>
|
|
|
|
<p class="subtitle is-2" v-if="tipo === 'cambiarHora'">
|
|
{{ diaSeleccion.dia.dia }}
|
|
</p>
|
|
|
|
<div class="column">
|
|
<p class="subtitle is-5">Selecciona la hora de fin</p>
|
|
<b-clockpicker
|
|
type="is-info"
|
|
v-model="horaFin"
|
|
inline
|
|
:min-time="minTime"
|
|
:max-time="maxTime"
|
|
:locale="locale"
|
|
:hour-format="hourFormat"
|
|
></b-clockpicker>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="has-text-centered">
|
|
<b-button
|
|
class="my-5"
|
|
type="is-success"
|
|
@click="
|
|
$alertsGenericos.imprimirWarning($buefy, mensajeWarning, funcionHora)
|
|
"
|
|
>Guardar</b-button
|
|
>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import moment from 'moment'
|
|
export default {
|
|
props: {
|
|
cambiarHora: { type: Function, require: false },
|
|
crearHoraExcepcion: { type: Function, require: false },
|
|
diaSeleccion: { type: Object, require: true },
|
|
tipo: { type: String, require: true },
|
|
},
|
|
data() {
|
|
const min = new Date()
|
|
min.setHours(7)
|
|
min.setMinutes(0)
|
|
const max = new Date()
|
|
max.setHours(20)
|
|
max.setMinutes(0)
|
|
return {
|
|
minTime: min,
|
|
maxTime: max,
|
|
horaInicio: new Date(`01-01-2022 09:00`),
|
|
horaFin: new Date(`01-01-2022 17:45`),
|
|
locale: 'es-ES', // Browser locale
|
|
hourFormat: '24', // Browser locale
|
|
|
|
mensajeWarning: '',
|
|
}
|
|
},
|
|
methods: {
|
|
funcionHora() {
|
|
if (this.tipo === 'cambiarHora')
|
|
this.cambiarHora(
|
|
this.diaSeleccion.id_institucion_dia,
|
|
moment(this.horaInicio).format('HH:mm'),
|
|
moment(this.horaFin).format('HH:mm'),
|
|
true
|
|
)
|
|
else
|
|
this.crearHoraExcepcion(
|
|
this.diaSeleccion.id_institucion_dia,
|
|
moment(this.horaInicio).format('HH:mm'),
|
|
moment(this.horaFin).format('HH:mm')
|
|
)
|
|
},
|
|
},
|
|
created() {
|
|
if (this.tipo === 'cambiarHora')
|
|
this.mensajeWarning = '¿Esta segur@ de querer actualizar esta hora?'
|
|
else
|
|
this.mensajeWarning = '¿Esta segur@ de querer crear esta hora excepción?'
|
|
},
|
|
}
|
|
</script>
|