rene/checkflo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix: Badge Inline-Styles (kein Scoping-Problem), Protokoll-Schrift größer, Phosphor-Icons bei Stationen

Browse source
This commit is contained in:
rene 2026-05-17 17:08:42 +02:00
parent b2d97efe3f
commit 878296741e
6 changed files with 33 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

1
app/src/lib/assets/icons/broom.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M112,224a95.2,95.2,0,0,1-29-48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M192,152c0,31.67,13.31,59,40,72H61A103.65,103.65,0,0,1,32,152c0-28.21,11.23-50.89,29.47-69.64a8,8,0,0,1,8.67-1.81L95.52,90.83a16,16,0,0,0,20.82-9l21-53.11c4.15-10,15.47-15.32,25.63-11.53a20,20,0,0,1,11.51,26.4L153.13,96.69a16,16,0,0,0,8.93,20.76L187,127.29a8,8,0,0,1,5,7.43Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="43.93" y1="105.57" x2="192.8" y2="165.12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 790 B

1
app/src/lib/assets/icons/snowflake.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="128" y1="64" x2="128" y2="192" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><polyline points="104 40 128 64 152 40" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><polyline points="104 216 128 192 152 216" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="72.57" y1="96" x2="183.43" y2="160" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><polyline points="40 104 72.57 96 64 64" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><polyline points="192 192 183.43 160 216 152" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="72.57" y1="160" x2="183.43" y2="96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><polyline points="64 192 72.57 160 40 152" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><polyline points="216 104 183.43 96 192 64" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

1
app/src/lib/assets/icons/thermometer-cold.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="120" y1="160" x2="120" y2="120" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="216" y1="48" x2="216" y2="80" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="185.57" y1="70.11" x2="216" y2="80" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="197.19" y1="105.89" x2="216" y2="80" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="234.81" y1="105.89" x2="216" y2="80" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="246.43" y1="70.11" x2="216" y2="80" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><circle cx="120" cy="184" r="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M88,48a32,32,0,0,1,64,0v90a56,56,0,1,1-64,0Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

1
app/src/lib/assets/icons/thermometer-hot.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="120" y1="160" x2="120" y2="48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><circle cx="120" cy="184" r="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M88,48a32,32,0,0,1,64,0v90a56,56,0,1,1-64,0Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M184,76.4c22.91-14.92,33.09,14.12,56-.8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M184,108.4c22.91-14.92,33.09,14.12,56-.8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 842 B

1
app/src/lib/assets/icons/thermometer.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><circle cx="212" cy="84" r="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="120" y1="160" x2="120" y2="88" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><circle cx="120" cy="184" r="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M88,48a32,32,0,0,1,64,0v90a56,56,0,1,1-64,0Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 673 B

37
app/src/routes/+page.svelte
View file

@ -8,7 +8,26 @@
const DEMO_TENANT = 'mengbzc3ajxpccz';
const STATUS_LABEL: Record<string, string> = { ok: 'OK', abweichung: 'Abweichung', kritisch: 'Kritisch' };
const STATUS_CLASS: Record<string, string> = { ok: 'ok', abweichung: 'warn', kritisch: 'crit' };
const BADGE_STYLE: Record<string, string> = {
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<string, string> = {
kuehlschrank: iconThermCold,
tiefkuehl: iconSnowflake,
warmhalte: iconThermHot,
hygiene: iconBroom,
sonstiges: iconTherm
};
let activeView = $state<'dashboard' | 'protokoll' | 'stationen'>('dashboard');
let liveLogs = $state<any[]>([]);
@ -155,7 +174,7 @@
<div class="dash-entries-title">Letzte Einträge</div>
{#each liveLogs.slice(0,4) as log}
<div class="dash-entry">
<span class="entry-badge {STATUS_CLASS[log.status] ?? 'ok'}">{STATUS_LABEL[log.status] ?? log.status}</span>
<span class="entry-badge" style={BADGE_STYLE[log.status] ?? BADGE_STYLE.ok}>{STATUS_LABEL[log.status] ?? log.status}</span>
<span class="entry-station">{log.expand?.station?.name ?? '—'}</span>
<span class="entry-temp">{log.temperature ? log.temperature + ' °C' : ''}</span>
<span class="entry-who">{log.checked_by} · {formatTime(log.created)}</span>
@ -197,7 +216,7 @@
<div class="stations-grid">
{#each liveStations as s}
<div class="station-card">
<div class="station-card-icon">⬜</div>
<img src={TYPE_ICON[s.type] ?? iconTherm} alt="" class="station-card-icon" />
<div class="station-card-name">{s.name}</div>
{#if s.target_temp_min || s.target_temp_max}
<div class="station-card-temp">{s.target_temp_min}° – {s.target_temp_max}°C</div>
@ -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 {