189 lines
14 KiB
PHP
189 lines
14 KiB
PHP
<?php
|
||
declare(strict_types=1);
|
||
|
||
require_once __DIR__ . '/../service.php';
|
||
|
||
function render_auth_home_page(array $user): void
|
||
{
|
||
$userName = auth_escape_html((string) ($user['username'] ?? ''));
|
||
|
||
echo '<!doctype html>';
|
||
echo '<html lang="de">';
|
||
echo '<head>';
|
||
echo '<meta charset="UTF-8">';
|
||
echo '<meta name="viewport" content="width=device-width, initial-scale=1.0">';
|
||
echo '<title>Naurua ERP</title>';
|
||
echo '<link rel="stylesheet" href="/assets/styles.css">';
|
||
echo '</head>';
|
||
echo '<body>';
|
||
echo '<section id="pattern-portal-header" class="sg-vsf-list-overview-page-v2">';
|
||
echo '<article class="sg-portal-header-pattern-variant" aria-label="Portal Header mit Options Row">';
|
||
echo '<p class="sg-table-label sg-portal-header-pattern-variant__label sg-text-on-dark">Variante: Portal Header mit Options Row</p>';
|
||
echo '<header class="sg-portal-header" aria-label="Portal Header" data-pattern="portal-header">';
|
||
echo '<div class="sg-portal-header__main" data-pattern-part="portal-header-main">';
|
||
echo '<p class="sg-portal-header__brand sg-brand-title" data-pattern-part="portal-header-brand">Naurua ERP</p>';
|
||
echo '<div class="sg-portal-header__menu-wrap sg-sandwich-menu-wrap" data-open="false" data-component="sandwich-menu" data-component-size="default" data-component-context="portal-header" data-pattern-part="portal-header-action">';
|
||
echo '<button class="sg-interaction-element sg-sandwich-button" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger">';
|
||
echo '<span class="sg-sandwich-button__icon" aria-hidden="true">';
|
||
echo '<span class="sg-sandwich-button__line"></span>';
|
||
echo '<span class="sg-sandwich-button__line"></span>';
|
||
echo '<span class="sg-sandwich-button__line"></span>';
|
||
echo '</span>';
|
||
echo '</button>';
|
||
echo '<div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">';
|
||
echo '<a class="sg-sandwich-menu-link" href="/" data-component-part="sandwich-menu-link">Startseite</a>';
|
||
echo '<a class="sg-sandwich-menu-link" href="/logout.php" data-component-part="sandwich-menu-link">Abmelden</a>';
|
||
echo '</div>';
|
||
echo '</div>';
|
||
echo '<nav class="sg-portal-header__tabs sg-tab-button-group" aria-label="Hauptnavigation" data-component="tab-navigation" data-component-size="large" data-component-context="portal-header" data-pattern-part="portal-header-navigation">';
|
||
echo '<button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Übersicht</button>';
|
||
echo '<button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="true" data-component-part="tab-button" data-component-state="active">Stammdaten</button>';
|
||
echo '<button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Bestellungen</button>';
|
||
echo '<button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Lager</button>';
|
||
echo '</nav>';
|
||
echo '</div>';
|
||
echo '</header>';
|
||
echo '<div class="sg-options-row" aria-label="Optionszeile" data-pattern="options-row">';
|
||
echo '<div class="sg-options-row__left" data-pattern-part="options-row-primary-actions">';
|
||
echo '<div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="single" data-component="pulldown" data-component-context="options-row" data-component-state="inactive-selectable">';
|
||
echo '<button class="sg-interaction-element sg-pulldown sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown Sortierung" data-component-part="pulldown-trigger" data-label-base="Sortierung">Sortierung</button>';
|
||
echo '<div class="sg-pulldown-panel" aria-label="Geöffnetes Pulldown Sortierung" data-component-part="pulldown-panel">';
|
||
echo '<ul class="sg-pulldown-option-list" aria-label="Sortierungsoptionen">';
|
||
echo '<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Menüpunkt 1</span></li>';
|
||
echo '<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Menüpunkt 2</span></li>';
|
||
echo '<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Menüpunkt 3</span></li>';
|
||
echo '<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Menüpunkt 4</span></li>';
|
||
echo '<li class="sg-pulldown-option sg-pulldown-option--disabled"><span>Menüpunkt 5</span></li>';
|
||
echo '</ul>';
|
||
echo '</div>';
|
||
echo '</div>';
|
||
echo '<div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="single" data-component="pulldown" data-component-context="options-row" data-component-state="inactive-selectable">';
|
||
echo '<button class="sg-interaction-element sg-pulldown sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown Bereich" data-component-part="pulldown-trigger" data-label-base="Bereich">Bereich</button>';
|
||
echo '<div class="sg-pulldown-panel" aria-label="Geöffnetes Pulldown Bereich" data-component-part="pulldown-panel">';
|
||
echo '<ul class="sg-pulldown-option-list" aria-label="Bereichsoptionen">';
|
||
echo '<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Menüpunkt 1</span></li>';
|
||
echo '<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Menüpunkt 2</span></li>';
|
||
echo '<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Menüpunkt 3</span></li>';
|
||
echo '<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Menüpunkt 4</span></li>';
|
||
echo '<li class="sg-pulldown-option sg-pulldown-option--disabled"><span>Menüpunkt 5</span></li>';
|
||
echo '</ul>';
|
||
echo '</div>';
|
||
echo '</div>';
|
||
echo '<div class="sg-search-field-row">';
|
||
echo '<span class="sg-input-single-line-wrap sg-search-field-input" data-has-value="false" data-component="single-line-input" data-component-context="options-row" data-component-state="inactive-selectable">';
|
||
echo '<input class="sg-interaction-element sg-input-single-line" type="text" placeholder="Suche" aria-label="Suche">';
|
||
echo '<button class="sg-input-clear-button" type="button" aria-label="Eingabe löschen" data-component-part="input-clear-button">×</button>';
|
||
echo '</span>';
|
||
echo '<span class="sg-search-result-count sg-table-label" aria-live="polite" data-pattern-part="options-row-search-result-count">0 Treffer</span>';
|
||
echo '</div>';
|
||
echo '</div>';
|
||
echo '<div class="sg-options-row__right" data-pattern-part="options-row-secondary-actions">';
|
||
echo '<button class="sg-mode-toggle" type="button" data-active="relative" aria-label="Modus Schieber global: relativ aktiv" data-component="mode-toggle" data-component-context="options-row">';
|
||
echo '<span class="sg-mode-toggle__label" data-component-part="toggle-label">absolut</span>';
|
||
echo '<span class="sg-mode-toggle__switch" aria-hidden="true" data-component-part="toggle-track"><span class="sg-mode-toggle__handle" data-component-part="toggle-handle"></span></span>';
|
||
echo '<span class="sg-mode-toggle__label" data-component-part="toggle-label">relativ</span>';
|
||
echo '</button>';
|
||
echo '<span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="options-row">';
|
||
echo '<button class="sg-help-icon" type="button" aria-expanded="false" aria-label="Hilfetext anzeigen" data-component-part="help-trigger">?</button>';
|
||
echo '<span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">Angemeldet als ' . $userName . '</span>';
|
||
echo '</span>';
|
||
echo '</div>';
|
||
echo '</div>';
|
||
echo '</article>';
|
||
echo '<h1 class="sg-main-heading">Willkommen im Naurua ERP</h1>';
|
||
echo '<section class="sg-left-navigation-pattern" aria-label="Linke Navigation">';
|
||
echo '<div class="sg-left-navigation-pattern__layout" aria-label="Left Navigation Demo">';
|
||
echo '<aside class="sg-group-card sg-left-navigation-pattern__group-card sg-left-navigation-pattern__group-card--navigation" data-component="group-card" aria-label="Navigation">';
|
||
echo '<div class="sg-group-card__header-row sg-left-navigation-pattern__header-row">';
|
||
echo '<h2 class="sg-heading-h2 sg-text-on-dark sg-group-card__heading">Navigation</h2>';
|
||
echo '<button class="sg-interaction-element sg-button sg-button--active sg-left-navigation-pattern__toggle" type="button" data-left-navigation-toggle aria-expanded="true" aria-controls="left-navigation-menu">Ausblenden</button>';
|
||
echo '</div>';
|
||
echo '<nav class="sg-tab-button-group" id="left-navigation-menu" role="tablist" aria-label="Linksmenue Items" data-component="tab-navigation" data-component-size="large" data-component-variant="linksmenu-items">';
|
||
echo '<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="true" data-component-part="tab-button">Übersicht</button>';
|
||
echo '<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button">Kontakte</button>';
|
||
echo '<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button">Bestellungen</button>';
|
||
echo '<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button">Lager</button>';
|
||
echo '<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button">Einstellungen</button>';
|
||
echo '</nav>';
|
||
echo '</aside>';
|
||
echo '<section class="sg-group-card sg-left-navigation-pattern__group-card sg-left-navigation-pattern__group-card--content" data-component="group-card" aria-hidden="true"></section>';
|
||
echo '</div>';
|
||
echo '</section>';
|
||
echo '</section>';
|
||
echo '<script src="/assets/help-icon-overlays.js"></script>';
|
||
echo '<script>';
|
||
echo "document.querySelectorAll('.sg-portal-header__tabs').forEach((group) => {";
|
||
echo " group.querySelectorAll('.sg-tab-button').forEach((button) => {";
|
||
echo " button.addEventListener('click', () => {";
|
||
echo " group.querySelectorAll('.sg-tab-button').forEach((otherButton) => {";
|
||
echo " const isActive = otherButton === button;";
|
||
echo " otherButton.setAttribute('aria-selected', String(isActive));";
|
||
echo " otherButton.dataset.componentState = isActive ? 'active' : 'inactive';";
|
||
echo " });";
|
||
echo " });";
|
||
echo " });";
|
||
echo "});";
|
||
echo "document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => {";
|
||
echo " const button = wrap.querySelector('.sg-sandwich-button');";
|
||
echo " button.addEventListener('click', (event) => {";
|
||
echo " event.stopPropagation();";
|
||
echo " const nextState = wrap.dataset.open !== 'true';";
|
||
echo " document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((otherWrap) => {";
|
||
echo " const otherButton = otherWrap.querySelector('.sg-sandwich-button');";
|
||
echo " otherWrap.dataset.open = 'false';";
|
||
echo " if (otherButton) { otherButton.setAttribute('aria-expanded', 'false'); }";
|
||
echo " });";
|
||
echo " wrap.dataset.open = String(nextState);";
|
||
echo " button.setAttribute('aria-expanded', String(nextState));";
|
||
echo " });";
|
||
echo "});";
|
||
echo "document.querySelectorAll('.sg-mode-toggle').forEach((toggle) => {";
|
||
echo " toggle.addEventListener('click', () => {";
|
||
echo " const nextState = toggle.dataset.active === 'relative' ? 'absolute' : 'relative';";
|
||
echo " toggle.dataset.active = nextState;";
|
||
echo " toggle.dataset.componentState = nextState;";
|
||
echo " toggle.setAttribute('aria-label', 'Modus Schieber global: ' + (nextState === 'relative' ? 'relativ' : 'absolut') + ' aktiv');";
|
||
echo " });";
|
||
echo "});";
|
||
echo "(() => {";
|
||
echo " const mediaQuery = window.matchMedia('(max-width: 767px)');";
|
||
echo " const toggle = document.querySelector('[data-left-navigation-toggle]');";
|
||
echo " const menu = document.getElementById('left-navigation-menu');";
|
||
echo " if (!toggle || !menu) { return; }";
|
||
echo " const setMenuState = (expanded) => {";
|
||
echo " menu.hidden = !expanded;";
|
||
echo " menu.classList.toggle('sg-left-navigation-pattern__menu--collapsed', !expanded);";
|
||
echo " toggle.setAttribute('aria-expanded', String(expanded));";
|
||
echo " toggle.textContent = expanded ? 'Ausblenden' : 'Einblenden';";
|
||
echo " toggle.classList.add('sg-button--active');";
|
||
echo " toggle.classList.remove('sg-button--inactive');";
|
||
echo " };";
|
||
echo " const syncMode = () => {";
|
||
echo " if (mediaQuery.matches) {";
|
||
echo " if (toggle.getAttribute('aria-expanded') !== 'true' && toggle.getAttribute('aria-expanded') !== 'false') { setMenuState(true); return; }";
|
||
echo " setMenuState(toggle.getAttribute('aria-expanded') !== 'false');";
|
||
echo " return;";
|
||
echo " }";
|
||
echo " menu.hidden = false;";
|
||
echo " menu.classList.remove('sg-left-navigation-pattern__menu--collapsed');";
|
||
echo " toggle.setAttribute('aria-expanded', 'true');";
|
||
echo " toggle.textContent = 'Ausblenden';";
|
||
echo " toggle.classList.add('sg-button--active');";
|
||
echo " toggle.classList.remove('sg-button--inactive');";
|
||
echo " };";
|
||
echo " toggle.addEventListener('click', () => { setMenuState(menu.hidden); });";
|
||
echo " menu.querySelectorAll('.sg-tab-button').forEach((button) => {";
|
||
echo " button.addEventListener('click', () => {";
|
||
echo " menu.querySelectorAll('.sg-tab-button').forEach((otherButton) => {";
|
||
echo " otherButton.setAttribute('aria-selected', String(otherButton === button));";
|
||
echo " });";
|
||
echo " });";
|
||
echo " });";
|
||
echo " syncMode();";
|
||
echo " mediaQuery.addEventListener('change', syncMode);";
|
||
echo "})();";
|
||
echo '</script>';
|
||
echo '</body>';
|
||
echo '</html>';
|
||
}
|