Files
dogfather-universe/workspace/assets/js/profil.js
T
DogFatherGitandClaude Opus 5 e74254263f Buehne aus den echten Marken-Bildern, Kopfleiste und Begruessung neu
Filipe hatte recht, und zwar zweifach: Der Husky war der FALSCHE (ein
fremder Neon-Husky aus dem alten Bilderordner statt DogFather), und zwei
in die Ecken geklebte Bilder ergeben noch kein Bild.

DIE BUEHNE, zweiter Anlauf. Aus den zehn geschickten Bildern das Studio
gewaehlt, in dem HasiDog und DogFather stehen -- nicht aus Geschmack,
sondern wegen der ANORDNUNG: Die beiden stehen weit aussen, die Mitte ist
dunkel. Genau dort steht der Inhalt. Bei den Bildern mit den Figuren in
der Mitte waeren sie hinter dem Text gelandet.

Ueber die ganze Flaeche, fest an der Scheibe, 138 % breit: Bei 100 %
staenden die beiden bei 20 % und 78 % der Breite -- mitten unter der
Textspalte. Vergroessert man das Bild ueber die Scheibe hinaus, wandern
sie nach aussen (rund 9 % und 88 %) und der leere Hallenboden liegt dort,
wo gelesen wird. Ein Bild groesser zu machen, damit WENIGER davon im Weg
ist, klingt verkehrt und ist genau richtig.

Fuer schmale Schirme ein eigener Hochkant-Ausschnitt derselben Szene --
ein auf 9:16 gequetschtes Breitbild zeigt nur noch Wand.
1,9 MB PNG -> 28 KB WebP.

DIE VIER STELLEN aus den Bildschirmfotos:

* Kopfleiste: der DogFather-Kopf davor. Als MASKE aus dem Logo gerechnet
  (Dunkelheit wird Deckkraft), nicht als Bild -- so laesst er sich im
  Stil einfaerben; ein fertig eingefaerbtes Bild muesste man fuer jede
  Farbe neu bauen. 114 KB -> 3 KB.

* "Dogfather · DogFather" war der peinlichste Punkt: Name und Rolle lasen
  sich gleich, es sah nach einem Fehler aus. Jetzt drei unterscheidbare
  Dinge -- Zeichen mit dem Anfangsbuchstaben, Name, Rolle als Marke in
  ihrer Farbe. Gebaut in kopf.js, EINMAL statt vierzehnmal: Jede
  Seitendatei setzte diese Zeile bisher selbst zusammen.

* Begruessung: leuchtender Strich, groesserer Gruss, auslaufende
  Trennlinie. Dieselben Striche vor "WAS IST DRAN" und "DEINE AUFGABEN" --
  so gehoert sichtbar zusammen, was zusammengehoert.

ZWEI EIGENE FEHLER, die die Pruefungen gefunden haben:

1. Ich hatte Verlaeufe IM TEXT gebaut (background-clip mit durchsichtiger
   Schrift). Sah gut aus, und der Kontrasttest meldete 1,05:1 -- zu Recht.
   Durchsichtige Schrift haengt an einer einzigen Technik; faellt sie aus
   (Kontrastmodus, Druck, aeltere Browser), ist der Text UNSICHTBAR statt
   nur anders gefaerbt. Das ist kein Schoenheitsfehler, das ist ein
   Ausfall. Jetzt feste Farbe mit einem Hauch Leuchten.

2. Auf dem Handy stand der Abmelden-Knopf 9 px aus dem Bild. Die Suche
   nach der Ursache ging zuerst in die Irre -- der Test nannte das
   Wasserzeichen, das aber von seiner Kachel sauber abgeschnitten wird
   und nur seine Masse meldet. Gemessen war es die Marke: 209 px + 139 px
   rechte Gruppe passten nicht in 390 px. Auf dem Handy bleibt jetzt nur
   der Kopf stehen; der Markenzug steht zwei Zeilen tiefer ohnehin als
   Ueberschrift. Fuer Vorleseprogramme bleibt er im Dokument.

Und einmal habe ich mir beim Ersetzen eines CSS-Blocks das halbe
Stylesheet geloescht (die Kachel-Regeln lagen zwischen den beiden
Suchmarken). Aufgefallen sofort am Bildschirmfoto, zurueckgeholt aus Git,
danach zeilengenau ersetzt.

118 Pruefungen, alle gruen. Der Kontrast wird weiterhin an echten
Bildpunkten gemessen, jetzt an bis zu 35 Stellen je Seite.

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-09-01 05:45:59 +02:00

137 lines
4.8 KiB
JavaScript

/* ===================================================================
Creator-Profil.
Welche Felder überhaupt ankommen, entscheidet der Server anhand der
Rolle -- `admin_notiz` fehlt in der Antwort an einen Creator komplett.
Diese Datei blendet deshalb nur aus, was ohnehin nicht da ist.
=================================================================== */
(() => {
'use strict';
/* DogFather und Manager haben dieselben Rechte -- die Unterscheidung
macht nur die Personenverwaltung, und die prueft der Server. */
const LEITUNG = new Set(['admin', 'manager']);
const OFFEN = ['handles', 'nische', 'live_zeiten', 'technik',
'ziel_live', 'ziel_content', 'ziel_community', 'ziel_technik',
'plan_prio1', 'plan_prio2', 'plan_prio3'];
const NUR_ADMIN = ['plan_start', 'naechster_review', 'admin_notiz'];
const $ = (id) => document.getElementById(id);
let ich = null;
let aktuell = null;
let darfAlles = false;
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 fuelle(profil) {
for (const f of [...OFFEN, ...NUR_ADMIN]) {
const feld = $(f);
if (!feld) continue;
/* undefined heißt: Der Server hat das Feld nicht geschickt (fehlende
Berechtigung). Dann bleibt es leer und wird auch nicht gesendet. */
feld.value = profil[f] ?? '';
}
}
function datumHuebsch(iso) {
return iso.slice(0, 10).split('-').reverse().join('.');
}
async function profilLaden(id) {
melde('');
try {
const a = await hole('/workspace/api/profil/' + id);
if (!a.ok) { melde('Profil konnte nicht geladen werden.'); return; }
const daten = await a.json();
aktuell = daten.person.id;
darfAlles = daten.darf_alles;
$('titel').textContent = LEITUNG.has(ich.rolle)
? 'Profil: ' + daten.person.name
: 'Mein Profil';
$('unterzeile').textContent = daten.profil.geaendert
? 'Zuletzt geändert am ' + datumHuebsch(daten.profil.geaendert)
: 'Noch nichts eingetragen.';
$('gruppe-intern').hidden = !darfAlles;
$('termine').hidden = !darfAlles;
fuelle(daten.profil);
$('formular').hidden = false;
} catch { /* umgeleitet */ }
}
$('formular').addEventListener('submit', async (e) => {
e.preventDefault();
melde('');
const knopf = $('speichern');
const daten = {};
for (const f of darfAlles ? [...OFFEN, ...NUR_ADMIN] : OFFEN) {
const feld = $(f);
if (feld) daten[f] = feld.value;
}
knopf.disabled = true;
$('stand').textContent = 'Speichere …';
try {
const a = await hole('/workspace/api/profil/' + aktuell, {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(daten),
});
if (!a.ok) {
melde((await a.json().catch(() => ({}))).fehler || 'Speichern ging nicht.');
$('stand').textContent = '';
return;
}
$('stand').textContent = 'Gespeichert ✓';
setTimeout(() => { $('stand').textContent = ''; }, 2600);
} catch { /* umgeleitet */ } finally { knopf.disabled = false; }
});
(async () => {
try {
const a = await hole('/workspace/api/ich');
if (!a.ok) { location.assign('/workspace/'); return; }
ich = await a.json();
} catch { return; }
/* Scouts betreuen ihre zugeteilten Creator wie DogFather --
sie sehen aber nur die management-internen Felder nicht. */
window.werZeigen?.(ich);
let liste;
try { liste = await (await hole('/workspace/api/profil')).json(); } catch { return; }
if (LEITUNG.has(ich.rolle) || ich.rolle === 'scout') {
if (!liste.creator.length) {
$('unterzeile').textContent = ich.rolle === 'scout'
? 'Dir ist noch kein Creator zugeteilt. DogFather legt fest, wen du betreust.'
: 'Es gibt noch keinen Creator. Lege zuerst unter Personen & Zugänge einen an.';
return;
}
if (ich.rolle === 'scout') {
$('unterzeile').textContent = liste.creator.length === 1
? 'Der Creator, den du betreust.'
: `Die ${liste.creator.length} Creator, die du betreust.`;
}
$('auswahl-block').hidden = false;
for (const c of liste.creator) {
const o = document.createElement('option');
o.value = String(c.id);
o.textContent = c.name + (c.aktiv ? '' : ' (gesperrt)');
$('auswahl').append(o);
}
$('auswahl').addEventListener('change', () => profilLaden(Number($('auswahl').value)));
await profilLaden(liste.creator[0].id);
} else {
await profilLaden(ich.id);
}
})();
})();