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

Merge pull request 'Systemkacheln untereinander mit Servernamen daneben' (#83) from fds2610-bot/monitor:main into main

Browse source 
Reviewed-on: https://codeberg.org/fds2610/monitor/pulls/83
This commit is contained in:
fds2610 2026-09-02 16:11:34 +02:00
commit 72095095c5
2 changed files with 41 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
html/css/office.css
View file

@ -279,6 +279,19 @@ header.office-header h1 {
stroke: #f87171;
}
/* Servername rechts neben der Kachel. Monospace und klein genug, dass auch lange Namen in
einer Zeile neben die Kachel passen (gekuerzt wird in renderSystemMonitor). */
.system-tile-name {
font-family: "Consolas", "Courier New", monospace;
font-size: 11px;
fill: #cbd5e1;
dominant-baseline: central;
}
.status-error .system-tile-name {
fill: #f87171;
}
.monitor-placeholder-text {
fill: #64748b;
font-size: 15px;

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

@ -105,6 +105,11 @@ const COFFEE_CORNER = { x: 960, y: 780 };
const EVENT_BLOCK_H = 44;
const EVENT_MESSAGE_DY = 18;
// Zeichenbreite der Servernamen im System-Monitor: .system-tile-name ist 11px Monospace,
// dort misst ein Zeichen rund 0.61 * Schriftgroesse (dieselbe Rechnung wie
// EVENT_LINE_CHAR_WIDTH fuer die 13px-Eventzeilen).
const SYSTEM_NAME_CHAR_WIDTH = 6.7;
// Fester Platz des Product Owner (Issue #19): bewusst ausserhalb des dynamischen 8er-Rasters
// (DESK_COL_X/DESK_ROW_Y), in der freien Nische zwischen Board/Monitor-Wand und der ersten
// Schreibtischreihe - so kollidiert er nie mit einem echten, ueber die API registrierten Agenten.
@ -390,9 +395,9 @@ function renderEventMonitor(frame, events) {
// 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 pad = tileSize * 0.15;
const size = tileSize - pad * 2;
const strokeWidth = Math.max(3, size * 0.16);
const strokeWidth = Math.max(2.5, 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
@ -422,29 +427,39 @@ function renderSystemMonitor(frame, systems, onConfigClick) {
})
);
const cols = 3;
const tileMargin = 8;
const tileGap = 8;
const gridX = frame.x + 18;
const gridY = frame.y + 18;
const tileSize = (frame.w - 36 - tileMargin * (cols - 1)) / cols;
// Halbe Kantenlaenge des frueheren dreispaltigen Rasters. Die Kacheln stehen jetzt
// untereinander, rechts daneben steht der Servername - MAX_SYSTEM_TILES (9) Zeilen passen
// damit in die Hoehe des Monitors (frame.h - 36).
const tileSize = (frame.w - 36 - tileGap * 2) / 6;
const nameX = gridX + tileSize + tileGap;
const nameWidth = frame.x + frame.w - 18 - nameX;
tiles.forEach((system, index) => {
const col = index % cols;
const row = Math.floor(index / cols);
const tileX = gridX + col * (tileSize + tileMargin);
const tileY = gridY + row * (tileSize + tileMargin);
const tileX = gridX;
const tileY = gridY + index * (tileSize + tileGap);
// Issue #73: Servernamen ueberlappten sich bei mehreren Kacheln, deshalb kein fest
// eingezeichneter Text mehr - der Name erscheint nur noch als <title>-Tooltip, der ueber
// der ganzen Kachel (system-tile-bg deckt sie komplett ab) beim Hoover angezeigt wird.
// Issue #73: Servernamen ueberlappten sich im Raster und blieben deshalb dem Tooltip
// vorbehalten. Untereinander stehen sie sich nicht mehr im Weg, der Name steht wieder in
// der Kachelzeile - auf nameWidth gekuerzt, damit er nicht ueber den Monitor hinausragt.
// Der Tooltip bleibt und zeigt den ungekuerzten Namen.
const tileGroup = el("g", { class: `system-tile status-${system.status}` });
const tileTitle = el("title");
tileTitle.textContent = system.name;
tileGroup.appendChild(tileTitle);
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: 4, class: "system-tile-bg" })
);
tileGroup.appendChild(renderSystemStatusMark(system.status, tileX, tileY, tileSize));
tileGroup.appendChild(
text(truncateToWidth(system.name, nameWidth, SYSTEM_NAME_CHAR_WIDTH), {
x: nameX,
y: tileY + tileSize / 2,
class: "system-tile-name",
})
);
g.appendChild(tileGroup);
});