```
✨ feat(reservation): Ajoute le panier et sélection de date globale
Ajoute un composant de panier accessible depuis toutes les pages de réservation et un sélecteur de date global.
```
This commit is contained in:
Serreau Jovann
264
assets/tools/FlowReserve.js
Normal file
264
assets/tools/FlowReserve.js
Normal file
@@ -0,0 +1,264 @@
|
||||
|
||||
export class FlowReserve extends HTMLAnchorElement {
|
||||
constructor() {
|
||||
super();
|
||||
this.sidebarId = 'flow-reserve-sidebar';
|
||||
this.storageKey = 'pl_list';
|
||||
this.apiUrl = '/basket/json';
|
||||
this.isOpen = false;
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
this.toggleSidebar();
|
||||
});
|
||||
|
||||
// Listen for updates to the cart from other components
|
||||
window.addEventListener('cart:updated', () => this.updateBadge());
|
||||
|
||||
// Initial badge update
|
||||
this.updateBadge();
|
||||
}
|
||||
|
||||
/**
|
||||
* Updates the notification badge on the icon
|
||||
*/
|
||||
updateBadge() {
|
||||
const list = this.getList();
|
||||
const badge = this.querySelector('[data-count]');
|
||||
if (badge) {
|
||||
badge.innerText = list.length;
|
||||
if (list.length > 0) {
|
||||
badge.classList.remove('hidden');
|
||||
} else {
|
||||
badge.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
getList() {
|
||||
try {
|
||||
return JSON.parse(localStorage.getItem(this.storageKey) || '[]');
|
||||
} catch (e) {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
removeFromList(id) {
|
||||
let list = this.getList();
|
||||
list = list.filter(itemId => itemId.toString() !== id.toString());
|
||||
localStorage.setItem(this.storageKey, JSON.stringify(list));
|
||||
window.dispatchEvent(new CustomEvent('cart:updated'));
|
||||
this.refreshContent(); // Re-fetch and render
|
||||
}
|
||||
|
||||
toggleSidebar() {
|
||||
if (this.isOpen) {
|
||||
this.close();
|
||||
} else {
|
||||
this.open();
|
||||
}
|
||||
}
|
||||
|
||||
open() {
|
||||
this.ensureSidebarExists();
|
||||
const sidebar = document.getElementById(this.sidebarId);
|
||||
const backdrop = sidebar.querySelector('.backdrop');
|
||||
const panel = sidebar.querySelector('.panel');
|
||||
|
||||
sidebar.classList.remove('pointer-events-none');
|
||||
backdrop.classList.remove('opacity-0');
|
||||
panel.classList.remove('translate-x-full');
|
||||
|
||||
this.isOpen = true;
|
||||
this.refreshContent();
|
||||
}
|
||||
|
||||
close() {
|
||||
const sidebar = document.getElementById(this.sidebarId);
|
||||
if (!sidebar) return;
|
||||
|
||||
const backdrop = sidebar.querySelector('.backdrop');
|
||||
const panel = sidebar.querySelector('.panel');
|
||||
|
||||
backdrop.classList.add('opacity-0');
|
||||
panel.classList.add('translate-x-full');
|
||||
|
||||
setTimeout(() => {
|
||||
sidebar.classList.add('pointer-events-none');
|
||||
}, 300); // Match transition duration
|
||||
|
||||
this.isOpen = false;
|
||||
}
|
||||
|
||||
ensureSidebarExists() {
|
||||
if (document.getElementById(this.sidebarId)) return;
|
||||
|
||||
const template = `
|
||||
<div id="${this.sidebarId}" class="fixed inset-0 z-[100] flex justify-end pointer-events-none">
|
||||
<!-- Backdrop -->
|
||||
<div class="backdrop absolute inset-0 bg-slate-900/60 backdrop-blur-sm opacity-0 transition-opacity duration-300"></div>
|
||||
|
||||
<!-- Panel -->
|
||||
<div class="panel w-full max-w-md bg-white shadow-2xl translate-x-full transition-transform duration-300 flex flex-col relative z-10">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="p-6 border-b border-gray-100 flex items-center justify-between bg-white">
|
||||
<div>
|
||||
<h2 class="text-2xl font-black text-slate-900 uppercase italic tracking-tighter">Ma Super <br><span class="text-[#f39e36]">Future Réservation</span></h2>
|
||||
</div>
|
||||
<button id="flow-reserve-close" class="p-2 hover:bg-gray-100 rounded-full transition-colors">
|
||||
<svg class="w-6 h-6 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Content (Loader/List/Empty) -->
|
||||
<div id="flow-reserve-content" class="flex-1 overflow-y-auto p-6 space-y-6 bg-gray-50/50 relative">
|
||||
<!-- Content injected via JS -->
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div id="flow-reserve-footer" class="p-6 border-t border-gray-100 bg-white">
|
||||
<!-- Content injected via JS -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
document.body.insertAdjacentHTML('beforeend', template);
|
||||
|
||||
// Bind events
|
||||
const sidebar = document.getElementById(this.sidebarId);
|
||||
sidebar.querySelector('.backdrop').addEventListener('click', () => this.close());
|
||||
sidebar.querySelector('#flow-reserve-close').addEventListener('click', () => this.close());
|
||||
}
|
||||
async refreshContent() {
|
||||
const container = document.getElementById('flow-reserve-content');
|
||||
const footer = document.getElementById('flow-reserve-footer');
|
||||
|
||||
// Loader
|
||||
container.innerHTML = `
|
||||
<div class="absolute inset-0 flex items-center justify-center">
|
||||
<div class="w-10 h-10 border-4 border-[#f39e36] border-t-transparent rounded-full animate-spin"></div>
|
||||
</div>
|
||||
`;
|
||||
footer.innerHTML = '';
|
||||
|
||||
const ids = this.getList();
|
||||
|
||||
if (ids.length === 0) {
|
||||
this.renderEmpty(container, footer);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(this.apiUrl, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ ids })
|
||||
});
|
||||
|
||||
if (!response.ok) throw new Error('Erreur réseau');
|
||||
|
||||
const data = await response.json();
|
||||
this.renderList(container, footer, data);
|
||||
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
container.innerHTML = `
|
||||
<div class="text-center py-10">
|
||||
<p class="text-red-500 font-bold">Une erreur est survenue lors du chargement de votre panier.</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
renderEmpty(container, footer) {
|
||||
container.innerHTML = `
|
||||
<div class="h-full flex flex-col items-center justify-center text-center opacity-60">
|
||||
<svg class="w-16 h-16 text-slate-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/></svg>
|
||||
<p class="text-lg font-bold text-slate-900 italic">Votre panier est vide</p>
|
||||
<p class="text-sm text-slate-500">Ajoutez du bonheur à votre événement !</p>
|
||||
<a href="/reservation/catalogue" id="flow-empty-catalog-link" class="mt-6 px-6 py-3 bg-[#f39e36] text-white rounded-xl font-bold text-sm uppercase tracking-widest hover:bg-slate-900 transition-colors">
|
||||
Voir le catalogue
|
||||
</a>
|
||||
</div>
|
||||
`;
|
||||
footer.innerHTML = '';
|
||||
container.querySelector('#flow-empty-catalog-link').addEventListener('click', () => this.close());
|
||||
}
|
||||
|
||||
renderList(container, footer, data) {
|
||||
// --- HEADER DATES ---
|
||||
let datesHtml = '';
|
||||
if (data.start_date && data.end_date) {
|
||||
datesHtml = `
|
||||
<div class="bg-blue-50 border border-blue-100 rounded-2xl p-4 mb-4 text-center">
|
||||
<p class="text-[10px] uppercase tracking-widest text-slate-500 font-bold mb-1">Votre période</p>
|
||||
<div class="flex items-center justify-center gap-2 text-sm font-black text-slate-900 uppercase italic">
|
||||
<span>${data.start_date}</span>
|
||||
<svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
|
||||
<span>${data.end_date}</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// --- RENDER PRODUCTS ---
|
||||
const productsHtml = data.products.map(product => `
|
||||
<div class="flex gap-4 bg-white p-3 rounded-2xl shadow-sm border border-gray-100">
|
||||
<div class="w-20 h-20 bg-gray-100 rounded-xl flex-shrink-0 overflow-hidden">
|
||||
<img src="${product.image || '/provider/images/favicon.png'}" class="w-full h-full object-cover" alt="${product.name}">
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col justify-between">
|
||||
<div>
|
||||
<h4 class="font-black text-slate-900 leading-tight uppercase italic text-sm line-clamp-2">${product.name}</h4>
|
||||
<div class="mt-1 flex flex-wrap gap-2 text-[10px] text-slate-500 font-bold uppercase">
|
||||
<span>1J: ${this.formatPrice(product.priceHt1Day)} HT</span>
|
||||
${product.priceHTSupDay ? `<span class="text-slate-300">|</span><span>Sup: ${this.formatPrice(product.priceHTSupDay)} HT</span>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-end mt-2">
|
||||
<span class="text-[#0782bc] font-black text-sm">${this.formatPrice(product.priceTTC1Day || product.priceHt1Day)} <span class="text-[9px] text-slate-400 font-bold">/j</span></span>
|
||||
<button class="text-red-400 hover:text-red-600 p-1" onclick="document.querySelector('[is=flow-reserve]').removeFromList('${product.id}')">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
|
||||
container.innerHTML = `<div class="space-y-3">${datesHtml}${productsHtml}</div>`;
|
||||
|
||||
// --- RENDER FOOTER (TOTALS) ---
|
||||
const total = data.total || {};
|
||||
const hasTva = total.totalTva > 0;
|
||||
|
||||
footer.innerHTML = `
|
||||
<div class="space-y-2 mb-6">
|
||||
<div class="flex justify-between text-xs text-slate-500 font-bold uppercase">
|
||||
<span>Total HT</span>
|
||||
<span>${this.formatPrice(total.totalHT)}</span>
|
||||
</div>
|
||||
${hasTva ? `
|
||||
<div class="flex justify-between text-xs text-slate-500 font-bold uppercase">
|
||||
<span>TVA</span>
|
||||
<span>${this.formatPrice(total.totalTva)}</span>
|
||||
</div>
|
||||
` : ''}
|
||||
<div class="flex justify-between text-lg text-slate-900 font-black uppercase italic border-t border-dashed border-gray-200 pt-2">
|
||||
<span>Total ${hasTva ? 'TTC' : 'HT'}</span>
|
||||
<span class="text-[#f39e36]">${this.formatPrice(total.totalTTC || total.totalHT)}</span>
|
||||
</div>
|
||||
</div>
|
||||
<a href="/reservation/devis" class="block w-full py-4 bg-slate-900 text-white text-center rounded-2xl font-black uppercase italic tracking-widest hover:bg-[#fc0e50] transition-colors shadow-lg">
|
||||
Valider ma demande
|
||||
</a>
|
||||
`;
|
||||
}
|
||||
|
||||
formatPrice(amount) {
|
||||
if (amount === undefined || amount === null) return '-';
|
||||
return new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(amount);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user