Mobile Produktdetail per DOM-Klon befüllen

This commit is contained in:
gitea_admin committed 2026-09-06 17:41:14 +02:00
1 parent 2e78162e93
commit 2ee52b3672
1 file changed
+2 -2
+2 -2
View File
@@ -785,7 +785,7 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
echo " let lagerMobileDetailHost = null;";
echo " let lagerMobileDetailOpen = false;";
echo <<<'JS'
const renderLagerMobileDetail = () => { const sourceDrawer = contentRoot.querySelector('[data-lager-drawer]'); if (!sourceDrawer) { return ''; } return `<div class="sg-lager-mobile-detail-host" data-lager-mobile-detail-host="true"><div class="sg-navigation-card-layout sg-mobile-detail-back-card"><div class="sg-navigation-card-block"><article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Navigation Detailansicht zurück oben"><div class="sg-card-segment sg-card-segment--body" data-component-part="card-body" data-pattern-part="navigation-card-segment"><div class="sg-navigation-card-center"><button class="sg-interaction-element sg-hyperlink" type="button" data-lager-detail-back>zurück</button></div></div></article></div></div>${sourceDrawer.outerHTML.replace('data-lager-drawer="true"', 'data-lager-drawer="true" data-lager-mobile-drawer="true"')}</div>`; };
const renderLagerMobileDetail = () => '<div class="sg-lager-mobile-detail-host" data-lager-mobile-detail-host="true"><div class="sg-navigation-card-layout sg-mobile-detail-back-card"><div class="sg-navigation-card-block"><article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Navigation Detailansicht zurück oben"><div class="sg-card-segment sg-card-segment--body" data-component-part="card-body" data-pattern-part="navigation-card-segment"><div class="sg-navigation-card-center"><button class="sg-interaction-element sg-hyperlink" type="button" data-lager-detail-back>zurück</button></div></div></article></div></div></div>';
JS;
echo " const restoreLagerMobileDetail = () => {";
echo " if (lagerMobileDetailHost && lagerMobileDetailHost.parentNode) { lagerMobileDetailHost.parentNode.removeChild(lagerMobileDetailHost); }";
@@ -812,7 +812,7 @@ JS;
echo " });";
echo " contentRoot.addEventListener('click', (event) => { const trigger = event.target.closest('[data-lager-drawer-open]'); if (!trigger || trigger.dataset.lagerDrawerType !== 'Produkt') { return; } const header = getDrawer()?.querySelector('[data-lager-drawer-warning-header]'); const title = getDrawer()?.querySelector('[data-lager-drawer-warning-title]'); if (!header || !title) { return; } const forecastWarning = trigger.dataset.lagerDrawerForecastWarning === 'true'; const mhdWarning = trigger.dataset.lagerDrawerForecastMhdWarning === 'true'; title.textContent = getLagerWarningTitle(trigger); header.classList.toggle('sg-card-segment--darkgreen', !forecastWarning && !mhdWarning); header.classList.toggle('sg-card-segment--signal-red', forecastWarning); header.classList.toggle('sg-card-segment--signal-yellow', mhdWarning); });";
echo " contentRoot.addEventListener('click', (event) => { const trigger = event.target.closest('[data-lager-drawer-open]'); if (!trigger || trigger.dataset.lagerDrawerType !== 'Produkt') { return; } setLagerEditMode(false); const drawer = getDrawer(); const currentQty = drawer?.querySelector('[data-lager-drawer-current-qty]'); const qtyIn = drawer?.querySelector('[data-lager-drawer-qty-in]'); const lotNumber = drawer?.querySelector('[data-lager-lot-number]'); if (currentQty) { currentQty.textContent = trigger.dataset.lagerDrawerCurrentQty || '0'; } if (qtyIn) { qtyIn.textContent = trigger.dataset.lagerDrawerQtyIn || '0'; } if (lotNumber) { lotNumber.value = trigger.dataset.lagerDrawerLotNumber || ''; } const productId = trigger.closest('[data-lager-row]')?.dataset.lagerId || ''; drawer?.querySelectorAll('[data-lager-historical-product]').forEach((product) => { product.hidden = product.dataset.lagerHistoricalProduct !== productId; }); });";
echo " contentRoot.addEventListener('click', (event) => { const trigger = event.target.closest('[data-lager-drawer-open]'); if (trigger && window.matchMedia('(max-width: 767px)').matches) { const host = document.createElement('div'); host.innerHTML = renderLagerMobileDetail(); lagerMobileDetailHost = host.firstElementChild; const mobileDrawer = lagerMobileDetailHost?.querySelector('[data-lager-mobile-drawer]'); if (lagerMobileDetailHost && mobileDrawer) { contentRoot.appendChild(lagerMobileDetailHost); mobileDrawer.dataset.open = 'true'; mobileDrawer.setAttribute('aria-hidden', 'false'); lagerMobileDetailOpen = true; document.body.classList.add('sg-lager-mobile-detail-open'); } return; } if (event.target.closest('[data-lager-detail-back]') || (event.target.closest('[data-lager-drawer-close]') && lagerMobileDetailOpen)) { restoreLagerMobileDetail(); } });";
echo " contentRoot.addEventListener('click', (event) => { const trigger = event.target.closest('[data-lager-drawer-open]'); if (trigger && window.matchMedia('(max-width: 767px)').matches) { const sourceDrawer = contentRoot.querySelector('[data-lager-drawer]:not([data-lager-mobile-drawer])'); const host = document.createElement('div'); host.innerHTML = renderLagerMobileDetail(); lagerMobileDetailHost = host.firstElementChild; const mobileDrawer = sourceDrawer?.cloneNode(true); if (lagerMobileDetailHost && mobileDrawer) { mobileDrawer.dataset.lagerMobileDrawer = 'true'; mobileDrawer.dataset.open = 'true'; mobileDrawer.setAttribute('aria-hidden', 'false'); lagerMobileDetailHost.appendChild(mobileDrawer); contentRoot.appendChild(lagerMobileDetailHost); lagerMobileDetailOpen = true; document.body.classList.add('sg-lager-mobile-detail-open'); } return; } if (event.target.closest('[data-lager-detail-back]') || (event.target.closest('[data-lager-drawer-close]') && lagerMobileDetailOpen)) { restoreLagerMobileDetail(); } });";
echo " const postLagerChange = async (payload) => { const response = await fetch('/api/lager-charge.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ ...payload, csrfToken: contentRoot.querySelector('[data-lager-csrf-token]')?.dataset.lagerCsrfToken || '' }) }); const result = await response.json(); if (!response.ok || result.ok !== true) { throw new Error(result.error || 'Speichern fehlgeschlagen'); } return result; };";
echo " contentRoot.addEventListener('click', (event) => { const editButton = event.target.closest('[data-lager-edit-open]'); if (editButton) { const drawer = getDrawer(); const editForm = drawer?.querySelector('[data-lager-edit-form]'); if (editForm) { editForm.hidden = false; } return; } const closeButton = event.target.closest('[data-lager-edit-close]'); if (closeButton) { const drawer = getDrawer(); const editForm = drawer?.querySelector('[data-lager-edit-form]'); if (editForm) { editForm.hidden = true; } } });";
echo " const setLagerEditMode = (editing) => { const drawer = getDrawer(); const readView = drawer?.querySelector('[data-lager-read-view]'); const editForm = drawer?.querySelector('[data-lager-edit-form]'); if (readView) { readView.hidden = editing; } if (editForm) { editForm.hidden = !editing; } };";