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:
Serreau Jovann
2026-02-09 07:57:43 +01:00
parent 38f8762efe
commit 81c4fb0df9
6 changed files with 223 additions and 42 deletions

View File

@@ -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);
}
}
}