Startseite: aus siebzehn gleichen Rechtecken wird eine Uebersicht
Sie war eine Wand: siebzehn identische Kaesten, auf jedem stand "OEFFNEN".
Wenn alles gleich aussieht, ist alles gleich wichtig -- also nichts. Und
"OEFFNEN" ist keine Information; dass eine Kachel sich oeffnen laesst,
weiss man.
Drei Aenderungen, jede mit einem Grund:
1. GRUPPEN statt einer Liste. "Taeglich" (was man sowieso jeden Tag
aufmacht), "Rund um den Creator" (die Betreuungsakte), "Team & System"
(was den Laden am Laufen haelt). Das sind drei verschiedene Absichten.
2. ZAHLEN STATT "OEFFNEN". Auf der Kachel steht jetzt, wo Arbeit liegt --
"Aufgaben 4", rot markiert, weil etwas ueberfaellig ist. Gespeist aus
DERSELBEN Quelle wie die Hinweisliste darueber, kein zweiter Zaehler:
Zwei verschiedene Wahrheiten uebereinander auf einem Bildschirm waeren
schlimmer als gar keine Zahl.
3. ZEICHEN UND FARBE. Siebzehn eigene Linienzeichen (eigene Pfade, keine
Fremdbibliothek -- kleiner als jede Schriftart und keine zusaetzliche
Lieferkette) und acht Farbtoene.
Warum acht Toene und nicht siebzehn: Ich hatte zuerst eine eigene Farbe
je Kachel gebaut und das Ergebnis pruefen lassen. Zwei Paare hatten einen
Abstand von 1.4 und 5.6 -- also praktisch dieselbe Farbe. Das sieht nach
Zufall aus, nicht nach Absicht. Die acht jetzt verwendeten sind gegen
genau diesen Hintergrund gerechnet und bestehen alle Pruefungen
(Helligkeitsband, Farbstaerke, Farbfehlsichtigkeit dE 8.4,
Normalsicht 19.3, Kontrast). Verteilt so, dass in einer Zeile nie
zweimal derselbe Ton steht. Die Farbe stuetzt nur -- WAS eine Kachel
ist, sagen Zeichen und Name.
Dazu:
- Begruessung nach Tageszeit statt immer "Willkommen".
- Sechs Nullen nebeneinander sind Rauschen: Ist wirklich nichts offen,
steht dort ein Satz und der Platz gehoert den Bereichen.
- Die Hinweisliste stand mit sieben Zeilen im Weg. Jetzt vier sichtbar,
Rest auf Knopfdruck -- derselbe Helfer wie im Protokoll und im Verlauf.
- Gestaffelter Einlauf, aber in einer no-preference-Abfrage: Bei
"weniger Bewegung" entsteht gar keine Animation, nicht nur eine ohne
Dauer. Geprueft mit reducedMotion.
Beim Ansehen des ersten Bildes fielen abgeschnittene Untertitel auf
("Stammdaten, Ziele, 90-..."). Abgeschnittener Text ist der haeufigste
stille Fehler in einer Kachel, weil er nach Absicht aussieht. Texte
gekuerzt -- und der Test misst jetzt die tatsaechliche Textbreite gegen
die verfuegbare, damit es nicht wiederkommt.
40 Pruefungen, Computer und Handy, alle vier Rollen: Ein Creator sieht
"Mein Profil" statt der Liste aller Creator, keine Personenverwaltung,
keine Pipeline, keine Automationen -- und trotzdem drei saubere Gruppen.
Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
+283
-89
@@ -1,7 +1,27 @@
|
||||
/* ===================================================================
|
||||
Startseite nach dem Anmelden.
|
||||
|
||||
Sie war eine Wand aus siebzehn gleichen Rechtecken, auf denen jeweils
|
||||
"ÖFFNEN" stand. Wenn alles gleich aussieht, ist alles gleich wichtig
|
||||
-- also nichts. Und "ÖFFNEN" ist keine Information, das weiss man von
|
||||
einer Kachel ohnehin.
|
||||
|
||||
Drei Dinge machen daraus etwas Brauchbares:
|
||||
|
||||
1. GRUPPEN. Was man täglich braucht, was zu einem Creator gehört, was
|
||||
den Laden am Laufen hält -- das sind drei verschiedene Absichten
|
||||
und nicht eine Liste.
|
||||
|
||||
2. ZAHLEN STATT "ÖFFNEN". Auf der Kachel steht, wo Arbeit liegt.
|
||||
Dieselben Quellen wie die Hinweise darüber, kein zweiter Zähler.
|
||||
Eine Kachel, die "3" sagt, ist zehnmal mehr wert als eine, die
|
||||
"öffnen" sagt.
|
||||
|
||||
3. ZEICHEN UND FARBE. Ein eigenes Zeichen je Bereich und ein eigener
|
||||
Farbton -- man findet sie nach kurzer Zeit blind.
|
||||
|
||||
Die Seite ist bereits serverseitig geschützt (workspace.js). Dieses
|
||||
Skript holt nur noch, WER angemeldet ist, und regelt das Abmelden.
|
||||
Skript holt nur noch, WER angemeldet ist.
|
||||
=================================================================== */
|
||||
(() => {
|
||||
'use strict';
|
||||
@@ -13,41 +33,235 @@
|
||||
scout: 'Scout · deine Pipeline und die Creator, die du betreust',
|
||||
};
|
||||
|
||||
/* Bereiche aus dem Konzept, mit der Phase aus dem Umsetzungsplan.
|
||||
`rollen` steuert, wem ein Bereich überhaupt angezeigt wird - schon
|
||||
jetzt, damit die Trennung von Anfang an sichtbar ist.
|
||||
/* ---------- Zeichen ------------------------------------------------------
|
||||
|
||||
"Dashboard" führte lange nirgendwohin -- man stand ja schon auf
|
||||
dieser Seite. Statt die Kachel zu streichen, hat sie jetzt ein
|
||||
Ziel: die Gesamtübersicht je Creator, die das Konzept auf Seite 1
|
||||
als "ÜBERSICHT -- alles zentral" verspricht und die es bisher
|
||||
nirgends gab. Diese Seite hier ist der Einstieg, die andere der
|
||||
Überblick. */
|
||||
const BEREICHE = [
|
||||
{ name: 'Dashboard', phase: 1, rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'uebersicht.html' },
|
||||
{ name: 'Personen & Zugänge', phase: 1, rollen: ['admin', 'manager'], ziel: 'personen.html' },
|
||||
{ name: 'Creator-Profile', phase: 1, rollen: ['admin', 'manager', 'scout'], ziel: 'profil.html' },
|
||||
{ name: 'Mein Profil', phase: 1, rollen: ['creator'], ziel: 'profil.html' },
|
||||
{ name: 'Start-Check', phase: 1, rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'startcheck.html' },
|
||||
{ name: 'Wissens-Bibliothek', phase: 1, rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'wissen.html' },
|
||||
{ name: 'Aufgaben', phase: 1, rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'aufgaben.html' },
|
||||
{ name: 'Kalender', phase: 1, rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'kalender.html' },
|
||||
{ name: 'Dateien', phase: 1, rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'dateien.html' },
|
||||
{ name: 'LIVE-Analyse', phase: 2, rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'bereich.html?b=live' },
|
||||
{ name: 'Content-Planung', phase: 2, rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'content.html' },
|
||||
{ name: 'Technik', phase: 2, rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'bereich.html?b=technik' },
|
||||
{ name: 'Community', phase: 2, rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'bereich.html?b=community' },
|
||||
{ name: 'Schutz & Regeln', phase: 2, rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'bereich.html?b=schutz' },
|
||||
{ name: 'Reports & Review', phase: 2, rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'report.html' },
|
||||
{ name: 'Calls & Protokolle', phase: 3, rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'calls.html' },
|
||||
{ name: 'Scout-Pipeline', phase: 3, rollen: ['admin', 'manager', 'scout'], ziel: 'scouting.html' },
|
||||
{ name: 'Automationen', phase: 4, rollen: ['admin', 'manager'], ziel: 'automation.html' },
|
||||
Alle im selben Raster (24×24), alle nur aus Linien -- gefüllte Zeichen
|
||||
wirken neben Text wie Flecken. Eigene statt einer Fremdbibliothek:
|
||||
siebzehn Pfade sind kleiner als jede Schriftart und kosten keine
|
||||
zusätzliche Lieferkette. */
|
||||
|
||||
const ZEICHEN = {
|
||||
dashboard: ['M4.5 4.5h6v6h-6z', 'M13.5 4.5h6v4h-6z', 'M13.5 11.5h6v8h-6z', 'M4.5 13.5h6v6h-6z'],
|
||||
aufgaben: ['M4.5 5h4v14h-4z', 'M10 5h4v9h-4z', 'M15.5 5h4v11.5h-4z'],
|
||||
kalender: ['M4 6.5h16v13H4z', 'M4 10.5h16', 'M8.5 3.5v4', 'M15.5 3.5v4'],
|
||||
calls: ['M3.5 7h11v10h-11z', 'M14.5 11l6-3.5v9l-6-3.5z'],
|
||||
dateien: ['M3.5 6.5h5.5l2 2h9.5v11h-17z'],
|
||||
profil: ['M12 7a3.2 3.2 0 1 0 0 6.4A3.2 3.2 0 0 0 12 7z',
|
||||
'M5.5 20c.7-3.3 3.3-5.3 6.5-5.3s5.8 2 6.5 5.3'],
|
||||
startcheck: ['M6 4.5h12v15H6z', 'M9.2 9.6l1.7 1.7 3.6-3.7', 'M9.2 15.2h5.6'],
|
||||
live: ['M12 10.2a1.8 1.8 0 1 0 0 3.6 1.8 1.8 0 0 0 0-3.6z',
|
||||
'M8.2 8.2a5.4 5.4 0 0 0 0 7.6', 'M15.8 15.8a5.4 5.4 0 0 0 0-7.6',
|
||||
'M5.4 5.4a9.4 9.4 0 0 0 0 13.2', 'M18.6 18.6a9.4 9.4 0 0 0 0-13.2'],
|
||||
content: ['M3.5 6h17v13h-17z', 'M3.5 10h17', 'M8 6l-1.4 4', 'M13 6l-1.4 4', 'M18 6l-1.4 4'],
|
||||
technik: ['M4 7.5h16', 'M4 12h16', 'M4 16.5h16',
|
||||
'M9 7.5a1.4 1.4 0 1 0 0-.02z', 'M15 12a1.4 1.4 0 1 0 0-.02z',
|
||||
'M7.5 16.5a1.4 1.4 0 1 0 0-.02z'],
|
||||
community: ['M9 8.6a2.7 2.7 0 1 0 0 5.4 2.7 2.7 0 0 0 0-5.4z',
|
||||
'M3.5 19.5c.6-2.8 2.8-4.5 5.5-4.5s4.9 1.7 5.5 4.5',
|
||||
'M16 8.8a2.4 2.4 0 1 1 1.6 4.3', 'M17 15.2c2 .5 3.3 2 3.7 4.3'],
|
||||
schutz: ['M12 3.6 5.6 6.3v5.1c0 3.8 2.6 7.2 6.4 8.4 3.8-1.2 6.4-4.6 6.4-8.4V6.3z',
|
||||
'M9.4 11.8l1.9 1.9 3.4-3.6'],
|
||||
reports: ['M4 19.5h16', 'M7.5 16.5V9.5', 'M12 16.5V5.5', 'M16.5 16.5v-5'],
|
||||
personen: ['M14.4 6.2a4 4 0 1 0 0 8 4 4 0 0 0 0-8z', 'M11.6 12.2 4 19.8',
|
||||
'M6.4 17.4l2 2', 'M8.6 15.2l2 2'],
|
||||
scouting: ['M3.5 5.5h17l-6.6 7.6v6.4l-3.8-2.1v-4.3z'],
|
||||
wissen: ['M4 5h6.4c.9 0 1.6.7 1.6 1.6V19c0-.9-.7-1.6-1.6-1.6H4z',
|
||||
'M20 5h-6.4c-.9 0-1.6.7-1.6 1.6V19c0-.9.7-1.6 1.6-1.6H20z'],
|
||||
automation: ['M13.2 3.2 6 13.4h5.2l-.8 7.4 7.6-10.6h-5.2z'],
|
||||
};
|
||||
|
||||
/* ---------- Die Bereiche -------------------------------------------------
|
||||
|
||||
`rollen` steuert, wem ein Bereich überhaupt erscheint -- serverseitig
|
||||
wird es ohnehin noch einmal geprüft, das hier ist nur Höflichkeit.
|
||||
|
||||
`ton` ist der Farbplatz 1..8. Warum acht und nicht siebzehn: Siebzehn
|
||||
unterscheidbare Farben gibt es nicht. Ein erster Versuch mit einer
|
||||
eigenen Farbe je Kachel ergab Paare mit einem Abstand von 1.4 -- also
|
||||
praktisch dieselbe Farbe, und das sieht nach Zufall aus statt nach
|
||||
Absicht. Diese acht sind gegen genau diesen Hintergrund geprüft
|
||||
(Helligkeit, Farbstärke, Farbfehlsichtigkeit, Kontrast, alles
|
||||
bestanden) und so verteilt, dass in einer Zeile nie zweimal derselbe
|
||||
Ton steht. Die Farbe stützt nur -- was die Kachel IST, sagen Zeichen
|
||||
und Name. */
|
||||
|
||||
const GRUPPEN = [
|
||||
{
|
||||
name: 'Täglich',
|
||||
unter: 'Was du sowieso jeden Tag aufmachst',
|
||||
bereiche: [
|
||||
{ name: 'Dashboard', unter: 'Alle Creator auf einen Blick', zeichen: 'dashboard', ton: 1,
|
||||
gross: true, rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'uebersicht.html' },
|
||||
{ name: 'Aufgaben', unter: 'Offen, in Arbeit, Review', zeichen: 'aufgaben', ton: 7,
|
||||
rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'aufgaben.html' },
|
||||
{ name: 'Kalender', unter: 'Termine und Calls', zeichen: 'kalender', ton: 3,
|
||||
rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'kalender.html' },
|
||||
{ name: 'Calls & Protokolle', unter: 'Gespräche mit To-dos', zeichen: 'calls', ton: 5,
|
||||
rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'calls.html' },
|
||||
{ name: 'Dateien', unter: 'Ablage und Freigaben', zeichen: 'dateien', ton: 4,
|
||||
rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'dateien.html' },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Rund um den Creator',
|
||||
unter: 'Die Betreuungsakte – Stand, Zahlen, Verlauf',
|
||||
bereiche: [
|
||||
{ name: 'Creator-Profile', unter: 'Ziele und 90-Tage-Plan', zeichen: 'profil', ton: 1,
|
||||
rollen: ['admin', 'manager', 'scout'], ziel: 'profil.html' },
|
||||
{ name: 'Mein Profil', unter: 'Deine Ziele und Pläne', zeichen: 'profil', ton: 1,
|
||||
rollen: ['creator'], ziel: 'profil.html' },
|
||||
{ name: 'Start-Check', unter: 'Erstanalyse, 16 Punkte', zeichen: 'startcheck', ton: 3,
|
||||
rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'startcheck.html' },
|
||||
{ name: 'LIVE-Analyse', unter: 'Vorher, während, danach', zeichen: 'live', ton: 8,
|
||||
rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'bereich.html?b=live' },
|
||||
{ name: 'Content-Planung', unter: 'Idee bis Upload', zeichen: 'content', ton: 2,
|
||||
rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'content.html' },
|
||||
{ name: 'Community', unter: 'Moderation und Konflikte', zeichen: 'community', ton: 5,
|
||||
rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'bereich.html?b=community' },
|
||||
{ name: 'Technik', unter: 'Setup, Fehler, Lösungen', zeichen: 'technik', ton: 4,
|
||||
rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'bereich.html?b=technik' },
|
||||
{ name: 'Schutz & Regeln', unter: 'Richtlinien und Vorfälle', zeichen: 'schutz', ton: 7,
|
||||
rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'bereich.html?b=schutz' },
|
||||
{ name: 'Reports & Review', unter: 'Woche und Entscheidung', zeichen: 'reports', ton: 6,
|
||||
rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'report.html' },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Team & System',
|
||||
unter: 'Was den Laden am Laufen hält',
|
||||
bereiche: [
|
||||
{ name: 'Personen & Zugänge', unter: 'Rollen und Codes', zeichen: 'personen', ton: 4,
|
||||
rollen: ['admin', 'manager'], ziel: 'personen.html' },
|
||||
{ name: 'Scout-Pipeline', unter: 'Entdeckt bis übergeben', zeichen: 'scouting', ton: 3,
|
||||
rollen: ['admin', 'manager', 'scout'], ziel: 'scouting.html' },
|
||||
{ name: 'Wissens-Bibliothek', unter: 'Anleitungen und PDFs', zeichen: 'wissen', ton: 1,
|
||||
rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'wissen.html' },
|
||||
{ name: 'Automationen', unter: 'Was von allein passiert', zeichen: 'automation', ton: 7,
|
||||
rollen: ['admin', 'manager'], ziel: 'automation.html' },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
/* Welcher Hinweis gehört auf welche Kachel. Die Zahl auf der Kachel ist
|
||||
damit KEIN neuer Zähler, sondern dieselbe Quelle wie die Liste
|
||||
darüber -- sonst stünden irgendwann zwei verschiedene Wahrheiten
|
||||
übereinander auf einem Bildschirm. */
|
||||
const HINWEIS_ZU_KACHEL = {
|
||||
aufgaben_ueberfaellig: 'Aufgaben',
|
||||
aufgaben_heute: 'Aufgaben',
|
||||
aufgaben_review: 'Aufgaben',
|
||||
termine_heute: 'Kalender',
|
||||
protokoll_fehlt: 'Calls & Protokolle',
|
||||
dateien_review: 'Dateien',
|
||||
bereiche_dringend: 'LIVE-Analyse',
|
||||
startcheck_handlung: 'Start-Check',
|
||||
ohne_startcheck: 'Start-Check',
|
||||
followup_faellig: 'Scout-Pipeline',
|
||||
uebergabe_offen: 'Scout-Pipeline',
|
||||
review_faellig: 'Reports & Review',
|
||||
review_bald: 'Reports & Review',
|
||||
ohne_betreuung: 'Personen & Zugänge',
|
||||
ohne_profil: 'Creator-Profile',
|
||||
};
|
||||
|
||||
const $ = (id) => document.getElementById(id);
|
||||
const el = (tag, klasse, text) => {
|
||||
const k = document.createElement(tag);
|
||||
if (klasse) k.className = klasse;
|
||||
if (text !== undefined) k.textContent = text;
|
||||
return k;
|
||||
};
|
||||
|
||||
function zeichenBauen(name) {
|
||||
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
||||
svg.setAttribute('viewBox', '0 0 24 24');
|
||||
svg.setAttribute('aria-hidden', 'true');
|
||||
svg.setAttribute('class', 'kachel__svg');
|
||||
for (const d of (ZEICHEN[name] || [])) {
|
||||
const p = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
||||
p.setAttribute('d', d);
|
||||
svg.append(p);
|
||||
}
|
||||
return svg;
|
||||
}
|
||||
|
||||
let ich = null;
|
||||
let hinweise = [];
|
||||
|
||||
/* ---------- Aufbau ------------------------------------------------------- */
|
||||
|
||||
function bereicheBauen() {
|
||||
const ziel = $('bereiche');
|
||||
ziel.textContent = '';
|
||||
|
||||
/* Zahlen je Kachel aus den Hinweisen zusammenzählen. Warnstufe
|
||||
schlägt durch: Eine Kachel mit etwas Überfälligem ist rot, auch
|
||||
wenn daneben Harmloses mitgezählt wird. */
|
||||
const zahlen = new Map();
|
||||
for (const h of hinweise) {
|
||||
const kachel = HINWEIS_ZU_KACHEL[h.art];
|
||||
if (!kachel) continue;
|
||||
const bisher = zahlen.get(kachel) || { n: 0, warn: false };
|
||||
bisher.n += h.anzahl;
|
||||
if (h.stufe === 'warnung') bisher.warn = true;
|
||||
zahlen.set(kachel, bisher);
|
||||
}
|
||||
|
||||
let laufNr = 0;
|
||||
for (const gruppe of GRUPPEN) {
|
||||
const meine = gruppe.bereiche.filter((b) => b.rollen.includes(ich.rolle));
|
||||
if (!meine.length) continue;
|
||||
|
||||
const abschnitt = el('section', 'gruppe');
|
||||
const kopf = el('div', 'gruppe__kopf');
|
||||
kopf.append(el('h2', 'gruppe__name', gruppe.name));
|
||||
kopf.append(el('span', 'gruppe__unter', gruppe.unter));
|
||||
abschnitt.append(kopf);
|
||||
|
||||
const liste = el('ul', 'kacheln');
|
||||
for (const b of meine) {
|
||||
const li = el('li', 'kachel');
|
||||
li.dataset.ton = String(b.ton);
|
||||
if (b.gross) li.dataset.gross = 'ja';
|
||||
/* Der Einlauf wird gestaffelt -- aber über eine Eigenschaft, die
|
||||
bei "weniger Bewegung" nichts tut (siehe start.css). */
|
||||
li.style.setProperty('--nr', String(laufNr++));
|
||||
|
||||
const a = el('a', 'kachel__link');
|
||||
a.href = b.ziel;
|
||||
|
||||
const zeichen = el('span', 'kachel__zeichen');
|
||||
zeichen.append(zeichenBauen(b.zeichen));
|
||||
a.append(zeichen);
|
||||
|
||||
const text = el('span', 'kachel__text');
|
||||
text.append(el('span', 'kachel__name', b.name));
|
||||
text.append(el('span', 'kachel__unter', b.unter));
|
||||
a.append(text);
|
||||
|
||||
const zahl = zahlen.get(b.name);
|
||||
if (zahl && zahl.n > 0) {
|
||||
const marke = el('span', 'kachel__zahl', String(zahl.n));
|
||||
if (zahl.warn) marke.dataset.warn = 'ja';
|
||||
/* Vorlesende Programme bekommen einen Satz statt einer nackten
|
||||
Zahl -- "Aufgaben, 3" sagt nichts. */
|
||||
marke.setAttribute('aria-label', `${zahl.n} offene Punkte in ${b.name}`);
|
||||
a.append(marke);
|
||||
} else {
|
||||
a.append(el('span', 'kachel__pfeil', '→'));
|
||||
}
|
||||
|
||||
li.append(a);
|
||||
liste.append(li);
|
||||
}
|
||||
abschnitt.append(liste);
|
||||
ziel.append(abschnitt);
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- Laden -------------------------------------------------------- */
|
||||
|
||||
async function laden() {
|
||||
let ich;
|
||||
try {
|
||||
const antwort = await fetch('/workspace/api/ich', { credentials: 'same-origin' });
|
||||
if (!antwort.ok) { location.assign('/workspace/'); return; }
|
||||
@@ -58,39 +272,17 @@
|
||||
}
|
||||
|
||||
$('wer').textContent = `${ich.name} · ${ich.rolle_name || ich.rolle}`;
|
||||
$('gruss').textContent = `Willkommen, ${ich.name}`;
|
||||
/* Tageszeit statt immer "Willkommen". Kostet nichts und macht aus
|
||||
einer Maske eine Begrüßung. */
|
||||
const stunde = new Date().getHours();
|
||||
const tageszeit = stunde < 5 ? 'Noch wach' : stunde < 11 ? 'Guten Morgen'
|
||||
: stunde < 18 ? 'Guten Tag' : 'Guten Abend';
|
||||
$('gruss').textContent = `${tageszeit}, ${ich.name}`;
|
||||
$('rollentext').textContent = ROLLENTEXT[ich.rolle] || ich.rolle;
|
||||
|
||||
const liste = $('bereiche');
|
||||
for (const b of BEREICHE.filter((b) => b.rollen.includes(ich.rolle))) {
|
||||
const li = document.createElement('li');
|
||||
li.className = 'bereich';
|
||||
li.dataset.phase = String(b.phase);
|
||||
if (b.ziel) li.dataset.fertig = 'ja';
|
||||
|
||||
const name = document.createElement('span');
|
||||
name.className = 'bereich__name';
|
||||
name.textContent = b.name;
|
||||
|
||||
const stand = document.createElement('span');
|
||||
stand.className = 'bereich__stand';
|
||||
stand.textContent = b.ziel ? 'öffnen' : (b.phase === 1 ? 'als Nächstes' : `Phase ${b.phase}`);
|
||||
|
||||
if (b.ziel) {
|
||||
/* Fertige Bereiche sind echte Verweise -- Tastatur und
|
||||
Rechtsklick funktionieren damit wie gewohnt. */
|
||||
const a = document.createElement('a');
|
||||
a.className = 'bereich__link';
|
||||
a.href = b.ziel;
|
||||
a.append(name, stand);
|
||||
li.append(a);
|
||||
} else {
|
||||
li.append(name, stand);
|
||||
}
|
||||
liste.append(li);
|
||||
}
|
||||
|
||||
/* Die Hinweise zuerst -- die Kacheln brauchen ihre Zahlen. */
|
||||
await hinweiseLaden();
|
||||
bereicheBauen();
|
||||
await zahlenLaden();
|
||||
}
|
||||
|
||||
@@ -124,34 +316,32 @@
|
||||
daten = await antwort.json();
|
||||
} catch { return; }
|
||||
|
||||
hinweise = daten.hinweise || [];
|
||||
const liste = $('dran');
|
||||
liste.textContent = '';
|
||||
if (!daten.hinweise.length) { $('dran-block').hidden = true; return; }
|
||||
if (!hinweise.length) { $('dran-block').hidden = true; return; }
|
||||
|
||||
for (const h of daten.hinweise) {
|
||||
const li = document.createElement('li');
|
||||
li.className = 'dran__punkt';
|
||||
for (const h of hinweise) {
|
||||
const li = el('li', 'dran__punkt');
|
||||
li.dataset.stufe = h.stufe;
|
||||
|
||||
/* Jeder Hinweis fuehrt irgendwohin -- ein Hinweis ohne Ziel ist
|
||||
nur ein schlechtes Gewissen. */
|
||||
const a = document.createElement('a');
|
||||
a.className = 'dran__link';
|
||||
const a = el('a', 'dran__link');
|
||||
a.href = h.ziel;
|
||||
|
||||
const text = document.createElement('span');
|
||||
text.className = 'dran__text';
|
||||
text.textContent = (EINZAHL[h.art] || ((n) => `${n} × ${h.text}`))(h.anzahl);
|
||||
|
||||
const pfeil = document.createElement('span');
|
||||
pfeil.className = 'dran__pfeil';
|
||||
a.append(el('span', 'dran__text',
|
||||
(EINZAHL[h.art] || ((n) => `${n} × ${h.text}`))(h.anzahl)));
|
||||
const pfeil = el('span', 'dran__pfeil', '→');
|
||||
pfeil.setAttribute('aria-hidden', 'true');
|
||||
pfeil.textContent = '→';
|
||||
|
||||
a.append(text, pfeil);
|
||||
a.append(pfeil);
|
||||
li.append(a);
|
||||
liste.append(li);
|
||||
}
|
||||
/* Sieben Hinweise untereinander sind eine Wand -- und die
|
||||
wichtigsten stehen ohnehin oben (der Server sortiert nach Stufe).
|
||||
Sichtbar bleiben vier, der Rest ist einen Klick entfernt.
|
||||
Derselbe Helfer wie im Protokoll und im Verlauf. */
|
||||
window.klappe?.(liste, $('dran-schalter'), $('dran-schalter-text'));
|
||||
$('dran-block').hidden = false;
|
||||
}
|
||||
|
||||
@@ -174,27 +364,31 @@
|
||||
daten = await antwort.json();
|
||||
} catch { return; }
|
||||
|
||||
/* Sechs Nullen nebeneinander sind kein Bericht, sondern Rauschen.
|
||||
Wenn wirklich nichts offen ist, steht dort ein Satz -- und der
|
||||
Platz gehört den Bereichen. */
|
||||
const summe = ZAHLEN.reduce((n, z) => n + (daten[z.schluessel] ?? 0), 0);
|
||||
const block = $('zahlen-block');
|
||||
if (!summe) {
|
||||
block.dataset.leer = 'ja';
|
||||
$('zahlen').textContent = '';
|
||||
$('zahlen-leer').hidden = false;
|
||||
return;
|
||||
}
|
||||
block.removeAttribute('data-leer');
|
||||
$('zahlen-leer').hidden = true;
|
||||
|
||||
const liste = $('zahlen');
|
||||
liste.textContent = '';
|
||||
for (const z of ZAHLEN) {
|
||||
const wert = daten[z.schluessel] ?? 0;
|
||||
const li = document.createElement('li');
|
||||
li.className = 'zahl';
|
||||
const li = el('li', 'zahl');
|
||||
if (z.warn && wert > 0) li.dataset.warn = 'ja';
|
||||
|
||||
const n = document.createElement('span');
|
||||
n.className = 'zahl__wert';
|
||||
n.textContent = String(wert);
|
||||
|
||||
const t = document.createElement('span');
|
||||
t.className = 'zahl__name';
|
||||
t.textContent = z.name;
|
||||
|
||||
li.append(n, t);
|
||||
li.append(el('span', 'zahl__wert', String(wert)));
|
||||
li.append(el('span', 'zahl__name', z.name));
|
||||
liste.append(li);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
laden();
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user