139 lines
3.9 KiB
Vue
139 lines
3.9 KiB
Vue
<script setup lang="ts">
|
|
import ShowStartEndTime from "@partials/fields/show/ShowStartEndTime.vue";
|
|
import {useShowInstanceStore} from "@stores/show/showInstance.store.ts";
|
|
import {onMounted, ref, watch, type PropType} from "vue";
|
|
import {baseShowInstance, type ShowInstance} from "@models/show/showInstance.ts";
|
|
import {extractTime} from "@/helpers/DateFormatter.ts";
|
|
import {getPlaylistContent} from "@models/playlist.ts";
|
|
import Sources from "@partials/Sources.vue";
|
|
import TrackList from "@partials/TrackList.vue";
|
|
import {DateTime} from "luxon";
|
|
import {useShowStore} from "@stores/show/show.store.ts";
|
|
|
|
const emits = defineEmits(['toggle-menu-edit-instance']);
|
|
// Props
|
|
const props = defineProps({
|
|
showInstance: {
|
|
type: Number,
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
// Store
|
|
const showInstanceStore = useShowInstanceStore();
|
|
const showStore = useShowStore()
|
|
showInstanceStore.resetShowInstance()
|
|
showStore.resetShow()
|
|
|
|
// Data
|
|
const playlist = ref({tracks: []});
|
|
const showInstanceForm = ref<ShowInstance>(baseShowInstance());
|
|
// Funcs
|
|
const updateShowInstance = async () => {
|
|
showInstanceStore.currentShowInstance = showInstanceForm.value;
|
|
await showInstanceStore.updateShowInstance();
|
|
goBack()
|
|
}
|
|
|
|
const updateTracks = async () => {
|
|
console.log('updated')
|
|
}
|
|
|
|
const goBack = () => {
|
|
showInstanceStore.resetShowInstance();
|
|
emits('toggle-menu-edit-instance');
|
|
}
|
|
|
|
const resetForm = () => {
|
|
console.log()
|
|
showInstanceForm.value = { ...showInstanceStore.currentShowInstance};
|
|
}
|
|
|
|
onMounted(async () => {
|
|
await showInstanceStore.getShowInstance(props.showInstance, {withShow: true});
|
|
showStore.loadShow(showInstanceStore.currentShowInstance.show);
|
|
playlist.value = await getPlaylistContent(showStore.currentShow.autoplaylistId)
|
|
showInstanceForm.value = { ...showInstanceStore.currentShowInstance};
|
|
})
|
|
</script>
|
|
<template>
|
|
<v-row no-gutters>
|
|
<v-label
|
|
label="Trasmissione"
|
|
density="compact"
|
|
>
|
|
Trasmissione - {{ showStore.currentShow.name }}
|
|
</v-label>
|
|
</v-row>
|
|
<v-form>
|
|
<!-- Description -->
|
|
<v-row no-gutters>
|
|
<v-col cols="12">
|
|
<v-card>
|
|
<v-textarea
|
|
v-model="showInstanceForm.description"
|
|
label="Descrizione istanza"
|
|
density="compact"
|
|
:required="true"
|
|
rows="3"
|
|
/>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<!-- StartDate and EndDate -->
|
|
<v-row no-gutters>
|
|
<v-col cols="12" md="6" lg="6">
|
|
<v-date-picker
|
|
v-model="showInstanceForm.starts"
|
|
:min="new Date().toISOString().substring(0, 10)"
|
|
label="Data inizio"
|
|
density="compact"
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12" md="6" lg="6">
|
|
<v-date-picker
|
|
v-model="showInstanceForm.ends"
|
|
:min="showInstanceForm.starts"
|
|
label="Data fine"
|
|
title="Data fine"
|
|
density="compact"
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<!-- StartTime and EndTime -->
|
|
<v-row no-gutters>
|
|
<v-col cols="12" md="6" lg="6">
|
|
<ShowStartEndTime
|
|
v-model="showInstanceForm.startTime"
|
|
:start-time-label="'Ora inizio della puntata'"
|
|
:duration-label="'Durata'"
|
|
:end-time-label="'Orario di fine della puntata'"
|
|
:pre-set-end-time="showInstanceForm.endTime"
|
|
@update:endTime="value => showInstanceForm.endTime = value"
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<!-- Playlist -->
|
|
<v-row no-gutters>
|
|
<v-col>
|
|
<TrackList
|
|
:tracks="playlist.tracks"
|
|
@update-tracks="updateTracks"
|
|
/>
|
|
</v-col>
|
|
<v-col>
|
|
<Sources/>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<!-- Actions -->
|
|
<v-card-actions>
|
|
<v-btn color="red" @click="goBack">Torna indietro</v-btn>
|
|
<v-btn color="green" @click="updateShowInstance">Salva</v-btn>
|
|
<v-btn color="warning" @click="resetForm">Reset Form</v-btn>
|
|
</v-card-actions>
|
|
</v-form>
|
|
</template>
|