diff --git a/app/src/lib/assets/icons/broom.svg b/app/src/lib/assets/icons/broom.svg new file mode 100644 index 0000000..0cd12e6 --- /dev/null +++ b/app/src/lib/assets/icons/broom.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/src/lib/assets/icons/snowflake.svg b/app/src/lib/assets/icons/snowflake.svg new file mode 100644 index 0000000..b4ac05c --- /dev/null +++ b/app/src/lib/assets/icons/snowflake.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/src/lib/assets/icons/thermometer-cold.svg b/app/src/lib/assets/icons/thermometer-cold.svg new file mode 100644 index 0000000..d2df6a0 --- /dev/null +++ b/app/src/lib/assets/icons/thermometer-cold.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/src/lib/assets/icons/thermometer-hot.svg b/app/src/lib/assets/icons/thermometer-hot.svg new file mode 100644 index 0000000..ebc0157 --- /dev/null +++ b/app/src/lib/assets/icons/thermometer-hot.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/src/lib/assets/icons/thermometer.svg b/app/src/lib/assets/icons/thermometer.svg new file mode 100644 index 0000000..57a3698 --- /dev/null +++ b/app/src/lib/assets/icons/thermometer.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/src/routes/+page.svelte b/app/src/routes/+page.svelte index 57c679d..2c3e799 100644 --- a/app/src/routes/+page.svelte +++ b/app/src/routes/+page.svelte @@ -8,7 +8,26 @@ const DEMO_TENANT = 'mengbzc3ajxpccz'; const STATUS_LABEL: Record = { ok: 'OK', abweichung: 'Abweichung', kritisch: 'Kritisch' }; - const STATUS_CLASS: Record = { ok: 'ok', abweichung: 'warn', kritisch: 'crit' }; + + const BADGE_STYLE: Record = { + ok: 'background:#dcfce7;color:#16a34a', + abweichung: 'background:#ffedd5;color:#ea580c', + kritisch: 'background:#fee2e2;color:#dc2626' + }; + + import iconThermCold from '$lib/assets/icons/thermometer-cold.svg'; + import iconSnowflake from '$lib/assets/icons/snowflake.svg'; + import iconThermHot from '$lib/assets/icons/thermometer-hot.svg'; + import iconBroom from '$lib/assets/icons/broom.svg'; + import iconTherm from '$lib/assets/icons/thermometer.svg'; + + const TYPE_ICON: Record = { + kuehlschrank: iconThermCold, + tiefkuehl: iconSnowflake, + warmhalte: iconThermHot, + hygiene: iconBroom, + sonstiges: iconTherm + }; let activeView = $state<'dashboard' | 'protokoll' | 'stationen'>('dashboard'); let liveLogs = $state([]); @@ -155,7 +174,7 @@
Letzte Einträge
{#each liveLogs.slice(0,4) as log}
- {STATUS_LABEL[log.status] ?? log.status} + {STATUS_LABEL[log.status] ?? log.status} {log.expand?.station?.name ?? '—'} {log.temperature ? log.temperature + ' °C' : ''} {log.checked_by} · {formatTime(log.created)} @@ -197,7 +216,7 @@
{#each liveStations as s}
-
⬜
+
{s.name}
{#if s.target_temp_min || s.target_temp_max}
{s.target_temp_min}° – {s.target_temp_max}°C
@@ -501,16 +520,16 @@ .dash-empty { font-size: 0.65rem; color: #aaa; padding: 0.5rem 0; } /* Protokoll-Tabelle */ - .proto-table { width: 100%; border-collapse: collapse; font-size: 0.6rem; margin-top: 0.5rem; } - .proto-table th { background: #F5F7FA; padding: 0.3rem 0.4rem; text-align: left; color: #888; font-size: 0.55rem; text-transform: uppercase; } - .proto-table td { padding: 0.35rem 0.4rem; border-bottom: 1px solid #f0f0f0; } - .proto-station { font-weight: 600; color: #0B1023; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - .proto-time { color: #aaa; } + .proto-table { width: 100%; border-collapse: collapse; font-size: 0.72rem; margin-top: 0.5rem; } + .proto-table th { background: #F5F7FA; padding: 0.4rem 0.5rem; text-align: left; color: #666; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.3px; } + .proto-table td { padding: 0.45rem 0.5rem; border-bottom: 1px solid #f0f0f0; color: #333; } + .proto-station { font-weight: 600; color: #0B1023; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } + .proto-time { color: #888; } /* Stationen-Grid */ .stations-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; margin-top: 0.5rem; } .station-card { background: #F5F7FA; border-radius: 6px; padding: 0.5rem; } - .station-card-icon { font-size: 1rem; margin-bottom: 0.2rem; } + .station-card-icon { width: 16px; height: 16px; margin-bottom: 0.25rem; filter: invert(30%) sepia(20%) saturate(500%) hue-rotate(182deg); } .station-card-name { font-size: 0.6rem; font-weight: 700; color: #0B1023; } .station-card-temp { font-size: 0.55rem; color: #888; margin-top: 0.1rem; } .dash-entry {