118 lines
No EOL
4 KiB
Vue
118 lines
No EOL
4 KiB
Vue
<script setup lang="ts">
|
|
import {onMounted, ref, watch} from 'vue';
|
|
import {useShowFormStore} from "@/stores/showForm.store.ts";
|
|
import {showRepetitionData} from "@models/show/ShowRepetition.ts";
|
|
import DaysCheckbox from "@partials/fields/show/DaysCheckbox.vue";
|
|
import ShowStartEndTime from "@partials/fields/show/ShowStartEndTime.vue";
|
|
|
|
const emits =defineEmits(['toggle-show-schedule-form'])
|
|
|
|
const showFormStore = useShowFormStore();
|
|
|
|
const goBack = () => {
|
|
// showFormStore.resetShowDays();
|
|
emits("toggle-show-schedule-form");
|
|
};
|
|
|
|
const saveShowSchedule = () => {
|
|
showFormStore.saveSchedule();
|
|
};
|
|
|
|
const checkBoxEnd = ref(false)
|
|
const checkBoxRepetition = ref(false)
|
|
|
|
watch(checkBoxEnd, (checkBoxEnd) => {
|
|
if(checkBoxEnd == false) showFormStore.updateShowDaysField({ key: 'lastShow', value: null })
|
|
})
|
|
|
|
watch(checkBoxRepetition, (checkBoxRepetition) => {
|
|
if(checkBoxRepetition == false) {
|
|
showFormStore.updateShowDaysField({key: 'day', value: []})
|
|
// TODO By restoring the noRepeat from the day enum
|
|
// one can toggle it's visibility based on the select box disabled value
|
|
// Only cosmetic
|
|
showFormStore.updateShowDaysField({key: 'repeatType', value: -1})
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<v-card>
|
|
<v-card-title>
|
|
<h3>Regole di programmazione</h3>
|
|
</v-card-title>
|
|
<v-form>
|
|
<v-card-text>
|
|
<v-row no-gutters>
|
|
<!-- First Show Date -->
|
|
<v-col cols="12" md="6" lg="4">
|
|
<v-date-picker
|
|
v-model="showFormStore.currentShow.showDays.firstShow"
|
|
:min="new Date().toISOString().substring(0, 10)"
|
|
:title="'Data inizio'"
|
|
label="Data inizio"
|
|
density="compact"
|
|
@update:modelValue="value => showFormStore.updateShowDaysField({ key: 'firstShow', value })"
|
|
/>
|
|
</v-col>
|
|
|
|
<!-- Last Show Date with Checkbox Conditional -->
|
|
<v-col cols="12" md="6" lg="4">
|
|
<v-checkbox
|
|
label="impostare una data di fine per lo show?"
|
|
v-model="checkBoxEnd"
|
|
></v-checkbox>
|
|
<v-date-picker
|
|
v-model="showFormStore.currentShow.showDays.lastShow"
|
|
:min="showFormStore.currentShow.showDays.firstShow"
|
|
label="Data fine"
|
|
title="Data fine"
|
|
density="compact"
|
|
:disabled="!checkBoxEnd"
|
|
/>
|
|
</v-col>
|
|
|
|
<!-- Start Time and Duration -->
|
|
<v-col cols="12" md="6" lg="4">
|
|
<ShowStartEndTime
|
|
v-model="showFormStore.currentShow.showDays.startTime"
|
|
:start-time-label="'Ora inizio show'"
|
|
:duration-label="'Durata'"
|
|
:end-time-label="'Orario di fine della trasmissione'"
|
|
@update:duration="value => showFormStore.updateShowDaysField({ key: 'duration', value })"
|
|
/>
|
|
</v-col>
|
|
|
|
<!-- Repeat Options -->
|
|
<v-col cols="12" md="6" lg="4">
|
|
<v-checkbox
|
|
label="Attivare regole di ripetizione?"
|
|
v-model="checkBoxRepetition"
|
|
></v-checkbox>
|
|
<v-select
|
|
v-model="showFormStore.currentShow.showDays.repeatType"
|
|
:items="showRepetitionData"
|
|
label="Ripetizione"
|
|
density="compact"
|
|
item-title="repeatName"
|
|
item-value="type"
|
|
:disabled="!checkBoxRepetition"
|
|
/>
|
|
|
|
<DaysCheckbox
|
|
v-model="showFormStore.currentShow.showDays.day"
|
|
label="Giorni"
|
|
:disabled="!checkBoxRepetition"
|
|
@update:modelValue="value => showFormStore.updateShowDaysField({ key: 'day', value })"
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
</v-card-text>
|
|
|
|
<v-card-actions>
|
|
<v-btn color="accent" @click="goBack">Torna indietro</v-btn>
|
|
<v-btn color="accent" @click="saveShowSchedule">Salva</v-btn>
|
|
</v-card-actions>
|
|
</v-form>
|
|
</v-card>
|
|
</template> |