✨ feat(templates-points-controle): Ajoute la gestion et l'application de modèles de points de contrôle aux produits.
This commit is contained in:
@@ -1,4 +1,3 @@
|
||||
|
||||
export class FlowReserve extends HTMLAnchorElement {
|
||||
constructor() {
|
||||
super();
|
||||
@@ -165,55 +164,56 @@ export class FlowReserve extends HTMLAnchorElement {
|
||||
}
|
||||
}
|
||||
|
||||
ensureSidebarExists() {
|
||||
if (document.getElementById(this.sidebarId)) return;
|
||||
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>
|
||||
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">
|
||||
<!-- 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>
|
||||
<!-- 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 (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>
|
||||
|
||||
<!-- 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);
|
||||
</div>
|
||||
`;
|
||||
document.body.insertAdjacentHTML('beforeend', template);
|
||||
|
||||
// Bind events
|
||||
const sidebar = document.getElementById(this.sidebarId);
|
||||
// Bind events
|
||||
const sidebar = document.getElementById(this.sidebarId);
|
||||
|
||||
const closeHandler = (e) => {
|
||||
if (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}
|
||||
this.close();
|
||||
};
|
||||
const closeHandler = (e) => {
|
||||
if (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}
|
||||
this.close();
|
||||
};
|
||||
|
||||
sidebar.querySelector('.backdrop').addEventListener('click', closeHandler);
|
||||
sidebar.querySelector('#flow-reserve-close').addEventListener('click', closeHandler);
|
||||
}
|
||||
|
||||
sidebar.querySelector('.backdrop').addEventListener('click', closeHandler);
|
||||
sidebar.querySelector('#flow-reserve-close').addEventListener('click', closeHandler);
|
||||
}
|
||||
async refreshContent() {
|
||||
const container = document.getElementById('flow-reserve-content');
|
||||
const footer = document.getElementById('flow-reserve-footer');
|
||||
@@ -284,7 +284,6 @@ export class FlowReserve extends HTMLAnchorElement {
|
||||
if (currentList.length !== initialLength) {
|
||||
sessionStorage.setItem(this.storageKey, JSON.stringify(currentList));
|
||||
window.dispatchEvent(new CustomEvent('cart:updated'));
|
||||
// We don't recurse here to avoid infinite loops, but the UI will update next time or we could just use the returned 'products' which already excludes them.
|
||||
console.warn('Certains produits ont été retirés car ils n\'existent plus:', data.unavailable_products_ids);
|
||||
}
|
||||
}
|
||||
@@ -475,4 +474,4 @@ export class FlowReserve extends HTMLAnchorElement {
|
||||
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