FDS2610/monitor
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Systemkacheln zeigen Haken bzw. X statt zweier gleicher LEDs

Browse source 
Jede Kachel trug zwei Rack-Balken mit je einer LED. Beide LEDs hingen an
derselben Statusklasse der Kachelgruppe und zeigten damit immer dasselbe -
zwei gruene Punkte pro Server ohne zusaetzliche Aussage.

Stattdessen jetzt ein Symbol pro Kachel: gruener Haken bei "ok", rotes X
bei "error" (mehr kennt SystemRepository::STATUSES nicht). Gezeichnet als
Pfad statt als Textglyphe, damit eine fehlende Schriftart auf dem
Wandmonitor keine leere Kachel ergibt, und ueber die volle Kachelflaeche
skaliert - seit Issue #73 steht der Servername im Tooltip, die Flaeche ist
also frei.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011GQ56Rs4sxgwwBjowtThpr
This commit is contained in:
fds2610-bot 2026-09-02 15:58:15 +02:00
parent 1c4535821d
commit 1181478d7d
2 changed files with 32 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
html/css/office.css
View file

@ -264,20 +264,19 @@ header.office-header h1 {
fill: #1e293b; fill: #1e293b;
} }
.system-tile-bar { .system-tile-mark {
fill: #334155; fill: none;
stroke: #64748b;
stroke-linecap: round;
stroke-linejoin: round;
} }
.system-tile-led { .status-ok .system-tile-mark {
fill: #64748b; stroke: #4ade80;
} }
.status-ok .system-tile-led { .status-error .system-tile-mark {
fill: #4ade80; stroke: #f87171;
}
.status-error .system-tile-led {
fill: #f87171;
} }
.monitor-placeholder-text { .monitor-placeholder-text {

31
html/js/office-render.js
View file

@ -384,6 +384,28 @@ function renderEventMonitor(frame, events) {
return g; return g;
} }
// Statussymbol einer System-Kachel: gruener Haken bei "ok", rotes X bei "error" (die einzigen
// beiden Werte, die SystemRepository::STATUSES kennt). Gezeichnet als Pfad und nicht als
// Textglyphe - auf dem Wandmonitor faellt eine fehlende Schriftart sonst als leere Kachel auf.
// Das Symbol fuellt die Kachel bis auf einen schmalen Rand aus; alle Masse haengen an der
// Kantenlaenge, damit es jede Kachelgroesse mitgeht.
function renderSystemStatusMark(status, tileX, tileY, tileSize) {
const pad = 4;
const size = tileSize - pad * 2;
const strokeWidth = Math.max(3, size * 0.16);
const bx = tileX + pad;
const by = tileY + pad;
// Die Endpunkte liegen um eine halbe Strichbreite innen, sonst ragen die runden Enden ueber
// die Flaeche hinaus.
const lo = strokeWidth / 2;
const hi = size - strokeWidth / 2;
const d =
status === "error"
? `M ${bx + lo} ${by + lo} L ${bx + hi} ${by + hi} M ${bx + hi} ${by + lo} L ${bx + lo} ${by + hi}`
: `M ${bx + lo} ${by + size * 0.55} L ${bx + size * 0.38} ${by + hi} L ${bx + hi} ${by + lo}`;
return el("path", { d, class: "system-tile-mark", "stroke-width": strokeWidth });
}
function renderSystemMonitor(frame, systems, onConfigClick) { function renderSystemMonitor(frame, systems, onConfigClick) {
const tiles = buildSystemTiles(systems); const tiles = buildSystemTiles(systems);
const g = el("g", { class: "monitor monitor-systems" }); const g = el("g", { class: "monitor monitor-systems" });
@ -422,14 +444,7 @@ function renderSystemMonitor(frame, systems, onConfigClick) {
tileGroup.appendChild( tileGroup.appendChild(
el("rect", { x: tileX, y: tileY, width: tileSize, height: tileSize, rx: 6, class: "system-tile-bg" }) el("rect", { x: tileX, y: tileY, width: tileSize, height: tileSize, rx: 6, class: "system-tile-bg" })
); );
tileGroup.appendChild( tileGroup.appendChild(renderSystemStatusMark(system.status, tileX, tileY, tileSize));
el("rect", { x: tileX + 10, y: tileY + 10, width: tileSize - 20, height: 14, rx: 2, class: "system-tile-bar" })
);
tileGroup.appendChild(
el("rect", { x: tileX + 10, y: tileY + 30, width: tileSize - 20, height: 14, rx: 2, class: "system-tile-bar" })
);
tileGroup.appendChild(el("circle", { cx: tileX + 18, cy: tileY + 17, r: 3, class: "system-tile-led" }));
tileGroup.appendChild(el("circle", { cx: tileX + 18, cy: tileY + 37, r: 3, class: "system-tile-led" }));
g.appendChild(tileGroup); g.appendChild(tileGroup);
}); });