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

/* ===================================================================
   Dateiablage.

   Hochgeladen wird der rohe Dateiinhalt, der Name steht im Kopf --
   deshalb braucht der Server kein multipart/form-data zu zerlegen.
   Wer was sehen und freigeben darf, entscheidet ausschliesslich er.
   =================================================================== */
(() => {
  'use strict';

  const $ = (id) => document.getElementById(id);
  const STATUSNAME = { entwurf: 'Entwurf', review: 'Review', freigegeben: 'Freigegeben' };
  const WEITER = { entwurf: 'review', review: 'freigegeben' };
  const ZURUECK = { review: 'entwurf', freigegeben: 'review' };

  let ich = null;
  let filter = '';
  let maxBytes = 25 * 1024 * 1024;

  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, optionen = {}) {
    const a = await fetch(pfad, { credentials: 'same-origin', ...optionen });
    if (a.status === 401) { location.assign('/workspace/'); throw new Error('abgemeldet'); }
    return a;
  }

  function groesse(bytes) {
    if (bytes < 1024) return bytes + ' B';
    if (bytes < 1024 * 1024) return Math.round(bytes / 1024) + ' KB';
    return (bytes / 1024 / 1024).toFixed(1).replace('.', ',') + ' MB';
  }
  const datum = (iso) => (iso ? iso.slice(0, 10).split('-').reverse().join('.') : '—');

  /* ---------- Wer darf die Datei sehen ------------------------------------
     Kleine Schalter statt einer Mehrfachliste: In einer <select multiple>
     verliert man mit einem Fehlklick die ganze Auswahl, und auf dem Handy
     ist sie kaum bedienbar. Hier ist jeder Name ein eigener Schalter. */

  let empfaenger = [];
  let dartFreigeben = false;

  function baueWahl() {
    const ziel = $('wahl');
    if (!ziel) return;
    const vorher = new Set([...ziel.querySelectorAll('.wahl__knopf[data-an="ja"]')]
      .map((b) => b.dataset.id));
    ziel.textContent = '';
    if (!empfaenger.length) {
      ziel.append(el('p', 'leise', dartFreigeben
        ? 'Es gibt noch niemanden, dem du eine Datei geben könntest.'
        : ''));
      return;
    }
    for (const p of empfaenger) {
      const b = el('button', 'wahl__knopf');
      b.type = 'button';
      b.dataset.id = String(p.id);
      b.dataset.rolle = p.rolle;
      if (vorher.has(String(p.id))) b.dataset.an = 'ja';
      b.append(el('span', 'wahl__name', p.name));
      b.append(el('span', 'wahl__rolle', ROLLENKURZ[p.rolle] || p.rolle));
      b.addEventListener('click', () => {
        if (b.dataset.an === 'ja') delete b.dataset.an; else b.dataset.an = 'ja';
        wahlHinweis();
      });
      ziel.append(b);
    }
    wahlHinweis();
  }

  function wahlHinweis() {
    const n = document.querySelectorAll('.wahl__knopf[data-an="ja"]').length;
    const h = $('wahl-hinweis');
    if (!h) return;
    h.textContent = n
      ? `${n} ${n === 1 ? 'Person' : 'Personen'} ausgewählt – nur sie sehen die Datei.`
      : 'Niemand ausgewählt – dann sieht sie nur DogFather.';
  }

  const ROLLENKURZ = { admin: 'DogFather', creator: 'Creator', scout: 'Scout' };

  /* ---------- Hochladen -------------------------------------------------- */

  async function schicke(datei) {
    melde('');
    if (datei.size > maxBytes) {
      melde(`„${datei.name}" ist ${groesse(datei.size)} groß – erlaubt sind ${groesse(maxBytes)}.`);
      return;
    }
    $('fortschritt').hidden = false;
    $('fortschritt-text').textContent = `„${datei.name}" wird hochgeladen …`;
    try {
      const kopf = {
        'Content-Type': datei.type || 'application/octet-stream',
        /* Kodiert, damit Umlaute und Leerzeichen im Kopf heil ankommen. */
        'X-Dateiname': encodeURIComponent(datei.name),
      };
      if (ich.rolle === 'admin' && $('f-creator').value) kopf['X-Creator'] = $('f-creator').value;
      /* Wer die Datei sehen darf -- als Liste von Ids im Kopf. */
      const gewaehlt = [...document.querySelectorAll('.wahl__knopf[data-an="ja"]')]
        .map((b) => b.dataset.id);
      if (gewaehlt.length) kopf['X-Personen'] = gewaehlt.join(',');

      const a = await hole('/workspace/api/dateien', { method: 'POST', headers: kopf, body: datei });
      if (!a.ok) {
        const d = await a.json().catch(() => ({}));
        melde(d.fehler || 'Hochladen hat nicht geklappt.');
        return;
      }
      /* Auswahl nach dem Hochladen loeschen -- sonst bekaeme die
         naechste Datei stillschweigend dasselbe Publikum. */
      for (const b of document.querySelectorAll('.wahl__knopf[data-an="ja"]')) delete b.dataset.an;
      await laden();
      wahlHinweis();
    } catch { /* umgeleitet */ } finally {
      $('fortschritt').hidden = true;
      $('feld-datei').value = '';
    }
  }

  const ablage = $('ablage');
  ablage.addEventListener('click', () => $('feld-datei').click());
  ablage.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); $('feld-datei').click(); }
  });
  $('feld-datei').addEventListener('change', () => {
    for (const d of $('feld-datei').files) schicke(d);
  });

  for (const art of ['dragenter', 'dragover']) {
    ablage.addEventListener(art, (e) => { e.preventDefault(); ablage.dataset.bereit = 'ja'; });
  }
  for (const art of ['dragleave', 'drop']) {
    ablage.addEventListener(art, () => { delete ablage.dataset.bereit; });
  }
  ablage.addEventListener('drop', (e) => {
    e.preventDefault();
    for (const d of e.dataTransfer.files) schicke(d);
  });
  /* Ohne diese beiden öffnet der Browser eine daneben fallengelassene
     Datei einfach als Seite -- die Arbeit wäre dann weg. */
  addEventListener('dragover', (e) => e.preventDefault());
  addEventListener('drop', (e) => e.preventDefault());

  /* ---------- Liste ------------------------------------------------------ */

  function tuKnopf(text, tu) {
    const b = el('button', 'schritt', text);
    b.type = 'button';
    b.addEventListener('click', async () => {
      b.disabled = true; melde('');
      try { await tu(); } catch { /* umgeleitet */ } finally { b.disabled = false; }
    });
    return b;
  }

  async function statusSetzen(d, neu) {
    const a = await hole(`/workspace/api/dateien/${d.id}`, {
      method: 'PATCH',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ status: neu }),
    });
    if (!a.ok) {
      melde((await a.json().catch(() => ({}))).fehler || 'Ändern hat nicht geklappt.');
      return;
    }
    await laden();
  }

  function zeile(d) {
    const k = el('div', 'datei');
    k.dataset.status = d.status;

    const zeichen = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    zeichen.setAttribute('viewBox', '0 0 24 24');
    zeichen.setAttribute('class', 'datei__zeichen');
    zeichen.setAttribute('aria-hidden', 'true');
    const pfad = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    pfad.setAttribute('d', 'M13.5 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8.5L13.5 3Zm0 0V8a.5.5 0 0 0 .5.5h5');
    zeichen.append(pfad);
    k.append(zeichen);

    k.append(el('div', 'datei__name', d.name_original));

    const knoepfe = el('div', 'datei__knoepfe');
    const marke = el('span', 'marke-status', STATUSNAME[d.status] || d.status);
    marke.dataset.status = d.status;
    knoepfe.append(marke);

    const holen = el('a', 'schritt', 'öffnen');
    holen.href = `/workspace/api/dateien/${d.id}/inhalt`;
    knoepfe.append(holen);

    if (WEITER[d.status]) {
      const darf = d.status !== 'review' || ich.rolle === 'admin';
      if (darf) knoepfe.append(tuKnopf(
        d.status === 'entwurf' ? 'zum Review ▶' : 'freigeben ▶',
        () => statusSetzen(d, WEITER[d.status])));
    }
    if (ZURUECK[d.status] && (d.status !== 'freigegeben' || ich.rolle === 'admin')) {
      knoepfe.append(tuKnopf('◀ zurück', () => statusSetzen(d, ZURUECK[d.status])));
    }
    if (ich.rolle === 'admin' || (d.hochgeladen_von === ich.id && d.status !== 'freigegeben')) {
      knoepfe.append(tuKnopf('löschen', async () => {
        if (!confirm(`„${d.name_original}" wirklich löschen?`)) return;
        const a = await hole(`/workspace/api/dateien/${d.id}`, { method: 'DELETE' });
        if (!a.ok) { melde('Löschen hat nicht geklappt.'); return; }
        await laden();
      }));
    }
    k.append(knoepfe);

    const zeile2 = el('div', 'datei__zeile');
    zeile2.append(el('span', null, groesse(d.groesse)));
    zeile2.append(el('span', null, '· ' + datum(d.erstellt)));
    if (d.hochgeladen_name) zeile2.append(el('span', null, '· von ' + d.hochgeladen_name));
    if (ich.rolle === 'admin' && d.creator_name) {
      zeile2.append(el('span', null, '· Bereich ' + d.creator_name));
    }
    if (d.notiz) zeile2.append(el('span', null, '· ' + d.notiz));
    k.append(zeile2);

    /* Wer sie sehen darf -- sichtbar fuer alle, damit niemand raten
       muss, wer eine Datei schon hat. */
    const frei = el('div', 'datei__freigaben');
    if (d.freigaben?.length) {
      frei.append(el('span', 'datei__schild', 'Sichtbar für'));
      for (const p of d.freigaben) frei.append(el('span', 'marke-person', p.name));
    } else {
      frei.append(el('span', 'datei__schild', 'Sichtbar für'));
      frei.append(el('span', 'marke-person marke-person--leer', 'niemanden zugeteilt'));
    }

    if (dartFreigeben && empfaenger.length) {
      const knopf = el('button', 'knopf-still', 'Ändern');
      knopf.type = 'button';
      knopf.addEventListener('click', () => freigabenBearbeiten(k, d));
      frei.append(knopf);
    }
    k.append(frei);
    return k;
  }

  /* Auswahl direkt an der Datei -- ohne Seitenwechsel und ohne Fenster,
     das den Rest verdeckt. */
  function freigabenBearbeiten(karte, d) {
    if (karte.querySelector('.datei__wahl')) return;
    const box = el('div', 'datei__wahl');
    const jetzt = new Set((d.freigaben || []).map((p) => p.id));
    for (const p of empfaenger) {
      const b = el('button', 'wahl__knopf');
      b.type = 'button';
      b.dataset.id = String(p.id);
      b.dataset.rolle = p.rolle;
      if (jetzt.has(p.id)) b.dataset.an = 'ja';
      b.append(el('span', 'wahl__name', p.name));
      b.append(el('span', 'wahl__rolle', ROLLENKURZ[p.rolle] || p.rolle));
      b.addEventListener('click', () => {
        if (b.dataset.an === 'ja') delete b.dataset.an; else b.dataset.an = 'ja';
      });
      box.append(b);
    }
    const knoepfe = el('div', 'datei__knoepfe');
    const speichern = el('button', 'knopf knopf--klein', 'Übernehmen');
    speichern.type = 'button';
    speichern.addEventListener('click', async () => {
      speichern.disabled = true;
      const ids = [...box.querySelectorAll('.wahl__knopf[data-an="ja"]')].map((b) => Number(b.dataset.id));
      const a = await hole(`/workspace/api/dateien/${d.id}`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ freigaben: ids }),
      });
      speichern.disabled = false;
      if (!a.ok) { melde((await a.json().catch(() => ({}))).fehler || 'Ging nicht.'); return; }
      await laden();
    });
    const abbrechen = el('button', 'knopf-still', 'Abbrechen');
    abbrechen.type = 'button';
    abbrechen.addEventListener('click', () => { box.remove(); knoepfe.remove(); });
    knoepfe.append(speichern, abbrechen);
    karte.append(box, knoepfe);
  }

  async function laden() {
    try {
      const a = await hole('/workspace/api/dateien');
      if (!a.ok) { melde('Dateien konnten nicht geladen werden.'); return; }
      const daten = await a.json();
      empfaenger = daten.empfaenger || [];
      dartFreigeben = !!daten.darf_freigeben;
      baueWahl();
      maxBytes = daten.max_bytes || maxBytes;
      $('ablage-grenze').textContent = 'bis ' + groesse(maxBytes);

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

      const sichtbar = daten.dateien.filter((d) => !filter || d.status === filter);
      if (!sichtbar.length) {
        ziel.append(el('p', 'leer-hinweis', daten.dateien.length
          ? 'In diesem Zustand liegt gerade nichts.'
          : 'Noch keine Datei abgelegt.'));
        return;
      }
      for (const d of sichtbar) ziel.append(zeile(d));
    } catch { /* umgeleitet */ }
  }

  for (const b of $('filter').querySelectorAll('.schritt')) {
    b.addEventListener('click', async () => {
      filter = b.dataset.status;
      for (const x of $('filter').querySelectorAll('.schritt')) {
        x.setAttribute('aria-pressed', String(x === b));
      }
      await laden();
    });
  }

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

  (async () => {
    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);

    /* Creator laden nichts hoch (Wunsch 28.08.2026). Das Ablegefeld
       verschwindet, stattdessen steht dort, warum -- ein einfach
       fehlendes Feld wirkt wie ein Fehler. Der Server weist einen
       Versuch ohnehin ab; das hier ist nur die Anzeige. */
    if (ich.rolle === 'creator') {
      $('ablage').hidden = true;
      $('nur-lesen').hidden = false;
    }

    if (ich.rolle === 'admin') {
      $('zuordnung').hidden = false;
      try {
        const { personen } = await (await hole('/workspace/api/personen')).json();
        for (const p of personen.filter((p) => p.rolle === 'creator')) {
          const o = document.createElement('option');
          o.value = String(p.id);
          o.textContent = p.name;
          $('f-creator').append(o);
        }
      } catch { /* Zuordnung bleibt leer */ }
    } else if (ich.rolle === 'scout') {
      $('zuordnung').hidden = false;
      $('f-creator').closest('.feld').hidden = true;
    }
    await laden();
  })();
})();