Workspace: Calls & Meeting-Protokolle -- Phase 3 vollstaendig
/workspace/calls.html. Calls sind KEINE eigene Terminart neben dem Kalender, sondern dieselben Termine mit art = 'call' oder 'review'. Ein zweiter Terminspeicher waere die sichere Art, irgendwann zwei widerspruechliche Uhrzeiten zu haben. Diese Seite fuegt nur hinzu, was ein Gespraech vom blossen Termin unterscheidet: das Protokoll danach. Die Sichtbarkeitsregel ist Wort fuer Wort dieselbe wie im Kalender -- ein Termin darf nicht in der einen Ansicht auftauchen und in der anderen fehlen. Der tragende Satz von Seite 13, woertlich genommen: "Jeder Call endet mit klaren To-dos, die direkt ins Board uebernommen werden." To-dos werden deshalb NICHT als Text im Protokoll abgelegt, sondern sofort zu echten Aufgaben -- mit dem Gespraech als Herkunft in der Beschreibung, zugeordnet an das Gegenueber des Calls. Sonst steht die Verabredung in einem Dokument, das niemand mehr oeffnet. Geprueft: Protokoll geschrieben -> Aufgaben stehen im Brett. Weitere Punkte: - Reihenfolge der Gruppen ist Dringlichkeit, nicht Chronologie: Ganz oben stehen vergangene Gespraeche OHNE Protokoll. Das ist der einzige Zustand, der etwas von einem verlangt. Nur diese Gruppe ist optisch hervorgehoben; wenn alles schreit, sieht man nichts mehr. - Ein festgehaltenes Protokoll ist danach nur noch lesbar. Ein Gespraech nachtraeglich umschreiben zu koennen waere genau das, was ein Protokoll wertlos macht. - "Naechster Termin" legt den Folgetermin direkt in den Kalender -- mit demselben Gegenueber und demselben Meeting-Link. - Alles in EINER Transaktion. Geprueft mit einem absichtlich kaputten To-do: kein Protokoll, keine halben Aufgaben, kein Folgetermin. - Enter im To-do-Feld legt die naechste Zeile an, damit man eine Liste tippen kann, ohne zur Maus zu greifen. - Meeting-Link nur bei anstehenden Gespraechen und nur, wenn es wirklich eine http(s)-Adresse ist. "bei mir zu Hause" bleibt schlichter Text. Zur Videotechnik selbst bewusst KEINE Entscheidung getroffen: Ein eigener WebRTC-Raum braucht einen TURN-Server, damit Verbindungen hinter Mobilfunk-NAT zustande kommen. Das ist eine Infrastrukturfrage mit laufenden Kosten und gehoert besprochen, nicht nebenbei entschieden. Bis dahin traegt der Termin einfach den Link des Dienstes, der ohnehin benutzt wird. Nebenbei: .knopf-still lag in scouting.css und fehlte dadurch auf calls.html -- dort standen prompt nackte Systemknoepfe. Der Baustein gehoert ins gemeinsame start.css, dort liegt er jetzt.
This commit is contained in:
@@ -0,0 +1,140 @@
|
||||
/* ===================================================================
|
||||
Calls & Meeting-Protokolle.
|
||||
|
||||
Nur eine Gruppe wird optisch hervorgehoben: die, in der etwas fehlt.
|
||||
Alles andere bleibt bewusst ruhig -- sonst schreit die ganze Seite
|
||||
und man sieht nicht mehr, was wirklich dran ist.
|
||||
=================================================================== */
|
||||
|
||||
.gruppe { margin-bottom: 32px; }
|
||||
.stufe__kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
|
||||
.stufe__titel {
|
||||
margin: 0; font-size: .78rem; font-weight: 700;
|
||||
letter-spacing: .08em; text-transform: uppercase; color: var(--akzent);
|
||||
}
|
||||
.stufe__zahl {
|
||||
min-width: 22px; padding: 1px 7px; text-align: center;
|
||||
font-size: .74rem; font-weight: 700; color: var(--text-still);
|
||||
background: rgba(255, 255, 255, .06); border-radius: 999px;
|
||||
}
|
||||
.block__frage { margin: 0 0 12px; font-size: .85rem; color: var(--text-still); }
|
||||
.gruppe__karten { display: grid; gap: 10px; margin-top: 12px; }
|
||||
|
||||
.gruppe[data-gruppe="offen"] .stufe__titel { color: #f0c48a; }
|
||||
.gruppe[data-gruppe="offen"] .stufe__zahl {
|
||||
color: #f0c48a; background: rgba(240, 196, 138, .13);
|
||||
}
|
||||
|
||||
/* ---------- Karte --------------------------------------------------------- */
|
||||
|
||||
.call {
|
||||
position: relative;
|
||||
padding: 15px 18px 15px 21px;
|
||||
background: rgba(255, 255, 255, .03);
|
||||
border: 1px solid var(--rand);
|
||||
border-radius: var(--radius-klein);
|
||||
transition: border-color .18s ease;
|
||||
}
|
||||
.call::before {
|
||||
content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;
|
||||
border-radius: 0 3px 3px 0;
|
||||
background: var(--rand-stark, rgba(255, 255, 255, .18));
|
||||
}
|
||||
.call[data-gruppe="offen"] {
|
||||
border-color: rgba(240, 196, 138, .32);
|
||||
background: rgba(240, 196, 138, .045);
|
||||
}
|
||||
.call[data-gruppe="offen"]::before { background: #f0c48a; }
|
||||
.call[data-gruppe="anstehend"]::before { background: var(--akzent); }
|
||||
.call[data-gruppe="erledigt"] { opacity: .82; }
|
||||
.call[data-gruppe="erledigt"]:hover { opacity: 1; }
|
||||
.call[data-gruppe="erledigt"]::before { background: #79d1a2; opacity: .55; }
|
||||
.call:hover { border-color: rgba(255, 255, 255, .18); }
|
||||
|
||||
.call__kopf { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
|
||||
.call__titel { margin: 0; font-size: 1.02rem; font-weight: 650; }
|
||||
.call__zeit { margin: 2px 0 0; font-size: .82rem; color: var(--text-still); }
|
||||
.call__text, .call__ort { margin: 10px 0 0; font-size: .86rem; color: var(--text-leise); }
|
||||
.call__ort::before { content: "Ort: "; color: var(--text-still); }
|
||||
|
||||
.marke-fehlt {
|
||||
padding: 3px 9px; border-radius: 999px;
|
||||
font-size: .71rem; font-weight: 600;
|
||||
color: #f0c48a; background: rgba(240, 196, 138, .12);
|
||||
border: 1px solid rgba(240, 196, 138, .35);
|
||||
}
|
||||
|
||||
/* ---------- Aufgeklappt ---------------------------------------------------- */
|
||||
|
||||
.call__detail { margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--rand); }
|
||||
.call__abschnitt {
|
||||
margin: 2px 0 14px; font-size: .88rem; color: var(--text-leise);
|
||||
white-space: pre-wrap; max-width: 78ch;
|
||||
}
|
||||
.call__quelle { margin: 12px 0 0; font-size: .77rem; color: var(--text-still); }
|
||||
.call__verweis { color: var(--akzent); }
|
||||
|
||||
.todo-liste { margin: 4px 0 0; padding: 0; list-style: none; }
|
||||
.todo-liste li {
|
||||
padding: 9px 13px; margin-bottom: 6px;
|
||||
background: rgba(255, 255, 255, .025);
|
||||
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
||||
font-size: .87rem;
|
||||
}
|
||||
.todo-liste li[data-status="erledigt"] { opacity: .6; }
|
||||
.todo-liste li[data-status="erledigt"] .todo-liste__titel { text-decoration: line-through; }
|
||||
.todo-liste__titel { display: block; }
|
||||
.todo-liste .kk__still { display: block; margin-top: 2px; font-size: .76rem; color: var(--text-still); }
|
||||
|
||||
/* ---------- Protokollbogen -------------------------------------------------- */
|
||||
|
||||
.bogen__hinweis { margin: 1px 0 6px; font-size: .78rem; color: var(--text-still); max-width: 70ch; }
|
||||
.bogen__feld {
|
||||
width: 100%; margin-bottom: 16px; padding: 10px 12px;
|
||||
background: rgba(255, 255, 255, .04);
|
||||
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
||||
color: var(--text); font: inherit; resize: vertical;
|
||||
}
|
||||
.bogen__zeit {
|
||||
margin-bottom: 14px; padding: 9px 11px;
|
||||
background: rgba(255, 255, 255, .05);
|
||||
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
||||
color: var(--text); font: inherit;
|
||||
}
|
||||
|
||||
.todos { display: grid; gap: 7px; margin: 4px 0 10px; }
|
||||
.todo { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 7px; }
|
||||
.todo__titel, .todo__frist {
|
||||
padding: 9px 11px;
|
||||
background: rgba(255, 255, 255, .05);
|
||||
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
||||
color: var(--text); font: inherit;
|
||||
}
|
||||
.todo__weg {
|
||||
width: 34px; cursor: pointer;
|
||||
background: transparent; border: 1px solid var(--rand);
|
||||
border-radius: var(--radius-klein);
|
||||
color: var(--text-still); font-size: 1.05rem; line-height: 1;
|
||||
transition: color .16s ease, border-color .16s ease;
|
||||
}
|
||||
.todo__weg:hover { color: #ffb4b9; border-color: rgba(255, 154, 162, .45); }
|
||||
|
||||
.bogen__feld:focus, .bogen__zeit:focus, .todo__titel:focus, .todo__frist:focus {
|
||||
outline: none; border-color: rgba(63, 189, 245, .65);
|
||||
box-shadow: 0 0 0 3px rgba(63, 189, 245, .14);
|
||||
}
|
||||
|
||||
.leer-hinweis {
|
||||
padding: 30px; text-align: center; color: var(--text-still); font-size: .9rem;
|
||||
border: 1px dashed var(--rand); border-radius: var(--radius);
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.todo { grid-template-columns: minmax(0, 1fr) auto; }
|
||||
.todo__frist { grid-column: 1 / 2; }
|
||||
.todo__weg { grid-row: 1 / 3; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.call, .todo__weg { transition: none; }
|
||||
}
|
||||
@@ -121,20 +121,6 @@
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Zurueckhaltender Zweitknopf -- gab es im Baukasten noch nicht. */
|
||||
.knopf-still {
|
||||
padding: 7px 13px; cursor: pointer;
|
||||
background: transparent;
|
||||
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
||||
color: var(--text-still); font: inherit; font-size: .82rem;
|
||||
transition: color .16s ease, border-color .16s ease, background .16s ease;
|
||||
}
|
||||
.knopf-still:hover {
|
||||
color: var(--text);
|
||||
border-color: rgba(255, 255, 255, .22);
|
||||
background: rgba(255, 255, 255, .04);
|
||||
}
|
||||
|
||||
/* Das Onboarding ist der einzige Schritt, der eine echte Person anlegt --
|
||||
der Knopf soll sich deshalb von den anderen abheben. */
|
||||
.knopf--gold {
|
||||
|
||||
@@ -212,3 +212,21 @@ body.start {
|
||||
.kopfleiste .marke { font-size: .64rem; }
|
||||
.wer { max-width: 34vw; }
|
||||
}
|
||||
|
||||
/* Zurueckhaltender Zweitknopf. Gehoert bewusst hierher und nicht in eine
|
||||
einzelne Seite: Er wird ueberall gebraucht, und als Seiten-CSS fehlte er
|
||||
prompt dort, wo die Datei nicht geladen war -- dann standen nackte
|
||||
Systemknoepfe in der Oberflaeche. */
|
||||
.knopf-still {
|
||||
padding: 7px 13px; cursor: pointer;
|
||||
background: transparent;
|
||||
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
||||
color: var(--text-still); font: inherit; font-size: .82rem;
|
||||
transition: color .16s ease, border-color .16s ease, background .16s ease;
|
||||
}
|
||||
.knopf-still:hover {
|
||||
color: var(--text);
|
||||
border-color: rgba(255, 255, 255, .22);
|
||||
background: rgba(255, 255, 255, .04);
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) { .knopf-still { transition: none; } }
|
||||
|
||||
@@ -0,0 +1,334 @@
|
||||
/* ===================================================================
|
||||
Calls & Meeting-Protokolle (Konzept, Seite 13).
|
||||
|
||||
Reihenfolge der Gruppen ist bewusst nicht chronologisch, sondern nach
|
||||
Dringlichkeit: Zuerst die Gespraeche, deren Protokoll FEHLT. Ein
|
||||
vergangener Call ohne Protokoll ist der einzige Zustand, der etwas
|
||||
von einem verlangt.
|
||||
=================================================================== */
|
||||
(() => {
|
||||
'use strict';
|
||||
|
||||
const $ = (id) => document.getElementById(id);
|
||||
let ich = null;
|
||||
let daten = null;
|
||||
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 WOCHENTAG = ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'];
|
||||
function zeitpunkt(iso) {
|
||||
if (!iso) return '';
|
||||
const [d, z] = iso.split('T');
|
||||
const [j, m, t] = d.split('-');
|
||||
const w = WOCHENTAG[new Date(+j, +m - 1, +t).getDay()];
|
||||
return `${w}, ${t}.${m}.${j} · ${z} Uhr`;
|
||||
}
|
||||
const datum = (iso) => (iso ? iso.slice(0, 10).split('-').reverse().join('.') : '');
|
||||
|
||||
/* Ein Meeting-Link ist nur dann ein Link, wenn er auch einer ist --
|
||||
alles andere bleibt schlichter Text (z. B. "bei mir zu Hause"). */
|
||||
function istLink(ort) {
|
||||
if (!ort) return false;
|
||||
try {
|
||||
const u = new URL(ort.trim());
|
||||
return u.protocol === 'https:' || u.protocol === 'http:';
|
||||
} catch { return false; }
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
/* ---------- Protokollbogen ---------------------------------------------- */
|
||||
|
||||
function bogen(c) {
|
||||
const f = el('form', 'bogen');
|
||||
|
||||
const feld = (schild, hinweis, wert) => {
|
||||
f.append(el('label', 'feld-schild', schild));
|
||||
if (hinweis) f.append(el('p', 'bogen__hinweis', hinweis));
|
||||
const t = el('textarea', 'bogen__feld');
|
||||
t.rows = 3;
|
||||
t.maxLength = 6000;
|
||||
t.value = wert || '';
|
||||
f.append(t);
|
||||
return t;
|
||||
};
|
||||
|
||||
const fPunkte = feld('Besprochene Punkte', null, c.punkte);
|
||||
const fEnt = feld('Entscheidungen',
|
||||
'Was wurde festgelegt? Nicht was diskutiert wurde – was gilt.', c.entscheidungen);
|
||||
|
||||
/* To-dos: der Teil, der laut Konzept direkt ins Board wandert. */
|
||||
f.append(el('label', 'feld-schild', 'To-dos'));
|
||||
f.append(el('p', 'bogen__hinweis',
|
||||
'Jede Zeile wird sofort eine echte Aufgabe im Brett – mit dem Gespräch als Herkunft.'));
|
||||
const todoBox = el('div', 'todos');
|
||||
f.append(todoBox);
|
||||
|
||||
const todoZeile = (fokus) => {
|
||||
const z = el('div', 'todo');
|
||||
const t = el('input', 'todo__titel');
|
||||
t.type = 'text'; t.maxLength = 160;
|
||||
t.placeholder = 'Was ist zu tun?';
|
||||
const d = el('input', 'todo__frist');
|
||||
d.type = 'date'; d.title = 'Frist (optional)';
|
||||
const weg = el('button', 'todo__weg', '×');
|
||||
weg.type = 'button';
|
||||
weg.title = 'Zeile entfernen';
|
||||
weg.setAttribute('aria-label', 'Zeile entfernen');
|
||||
weg.addEventListener('click', () => {
|
||||
z.remove();
|
||||
if (!todoBox.children.length) todoZeile(true);
|
||||
});
|
||||
/* Enter in der letzten Zeile legt die naechste an -- so kann man
|
||||
eine Liste tippen, ohne zur Maus zu greifen. */
|
||||
t.addEventListener('keydown', (e) => {
|
||||
if (e.key !== 'Enter') return;
|
||||
e.preventDefault();
|
||||
if (z === todoBox.lastElementChild && t.value.trim()) todoZeile(true);
|
||||
else z.nextElementSibling?.querySelector('.todo__titel')?.focus();
|
||||
});
|
||||
z.append(t, d, weg);
|
||||
todoBox.append(z);
|
||||
if (fokus) t.focus();
|
||||
return z;
|
||||
};
|
||||
todoZeile(false);
|
||||
|
||||
const mehr = el('button', 'knopf-still', '+ Zeile');
|
||||
mehr.type = 'button';
|
||||
mehr.addEventListener('click', () => todoZeile(true));
|
||||
f.append(mehr);
|
||||
|
||||
/* Nächster Termin */
|
||||
f.append(el('label', 'feld-schild', 'Nächster Termin'));
|
||||
f.append(el('p', 'bogen__hinweis',
|
||||
'Wenn hier etwas steht, wird der Folgetermin gleich in den Kalender gelegt – '
|
||||
+ 'mit demselben Gegenüber und demselben Link.'));
|
||||
const naechster = el('input', 'bogen__zeit');
|
||||
naechster.type = 'datetime-local';
|
||||
f.append(naechster);
|
||||
|
||||
const meldung = el('p', 'fehler');
|
||||
meldung.setAttribute('role', 'alert');
|
||||
f.append(meldung);
|
||||
|
||||
const knöpfe = el('div', 'kk__knoepfe');
|
||||
const speichern = el('button', 'knopf knopf--klein', 'Protokoll festhalten');
|
||||
speichern.type = 'submit';
|
||||
const abbrechen = el('button', 'knopf-still', 'Abbrechen');
|
||||
abbrechen.type = 'button';
|
||||
abbrechen.addEventListener('click', () => { offen.delete(c.id); zeichne(); });
|
||||
knöpfe.append(speichern, abbrechen);
|
||||
f.append(knöpfe);
|
||||
|
||||
f.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
meldung.textContent = '';
|
||||
const todos = [...todoBox.querySelectorAll('.todo')]
|
||||
.map((z) => ({
|
||||
titel: z.querySelector('.todo__titel').value,
|
||||
frist: z.querySelector('.todo__frist').value,
|
||||
}))
|
||||
.filter((t) => t.titel.trim());
|
||||
|
||||
if (!fPunkte.value.trim() && !fEnt.value.trim() && !todos.length) {
|
||||
meldung.textContent = 'Ein leeres Protokoll hilft niemandem.';
|
||||
return;
|
||||
}
|
||||
speichern.disabled = true;
|
||||
try {
|
||||
const a = await hole(`/workspace/api/calls/${c.id}/protokoll`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
punkte: fPunkte.value, entscheidungen: fEnt.value, todos,
|
||||
naechster_beginn: naechster.value,
|
||||
}),
|
||||
});
|
||||
if (!a.ok) {
|
||||
meldung.textContent = (await a.json().catch(() => ({}))).fehler || 'Ging nicht.';
|
||||
return;
|
||||
}
|
||||
const r = await a.json();
|
||||
offen.delete(c.id);
|
||||
await laden();
|
||||
melde(r.aufgaben
|
||||
? `Protokoll festgehalten – ${r.aufgaben} To-do(s) liegen jetzt im Aufgabenbrett.`
|
||||
: 'Protokoll festgehalten.');
|
||||
setTimeout(() => melde(''), 5000);
|
||||
} catch { /* umgeleitet */ } finally { speichern.disabled = false; }
|
||||
});
|
||||
|
||||
return f;
|
||||
}
|
||||
|
||||
/* ---------- Karte -------------------------------------------------------- */
|
||||
|
||||
function karte(c, gruppe) {
|
||||
const k = el('article', 'call');
|
||||
k.dataset.gruppe = gruppe;
|
||||
k.id = 'call-' + c.id;
|
||||
|
||||
const kopf = el('div', 'call__kopf');
|
||||
const links = el('div');
|
||||
links.append(el('h3', 'call__titel', c.titel));
|
||||
const wer = [c.creator_name, c.teilnehmer_name].filter(Boolean).join(' · ');
|
||||
links.append(el('p', 'call__zeit',
|
||||
zeitpunkt(c.beginn) + ` · ${c.dauer_min} Min` + (wer ? ' · ' + wer : '')));
|
||||
kopf.append(links);
|
||||
|
||||
const marken = el('div', 'kk__marken');
|
||||
if (c.art === 'review') marken.append(el('span', 'marke-still', 'Review'));
|
||||
if (gruppe === 'offen') marken.append(el('span', 'marke-fehlt', 'Protokoll fehlt'));
|
||||
if (c.aufgaben.length) {
|
||||
const erledigt = c.aufgaben.filter((a) => a.status === 'erledigt').length;
|
||||
marken.append(el('span', 'marke-still',
|
||||
`${erledigt}/${c.aufgaben.length} To-dos erledigt`));
|
||||
}
|
||||
kopf.append(marken);
|
||||
k.append(kopf);
|
||||
|
||||
if (c.beschreibung) k.append(el('p', 'call__text', c.beschreibung));
|
||||
|
||||
/* Meeting-Link nur bei anstehenden Gesprächen -- danach ist er wertlos. */
|
||||
const knöpfe = el('div', 'kk__knoepfe');
|
||||
if (gruppe === 'anstehend' && istLink(c.ort)) {
|
||||
const a = el('a', 'knopf knopf--klein', 'Call öffnen');
|
||||
a.href = c.ort;
|
||||
a.target = '_blank';
|
||||
a.rel = 'noopener noreferrer';
|
||||
knöpfe.append(a);
|
||||
} else if (c.ort && !istLink(c.ort)) {
|
||||
k.append(el('p', 'call__ort', c.ort));
|
||||
}
|
||||
|
||||
if (gruppe !== 'anstehend') {
|
||||
const b = el('button', gruppe === 'offen' ? 'knopf knopf--klein' : 'knopf-still',
|
||||
offen.has(c.id) ? 'Schließen'
|
||||
: c.protokoll_id ? 'Protokoll ansehen' : 'Protokoll schreiben');
|
||||
b.type = 'button';
|
||||
b.addEventListener('click', () => {
|
||||
if (offen.has(c.id)) offen.delete(c.id); else offen.add(c.id);
|
||||
zeichne();
|
||||
});
|
||||
knöpfe.append(b);
|
||||
}
|
||||
if (knöpfe.childNodes.length) k.append(knöpfe);
|
||||
|
||||
if (!offen.has(c.id)) return k;
|
||||
|
||||
const auf = el('div', 'call__detail');
|
||||
if (c.protokoll_id) {
|
||||
/* Fertiges Protokoll: lesen, nicht bearbeiten. Ein festgehaltenes
|
||||
Gespräch nachträglich umzuschreiben wäre genau das, was ein
|
||||
Protokoll wertlos macht. */
|
||||
if (c.punkte) {
|
||||
auf.append(el('p', 'kk__schild', 'Besprochene Punkte'));
|
||||
auf.append(el('p', 'call__abschnitt', c.punkte));
|
||||
}
|
||||
if (c.entscheidungen) {
|
||||
auf.append(el('p', 'kk__schild', 'Entscheidungen'));
|
||||
auf.append(el('p', 'call__abschnitt', c.entscheidungen));
|
||||
}
|
||||
if (c.aufgaben.length) {
|
||||
auf.append(el('p', 'kk__schild', 'Daraus entstandene Aufgaben'));
|
||||
const ul = el('ul', 'todo-liste');
|
||||
for (const a of c.aufgaben) {
|
||||
const li = el('li');
|
||||
li.dataset.status = a.status;
|
||||
li.append(el('span', 'todo-liste__titel', a.titel));
|
||||
const zus = [a.verantwortlich_name, a.frist ? 'bis ' + datum(a.frist) : null,
|
||||
a.status === 'erledigt' ? 'erledigt' : null].filter(Boolean).join(' · ');
|
||||
if (zus) li.append(el('span', 'kk__still', zus));
|
||||
ul.append(li);
|
||||
}
|
||||
auf.append(ul);
|
||||
}
|
||||
auf.append(el('p', 'call__quelle',
|
||||
`Festgehalten von ${c.protokoll_von || '—'} am ${datum(c.protokoll_erstellt)}`));
|
||||
if (c.naechster_termin_id) {
|
||||
const p = el('p', 'call__quelle', 'Folgetermin liegt im Kalender. ');
|
||||
const a = el('a', 'call__verweis', 'Kalender öffnen');
|
||||
a.href = 'kalender.html';
|
||||
p.append(a);
|
||||
auf.append(p);
|
||||
}
|
||||
} else {
|
||||
auf.append(bogen(c));
|
||||
}
|
||||
k.append(auf);
|
||||
return k;
|
||||
}
|
||||
|
||||
/* ---------- Zeichnen ----------------------------------------------------- */
|
||||
|
||||
const GRUPPEN = [
|
||||
{ schluessel: 'offen', titel: 'Protokoll fehlt',
|
||||
frage: 'Diese Gespräche sind vorbei, aber noch nicht festgehalten.' },
|
||||
{ schluessel: 'anstehend', titel: 'Steht an', frage: null },
|
||||
{ schluessel: 'erledigt', titel: 'Festgehalten', frage: null },
|
||||
];
|
||||
|
||||
function zeichne() {
|
||||
const ziel = $('listen');
|
||||
ziel.textContent = '';
|
||||
ziel.setAttribute('aria-busy', 'false');
|
||||
|
||||
if (!daten.offen.length && !daten.anstehend.length && !daten.erledigt.length) {
|
||||
const leer = el('div', 'leer-hinweis');
|
||||
leer.append(document.createTextNode('Noch keine Calls. Termine mit der Art „Call" oder „Review" '));
|
||||
const a = el('a', 'call__verweis', 'im Kalender');
|
||||
a.href = 'kalender.html';
|
||||
leer.append(a, document.createTextNode(' erscheinen automatisch hier.'));
|
||||
ziel.append(leer);
|
||||
return;
|
||||
}
|
||||
|
||||
for (const g of GRUPPEN) {
|
||||
const liste = daten[g.schluessel];
|
||||
if (!liste.length) continue;
|
||||
const s = el('section', 'gruppe');
|
||||
s.dataset.gruppe = g.schluessel;
|
||||
const kopf = el('div', 'stufe__kopf');
|
||||
kopf.append(el('h2', 'stufe__titel', g.titel), el('span', 'stufe__zahl', String(liste.length)));
|
||||
s.append(kopf);
|
||||
if (g.frage) s.append(el('p', 'block__frage', g.frage));
|
||||
const box = el('div', 'gruppe__karten');
|
||||
for (const c of liste) box.append(karte(c, g.schluessel));
|
||||
s.append(box);
|
||||
ziel.append(s);
|
||||
}
|
||||
}
|
||||
|
||||
async function laden() {
|
||||
try {
|
||||
const a = await hole('/workspace/api/calls');
|
||||
if (!a.ok) { melde('Gespräche konnten nicht geladen werden.'); return; }
|
||||
daten = await a.json();
|
||||
zeichne();
|
||||
} catch { /* umgeleitet */ }
|
||||
}
|
||||
|
||||
/* ---------- Start --------------------------------------------------------- */
|
||||
|
||||
(async () => {
|
||||
try {
|
||||
const a = await hole('/workspace/api/ich');
|
||||
if (!a.ok) { location.assign('/workspace/'); return; }
|
||||
ich = await a.json();
|
||||
} catch { return; }
|
||||
$('wer').textContent = ich.name + ' · ' + ich.rolle;
|
||||
await laden();
|
||||
})();
|
||||
})();
|
||||
@@ -29,7 +29,7 @@
|
||||
{ name: 'Community', phase: 2, rollen: ['admin', 'creator'], ziel: 'bereich.html?b=community' },
|
||||
{ name: 'Schutz & Regeln', phase: 2, rollen: ['admin', 'creator'], ziel: 'bereich.html?b=schutz' },
|
||||
{ name: 'Reports & Review', phase: 2, rollen: ['admin', 'creator'], ziel: 'report.html' },
|
||||
{ name: 'Calls', phase: 3, rollen: ['admin', 'creator', 'scout'] },
|
||||
{ name: 'Calls & Protokolle', phase: 3, rollen: ['admin', 'creator', 'scout'], ziel: 'calls.html' },
|
||||
{ name: 'Scout-Pipeline', phase: 3, rollen: ['admin', 'scout'], ziel: 'scouting.html' },
|
||||
{ name: 'Automationen', phase: 4, rollen: ['admin'] },
|
||||
];
|
||||
|
||||
@@ -0,0 +1,55 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||||
<title>Calls & Protokolle · Creator Workspace</title>
|
||||
<meta name="robots" content="noindex, nofollow" />
|
||||
<meta name="theme-color" content="#05070d" />
|
||||
<link rel="icon" href="assets/img/favicon.png" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css" />
|
||||
<link rel="stylesheet" href="assets/css/start.css" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css" />
|
||||
<link rel="stylesheet" href="assets/css/calls.css" />
|
||||
</head>
|
||||
|
||||
<body class="start">
|
||||
|
||||
<header class="kopfleiste">
|
||||
<button type="button" class="zurueck-knopf" id="zurueck" hidden>
|
||||
<svg class="zurueck-knopf__pfeil" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M14.5 5.5 8 12l6.5 6.5" />
|
||||
</svg>
|
||||
<span class="zurueck-knopf__text">Zurück</span>
|
||||
</button>
|
||||
<p class="marke"><a class="zurueck" href="start.html">Creator Workspace</a> · Calls</p>
|
||||
<div class="kopfleiste__rechts">
|
||||
<span class="wer" id="wer">…</span>
|
||||
<button type="button" class="abmelden" id="abmelden">Abmelden</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="inhalt inhalt--breit">
|
||||
|
||||
<section class="kopf-zeile">
|
||||
<div>
|
||||
<p class="marke">Gespräche</p>
|
||||
<h1 class="titel">Calls & Protokolle</h1>
|
||||
<p class="unterzeile">
|
||||
Jeder Call endet mit klaren To-dos – die landen direkt im Aufgabenbrett,
|
||||
nicht in einem Dokument, das niemand mehr öffnet.
|
||||
</p>
|
||||
</div>
|
||||
<a class="knopf knopf--klein" href="kalender.html">Call planen</a>
|
||||
</section>
|
||||
|
||||
<p class="fehler" id="fehler" role="alert" aria-live="polite"></p>
|
||||
|
||||
<div id="listen" aria-busy="true"><p class="leise">Gespräche werden geladen …</p></div>
|
||||
|
||||
</main>
|
||||
|
||||
<script src="assets/js/kopf.js" defer></script>
|
||||
<script src="assets/js/calls.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user