139 lines
4.2 KiB
Vue
139 lines
4.2 KiB
Vue
<script setup lang="ts">
|
|
import ShowStartEndTime from "@partials/fields/show/ShowStartEndTime.vue";
|
|
import {useShowInstanceStore} from "@/stores/showInstance.store.ts";
|
|
import {onMounted, ref, type PropType} from "vue";
|
|
import type {ShowInstance} from "@models/show/showInstance.ts";
|
|
import {extractTime} from "@/helpers/DateFormatter.ts";
|
|
import Playlist from "@components/content/Playlist.vue";
|
|
import {getPlaylist, getPlaylistContent} from "@models/playlist.ts";
|
|
import {getUser} from "@models/User.ts";
|
|
import PlaylistEditor from "@partials/PlaylistEditor.vue";
|
|
import Sources from "@partials/Sources.vue";
|
|
import TrackList from "@partials/TrackList.vue";
|
|
|
|
const emits = defineEmits(['toggle-menu-edit-instance']);
|
|
// Props
|
|
const props = defineProps({
|
|
showInstance: {
|
|
type: Object as PropType<ShowInstance>,
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
// Data
|
|
|
|
const showInstanceStore = useShowInstanceStore();
|
|
showInstanceStore.loadShowInstance(props.showInstance);
|
|
|
|
const showInstanceTime = ref({
|
|
startsDate: new Date(showInstanceStore.currentShowInstance.starts),
|
|
startsTime: extractTime(showInstanceStore.currentShowInstance.starts, true),
|
|
endsDate: new Date(showInstanceStore.currentShowInstance.ends),
|
|
endsTime: extractTime(showInstanceStore.currentShowInstance.ends, true),
|
|
});
|
|
const playlist = ref({tracks: []});
|
|
|
|
// Funcs
|
|
onMounted(async () => {
|
|
playlist.value = await getPlaylistContent(showInstanceStore.currentShowInstance.show.autoplaylist_id)
|
|
})
|
|
|
|
const goBack = () => {
|
|
showInstanceStore.resetShowInstance();
|
|
emits('toggle-menu-edit-instance');
|
|
}
|
|
|
|
const saveInstance = async () => {
|
|
const startsDateTime = showInstanceTime.value.startsDate + ' ' + showInstanceTime.value.startsTime;
|
|
const endsDateTime = showInstanceTime.value.endsDate + ' ' + showInstanceTime.value.endsTime;
|
|
|
|
showInstanceStore.updateField({key: 'starts', value: startsDateTime})
|
|
showInstanceStore.updateField({key: 'ends', value: endsDateTime})
|
|
|
|
await showInstanceStore.saveShowInstance();
|
|
goBack()
|
|
}
|
|
|
|
const update = () => {
|
|
console.log('update')
|
|
}
|
|
</script>
|
|
<template>
|
|
<v-row no-gutters>
|
|
<v-label
|
|
label="Trasmissione"
|
|
density="compact"
|
|
>
|
|
Trasmissione - {{ showInstanceStore.currentShowInstance.show.name }}
|
|
</v-label>
|
|
</v-row>
|
|
<v-form>
|
|
<!-- Description (takes the whole row) -->
|
|
<v-row no-gutters>
|
|
<v-col cols="12">
|
|
<v-card>
|
|
<v-textarea
|
|
v-model="showInstanceStore.currentShowInstance.instance_description"
|
|
label="Descrizione istanza"
|
|
density="compact"
|
|
:required="true"
|
|
rows="3"
|
|
/>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<!-- StartDate and EndDate (on another row) -->
|
|
<v-row no-gutters>
|
|
<v-col cols="12" md="6" lg="6">
|
|
<v-date-picker
|
|
v-model="showInstanceTime.startsDate"
|
|
: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="showInstanceTime.endsDate"
|
|
:min="showInstanceTime.startsDate"
|
|
label="Data fine"
|
|
title="Data fine"
|
|
density="compact"
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<!-- StartTime and EndTime (on another row) -->
|
|
<v-row no-gutters>
|
|
<v-col cols="12" md="6" lg="6">
|
|
<ShowStartEndTime
|
|
v-model="showInstanceTime.startsTime"
|
|
:start-time-label="'Ora inizio della puntata'"
|
|
:duration-label="'Durata'"
|
|
:end-time-label="'Orario di fine della puntata'"
|
|
@update:endTime="value => showInstanceTime.endsTime = value"
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<!-- Empty row for custom component -->
|
|
<v-row no-gutters>
|
|
<v-col>
|
|
<TrackList
|
|
:tracks="playlist.tracks"
|
|
@update-tracks="update"
|
|
/>
|
|
</v-col>
|
|
<v-col>
|
|
<Sources/>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<!-- Actions -->
|
|
<v-card-actions>
|
|
<v-btn color="accent" @click="goBack">Torna indietro</v-btn>
|
|
<v-btn color="accent" @click="saveInstance">Salva</v-btn>
|
|
</v-card-actions>
|
|
</v-form>
|
|
</template>
|