Congegni/sintonia_webapp
7
0
Fork 0
Code Issues 34 Pull requests Projects Releases Packages Wiki Activity

Merge branch 'dev' of ssh://git.congegni.net:4022/Congegni/sintonia_webapp into dev

Browse source
This commit is contained in:
Marco Cavalli 2025-04-03 15:01:11 +02:00
commit 36d3deab44
26 changed files with 521 additions and 243 deletions
Download patch file Download diff file Expand all files Collapse all files

25
resources/js/components/content/Dashboard.vue
View file

@ -1,20 +1,21 @@
<script setup lang="ts">
import CalendarShowEvent from "@/components/content/partials/CalendarShowEvent.vue";
import {computed, onMounted, type Ref, ref} from "vue";
import {useAuthStore} from "@/stores/auth.store.ts";
import ShowCreateEditForm from "@partials/show/ShowCreateEditForm.vue";
import {baseShow, deleteShow} from "@models/show/show.ts";
import type {calendarShowEvent} from "@models/misc/calendarShowEvent.ts";
import { nextTick } from "vue";
import {baseShowInstance, getShowInstances, type ShowInstance} from "@models/show/showInstance.ts";
import {setShowInstancesForCalendar} from "@/composables/content/dashboard_page.ts";
import {baseShowDays, getShowDays} from "@models/show/showDays.ts";
import type {calendarShowEvent} from "@models/misc/calendarShowEvent.ts";
import ShowInstanceForm from "@partials/show/ShowInstanceForm.vue";
import ShowForm from "@partials/show/ShowForm.vue";
import CalendarShowEvent from "@partials/show/CalendarShowEvent.vue"
import {extractTime} from "@/helpers/DateFormatter.ts";
// Store
const auth = useAuthStore();
const userRole = auth.userData.user.role;
// Data
const editMode = ref(false);
const showCreateEditMode = ref(false);
const showInstanceCreateEditMode = ref(false);
@ -22,6 +23,9 @@ const showInstances = ref<ShowInstance[]>([]);
let showSelected = ref(baseShow());
let selectedShowInstance = ref(baseShowInstance());
const shows: Ref<calendarShowEvent[]> = computed(() => setShowInstancesForCalendar(showInstances.value));
// Funcs
onMounted(async () => {
const today = new Date();
const startOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 1);
@ -33,9 +37,6 @@ onMounted(async () => {
showInstances.value = await getShowInstances(options);
});
const shows: Ref<calendarShowEvent[]> = computed(() => setShowInstancesForCalendar(showInstances.value));
const toggleEditMode = () => {
editMode.value = !editMode.value;
};
@ -51,7 +52,11 @@ const contextMenuEditInstance = (showInstanceId: number) => {
const contextMenuEditShow = async (showInstanceId: number) => {
showSelected.value = showInstances.value[showInstanceId].show;
showSelected.value.showDays = await getShowDays({showId: showSelected.value.id, flattenShowDays: true});
let showDaysRules = await getShowDays({show_id: showSelected.value.id, flattenShowDays: true});
showDaysRules.firstShow = new Date(showDaysRules.firstShow);
// TODO Timezone problems
showDaysRules.startTime = extractTime(showDaysRules.startTime, true);
showSelected.value.showDays = showDaysRules;
showCreateEditMode.value = true;
};
@ -79,7 +84,7 @@ const resetItemEdited = () => {
<template>
<template v-if="showCreateEditMode || showInstanceCreateEditMode">
<ShowCreateEditForm v-if="showCreateEditMode" :show="showSelected" @go-back="resetItemEdited" />
<ShowForm v-if="showCreateEditMode" :show="showSelected" @go-back="resetItemEdited" />
<ShowInstanceForm v-if="showInstanceCreateEditMode" :showInstance="selectedShowInstance" @toggle-menu-edit-instance="toggleMenuEditInstance" />
</template>
<template v-else>

4
resources/js/components/content/Show.vue
View file

@ -3,7 +3,7 @@ import {reactive, ref, watch} from "vue";
import Table from "@partials/Table.vue";
import ConfirmDelete from "@partials/dialogs/ConfirmDelete.vue";
import {show_page} from "@/composables/content/show/show_page.ts";
import ShowCreateEditForm from "@partials/show/ShowCreateEditForm.vue";
import ShowForm from "@partials/show/ShowForm.vue";
import {baseShow, type Show} from "@models/show/show";
const {items, listData, headers, selected, loading, search, getItems, editItem, deleteItem} = show_page()
@ -82,7 +82,7 @@ watch(search, (newValue, oldValue) => {
</script>
<template>
<ShowCreateEditForm
<ShowForm
v-if="showSelected.id !== null && !dialog.open"
:show="showSelected"
@go-back="resetItemEdited"

11
resources/js/components/content/partials/fields/show/DaysCheckbox.vue
View file

@ -1,8 +1,16 @@
<script setup lang="ts">
import {WeekDaysData} from "@models/show/ShowRepetition.ts";
import type {PropType} from "vue";
import type {Show} from "@models/show/show.ts";
const selectedDays = defineModel()
const props = defineProps({
fixedDay: {
type: Number,
required: false,
},
});
</script>
<template>
@ -14,6 +22,7 @@ const selectedDays = defineModel()
v-model="selectedDays"
:label="day.dayName"
:value="day.type"
:disabled="day.type === props.fixedDay"
/>
</v-col>
</v-row>

26
resources/js/components/content/partials/fields/show/ShowStartEndTime.vue
View file

@ -2,7 +2,8 @@
import {onMounted, type PropType} from "vue";
import { ref, watch } from 'vue';
import {getShowInstances} from "@models/show/showInstance.ts";
import {getHoursMinutesFromString, getTimeDiff} from "@/helpers/DateFormatter.ts";
// Emits, props and models
const emits = defineEmits(['update:duration'])
const props = defineProps({
@ -25,37 +26,26 @@ const props = defineProps({
})
const startTime = defineModel({default: '08:00'});
// Data
const duration = ref('0:0');
const endTime = ref('');
const startMenu = ref(false);
const endMenu = ref(false);
const getDuration = (startTime: Date, endTime: Date) => {
const diffInMilliseconds = Math.abs(startTime.getTime() - endTime.getTime());
const remainingHours = Math.floor((diffInMilliseconds % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const remainingMinutes = Math.floor((diffInMilliseconds % (1000 * 60 * 60)) / (1000 * 60));
return `${remainingHours}:${remainingMinutes}`;
};
const getHoursMinutes = (timeString: string) => {
const [ h, m ] = timeString.split(":");
const ms = new Date().setHours(h,m);
return new Date(ms)
};
// Func
const checkTime = () => {
if (startTime.value && endTime) {
const start = getHoursMinutes(startTime.value);
let end = getHoursMinutes(endTime.value);
const start: Date = getHoursMinutesFromString(startTime.value);
let end: Date = getHoursMinutesFromString(endTime.value);
if (end.getTime() <= start.getTime()) {
end = new Date(start);
end.setMinutes(start.getMinutes() + 60);
endTime.value = end.toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit' });;
}
duration.value = getDuration(start, end);
duration.value = getTimeDiff(start, end);
emits('update:duration', duration.value);
}
}

2
resources/js/components/content/partials/CalendarShowEvent.vue → resources/js/components/content/partials/show/CalendarShowEvent.vue
View file

@ -3,7 +3,7 @@ import type { PropType} from "vue";
import type {ContextMenuType} from "@models/misc/contextMenu"
import type {calendarShowEvent, ShowEventActionTrigger} from "@models/misc/calendarShowEvent.ts";
import {calendarShowEventMenu} from "@models/misc/calendarShowEvent";
import {ref, computed, onMounted} from 'vue';
import { ref } from 'vue';
import ContextMenu from '@partials/ContextMenu.vue';
const emit = defineEmits([

84
resources/js/components/content/partials/show/ShowCreateEditForm.vue → resources/js/components/content/partials/show/ShowForm.vue
View file

@ -7,6 +7,7 @@ import {getUser} from "@models/User.ts";
import {getPlaylist} from "@models/playlist.ts";
import ColorPickerButton from "@partials/fields/misc/ColorPickerButton.vue";
// Props
const props = defineProps({
show: {
type: Object as PropType<Show>,
@ -14,18 +15,22 @@ const props = defineProps({
},
});
// Data
let usersDJs = ref([])
let playlists = ref([])
const isLoading = ref(false);
const loading = ref(false);
const showScheduleFormMode = ref(false);
const isFormValid = ref(false);
// Store
const showStore = useShowStore()
showStore.loadShow(props.show)
const showFormStore = useShowStore()
// Funcs
onMounted(async () => {
isLoading.value = true
await showFormStore.loadShow(props.show)
loading.value = true
usersDJs.value = await getUser({role: 'dj'});
playlists.value = await getPlaylist({});
isLoading.value = false
loading.value = false
})
const toggleScheduleForm = () => {
@ -34,32 +39,45 @@ const toggleScheduleForm = () => {
</script>
<template>
<v-card>
<v-card
:disabled="loading"
:loading="loading"
>
<template v-slot:loader="{ isActive }">
<v-progress-linear
:active="isActive"
color="deep-purple"
height="4"
indeterminate
></v-progress-linear>
</template>
<v-card-title>
<h3>Trasmissione</h3>
</v-card-title>
<template v-if="showScheduleFormMode">
<ShowScheduleForm
v-model="showFormStore.currentShow.showDays"
v-model="showStore.currentShow.showDays"
@toggle-show-schedule-form="toggleScheduleForm"
@save-show-schedule="showFormStore.saveSchedule"
@trigger-show-creation="showStore.createShow"
/>
</template>
<template v-else>
<v-form>
<v-form ref="form" v-model="isFormValid">
<v-card-text>
<v-row no-gutters>
<!-- Name Field -->
<v-col cols="12" md="6" lg="4">
<v-card>
<v-text-field
v-model="showFormStore.currentShow.name"
v-model="showStore.currentShow.name"
label="Nome"
density="compact"
:required="true"
@update:modelValue="value => showFormStore.updateField({ key: 'name', value })"
@update:modelValue="value => showStore.updateField({ key: 'name', value })"
:rules="[v => !!v || 'Nome è obbligatorio']"
required="true"
/>
</v-card>
</v-col>
@ -68,11 +86,11 @@ const toggleScheduleForm = () => {
<v-col cols="12" md="6" lg="4">
<v-card>
<v-text-field
v-model="showFormStore.currentShow.url"
v-model="showStore.currentShow.url"
label="URL"
density="compact"
:required="true"
@update:modelValue="value => showFormStore.updateField({ key: 'url', value })"
@update:modelValue="value => showStore.updateField({ key: 'url', value })"
/>
</v-card>
</v-col>
@ -81,11 +99,11 @@ const toggleScheduleForm = () => {
<v-col cols="12" md="6" lg="4">
<v-card>
<v-text-field
v-model="showFormStore.currentShow.genre"
v-model="showStore.currentShow.genre"
label="Genere"
density="compact"
:required="true"
@update:modelValue="value => showFormStore.updateField({ key: 'genre', value })"
@update:modelValue="value => showStore.updateField({ key: 'genre', value })"
/>
</v-card>
</v-col>
@ -94,11 +112,11 @@ const toggleScheduleForm = () => {
<v-col cols="12" md="6" lg="4">
<v-card>
<v-textarea
v-model="showFormStore.currentShow.description"
v-model="showStore.currentShow.description"
label="Descrizione"
density="compact"
rows="2"
@update:modelValue="value => showFormStore.updateField({ key: 'description', value })"
@update:modelValue="value => showStore.updateField({ key: 'description', value })"
/>
</v-card>
</v-col>
@ -107,9 +125,9 @@ const toggleScheduleForm = () => {
<v-col cols="12" md="6" lg="4">
<v-card>
<ColorPickerButton
v-model="showFormStore.currentShow.backgroundColor"
v-model="showStore.currentShow.backgroundColor"
label="Colore di sfondo"
@update:modelValue="value => showFormStore.updateField({ key: 'backgroundColor', value })"
@update:modelValue="value => showStore.updateField({ key: 'backgroundColor', value })"
/>
</v-card>
</v-col>
@ -118,11 +136,11 @@ const toggleScheduleForm = () => {
<v-col cols="12" md="6" lg="4">
<v-card>
<v-file-input
v-model="showFormStore.currentShow.imagePath"
v-model="showStore.currentShow.imagePath"
label="Percorso immagine"
density="compact"
type="file"
@update:modelValue="value => showFormStore.updateField({ key: 'imagePath', value })"
@update:modelValue="value => showStore.updateField({ key: 'imagePath', value })"
/>
</v-card>
</v-col>
@ -133,24 +151,24 @@ const toggleScheduleForm = () => {
<v-card>
<v-checkbox
label="Attivare regole di ripetizione?"
v-model="showFormStore.currentShow.hasAutoplaylist"
v-model="showStore.currentShow.hasAutoplaylist"
></v-checkbox>
<v-checkbox
v-model="showFormStore.currentShow.autoplaylistRepeat"
v-model="showStore.currentShow.autoplaylistRepeat"
label="Ripetere playlist?"
:disabled="!showFormStore.currentShow.hasAutoplaylist"
@update:modelValue="value => showFormStore.updateField({ key: 'autoplaylistRepeat', value })"
:disabled="!showStore.currentShow.hasAutoplaylist"
@update:modelValue="value => showStore.updateField({ key: 'autoplaylistRepeat', value })"
/>
<v-select
v-model="showFormStore.currentShow.autoplaylist_id"
v-model="showStore.currentShow.autoplaylistId"
:items="playlists"
label="Playlist"
density="compact"
item-title="name"
item-value="id"
:disabled="!showFormStore.currentShow.hasAutoplaylist"
@update:modelValue="value => showFormStore.updateField({ key: 'autoplaylistId', value })"
:disabled="!showStore.currentShow.hasAutoplaylist"
@update:modelValue="value => showStore.updateField({ key: 'autoplaylistId', value })"
/>
</v-card>
</v-card>
@ -160,14 +178,14 @@ const toggleScheduleForm = () => {
<v-col cols="12" md="6" lg="4">
<v-card>
<v-select
v-model="showFormStore.currentShow.showDjs"
v-model="showStore.currentShow.showDjs"
:items="usersDJs"
label="DJs"
density="compact"
item-title="login"
item-value="id"
multiple
@update:modelValue="value => showFormStore.updateField({ key: 'showDjs', value })"
@update:modelValue="value => showStore.updateField({ key: 'showDjs', value })"
/>
</v-card>
</v-col>
@ -176,8 +194,8 @@ const toggleScheduleForm = () => {
<v-card-actions>
<v-btn color="accent" @click="$emit('goBack')">Torna indietro</v-btn>
<v-btn color="accent" @click="showFormStore.saveShow">Salva</v-btn>
<v-btn color="accent" @click="toggleScheduleForm">Salva e schedula</v-btn>
<v-btn v-if="showStore.currentShow.id" color="accent" @click="showStore.updateShow()" :disabled="!isFormValid" >Salva</v-btn>
<v-btn color="accent" @click="toggleScheduleForm" :disabled="!isFormValid" >Regole di programmazione</v-btn>
</v-card-actions>
</v-form>
</template>

89
resources/js/components/content/partials/show/ShowScheduleForm.vue
View file

@ -1,39 +1,65 @@
<script setup lang="ts">
<script setup lang="ts">
import {onMounted, ref, watch} from 'vue';
import {useShowStore} from "@/stores/show.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'])
// Emits and props
const emits = defineEmits(['toggle-show-schedule-form', 'trigger-show-creation'])
const showFormStore = useShowStore();
// Store
const showStore = useShowStore();
// Data
const checkBoxEnd = ref(false)
const checkBoxRepetition = ref(false)
const isFormValid = ref(false)
// Funcs
onMounted(() => {
const startDayShow = showStore.currentShow.showDays.firstShow.getDay();
let showDays = checkBoxRepetition.value ? showStore.currentShow.showDays.day : [];
showDays.push(startDayShow);
showStore.updateShowDaysField({ key: 'day', value: showDays });
});
const updateShowStartDay = (newStartDate) => {
const previousStartDayShow = showStore.currentShow.showDays.firstShow.getDay();
let showDays = showStore.currentShow.showDays.day.filter((item) => item !== previousStartDayShow);
showStore.updateShowDaysField({ key: 'firstShow', value: newStartDate });
const newStartDayShow = newStartDate.getDay();
showDays.push(newStartDayShow);
showStore.updateShowDaysField({ key: 'day', value: showDays });
};
const goBack = () => {
// showFormStore.resetShowDays();
emits("toggle-show-schedule-form");
};
const saveShowSchedule = () => {
showFormStore.saveSchedule();
const saveShowSchedule = async () => {
if (showStore.currentShow.id) {
return await showStore.updateShowDays();
}
emits('trigger-show-creation')
};
const checkBoxEnd = ref(false)
const checkBoxRepetition = ref(false)
watch(checkBoxEnd, (checkBoxEnd) => {
if(checkBoxEnd == false) showFormStore.updateShowDaysField({ key: 'lastShow', value: null })
if(checkBoxEnd == false) showStore.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})
watch(checkBoxRepetition, (newValue) => {
if (!newValue) {
const startDayShow = showStore.currentShow.showDays.firstShow.getDay();
showStore.updateShowDaysField({ key: 'day', value: [startDayShow] });
showStore.updateShowDaysField({ key: 'repeatType', value: 'noRepeat' });
}
})
});
// TODO Create a fixed selected day for repetition extracted from the start date
// Create a local ref var that get's the day number from the startDate, pass it
// to the days component as a fixed date
</script>
<template>
@ -41,18 +67,19 @@ watch(checkBoxRepetition, (checkBoxRepetition) => {
<v-card-title>
<h3>Regole di programmazione</h3>
</v-card-title>
<v-form>
<v-form ref="form" v-model="isFormValid">
<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"
:value="showStore.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 })"
required="true"
v-on:update:modelValue="updateShowStartDay"
/>
</v-col>
@ -63,8 +90,8 @@ watch(checkBoxRepetition, (checkBoxRepetition) => {
v-model="checkBoxEnd"
></v-checkbox>
<v-date-picker
v-model="showFormStore.currentShow.showDays.lastShow"
:min="showFormStore.currentShow.showDays.firstShow"
:v-model="showStore.currentShow.showDays.lastShow"
:min="showStore.currentShow.showDays.firstShow"
label="Data fine"
title="Data fine"
density="compact"
@ -75,11 +102,12 @@ watch(checkBoxRepetition, (checkBoxRepetition) => {
<!-- Start Time and Duration -->
<v-col cols="12" md="6" lg="4">
<ShowStartEndTime
v-model="showFormStore.currentShow.showDays.startTime"
v-model="showStore.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 })"
@update:duration="value => showStore.updateShowDaysField({ key: 'duration', value })"
required="true"
/>
</v-col>
@ -90,7 +118,7 @@ watch(checkBoxRepetition, (checkBoxRepetition) => {
v-model="checkBoxRepetition"
></v-checkbox>
<v-select
v-model="showFormStore.currentShow.showDays.repeatType"
v-model="showStore.currentShow.showDays.repeatType"
:items="showRepetitionData"
label="Ripetizione"
density="compact"
@ -100,10 +128,11 @@ watch(checkBoxRepetition, (checkBoxRepetition) => {
/>
<DaysCheckbox
v-model="showFormStore.currentShow.showDays.day"
v-model="showStore.currentShow.showDays.day"
:disabled="!checkBoxRepetition || (showStore.currentShow.showDays.repeatType === 'noRepeat')"
:fixedDay="showStore.currentShow.showDays.firstShow.getDay()"
@update:modelValue="value => showStore.updateShowDaysField({ key: 'day', value })"
label="Giorni"
:disabled="!checkBoxRepetition"
@update:modelValue="value => showFormStore.updateShowDaysField({ key: 'day', value })"
/>
</v-col>
</v-row>
@ -111,7 +140,7 @@ watch(checkBoxRepetition, (checkBoxRepetition) => {
<v-card-actions>
<v-btn color="accent" @click="goBack">Torna indietro</v-btn>
<v-btn color="accent" @click="saveShowSchedule">Salva</v-btn>
<v-btn color="accent" @click="saveShowSchedule" :disabled="!isFormValid">Salva</v-btn>
</v-card-actions>
</v-form>
</v-card>