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

/* ===================================================================
   Dashboard -- die Gesamtuebersicht je Creator.

   Das Konzept verspricht auf Seite 1 "UEBERSICHT -- alles zentral" und
   auf Seite 2 "Die Admin-Rolle behaelt den Gesamtueberblick". Genau das
   fehlte: Die Startseite ist ein Einstieg (was ist dran, wohin gehe
   ich), aber sie beantwortet nicht "wie steht es um MEINE CREATOR".

   Fuehrt keine eigenen Daten. Jede Zahl kommt aus Aufgaben, Terminen,
   Bereichen, Profil und Start-Check -- und jede ist anklickbar, damit
   man von der Zahl direkt zur Sache kommt. Eine Zahl ohne Weg dahin
   waere nur ein schlechtes Gewissen.
   =================================================================== */
(() => {
  'use strict';

  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;
  };
  const melde = (t) => { $('fehler').textContent = t || ''; };

  async function hole(pfad) {
    const a = await fetch(pfad, { credentials: 'same-origin' });
    if (a.status === 401) { location.assign('/workspace/'); throw new Error('abgemeldet'); }
    return a;
  }

  const WOCHENTAG = ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'];

  const datum = (iso) => (iso ? iso.slice(0, 10).split('-').reverse().join('.') : '');

  /* Ein Datum allein sagt wenig -- "Do, 04.09. · 18:00" ist die Angabe,
     nach der man den Tag plant. */
  function zeitpunkt(iso) {
    if (!iso) return '';
    const [d, z] = String(iso).split('T');
    const [j, m, t] = d.split('-');
    const tag = new Date(Number(j), Number(m) - 1, Number(t));
    const w = Number.isNaN(tag.getTime()) ? '' : WOCHENTAG[tag.getDay()] + ', ';
    return `${w}${t}.${m}.` + (z ? ' · ' + z.slice(0, 5) : '');
  }

  /* Wie lange ist die letzte Anmeldung her? Ab zwei Wochen wird die
     Angabe gedaempft hervorgehoben -- das ist der Punkt, an dem jemand
     abzudriften droht. */
  function herLetzte(iso) {
    if (!iso) return { text: 'noch nie angemeldet', kalt: true };
    const tage = Math.floor((Date.now() - Date.parse(iso)) / 86400000);
    if (!Number.isFinite(tage)) return { text: '' };
    if (tage <= 0) return { text: 'heute da gewesen' };
    if (tage === 1) return { text: 'gestern da gewesen' };
    return { text: `seit ${tage} Tagen nicht da`, kalt: tage >= 14 };
  }

  function wert(anzahl, name, ziel, warn) {
    const a = el(ziel ? 'a' : 'span', 'wert');
    if (ziel) a.href = ziel;
    if (warn && anzahl > 0) a.dataset.warn = 'ja';
    if (!anzahl) a.dataset.leer = 'ja';
    a.append(el('span', 'wert__zahl', String(anzahl)));
    a.append(el('span', 'wert__name', name));
    return a;
  }

  function karte(c, checkGesamt, eigen) {
    const k = el('article', 'creator');
    if (c.ueberfaellig > 0 || c.dringend > 0) k.dataset.achtung = 'ja';

    const kopf = el('div', 'creator__kopf');

    const links = el('div', 'creator__wer');
    links.append(el('h2', 'creator__name', c.name));
    const unter = el('p', 'creator__unter');
    const her = herLetzte(c.letzter_login);
    const teile = [];
    if (!eigen && c.betreuer) teile.push('betreut von ' + c.betreuer);
    if (!eigen && !c.betreuer) teile.push('noch niemand zuständig');
    if (her.text) teile.push(her.text);
    unter.textContent = teile.join(' · ');
    if (her.kalt || (!eigen && !c.betreuer)) unter.dataset.kalt = 'ja';
    links.append(unter);
    kopf.append(links);

    /* Die einzige Angabe, die nach vorn zeigt -- deshalb steht sie
       abgesetzt oben rechts und nicht zwischen den Zaehlungen. */
    const rechts = el('div', 'naechstes');
    if (c.naechster_termin) {
      rechts.append(el('span', 'naechstes__schild', 'Nächster Termin'));
      const a = el('a', 'naechstes__wert', zeitpunkt(c.naechster_termin));
      a.href = 'kalender.html';
      rechts.append(a);
    } else if (c.naechster_review) {
      rechts.append(el('span', 'naechstes__schild', 'Nächster Review'));
      const a = el('a', 'naechstes__wert', datum(c.naechster_review));
      a.href = 'report.html';
      rechts.append(a);
    } else {
      rechts.append(el('span', 'naechstes__schild', 'Nächster Termin'));
      rechts.append(el('span', 'naechstes__wert naechstes__wert--leer', 'keiner geplant'));
    }
    kopf.append(rechts);
    k.append(kopf);

    const werte = el('div', 'werte');
    werte.append(wert(c.ueberfaellig, 'überfällig', 'aufgaben.html', true));
    werte.append(wert(c.dringend, 'dringend', 'bereich.html?b=live', true));
    werte.append(wert(c.offen, 'offen', 'aufgaben.html'));
    werte.append(wert(c.arbeit, 'in Arbeit', 'aufgaben.html'));
    werte.append(wert(c.review, 'im Review', 'aufgaben.html'));
    werte.append(wert(c.erledigt30, 'erledigt 30 T.', 'aufgaben.html'));
    k.append(werte);

    /* Start-Check als Balken statt als Zahl -- "4 von 16" liest man,
       ein Viertel gefuellt sieht man. */
    const check = el('a', 'fortschritt');
    check.href = 'startcheck.html';
    const geprueft = c.check_geprueft || 0;
    const anteil = checkGesamt ? Math.round((geprueft / checkGesamt) * 100) : 0;
    if (geprueft >= checkGesamt && checkGesamt) check.dataset.fertig = 'ja';

    const zeile = el('p', 'fortschritt__zeile');
    zeile.append(el('span', 'fortschritt__schild', 'Start-Check'));
    zeile.append(el('span', 'fortschritt__text',
      geprueft ? `${geprueft} von ${checkGesamt} geprüft` : 'noch nicht begonnen'));
    if (c.check_handlung > 0) {
      zeile.append(el('span', 'fortschritt__warn',
        `${c.check_handlung} × Handlungsbedarf`));
    }
    check.append(zeile);

    const balken = el('span', 'fortschritt__balken');
    const fuellung = el('span', 'fortschritt__fuellung');
    fuellung.style.width = anteil + '%';
    if (c.check_handlung > 0) fuellung.dataset.warn = 'ja';
    balken.append(fuellung);
    check.append(balken);
    k.append(check);

    if (!c.hat_profil) {
      const a = el('a', 'creator__luecke', eigen
        ? 'Dein Profil ist noch leer – jetzt ausfüllen'
        : 'Profil noch nicht ausgefüllt');
      a.href = 'profil.html';
      k.append(a);
    }
    return k;
  }

  function summenZeigen(liste) {
    const s = $('summen');
    s.textContent = '';
    if (liste.length < 2) { s.hidden = true; return; }
    const summe = (feld) => liste.reduce((n, c) => n + (c[feld] || 0), 0);
    const felder = [
      [liste.length, 'Creator', false],
      [summe('ueberfaellig'), 'überfällig', true],
      [summe('dringend'), 'dringende Punkte', true],
      [summe('offen') + summe('arbeit'), 'offen & in Arbeit', false],
      [summe('review'), 'im Review', false],
      [summe('erledigt30'), 'erledigt · 30 Tage', false],
    ];
    for (const [zahl, name, warn] of felder) {
      const k = el('div', 'summe');
      if (warn && zahl > 0) k.dataset.warn = 'ja';
      k.append(el('span', 'summe__zahl', String(zahl)));
      k.append(el('span', 'summe__name', name));
      s.append(k);
    }
    s.hidden = false;
  }

  (async () => {
    let ich;
    try {
      const a = await hole('/workspace/api/ich');
      if (!a.ok) { location.assign('/workspace/'); return; }
      ich = await a.json();
    } catch { return; }
    $('wer').textContent = ich.name + ' · ' + (ich.rolle_name || ich.rolle);

    let d;
    try {
      const a = await hole('/workspace/api/uebersicht/creator');
      if (!a.ok) { melde('Die Übersicht konnte gerade nicht geladen werden.'); return; }
      d = await a.json();
    } catch { return; }

    const ziel = $('liste');
    ziel.textContent = '';
    ziel.setAttribute('aria-busy', 'false');

    const creator = d.creator || [];
    const eigen = !!d.eigen;

    if (eigen) {
      $('titel').textContent = 'Mein Stand';
      $('unterzeile').textContent = 'Wo du gerade stehst – aus deinen Aufgaben, Terminen und dem Start-Check.';
    } else if (!creator.length) {
      $('unterzeile').textContent = ich.rolle === 'scout'
        ? 'Dir ist noch kein Creator zugeteilt.'
        : 'Es gibt noch keinen Creator.';
      ziel.append(el('p', 'leer-hinweis', ich.rolle === 'scout'
        ? 'DogFather legt unter „Personen & Zugänge“ fest, wen du betreust.'
        : 'Lege unter „Personen & Zugänge“ den ersten Creator an.'));
      return;
    } else {
      $('unterzeile').textContent = creator.length === 1
        ? 'Ein Creator – mit einem Blick sehen, wo es hakt und wo es läuft.'
        : `${creator.length} Creator – mit einem Blick sehen, wo es hakt und wo es läuft.`;
    }

    summenZeigen(creator);

    /* Wo etwas brennt, steht oben. Sortiert wird nach dem, was Handlung
       verlangt -- nicht alphabetisch. Bei Gleichstand dann doch nach
       Namen, damit die Reihenfolge stabil bleibt. */
    const sortiert = creator.slice().sort((a, b) =>
      (b.ueberfaellig + b.dringend) - (a.ueberfaellig + a.dringend)
      || String(a.name).localeCompare(String(b.name), 'de'));

    const box = el('div', 'creator-liste');
    for (const c of sortiert) box.append(karte(c, d.check_gesamt || 16, eigen));
    ziel.append(box);

    if (d.stand) {
      /* Der Server schickt UTC. zeitpunkt() darf hier NICHT genommen
         werden -- das schneidet die Zeichenkette nur auf und zeigte im
         Sommer zwei Stunden zu wenig an. */
      const t = new Date(d.stand);
      const p = (n) => String(n).padStart(2, '0');
      const s = $('stand');
      s.textContent = `Stand: ${p(t.getHours())}:${p(t.getMinutes())} Uhr · `
        + 'wird bei jedem Aufruf neu ermittelt';
      s.hidden = false;
    }
  })();
})();