141 lines
5.1 KiB
PHP
141 lines
5.1 KiB
PHP
<section
|
|
class="calendar-strip"
|
|
@mouseleave="open = false"
|
|
x-data="{
|
|
calendar: createEmptyCalendar(),
|
|
monthNumb: dayjs().month() + 1,
|
|
token: '<?= $site->mapadoToken() ?>',
|
|
contractId: '<?= $site->mapadoContractId() ?>',
|
|
targetSessions: [],
|
|
open: false,
|
|
today: dayjs().format('DD-MM-YYYY'),
|
|
|
|
get monthName() {
|
|
return dayjs().month(this.monthNumb - 1).format('MMMM');
|
|
},
|
|
|
|
get currentMonth() {
|
|
return this.calendar[this.monthNumb]
|
|
},
|
|
|
|
async updateDates() {
|
|
|
|
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 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');
|
|
},
|
|
|
|
handleDayHover() {
|
|
if (!this.date) return
|
|
if (this.date.sessions.length > 0) {
|
|
this.targetSessions = this.date.sessions;
|
|
this.open = true;
|
|
} else {
|
|
setTimeout(() => {
|
|
this.targetSessions = this.date.sessions;
|
|
}, 100);
|
|
this.open = false;
|
|
}
|
|
},
|
|
|
|
nextMonth() {
|
|
if (this.monthNumb == 12) {
|
|
this.monthNumb = 1
|
|
} else {
|
|
this.monthNumb++
|
|
}
|
|
},
|
|
prevMonth() {
|
|
if (this.monthNumb == 1) {
|
|
this.monthNumb = 12
|
|
} else {
|
|
this.monthNumb--
|
|
}
|
|
}
|
|
}"
|
|
|
|
|
|
x-init="updateDates()"
|
|
>
|
|
<div class="calendar-strip__selector">
|
|
<button class="prev-month" @click="prevMonth()" :disabled="monthNumb === 9">←</button>
|
|
<span x-text="monthName"></span>
|
|
<button class="next-month" @click="nextMonth()" :disabled="monthNumb === 8">→</button>
|
|
</div>
|
|
<ul class="calendar-strip__days">
|
|
<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 || 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()"
|
|
>
|
|
<template x-if="date">
|
|
<span x-text="date.initial"></span>
|
|
</template>
|
|
<span x-text="index"></span>
|
|
</button>
|
|
</li>
|
|
</template>
|
|
</ul>
|
|
<a href="<?= page('programme')->url() ?>" class="calendar-strip__calendar-btn">calendrier</a>
|
|
<div class="calendar-strip__date" :class="open ? 'open' : ''">
|
|
<ul class="sessions">
|
|
<template x-for="session in targetSessions">
|
|
<li
|
|
x-data="{
|
|
stockThreshold: (session.totalStock / 100) * 25
|
|
}"
|
|
:style="'--color: ' + session.color"
|
|
class="session"
|
|
>
|
|
<a class="session__event-link" :href="session.eventUrl" title="En savoir plus"></a>
|
|
<div class="session__info session__info--slot">
|
|
<p x-html="`${session.day} ${monthName}`"></p>
|
|
<p x-html="session.time"></p>
|
|
</div>
|
|
<div class="session__info session__info--title">
|
|
<p><strong x-html="`<strong>${session.title}</strong>`"></strong></p>
|
|
<p x-html="session.authors"></p>
|
|
</div>
|
|
<div x-text="session.duration ? session.duration : ''" class="session__info session__info--duration"></div>
|
|
<div x-text="`${session.place}`" class="session__info session__info--place"></div>
|
|
<template x-if="!session.ticketingUrl">
|
|
<div class="session__info session__info--book">
|
|
<a class="ticket-link" target="_blank" title="Entrée libre" disabled><?php snippet('ticket') ?> Entrée libre</a>
|
|
</div>
|
|
</template>
|
|
<template x-if="session.bookableStock === 0">
|
|
<div class="session__info session__info--book">
|
|
<a class="ticket-link" title="Plus de places disponibles" disabled><?php snippet('ticket') ?> Complet</a>
|
|
</div>
|
|
</template>
|
|
<template x-if="session.bookableStock > stockThreshold">
|
|
<div class="session__info">
|
|
<a class="ticket-link" title="Plateforme de réservation" :href="session.ticketingUrl" target="_blank"><?php snippet('ticket') ?> Billetterie</a>
|
|
</div>
|
|
</template>
|
|
<template x-if="session.bookableStock !== 0 && session.bookableStock < stockThreshold">
|
|
<div class="session__info">
|
|
<a class="ticket-link" title="Plateforme de réservation" :href="session.ticketingUrl" target="_blank"><?php snippet('ticket') ?> Plus que quelques places !</a>
|
|
</div>
|
|
</template>
|
|
</li>
|
|
</template>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
|