DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Kennzahlen werden Wege, Team wird sichtbar, Felder bekommen ein Aussehen

Browse Source 
Vier Wuensche vom 01.09.2026, dazu ein gemeldeter Fehler.

SCREEN 1 -- "wenn man auf die Kisten drueckt, sofort zu der Seite,
diesem Punkt". Jede Kennzahl im Bericht fuehrt jetzt dorthin, wo die
gezaehlten Dinge stehen: nicht nur auf die richtige Seite, sondern auf
die richtige Stelle (?zeigen=...). Ein gemeinsamer Helfer in kopf.js,
damit nicht jede Seite ihr eigenes Sprungverhalten erfindet.

  Auf dem Aufgabenbrett wird HERVORGEHOBEN, nicht gefiltert -- das Brett
  lebt davon, dass man die vier Spalten nebeneinander sieht. Bei den
  Dateien wird gefiltert, denn die Seite hat ohnehin eine Filterleiste,
  und deren Knoepfe zeigen dann mit an, wo man steht. Der Kalender
  schaltet auf die Liste um: In der Monatsansicht liesse sich
  "vergangen" gar nicht sinnvoll markieren.

  Immer mit einem Weg zurueck ("Alles zeigen"), der auch den Parameter
  aus der Adresse nimmt. Eine Seite, die gefiltert bleibt, ist eine
  Falle: Man kommt spaeter wieder, sieht drei von zwanzig Aufgaben und
  haelt das fuer den Bestand.

  Drei Entscheidungen gegen den ersten Entwurf:
  * KEIN ?creator= im Verweis. Das sah hilfreich aus und waere eine
    Luege gewesen -- keine Zielseite liest den Wert.
  * Kisten mit Null fuehren NIRGENDWOHIN. Ein Weg zu null Dingen ist
    eine Enttaeuschung, kein Angebot.
  * "neu angelegt" fuehrt ohne Ausschnitt aufs Brett: Der Bericht zaehlt
    einen Zeitraum, das Brett kennt keinen. Eine Hervorhebung, die nicht
    dieselbe Menge trifft, ist schlimmer als keine.

SCREEN 2 -- "ich will, dass wir Manager, Scouts, DogFather auch die
Fotos, Namen und so alles sehen". Der Steckbrief war eine Einbahnstrasse:
Jeder pflegte seinen, niemand bekam ihn je zu Gesicht. Die
Schnittstelle dafuer lag fertig da und wurde von keiner Seite
aufgerufen. Jetzt steht "Das Team" auf steckbrief.html und (fuer
Creator) auf profil.html -- nach Rollen gruppiert, mit Bild, Rolle,
eigenem Satz und Kanaelen. Wer wen sieht, entscheidet weiterhin der
Server; ein Creator sieht seine Betreuung, nicht die anderen Creator.

SCREEN 4 -- "das soll richtig geil aussehen und nicht so einfach, auch
die Schrift". Die Ursache war kein Geschmack, sondern ein Loch im
Aufbau: Jede Seite gestaltete ihre Felder mit einem EIGENEN Selektor,
und wer ein Feld anderswo hinsetzt, faellt durch alle Netze. Genau so
stand "Ein Satz ueber dich" als grauer Kasten in MONOSPACE da --
<textarea> faellt ohne `font: inherit` auf Schreibmaschinenschrift
zurueck. Jetzt gibt es eine Grundlage fuer jedes Feld, und die drei
wortgleichen Kopien in aufgaben/profil/bereich sind weg.

  Der erste Anlauf setzte dort auch `width: 100%` -- die Pruefung
  meldete sofort Felder von 28 statt 362 Pixeln. Breite ist LAYOUT und
  gehoert der Seite; eine Grundlage mit Staerke null verliert jeden
  Breitenstreit, also darf sie ihn nicht anfangen.

SCREEN 5 -- "wieso seh ich mein Bild da nicht?" Ein lehrreicher Fehler:
Der Server liefert das Bild laengst mit, und im Quelltext dort steht
ausdruecklich "es steht in der Kopfleiste JEDER Seite UND IN DER
BEGRUESSUNG". Die Absicht war aufgeschrieben, die Haelfte nie gebaut --
und aufgefallen ist es nicht, weil ein Buchstabe im Kreis nicht falsch
aussieht, nur eben nicht wie man selbst.

PRUEFUNGEN. Zwei neue (pruef-sprung, pruef-team), eine erweiterte
(pruef-formulare). Sie haben vier echte Fehler gefunden, die mit blossem
Auge nicht zu sehen waren:
  * Der Sprung auf "dringend" hob auch ERLEDIGTE dringende Eintraege
    hervor -- man klickt auf "2" und bekommt drei markiert.
  * Auf einer leeren Zielseite erschien gar keine Erklaerung (frueher
    Ausstieg uebersprang sie). Das ist der wichtigere Fall: Wer auf eine
    Zahl klickt und im Leeren landet, glaubt, er sei falsch abgebogen.
  * Das Kachel-Merkzeichen stiess mit der Zahl zusammen.
  * Die Feldpruefung fand vier RICHTIGE Felder falsch (die Kanaele holen
    ihren Rahmen vom Umschlag mit dem "@"). Eine Pruefung, die
    Richtiges anmahnt, gewoehnt man sich ab zu lesen.
Und zwei Faelle, in denen die Pruefung sich selbst belogen haette: null
gefundene Felder galten als "in Ordnung", und der Ueberdeckungsvergleich
war nach einer Aenderung ohne ein einziges Vergleichselement gruen.
Beide zaehlen jetzt mit, wie viel sie tatsaechlich angesehen haben.

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
DogFatherGit
2026-09-01 20:18:39 +02:00
co-authored by Claude Opus 5
parent d4cd8952b7
commit a129525cb7
58 changed files with 1896 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files
workspace/assets/js/aufgaben.js
+43 -1
View File
@@ -34,6 +34,9 @@
const $ = (id) => document.getElementById(id);
const heute = new Date().toISOString().slice(0, 10);
let ich = null;
/* Nur beim ERSTEN Laden springen. Sonst reisst es die Seite nach
jeder Statusaenderung erneut an dieselbe Stelle. */
let gesprungen = false;
/* Texte werden ausschließlich über textContent gesetzt, nie über
innerHTML -- ein Aufgabentitel darf keine Auszeichnung einschleusen. */
@@ -236,6 +239,9 @@
const eigene = aufgaben.filter((a) => a.status === s.status);
const spalte = el('section', 'spalte');
spalte.dataset.status = s.status;
/* Die Karte merkt sich, wozu sie gehoert -- daraus findet der
Sprung vom Bericht die richtigen wieder, ohne die Liste ein
zweites Mal durchzugehen. */
const kopf = el('h2', 'spalte__kopf');
kopf.append(el('span', 'spalte__punkt'), el('span', null, s.name),
@@ -246,17 +252,53 @@
spalte.append(el('p', 'spalte__unter', s.unter));
if (!eigene.length) spalte.append(el('p', 'spalte__leer', s.leer));
else for (const a of eigene) spalte.append(karte(a));
else for (const a of eigene) {
const k = karte(a);
k.dataset.status = a.status;
if (a.status !== 'erledigt' && a.frist && a.frist < heute) k.dataset.faellig = 'ja';
spalte.append(k);
}
brett.append(spalte);
}
}
/* ---------- Sprung vom Bericht -------------------------------------------
"wenn man auf die Kisten drueckt, sofort zu diesem Punkt
weitergeschickt werden" (01.09.2026).
Hier wird NICHT gefiltert, sondern hervorgehoben. Das Brett lebt
davon, dass man alle vier Spalten nebeneinander sieht -- wer nur die
ueberfaelligen zeigt, nimmt genau den Ueberblick weg, wegen dem man
hergekommen ist. */
const ZEIG_TEXT = {
offen: 'Aufgaben, die offen sind',
arbeit: 'Aufgaben, die gerade laufen',
review: 'Aufgaben, die auf Freigabe warten',
erledigt: 'Aufgaben, die erledigt sind',
ueberfaellig: 'Aufgaben, deren Frist vorbei ist',
};
function sprungZeigen() {
const was = window.zielSchluessel?.();
if (!was || !ZEIG_TEXT[was]) return;
const treffer = was === 'ueberfaellig'
? document.querySelectorAll('.karte[data-faellig="ja"]')
: document.querySelectorAll(`.karte[data-status="${was}"]`);
window.zielMarkieren?.(treffer, ZEIG_TEXT[was]);
}
async function laden() {
try {
const antwort = await hole('/workspace/api/aufgaben');
if (!antwort.ok) { melde('Aufgaben konnten nicht geladen werden.'); return; }
zeichne((await antwort.json()).aufgaben);
/* Erst NACH dem Zeichnen -- vorher gibt es die Karten nicht, und
der Sprung ginge ins Leere, ohne dass jemand etwas merkt. Nur
beim ersten Laden: Sonst springt die Seite nach jeder
Statusaenderung erneut weg. */
if (!gesprungen) { gesprungen = true; sprungZeigen(); }
} catch { /* bereits umgeleitet */ }
}
workspace/assets/js/bereich.js
+39
View File
@@ -33,6 +33,9 @@
let bereich = null;
let einstellung = null;
let filter = '';
/* Nur beim ersten Laden springen -- sonst reisst es die Seite nach
jeder Bewertung erneut an dieselbe Stelle. */
let gesprungen = false;
const el = (tag, klasse, text) => {
const k = document.createElement(tag);
@@ -116,6 +119,30 @@
return k;
}
/* Sprung vom Bericht (01.09.2026). "dringend" ist kein Filter der
Seite -- die Dringlichkeit steht als data-dringlich an der Karte,
und genau die wird hervorgehoben. "offen" dagegen IST ein Filter,
der wurde schon vor dem ersten Laden gesetzt. */
function sprungZeigen(ziel, karten) {
if (gesprungen) return;
gesprungen = true;
const was = window.zielSchluessel?.();
if (was === 'dringend') {
/* OFFEN und hoch -- genau so zaehlt der Bericht (workspace-reports.js:
"status = 'offen' AND dringlichkeit = 'hoch'"). Ohne das
status-Merkmal hebt die Seite auch erledigte dringende Eintraege
hervor: Man klickt auf "2" und bekommt drei markiert. Gefunden
von pruef-sprung.mjs -- mit blossem Auge waere das nie
aufgefallen, beide Zahlen sehen plausibel aus. */
window.zielMarkieren?.(
ziel.querySelectorAll('.eintrag-karte[data-dringlich="hoch"][data-status="offen"]'),
'Einträge, die offen und als dringend eingestuft sind');
} else if (was === 'offen') {
window.zielMarkieren?.([...karten.values()], 'Einträge, die noch offen sind',
async () => { filter = ''; await laden(); });
}
}
function filterBauen() {
const ziel = $('filter');
ziel.textContent = '';
@@ -152,6 +179,12 @@
ziel.append(el('p', 'leer-hinweis', daten.eintraege.length
? 'Zu dieser Auswahl gibt es nichts.'
: 'Noch kein Eintrag in diesem Bereich.'));
/* AUCH HIER springen -- und das ist kein Schoenheitsfehler,
sondern der wichtigere Fall: Wer auf "3 dringende Punkte"
klickt und auf einer leeren Seite landet, glaubt, er sei
falsch abgebogen. Die Leiste sagt ihm, dass er richtig ist und
die Sache erledigt. */
sprungZeigen(ziel, new Map());
return;
}
const karten = new Map();
@@ -160,6 +193,7 @@
karten.set(e.id, k);
ziel.append(k);
}
sprungZeigen(ziel, karten);
/* Bewertung und Rueckmeldungen. In EINER Abfrage fuer die ganze
Liste -- zwanzig Eintraege einzeln zu fragen waeren zwanzig
@@ -341,6 +375,11 @@
} catch { /* Zuordnung bleibt leer */ }
}
/* Kommt jemand vom Bericht mit "nur die offenen", wird der Filter
VOR dem ersten Laden gesetzt -- sonst baut die Seite alles auf,
um es gleich wieder wegzuwerfen, und das flackert sichtbar. */
if (window.zielSchluessel?.() === 'offen') filter = 'offen';
await laden();
})();
})();
workspace/assets/js/content.js
+26
View File
@@ -183,6 +183,11 @@
function karte(e) {
const k = el('article', 'video');
if (e.saeule_slot) k.dataset.slot = String(e.saeule_slot);
/* Fuer den Sprung vom Bericht: Die Karte traegt ihren Zustand und
ihre Dringlichkeit, damit "3 Content: offen" genau diese drei
hervorheben kann statt nur die Seite zu oeffnen. */
k.dataset.status = e.status;
if (e.dringlichkeit) k.dataset.dringlich = e.dringlichkeit;
k.append(el('h3', 'video__titel', e.titel));
@@ -455,9 +460,30 @@
streckeZeigen();
saeulenZeigen();
saeulenAuswahlFuellen();
/* Sprung vom Bericht -- nach streckeZeigen(), vorher gibt es die
Karten nicht. Nur beim ersten Laden. */
if (!gesprungen) { gesprungen = true; sprungZeigen(); }
await kennzahlenLaden();
}
/* Sprung vom Bericht (01.09.2026). Hervorheben statt filtern: Die
Strecke lebt davon, dass man Idee, Produktion und Veroeffentlicht
nebeneinander sieht -- wer nur die offenen zeigt, nimmt genau den
Ueberblick weg, wegen dem man hergekommen ist. */
let gesprungen = false;
function sprungZeigen() {
const was = window.zielSchluessel?.();
if (was === 'offen') {
window.zielMarkieren?.(document.querySelectorAll('.video[data-status="offen"]'),
'Content-Einträge, die noch offen sind');
} else if (was === 'dringend') {
/* offen UND hoch -- genau so zaehlt der Bericht. */
window.zielMarkieren?.(
document.querySelectorAll('.video[data-dringlich="hoch"][data-status="offen"]'),
'Content-Einträge, die offen und als dringend eingestuft sind');
}
}
function saeulenAuswahlFuellen() {
const feld = $('f-saeule');
const vorher = feld.value;
workspace/assets/js/dateien.js
+56
View File
@@ -313,12 +313,56 @@
ziel.append(el('p', 'leer-hinweis', daten.dateien.length
? 'In diesem Zustand liegt gerade nichts.'
: 'Noch keine Datei abgelegt.'));
/* AUCH HIER springen, und das ist der wichtigere Fall: Wer auf
"2 Dateien im Review" klickt und auf einer leeren Seite
landet, glaubt, er sei falsch abgebogen. Die Leiste sagt ihm,
dass er richtig ist und die Sache erledigt.
(Dieselbe Luecke gab es in bereich.js -- ein frueher Ausstieg
ueberspringt eben alles, was danach kommt.) */
if (!gesprungen) { gesprungen = true; sprungZeigen(); }
return;
}
for (const d of sichtbar) ziel.append(zeile(d));
/* Sprung vom Bericht -- erst NACH dem Zeichnen, vorher gibt es die
Zeilen nicht. Nur beim ersten Mal, sonst reisst es die Seite bei
jeder Statusaenderung wieder weg. */
if (!gesprungen) { gesprungen = true; sprungZeigen(); }
} catch { /* umgeleitet */ }
}
/* ---------- Sprung vom Bericht -------------------------------------------
Anders als beim Aufgabenbrett wird hier WIRKLICH gefiltert: Diese
Seite hat ohnehin eine Filterleiste, und die Zustandsknoepfe darin
zeigen dann mit an, wo man gerade steht. Ein zweites, unsichtbares
Auswahlverfahren daneben waere verwirrend. */
const ZEIG_STATUS = { review: 'review', frei: 'freigegeben', entwurf: 'entwurf' };
const ZEIG_TEXT = {
review: 'Dateien, die auf Freigabe warten',
frei: 'Dateien, die freigegeben sind',
entwurf: 'Dateien im Entwurf',
};
function sprungZeigen() {
const was = window.zielSchluessel?.();
if (!was || !ZEIG_STATUS[was]) return;
window.zielMarkieren?.(
document.querySelectorAll(`#liste .datei[data-status="${ZEIG_STATUS[was]}"]`),
ZEIG_TEXT[was],
/* Beim "Alles zeigen" faellt auch der Filter -- sonst bliebe die
Seite ausgeschnitten, und man haelt drei Dateien fuer alles,
was da ist. */
async () => {
filter = '';
for (const x of $('filter').querySelectorAll('.schritt')) {
x.setAttribute('aria-pressed', String(!x.dataset.status));
}
await laden();
});
}
let gesprungen = false;
for (const b of $('filter').querySelectorAll('.schritt')) {
b.addEventListener('click', async () => {
filter = b.dataset.status;
@@ -363,6 +407,18 @@
$('zuordnung').hidden = false;
$('f-creator').closest('.feld').hidden = true;
}
/* Kommt jemand vom Bericht, wird der Filter VOR dem ersten Laden
gesetzt -- sonst baut die Seite erst alles auf, um es gleich
wieder wegzuwerfen, und das sieht man flackern. Die Filterleiste
zeigt danach von selbst, wo man steht. */
const was = window.zielSchluessel?.();
if (was && ZEIG_STATUS[was]) {
filter = ZEIG_STATUS[was];
for (const x of $('filter').querySelectorAll('.schritt')) {
x.setAttribute('aria-pressed', String(x.dataset.status === filter));
}
}
await laden();
})();
})();
workspace/assets/js/kalender.js
+36
View File
@@ -768,9 +768,33 @@
baueSaison();
baueMonatsanlaesse();
zeichnen();
/* Sprung vom Bericht -- erst NACH dem Zeichnen, vorher gibt es die
Tagesbloecke nicht. Nur beim ersten Mal: Sonst reisst es die
Ansicht bei jedem Monatswechsel wieder an dieselbe Stelle. */
if (!gesprungen) { gesprungen = true; sprungZeigen(); }
} catch { /* umgeleitet */ }
}
/* ---------- Sprung vom Bericht -------------------------------------------
Der Bericht zaehlt "Termine gewesen" und "Termine stehen an" -- beides
Zeitraeume, keine Kategorien. In der Monatsansicht liessen sie sich
gar nicht sinnvoll hervorheben (ein Tageskaestchen enthaelt beides).
Deshalb schaltet der Sprung auf die LISTE um: Dort ist jeder Tag ein
eigener Block, und vergangen/kommend ist bereits daran vermerkt. */
function sprungZeigen() {
const was = window.zielSchluessel?.();
if (was !== 'vergangen' && was !== 'kommend') return;
const alle = [...document.querySelectorAll('.k-listentag')];
const treffer = was === 'vergangen'
? alle.filter((b) => b.dataset.vergangen === 'ja')
: alle.filter((b) => b.dataset.vergangen !== 'ja');
window.zielMarkieren?.(treffer, was === 'vergangen'
? 'Tage im Zeitraum, die schon vorbei sind'
: 'Tage, an denen noch etwas ansteht');
}
let gesprungen = false;
/* ---------- Bedienung ----------------------------------------------------- */
$('zurueck-zeit').addEventListener('click', () => springen(-1));
@@ -888,6 +912,18 @@
}
} catch { /* Zuordnung bleibt leer */ }
}
/* Vom Bericht kommend: VOR dem ersten Laden auf die Liste stellen,
sonst baut die Seite erst den Monat auf und wirft ihn gleich
wieder weg. Der Ansichtsknopf wird mitgesetzt -- sonst zeigt die
Leiste "Monat" an, waehrend die Liste dasteht. */
const wohin = window.zielSchluessel?.();
if (wohin === 'vergangen' || wohin === 'kommend') {
ansicht = 'liste';
for (const x of document.querySelectorAll('.k-ansicht')) {
x.setAttribute('aria-pressed', String(x.dataset.ansicht === 'liste'));
}
}
await laden();
})();
})();
workspace/assets/js/kopf.js
+98
View File
@@ -574,3 +574,101 @@
});
}
})();
/* ===================================================================
"Zeig mir genau das" -- der Sprung von einer Zahl zu dem, was sie zaehlt.
Wunsch vom 01.09.2026 zur Report-Seite: "wenn man auf die Kisten
drueckt, will ich sofort zu der Seite -- diesem Punkt --
weitergeschickt werden, wo man draufgedrueckt hat."
Eine Zahl auf einem Bericht ist eine Behauptung. Wer sie nicht
nachsehen kann, muss sie glauben -- und wer sie nachsehen will, sucht
sie auf der Zielseite von Hand zusammen. Genau dieser Weg faellt hier
weg.
Die Zahl fuehrt deshalb nicht nur auf die richtige SEITE, sondern auf
die richtige STELLE: ?zeigen=<schluessel> in der Adresse, die
Zielseite sucht die passenden Elemente, springt hin und hebt sie kurz
hervor.
EIN Helfer fuer alle Seiten und nicht fuenf eigene: Sonst springt die
eine Seite hart, die andere weich, die dritte hebt gar nichts hervor
-- und niemand traut dem Weg mehr.
Wichtig ist die RUECKNAHME. Eine Seite, die nach dem Sprung dauerhaft
gefiltert bleibt, ist eine Falle: Man kommt spaeter wieder, sieht
drei von zwanzig Aufgaben und haelt das fuer den ganzen Bestand.
Deshalb steht immer eine Zeile da, die sagt, was gerade gezeigt wird
-- mit einem Weg zurueck zu allem.
=================================================================== */
(() => {
'use strict';
const ZEIGEN = new URLSearchParams(location.search).get('zeigen') || '';
/** Was steht in der Adresse? Leerer Text, wenn nichts. */
window.zielSchluessel = () => ZEIGEN;
/** Hervorheben und hinspringen.
* elemente: was gemeint war (Feld, darf leer sein)
* text: was gerade gezeigt wird, in Worten
* aufraeumen: optional -- wird gerufen, wenn "alles zeigen" geklickt wird */
window.zielMarkieren = function (elemente, text, aufraeumen) {
const liste = [...(elemente || [])].filter(Boolean);
/* Die Zeile kommt IMMER, auch wenn nichts gefunden wurde. Ein
stiller Sprung ins Leere laesst einen glauben, man sei falsch
abgebogen -- dabei ist die Sache schlicht erledigt. */
const leiste = document.createElement('div');
leiste.className = 'ziel-leiste';
leiste.setAttribute('role', 'status');
const marke = document.createElement('span');
marke.className = 'ziel-leiste__marke';
marke.textContent = liste.length ? String(liste.length) : '0';
leiste.append(marke);
const satz = document.createElement('span');
satz.className = 'ziel-leiste__text';
satz.textContent = liste.length
? text
: text + ' – hier ist gerade nichts davon da.';
leiste.append(satz);
const weg = document.createElement('button');
weg.type = 'button';
weg.className = 'ziel-leiste__weg';
weg.textContent = 'Alles zeigen';
weg.addEventListener('click', () => {
for (const e of liste) e.removeAttribute('data-treffer');
leiste.remove();
/* Die Adresse mitaufraeumen: Sonst zeigt ein Neuladen wieder den
Ausschnitt, und man wundert sich, warum die Haelfte fehlt. */
const u = new URL(location.href);
u.searchParams.delete('zeigen');
history.replaceState(null, '', u);
aufraeumen?.();
});
leiste.append(weg);
const inhalt = document.querySelector('main.inhalt') || document.body;
const nach = inhalt.querySelector('.kopf-zeile');
if (nach && nach.nextSibling) inhalt.insertBefore(leiste, nach.nextSibling);
else inhalt.prepend(leiste);
for (const e of liste) e.dataset.treffer = 'ja';
/* Erst im naechsten Bild springen: Die Elemente sind gerade eben
entstanden, ihre Position steht noch nicht fest. */
if (liste.length) {
requestAnimationFrame(() => {
const ruhig = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
liste[0].scrollIntoView({
block: 'center', behavior: ruhig ? 'auto' : 'smooth',
});
});
}
return liste.length;
};
})();
workspace/assets/js/report.js
+77 -14
View File
@@ -50,8 +50,31 @@
return t;
}
function kachel(zahl, name, { trendEl = null, warn = false } = {}) {
const k = el('div', 'kachel');
/* BEWUSST OHNE die Creator-Auswahl im Verweis. Der erste Entwurf hängte
?creator=<nr> an -- das sah hilfreich aus und wäre eine Lüge gewesen:
Keine der Zielseiten liest diesen Wert. Aufgabenbrett, Dateien und
Bereiche zeigen immer alles, was die angemeldete Person sehen darf.
Ein Parameter, der nichts bewirkt, wird beim nächsten Mal für
lebenden Code gehalten und mitgepflegt.
Wenn diese Seiten einmal nach Creator filtern können, gehört er
wieder dazu -- dann aber zusammen mit der Stelle, die ihn ausliest. */
/* Eine Kennzahl. `ziel` macht daraus einen Weg zu genau der Stelle,
an der die gezaehlten Dinge stehen (Wunsch 01.09.2026: "wenn man
auf die Kisten drueckt, sofort zu diesem Punkt weitergeschickt
werden").
Eine Zahl ohne Weg dahin ist eine Behauptung: Man kann sie nur
glauben oder von Hand nachsuchen. */
function kachel(zahl, name, { trendEl = null, warn = false, ziel = null } = {}) {
const k = el(ziel ? 'a' : 'div', 'kachel' + (ziel ? ' kachel--weg' : ''));
if (ziel) {
k.href = ziel;
/* Der ganze Satz fuer Vorleseprogramme -- "3" allein sagt nichts,
und ein Verweis ohne erkennbares Ziel ist fuer sie wertlos. */
k.setAttribute('aria-label', `${name}: ${zahl} – ansehen`);
}
if (warn) k.dataset.warn = 'ja';
const wert = el('div', 'kachel__wert');
wert.append(el('span', 'kachel__zahl', String(zahl)));
@@ -60,6 +83,23 @@
return k;
}
/* Wohin fuehrt ein Betreuungsbereich? Drei liegen auf bereich.html,
Content hat eine eigene Seite. Die Zuordnung steht EINMAL hier --
zweimal abgeschrieben waere sie beim naechsten neuen Bereich an
einer der beiden Stellen vergessen. */
const BEREICH_ZIEL = {
live: 'bereich.html?b=live',
community: 'bereich.html?b=community',
technik: 'bereich.html?b=technik',
schutz: 'bereich.html?b=schutz',
content: 'content.html',
};
const bereichZiel = (b, zeigen) => {
const z = BEREICH_ZIEL[b];
if (!z) return null;
return zeigen ? z + (z.includes('?') ? '&' : '?') + 'zeigen=' + zeigen : z;
};
function block(titel, frage, inhalt) {
const b = el('section', 'block');
b.append(el('h2', 'block__titel', titel));
@@ -83,20 +123,41 @@
/* Was wurde erledigt? */
const k1 = el('div', 'kacheln');
k1.append(kachel(d.aufgaben.erledigt, 'Aufgaben erledigt',
{ trendEl: trend(d.aufgaben.erledigt, d.aufgaben.erledigt_davor) }));
{ trendEl: trend(d.aufgaben.erledigt, d.aufgaben.erledigt_davor),
ziel: 'aufgaben.html?zeigen=erledigt' }));
/* "neu angelegt" fuehrt auf das Brett OHNE Ausschnitt: Der Bericht
zaehlt hier einen Zeitraum, das Brett kennt keinen. Ein Sprung auf
"zeigen=angelegt" wuerde etwas hervorheben, das nicht dieselbe
Menge ist -- und eine Hervorhebung, die nicht stimmt, ist
schlimmer als keine. */
k1.append(kachel(d.aufgaben.angelegt, 'neu angelegt',
{ trendEl: trend(d.aufgaben.angelegt, d.aufgaben.angelegt_davor) }));
k1.append(kachel(d.termine.gewesen, 'Termine gewesen'));
k1.append(kachel(d.dateien.freigegeben, 'Dateien freigegeben'));
{ trendEl: trend(d.aufgaben.angelegt, d.aufgaben.angelegt_davor),
ziel: 'aufgaben.html' }));
k1.append(kachel(d.termine.gewesen, 'Termine gewesen',
{ ziel: 'kalender.html?zeigen=vergangen' }));
k1.append(kachel(d.dateien.freigegeben, 'Dateien freigegeben',
{ ziel: 'dateien.html?zeigen=frei' }));
ziel.append(block('Was wurde erledigt?', null, k1));
/* Was blockiert? */
const k2 = el('div', 'kacheln');
k2.append(kachel(d.aufgaben.offen, 'Aufgaben offen'));
k2.append(kachel(d.aufgaben.ueberfaellig, 'überfällig', { warn: d.aufgaben.ueberfaellig > 0 }));
k2.append(kachel(d.aufgaben.offen, 'Aufgaben offen',
{ ziel: 'aufgaben.html?zeigen=offen' }));
k2.append(kachel(d.aufgaben.ueberfaellig, 'überfällig',
{ warn: d.aufgaben.ueberfaellig > 0, ziel: 'aufgaben.html?zeigen=ueberfaellig' }));
const dringend = Object.values(d.bereiche).reduce((s, b) => s + b.dringend, 0);
k2.append(kachel(dringend, 'dringende Punkte', { warn: dringend > 0 }));
k2.append(kachel(d.dateien.offen_review, 'Dateien im Review'));
/* Diese Zahl ist eine SUMME ueber alle Bereiche -- es gibt keine
einzelne Seite, auf der genau sie steht. Sie fuehrt deshalb in den
Bereich, in dem die meisten davon liegen, statt blind in die
LIVE-Analyse. Liegt nichts an, fuehrt sie nirgendwohin: ein Weg zu
null Dingen ist eine Enttaeuschung, kein Angebot. */
const meiste = Object.entries(d.bereiche)
.filter(([, w]) => w.dringend > 0)
.sort((a, b) => b[1].dringend - a[1].dringend)[0];
k2.append(kachel(dringend, 'dringende Punkte',
{ warn: dringend > 0, ziel: meiste ? bereichZiel(meiste[0], 'dringend') : null }));
k2.append(kachel(d.dateien.offen_review, 'Dateien im Review',
{ ziel: 'dateien.html?zeigen=review' }));
const b2 = block('Was blockiert?', 'Die drei Aufgaben, die am längsten offen liegen:', k2);
if (d.aufgaben.aeltester.length) {
const liste = el('ul', 'liste-klein');
@@ -118,7 +179,8 @@
const jetztS = d.live.jetzt.schnitt;
const davorS = d.live.davor.schnitt;
const kLive = kachel(jetztS === null ? '–' : String(jetztS).replace('.', ','),
`LIVE-Schnitt aus ${d.live.jetzt.anzahl} Bewertung(en)`);
`LIVE-Schnitt aus ${d.live.jetzt.anzahl} Bewertung(en)`,
{ ziel: d.live.jetzt.anzahl > 0 ? bereichZiel('live') : null });
if (jetztS !== null && davorS !== null) {
kLive.querySelector('.kachel__wert').append(
trend(Math.round(jetztS * 10), Math.round(davorS * 10)));
@@ -126,17 +188,18 @@
k3.append(kLive);
for (const [b, w] of Object.entries(d.bereiche)) {
k3.append(kachel(w.neu, BEREICHSNAME[b] + ': neue Einträge',
{ trendEl: trend(w.neu, w.neu_davor) }));
{ trendEl: trend(w.neu, w.neu_davor), ziel: bereichZiel(b) }));
}
ziel.append(block('Was hat funktioniert?',
'Bewegung in den Betreuungsbereichen im Vergleich zum Zeitraum davor:', k3));
/* Was kommt als Nächstes? */
const k4 = el('div', 'kacheln');
k4.append(kachel(d.termine.kommend, 'Termine stehen an'));
k4.append(kachel(d.termine.kommend, 'Termine stehen an',
{ ziel: 'kalender.html?zeigen=kommend' }));
for (const [b, w] of Object.entries(d.bereiche)) {
if (w.offen) k4.append(kachel(w.offen, BEREICHSNAME[b] + ': offen',
{ warn: w.dringend > 0 }));
{ warn: w.dringend > 0, ziel: bereichZiel(b, 'offen') }));
}
const b4 = block('Was kommt als Nächstes?', null, k4);
if (d.profil && (d.profil.plan_prio1 || d.profil.plan_prio2 || d.profil.plan_prio3)) {
workspace/assets/js/start.js
+30 -3
View File
@@ -290,11 +290,38 @@
g.append(el('span', 'gruss__wort', tageszeit + ', '));
g.append(el('span', 'gruss__name', ich.name));
/* Die Plakette: der erste Buchstabe in der Farbe der Rolle. Dieselbe
Zuordnung wie im Kopf der Seite, damit nichts auseinanderläuft. */
/* Die Plakette: das eigene Bild, sonst der erste Buchstabe in der
Farbe der Rolle. Dieselbe Zuordnung wie im Kopf der Seite, damit
nichts auseinanderläuft.
DAS BILD FEHLTE HIER BIS ZUM 01.09.2026 -- und das ist ein
lehrreicher Fehler: Der Server liefert es längst mit, und im
Quelltext dort steht sogar ausdrücklich "es steht in der
Kopfleiste JEDER Seite UND IN DER BEGRÜSSUNG". Die Absicht war
aufgeschrieben, die Hälfte davon nie gebaut. Aufgefallen ist es
nicht, weil ein Buchstabe in einem Kreis nicht falsch aussieht --
nur eben nicht wie man selbst.
Ein Kommentar ist kein Beweis. Deshalb prüft pruef-start-ansicht
das jetzt mit einem echten Bild nach. */
const p = $('plakette');
p.textContent = (ich.name || '?').trim().charAt(0).toUpperCase();
p.textContent = '';
p.dataset.rolle = ich.rolle;
if (ich.bild) {
const b = el('img', 'willkommen__foto');
b.src = ich.bild;
b.alt = '';
/* Geht das Bild verloren (gelöschte Datei, kein Netz), erscheint
sonst ein kaputtes Bildsymbol. Dann lieber zurück zum
Buchstaben -- der ist immer richtig. */
b.addEventListener('error', () => {
b.remove();
p.textContent = (ich.name || '?').trim().charAt(0).toUpperCase();
});
p.append(b);
} else {
p.textContent = (ich.name || '?').trim().charAt(0).toUpperCase();
}
$('rollentext').textContent = ROLLENTEXT[ich.rolle] || ich.rolle;
}
workspace/assets/js/steckbrief.js
+154
View File
@@ -197,6 +197,155 @@
let KANAELE = [];
/* ---------- Das Team ------------------------------------------------------
Wunsch vom 01.09.2026: "ich will, dass wir Manager, Scouts,
DogFather auch die Fotos, Namen und so alles sehen, alles was die in
ihrem Profil eintragen."
Der Steckbrief war bis dahin eine Einbahnstraße: Jeder pflegte
seinen, und niemand bekam ihn je zu sehen. Die Schnittstelle dafür
lag fertig da und wurde von keiner Seite aufgerufen -- gebaut,
dokumentiert, nie angeschlossen.
NACH ROLLEN GRUPPIERT und nicht als eine lange Liste: "Wer kann mir
helfen?" ist eine andere Frage als "wer ist alles da?", und die
Antwort steht in der Rolle. DogFather und die Manager stehen dabei
in DERSELBEN Gruppe -- er ist gleichwertiges Teammitglied und wird
hier nicht als Kopf über die anderen gestellt.
Wer wen sehen darf, entscheidet weiterhin der Server. Diese Seite
zeigt nur, was sie bekommt. */
const ROLLEN_GRUPPEN = [
{ name: 'Management', rollen: ['admin', 'manager'],
text: 'Ansprechpartner für alles, was Freigaben oder Entscheidungen braucht.' },
{ name: 'Scouting', rollen: ['scout'],
text: 'Sie finden neue Creator und begleiten den Anfang.' },
{ name: 'Creator', rollen: ['creator'],
text: 'Die Leute, um die es geht.' },
];
async function teamBauen(ich) {
const block = document.getElementById('team-block');
if (!block) return;
let liste;
try {
const a = await hole('/workspace/api/steckbrief');
if (!a.ok) return;
liste = (await a.json()).steckbriefe || [];
} catch { return; }
if (!liste.length) return;
const ziel = document.getElementById('team');
ziel.textContent = '';
document.getElementById('team-zahl').textContent = String(liste.length);
document.getElementById('team-text').textContent =
'Bild, Name und was jeder über sich geschrieben hat. Jeder pflegt seinen '
+ 'eigenen Eintrag – schreiben kann hier niemand für einen anderen.';
for (const gruppe of ROLLEN_GRUPPEN) {
const drin = liste.filter((p) => gruppe.rollen.includes(p.rolle));
if (!drin.length) continue;
const kopf = document.createElement('div');
kopf.className = 'team-gruppe';
const h = document.createElement('h3');
h.className = 'team-gruppe__name';
h.textContent = gruppe.name;
kopf.append(h);
const t = document.createElement('p');
t.className = 'team-gruppe__text';
t.textContent = gruppe.text;
kopf.append(t);
ziel.append(kopf);
const reihe = document.createElement('div');
reihe.className = 'team-reihe';
for (const p of drin) reihe.append(karteBauen(p, ich));
ziel.append(reihe);
}
block.hidden = false;
}
function karteBauen(p, ich) {
const k = document.createElement('article');
k.className = 'team-karte';
k.dataset.rolle = p.rolle;
/* Die eigene Karte wird gekennzeichnet. Ohne das sucht man sich in
einer Liste von zwanzig Gesichtern selbst. */
if (ich && p.id === ich.id) k.dataset.ich = 'ja';
const bild = document.createElement('span');
bild.className = 'team-karte__bild';
bild.setAttribute('aria-hidden', 'true');
if (p.bild) {
const b = document.createElement('img');
b.src = p.bild;
b.alt = '';
b.loading = 'lazy';
b.addEventListener('error', () => { b.remove(); bild.textContent = anfang(p.name); });
bild.append(b);
} else {
bild.textContent = anfang(p.name);
}
k.append(bild);
const text = document.createElement('div');
text.className = 'team-karte__text';
const zeile = document.createElement('div');
zeile.className = 'team-karte__zeile';
const name = document.createElement('h4');
name.className = 'team-karte__name';
name.textContent = p.name;
zeile.append(name);
if (ich && p.id === ich.id) {
const marke = document.createElement('span');
marke.className = 'team-karte__ich';
marke.textContent = 'du';
zeile.append(marke);
}
text.append(zeile);
const rolle = document.createElement('p');
rolle.className = 'team-karte__rolle';
rolle.textContent = p.rolle_name || p.rolle;
text.append(rolle);
/* Steht nichts da, steht auch nichts da -- kein Platzhaltersatz.
"Noch nichts eingetragen" auf zwanzig Karten liest niemand, und es
macht die Karten künstlich gleich hoch. */
if (p.ueber_mich) {
const u = document.createElement('p');
u.className = 'team-karte__ueber';
u.textContent = p.ueber_mich;
text.append(u);
}
if (p.kanaele?.length) {
const kan = document.createElement('div');
kan.className = 'team-karte__kanaele';
for (const c of p.kanaele) {
const a = document.createElement('a');
a.className = 'team-kanal';
a.dataset.art = c.art;
a.href = c.adresse;
a.target = '_blank';
/* noopener: Ohne das könnte die geöffnete fremde Seite auf das
Fenster hier zugreifen. */
a.rel = 'noopener noreferrer';
a.textContent = c.name;
a.title = `${c.name}: ${c.handle}`;
kan.append(a);
}
text.append(kan);
}
k.append(text);
return k;
}
(async () => {
try {
const ich = await (await hole('/workspace/api/ich')).json().catch(() => null);
@@ -207,6 +356,11 @@
const { steckbrief, kanaele } = await a.json();
KANAELE = kanaele;
zeichne(steckbrief, kanaele);
/* Erst NACH dem eigenen Steckbrief -- und in einem eigenen
try/catch weiter innen, damit ein Ausfall des Teams nicht das
eigene Profil mitnimmt. */
await teamBauen(ich);
} catch { /* umgeleitet oder nicht verfügbar -- die Seite bleibt nutzbar */ }
})();
})();