DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Profilbild gebaendigt, Steckbrief von der Creator-Akte getrennt

Browse Source 
ZWEI FEHLER, DIE FILIPE GESEHEN HAT.

1. DAS PROFILBILD LAG UEBER DER HALBEN SEITE. Als Patrick sein Bild
   hochlud, zog sich ein roter Balken quer ueber die Startseite.

   Ursache: Die CSS-Regel .wer__bild hat GEFEHLT. Das Element wurde in
   kopf.js erzeugt, die Regel dazu nie geschrieben -- und ein <img> ohne
   Groessenangabe nimmt seine natuerliche Groesse an, bei einem Handyfoto
   also mehrere tausend Pixel. Dazu fehlte overflow: hidden am Traeger.

   WARUM KEINE PRUEFUNG DAS GEFUNDEN HAT: Sie lud ein 1x1-Pixel-PNG hoch.
   Klein, schnell, von Hand gebaut -- und voellig unfaehig, irgendetwas
   zu ueberdecken. Die Pruefung war gruen, der Fehler war da, und gesehen
   hat ihn der Nutzer. Sie arbeitet jetzt mit einem 1200x1200-Bild, also
   in der Groesse, die wirklich hochgeladen wird, und misst danach: Bleibt
   das Bild in seinem 28-px-Feld, ragt es irgendwo heraus, laeuft die
   Seite ueber. Gegenprobe gemacht -- ohne die Regel meldet sie
   1200x1200 in 28x28 und 918 px Ueberlauf.

2. ZWEI PERSONEN AUF EINEM BILDSCHIRM. Auf der Profilseite stand oben
   "Profil: SpongBobSchwammKopf" und mittendrin "MEIN PROFIL: Dogfather".
   Niemand konnte sagen, welche Angabe zu wem gehoert.

   Es sind auch wirklich zwei verschiedene Dinge:
     MEIN STECKBRIEF  gehoert MIR -- Bild, ein Satz ueber mich, meine
                      Kanaele. Fuehre ich selbst.
     CREATOR-PROFILE  die BETREUUNGSAKTE eines anderen Menschen --
                      Ziele, 90-Tage-Plan, interne Notizen. Fuehren die
                      Betreuer.

   Scouts, Manager und DogFather haben jetzt zwei getrennte Kacheln und
   eine eigene Seite (steckbrief.html, serverseitig geschuetzt). Ein
   Creator behaelt beides zusammen -- er hat nur eine Seite und sieht
   dort ausschliesslich sich selbst. Die Logik liegt in einer eigenen
   Datei statt hinten an profil.js: Sie gehoert der angemeldeten Person,
   nicht der Akte.

ACHTZEHN KACHELN, ACHTZEHN FARBEN. Die neue Kachel haette sich ihren
Farbton mit den Creator-Profilen geteilt -- zwei Nachbarn in derselben
Farbe. Statt eine Farbe dazuzuerfinden, wurde tools/kachel-farben.mjs
fuer 18 Winkel neu gerechnet, samt der neuen Nachbarschaft im Raster.
Der kleinste Abstand zweier Nachbarn liegt weiterhin bei 100 Grad.
Gefunden hat das die Startseitenpruefung ("17 Farben auf 18 Kacheln").

Die Trennung wird jetzt fuer JEDE Rolle geprueft: welche Kacheln sie
sieht, dass auf der Akte kein fremder Steckbrief steht, und dass die
eigene Seite die richtige Person zeigt. Eine alte Pruefung, die das
Gegenteil verlangte, wurde ersetzt statt stehen gelassen.

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
DogFatherGit
2026-09-01 15:04:23 +02:00
co-authored by Claude Opus 5
parent 1fe443e59c
commit 2bebab156b
34 changed files with 653 additions and 372 deletions
Download Patch File Download Diff File Expand all files Collapse all files
workspace/assets/js/bereiche.js
+41 -16
View File
@@ -27,6 +27,11 @@
kalender: ['M4 6.5h16v13H4z', 'M4 10.5h16', 'M8.5 3.5v4', 'M15.5 3.5v4'],
calls: ['M3.5 7h11v10h-11z', 'M14.5 11l6-3.5v9l-6-3.5z'],
dateien: ['M3.5 6.5h5.5l2 2h9.5v11h-17z'],
/* Der Steckbrief: eine Person IN einer Karte -- unterscheidbar vom
Profil-Zeichen (nur die Person), damit die beiden Kacheln nicht
gleich aussehen. */
steckbrief: ['M3.5 5.5h17v13h-17z', 'M8.5 11.2a1.9 1.9 0 1 0 0-3.8 1.9 1.9 0 0 0 0 3.8z',
'M5.6 16.2c0-1.7 1.3-3 2.9-3s2.9 1.3 2.9 3', 'M14.5 9.5h4', 'M14.5 13h4'],
profil: ['M12 7a3.2 3.2 0 1 0 0 6.4A3.2 3.2 0 0 0 12 7z',
'M5.5 20c.7-3.3 3.3-5.3 6.5-5.3s5.8 2 6.5 5.3'],
startcheck: ['M6 4.5h12v15H6z', 'M9.2 9.6l1.7 1.7 3.6-3.7', 'M9.2 15.2h5.6'],
@@ -78,13 +83,13 @@
bereiche: [
{ name: 'Dashboard', unter: 'Alle Creator auf einen Blick', zeichen: 'dashboard', ton: 3,
gross: true, rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'uebersicht.html', szene: 'showbuehne' },
{ name: 'Aufgaben', unter: 'Offen, in Arbeit, Review', zeichen: 'aufgaben', ton: 9,
{ name: 'Aufgaben', unter: 'Offen, in Arbeit, Review', zeichen: 'aufgaben', ton: 11,
rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'aufgaben.html', szene: 'garage' },
{ name: 'Kalender', unter: 'Termine und Calls', zeichen: 'kalender', ton: 15,
{ name: 'Kalender', unter: 'Termine und Calls', zeichen: 'kalender', ton: 16,
rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'kalender.html', szene: 'skyline' },
{ name: 'Calls & Protokolle', unter: 'Gespräche mit To-dos', zeichen: 'calls', ton: 8,
{ name: 'Calls & Protokolle', unter: 'Gespräche mit To-dos', zeichen: 'calls', ton: 9,
rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'calls.html', szene: 'lounge' },
{ name: 'Dateien', unter: 'Ablage und Freigaben', zeichen: 'dateien', ton: 16,
{ name: 'Dateien', unter: 'Ablage und Freigaben', zeichen: 'dateien', ton: 2,
rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'dateien.html', szene: 'arena' },
],
},
@@ -92,23 +97,43 @@
name: 'Rund um den Creator',
unter: 'Die Betreuungsakte – Stand, Zahlen, Verlauf',
bereiche: [
{ name: 'Creator-Profile', unter: 'Ziele und 90-Tage-Plan', zeichen: 'profil', ton: 4,
/* ZWEI VERSCHIEDENE DINGE, zwei Kacheln (01.09.2026).
Vorher war beides dieselbe Seite, und das war verwirrend:
Oben stand "Profil: SpongBobSchwammKopf" und mitten darin
"MEIN PROFIL - Dogfather". Zwei Personen auf einem Bildschirm,
ohne dass klar war, welche gerade gemeint ist.
Es sind auch wirklich zwei Sachen:
MEIN STECKBRIEF gehoert MIR -- Bild, ein Satz ueber mich,
meine Kanaele. Fuehre ich selbst, hat
jeder (auch Scouts und Manager).
CREATOR-PROFILE die BETREUUNGSAKTE eines Creators --
Ziele, 90-Tage-Plan, interne Notizen.
Fuehren die Betreuer.
Ein Creator sieht nur seine eigene Akte (dort steht auch sein
Steckbrief mit drin, er hat ja nur eine Seite). Alle anderen
bekommen beide Kacheln getrennt. */
{ name: 'Mein Steckbrief', unter: 'Dein Bild und deine Kanäle', zeichen: 'steckbrief', ton: 15,
rollen: ['admin', 'manager', 'scout'], ziel: 'steckbrief.html', szene: 'halle' },
{ name: 'Creator-Profile', unter: 'Ziele und 90-Tage-Plan', zeichen: 'profil', ton: 8,
rollen: ['admin', 'manager', 'scout'], ziel: 'profil.html', szene: 'halle' },
{ name: 'Mein Profil', unter: 'Deine Ziele und Pläne', zeichen: 'profil', ton: 4,
{ name: 'Mein Profil', unter: 'Dein Steckbrief, Ziele und Pläne', zeichen: 'profil', ton: 8,
rollen: ['creator'], ziel: 'profil.html', szene: 'halle' },
{ name: 'Start-Check', unter: 'Erstanalyse, 16 Punkte', zeichen: 'startcheck', ton: 14,
{ name: 'Start-Check', unter: 'Erstanalyse, 16 Punkte', zeichen: 'startcheck', ton: 18,
rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'startcheck.html', szene: 'wald' },
{ name: 'LIVE-Analyse', unter: 'Vorher, während, danach', zeichen: 'live', ton: 6,
{ name: 'LIVE-Analyse', unter: 'Vorher, während, danach', zeichen: 'live', ton: 7,
rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'bereich.html?b=live', szene: 'portal' },
{ name: 'Content-Planung', unter: 'Idee bis Upload', zeichen: 'content', ton: 10,
{ name: 'Content-Planung', unter: 'Idee bis Upload', zeichen: 'content', ton: 13,
rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'content.html', szene: 'portal' },
{ name: 'Community', unter: 'Moderation und Konflikte', zeichen: 'community', ton: 5,
{ name: 'Community', unter: 'Moderation und Konflikte', zeichen: 'community', ton: 6,
rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'bereich.html?b=community', szene: 'lounge' },
{ name: 'Technik', unter: 'Setup, Fehler, Lösungen', zeichen: 'technik', ton: 11,
{ name: 'Technik', unter: 'Setup, Fehler, Lösungen', zeichen: 'technik', ton: 12,
rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'bereich.html?b=technik', szene: 'garage' },
{ name: 'Schutz & Regeln', unter: 'Richtlinien und Vorfälle', zeichen: 'schutz', ton: 1,
rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'bereich.html?b=schutz', szene: 'halle' },
{ name: 'Reports & Review', unter: 'Woche und Entscheidung', zeichen: 'reports', ton: 13,
{ name: 'Reports & Review', unter: 'Woche und Entscheidung', zeichen: 'reports', ton: 14,
rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'report.html', szene: 'showbuehne' },
],
},
@@ -124,13 +149,13 @@
nameCreator: 'Wissen',
unterCreator: 'Nachschlagen, wenn du etwas brauchst',
bereiche: [
{ name: 'Personen & Zugänge', unter: 'Rollen und Codes', zeichen: 'personen', ton: 7,
{ name: 'Personen & Zugänge', unter: 'Rollen und Codes', zeichen: 'personen', ton: 10,
rollen: ['admin', 'manager'], ziel: 'personen.html', szene: 'halle' },
{ name: 'Scout-Pipeline', unter: 'Entdeckt bis übergeben', zeichen: 'scouting', ton: 12,
{ name: 'Scout-Pipeline', unter: 'Entdeckt bis übergeben', zeichen: 'scouting', ton: 17,
rollen: ['admin', 'manager', 'scout'], ziel: 'scouting.html', szene: 'wald' },
{ name: 'Wissens-Bibliothek', unter: 'Anleitungen und PDFs', zeichen: 'wissen', ton: 2,
{ name: 'Wissens-Bibliothek', unter: 'Anleitungen und PDFs', zeichen: 'wissen', ton: 4,
rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'wissen.html', szene: 'arena' },
{ name: 'Automationen', unter: 'Was von allein passiert', zeichen: 'automation', ton: 17,
{ name: 'Automationen', unter: 'Was von allein passiert', zeichen: 'automation', ton: 5,
rollen: ['admin', 'manager'], ziel: 'automation.html', szene: 'garage' },
],
},
workspace/assets/js/profil.js
+3 -191
View File
@@ -135,194 +135,6 @@
})();
})();
/* ===================================================================
Der eigene Steckbrief.
Läuft unabhängig vom Creator-Formular darüber: Den Steckbrief hat
JEDER (auch Scouts, Manager und DogFather), die Creator-Akte nur ein
Creator. Deshalb ein eigener, abgeschlossener Block -- fällt einer
von beiden aus, steht der andere weiterhin.
=================================================================== */
(() => {
'use strict';
const $ = (id) => document.getElementById(id);
const block = $('steckbrief');
if (!block) return;
let stand = null;
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;
}
const melde = (t) => { $('sb-fehler').textContent = t || ''; };
const sage = (t) => {
$('sb-stand').textContent = t || '';
if (t) setTimeout(() => { if ($('sb-stand').textContent === t) $('sb-stand').textContent = ''; }, 4000);
};
function bildZeigen(quelle, name) {
const feld = $('sb-bild');
feld.textContent = '';
if (quelle) {
const b = document.createElement('img');
b.src = quelle;
b.alt = '';
/* Fällt das Bild aus, erscheint der Buchstabe -- nicht das kaputte
Bildsymbol des Browsers. */
b.addEventListener('error', () => { b.remove(); feld.textContent = anfang(name); });
feld.append(b);
$('sb-bild-weg').hidden = false;
} else {
feld.textContent = anfang(name);
$('sb-bild-weg').hidden = true;
}
}
const anfang = (n) => (n || '?').trim().charAt(0).toUpperCase();
function kanaeleBauen(kanaele, vorhanden) {
const ziel = $('sb-kanaele');
ziel.textContent = '';
for (const k of kanaele) {
const zeile = document.createElement('div');
zeile.className = 'kanal';
zeile.dataset.art = k.art;
const schild = document.createElement('label');
schild.className = 'kanal__name';
schild.setAttribute('for', 'sb-' + k.art);
schild.textContent = k.name;
const feld = document.createElement('div');
feld.className = 'kanal__feld';
const at = document.createElement('span');
at.className = 'kanal__at';
at.setAttribute('aria-hidden', 'true');
at.textContent = '@';
const eingabe = document.createElement('input');
eingabe.id = 'sb-' + k.art;
eingabe.type = 'text';
eingabe.maxLength = 40;
eingabe.autocomplete = 'off';
eingabe.placeholder = 'dein Name';
const da = vorhanden.find((v) => v.art === k.art);
eingabe.value = da ? da.handle : '';
feld.append(at, eingabe);
zeile.append(schild, feld);
/* Ein Verweis erscheint erst, wenn wirklich ein Name da ist -- ein
Knopf, der ins Leere führt, ist schlimmer als keiner. */
if (da) {
const a = document.createElement('a');
a.className = 'kanal__auf';
a.href = da.adresse;
a.target = '_blank';
a.rel = 'noopener noreferrer';
a.textContent = 'öffnen';
zeile.append(a);
}
ziel.append(zeile);
}
}
function zeichne(sb, kanaele) {
stand = sb;
$('sb-name').textContent = sb.name;
$('sb-rolle').textContent = sb.rolle_name;
$('sb-rolle').dataset.rolle = sb.rolle;
$('sb-ueber').value = sb.ueber_mich || '';
bildZeigen(sb.bild, sb.name);
kanaeleBauen(kanaele, sb.kanaele);
block.hidden = false;
}
/* ---------- Bild hochladen ---------------------------------------------
Roh im Rumpf statt als multipart -- dasselbe Verfahren wie in der
Dateiablage. Kein Parsen von multipart im Server, keine zusätzliche
Abhängigkeit. */
$('sb-datei').addEventListener('change', async (e) => {
const datei = e.target.files?.[0];
if (!datei) return;
melde('');
if (datei.size > 4 * 1024 * 1024) {
melde('Das Bild ist größer als 4 MB. Bitte ein kleineres nehmen.');
e.target.value = '';
return;
}
sage('Bild wird hochgeladen …');
try {
const a = await hole('/workspace/api/steckbrief/bild', {
method: 'POST',
headers: { 'Content-Type': 'application/octet-stream' },
body: datei,
});
const antwort = await a.json().catch(() => ({}));
if (!a.ok) { melde(antwort.fehler || 'Das Hochladen ging nicht.'); sage(''); return; }
bildZeigen(antwort.bild, stand?.name);
sage('Bild gespeichert.');
/* Auch oben rechts in der Kopfleiste soll sofort das neue Bild
stehen -- sonst müsste man die Seite neu laden, um es zu sehen. */
const oben = document.querySelector('.wer__zeichen');
if (oben) {
oben.querySelector('.wer__bild')?.remove();
const b = document.createElement('img');
b.className = 'wer__bild';
b.src = antwort.bild;
b.alt = '';
oben.append(b);
}
} catch { /* umgeleitet */ } finally { e.target.value = ''; }
});
$('sb-bild-weg').addEventListener('click', async () => {
if (!confirm('Profilbild entfernen?')) return;
try {
const a = await hole('/workspace/api/steckbrief/bild', { method: 'DELETE' });
if (!a.ok) { melde('Entfernen ging nicht.'); return; }
bildZeigen(null, stand?.name);
document.querySelector('.wer__bild')?.remove();
sage('Bild entfernt.');
} catch { /* umgeleitet */ }
});
/* ---------- Speichern ---------------------------------------------------- */
$('sb-speichern').addEventListener('click', async () => {
melde('');
const knopf = $('sb-speichern');
const koerper = { ueber_mich: $('sb-ueber').value };
for (const zeile of document.querySelectorAll('#sb-kanaele .kanal')) {
koerper[zeile.dataset.art] = zeile.querySelector('input').value;
}
knopf.disabled = true;
try {
const a = await hole('/workspace/api/steckbrief/mein', {
method: 'PATCH',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(koerper),
});
const antwort = await a.json().catch(() => ({}));
if (!a.ok) { melde(antwort.fehler || 'Speichern ging nicht.'); return; }
/* Neu zeichnen, damit die "öffnen"-Verweise zu den frisch
eingetragenen Namen sofort erscheinen. */
zeichne(antwort.steckbrief, KANAELE);
sage('Profil gespeichert.');
} catch { /* umgeleitet */ } finally { knopf.disabled = false; }
});
let KANAELE = [];
(async () => {
try {
const a = await hole('/workspace/api/steckbrief/mein');
if (!a.ok) return;
const { steckbrief, kanaele } = await a.json();
KANAELE = kanaele;
zeichne(steckbrief, kanaele);
} catch { /* umgeleitet oder nicht verfügbar -- die Seite bleibt nutzbar */ }
})();
})();
/* Der Steckbrief steht seit dem 01.09.2026 in assets/js/steckbrief.js.
Er gehoert der angemeldeten PERSON, nicht der Creator-Akte auf dieser
Seite -- deshalb eine eigene Datei, die auch steckbrief.html laedt. */
workspace/assets/js/steckbrief.js
+212
View File
@@ -0,0 +1,212 @@
/* ===================================================================
Der eigene Steckbrief -- Bild, ein Satz ueber sich, die Kanaele.
Laeuft auf ZWEI Seiten:
steckbrief.html fuer Scouts, Manager und DogFather -- dort ist er
der ganze Inhalt
profil.html fuer Creator -- dort steht er ueber der eigenen
Betreuungsakte
Warum eine eigene Datei: Vorher hing er hinten an profil.js. Damit
war er an die Creator-Akte gekettet, und auf der Profilseite standen
zwei Personen gleichzeitig -- oben "Profil: SpongBobSchwammKopf" und
mittendrin "MEIN PROFIL: Dogfather". Er gehoert aber nicht zur Akte,
sondern zur angemeldeten Person.
Der Block laeuft fuer sich: Faellt die Akte aus, steht der Steckbrief
weiterhin -- und umgekehrt.
=================================================================== */
(() => {
'use strict';
const $ = (id) => document.getElementById(id);
const block = $('steckbrief');
if (!block) return;
/* Auf profil.html traegt der Block data-nur-creator: Dort steht die
Akte eines ANDEREN Menschen, und der eigene Steckbrief hat daneben
nichts zu suchen -- ausser bei einem Creator, der nur diese eine
Seite hat. Wer ihn nicht sehen soll, bekommt ihn gar nicht erst
geladen; die Abfrage unterbleibt ebenfalls. */
let nurCreator = block.dataset.nurCreator === 'ja';
let stand = null;
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;
}
const melde = (t) => { $('sb-fehler').textContent = t || ''; };
const sage = (t) => {
$('sb-stand').textContent = t || '';
if (t) setTimeout(() => { if ($('sb-stand').textContent === t) $('sb-stand').textContent = ''; }, 4000);
};
function bildZeigen(quelle, name) {
const feld = $('sb-bild');
feld.textContent = '';
if (quelle) {
const b = document.createElement('img');
b.src = quelle;
b.alt = '';
/* Fällt das Bild aus, erscheint der Buchstabe -- nicht das kaputte
Bildsymbol des Browsers. */
b.addEventListener('error', () => { b.remove(); feld.textContent = anfang(name); });
feld.append(b);
$('sb-bild-weg').hidden = false;
} else {
feld.textContent = anfang(name);
$('sb-bild-weg').hidden = true;
}
}
const anfang = (n) => (n || '?').trim().charAt(0).toUpperCase();
function kanaeleBauen(kanaele, vorhanden) {
const ziel = $('sb-kanaele');
ziel.textContent = '';
for (const k of kanaele) {
const zeile = document.createElement('div');
zeile.className = 'kanal';
zeile.dataset.art = k.art;
const schild = document.createElement('label');
schild.className = 'kanal__name';
schild.setAttribute('for', 'sb-' + k.art);
schild.textContent = k.name;
const feld = document.createElement('div');
feld.className = 'kanal__feld';
const at = document.createElement('span');
at.className = 'kanal__at';
at.setAttribute('aria-hidden', 'true');
at.textContent = '@';
const eingabe = document.createElement('input');
eingabe.id = 'sb-' + k.art;
eingabe.type = 'text';
eingabe.maxLength = 40;
eingabe.autocomplete = 'off';
eingabe.placeholder = 'dein Name';
const da = vorhanden.find((v) => v.art === k.art);
eingabe.value = da ? da.handle : '';
feld.append(at, eingabe);
zeile.append(schild, feld);
/* Ein Verweis erscheint erst, wenn wirklich ein Name da ist -- ein
Knopf, der ins Leere führt, ist schlimmer als keiner. */
if (da) {
const a = document.createElement('a');
a.className = 'kanal__auf';
a.href = da.adresse;
a.target = '_blank';
a.rel = 'noopener noreferrer';
a.textContent = 'öffnen';
zeile.append(a);
}
ziel.append(zeile);
}
}
function zeichne(sb, kanaele) {
stand = sb;
$('sb-name').textContent = sb.name;
$('sb-rolle').textContent = sb.rolle_name;
$('sb-rolle').dataset.rolle = sb.rolle;
$('sb-ueber').value = sb.ueber_mich || '';
bildZeigen(sb.bild, sb.name);
kanaeleBauen(kanaele, sb.kanaele);
block.hidden = false;
}
/* ---------- Bild hochladen ---------------------------------------------
Roh im Rumpf statt als multipart -- dasselbe Verfahren wie in der
Dateiablage. Kein Parsen von multipart im Server, keine zusätzliche
Abhängigkeit. */
$('sb-datei').addEventListener('change', async (e) => {
const datei = e.target.files?.[0];
if (!datei) return;
melde('');
if (datei.size > 4 * 1024 * 1024) {
melde('Das Bild ist größer als 4 MB. Bitte ein kleineres nehmen.');
e.target.value = '';
return;
}
sage('Bild wird hochgeladen …');
try {
const a = await hole('/workspace/api/steckbrief/bild', {
method: 'POST',
headers: { 'Content-Type': 'application/octet-stream' },
body: datei,
});
const antwort = await a.json().catch(() => ({}));
if (!a.ok) { melde(antwort.fehler || 'Das Hochladen ging nicht.'); sage(''); return; }
bildZeigen(antwort.bild, stand?.name);
sage('Bild gespeichert.');
/* Auch oben rechts in der Kopfleiste soll sofort das neue Bild
stehen -- sonst müsste man die Seite neu laden, um es zu sehen. */
const oben = document.querySelector('.wer__zeichen');
if (oben) {
oben.querySelector('.wer__bild')?.remove();
const b = document.createElement('img');
b.className = 'wer__bild';
b.src = antwort.bild;
b.alt = '';
oben.append(b);
}
} catch { /* umgeleitet */ } finally { e.target.value = ''; }
});
$('sb-bild-weg').addEventListener('click', async () => {
if (!confirm('Profilbild entfernen?')) return;
try {
const a = await hole('/workspace/api/steckbrief/bild', { method: 'DELETE' });
if (!a.ok) { melde('Entfernen ging nicht.'); return; }
bildZeigen(null, stand?.name);
document.querySelector('.wer__bild')?.remove();
sage('Bild entfernt.');
} catch { /* umgeleitet */ }
});
/* ---------- Speichern ---------------------------------------------------- */
$('sb-speichern').addEventListener('click', async () => {
melde('');
const knopf = $('sb-speichern');
const koerper = { ueber_mich: $('sb-ueber').value };
for (const zeile of document.querySelectorAll('#sb-kanaele .kanal')) {
koerper[zeile.dataset.art] = zeile.querySelector('input').value;
}
knopf.disabled = true;
try {
const a = await hole('/workspace/api/steckbrief/mein', {
method: 'PATCH',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(koerper),
});
const antwort = await a.json().catch(() => ({}));
if (!a.ok) { melde(antwort.fehler || 'Speichern ging nicht.'); return; }
/* Neu zeichnen, damit die "öffnen"-Verweise zu den frisch
eingetragenen Namen sofort erscheinen. */
zeichne(antwort.steckbrief, KANAELE);
sage('Profil gespeichert.');
} catch { /* umgeleitet */ } finally { knopf.disabled = false; }
});
let KANAELE = [];
(async () => {
try {
const ich = await (await hole('/workspace/api/ich')).json().catch(() => null);
if (nurCreator && ich && ich.rolle !== 'creator') return;
const a = await hole('/workspace/api/steckbrief/mein');
if (!a.ok) return;
const { steckbrief, kanaele } = await a.json();
KANAELE = kanaele;
zeichne(steckbrief, kanaele);
} catch { /* umgeleitet oder nicht verfügbar -- die Seite bleibt nutzbar */ }
})();
})();