dogfather-universe/workspace/assets/js/start.js

/* ===================================================================
   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.
   =================================================================== */
(() => {
  'use strict';

  const ROLLENTEXT = {
    admin:   'DogFather · Gesamtübersicht und Freigaben',
    manager: 'Manager · dieselben Rechte, ohne Personenverwaltung',
    creator: 'Creator · dein eigener Bereich',
    scout:   'Scout · deine Pipeline und die Creator, die du betreust',
  };

  /* Zeichen und Bereiche kommen aus assets/js/bereiche.js -- derselben
     Quelle, aus der auch die Kopfleisten der Unterseiten ihr Zeichen und
     ihre Farbe nehmen. Zwei Listen wären der sichere Weg dazu, dass ein
     Bereich hier gelb und dort grün ist. */
  const { ZEICHEN, GRUPPEN, zeichenBauen } = window.Bereiche;


  /* 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',
  };

  /* Findet einen Bereich über seinen Namen -- damit Hinweis und Kachel
     dasselbe Zeichen und denselben Farbton benutzen, ohne dass die
     Zuordnung ein zweites Mal irgendwo stünde. */
  const bereichZu = (name) => {
    if (!name) return null;
    for (const g of GRUPPEN) {
      const b = g.bereiche.find((x) => x.name === name);
      if (b) return b;
    }
    return null;
  };

  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;
  };

  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');
      /* Manche Gruppen heißen für einen Creator anders -- siehe GRUPPEN. */
      const istCreator = ich.rolle === 'creator';
      kopf.append(el('h2', 'gruppe__name',
        (istCreator && gruppe.nameCreator) || gruppe.name));
      kopf.append(el('span', 'gruppe__unter',
        (istCreator && gruppe.unterCreator) || 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;

        /* Das Wasserzeichen: dasselbe Zeichen noch einmal, riesig und
           fast unsichtbar in der Ecke. Es macht jede Kachel auf den
           ersten Blick unverwechselbar, ohne dass man es bewusst
           wahrnimmt -- und es ist der Grund, warum siebzehn Kacheln
           nicht mehr wie siebzehn Kästen aussehen.

           Steht als Erstes im Aufbau, damit es HINTER allem liegt. */
        const schatten = el('span', 'kachel__wasserzeichen');
        schatten.append(zeichenBauen(b.zeichen));
        a.append(schatten);

        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);
    }
    lichtFolgen(ziel);
  }

  /* ---------- Das Licht folgt dem Zeiger -----------------------------------

     Die Kachel trägt einen weichen Lichtfleck. Er sitzt ruhend oben links
     und wandert unter dem Zeiger mit. Kein Blinken, keine Bewegung des
     Inhalts -- es wird nur an einer anderen Stelle heller. Genau das ist
     der Unterschied zwischen "sieht gut aus" und "fühlt sich gut an".

     EIN Zuhörer für alle Kacheln statt siebzehn einzelner. Und in einem
     Bild je Rahmen: pointermove feuert dutzendfach je Sekunde; wer bei
     jedem Ereignis in den Stil schreibt, lässt den Browser das Bild
     mehrfach umsonst neu berechnen.

     Auf Fingerbedienung und bei "weniger Bewegung" bleibt es ganz aus --
     dort gibt es keinen Zeiger, dem etwas folgen könnte. */
  function lichtFolgen(wurzel) {
    const feinerZeiger = window.matchMedia('(hover: hover) and (pointer: fine)').matches;
    const ruhig = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (!feinerZeiger || ruhig) return;

    let warten = false;
    let letzte = null;

    wurzel.addEventListener('pointermove', (e) => {
      const kachel = e.target.closest?.('.kachel');
      if (!kachel) return;
      letzte = { kachel, x: e.clientX, y: e.clientY };
      if (warten) return;
      warten = true;
      requestAnimationFrame(() => {
        warten = false;
        if (!letzte) return;
        const { kachel: k, x, y } = letzte;
        const r = k.getBoundingClientRect();
        k.style.setProperty('--mx', ((x - r.left) / r.width * 100).toFixed(1) + '%');
        k.style.setProperty('--my', ((y - r.top) / r.height * 100).toFixed(1) + '%');
      });
    });

    /* Beim Verlassen zurück in die Ruhelage. Ohne das bliebe der Fleck
       dort stehen, wo der Zeiger die Kachel verlassen hat -- und die
       Kacheln sähen nach einer Weile alle unterschiedlich beleuchtet aus,
       ohne dass jemand wüsste, warum. */
    wurzel.addEventListener('pointerleave', (e) => {
      const kachel = e.target.closest?.('.kachel');
      if (!kachel) return;
      kachel.style.removeProperty('--mx');
      kachel.style.removeProperty('--my');
    }, true);
  }

  /* ---------- Die Begrüßung ------------------------------------------------

     Sie soll in drei Zeilen sagen, was man beim Reinkommen wissen will:
     WANN ist es, WER bin ich, WIE steht es. Vorher stand dort "Angemeldet"
     -- eine Zeile, die nichts hinzufügt, weil oben rechts der eigene Name
     mit Rolle steht. */

  const WOCHENTAGE = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch',
    'Donnerstag', 'Freitag', 'Samstag'];
  const MONATE = ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli',
    'August', 'September', 'Oktober', 'November', 'Dezember'];

  /* Kalenderwoche nach ISO 8601 -- die Woche, in der der Donnerstag liegt.
     Selbst gerechnet, weil eine falsche KW schlimmer ist als gar keine
     und dafür keine fremde Bibliothek in die Seite gehört. */
  function kalenderwoche(d) {
    const t = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
    t.setUTCDate(t.getUTCDate() + 4 - (t.getUTCDay() || 7));
    const anfang = new Date(Date.UTC(t.getUTCFullYear(), 0, 1));
    return Math.ceil(((t - anfang) / 86400000 + 1) / 7);
  }

  /* Manche Tage haben einen Charakter, und den zu benennen kostet nichts.
     Bewusst NICHT für jeden Tag -- ein Wort, das immer da steht, liest
     nach drei Tagen niemand mehr. */
  const TAGESMARKER = {
    1: 'Neue Woche',
    5: 'Endspurt',
    6: 'Wochenende',
    0: 'Wochenende',
  };

  function grussZeigen() {
    const jetzt = new Date();
    const stunde = jetzt.getHours();

    $('datum').textContent =
      `${WOCHENTAGE[jetzt.getDay()]}, ${jetzt.getDate()}. ${MONATE[jetzt.getMonth()]}`
      + ` · KW ${kalenderwoche(jetzt)}`;

    const marker = TAGESMARKER[jetzt.getDay()];
    const mEl = $('tagesmarker');
    if (marker) { mEl.textContent = marker; mEl.hidden = false; }

    /* Feiner gestuft als vorher: Wer um kurz nach Mitternacht reinkommt,
       liest nicht "Guten Abend", und wer um 13 Uhr kommt, nicht "Morgen". */
    const tageszeit =
      stunde < 5  ? 'Noch wach' :
      stunde < 11 ? 'Guten Morgen' :
      stunde < 14 ? 'Guten Mittag' :
      stunde < 18 ? 'Guten Tag' :
      stunde < 22 ? 'Guten Abend' : 'Späten Abend';

    /* Der Name ist das Wichtigste an der Zeile und wird deshalb getrennt
       ausgezeichnet -- der Gruß leiser, der Name kräftig. */
    const g = $('gruss');
    g.textContent = '';
    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. */
    const p = $('plakette');
    p.textContent = (ich.name || '?').trim().charAt(0).toUpperCase();
    p.dataset.rolle = ich.rolle;

    $('rollentext').textContent = ROLLENTEXT[ich.rolle] || ich.rolle;
  }

  /* Ein Satz zur Lage -- gerechnet aus denselben Hinweisen, die darunter
     stehen. Keine zweite Zählung, sonst gäbe es irgendwann zwei
     Wahrheiten auf einem Bildschirm. */
  function lageZeigen() {
    const el2 = $('lage');
    const gesamt = hinweise.reduce((s, h) => s + h.anzahl, 0);
    const dringend = hinweise.filter((h) => h.stufe === 'warnung')
      .reduce((s, h) => s + h.anzahl, 0);

    let satz, stufe;
    if (dringend > 0) {
      satz = `${dringend} ${dringend === 1 ? 'Sache ist' : 'Sachen sind'} überfällig – das zuerst.`;
      stufe = 'warnung';
    } else if (gesamt > 0) {
      satz = `${gesamt} ${gesamt === 1 ? 'Punkt steht' : 'Punkte stehen'} an, nichts davon brennt.`;
      stufe = 'offen';
    } else {
      satz = 'Nichts liegt an – guter Tag zum Vorarbeiten.';
      stufe = 'ruhig';
    }
    el2.textContent = satz;
    el2.dataset.stufe = stufe;
    el2.hidden = false;
  }

  /* ---------- Laden -------------------------------------------------------- */

  async function laden() {
    try {
      const antwort = await fetch('/workspace/api/ich', { credentials: 'same-origin' });
      if (!antwort.ok) { location.assign('/workspace/'); return; }
      ich = await antwort.json();
    } catch {
      location.assign('/workspace/');
      return;
    }

    window.werZeigen?.(ich);
    grussZeigen();

    /* Die Hinweise zuerst -- die Kacheln brauchen ihre Zahlen. */
    await hinweiseLaden();
    /* Erst jetzt steht fest, wie die Lage ist. */
    lageZeigen();
    bereicheBauen();
    await zahlenLaden();
  }

  /* Was ist dran? Erster Baustein der Automationen aus dem Konzept.
     Fuehrt bewusst keine eigenen Daten -- jeder Hinweis ist nur eine
     Sicht auf etwas, das schon da ist, und verschwindet von selbst,
     sobald die Sache erledigt ist. Nichts zu quittieren. */
  const EINZAHL = {
    aufgaben_ueberfaellig: (n) => `${n} ${n === 1 ? 'Aufgabe ist' : 'Aufgaben sind'} überfällig`,
    aufgaben_heute:        (n) => `${n} ${n === 1 ? 'Aufgabe ist' : 'Aufgaben sind'} heute fällig`,
    aufgaben_review:       (n) => `${n} ${n === 1 ? 'Aufgabe wartet' : 'Aufgaben warten'} auf Freigabe`,
    termine_heute:         (n) => `${n} ${n === 1 ? 'Termin steht' : 'Termine stehen'} heute an`,
    protokoll_fehlt:       (n) => `${n} ${n === 1 ? 'Gespräch hat' : 'Gespräche haben'} noch kein Protokoll`,
    dateien_review:        (n) => `${n} ${n === 1 ? 'Datei liegt' : 'Dateien liegen'} im Review`,
    bereiche_dringend:     (n) => `${n} ${n === 1 ? 'dringender Punkt' : 'dringende Punkte'} in den Bereichen`,
    followup_faellig:      (n) => `${n} Follow-up${n === 1 ? '' : 's'} ${n === 1 ? 'ist' : 'sind'} fällig`,
    uebergabe_offen:       (n) => `${n} übergebene${n === 1 ? 'r Lead wartet' : ' Leads warten'} auf das Onboarding`,
    review_faellig:        (n) => `${n} Review-Termin${n === 1 ? ' ist' : 'e sind'} überfällig`,
    review_bald:           (n) => `${n} Review${n === 1 ? ' steht' : 's stehen'} in den nächsten 7 Tagen an`,
    ohne_betreuung:        (n) => `${n} Creator ${n === 1 ? 'hat' : 'haben'} noch keine zuständige Person`,
    ohne_profil:           (n) => `${n} Creator-Profil${n === 1 ? ' ist' : 'e sind'} noch leer`,
    ohne_startcheck:       (n) => `${n} Creator ${n === 1 ? 'hat' : 'haben'} noch keinen Start-Check`,
    startcheck_handlung:   (n) => `${n} ${n === 1 ? 'Punkt im Start-Check braucht' : 'Punkte im Start-Check brauchen'} Handlung`,
  };

  async function hinweiseLaden() {
    let daten;
    try {
      const antwort = await fetch('/workspace/api/hinweise', { credentials: 'same-origin' });
      if (!antwort.ok) return;
      daten = await antwort.json();
    } catch { return; }

    hinweise = daten.hinweise || [];
    const liste = $('dran');
    liste.textContent = '';
    if (!hinweise.length) { $('dran-block').hidden = true; return; }

    for (const h of hinweise) {
      const li = el('li', 'dran__punkt');
      li.dataset.stufe = h.stufe;

      /* Ein Hinweis trägt ZEICHEN UND FARBE der Kachel, zu der er führt.
         Dadurch gehört sichtbar zusammen, was zusammengehört: Wer die
         rote Zeile „2 Aufgaben sind überfällig" sieht, erkennt weiter
         unten dieselbe Farbe und dasselbe Zeichen auf der Kachel
         wieder -- und weiß, wohin er muss, bevor er den Text zu Ende
         gelesen hat. Beides kommt aus derselben Zuordnung wie die Zahl
         auf der Kachel, es gibt also keine zweite Liste. */
      const kachel = bereichZu(HINWEIS_ZU_KACHEL[h.art]);
      if (kachel) li.dataset.ton = String(kachel.ton);

      /* Jeder Hinweis führt irgendwohin -- ein Hinweis ohne Ziel ist
         nur ein schlechtes Gewissen. */
      const a = el('a', 'dran__link');
      a.href = h.ziel;

      if (kachel) {
        const zeichen = el('span', 'dran__zeichen');
        zeichen.append(zeichenBauen(kachel.zeichen, 'dran__svg'));
        a.append(zeichen);
      }

      /* Die Zahl steht vorn und getrennt vom Satz. Man liest sie zuerst,
         und beim Überfliegen von sieben Zeilen zählt genau das. */
      a.append(el('span', 'dran__zahl', String(h.anzahl)));

      const satz = (EINZAHL[h.art] || ((n) => `${n} × ${h.text}`))(h.anzahl);
      /* Die Zahl steht schon davor -- im Satz wäre sie doppelt. */
      a.append(el('span', 'dran__text', satz.replace(/^\d+\s+(×\s+)?/, '')));

      const pfeil = el('span', 'dran__pfeil', '→');
      pfeil.setAttribute('aria-hidden', 'true');
      a.append(pfeil);
      /* Vorleseprogramme bekommen den ganzen Satz, nicht die Bruchstücke. */
      a.setAttribute('aria-label', satz);
      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;
  }

  /* Die Zahlen kommen aus derselben Quelle wie das Brett und sind bereits
     serverseitig auf die eigene Rolle eingegrenzt. */
  const ZAHLEN = [
    { schluessel: 'ueberfaellig', name: 'Überfällig', warn: true },
    { schluessel: 'heute',        name: 'Heute fällig' },
    { schluessel: 'offen',        name: 'Offen' },
    { schluessel: 'arbeit',       name: 'In Arbeit' },
    { schluessel: 'review',       name: 'Review' },
    { schluessel: 'erledigt',     name: 'Erledigt' },
  ];

  async function zahlenLaden() {
    let daten;
    try {
      const antwort = await fetch('/workspace/api/uebersicht', { credentials: 'same-origin' });
      if (!antwort.ok) return;
      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 = el('li', 'zahl');
      if (z.warn && wert > 0) li.dataset.warn = 'ja';
      li.append(el('span', 'zahl__wert', String(wert)));
      li.append(el('span', 'zahl__name', z.name));
      liste.append(li);
    }
  }

  laden();
})();