Congegni/sintonia_webapp
7
0
Fork 0
Code Issues 27 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>

40
resources/js/composables/content/models/show/ShowRepetition.ts
View file

@ -1,33 +1,31 @@
enum ShowRepeatEnum {
Weekly = 0,
Biweekly = 1,
Triweekly = 4,
FourWeeks = 5,
Monthly = 2,
// TODO i18n strings
export enum ShowRepeatEnum {
weekly = 'Weekly',
biweekly = 'Biweekly',
triweekly = 'Triweekly',
fourWeeks = 'Four weeks',
monthly = 'Monthly',
noRepeat = 'No repeat',
}
export interface ShowRepetitionType {
type: ShowRepeatEnum;
repeatName: string
}
export const showRepetitionData: ShowRepetitionType[] = [
{ type: ShowRepeatEnum.Weekly, repeatName: "Weekly" },
{ type: ShowRepeatEnum.Biweekly, repeatName: "Biweekly" },
{ type: ShowRepeatEnum.Triweekly, repeatName: "Triweekly" },
{ type: ShowRepeatEnum.FourWeeks, repeatName: "Four Weeks" },
{ type: ShowRepeatEnum.Monthly, repeatName: "Monthly" },
];
export const showRepetitionData: ShowRepetitionType[] = Object.entries(ShowRepeatEnum).map(([key, value]) => ({
type: key as ShowRepeatEnum,
repeatName: value,
}));
enum WeekDaysEnum {
Monday = 0,
Tuesday = 1,
Wednesday = 2,
Thursday = 3,
Friday = 4,
Saturday = 5,
Sunday = 6,
Monday = 1,
Tuesday = 2,
Wednesday = 3,
Thursday = 4,
Friday = 5,
Saturday = 6,
Sunday = 0,
}
export interface WeekDays {

10
resources/js/composables/content/models/show/show.ts
View file

@ -1,6 +1,6 @@
import type {ShowInstance} from "@models/show/showInstance.ts";
import type {ShowDays} from "@models/show/showDays";
import type {ShowDjs} from "@models/show/showDjs";
import type {ShowDJs} from "@models/show/showDJs.ts";
import axios, {type AxiosResponse} from "axios";
import {cleanOptions} from "@/helpers/AxiosHelper.ts";
@ -18,13 +18,13 @@ export interface Show {
liveStreamPass?: string;
imagePath?: string | File;
hasAutoplaylist: boolean;
autoplaylist_id?: number;
autoplaylistId?: number;
autoplaylistRepeat: boolean;
// Relationships
block?: any;
showDays?: ShowDays;
showDjs?: ShowDjs[];
showDjs?: ShowDJs[];
showInstances?: ShowInstance[];
playlist?: any;
}
@ -32,7 +32,7 @@ export interface Show {
export const baseShow = (): Show => {
return {
id: null,
name: '',
name: 'Esempio',
url: '',
genre: '',
description: '',
@ -42,7 +42,7 @@ export const baseShow = (): Show => {
liveStreamPass: '',
imagePath: '',
hasAutoplaylist: false,
autoplaylist_id: 0,
autoplaylistId: null,
autoplaylistRepeat: false,
showDjs: null,
showDays: null,

6
resources/js/composables/content/models/show/showDjs.ts → resources/js/composables/content/models/show/showDJs.ts
View file

@ -1,6 +1,6 @@
import { VTextField } from "vuetify/components";
export interface ShowDjs {
export interface ShowDJs {
id?: number;
subjsId: number;
showId: number;
@ -11,7 +11,7 @@ export interface User {
login: string;
}
export function showDjsForm(item: ShowDjs) {
export function showDjsForm(item: ShowDJs) {
const visibleFields = {
subjsId: 'Presentatore',
showId: 'Programma'
@ -22,7 +22,7 @@ export function showDjsForm(item: ShowDjs) {
Object.keys(visibleFields).forEach((key) => {
fields[key] = {
label: visibleFields[key],
value: item[key as keyof ShowDjs],
value: item[key as keyof ShowDJs],
component: VTextField,
disabled: false
};

14
resources/js/composables/content/models/show/showDays.ts
View file

@ -1,6 +1,8 @@
import axios, {type AxiosResponse} from "axios";
import {cleanOptions} from "@/helpers/AxiosHelper.ts";
import {cleanOptions, snakeToCamel} from "@/helpers/AxiosHelper.ts";
import type {ShowRepetitionType} from "@models/show/ShowRepetition.ts";
//TODO RepeatType should use the interface ShowRepetitionType
export interface ShowDays {
id?: number;
firstShow: Date;
@ -9,7 +11,7 @@ export interface ShowDays {
timezone: string;
duration: string;
day: number[];
repeatType: number;
repeatType: string;
nextPopDate?: string;
showId?: number;
record?: number;
@ -22,8 +24,8 @@ export const baseShowDays = ():ShowDays => {
startTime: '08:00',
timezone: '',
duration: '01:00',
day: [0],
repeatType: 0,
day: [],
repeatType: 'noRepeat',
nextPopDate: '',
showId: 0,
record: 0
@ -31,14 +33,14 @@ export const baseShowDays = ():ShowDays => {
}
export const getShowDays = async (options: {
showId?: number | null;
show_id?: number | null;
flattenShowDays?: boolean;
}): Promise<ShowDays> => {
const filteredParams = cleanOptions(options);
return await axios.get(`/showDays`, {params: filteredParams})
.then((response: AxiosResponse) => {
return response.data
return snakeToCamel(response.data);
}).catch((error: Error) => {
console.log("Error: " + error);
})

28
resources/js/helpers/AxiosHelper.ts
View file

@ -2,4 +2,30 @@ export function cleanOptions(options: Object): Object {
return Object.fromEntries(
Object.entries(options).filter(([_, value]) => value !== undefined && value !== null)
);
}
}
export function camelToSnake(obj) {
if (Array.isArray(obj)) {
return obj.map(camelToSnake);
} else if (obj !== null && typeof obj === 'object') {
return Object.keys(obj).reduce((acc, key) => {
const snakeKey = key.replace(/([A-Z])/g, '_$1').toLowerCase();
acc[snakeKey] = camelToSnake(obj[key]);
return acc;
}, {});
}
return obj;
}
export function snakeToCamel(obj) {
if (Array.isArray(obj)) {
return obj.map(snakeToCamel);
} else if (obj !== null && typeof obj === 'object') {
return Object.keys(obj).reduce((acc, key) => {
const camelKey = key.replace(/_([a-z])/g, (_, char) => char.toUpperCase());
acc[camelKey] = snakeToCamel(obj[key]);
return acc;
}, {});
}
return obj;
}

22
resources/js/helpers/DateFormatter.ts
View file

@ -9,5 +9,23 @@ export function extractTime(dateTimeString: string, extractTime: boolean = false
const minutes = String(date.getMinutes()).padStart(2, '0');
return `${hours}:${minutes}`;
}
return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
};
return date.getFullYear() + '-' + String(date.getMonth() + 1).padStart(2, '0') + '-' + String(date.getDate()).padStart(2, '0');
};
export function getTimeDiff(startTime: Date, endTime: Date) {
const diffInMilliseconds = Math.abs(startTime.getTime() - endTime.getTime());
const hours = Math.floor((diffInMilliseconds % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((diffInMilliseconds % (1000 * 60 * 60)) / (1000 * 60));
const formattedHours = String(hours).padStart(2, '0');
const formattedMinutes = String(minutes).padStart(2, '0');
return `${formattedHours}:${formattedMinutes}`;
}
export function getHoursMinutesFromString(timeString: string): Date {
const [ h, m ] = timeString.split(":");
const ms = new Date().setHours(h,m);
return new Date(ms)
}

54
resources/js/stores/show.store.ts
View file

@ -1,6 +1,9 @@
import { defineStore } from 'pinia'
import { type Show } from '@models/show/show'
import {defineStore} from 'pinia'
import {type Show} from '@models/show/show'
import type {ShowDays} from "@models/show/showDays";
import axios, {type AxiosResponse} from "axios";
import {camelToSnake} from "@/helpers/AxiosHelper.ts";
import {extractTime} from "@/helpers/DateFormatter.ts";
export const useShowStore = defineStore('show', {
state: () => ({
@ -9,23 +12,46 @@ export const useShowStore = defineStore('show', {
}),
actions: {
async loadShow(showData: Show) {
this.currentShow = { ...showData }
this.currentShow = {...showData}
},
updateField(payload: { key: string; value: any }) {
this.currentShow[payload.key] = payload.value
},
async saveShow() {
// Implement API call to save this.currentShow
},
async saveSchedule() {
// Implement schedule saving logic
},
resetShowDays() {
this.currentShow.showDays = { ...this.baseShowDays };
},
updateShowDaysField(payload: { key: string; value: any }) {
this.currentShow.showDays[payload.key] = payload.value;
}
},
async createShow() {
let showData = {...this.currentShow};
showData.showDays.firstShow = extractTime(showData.showDays.firstShow);
if (showData.showDays.lastShow) {
showData.showDays.lastShow = extractTime(showData.showDays.lastShow);
}
showData = camelToSnake(showData);
return await axios.post(`/show`, showData)
.then((response: AxiosResponse) => {
return response.data
}).catch((error: Error) => {
console.log("Error: " + error);
})
},
async updateShow() {
return await axios.post(`/show`, this.currentShow)
.then((response: AxiosResponse) => {
return response.data
}).catch((error: Error) => {
console.log("Error: " + error.message);
})
},
async updateShowDays() {
return await axios.post(`/showDays`, this.currentShow.showDays)
.then((response: AxiosResponse) => {
return response.data
}).catch((error: Error) => {
console.log("Error: " + error);
})
},
resetShowDays() {
this.currentShow.showDays = {...this.baseShowDays};
},
}
})

5
resources/js/stores/showInstance.store.ts
View file

@ -18,7 +18,10 @@ export const useShowInstanceStore = defineStore('showInstance', {
this.currentShowInstance = baseShowInstance()
},
async saveShowInstance() {
// Implement API call to save this.currentShowInstance
},
async updateShowInstance() {
},
}
})