diff --git a/modules/shared/auth/ui/home.php b/modules/shared/auth/ui/home.php index e2d9f1c..53f2729 100644 --- a/modules/shared/auth/ui/home.php +++ b/modules/shared/auth/ui/home.php @@ -643,6 +643,37 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best echo " const contentRoot = document.querySelector('[data-left-navigation-content-body]');"; echo " if (!contentRoot || !contentRoot.querySelector('[data-lager-content]')) { return; }"; echo " lagerBindingsInstalled = true;"; + echo " let lagerMobileDetailHost = null;"; + echo " let lagerMobileDetailOpen = false;"; + echo " const escapeLagerHtml = (value) => String(value ?? '').replace(/[&<>\"']/g, (character) => ({ '&': '&', '<': '<', '>': '>', '\"': '"', \"'\": ''' }[character] || character));"; + echo " const renderLagerMobileDetail = (trigger) => {"; + echo " const type = trigger.dataset.lagerDrawerType || 'Lager';"; + echo " const name = trigger.dataset.lagerDrawerName || '';"; + echo " const value = trigger.dataset.lagerDrawerValue || '';"; + echo " const isProduct = type === 'Produkt';"; + echo " const forecast = trigger.dataset.lagerDrawerForecast || 'Keine Prognose';"; + echo " const warning = trigger.dataset.lagerDrawerForecastWarning === 'true' || trigger.dataset.lagerDrawerForecastMhdWarning === 'true';"; + echo " const warningText = warning ? forecast : 'Keine akute Warnung.';"; + echo " const lotNumber = trigger.dataset.lagerDrawerLotNumber || 'Nicht hinterlegt';"; + echo " const supplierLotNumber = trigger.dataset.lagerDrawerSupplierLotNumber || 'Nicht hinterlegt';"; + echo " const expiryDate = trigger.dataset.lagerDrawerExpiryDate || 'Nicht hinterlegt';"; + echo " const virtualLot = trigger.dataset.lagerDrawerVirtualLotNumber || '';"; + echo " return ['
', '
', '
', '
', '
', '
', '', '
', '
', '
' + escapeLagerHtml(type) + ': ' + escapeLagerHtml(name) + '
', '

Name: ' + escapeLagerHtml(name) + '

' + (isProduct ? 'Anzahl im Lager:' : 'Artikelnummer:') + ' ' + escapeLagerHtml(value) + '

' + (isProduct ? '

Warnungen: ' + escapeLagerHtml(warningText) + '

Naurua-Chargennummer: ' + escapeLagerHtml(lotNumber) + '
Hersteller-Chargennummer: ' + escapeLagerHtml(supplierLotNumber) + '
MHD: ' + escapeLagerHtml(expiryDate) + '

Virtuelle Charge: ' + escapeLagerHtml(virtualLot || 'Keine virtuelle Fehlbestandscharge vorhanden.') + '

' : '') + '
'].join('');"; + echo " };"; + echo " const restoreLagerMobileDetail = () => {"; + echo " if (lagerMobileDetailHost && lagerMobileDetailHost.parentNode) { lagerMobileDetailHost.parentNode.removeChild(lagerMobileDetailHost); }"; + echo " lagerMobileDetailHost = null; lagerMobileDetailOpen = false; document.body.classList.remove('sg-lager-mobile-detail-open');"; + echo " };"; + echo " const openLagerMobileDetail = (trigger) => {"; + echo " restoreLagerMobileDetail(); const host = document.createElement('div'); host.innerHTML = renderLagerMobileDetail(trigger); lagerMobileDetailHost = host.firstElementChild;"; + echo " if (lagerMobileDetailHost) { document.body.appendChild(lagerMobileDetailHost); document.body.classList.add('sg-lager-mobile-detail-open'); }"; + echo " lagerMobileDetailOpen = true; window.history.pushState({ ...(window.history.state || {}), lagerView: 'detail' }, '', window.location.href);"; + echo " };"; + echo " const closeLagerMobileDetail = () => {"; + echo " if (!lagerMobileDetailOpen) { return; }"; + echo " if (window.history.state && window.history.state.lagerView === 'detail') { window.history.back(); return; }"; + echo " restoreLagerMobileDetail();"; + echo " };"; echo " const getDrawer = () => contentRoot.querySelector('[data-lager-drawer]');"; echo " const setDrawerState = (open) => {"; echo " const drawer = getDrawer(); const backdrop = contentRoot.querySelector('[data-lager-drawer-backdrop]');"; @@ -652,10 +683,12 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best echo " const closeDrawer = () => { setDrawerState(false); contentRoot.querySelectorAll('[data-lager-drawer-open]').forEach((trigger) => trigger.setAttribute('aria-expanded', 'false')); };"; echo " contentRoot.addEventListener('click', (event) => {"; echo " const trigger = event.target.closest('[data-lager-drawer-open]');"; - echo " if (trigger) { event.preventDefault(); const drawer = getDrawer(); if (!drawer) { return; } const type = trigger.dataset.lagerDrawerType || 'Lager'; const name = trigger.dataset.lagerDrawerName || ''; const value = trigger.dataset.lagerDrawerValue || ''; drawer.querySelector('[data-lager-drawer-title]').textContent = type + ': ' + name; drawer.querySelector('[data-lager-drawer-name-value]').textContent = name; const valueRow = drawer.querySelector('[data-lager-drawer-value-row]'); if (valueRow) { valueRow.hidden = false; } drawer.querySelector('[data-lager-drawer-value-label]').textContent = type === 'Produkt' ? 'Anzahl im Lager:' : 'Artikelnummer:'; drawer.querySelector('[data-lager-drawer-value-value]').textContent = value; drawer.querySelectorAll('[data-lager-drawer-topic]').forEach((card) => { card.hidden = type !== 'Produkt'; }); if (type === 'Produkt') { const forecast = trigger.dataset.lagerDrawerForecast || 'Keine Prognose'; const warning = trigger.dataset.lagerDrawerForecastWarning === 'true' || trigger.dataset.lagerDrawerForecastMhdWarning === 'true'; const warningValue = drawer.querySelector('[data-lager-drawer-warning-value]'); if (warningValue) { warningValue.textContent = warning ? forecast : 'Keine akute Warnung.'; warningValue.classList.toggle('sg-strong', warning); warningValue.classList.toggle('lager-forecast-warning', trigger.dataset.lagerDrawerForecastWarning === 'true'); warningValue.classList.toggle('lager-forecast-mhd-warning', trigger.dataset.lagerDrawerForecastMhdWarning === 'true'); } drawer.querySelector('[data-lager-drawer-lot-number]').textContent = trigger.dataset.lagerDrawerLotNumber || 'Nicht hinterlegt'; drawer.querySelector('[data-lager-drawer-supplier-lot-number]').textContent = trigger.dataset.lagerDrawerSupplierLotNumber || 'Nicht hinterlegt'; drawer.querySelector('[data-lager-drawer-expiry-date]').textContent = trigger.dataset.lagerDrawerExpiryDate || 'Nicht hinterlegt'; const virtualLot = trigger.dataset.lagerDrawerVirtualLotNumber || ''; drawer.querySelector('[data-lager-drawer-virtual-lot-value]').textContent = virtualLot ? 'Virtuelle Charge: ' + virtualLot : 'Keine virtuelle Fehlbestandscharge vorhanden.'; } setDrawerState(true); contentRoot.querySelectorAll('[data-lager-drawer-open]').forEach((button) => button.setAttribute('aria-expanded', String(button === trigger))); return; }"; + echo " if (trigger) { event.preventDefault(); if (window.matchMedia('(max-width: 767px)').matches) { openLagerMobileDetail(trigger); return; } const drawer = getDrawer(); if (!drawer) { return; } const type = trigger.dataset.lagerDrawerType || 'Lager'; const name = trigger.dataset.lagerDrawerName || ''; const value = trigger.dataset.lagerDrawerValue || ''; drawer.querySelector('[data-lager-drawer-title]').textContent = type + ': ' + name; drawer.querySelector('[data-lager-drawer-name-value]').textContent = name; const valueRow = drawer.querySelector('[data-lager-drawer-value-row]'); if (valueRow) { valueRow.hidden = false; } drawer.querySelector('[data-lager-drawer-value-label]').textContent = type === 'Produkt' ? 'Anzahl im Lager:' : 'Artikelnummer:'; drawer.querySelector('[data-lager-drawer-value-value]').textContent = value; drawer.querySelectorAll('[data-lager-drawer-topic]').forEach((card) => { card.hidden = type !== 'Produkt'; }); if (type === 'Produkt') { const forecast = trigger.dataset.lagerDrawerForecast || 'Keine Prognose'; const warning = trigger.dataset.lagerDrawerForecastWarning === 'true' || trigger.dataset.lagerDrawerForecastMhdWarning === 'true'; const warningValue = drawer.querySelector('[data-lager-drawer-warning-value]'); if (warningValue) { warningValue.textContent = warning ? forecast : 'Keine akute Warnung.'; warningValue.classList.toggle('sg-strong', warning); warningValue.classList.toggle('lager-forecast-warning', trigger.dataset.lagerDrawerForecastWarning === 'true'); warningValue.classList.toggle('lager-forecast-mhd-warning', trigger.dataset.lagerDrawerForecastMhdWarning === 'true'); } drawer.querySelector('[data-lager-drawer-lot-number]').textContent = trigger.dataset.lagerDrawerLotNumber || 'Nicht hinterlegt'; drawer.querySelector('[data-lager-drawer-supplier-lot-number]').textContent = trigger.dataset.lagerDrawerSupplierLotNumber || 'Nicht hinterlegt'; drawer.querySelector('[data-lager-drawer-expiry-date]').textContent = trigger.dataset.lagerDrawerExpiryDate || 'Nicht hinterlegt'; const virtualLot = trigger.dataset.lagerDrawerVirtualLotNumber || ''; drawer.querySelector('[data-lager-drawer-virtual-lot-value]').textContent = virtualLot ? 'Virtuelle Charge: ' + virtualLot : 'Keine virtuelle Fehlbestandscharge vorhanden.'; } setDrawerState(true); contentRoot.querySelectorAll('[data-lager-drawer-open]').forEach((button) => button.setAttribute('aria-expanded', String(button === trigger))); return; }"; echo " if (event.target.closest('[data-lager-drawer-close]') || event.target.closest('[data-lager-drawer-backdrop]')) { closeDrawer(); }"; echo " });"; - echo " document.addEventListener('keydown', (event) => { if (event.key === 'Escape') { closeDrawer(); } });"; + echo " document.addEventListener('click', (event) => { if (event.target.closest('[data-lager-detail-back]')) { event.preventDefault(); closeLagerMobileDetail(); } });"; + echo " document.addEventListener('keydown', (event) => { if (event.key === 'Escape') { closeDrawer(); closeLagerMobileDetail(); } });"; + echo " window.addEventListener('popstate', (event) => { if (lagerMobileDetailOpen && (!event.state || event.state.lagerView !== 'detail')) { restoreLagerMobileDetail(); } });"; echo "}"; echo "function initBestellungenBindings() {"; echo " const contentRoot = document.querySelector('[data-left-navigation-content-body]');"; diff --git a/public/assets/styles.portal.css b/public/assets/styles.portal.css index 3cdd3d1..0ef9aa2 100644 --- a/public/assets/styles.portal.css +++ b/public/assets/styles.portal.css @@ -58,6 +58,10 @@ body.sg-bestellungen-mobile-detail-open > :not([data-bestellungen-mobile-detail- display: none !important; } +body.sg-lager-mobile-detail-open > :not([data-lager-mobile-detail-host]) { + display: none !important; +} + .sg-bestellungen-mobile-detail-host { position: fixed; inset: 0; @@ -75,6 +79,23 @@ body.sg-bestellungen-mobile-detail-open > :not([data-bestellungen-mobile-detail- width: 100%; } +.sg-lager-mobile-detail-host { + position: fixed; + inset: 0; + z-index: 1500; + display: flex; + flex-direction: column; + gap: var(--spacing-large); + padding: var(--spacing-small); + box-sizing: border-box; + overflow: auto; + background: var(--color-background-purple); +} + +.sg-lager-mobile-detail-host .sg-vsf-drawer-card { + width: 100%; +} + .sg-otc-order-overlay { position: fixed; inset: 0;