Notizen je Projekt statt Reiter Leistungsphasen

- Neuer Reiter „Notizen“ im Projektbereich: Liste mit Suche und
  angehefteten Notizen, Editor mit Formatierung, automatisches Speichern,
  Mail per Drag & Drop oder Strg+V als neue Notiz, live bei allen
- Reiter „Leistungsphasen“ entfernt (Phasen weiter im Terminplan)
- Behoben: Umlaute in .eml-Dateien ohne Transfer-Kodierung gingen
  verloren (betraf auch „Termin aus Mail“)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

public/js/plan/plan-gantt.js

@@ -68,7 +68,6 @@
     // Neu-Render-Funktion nach jeder Änderung ist — so bleiben alle drei
     // Bereiche ohne zusätzliche Aufrufe in den ändernden Modulen gleich.
     if(typeof renderPlanTasks === 'function') renderPlanTasks();
-    if(typeof renderPlanPhasen === 'function') renderPlanPhasen();
     if(typeof renderPlanDashboard === 'function') renderPlanDashboard();
   };
 

public/js/plan/plan-notizen.js

@@ -0,0 +1,410 @@
+// -----------------------------
+// Projektbereich — Notizen (Eriks Wahl „A – Liste + Editor“)
+// -----------------------------
+// Gemeinsame Notizen je Projekt: links die Liste (angeheftete oben, danach
+// zuletzt geänderte zuerst, Suche über Titel und Text), rechts die gewählte
+// Notiz direkt bearbeitbar — Titel, dieselbe Werkzeugleiste wie beim
+// Sitzungskommentar (richtextToolbarHtml(), js/utils.js) und der Text.
+// Gespeichert wird automatisch kurz nach dem Tippen und beim Verlassen des
+// Feldes; „Gespeichert ✓“ zeigt den Stand. Mail per Drag & Drop (Text oder
+// .eml) bzw. Strg+V außerhalb von Eingabefeldern legt eine neue Notiz an,
+// ohne KI. Live: andere Browser erfahren Änderungen über das Ereignis
+// {typ:'notizen'} (notizenLiveAenderung(), aus js/store.js).
+//
+// Daten am Server: Tabelle projekt_notizen, Routen /projekt-notizen*
+// (server.js). Die Notizen hängen am Projekt (projectUid), nicht an der
+// Sitzung. Schreiben: Recht proj.plan; Löschen: Verfasser oder Admin.
+(function(){
+  const app = window.PlanApp;
+  const SPEICHER_PAUSE_MS = 1200;
+
+  let liste = [];            // Notizen des geladenen Projekts
+  let uidGeladen = null;     // projectUid, zu dem `liste` gehört
+  let aktivId = null;        // gewählte Notiz
+  let suche = '';
+  let basis = '';            // geaendertAm, auf dem die Bearbeitung beruht
+  let ungespeichert = false;
+  let speicherTimer = null;
+  let speichertGerade = false;
+  let beobachter = null;     // MutationObserver auf dem Textfeld
+  let loeschenFragt = null;  // Timer der zweistufigen Löschen-Abfrage
+  let ladeFehler = '';
+
+  const kannSchreiben = () => typeof hatRecht === 'function' && hatRecht('proj.plan');
+  const projektUid = () => app.project ? String(app.project.projectUid || app.project.id || '') : '';
+  const wrap = () => document.getElementById('planNotizenWrap');
+  const aktiv = () => liste.find(n => n.id === aktivId) || null;
+
+  function zeit(iso){
+    if(!iso) return '';
+    const d = new Date(iso);
+    if(isNaN(d)) return '';
+    const heute = new Date();
+    const gleicherTag = d.toDateString() === heute.toDateString();
+    const gestern = new Date(heute); gestern.setDate(heute.getDate() - 1);
+    const uhr = d.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' });
+    if(gleicherTag) return 'heute ' + uhr;
+    if(d.toDateString() === gestern.toDateString()) return 'gestern ' + uhr;
+    return d.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: d.getFullYear() === heute.getFullYear() ? undefined : 'numeric' });
+  }
+  function kurzname(name){
+    const teile = String(name || '').trim().split(/\s+/);
+    return teile.length > 1 ? teile[0][0] + '. ' + teile.slice(1).join(' ') : (name || '');
+  }
+  function klartext(html){
+    return typeof statusPlainText === 'function' ? statusPlainText(html) : String(html || '').replace(/<[^>]+>/g, ' ');
+  }
+  function sortieren(){
+    liste.sort((a, b) => (b.angeheftet - a.angeheftet) || String(b.geaendertAm).localeCompare(String(a.geaendertAm)));
+  }
+
+  // ---------- Laden ----------
+  function laden(uid){
+    uidGeladen = uid;
+    ladeFehler = '';
+    return fetch(baseUrl() + '/projekt-notizen?uid=' + encodeURIComponent(uid))
+      .then(r => r.json().then(d => ({ ok: r.ok, d })))
+      .then(({ ok, d }) => {
+        if(uid !== uidGeladen) return;
+        if(!ok || !d.ok) throw new Error(d.error || 'Laden fehlgeschlagen');
+        liste = d.notizen || [];
+        sortieren();
+      })
+      .catch(e => { ladeFehler = e.message || 'Die Notizen konnten nicht geladen werden.'; liste = []; });
+  }
+
+  // ---------- Darstellung ----------
+  window.renderPlanNotizen = function(){
+    const el = wrap();
+    if(!el || !app.project) return;
+    const uid = projektUid();
+    if(uid !== uidGeladen){
+      jetztSpeichern();
+      aktivId = null; liste = []; suche = '';
+      el.innerHTML = '<div class="notizen-laedt">Notizen werden geladen…</div>';
+      laden(uid).then(() => { if(projektUid() === uid) aufbauen(); });
+      return;
+    }
+    aufbauen();
+  };
+
+  function aufbauen(){
+    const el = wrap();
+    if(!el) return;
+    if(!aktiv() && liste.length) aktivId = liste[0].id;
+    el.innerHTML = `
+      <div class="notizen" id="notizenBereich">
+        <aside class="notizen-liste">
+          <div class="notizen-suchzeile">
+            <input type="search" id="notizenSuche" class="notizen-suche" placeholder="Notizen durchsuchen…"
+              aria-label="Notizen durchsuchen" value="${esc(suche)}" oninput="notizenSuchen(this.value)">
+            ${kannSchreiben() ? '<button type="button" class="notizen-neu" onclick="notizNeu()">+ Neu</button>' : ''}
+          </div>
+          <div id="notizenEintraege" class="notizen-eintraege"></div>
+          ${kannSchreiben() ? '<div class="notizen-ablage">Mail hierher ziehen = neue Notiz</div>' : ''}
+        </aside>
+        <div class="notizen-editor" id="notizenEditor"></div>
+      </div>`;
+    listeZeichnen();
+    editorZeichnen();
+  }
+
+  function listeZeichnen(){
+    const box = document.getElementById('notizenEintraege');
+    if(!box) return;
+    if(ladeFehler){ box.innerHTML = '<div class="notizen-leer ist-fehler">' + esc(ladeFehler) + '</div>'; return; }
+    const s = suche.trim().toLowerCase();
+    const treffer = s ? liste.filter(n => (n.titel + ' ' + klartext(n.html)).toLowerCase().includes(s)) : liste;
+    if(!liste.length){ box.innerHTML = '<div class="notizen-leer">Noch keine Notizen.</div>'; return; }
+    if(!treffer.length){ box.innerHTML = '<div class="notizen-leer">Keine Notiz enthält „' + esc(suche) + '“.</div>'; return; }
+    const zeile = n => {
+      const vorschau = klartext(n.html).replace(/\s+/g, ' ').trim().slice(0, 90);
+      return `<button type="button" class="notizen-eintrag${n.id === aktivId ? ' ist-aktiv' : ''}" onclick="notizWaehlen('${esc(n.id)}')">
+          <span class="notizen-eintrag-titel">${esc(n.titel || 'Ohne Titel')}${n.quelle === 'mail' ? ' <span class="notizen-chip">Mail</span>' : ''}</span>
+          <span class="notizen-eintrag-text">${esc(vorschau || 'Kein Text')}</span>
+          <span class="notizen-eintrag-meta">${esc(kurzname(n.geaendertVon))} · ${esc(zeit(n.geaendertAm))}</span>
+        </button>`;
+    };
+    const oben = treffer.filter(n => n.angeheftet), rest = treffer.filter(n => !n.angeheftet);
+    box.innerHTML = (oben.length ? '<div class="notizen-gruppe"><span class="notizen-pin-punkt"></span>Angeheftet</div>' + oben.map(zeile).join('') : '')
+      + (rest.length ? (oben.length ? '<div class="notizen-gruppe">Weitere</div>' : '') + rest.map(zeile).join('') : '');
+  }
+
+  function editorZeichnen(){
+    const el = document.getElementById('notizenEditor');
+    if(!el) return;
+    if(beobachter){ beobachter.disconnect(); beobachter = null; }
+    const n = aktiv();
+    if(!n){
+      el.innerHTML = `<div class="notizen-editor-leer">
+          <b>${liste.length ? 'Notiz links auswählen' : 'Noch keine Notizen in diesem Projekt'}</b>
+          <span>${kannSchreiben() ? 'Mit „+ Neu“ anlegen oder eine Mail auf diesen Bereich ziehen.' : 'Zum Anlegen fehlt das Recht, den Terminplan zu bearbeiten.'}</span>
+        </div>`;
+      return;
+    }
+    const schreiben = kannSchreiben();
+    basis = n.geaendertAm;
+    ungespeichert = false;
+    el.innerHTML = `
+      <div class="notizen-editor-kopf">
+        <input type="text" id="notizTitel" class="notizen-titel" value="${esc(n.titel)}" placeholder="Titel der Notiz"
+          aria-label="Titel der Notiz" ${schreiben ? '' : 'readonly'} oninput="notizGeaendert()" onblur="notizJetztSpeichern()">
+        ${schreiben ? `<button type="button" class="notizen-symbol${n.angeheftet ? ' ist-an' : ''}" onclick="notizAnheften()"
+            title="${n.angeheftet ? 'Nicht mehr anheften' : 'Oben anheften'}" aria-pressed="${n.angeheftet}">${n.angeheftet ? 'Angeheftet' : 'Anheften'}</button>
+          <button type="button" class="notizen-symbol ist-gefahr" id="notizLoeschen" onclick="notizLoeschen()">Löschen</button>` : ''}
+      </div>
+      <div class="richtext-wrap notizen-richtext">
+        ${schreiben ? richtextToolbarHtml('.notizen-text') : ''}
+        ${richtextFeldHtml('notizen-text', sanitizeStatusHtml(n.html || ''), 'Notiz schreiben…', 'id="notizText" onblur="notizJetztSpeichern()"', schreiben)}
+      </div>
+      <div class="notizen-fuss">
+        <span>Angelegt von ${esc(n.erstelltVon)} ${esc(zeit(n.erstelltAm))}${n.geaendertAm !== n.erstelltAm ? ' · zuletzt geändert von ' + esc(n.geaendertVon) + ' ' + esc(zeit(n.geaendertAm)) : ''}</span>
+        <span id="notizStatus" class="notizen-status"></span>
+      </div>`;
+    const text = document.getElementById('notizText');
+    // Auch Fett/Farbe aus der Werkzeugleiste ändern den Inhalt, ohne ein
+    // input-Ereignis auszulösen — daher ein MutationObserver.
+    if(text && schreiben){
+      beobachter = new MutationObserver(() => notizGeaendert());
+      beobachter.observe(text, { childList: true, subtree: true, characterData: true, attributes: true });
+    }
+  }
+
+  function status(text, art){
+    const el = document.getElementById('notizStatus');
+    if(!el) return;
+    el.className = 'notizen-status' + (art ? ' ist-' + art : '');
+    el.innerHTML = text;
+  }
+
+  // ---------- Bearbeiten und Speichern ----------
+  window.notizenSuchen = function(wert){ suche = wert || ''; listeZeichnen(); };
+
+  window.notizWaehlen = function(id){
+    if(id === aktivId) return;
+    jetztSpeichern();
+    aktivId = id;
+    listeZeichnen();
+    editorZeichnen();
+  };
+
+  window.notizGeaendert = function(){
+    if(!kannSchreiben() || !aktiv()) return;
+    ungespeichert = true;
+    status('Ungespeichert');
+    clearTimeout(speicherTimer);
+    speicherTimer = setTimeout(jetztSpeichern, SPEICHER_PAUSE_MS);
+  };
+  window.notizJetztSpeichern = function(){ jetztSpeichern(); };
+
+  // jetztSpeichern: schickt die gewählte Notiz, falls geändert. ohneBasis =
+  // bewusst überschreiben (nach einem Konflikt „Meine Fassung behalten“).
+  function jetztSpeichern(ohneBasis){
+    clearTimeout(speicherTimer);
+    const n = aktiv();
+    if(!n || !ungespeichert || !kannSchreiben()) return Promise.resolve();
+    if(speichertGerade){ speicherTimer = setTimeout(jetztSpeichern, 400); return Promise.resolve(); }
+    const titelEl = document.getElementById('notizTitel');
+    const textEl = document.getElementById('notizText');
+    const titel = titelEl ? titelEl.value : n.titel;
+    const html = textEl ? textEl.innerHTML : n.html;
+    ungespeichert = false;
+    speichertGerade = true;
+    status('Speichert…');
+    return fetch(baseUrl() + '/projekt-notizen/' + encodeURIComponent(n.id), {
+      method: 'PUT', headers: { 'Content-Type': 'application/json; charset=utf-8' },
+      body: JSON.stringify({ titel, html, basis: ohneBasis ? '' : basis })
+    }).then(r => r.json().then(d => ({ r, d }))).then(({ r, d }) => {
+      if(r.status === 409 && d.konflikt){
+        ungespeichert = true;
+        status(esc(d.error) + ' <button type="button" class="notizen-link" onclick="notizKonflikt(true)">Meine Fassung speichern</button>'
+          + ' <button type="button" class="notizen-link" onclick="notizKonflikt(false)">Neuen Stand laden</button>', 'warnung');
+        n._fremd = d.notiz;
+        return;
+      }
+      if(!r.ok || !d.ok) throw new Error(d.error || 'Speichern fehlgeschlagen');
+      Object.assign(n, d.notiz, { titel, html });
+      if(n.id === aktivId) basis = d.notiz.geaendertAm;
+      sortieren();
+      listeZeichnen();
+      if(!ungespeichert) status('Gespeichert ✓', 'ok');
+    }).catch(e => {
+      ungespeichert = true;
+      status('Nicht gespeichert: ' + esc(e.message) + ' — wird erneut versucht.', 'fehler');
+      speicherTimer = setTimeout(jetztSpeichern, 5000);
+    }).finally(() => { speichertGerade = false; });
+  }
+
+  window.notizKonflikt = function(meine){
+    const n = aktiv();
+    if(!n) return;
+    if(meine){ ungespeichert = true; jetztSpeichern(true); return; }
+    if(n._fremd) Object.assign(n, n._fremd);
+    delete n._fremd;
+    ungespeichert = false;
+    listeZeichnen();
+    editorZeichnen();
+  };
+
+  window.notizNeu = function(){
+    const uid = projektUid();
+    if(!uid || !kannSchreiben()) return;
+    jetztSpeichern();
+    fetch(baseUrl() + '/projekt-notizen', {
+      method: 'POST', headers: { 'Content-Type': 'application/json; charset=utf-8' },
+      body: JSON.stringify({ uid, titel: '', html: '' })
+    }).then(r => r.json()).then(d => {
+      if(!d.ok) throw new Error(d.error || 'Anlegen fehlgeschlagen');
+      neueNotizZeigen(d.notiz);
+      const t = document.getElementById('notizTitel');
+      if(t) t.focus();
+    }).catch(e => app.showToast('Notiz konnte nicht angelegt werden: ' + e.message));
+  };
+
+  function neueNotizZeigen(notiz){
+    if(!notiz || notiz.uid !== uidGeladen) return;
+    liste = liste.filter(x => x.id !== notiz.id);
+    liste.push(notiz);
+    sortieren();
+    aktivId = notiz.id;
+    suche = '';
+    const s = document.getElementById('notizenSuche');
+    if(s) s.value = '';
+    listeZeichnen();
+    editorZeichnen();
+  }
+
+  window.notizAnheften = function(){
+    const n = aktiv();
+    if(!n) return;
+    jetztSpeichern().then(() => fetch(baseUrl() + '/projekt-notizen/' + encodeURIComponent(n.id), {
+      method: 'PUT', headers: { 'Content-Type': 'application/json; charset=utf-8' },
+      body: JSON.stringify({ angeheftet: !n.angeheftet })
+    })).then(r => r.json()).then(d => {
+      if(!d.ok) throw new Error(d.error || 'Fehler');
+      n.angeheftet = d.notiz.angeheftet;
+      sortieren();
+      listeZeichnen();
+      const knopf = document.querySelector('.notizen-editor-kopf .notizen-symbol:not(.ist-gefahr)');
+      if(knopf){
+        knopf.classList.toggle('ist-an', n.angeheftet);
+        knopf.textContent = n.angeheftet ? 'Angeheftet' : 'Anheften';
+        knopf.title = n.angeheftet ? 'Nicht mehr anheften' : 'Oben anheften';
+        knopf.setAttribute('aria-pressed', String(n.angeheftet));
+      }
+    }).catch(e => app.showToast('Anheften fehlgeschlagen: ' + e.message));
+  };
+
+  // notizLoeschen: zweistufig im Knopf selbst (kein confirm()).
+  window.notizLoeschen = function(){
+    const n = aktiv();
+    const knopf = document.getElementById('notizLoeschen');
+    if(!n || !knopf) return;
+    if(!loeschenFragt){
+      knopf.textContent = 'Wirklich löschen?';
+      knopf.classList.add('ist-fragend');
+      loeschenFragt = setTimeout(() => {
+        loeschenFragt = null;
+        const k = document.getElementById('notizLoeschen');
+        if(k){ k.textContent = 'Löschen'; k.classList.remove('ist-fragend'); }
+      }, 4000);
+      return;
+    }
+    clearTimeout(loeschenFragt); loeschenFragt = null;
+    clearTimeout(speicherTimer); ungespeichert = false;
+    fetch(baseUrl() + '/projekt-notizen/' + encodeURIComponent(n.id), { method: 'DELETE' })
+      .then(r => r.json().then(d => ({ r, d }))).then(({ r, d }) => {
+        if(!r.ok || !d.ok) throw new Error(d.error || 'Löschen fehlgeschlagen');
+        liste = liste.filter(x => x.id !== n.id);
+        aktivId = liste.length ? liste[0].id : null;
+        listeZeichnen();
+        editorZeichnen();
+      }).catch(e => { status(esc(e.message), 'fehler'); const k = document.getElementById('notizLoeschen'); if(k){ k.textContent = 'Löschen'; k.classList.remove('ist-fragend'); } });
+  };
+
+  // ---------- Live: Änderungen aus anderen Browsern ----------
+  // Liste neu holen; die gewählte Notiz nur ersetzen, wenn hier gerade
+  // nichts ungespeichert ist und niemand in ihr tippt.
+  window.notizenLiveAenderung = function(uid){
+    if(!uid || uid !== uidGeladen) return;
+    const n = aktiv();
+    laden(uid).then(() => {
+      if(!wrap()) return;
+      if(aktivId && !liste.some(x => x.id === aktivId)){ aktivId = liste.length ? liste[0].id : null; editorZeichnen(); }
+      listeZeichnen();
+      const frisch = aktiv();
+      const tippt = document.activeElement && document.activeElement.closest && document.activeElement.closest('#notizenEditor');
+      if(frisch && n && frisch.id === n.id && !ungespeichert && !tippt && frisch.geaendertAm !== basis) editorZeichnen();
+    });
+  };
+
+  // ---------- Mail ablegen (Drag & Drop, Strg+V) ----------
+  function imNotizenBereich(){
+    const s = document.querySelector('.plan-section.is-active');
+    return typeof currentTab !== 'undefined' && currentTab === 'plan' && s && s.dataset.section === 'notizen' && !!app.project;
+  }
+  function ausMail(nutzlast){
+    const uid = projektUid();
+    if(!uid) return;
+    jetztSpeichern();
+    fetch(baseUrl() + '/projekt-notizen/aus-mail', {
+      method: 'POST', headers: { 'Content-Type': 'application/json; charset=utf-8' },
+      body: JSON.stringify(Object.assign({ uid }, nutzlast))
+    }).then(r => r.json()).then(d => {
+      if(!d.ok) throw new Error(d.error || 'Fehlgeschlagen');
+      neueNotizZeigen(d.notiz);
+      app.showToast('Notiz aus der Mail angelegt.');
+    }).catch(e => app.showToast('Mail konnte nicht übernommen werden: ' + e.message));
+  }
+  function ausDaten(dt){
+    const dateien = Array.from(dt.files || []);
+    const eml = dateien.find(f => /\.eml$/i.test(f.name || '') || f.type === 'message/rfc822');
+    if(eml){
+      if(eml.size > 5 * 1024 * 1024){ app.showToast('Die Mail ist zu groß (mehr als 5 MB).'); return; }
+      eml.text().then(t => ausMail({ eml: t }));
+      return;
+    }
+    if(dateien.some(f => /\.msg$/i.test(f.name || ''))){
+      app.showToast('Outlook-Dateien (.msg) lassen sich nicht lesen. Bitte den Mailtext markieren und hineinziehen.');
+      return;
+    }
+    let text = (dt.getData('text/plain') || '').trim();
+    if(!text){
+      const div = document.createElement('div');
+      div.innerHTML = (dt.getData('text/html') || '').replace(/<(script|style)[\s\S]*?<\/\1>/gi, '');
+      text = (div.innerText || div.textContent || '').trim();
+    }
+    if(text) ausMail({ text });
+  }
+  const bereich = () => document.getElementById('planSection-notizen');
+  document.addEventListener('dragover', e => {
+    if(!imNotizenBereich() || !kannSchreiben() || !bereich().contains(e.target)) return;
+    if(e.target.closest && e.target.closest('#notizenEditor [contenteditable="true"], #notizTitel')) return;
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'copy';
+    bereich().classList.add('notizen-zieht');
+  });
+  document.addEventListener('dragleave', e => {
+    const b = bereich();
+    if(b && (!e.relatedTarget || !b.contains(e.relatedTarget))) b.classList.remove('notizen-zieht');
+  });
+  document.addEventListener('drop', e => {
+    const b = bereich();
+    if(b) b.classList.remove('notizen-zieht');
+    if(!imNotizenBereich() || !kannSchreiben() || !b.contains(e.target)) return;
+    // In das Textfeld gezogen: normal einfügen lassen, keine neue Notiz.
+    if(e.target.closest && e.target.closest('#notizenEditor [contenteditable="true"], #notizTitel')) return;
+    e.preventDefault();
+    ausDaten(e.dataTransfer);
+  });
+  document.addEventListener('paste', e => {
+    if(!imNotizenBereich() || !kannSchreiben()) return;
+    const ziel = e.target;
+    if(ziel && ziel.closest && ziel.closest('input, textarea, select, [contenteditable="true"], .modal-bg')) return;
+    if(!e.clipboardData) return;
+    e.preventDefault();
+    ausDaten(e.clipboardData);
+  });
+  // Beim Verlassen der Seite noch speichern, was offen ist.
+  window.addEventListener('pagehide', () => { if(ungespeichert) jetztSpeichern(); });
+})();

public/js/plan/plan-phasen.js

@@ -1,21 +1,10 @@
 // -----------------------------
-// Projektbereich — Leistungsphasen
+// Projektbereich — Zuordnung Aufgabe → Leistungsphase
 // -----------------------------
-// Bereich "Leistungsphasen" (Eriks Wahl "B"): die Phasenbalken des
-// Terminplans (Aufgaben mit t.lph, balkenPhase() in load.js) als eigener
-// Bereich statt als Zeilen zwischen den Aufgaben. Oben ein Ablaufbalken über
-// alle Phasen mit Heute-Linie, darunter eine Kachel je Phase: Fortschritt
-// (aus dem Wochenbericht, p.lph), Zeitraum (aus dem Balken), Aufwand
-// (Summe der Stunden ihrer Aufgaben) und die Aufgaben, die in ihrem
-// Zeitraum beginnen — dieselbe Zuordnung wie die Gliederung im Terminplan
-// (plan-build-gantt.js).
-//
-// Keine eigene Datenhaltung: Bearbeiten öffnet dasselbe Panel wie im
-// Terminplan (openTodoModal() im Phasen-Modus), Fortschritt bleibt im
-// Wochenbericht ("Ein Ort je Angabe").
-//
-// renderPlanPhasen() wird von renderPlanGantt() (plan-gantt.js) und beim
-// Wechsel in den Bereich (showPlanSection(), plan-sections.js) aufgerufen.
+// Der frühere Reiter „Leistungsphasen“ (Ablaufbalken + Kachel je Phase) ist
+// auf Eriks Wunsch entfallen; an seiner Stelle steht „Notizen“. Geblieben ist
+// nur aufgabenPhase(), die die Aufgabenliste (plan-tasks.js) und das
+// Terminplan-PDF (pdf.js) nutzen.
 
 // aufgabenPhase: zu welcher Leistungsphase eine (gewöhnliche) Aufgabe gehört —
 // der Phasenbalken, in dessen Zeitraum sie beginnt. Dieselbe Regel wie die
@@ -31,150 +20,3 @@ function aufgabenPhase(t, todos){
     .find(b => s0 >= parseDateISO(b.start) && s0 <= parseDateISO(b.end));
   return k ? balkenPhase(k) : '';
 }
-
-(function(){
-  const app = window.PlanApp;
-
-  const LPH_NAMEN = {
-    'LPH 1': 'Grundlagenermittlung', 'LPH 2': 'Vorplanung', 'LPH 3': 'Entwurfsplanung',
-    'LPH 4': 'Genehmigungsplanung', 'LPH 5': 'Ausführungsplanung', 'LPH 6': 'Vorbereitung der Vergabe',
-    'LPH 7': 'Mitwirkung bei der Vergabe', 'LPH 8': 'Objektüberwachung', 'LPH 9': 'Objektbetreuung',
-    'W+M': 'Wartung und Monitoring'
-  };
-
-  const kurzDatum = d => d ? d.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit' }) : '';
-  const langDatum = d => d ? formatDateDE(d) : '';
-
-  // phasenDaten: je Phase alles, was Ablaufbalken und Kachel brauchen.
-  // Rückgabe: Array, sortiert läuft → geplant → fertig, darin nach Beginn.
-  function phasenDaten(){
-    const p = app.project;
-    const plan = app.ensurePlanLocal();
-    const todos = Array.isArray(plan.todos) ? plan.todos : [];
-    const beauftragt = Array.isArray(p.beauftragteLP) ? p.beauftragteLP : [];
-
-    // Phasen: beauftragte plus alle, die einen Balken haben.
-    const namen = LPHS.filter(l => beauftragt.includes(l) || todos.some(t => balkenPhase(t) === l));
-    const amtierend = (typeof lpActiveList === 'function' ? lpActiveList(p) : [])[0] || null;
-    const laufend = typeof arbeitsPhase === 'function' ? arbeitsPhase(p, amtierend) : amtierend;
-
-    return namen.map(l => {
-      const idx = todos.findIndex(t => balkenPhase(t) === l);
-      const balken = idx >= 0 ? todos[idx] : null;
-      const start = balken ? parseDateISO(balken.start) : null;
-      const ende = balken ? parseDateISO(balken.end) : null;
-      const prozent = typeof fortschrittProzent === 'function' ? fortschrittProzent(p, l) : 0;
-      const aufgaben = todos.filter(t => aufgabenPhase(t, todos) === l);
-      // Aufwand = Summe der Stunden ihrer Aufgaben (dieselbe Quelle wie die
-      // Auslastung, js/load/load.js), nicht mehr aus dem Honorar.
-      const stunden = Math.round(aufgaben.reduce((s, t) => s + (Number(t.aufwand) || 0), 0) * 10) / 10;
-      const status = prozent >= 100 ? 'fertig' : (l === laufend ? 'laeuft' : 'geplant');
-      return { l, idx, balken, start, ende, prozent, stunden, aufgaben, status,
-        beauftragt: !beauftragt.length || beauftragt.includes(l) };
-    }).sort((a, b) => {
-      const rang = { laeuft: 0, geplant: 1, fertig: 2 };
-      if(rang[a.status] !== rang[b.status]) return rang[a.status] - rang[b.status];
-      return LPHS.indexOf(a.l) - LPHS.indexOf(b.l);
-    });
-  }
-
-  // ablaufHtml: der schmale Balken über alle Phasen mit Zeitraum. Phasen
-  // ohne Zeitraum fehlen hier (sie stehen als Kachel mit Hinweis darunter).
-  function ablaufHtml(daten){
-    const mit = daten.filter(d => d.start && d.ende && d.ende >= d.start)
-      .sort((a, b) => a.start - b.start);
-    if(!mit.length) return '';
-    const von = mit[0].start.getTime();
-    const bis = Math.max(...mit.map(d => d.ende.getTime()));
-    const spanne = Math.max(1, bis - von);
-    const pos = t => Math.min(100, Math.max(0, (t - von) / spanne * 100));
-    const heute = new Date(); heute.setHours(0, 0, 0, 0);
-    const heutePos = heute.getTime() >= von && heute.getTime() <= bis ? pos(heute.getTime()) : null;
-    const segmente = mit.map(d => {
-      const links = pos(d.start.getTime());
-      const breite = Math.max(1.5, pos(d.ende.getTime() + 86400000) - links);
-      const titel = `${d.l}: ${langDatum(d.start)} – ${langDatum(d.ende)}, ${d.prozent} %`;
-      return `<button type="button" class="phasen-ablauf-seg is-${d.status}" style="left:${links}%;width:${breite}%;--fort:${d.prozent}%"
-          title="${esc(titel)}" onclick="phasenKachelZeigen('${esc(d.l)}')"><span>${esc(breite > 6 ? d.l : d.l.replace('LPH ', ''))}</span></button>`;
-    }).join('');
-    const heuteHtml = heutePos === null ? '' : `<span class="phasen-ablauf-heute" style="left:${heutePos}%" title="heute"></span>`;
-    const monat = d => d.toLocaleDateString('de-DE', { month: 'short', year: 'numeric' });
-    return `<div class="plan-panel phasen-ablauf">
-        <div class="phasen-kopf">Ablauf</div>
-        <div class="phasen-ablauf-spur">${segmente}${heuteHtml}</div>
-        <div class="phasen-ablauf-achse"><span>${esc(monat(mit[0].start))}</span>${heutePos === null ? '' : `<span class="phasen-ablauf-heute-text" style="left:${heutePos}%">heute, ${esc(kurzDatum(heute))}</span>`}<span>${esc(monat(new Date(bis)))}</span></div>
-      </div>`;
-  }
-
-  // kachelHtml: eine Kachel je Phase.
-  function kachelHtml(d, locked){
-    const statusText = { laeuft: 'läuft', geplant: 'geplant', fertig: 'fertig' }[d.status];
-    const erledigt = d.aufgaben.filter(t => t.done).length;
-    const aufgabenText = d.aufgaben.length ? `${erledigt} von ${d.aufgaben.length} erledigt` : 'keine';
-    const zeitraum = d.start && d.ende
-      ? `${d.start.getFullYear() === d.ende.getFullYear() ? kurzDatum(d.start) : langDatum(d.start)} – ${langDatum(d.ende)}`
-      : '<span class="phasen-leer">kein Zeitraum</span>';
-    const bearbeiten = locked ? ''
-      : (d.balken
-          ? `<button class="secondary small" onclick="openTodoModal(${d.idx})">Bearbeiten</button>`
-          : `<button class="secondary small" onclick="addPlanPhase('${esc(d.l)}')">Zeitraum festlegen</button>`);
-    const ansehen = d.aufgaben.length
-      ? `<button class="secondary small" onclick="phasenAufgabenZeigen('${esc(d.l)}')">Aufgaben ansehen</button>` : '';
-    return `<div class="phasen-kachel is-${d.status}" data-phase="${esc(d.l)}">
-        <div class="phasen-kachel-kopf">
-          <div class="phasen-ring" style="--fort:${d.prozent}%"><span>${d.prozent} %</span></div>
-          <div class="phasen-kachel-name">
-            <b>${esc(d.l)}</b>
-            <span>${esc(LPH_NAMEN[d.l] || '')}</span>
-          </div>
-          <span class="phasen-chip is-${d.status}">${statusText}</span>
-        </div>
-        ${d.beauftragt ? '' : '<div class="phasen-hinweis">nicht beauftragt</div>'}
-        <div class="phasen-werte">
-          <span><small>Zeitraum</small><b>${zeitraum}</b></span>
-          <span><small>Aufwand</small><b>${d.stunden ? d.stunden.toLocaleString('de-DE') + ' h' : '<span class="phasen-leer">keine Stunden</span>'}</b></span>
-          <span><small>Aufgaben</small><b>${aufgabenText}</b></span>
-        </div>
-        ${bearbeiten || ansehen ? `<div class="phasen-knoepfe">${bearbeiten}${ansehen}</div>` : ''}
-      </div>`;
-  }
-
-  // renderPlanPhasen: baut den Bereich neu auf. Keine Parameter.
-  window.renderPlanPhasen = function(){
-    const el = document.getElementById('planPhasenWrap');
-    if(!el || !app.project) return;
-    const locked = app.isLocked();
-    const daten = phasenDaten();
-    if(!daten.length){
-      el.innerHTML = `<div class="plan-panel"><div class="plan-task-empty">${locked
-        ? 'Für dieses Projekt sind keine Leistungsphasen hinterlegt.'
-        : 'Noch keine Leistungsphase. Unter „Einstellungen“ beauftragen oder über „+ Leistungsphase“ bzw. „Terminplan aus Honorar“ anlegen.'}</div></div>`;
-      return;
-    }
-    const summeH = daten.reduce((s, d) => s + d.stunden, 0);
-    const enden = daten.filter(d => d.ende).map(d => d.ende.getTime());
-    const laufend = daten.find(d => d.status === 'laeuft');
-    const teile = [daten.filter(d => d.beauftragt).length + ' beauftragt'];
-    if(laufend) teile.push('läuft: ' + laufend.l);
-    if(summeH) teile.push(summeH.toLocaleString('de-DE') + ' h in Aufgaben');
-    if(enden.length) teile.push('Ende voraussichtlich ' + langDatum(new Date(Math.max(...enden))));
-    el.innerHTML = `<div class="phasen-zusammenfassung">${esc(teile.join(' · '))}<span>Fortschritt aus dem Wochenbericht</span></div>
-      ${ablaufHtml(daten)}
-      <div class="phasen-raster">${daten.map(d => kachelHtml(d, locked)).join('')}</div>`;
-  };
-
-  // phasenKachelZeigen: Klick auf ein Segment im Ablauf — Kachel ins Bild
-  // holen und kurz hervorheben.
-  window.phasenKachelZeigen = function(l){
-    const k = document.querySelector(`#planPhasenWrap .phasen-kachel[data-phase="${CSS.escape(l)}"]`);
-    if(!k) return;
-    k.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-    k.classList.remove('ist-markiert'); void k.offsetWidth; k.classList.add('ist-markiert');
-  };
-
-  // phasenAufgabenZeigen: in den Bereich Aufgaben, gefiltert auf diese Phase.
-  window.phasenAufgabenZeigen = function(l){
-    if(typeof setzeAufgabenFilter === 'function') setzeAufgabenFilter(l);
-    showPlanSection('aufgaben');
-  };
-})();

public/js/plan/plan-sections.js

@@ -36,7 +36,7 @@
   // PLAN_SECTIONS: gültige Bereichsschlüssel in der Reihenfolge der
   // Navigationsleiste. Muss zu den data-section-Attributen in
   // App.html passen.
-  const PLAN_SECTIONS = ['dashboard', 'terminplan', 'phasen', 'aufgaben', 'leistung', 'dateien', 'protokolle', 'einstellungen'];
+  const PLAN_SECTIONS = ['dashboard', 'terminplan', 'notizen', 'aufgaben', 'leistung', 'dateien', 'protokolle', 'einstellungen'];
 
   // showPlanSection: schaltet auf einen Bereich um, hebt den zugehörigen
   // Knopf hervor und rendert den Inhalt des Bereichs neu. Das Neu-Rendern ist
@@ -63,8 +63,8 @@
 
     if(!app.project) return;
     if(key === 'terminplan' && typeof renderPlanGantt === 'function') renderPlanGantt();
-    if(key === 'phasen' && typeof renderPlanPhasen === 'function') renderPlanPhasen();
     if(key === 'aufgaben' && typeof renderPlanTasks === 'function') renderPlanTasks();
+    if(key === 'notizen' && typeof renderPlanNotizen === 'function') renderPlanNotizen();
     if(key === 'leistung' && typeof renderPlanLeistung === 'function') renderPlanLeistung();
     if(key === 'protokolle' && typeof renderPlanProtokolle === 'function') renderPlanProtokolle();
     if(key === 'einstellungen' && typeof renderPlanSettings === 'function') renderPlanSettings();

public/js/plan/plan-state.js

@@ -284,12 +284,10 @@ window.PlanApp = {
 
     // Schaltflächen, die neue Aufgaben/Meilensteine erzeugen — in gesperrten
     // Sitzungen nicht möglich. Die Liste enthält die Knöpfe beider Bereiche:
-    // Terminplan (…Btn), Aufgaben (…BtnList) und Leistungsphasen (…BtnPhasen),
-    // siehe App.html.
+    // Terminplan (…Btn) und Aufgaben (…BtnList), siehe App.html.
     const locked = isLocked();
     ['addMilestoneBtn', 'addPhaseBtn', 'addTodoBtn', 'templateBtn', 'honorarBtn', 'protokollTodosBtn',
-     'addTodoBtnList', 'addMilestoneBtnList', 'templateBtnList', 'protokollTodosBtnList', 'autoScheduleBtnList',
-     'honorarBtnPhasen', 'addPhaseBtnPhasen']
+     'addTodoBtnList', 'addMilestoneBtnList', 'templateBtnList', 'protokollTodosBtnList', 'autoScheduleBtnList']
       .forEach(id => {
         const btn = document.getElementById(id);
         if(btn) btn.style.display = locked ? 'none' : '';