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

/* ===================================================================
   Calls & Meeting-Protokolle (Konzept, Seite 13).

   Reihenfolge der Gruppen ist bewusst nicht chronologisch, sondern nach
   Dringlichkeit: Zuerst die Gespraeche, deren Protokoll FEHLT. Ein
   vergangener Call ohne Protokoll ist der einzige Zustand, der etwas
   von einem verlangt.
   =================================================================== */
(() => {
  'use strict';

  const $ = (id) => document.getElementById(id);
  /* Wer den festen Call-Raum ändern darf. Dieselbe Zweiteilung wie
     überall sonst: DogFather und Manager entscheiden, alle anderen
     benutzen. Der Server prüft es noch einmal -- das hier ist nur die
     Anzeige. */
  const LEITUNG = new Set(['admin', 'manager']);

  let ich = null;
  let daten = null;
  let offen = new Set();
  let kiDa = false;

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

  const WOCHENTAG = ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'];
  function zeitpunkt(iso) {
    if (!iso) return '';
    const [d, z] = iso.split('T');
    const [j, m, t] = d.split('-');
    const w = WOCHENTAG[new Date(+j, +m - 1, +t).getDay()];
    return `${w}, ${t}.${m}.${j} · ${z} Uhr`;
  }
  const datum = (iso) => (iso ? iso.slice(0, 10).split('-').reverse().join('.') : '');

  /* Ein Meeting-Link ist nur dann ein Link, wenn er auch einer ist --
     alles andere bleibt schlichter Text (z. B. "bei mir zu Hause"). */
  function istLink(ort) {
    if (!ort) return false;
    try {
      const u = new URL(ort.trim());
      return u.protocol === 'https:' || u.protocol === 'http:';
    } catch { return false; }
  }

  /** Ein Knopf, der etwas tut und sich dabei selbst sperrt. Ohne das
   *  Sperren löst ein doppelter Klick die Aktion zweimal aus -- beim
   *  Löschen scheitert der zweite Versuch dann mit einer Fehlermeldung,
   *  obwohl alles geklappt hat. */
  function tuKnopf(text, tu) {
    const b = el('button', 'abmelden', text);
    b.type = 'button';
    b.addEventListener('click', async (ev) => {
      ev.stopPropagation();
      b.disabled = true;
      melde('');
      try { await tu(); } catch { /* umgeleitet */ } finally { b.disabled = false; }
    });
    return b;
  }

  /** Läuft dieses Gespräch gerade noch? Ab dem geplanten Beginn bis eine
   *  Stunde nach dem geplanten Ende. Gerechnet wird auf den Textformen
   *  ('JJJJ-MM-TTThh:mm'), die der Server ohnehin schickt -- sie
   *  sortieren sich richtig und brauchen keine Zeitzone. */
  function laeuftNoch(c) {
    if (!daten?.jetzt || !c.beginn) return false;
    const ende = new Date(c.beginn.replace(' ', 'T') + ':00');
    if (Number.isNaN(ende.getTime())) return false;
    ende.setMinutes(ende.getMinutes() + (c.dauer_min || 30) + 60);
    const p = (n) => String(n).padStart(2, '0');
    const endeText = `${ende.getFullYear()}-${p(ende.getMonth() + 1)}-${p(ende.getDate())}`
      + `T${p(ende.getHours())}:${p(ende.getMinutes())}`;
    return c.beginn <= daten.jetzt && daten.jetzt <= endeText;
  }

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

  /* ---------- Protokollbogen ---------------------------------------------- */

  function bogen(c) {
    const f = el('form', 'bogen');

    const feld = (schild, hinweis, wert) => {
      f.append(el('label', 'feld-schild', schild));
      if (hinweis) f.append(el('p', 'bogen__hinweis', hinweis));
      const t = el('textarea', 'bogen__feld');
      t.rows = 3;
      t.maxLength = 6000;
      t.value = wert || '';
      f.append(t);
      return t;
    };

    const fPunkte = feld('Besprochene Punkte', null, c.punkte);
    const fEnt = feld('Entscheidungen',
      'Was wurde festgelegt? Nicht was diskutiert wurde – was gilt.', c.entscheidungen);

    /* To-dos: der Teil, der laut Konzept direkt ins Board wandert. */
    f.append(el('label', 'feld-schild', 'To-dos'));
    f.append(el('p', 'bogen__hinweis',
      'Jede Zeile wird sofort eine echte Aufgabe im Brett – mit dem Gespräch als Herkunft.'));
    const todoBox = el('div', 'todos');
    f.append(todoBox);

    const todoZeile = (fokus) => {
      const z = el('div', 'todo');
      const t = el('input', 'todo__titel');
      t.type = 'text'; t.maxLength = 160;
      t.placeholder = 'Was ist zu tun?';
      const d = el('input', 'todo__frist');
      d.type = 'date'; d.title = 'Frist (optional)';
      const weg = el('button', 'todo__weg', '×');
      weg.type = 'button';
      weg.title = 'Zeile entfernen';
      weg.setAttribute('aria-label', 'Zeile entfernen');
      weg.addEventListener('click', () => {
        z.remove();
        if (!todoBox.children.length) todoZeile(true);
      });
      /* Enter in der letzten Zeile legt die naechste an -- so kann man
         eine Liste tippen, ohne zur Maus zu greifen. */
      t.addEventListener('keydown', (e) => {
        if (e.key !== 'Enter') return;
        e.preventDefault();
        if (z === todoBox.lastElementChild && t.value.trim()) todoZeile(true);
        else z.nextElementSibling?.querySelector('.todo__titel')?.focus();
      });
      z.append(t, d, weg);
      todoBox.append(z);
      if (fokus) t.focus();
      return z;
    };
    todoZeile(false);

    const mehr = el('button', 'knopf-still', '+ Zeile');
    mehr.type = 'button';
    mehr.addEventListener('click', () => todoZeile(true));

    const reihe = el('div', 'todo-knoepfe');
    reihe.append(mehr);

    /* Vorschlaege aus dem, was oben schon steht. Der Knopf erscheint
       nur, wenn die KI ueberhaupt laeuft -- sonst gaebe es einen Knopf,
       der immer scheitert. */
    if (kiDa) {
      reihe.append(window.KI.knopf('To-dos vorschlagen', async () => {
        const text = [fPunkte.value, fEnt.value].filter((x) => x.trim()).join(' ');
        if (text.trim().length < 20) {
          throw new Error('Schreib erst ein paar Sätze oben – daraus kann die KI dann ableiten.');
        }
        const d = await window.KI.frage('todos', { text });
        if (!d.todos?.length) throw new Error('Die KI hat nichts gefunden.');
        /* Leere Zeilen zuerst fuellen, dann neue anhaengen. Bereits
           Getipptes wird nie ueberschrieben. */
        for (const vorschlag of d.todos) {
          let ziel = [...todoBox.querySelectorAll('.todo__titel')].find((i) => !i.value.trim());
          if (!ziel) { todoZeile(false); ziel = todoBox.lastElementChild.querySelector('.todo__titel'); }
          ziel.value = vorschlag;
          ziel.dataset.vonKi = 'ja';
        }
        meldung.textContent = '';
        const hinweis = el('p', 'ki-hinweis', d.hinweis);
        reihe.after(hinweis);
        setTimeout(() => hinweis.remove(), 9000);
      }));
    }
    f.append(reihe);

    /* Nächster Termin */
    f.append(el('label', 'feld-schild', 'Nächster Termin'));
    f.append(el('p', 'bogen__hinweis',
      'Wenn hier etwas steht, wird der Folgetermin gleich in den Kalender gelegt – '
      + 'mit demselben Gegenüber und demselben Link.'));
    const naechster = el('input', 'bogen__zeit');
    naechster.type = 'datetime-local';
    f.append(naechster);

    const meldung = el('p', 'fehler');
    meldung.setAttribute('role', 'alert');
    f.append(meldung);

    const knöpfe = el('div', 'kk__knoepfe');
    const speichern = el('button', 'knopf knopf--klein', 'Protokoll festhalten');
    speichern.type = 'submit';
    const abbrechen = el('button', 'knopf-still', 'Abbrechen');
    abbrechen.type = 'button';
    abbrechen.addEventListener('click', () => { offen.delete(c.id); zeichne(); });
    knöpfe.append(speichern, abbrechen);
    f.append(knöpfe);

    f.addEventListener('submit', async (e) => {
      e.preventDefault();
      meldung.textContent = '';
      const todos = [...todoBox.querySelectorAll('.todo')]
        .map((z) => ({
          titel: z.querySelector('.todo__titel').value,
          frist: z.querySelector('.todo__frist').value,
        }))
        .filter((t) => t.titel.trim());

      if (!fPunkte.value.trim() && !fEnt.value.trim() && !todos.length) {
        meldung.textContent = 'Ein leeres Protokoll hilft niemandem.';
        return;
      }
      speichern.disabled = true;
      try {
        const a = await hole(`/workspace/api/calls/${c.id}/protokoll`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            punkte: fPunkte.value, entscheidungen: fEnt.value, todos,
            naechster_beginn: naechster.value,
          }),
        });
        if (!a.ok) {
          meldung.textContent = (await a.json().catch(() => ({}))).fehler || 'Ging nicht.';
          return;
        }
        const r = await a.json();
        offen.delete(c.id);
        await laden();
        melde(r.aufgaben
          ? `Protokoll festgehalten – ${r.aufgaben} To-do(s) liegen jetzt im Aufgabenbrett.`
          : 'Protokoll festgehalten.');
        setTimeout(() => melde(''), 5000);
      } catch { /* umgeleitet */ } finally { speichern.disabled = false; }
    });

    return f;
  }

  /* ---------- Karte -------------------------------------------------------- */

  function karte(c, gruppe) {
    const k = el('article', 'call');
    k.dataset.gruppe = gruppe;
    k.id = 'call-' + c.id;

    const kopf = el('div', 'call__kopf');
    const links = el('div');
    links.append(el('h3', 'call__titel', c.titel));
    const wer = [c.creator_name, c.teilnehmer_name].filter(Boolean).join(' · ');
    links.append(el('p', 'call__zeit',
      zeitpunkt(c.beginn) + ` · ${c.dauer_min} Min` + (wer ? ' · ' + wer : '')));
    kopf.append(links);

    const marken = el('div', 'kk__marken');
    if (c.art === 'review') marken.append(el('span', 'marke-still', 'Review'));
    if (gruppe === 'offen') marken.append(el('span', 'marke-fehlt', 'Protokoll fehlt'));
    if (c.aufgaben.length) {
      const erledigt = c.aufgaben.filter((a) => a.status === 'erledigt').length;
      marken.append(el('span', 'marke-still',
        `${erledigt}/${c.aufgaben.length} To-dos erledigt`));
    }
    kopf.append(marken);
    k.append(kopf);

    if (c.beschreibung) k.append(el('p', 'call__text', c.beschreibung));

    /* WO FINDET DER CALL STATT? (02.09.2026)

       Vorher gab es hier nur dann einen Knopf, wenn jemand von Hand
       einen Link in das Ortsfeld getippt hatte -- und nur, solange das
       Gespräch noch bevorstand. Stand dort "Hier" oder "Discord", war
       nichts zum Anklicken da, und wer beitreten wollte, musste selbst
       wissen wohin. Genau das war die Frage: "wo führe ich den Call?"

       Jetzt gilt: der eigene Ort des Termins, wenn er ein Link ist --
       sonst der feste Call-Raum des Teams. Und der Knopf bleibt, solange
       das Gespräch laufen kann, nicht nur bis zur Startzeit: Wer sich
       verspätet, braucht ihn genau dann. */
    const knöpfe = el('div', 'kk__knoepfe');
    const ziel = istLink(c.ort) ? c.ort : (daten.call_link || '');
    if (ziel && (gruppe === 'anstehend' || laeuftNoch(c))) {
      const a = el('a', 'knopf knopf--klein', laeuftNoch(c) ? 'Call beitreten' : 'Call öffnen');
      a.href = ziel;
      a.target = '_blank';
      a.rel = 'noopener noreferrer';
      /* Steht der Raum nicht am Termin, sondern kommt aus den
         Einstellungen, gehört das dazu -- sonst wundert man sich, wohin
         der Knopf führt. */
      if (!istLink(c.ort)) a.title = 'Fester Call-Raum des Teams';
      knöpfe.append(a);
    }
    if (c.ort && !istLink(c.ort)) k.append(el('p', 'call__ort', c.ort));

    if (gruppe !== 'anstehend') {
      const b = el('button', gruppe === 'offen' ? 'knopf knopf--klein' : 'knopf-still',
        offen.has(c.id) ? 'Schließen'
          : c.protokoll_id ? 'Protokoll ansehen' : 'Protokoll schreiben');
      b.type = 'button';
      b.addEventListener('click', () => {
        /* IMMER NUR EINS OFFEN (Wunsch 02.09.2026: "es soll immer
           automatisch nur 1 angezeigt werden").

           Vorher konnte man beliebig viele Protokolle gleichzeitig
           aufklappen -- die Seite wurde dabei so lang, dass die Liste
           darunter aus dem Blick geriet und man nicht mehr sah, was
           sonst noch offen ist. Ein neu geöffnetes Gespräch schliesst
           jetzt das vorherige.

           `clear()` VOR dem Merken: Sonst löschte es den gerade
           gesetzten Eintrag gleich wieder mit. */
        const warOffen = offen.has(c.id);
        offen.clear();
        if (!warOffen) offen.add(c.id);
        zeichne();
      });
      knöpfe.append(b);
    }
    if (knöpfe.childNodes.length) k.append(knöpfe);

    if (!offen.has(c.id)) return k;

    const auf = el('div', 'call__detail');
    if (c.protokoll_id) {
      /* Fertiges Protokoll: lesen, nicht bearbeiten. Ein festgehaltenes
         Gespräch nachträglich umzuschreiben wäre genau das, was ein
         Protokoll wertlos macht. */
      if (c.punkte) {
        auf.append(el('p', 'kk__schild', 'Besprochene Punkte'));
        auf.append(el('p', 'call__abschnitt', c.punkte));
      }
      if (c.entscheidungen) {
        auf.append(el('p', 'kk__schild', 'Entscheidungen'));
        auf.append(el('p', 'call__abschnitt', c.entscheidungen));
      }
      if (c.aufgaben.length) {
        auf.append(el('p', 'kk__schild', 'Daraus entstandene Aufgaben'));
        const ul = el('ul', 'todo-liste');
        for (const a of c.aufgaben) {
          const li = el('li');
          li.dataset.status = a.status;
          li.append(el('span', 'todo-liste__titel', a.titel));
          const zus = [a.verantwortlich_name, a.frist ? 'bis ' + datum(a.frist) : null,
            a.status === 'erledigt' ? 'erledigt' : null].filter(Boolean).join(' · ');
          if (zus) li.append(el('span', 'kk__still', zus));
          ul.append(li);
        }
        auf.append(ul);
      }
      auf.append(el('p', 'call__quelle',
        `Festgehalten von ${c.protokoll_von || '—'} am ${datum(c.protokoll_erstellt)}`));

      /* Löschen darf NUR DogFather (Wunsch 02.09.2026: "nur ich kann die
         löschen sonst keiner"). Der Knopf steht deshalb auch nur bei ihm
         da -- ein Knopf, der bei anderen erscheint und dann abgewiesen
         wird, ist eine Einladung zum Ärgernis. Der Server prüft es
         trotzdem noch einmal; die Anzeige ist keine Sicherung.

         Gelöscht wird NUR das Protokoll. Das Gespräch bleibt im
         Kalender stehen und rutscht wieder zu "Protokoll fehlt" -- so
         ist die Wirkung umkehrbar: neu schreiben, fertig. */
      if (ich?.rolle === 'admin') {
        const weg = el('div', 'kk__knoepfe');
        weg.append(tuKnopf('Protokoll löschen', async () => {
          if (!confirm('Protokoll zu „' + c.titel + '" löschen?\n\n'
            + 'Der Text ist danach weg und lässt sich nicht wiederholen.\n\n'
            + 'Das Gespräch selbst bleibt im Kalender und steht danach '
            + 'wieder unter „Protokoll fehlt".\n\n'
            + 'Bereits daraus entstandene Aufgaben bleiben ebenfalls stehen.')) return;
          const a = await hole('/workspace/api/calls/' + c.id + '/protokoll', { method: 'DELETE' });
          if (!a.ok) {
            melde((await a.json().catch(() => ({}))).fehler || 'Löschen ging nicht.');
            return;
          }
          offen.delete(c.id);
          await laden();
        }));
        auf.append(weg);
      }
      if (c.naechster_termin_id) {
        const p = el('p', 'call__quelle', 'Folgetermin liegt im Kalender. ');
        const a = el('a', 'call__verweis', 'Kalender öffnen');
        a.href = 'kalender.html';
        p.append(a);
        auf.append(p);
      }
    } else {
      auf.append(bogen(c));
    }
    k.append(auf);
    return k;
  }

  /* ---------- Zeichnen ----------------------------------------------------- */

  const GRUPPEN = [
    { schluessel: 'offen', titel: 'Protokoll fehlt',
      frage: 'Diese Gespräche sind vorbei, aber noch nicht festgehalten.' },
    { schluessel: 'anstehend', titel: 'Steht an', frage: null },
    { schluessel: 'erledigt', titel: 'Festgehalten', frage: null },
  ];

  function zeichne() {
    const ziel = $('listen');
    ziel.textContent = '';
    ziel.setAttribute('aria-busy', 'false');

    if (!daten.offen.length && !daten.anstehend.length && !daten.erledigt.length) {
      const leer = el('div', 'leer-hinweis');
      leer.append(document.createTextNode('Noch keine Calls. Termine mit der Art „Call" oder „Review" '));
      const a = el('a', 'call__verweis', 'im Kalender');
      a.href = 'kalender.html';
      leer.append(a, document.createTextNode(' erscheinen automatisch hier.'));
      ziel.append(leer);
      return;
    }

    for (const g of GRUPPEN) {
      const liste = daten[g.schluessel];
      if (!liste.length) continue;
      const s = el('section', 'gruppe');
      s.dataset.gruppe = g.schluessel;
      const kopf = el('div', 'stufe__kopf');
      kopf.append(el('h2', 'stufe__titel', g.titel), el('span', 'stufe__zahl', String(liste.length)));
      s.append(kopf);
      if (g.frage) s.append(el('p', 'block__frage', g.frage));
      const box = el('div', 'gruppe__karten');
      for (const c of liste) box.append(karte(c, g.schluessel));
      s.append(box);
      ziel.append(s);
    }
  }

  async function laden() {
    try {
      const a = await hole('/workspace/api/calls');
      if (!a.ok) { melde('Gespräche konnten nicht geladen werden.'); return; }
      daten = await a.json();
      raumZeigen();
      zeichne();
    } catch { /* umgeleitet */ }
  }

  /* ---------- Der feste Call-Raum ------------------------------------------
     Sichtbar für alle, änderbar nur vom Management. Wer nicht ändern
     darf und wo noch nichts hinterlegt ist, bekommt die Zeile gar nicht
     zu sehen -- eine leere Angabe, an der man nichts tun kann, ist nur
     Rauschen. */

  const darfRaum = () => LEITUNG.has(ich?.rolle);

  function raumZeigen() {
    const link = daten?.call_link || '';
    const block = $('call-raum');
    block.hidden = !link && !darfRaum();
    $('call-raum-aendern').hidden = !darfRaum();
    $('call-raum-link').hidden = !link;
    $('call-raum-leer').hidden = !!link;
    if (link) {
      $('call-raum-link').href = link;
      /* Der nackte Link ist unlesbar lang. Angezeigt wird, woran man ihn
         erkennt -- die volle Adresse steht im Titel und im Verweis. */
      $('call-raum-link').textContent = link.replace(/^https?:\/\//i, '').slice(0, 60);
      $('call-raum-link').title = link;
    }
  }

  $('call-raum-aendern').addEventListener('click', () => {
    $('call-raum-feld').value = daten?.call_link || '';
    $('call-raum-form').hidden = false;
    $('call-raum-aendern').hidden = true;
    $('call-raum-feld').focus();
  });
  $('call-raum-abbrechen').addEventListener('click', () => {
    $('call-raum-form').hidden = true;
    $('call-raum-aendern').hidden = false;
  });
  $('call-raum-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    melde('');
    try {
      const a = await hole('/workspace/api/call-link', {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ link: $('call-raum-feld').value.trim() }),
      });
      if (!a.ok) {
        melde((await a.json().catch(() => ({}))).fehler || 'Speichern ging nicht.');
        return;
      }
      $('call-raum-form').hidden = true;
      $('call-raum-aendern').hidden = false;
      await laden();
    } catch { /* umgeleitet */ }
  });

  /* ---------- Start --------------------------------------------------------- */

  (async () => {
    try {
      const a = await hole('/workspace/api/ich');
      if (!a.ok) { location.assign('/workspace/'); return; }
      ich = await a.json();
    } catch { return; }
    window.werZeigen?.(ich);
    kiDa = await window.KI.verfuegbar();
    await laden();
  })();
})();