do not animate ticket if stock is empty

This commit is contained in:
isUnknown 2024-08-28 10:49:48 +02:00
parent ccd35c2b92
commit 303ccf5bce
4 changed files with 17 additions and 8 deletions

View file

@ -36,13 +36,13 @@
display: inline-flex; display: inline-flex;
} }
a:hover .ticket svg, a:not([disabled]):hover .ticket svg,
.ticket:hover svg { .ticket:hover svg {
animation: vibrate 0.5s forwards; animation: vibrate 0.5s forwards;
} }
.ticket:hover svg path:not(.dot), .ticket:hover svg path:not(.dot),
a:hover .ticket svg path:not(.dot) { a:not([disabled]):hover .ticket svg path:not(.dot) {
fill: var(--color-salmon); fill: var(--color-salmon);
stroke: var(--color-salmon); stroke: var(--color-salmon);
} }
@ -52,7 +52,7 @@ a.to-blank:hover .ticket svg path:not(.dot) {
} }
.ticket:hover svg path.dot, .ticket:hover svg path.dot,
a:hover .ticket svg path.dot { a:not([disabled]):hover .ticket svg path.dot {
fill: #fff; fill: #fff;
} }
a.to-blank:hover .ticket svg path.dot { a.to-blank:hover .ticket svg path.dot {

View file

@ -24,3 +24,7 @@ picture svg {
transition: var(--transition-image-opacity); transition: var(--transition-image-opacity);
z-index: 0; z-index: 0;
} }
a[disabled] {
cursor: not-allowed;
}

View file

@ -157,7 +157,8 @@ function saveMapadoEvent($mapadoEvent, $page) {
$dataToSave = [ $dataToSave = [
"mapadoSlug" => $mapadoEvent->slug, "mapadoSlug" => $mapadoEvent->slug,
"remoteDuration" => $duration, "remoteDuration" => $duration,
"remoteSessions" => $sessionsToSave "remoteSessions" => $sessionsToSave,
"eventDateId" => $eventDateId
]; ];
$page->update($dataToSave); $page->update($dataToSave);

View file

@ -38,7 +38,7 @@
<p><?= $formattedDate ?></p> <p><?= $formattedDate ?></p>
<p><?= $session->time() ?></p> <p><?= $session->time() ?></p>
<p><?= $page->place() ?></p> <p><?= $page->place() ?></p>
<p>test</p> <a class="ticket-link" title="Entrée libre"><?php snippet('ticket') ?> Entrée libre</a>
</div> </div>
<?php endforeach ?> <?php endforeach ?>
</div> </div>
@ -52,9 +52,13 @@
x-data="{ x-data="{
stockThreshold: 15, stockThreshold: 15,
sessions: [], sessions: [],
slug: null,
eventDateId: null,
async fetchSessions() { async fetchSessions() {
const event = await updateMapadoEvent('<?= $page->uri() ?>'); const event = await updateMapadoEvent('<?= $page->uri() ?>');
this.sessions = event.remoteSessions this.sessions = event.remoteSessions
this.slug = event.mapadoSlug
this.eventDateId = event.eventDateId
}, },
}" }"
x-init=" x-init="
@ -69,13 +73,13 @@
<p x-text="session.time"></p> <p x-text="session.time"></p>
<p><?= $page->place() ?></p> <p><?= $page->place() ?></p>
<template x-if="session.bookableStock === 0"> <template x-if="session.bookableStock === 0">
<a class="ticket-link" title="Plus de places disponibles"><?php snippet('ticket') ?> Complet</a> <a class="ticket-link" title="Plus de places disponibles" disabled><?php snippet('ticket') ?> Complet</a>
</template> </template>
<template x-if="session.bookableStock > stockThreshold"> <template x-if="session.bookableStock > stockThreshold">
<a class="ticket-link" title="Plus de places disponibles"><?php snippet('ticket') ?> Billetterie</a> <a class="ticket-link" title="Plateforme de réservation" :href="'https://cdn-besancon.mapado.com/event/' + slug + '?eventDate=' + eventDateId" target="_blank"><?php snippet('ticket') ?> Billetterie</a>
</template> </template>
<template x-if="session.bookableStock < stockThreshold"> <template x-if="session.bookableStock < stockThreshold">
<a class="ticket-link" title="Plus de places disponibles"><?php snippet('ticket') ?> Plus que quelques places !</a> <a class="ticket-link" title="Plateforme de réservation" :href="'https://cdn-besancon.mapado.com/event/' + slug + '?eventDate=' + eventDateId" target="_blank"><?php snippet('ticket') ?> Plus que quelques places !</a>
</template> </template>
</div> </div>
</template> </template>