/* 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"); process.env.PORT = "4203"; 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 }); }; await import("./index.js"); await new Promise((r) => setTimeout(r, 700)); const BASIS = "http://127.0.0.1:4203"; 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 } }); 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()); 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