Medowar
/
feuerwehr-getraenkeautomat-status


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
							<?php

declare(strict_types=1);

require_once dirname(__DIR__) . '/src/bootstrap.php';

$status = app_monitor_service()->getStatus();
$appName = $status['app']['name'] ?? 'Getraenkeautomat Monitor';
?>
<!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="/styles.css">
</head>
<body>
    <div class="page-shell">
        <header class="hero">
            <div class="hero__copy">
                <p class="eyebrow">Fuellstand live im Blick</p>
                <h1><?= htmlspecialchars($appName, ENT_QUOTES) ?></h1>
                <p class="hero__lede">
                    Ueberwache Sensorwerte, erkenne Leerstaende fruehzeitig und springe direkt ins Adminpanel, wenn sich Grenzwerte oder Alarmwege aendern 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>Faecher</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="/admin/">Adminpanel</a>
                <a class="button button--ghost" href="/api/v1/status.php" 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>Fuellstand nach Fach</h2>
                        <p>Die Karten zeigen Messwert, geschaetzten 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"><?= json_encode($status, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) ?></script>
    <script src="/app.js" defer></script>
</body>
</html>