studio-variable/nouveau-theatre-de-besancon
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

redesign calendar api for improving loading performance

Browse source
This commit is contained in:
isUnknown 2024-09-11 16:34:58 +02:00
parent 78d542cbac
commit d2b2cea846
5 changed files with 76 additions and 99 deletions
Download patch file Download diff file Expand all files Collapse all files

9
site/config/routes/get-current-season-calendar.php
View file

@ -95,6 +95,13 @@ return [
}
}
return json_encode($calendar);
$jsonCalendar = json_encode($calendar);
$seasonDirPath = __DIR__ . '/../../../content/' . $currentSeason->diruri() . '/data.json';
$dataFile = fopen($seasonDirPath, "w");
fwrite($dataFile, $jsonCalendar);
fclose($dataFile);
return $jsonCalendar;
}
];

150
site/snippets/calendar-strip.php
View file

@ -2,114 +2,90 @@
class="calendar-strip"
@mouseleave="open = false"
x-data="{
monthNumb: dayjs().month(),
weekIndex: (() => {
dayjs.extend(window.dayjs_plugin_weekOfYear);
const date = dayjs();
const firstDayOfMonth = dayjs(date).startOf('month');
calendar: createEmptyCalendar(),
monthNumb: dayjs().month() + 1,
token: '<?= $site->mapadoToken() ?>',
contractId: '<?= $site->mapadoContractId() ?>',
targetSessions: [],
open: false,
today: dayjs().format('DD-MM-YYYY'),
const currentWeek = date.week();
const firstWeekOfMonth = firstDayOfMonth.week();
const weekIndex = currentWeek - firstWeekOfMonth - 1;
get monthName() {
return dayjs().month(this.monthNumb - 1).format('MMMM');
},
console.log(`currentWeek: ${currentWeek}, firstWeekOfMonth: ${firstWeekOfMonth}, weekIndex: ${weekIndex}`);
// Retourner l'index de la semaine
return weekIndex;
})(),
token: '<?= $site->mapadoToken() ?>',
contractId: '<?= $site->mapadoContractId() ?>',
dates: [],
targetSessions: [],
open: false,
today: dayjs().format('DD-MM-YYYY'),
get currentMonth() {
return this.calendar[this.monthNumb]
},
get monthName() {
return dayjs().month(this.monthNumb).format('MMMM');
},
async updateDates() {
get currentWeek() {
const dates = JSON.parse(JSON.stringify(this.dates));
const start = this.weekIndex * 7;
const end = start + 7;
fetch('/<?= page('programme')->children()->first()->uri() ?>/data.json')
.then(res => res.json())
.then(json => {
console.log('Saved calendar : ', json)
this.calendar = json
})
.catch(error => console.log('No saved calendar.'))
const allKeys = Object.keys(dates);
const daysNode = document.querySelector('.calendar-strip__days');
daysNode.classList.toggle('progress');
this.calendar = await getCurrentSeasonCalendar();
console.log('Updated calendar for current season :', this.calendar);
daysNode.classList.toggle('progress');
},
const slicedKeys = allKeys.slice(start, end);
const slicedObject = slicedKeys.reduce((obj, key) => {
obj[key] = dates[key];
return obj;
}, {});
return slicedObject;
},
async updateDates(resetWeek = false) {
const daysNode = document.querySelector('.calendar-strip__days');
daysNode.classList.toggle('progress');
this.dates = getDatesInMonth(this.monthNumb);
this.dates = await getMergedDates(this.monthNumb, this.dates);
console.log('Merged dates', this.dates);
daysNode.classList.toggle('progress');
if (resetWeek) {
this.weekIndex = 0
}
},
handleDayHover() {
if (this.date.sessions.length > 0) {
this.targetSessions = this.date.sessions;
this.open = true;
} else {
setTimeout(() => {
handleDayHover() {
if (!this.date) return
if (this.date.sessions.length > 0) {
this.targetSessions = this.date.sessions;
}, 100);
this.open = false;
}
},
this.open = true;
} else {
setTimeout(() => {
this.targetSessions = this.date.sessions;
}, 100);
this.open = false;
}
},
nextWeek() {
if (this.weekIndex < Math.floor(this.dates.length / 7)) {
this.weekIndex++;
} else {
this.monthNumb++;
this.updateDates();
nextMonth() {
if (this.monthNumb == 12) {
this.monthNumb = 1
} else {
this.monthNumb++
}
},
prevMonth() {
if (this.monthNumb == 1) {
this.monthNumb = 12
} else {
this.monthNumb--
}
}
},
prevWeek() {
if (this.weekIndex > 0) {
this.weekIndex--;
} else {
this.monthNumb--;
this.updateDates();
}
}
}"
}"
x-init="updateDates()"
>
<div class="calendar-strip__selector">
<button class="prev-month" @click="monthNumb--; updateDates()">←</button>
<button class="prev-month" @click="prevMonth()" :disabled="monthNumb === 9">←</button>
<span x-text="monthName"></span>
<button class="next-month" @click="monthNumb++; updateDates()">→</button>
<button class="next-month" @click="nextMonth()" :disabled="monthNumb === 8">→</button>
</div>
<ul class="calendar-strip__days">
<template x-for="(date, index) in currentWeek">
<template x-for="(date, index) in currentMonth">
<li class="calendar-strip__day" :class="targetSessions.length > 0 && open && index == targetSessions[0].day ? 'active' : ''" :style="'animation-delay: ' + index * 0.03 + 's'">
<button
:class="date.full === today ? 'today' : ''"
:disabled="date.sessions.length === 0 ? true : false"
:title="date.sessions.length === 0 ? 'Pas de représentation.' : 'Voir les représentations.'"
:class="!date || date.full !== today ? '' : 'today'"
:disabled="!date || date.sessions.length === 0 ? true : false"
:title="!date || date.sessions.length === 0 ? 'Pas de représentation.' : 'Voir les représentations.'"
@mouseenter="handleDayHover()"
>
<span x-text="date.initial"></span>
<template x-if="date">
<span x-text="date.initial"></span>
</template>
<span x-text="index"></span>
</button>
</li>

1
site/templates/home.php
View file

@ -1,5 +1,4 @@
<?php snippet('header') ?>
<section class="hero">
<div class="hero__text">
<?= $site->heroText()->toBlocks() ?>