/* Prueft die Formularzeilen auf allen Seiten. Beanstandet am 01.09.2026: "das sieht scheisse aus, so verzogen". Gemeint war die Zeile im Kalender -- "Art" schmal, "Beginn" breit, "Dauer (Minuten)" zweizeilig umgebrochen, alle Felder auf verschiedenen Hoehen. Ursache war eine Regel, die nur fuer Kinder mit der Klasse .feld galt. Der Kalender benutzt schlichte
ohne Klasse; die fielen hindurch, bekamen von zwoelf Rasterspalten je EINE und wurden nur so breit, wie ihr Inhalt sie zwang. Geprueft wird deshalb nicht "sieht gut aus", sondern messbar: * alle Eingabefelder einer Zeile gleich hoch * ihre Unterkanten auf einer Linie (sonst haengt eines tiefer) * kein Feld absurd schmal * keine Beschriftung mehrzeilig */ import { mkdtempSync, rmSync } from "node:fs"; import { tmpdir } from "node:os"; import { join } from "node:path"; const ordner = mkdtempSync(join(tmpdir(), "ws-form-")); process.env.WORKSPACE_DB = join(ordner, "workspace.db"); /* DER PORT MUSS MEINER SEIN (nachgeruestet 19.09.2026). Ohne diese Zeile startet der eigene Server bei belegtem Port STILL nicht -- und alles Folgende misst gegen einen fremden Stand. Das ist der dritte Ausgang: belegt ist etwas anderes als kaputt. */ const PORT = await eigenerPort(import.meta, "pruef-formulare"); process.env.PORT = `${PORT}`; process.env.SITE_ACCESS_SECRET = "lokaler-test"; process.env.SITE_ACCESS_CODE_DOGI = "DOGI-TEST-1"; process.env.SITE_PUBLIC_LAUNCH_AT = "2020-01-01T00:00:00+01:00"; const express = (await import("express")).default; const ec = express.response.cookie; express.response.cookie = function (n, w, o) { return ec.call(this, n, w, { ...(o || {}), secure: false }); }; import { notbremse } from "./helfer-notbremse.mjs"; import { eigenerPort } from "./helfer-port.mjs"; await import("./index.js"); /* DIE NOTBREMSE. Muss NACH index.js stehen: Der Server haengt dort zwei Auffangnetze ein, die einen Absturz nur protokollieren -- richtig fuer den Betrieb, fatal fuer eine Pruefung. Ohne diese Zeile bleibt der Prozess nach einem Fehler ewig stehen, weil der Server ihn am Leben haelt (siehe helfer-notbremse.mjs). */ notbremse(480_000, "pruef-formulare"); await new Promise((r) => setTimeout(r, 700)); const BASIS = `http://127.0.0.1:${PORT}`; setTimeout(() => { console.log("ABBRUCH"); process.exit(1); }, 250_000).unref?.(); let fehler = 0; const ok = (b, t) => { console.log((b ? " ok " : " FEHL ") + t); if (!b) fehler++; }; await fetch(BASIS + "/workspace/api/anmelden", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ rolle: "admin", code: "x" }) }).catch(() => {}); const { DatabaseSync } = await import("node:sqlite"); const { scryptSync, randomBytes } = await import("node:crypto"); for (let i = 0; i < 60; i++) { try { const p = new DatabaseSync(process.env.WORKSPACE_DB); try { p.prepare("SELECT 1 FROM personen LIMIT 1").get(); break; } finally { p.close(); } } catch { await new Promise((r) => setTimeout(r, 250)); } } const d = new DatabaseSync(process.env.WORKSPACE_DB); const salt = randomBytes(16).toString("hex"); const hash = scryptSync("CODE-DOGI-0001", salt, 64, { N: 32768, r: 8, p: 1, maxmem: 96 * 1024 * 1024 }).toString("hex"); d.prepare("INSERT INTO personen (name, rolle, code_hash, code_salt, code_n, aktiv, erstellt) VALUES (?,?,?,?,?,1,?)") .run("Filipe", "admin", hash, salt, 32768, new Date().toISOString()); /* EIN CREATOR MUSS DA SEIN. Ohne ihn bauen profil.html und startcheck.html ihr Formular gar nicht erst auf -- die Pruefung findet dort null Felder und meldet "in Ordnung", ohne ein einziges angesehen zu haben. Genau deshalb steht die Anzahl in der Bedingung. */ const salt2 = randomBytes(16).toString("hex"); const hash2 = scryptSync("CODE-ANNA-0001", salt2, 64, { N: 32768, r: 8, p: 1, maxmem: 96 * 1024 * 1024 }).toString("hex"); d.prepare("INSERT INTO personen (name, rolle, code_hash, code_salt, code_n, aktiv, erstellt) VALUES (?,?,?,?,?,1,?)") .run("Tili", "creator", hash2, salt2, 32768, new Date().toISOString()); d.close(); const { chromium } = await import( "file:///C:/Users/qciga/Documents/Obelix/Analyse/node_modules/playwright/index.mjs"); const browser = await chromium.launch(); /* Seite, Knopf zum Aufklappen des Formulars. */ const FORMULARE = [ ["kalender.html", "#neu-oeffnen"], ["aufgaben.html", "#neu-oeffnen"], ["personen.html", "#neu-oeffnen"], ["bereich.html?b=live", "#neu-oeffnen"], ["scouting.html", "#neu-oeffnen"], ]; for (const [breite, wie] of [[1280, "Computer"], [390, "Handy"]]) { console.log(`\n=== ${wie} (${breite}px)`); const kontext = await browser.newContext({ viewport: { width: breite, height: 1000 }, hasTouch: breite <= 860 }); const seite = await kontext.newPage(); await seite.goto(BASIS + "/workspace/", { waitUntil: "domcontentloaded" }); await seite.click('.rolle[data-rolle="admin"]'); await seite.fill("#code", "CODE-DOGI-0001"); await seite.click("button[type=submit]"); await seite.waitForURL("**/start.html", { timeout: 15000 }); for (const [s, knopf] of FORMULARE) { await seite.goto(BASIS + "/workspace/" + s, { waitUntil: "networkidle" }); await seite.waitForTimeout(700); const da = await seite.locator(knopf).count(); if (!da) { console.log(` -- ${s}: kein Formularknopf`); continue; } await seite.click(knopf).catch(() => {}); await seite.waitForTimeout(450); const r = await seite.evaluate(() => { const raster = document.querySelector(".neu__raster"); if (!raster) return null; const felder = [...raster.children].filter((k) => k.offsetParent !== null); const eingaben = felder .map((f) => f.querySelector("input, select, textarea")) .filter(Boolean) .map((e) => e.getBoundingClientRect()) /* NUR WAS MAN WIRKLICH SIEHT (verschaerft 22.09.2026). ---------------------------------------------------------- Seit dem 21.09. steht im Aufgabenformular ein zugeklappter Block ("Noch jemanden dazunehmen"). Sein erstes Eingabefeld liegt in einem `hidden` fieldset und hat Hoehe und Breite 0 -- die Pruefung meldete es als "nicht buendig" und "zu schmal". Ein Feld, das man nicht sieht, kann nicht schief stehen. Diese Zeile misst die Buendigkeit dessen, was ein Mensch vor sich hat -- und genau darum geht es. */ .filter((r2) => r2.width > 0 && r2.height > 0); const schilder = felder .map((f) => f.querySelector(".feld-schild")) .filter(Boolean); /* Mehrzeilige Beschriftung: tatsaechliche Hoehe gegen eine Zeile. */ const mehrzeilig = schilder.filter((s2) => { const zeile = parseFloat(getComputedStyle(s2).lineHeight) || 16; return s2.getBoundingClientRect().height > zeile * 1.6; }).map((s2) => s2.textContent.trim()); return { anzahl: eingaben.length, hoehen: eingaben.map((e) => Math.round(e.height)), /* Auf 3 px genau zusammengefasst: Unterkanten liegen durch Teilpixel-Rundung selten exakt gleich, obwohl sie auf einer Linie sitzen. Ein erster Anlauf meldete deshalb "3 Unterkanten" bei drei Feldern derselben Reihe -- ein Messfehler, kein Gestaltungsfehler. */ unterkanten: eingaben.map((e) => Math.round(e.bottom / 3) * 3), breiten: eingaben.map((e) => Math.round(e.width)), einzeln: felder.map((f) => { const e=f.querySelector("input, select, textarea"); if(!e) return null; const r2=e.getBoundingClientRect(); const fr=f.getBoundingClientRect(); return { id:e.id, tag:e.tagName, top:Math.round(r2.top), bottom:Math.round(r2.bottom), h:Math.round(r2.height), feldTop:Math.round(fr.top), feldH:Math.round(fr.height) }; }).filter(Boolean), mehrzeilig, }; }); if (!r || r.anzahl < 2) { console.log(` -- ${s}: kein Raster mit mehreren Feldern`); continue; } const hoehenGleich = new Set(r.hoehen).size === 1; /* Unterkanten auf einer Linie -- auf dem Handy stehen die Felder untereinander, dort gilt das natuerlich nicht. */ const reihen = new Set(r.unterkanten).size; const buendig = breite < 700 ? true : reihen <= Math.ceil(r.anzahl / 3); const nichtWinzig = Math.min(...r.breiten) >= 90; const gut = hoehenGleich && buendig && nichtWinzig && !r.mehrzeilig.length; if (!gut) fehler++; console.log(` ${gut ? "ok " : "FEHL"} ${String(s).padEnd(20)}` + `${r.anzahl} Felder Höhen=${[...new Set(r.hoehen)].join("/")} ` + `Breiten=${Math.min(...r.breiten)}–${Math.max(...r.breiten)}` + (hoehenGleich ? "" : " UNGLEICH HOCH") + (buendig ? "" : ` NICHT BÜNDIG (Unterkanten ${r.unterkanten.join(",")})`) + (nichtWinzig ? "" : " ZU SCHMAL") + (r.mehrzeilig.length ? ` MEHRZEILIG: ${r.mehrzeilig.join(", ")}` : "") + (gut ? "" : " | " + r.einzeln.map((e) => `${e.id}(${e.tag}) Feld:${e.feldTop}+${e.feldH} Eingabe:${e.top}..${e.bottom}`).join(" "))); } await kontext.close(); } /* ===================================================================== KEIN FELD OHNE GESTALTUNG (01.09.2026) Der gemeldete Fehler: Das Feld "Ein Satz ueber dich" stand als grauer Kasten in Monospace da, direkt neben gestalteten Feldern. Die Ursache war ein Loch im Aufbau -- jede Seite gestaltete ihre Felder mit einem EIGENEN Selektor (.gruppe textarea, .neu input, ...), und wer ein Feld irgendwo anders hinsetzt, faellt durch alle Netze. Ein Loch im Aufbau schliesst man nicht mit Hinsehen: Das naechste neue Feld faellt an einer anderen Stelle durch. Diese Pruefung geht deshalb ueber JEDES sichtbare Feld auf JEDER Seite und misst, was der Browser tatsaechlich zeichnet. Die Merkmale sind genau die, die im gemeldeten Fall fehlten: RAHMEN ohne Rand ist ein Feld im dunklen Entwurf nicht zu sehen ECKEN eckig heisst: der Browser hat gezeichnet, nicht wir SCHRIFT