/* =================================================================== Scout-CRM (Konzept, Seite 15). Die Pipeline ist nach Stufen gruppiert, nicht als breites Board -- auf dem Handy waere ein Board mit sechs Spalten unbedienbar, und ein Scout arbeitet ohnehin meistens unterwegs. Jede Karte hat genau einen naheliegenden naechsten Schritt ("Weiter zu ..."), weil die Pipeline eine Richtung hat. Alles andere steckt im aufklappbaren Teil, damit die Liste ruhig bleibt. =================================================================== */ (() => { 'use strict'; /* DogFather und Manager haben dieselben Rechte -- die Unterscheidung macht nur die Personenverwaltung, und die prueft der Server. */ /* Die Leitungsliste steht in bereiche.js -- eine Antwort statt neun. Sie stand hier frueher selbst, ohne 'spicy', und genau das war der Fehler, den Filipe am 07.09.2026 gefunden hat. */ const LEITUNG = window.Bereiche.LEITUNG; const $ = (id) => document.getElementById(id); const WEITER = { neu: 'angesprochen', angesprochen: 'gespraech', gespraech: 'interessiert', interessiert: 'uebergeben', }; /* DIE ETAPPENNUMMER WIRD ABGELEITET, NICHT DANEBENGESCHRIEBEN (06.10.2026). WEITER sagt bereits, welche Stufe auf welche folgt -- die Nummerierung ist genau dieser Weg, einmal durchgezaehlt. Eine zweite Liste `{ neu: 1, angesprochen: 2, ... }` waere die naechste Stelle, die beim Einfuegen einer Stufe vergessen wird; eine Liste, die niemand pflegt, kann nicht veralten. „Abgelehnt" kommt in WEITER nicht vor und bekommt deshalb von selbst keine Nummer -- eine Absage ist keine Etappe auf dem Weg nach vorn. Dasselbe sagt der leere Zustand weiter unten, der ebenfalls nur bis fuenf zaehlt. */ const STUFE_NR = (() => { const nummern = {}; let stufe = 'neu', i = 1; while (stufe && !nummern[stufe]) { nummern[stufe] = String(i++).padStart(2, '0'); stufe = WEITER[stufe]; } return nummern; })(); /* WAS JEDE STUFE BEDEUTET -- an EINER Stelle. Diese Saetze standen bis zum 11.09.2026 nur im leeren Zustand der Seite, ausgeschrieben in einer eigenen Liste. Jetzt lesen beide daraus: die Erklaerung fuer den leeren Zustand und der Kopf jeder Stufe. Zwei Fassungen derselben Erklaerung waeren zwei Gelegenheiten, dass eine von beiden veraltet -- und eine veraltete Erklaerung ist schlimmer als keine. */ const STUFE_WAS = { neu: 'Entdeckt. Noch nicht angeschrieben.', angesprochen: 'Erste Nachricht ist raus. Jetzt läuft die Uhr.', gespraech: 'Ihr seid im Austausch – Fragen, Bedingungen, Termine.', interessiert: 'Grundsätzlich dabei. Jetzt zählt, dass es nicht liegen bleibt.', uebergeben: 'Ein Manager übernimmt. Ab hier ist es Betreuung, kein Scouting mehr.', abgelehnt: 'Passt nicht – festgehalten, damit niemand zweimal fragt.', }; let ich = null; let stufen = {}; /* Die Auswahllisten kommen vom Server (siehe /api/leads) -- die Oberflaeche fuehrt keine eigenen. Leere Vorgabe, damit ein Ausfall der Abfrage kein kaputtes Formular ergibt. */ let laenderListe = [], landName = {}, netzwerkListe = [], netzwerkName = {}; /* Normal und Premium -- die beiden Arten, die TikTok kennt. DIE RUECKFALLLISTE IST KEIN SCHMUCK: Sie steht hier, damit die Trennung auch dann zwei Spalten hat, wenn ein alter Server die Listen noch nicht mitschickt. Ohne sie waere die Seite in genau dem Moment leer, in dem jemand sie zum ersten Mal nach einem Deploy aufmacht -- der Server neu, die Datei aus dem Zwischenspeicher alt, oder umgekehrt. */ let artenListe = ['normal', 'premium'], artName = { normal: 'Normal', premium: 'Premium' }; let heute = ''; let daten = []; let offen = new Set(); 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 datum = (iso) => (iso ? iso.slice(0, 10).split('-').reverse().join('.') : ''); 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'); } if (a.status === 404 && !pfad.includes('/leads/')) { location.assign('/workspace/start.html'); throw new Error('kein Zugriff'); } return a; } async function schicke(pfad, methode, körper) { const a = await hole(pfad, { method: methode, headers: körper ? { 'Content-Type': 'application/json' } : undefined, body: körper ? JSON.stringify(körper) : undefined, }); if (!a.ok) { melde(sagWas((await a.json().catch(() => ({}))).fehler, 'Das hat nicht geklappt.')); return null; } melde(''); return a.json().catch(() => ({})); } /* ---------- Karte -------------------------------------------------------- */ function zeile(schild, wert) { const p = el('p', 'kk__zeile'); p.append(el('span', 'kk__schild', schild), document.createTextNode(wert)); return p; } /* 12.400 -> "12,4k". Auf einer Karte zaehlt die Groessenordnung, nicht die letzte Stelle -- und die genaue Zahl steht im Titel. */ function zahlKurz(n) { if (!Number.isFinite(n)) return ''; if (n >= 1000000) return (n / 1000000).toFixed(n >= 10000000 ? 0 : 1).replace('.', ',') + 'M'; if (n >= 1000) return (n / 1000).toFixed(n >= 10000 ? 0 : 1).replace('.', ',') + 'k'; return String(n); } function karte(l) { const k = el('article', 'kk'); k.dataset.prio = l.prioritaet; const fällig = l.naechster_followup && l.naechster_followup <= heute && l.status !== 'uebergeben' && l.status !== 'abgelehnt'; if (fällig) k.dataset.faellig = 'ja'; /* Kopf */ const kopf = el('div', 'kk__kopf'); const links = el('div'); /* h4, NICHT h3 (06.10.2026). Ueber der Karte stehen jetzt drei Ebenen: "Pipeline" (h1), die Stufe (h2) und die Spalte Normal / Premium (h3). Bliebe der Name ein h3, saesse er auf derselben Ebene wie die Spalte, in der er liegt -- wer sich per Ueberschriften durch die Seite bewegt, bekaeme die Trennung nicht mehr zu hoeren. */ links.append(el('h4', 'kk__name', l.name)); /* PLATTFORM UND HANDLE SIND ZWEI DINGE (06.10.2026). Hier stand `[plattform, handle].join(' · ')` -- ein grauer Satz, in dem beides gleich aussah. Die Plattform ist eine Einordnung (davon gibt es eine Handvoll, man vergleicht sie), das Handle eine Kennung (einmalig, man liest sie Zeichen fuer Zeichen). Zwei Rollen, zwei Formen: die Plattform als kleines Schild, das Handle in gleichbreiter Schrift. */ const unter = el('p', 'kk__unter'); if (l.plattform) unter.append(el('span', 'kk__plattform', l.plattform)); if (l.handle) unter.append(el('span', 'kk__handle', l.handle)); if (unter.childNodes.length) links.append(unter); kopf.append(links); const marken = el('div', 'kk__marken'); /* SCHON IM NETZWERK? ZUERST UND IN ROT (11.09.2026). Das ist die einzige Angabe, die die ganze weitere Arbeit erledigt: Wer unter Vertrag steht, kann nicht uebernommen werden. Sie steht deshalb VOR der Prioritaet -- eine hohe Prioritaet bei jemandem, der gar nicht kann, ist eine Verabredung mit sich selbst. */ if (l.netzwerk === 'ja') { const n = el('span', 'marke-punkt', 'Schon im Netzwerk'); n.dataset.warn = 'ja'; n.title = 'Steht bei einer anderen Agentur unter Vertrag – eine Übernahme geht nicht.'; marken.append(n); } else if (l.netzwerk === 'unbekannt') { const n = el('span', 'marke-still', 'Netzwerk ungefragt'); n.title = 'Noch nicht geklärt, ob die Person schon bei einer Agentur ist.'; marken.append(n); } /* PREMIUM TRAEGT EIN ZEICHEN, NORMAL NICHT (06.10.2026). Dieselbe Regel wie bei "Schon im Netzwerk": Nur der Fall, der vom Normalfall abweicht, bekommt eine Marke. Eine Marke "Normal" auf jeder zweiten Karte waere ein Wort, das nie etwas Neues sagt. WARUM UEBERHAUPT, WO DOCH DIE SPALTE ES SCHON SAGT: Die beiden Spalten werden verschieden lang. Steht links eine lange Liste und rechts eine kurze, ist eine Karte weit unten vom Kopf ihrer Spalte durch einen halben Bildschirm getrennt -- und auf dem Handy liegen die Spalten ohnehin untereinander. */ if (l.creator_art === 'premium') { const a = el('span', 'marke-punkt', artName.premium || 'Premium'); a.dataset.art = 'premium'; a.title = 'Premium-Creator – die zweite der beiden Arten, die TikTok kennt.'; marken.append(a); } const prio = el('span', 'marke-punkt', l.prioritaet === 'hoch' ? 'Hoch' : l.prioritaet === 'niedrig' ? 'Niedrig' : 'Mittel'); prio.dataset.prio = l.prioritaet; marken.append(prio); if (l.scout_name && LEITUNG.has(ich.rolle)) marken.append(el('span', 'marke-still', l.scout_name)); if (l.creator_name) marken.append(el('span', 'marke-fertig', 'Creator: ' + l.creator_name)); kopf.append(marken); k.append(kopf); /* Kurzinfo */ const info = el('div', 'kk__info'); /* DIE HARTEN ZAHLEN ZUERST (11.09.2026). Land, Reichweite und LIVE-Zeiten beantworten "lohnt sich das ueberhaupt" -- und zwar ohne dass man die Karte aufklappen muss. Fehlt eine Angabe, steht sie nicht da; ein leeres Schild ist schlechter als keins. */ if (l.land) { const s = el('span', 'kk__fakt', landName[l.land] || l.land); s.dataset.art = 'land'; info.append(s); } if (l.follower) { const f = el('span', 'kk__fakt', zahlKurz(l.follower) + ' Follower'); f.dataset.art = 'follower'; f.title = l.follower.toLocaleString('de-DE') + ' Follower beim Fund'; info.append(f); } if (l.live_zeiten) info.append(el('span', 'kk__still', 'LIVE: ' + l.live_zeiten)); if (l.naechster_followup) { const f = el('span', 'kk__followup', 'Follow-up ' + datum(l.naechster_followup)); if (fällig) f.dataset.faellig = 'ja'; info.append(f); } if (l.letzte_nachricht) info.append(el('span', 'kk__still', 'zuletzt geschrieben ' + datum(l.letzte_nachricht))); if (l.uebergeben_am) info.append(el('span', 'kk__still', 'übergeben ' + datum(l.uebergeben_am))); if (info.childNodes.length) k.append(info); /* Knöpfe: ein naheliegender Schritt, alles andere aufklappbar. */ const knöpfe = el('div', 'kk__knoepfe'); const ziel = WEITER[l.status]; if (ziel) { const w = el('button', 'knopf knopf--klein knopf--weiter', 'Weiter zu „' + stufen[ziel] + '“'); w.type = 'button'; w.addEventListener('click', () => stufeSetzen(l, ziel)); knöpfe.append(w); } if (l.status === 'uebergeben' && LEITUNG.has(ich.rolle) && !l.creator_id) { const o = el('button', 'knopf knopf--klein knopf--gold', 'Creator-Onboarding starten'); o.type = 'button'; o.addEventListener('click', () => onboarding(l, o)); knöpfe.append(o); } /* „BEARBEITEN" STATT „DETAILS" (11.09.2026). Filipe: "weil man kan da nichts machen." Man konnte -- der ganze Editor lag hinter diesem Knopf. Nur verspricht "Details" das Lesen und nicht das Aendern, und er stand als stiller Textknopf neben einem auffaelligen. Wer ihn nicht drueckt, haelt die Karte fuer eine Anzeige. Der Name sagt jetzt, was passiert. */ const mehr = el('button', 'knopf-still knopf-still--bearbeiten', offen.has(l.id) ? 'Fertig' : 'Bearbeiten'); mehr.type = 'button'; mehr.setAttribute('aria-expanded', offen.has(l.id) ? 'true' : 'false'); mehr.addEventListener('click', () => { if (offen.has(l.id)) offen.delete(l.id); else offen.add(l.id); zeichne(); }); knöpfe.append(mehr); k.append(knöpfe); if (!offen.has(l.id)) return k; /* ---------- Aufgeklappt: Qualifizierung und Pflege ---------- */ const d = el('div', 'kk__detail'); /* AKTIVITAET UND POTENZIAL WAREN NUR ZU LESEN (11.09.2026). Sie liessen sich ausschliesslich beim ANLEGEN eintragen -- danach standen sie da und waren nicht mehr zu aendern. Genau das meinte Filipes "man kan da nichts machen": Es sah nach Anzeige aus, weil es Anzeige war. Jetzt sind es Felder wie alle anderen. */ const notiz = el('textarea', 'kk__notiz'); notiz.rows = 3; notiz.maxLength = 3000; notiz.placeholder = 'Notizen zum Gespräch – was wurde besprochen, was ist offen?'; notiz.value = l.notizen || ''; d.append(el('label', 'feld-schild', 'Notizen'), notiz); const raster = el('div', 'kk__raster'); const mach = (schild, typ, wert, aufbau) => { const box = el('div', 'feld'); box.append(el('label', 'feld-schild', schild)); const f = typ === 'select' ? el('select') : el('input'); if (typ !== 'select') f.type = typ; if (aufbau) aufbau(f); f.value = wert || ''; box.append(f); raster.append(box); return f; }; const fNachricht = mach('Zuletzt geschrieben', 'date', l.letzte_nachricht); const fFollowup = mach('Nächster Follow-up', 'date', l.naechster_followup); const fPrio = mach('Priorität', 'select', l.prioritaet, (f) => { for (const [w, t] of [['hoch', 'Hoch'], ['mittel', 'Mittel'], ['niedrig', 'Niedrig']]) { const o = document.createElement('option'); o.value = w; o.textContent = t; f.append(o); } }); /* Die Art laesst sich auch nachtraeglich aendern -- ein Lead rutscht dabei in die andere Spalte. Genau das war der Mangel vom 11.09.2026 ("man kan da nichts machen"): ein Feld, das man beim Anlegen setzt und danach nie wieder. */ const fArt = mach('Art', 'select', l.creator_art || 'normal', (f) => { for (const w of artenListe) { const o = document.createElement('option'); o.value = w; o.textContent = artName[w] || w; f.append(o); } }); const fStufe = mach('Stufe', 'select', l.status, (f) => { for (const [w, t] of Object.entries(stufen)) { const o = document.createElement('option'); o.value = w; o.textContent = t; f.append(o); } }); /* ---- DIE SIEBEN NEUEN FELDER ------------------------------------ Die Auswahllisten kommen vom Server (laender, netzwerk) -- hier steht keine eigene. */ const leer = (f, text) => { const o = document.createElement('option'); o.value = ''; o.textContent = text; f.append(o); }; const fNetz = mach('Schon im Netzwerk?', 'select', l.netzwerk, (f) => { leer(f, '– nicht angegeben –'); for (const w of netzwerkListe) { const o = document.createElement('option'); o.value = w; o.textContent = netzwerkName[w] || w; f.append(o); } }); const fLand = mach('Land', 'select', l.land, (f) => { leer(f, '– nicht angegeben –'); for (const w of laenderListe) { const o = document.createElement('option'); o.value = w; o.textContent = landName[w] || w; f.append(o); } }); const fFollower = mach('Follower', 'text', l.follower ? String(l.follower) : '', (f) => { f.placeholder = 'z. B. 12400 oder 12,4k'; f.inputMode = 'numeric'; }); const fWoher = mach('Wie gefunden', 'text', l.woher, (f) => { f.maxLength = 80; f.placeholder = 'LIVE entdeckt, Empfehlung, Kommentar …'; }); const fWeg = mach('Angeschrieben über', 'text', l.kontaktweg, (f) => { f.maxLength = 80; f.placeholder = 'TikTok-DM, Instagram, WhatsApp …'; }); const fZeiten = mach('LIVE-Zeiten', 'text', l.live_zeiten, (f) => { f.maxLength = 200; f.placeholder = 'z. B. Mo–Fr ab 21 Uhr'; }); d.append(raster); /* Die beiden langen Texte stehen UNTER dem Raster, nicht darin: Sie brauchen Zeilen, keine Spalte. */ const lang = (schild, wert, platzhalter) => { const t = el('textarea', 'kk__notiz'); t.rows = 2; t.maxLength = 3000; t.placeholder = platzhalter; t.value = wert || ''; d.append(el('label', 'feld-schild', schild), t); return t; }; const fAktiv = lang('Aktivität & LIVE-Fokus', l.aktivitaet, 'Wie oft LIVE? Welche Zeiten? Welches Format?'); const fPot = lang('Potenzial & Stil', l.potenzial, 'Was macht die Person besonders?'); /* Der Absagegrund erscheint nur, wo er hingehoert. Ein Feld "warum nicht" an einem Kontakt, der gerade gut laeuft, ist eine Frage, die niemand gestellt hat. */ const fAbsage = l.status === 'abgelehnt' ? lang('Warum es nicht gepasst hat', l.absage_grund, 'Kein Interesse, schon vergeben, passt nicht zur Agentur …') : null; const unten = el('div', 'kk__knoepfe'); const sp = el('button', 'knopf knopf--klein', 'Speichern'); sp.type = 'button'; sp.addEventListener('click', async () => { sp.disabled = true; const r = await schicke('/workspace/api/leads/' + l.id, 'PATCH', { notizen: notiz.value, letzte_nachricht: fNachricht.value, naechster_followup: fFollowup.value, prioritaet: fPrio.value, status: fStufe.value, creator_art: fArt.value, netzwerk: fNetz.value, land: fLand.value, follower: fFollower.value, woher: fWoher.value, kontaktweg: fWeg.value, live_zeiten: fZeiten.value, aktivitaet: fAktiv.value, potenzial: fPot.value, ...(fAbsage ? { absage_grund: fAbsage.value } : {}), }); sp.disabled = false; if (r) await laden(); }); unten.append(sp); if (l.status !== 'abgelehnt' && l.status !== 'uebergeben') { const ab = el('button', 'knopf-still', 'Passt nicht'); ab.type = 'button'; ab.addEventListener('click', () => stufeSetzen(l, 'abgelehnt')); unten.append(ab); } const wg = el('button', 'knopf-still knopf-still--warn', 'Löschen'); wg.type = 'button'; wg.addEventListener('click', async () => { if (!await frageNach({ titel: `„${l.name}“ aus der Pipeline entfernen?`, was: 'Der Lead verschwindet aus der Liste, samt Notizen und Verlauf.', bleibt: 'Andere Leads bleiben unberührt.', endgueltig: true, ja: 'Entfernen', })) return; if (await schicke('/workspace/api/leads/' + l.id, 'DELETE')) { offen.delete(l.id); await laden(); } }); unten.append(wg); d.append(unten); k.append(d); return k; } async function stufeSetzen(l, status) { if (await schicke('/workspace/api/leads/' + l.id, 'PATCH', { status })) await laden(); } async function onboarding(l, knopf) { if (!await frageNach({ titel: `Aus „${l.name}“ einen Creator mit eigenem Zugang anlegen?`, was: 'Es entsteht ein Konto mit eigenem Zugangscode.', bleibt: 'Der Lead bleibt in der Pipeline stehen und wird als ' + 'übernommen markiert.', ja: 'Creator anlegen', })) return; knopf.disabled = true; const r = await schicke('/workspace/api/leads/' + l.id + '/onboarding', 'POST', { name: l.name }); knopf.disabled = false; if (!r) return; $('code-wert').textContent = r.code; $('code-schleier').hidden = false; $('code-zu').focus(); await laden(); } /* ---------- Zeichnen ----------------------------------------------------- */ function zeichne() { const ziel = $('pipeline'); ziel.textContent = ''; ziel.setAttribute('aria-busy', 'false'); const scout = $('f-scout').value; const liste = scout ? daten.filter((l) => String(l.scout_id) === scout) : daten; /* Follow-ups, die heute oder frueher faellig sind. */ const fällig = liste.filter((l) => l.naechster_followup && l.naechster_followup <= heute && l.status !== 'uebergeben' && l.status !== 'abgelehnt'); $('faellig').hidden = fällig.length === 0; const fl = $('faellig-liste'); fl.textContent = ''; for (const l of fällig) { const li = el('li'); const b = el('button', 'faellig__knopf', l.name); b.type = 'button'; b.addEventListener('click', () => { offen.add(l.id); zeichne(); document.getElementById('lead-' + l.id)?.scrollIntoView({ block: 'center', behavior: window.sanft?.() || 'auto' }); }); li.append(b, el('span', 'kk__still', datum(l.naechster_followup))); fl.append(li); } if (!liste.length) { /* WOFUER IST DAS GUT? (Wunsch vom 01.09.2026) Vorher stand hier ein Satz, der nur wiederholte, was man ohnehin sieht: dass nichts da ist. Wer die Seite zum ersten Mal oeffnet, weiss danach immer noch nicht, warum es sie gibt. Der leere Zustand ist der EINZIGE Moment, in dem jemand garantiert liest, was dort steht -- spaeter ist die Flaeche von Daten belegt. Deshalb steht die Erklaerung genau hier und nicht in einer Hilfe, die niemand aufmacht. Erklaert wird der NUTZEN, nicht die Bedienung: nicht "hier klicken", sondern warum ein Scout ohne diese Liste Leute verliert. */ const kasten = el('div', 'leer-hinweis leer-hinweis--erklaerung'); kasten.append(el('p', 'erklaerung__satz', 'Hier steht jeder, den ihr entdeckt habt – von der ersten Nachricht ' + 'bis zur Übergabe an einen Manager.')); kasten.append(el('p', 'erklaerung__warum', 'Wozu das gut ist: Ein Scout spricht viele an. Ohne Liste erinnert ' + 'sich niemand, wer schon gefragt wurde, wer zugesagt hat und bei ' + 'wem seit drei Wochen nichts passiert ist. Genau die gehen ' + 'verloren – nicht die, die Nein sagen.')); /* Aus derselben Liste wie die Stufenkoepfe -- siehe STUFE_WAS. "Abgelehnt" bleibt hier weg: Die Einfuehrung beschreibt den Weg nach vorn, und eine Absage ist keine Stufe darauf. */ const stufenListe = el('ol', 'erklaerung__stufen'); for (const [nr, name, was] of [ ['1', 'Neu', STUFE_WAS.neu], ['2', 'Angesprochen', STUFE_WAS.angesprochen], ['3', 'Gespräch', STUFE_WAS.gespraech], ['4', 'Interessiert', STUFE_WAS.interessiert], ['5', 'Übergeben', STUFE_WAS.uebergeben], ]) { const z = el('li', 'erklaerung__stufe'); z.append(el('span', 'erklaerung__nr', nr)); const t = el('div', null); t.append(el('strong', null, name)); t.append(el('span', 'erklaerung__was', was)); z.append(t); stufenListe.append(z); } kasten.append(stufenListe); kasten.append(el('p', 'erklaerung__fuss', 'Zu jedem Kontakt gehört ein Datum für den nächsten Schritt. Ist es ' + 'überfällig, erscheint der Kontakt auf deiner Startseite – du musst ' + 'also nicht daran denken, die Seite denkt für dich.')); kasten.append(el('p', 'erklaerung__los', '„Neuer Kontakt“ oben rechts legt den ersten an.')); ziel.append(kasten); return; } for (const [wert, name] of Object.entries(stufen)) { const drin = liste.filter((l) => l.status === wert); if (!drin.length) continue; const gruppe = el('section', 'stufe'); gruppe.dataset.stufe = wert; /* JEDE STUFE SAGT, WAS SIE BEDEUTET (11.09.2026). Die Erklaerung stand bisher nur im leeren Zustand -- also genau einmal, bevor der erste Kontakt da war, und danach nie wieder. Wer im Januar dazukommt, sieht sechs Ueberschriften und muss raten, was "Interessiert" von "Gespraech" unterscheidet. Der Satz steht deshalb an der Stufe selbst und wird aus derselben Liste gelesen wie der leere Zustand -- nicht aus einer zweiten. */ const kopf = el('div', 'stufe__kopf'); /* Die Nummer ist eine OPTISCHE Angabe: Sie macht aus sechs Ueberschriften einen Weg. Fuer die Sprachausgabe ist sie ueberfluessig -- dort steht die Reihenfolge ohnehin in der Reihenfolge, und „null eins" vor jeder Ueberschrift waere Laerm. Was die Stufe BEDEUTET, sagt `.stufe__was` in Worten. */ const nr = el('span', 'stufe__nr', STUFE_NR[wert] || '—'); nr.setAttribute('aria-hidden', 'true'); kopf.append(nr); const kt = el('div', 'stufe__text'); kt.append(el('h2', 'stufe__titel', name)); if (STUFE_WAS[wert]) kt.append(el('p', 'stufe__was', STUFE_WAS[wert])); kopf.append(kt, el('span', 'stufe__zahl', String(drin.length))); gruppe.append(kopf); /* ====== LINKS NORMAL, RECHTS PREMIUM (06.10.2026) ============== Filipe: "ich will dass es da in der mitte eine trennung gibt. links sollen normale creator sein und rechts premium creator. es gibt bei tiktok nämlich diese zwei optionen von streamer." DIE TRENNUNG SITZT IN JEDER STUFE, nicht einmal ueber der ganzen Seite. Zwei komplette Pipelines nebeneinander haetten jede Stufenueberschrift zweimal gebraucht, und die beiden Seiten waeren nie auf gleicher Hoehe gewesen -- "Angesprochen" links auf Hoehe von "Interessiert" rechts. So bleibt die Stufe die Ueberschrift und die Art die Spalte darunter. DIE REIHENFOLGE KOMMT VOM SERVER (artenListe) und ist dort "normal, premium" -- links, rechts. Sie steht nicht zweimal da; waere sie hier noch einmal hingeschrieben, koennte eine der beiden Stellen gedreht werden und die Spalten wuerden vertauscht, ohne dass irgendetwas kaputtginge. EINE LEERE SPALTE BLEIBT STEHEN und sagt "noch niemand". Wer sie wegliesse, haette eine Stufe, die ploetzlich eine Spalte hat statt zwei -- und man wuesste nicht, ob da niemand ist oder ob die Trennung an dieser Stelle nicht gilt. Die Zahl im Kopf beantwortet es ohne Nachzaehlen. */ const spalten = el('div', 'stufe__arten'); for (const art of artenListe) { const inDieser = drin.filter((l) => (l.creator_art || 'normal') === art); const sp = el('section', 'art-spalte'); sp.dataset.art = art; const spKopf = el('div', 'art-spalte__kopf'); const spTitel = el('h3', 'art-spalte__titel', artName[art] || art); /* Die Ueberschrift benennt den Bereich fuer die Sprachausgabe -- sonst liest sie zwei Kartenstapel vor, ohne zu sagen, welcher welcher ist. */ spTitel.id = `art-spalte-${wert}-${art}`; sp.setAttribute('aria-labelledby', spTitel.id); spKopf.append(spTitel, el('span', 'art-spalte__zahl', String(inDieser.length))); sp.append(spKopf); const box = el('div', 'stufe__karten'); if (!inDieser.length) box.append(el('p', 'art-spalte__leer', 'noch niemand')); for (const l of inDieser) { const k = karte(l); k.id = 'lead-' + l.id; box.append(k); } sp.append(box); spalten.append(sp); } gruppe.append(spalten); ziel.append(gruppe); } } async function laden() { try { const a = await hole('/workspace/api/leads'); if (!a.ok) { melde('Pipeline konnte nicht geladen werden.'); return; } const d = await a.json(); stufen = d.stufen; heute = d.heute; daten = d.leads; laenderListe = d.laender || []; landName = d.land_name || {}; netzwerkListe = d.netzwerk || []; netzwerkName = d.netzwerk_name || {}; /* Nur uebernehmen, wenn wirklich etwas kommt -- sonst stuende hier eine leere Liste und die Seite haette null Spalten statt zwei. `|| []` waere an dieser Stelle genau der stille Ausfall, den die Rueckfallliste oben verhindern soll. */ if (Array.isArray(d.arten) && d.arten.length) artenListe = d.arten; if (d.art_name) artName = d.art_name; artwahlFuellen(); zeichne(); } catch { /* umgeleitet */ } } /* ---------- Neuer Kontakt ------------------------------------------------ */ /* Die Auswahl im Anlege-Formular wird aus derselben Liste gefuellt wie die Spalten. In scouting.html stehen Normal und Premium zwar schon fest drin -- das ist die Vorgabe, damit das Feld auch vor der ersten Antwort bedienbar ist. Sobald der Server geantwortet hat, gilt seine Liste, und zwar auch dann, wenn dort eines Tages etwas anderes steht. Die bereits getroffene Wahl bleibt erhalten. */ function artwahlFuellen() { const f = $('n-art'); if (!f) return; const vorher = f.value; f.textContent = ''; for (const w of artenListe) { const o = document.createElement('option'); o.value = w; o.textContent = artName[w] || w; f.append(o); } f.value = artenListe.includes(vorher) ? vorher : (artenListe[0] || ''); } $('neu-auf').addEventListener('click', () => { $('neu-block').hidden = false; $('neu-auf').hidden = true; $('n-name').focus(); }); $('neu-zu').addEventListener('click', () => { $('neu-block').hidden = true; $('neu-auf').hidden = false; $('neu-form').reset(); $('n-fehler').textContent = ''; }); $('neu-form').addEventListener('submit', async (e) => { e.preventDefault(); $('n-fehler').textContent = ''; const knopf = $('n-speichern'); knopf.disabled = true; const a = await hole('/workspace/api/leads', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: $('n-name').value, plattform: $('n-plattform').value, handle: $('n-handle').value, prioritaet: $('n-prio').value, creator_art: $('n-art').value, aktivitaet: $('n-aktivitaet').value, potenzial: $('n-potenzial').value, naechster_followup: $('n-followup').value, scout_id: $('n-scout').value || null, netzwerk: $('n-netzwerk').value, land: $('n-land').value, follower: $('n-follower').value, }), }).catch(() => null); knopf.disabled = false; if (!a) return; if (!a.ok) { $('n-fehler').textContent = sagWas((await a.json().catch(() => ({}))).fehler, 'Ging nicht.'); return; } $('neu-zu').click(); await laden(); }); /* ---------- Codefenster --------------------------------------------------- */ $('code-zu').addEventListener('click', () => { $('code-schleier').hidden = true; $('code-wert').textContent = '—'; }); $('code-kopieren').addEventListener('click', async () => { try { await navigator.clipboard.writeText($('code-wert').textContent); $('code-kopieren').textContent = 'Kopiert ✓'; setTimeout(() => { $('code-kopieren').textContent = 'Kopieren'; }, 2200); } catch { /* ohne Zwischenablage bleibt der Code lesbar stehen */ } }); /* ---------- Start --------------------------------------------------------- */ (async () => { try { const a = await hole('/workspace/api/ich'); if (!a.ok) { location.assign('/workspace/'); return; } ich = await a.json(); } catch { /* NICHT MEHR STUMM (20.09.2026). Hier stand `catch { return; }` -- und damit blieb die Seite bei jedem Netzaussetzer fuer immer auf "wird geladen …" stehen. Gemessen auf 13 von 21 Seiten. `ladefehler()` sagt, was los ist, und bietet einen Knopf an, der es noch einmal versucht. */ window.ladefehler?.(); return; } if (ich.rolle === 'creator') { location.assign('/workspace/start.html'); return; } window.werZeigen?.(ich); if (LEITUNG.has(ich.rolle)) { $('unterzeile').textContent = 'Gesamtübersicht über alle Scouts.'; try { const { scouts } = await (await hole('/workspace/api/leads-scouts')).json(); for (const s of scouts) { for (const wo of [$('f-scout'), $('n-scout')]) { const o = document.createElement('option'); o.value = String(s.id); o.textContent = s.name; wo.append(o); } } $('scoutwahl-block').hidden = false; $('n-scout-block').hidden = false; } catch { return; } $('f-scout').addEventListener('change', zeichne); } else { $('unterzeile').textContent = 'Deine Pipeline – nur du und DogFather sehen sie.'; } await laden(); })(); })();