Medowar
/
feuerwehr-getraenkeautomat-status


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
							<?php

declare(strict_types=1);

require_once __DIR__ . '/src/bootstrap.php';

$status = app_monitor_service()->getStatus();
$appName = $status['app']['name'] ?? 'Getränkeautomat Monitor';

header('Content-Type: text/html; charset=UTF-8');
?>
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= htmlspecialchars($appName, ENT_QUOTES) ?></title>
    <link rel="stylesheet" href="<?= htmlspecialchars(app_url('/styles.css'), ENT_QUOTES) ?>">
</head>
<body>
    <div class="page-shell">
        <header class="hero">
            <div class="hero__copy">
                <p class="eyebrow">Füllstand live im Blick</p>
                <h1><?= htmlspecialchars($appName, ENT_QUOTES) ?></h1>
                <p class="hero__lede">
                    Überwache Sensorwerte, erkenne Leerstände frühzeitig und springe direkt ins Adminpanel, wenn sich Grenzwerte oder Alarmwege ändern sollen.
                </p>
            </div>
            <div class="hero__stats">
                <div class="stat-card">
                    <span>Automaten</span>
                    <strong data-summary="machine_count"><?= (int) ($status['summary']['machine_count'] ?? 0) ?></strong>
                </div>
                <div class="stat-card">
                    <span>Fächer</span>
                    <strong data-summary="slot_count"><?= (int) ($status['summary']['slot_count'] ?? 0) ?></strong>
                </div>
                <div class="stat-card stat-card--alert">
                    <span>Kritisch</span>
                    <strong data-summary="critical_count"><?= (int) ($status['summary']['critical_count'] ?? 0) ?></strong>
                </div>
            </div>
            <div class="hero__actions">
                <a class="button button--primary" href="<?= htmlspecialchars(app_url('/admin/'), ENT_QUOTES) ?>">Adminpanel</a>
                <a class="button button--ghost" href="<?= htmlspecialchars(app_url('/api/v1/status.php'), ENT_QUOTES) ?>" target="_blank" rel="noreferrer">Status JSON</a>
            </div>
        </header>

        <main class="dashboard">
            <section class="panel panel--controls">
                <div>
                    <h2>Automatenansicht</h2>
                    <p>Filtere einzelne Automaten oder beobachte den Gesamtzustand auf einen Blick.</p>
                </div>
                <div class="chip-row" id="machine-filter"></div>
            </section>

            <section class="panel">
                <div class="panel__header">
                    <div>
                        <h2>Füllstand nach Fach</h2>
                        <p>Die Karten zeigen Messwert, geschätzten Bestand und den Alarmstatus pro Sensor.</p>
                    </div>
                    <p class="timestamp">Letzte Aktualisierung: <span id="generated-at"><?= htmlspecialchars($status['generated_at'], ENT_QUOTES) ?></span></p>
                </div>
                <div id="machine-grid" class="machine-grid"></div>
            </section>

            <section class="panel">
                <div class="panel__header">
                    <div>
                        <h2>Letzte Alarmereignisse</h2>
                        <p>Es werden nur Zustandswechsel geloggt, keine wiederholten Daueralarme.</p>
                    </div>
                </div>
                <div id="alert-list" class="alert-list"></div>
            </section>
        </main>
    </div>

    <script
        id="initial-status"
        type="application/json"
        data-base-path="<?= htmlspecialchars(app_base_path(), ENT_QUOTES) ?>"
    ><?= json_encode($status, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) ?></script>
    <script src="<?= htmlspecialchars(app_url('/app.js'), ENT_QUOTES) ?>" defer></script>
</body>
</html>