81 lines
2.5 KiB
PHP
81 lines
2.5 KiB
PHP
<div
|
|
class="calendar-strip"
|
|
@mouseleave="open = false"
|
|
x-data="{
|
|
monthNumb: dayjs().month(),
|
|
token: '<?= $site->mapadoToken() ?>',
|
|
contractId: '<?= $site->mapadoContractId() ?>',
|
|
dates: [],
|
|
targetSessions: [],
|
|
open: false,
|
|
|
|
get monthName() {
|
|
return dayjs().month(this.monthNumb).format('MMMM');
|
|
},
|
|
|
|
async updateDates() {
|
|
document.body.classList.toggle('progress')
|
|
this.dates = getDatesInMonth(this.monthNumb);
|
|
|
|
this.dates = await getMergedDates(this.monthNumb, this.dates)
|
|
|
|
console.log('Merged dates', this.dates)
|
|
document.body.classList.toggle('progress')
|
|
},
|
|
|
|
handleDayHover() {
|
|
|
|
if (this.date.length > 0) {
|
|
this.targetSessions = this.date;
|
|
this.open = true
|
|
} else {
|
|
setTimeout(() => {
|
|
this.targetSessions = this.date;
|
|
}, 100)
|
|
this.open = false
|
|
}
|
|
}
|
|
}"
|
|
|
|
x-init="updateDates()"
|
|
>
|
|
<div class="calendar-strip__selector">
|
|
<button class="prev-month" @click="monthNumb--; updateDates()">←</button>
|
|
<span x-text="monthName"></span>
|
|
<button class="next-month" @click="monthNumb++; updateDates()">→</button>
|
|
</div>
|
|
<ul class="calendar-strip__days">
|
|
<template x-for="(date, index) in dates">
|
|
<li class="calendar-strip__day" :class="targetSessions.length > 0 && index == targetSessions[0].day ? 'active' : ''">
|
|
<button
|
|
x-text="index"
|
|
:disabled="date.length === 0 ? true : false"
|
|
:title="date.length === 0 ? 'Pas de représentation.' : 'Voir les représentations.'"
|
|
@mouseenter="handleDayHover()"
|
|
></button>
|
|
</li>
|
|
</template>
|
|
</ul>
|
|
<button class="calendar-strip__calendar-btn">calendrier</button>
|
|
<div class="calendar-strip__date" :class="open ? 'open' : ''">
|
|
<ul class="calendar-strip__sessions">
|
|
<template x-for="session in targetSessions">
|
|
<li class="calendar-strip__session">
|
|
<div x-html="`${session.day} ${monthName}<br><br>${session.time}`"></div>
|
|
<div>
|
|
<p><strong x-html="`<strong>${session.title}</strong>`"></strong></p>
|
|
<p x-html="session.authors"></p>
|
|
</div>
|
|
<div x-text="`${session.duration}`"></div>
|
|
<div x-text="`${session.place}`"></div>
|
|
<template x-if="session.ticketingUrl">
|
|
<div>
|
|
<a :href="session.ticketingUrl" target="_blank" title="Accéder à la billetterie">Billetterie</a>
|
|
</div>
|
|
</template>
|
|
</li>
|
|
</template>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|