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:
@@ -22,6 +22,7 @@ import { dateienRouter } from "./workspace-dateien.js";
|
||||
import { bereicheRouter } from "./workspace-bereiche.js";
|
||||
import { reportRouter } from "./workspace-reports.js";
|
||||
import { scoutRouter } from "./workspace-scouts.js";
|
||||
import { callRouter } from "./workspace-calls.js";
|
||||
|
||||
const __dirname = dirname(fileURLToPath(import.meta.url));
|
||||
const SITE_DIR = join(__dirname, "..");
|
||||
@@ -84,6 +85,7 @@ app.use(dateienRouter);
|
||||
app.use(bereicheRouter);
|
||||
app.use(reportRouter);
|
||||
app.use(scoutRouter);
|
||||
app.use(callRouter);
|
||||
|
||||
/* Sicherheits-Fix 20.08.2026 (Audit vor dem geplanten öffentlichen Start morgen).
|
||||
SITE_DIR ist der GESAMTE Repo-Ordner (join(__dirname, "..")) — express.static liefert
|
||||
|
||||
@@ -0,0 +1,241 @@
|
||||
/* =====================================================================
|
||||
workspace-calls.js — Calls & Meeting-Protokolle (Konzept, Seite 13).
|
||||
|
||||
Calls sind KEINE eigene Terminart neben dem Kalender, sondern
|
||||
dieselben Termine mit art = 'call'. Ein zweiter Terminspeicher waere
|
||||
die sichere Art, irgendwann zwei widerspruechliche Uhrzeiten zu haben.
|
||||
Diese Datei fuegt nur das hinzu, was ein Gespraech vom blossen Termin
|
||||
unterscheidet: das Protokoll danach.
|
||||
|
||||
Der tragende Satz aus dem Deck:
|
||||
"Jeder Call endet mit klaren To-dos, die direkt ins Board uebernommen
|
||||
werden."
|
||||
|
||||
Woertlich genommen heisst das: To-dos werden nicht als Text im
|
||||
Protokoll abgelegt, sondern sofort zu echten Aufgaben. Sonst steht die
|
||||
Verabredung in einem Dokument, das niemand mehr oeffnet.
|
||||
===================================================================== */
|
||||
|
||||
import express from "express";
|
||||
import { db, protokolliere, echteIp, sitzungLesen } from "./workspace.js";
|
||||
|
||||
export const callRouter = express.Router();
|
||||
|
||||
const TITEL_MAX = 160;
|
||||
const TEXT_MAX = 6000;
|
||||
const TODOS_MAX = 12;
|
||||
|
||||
const jetzt = () => new Date().toISOString();
|
||||
|
||||
/* Lokale Zeit im selben Format wie ein datetime-local-Feld -- damit ist
|
||||
"vergangen" derselbe Vergleich wie im Kalender. */
|
||||
function jetztLokal() {
|
||||
const d = new Date();
|
||||
const p = (n) => String(n).padStart(2, "0");
|
||||
return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())}T${p(d.getHours())}:${p(d.getMinutes())}`;
|
||||
}
|
||||
|
||||
function angemeldet(req, res, next) {
|
||||
const person = sitzungLesen(req);
|
||||
if (!person) return res.status(401).json({ fehler: "nicht_angemeldet" });
|
||||
req.person = person;
|
||||
next();
|
||||
}
|
||||
|
||||
function gleicheHerkunft(req, res, next) {
|
||||
const herkunft = req.get("origin");
|
||||
if (!herkunft) return next();
|
||||
let erlaubt;
|
||||
try { erlaubt = new URL(herkunft).host === req.get("host"); } catch { erlaubt = false; }
|
||||
if (!erlaubt) return res.status(403).json({ fehler: "fremde_herkunft" });
|
||||
next();
|
||||
}
|
||||
|
||||
callRouter.use("/workspace/api/calls", angemeldet);
|
||||
|
||||
/* Dieselbe Sichtbarkeitsregel wie im Kalender -- absichtlich Wort fuer
|
||||
Wort, damit ein Termin nicht in der einen Ansicht auftaucht und in der
|
||||
anderen fehlt. */
|
||||
function sichtbar(person) {
|
||||
if (person.rolle === "admin") return { wo: "1=1", werte: [] };
|
||||
return {
|
||||
wo: "(t.creator_id = ? OR t.teilnehmer_id = ? OR t.erstellt_von = ?)",
|
||||
werte: [person.id, person.id, person.id],
|
||||
};
|
||||
}
|
||||
|
||||
const SPALTEN = `
|
||||
t.id, t.titel, t.beschreibung, t.art, t.beginn, t.dauer_min, t.ort,
|
||||
t.creator_id, t.teilnehmer_id, t.erledigt,
|
||||
pc.name AS creator_name, pt.name AS teilnehmer_name,
|
||||
pr.id AS protokoll_id, pr.punkte, pr.entscheidungen,
|
||||
pr.erstellt AS protokoll_erstellt, pr.naechster_termin_id,
|
||||
pe.name AS protokoll_von`;
|
||||
|
||||
const VERBUND = `
|
||||
FROM termine t
|
||||
LEFT JOIN personen pc ON pc.id = t.creator_id
|
||||
LEFT JOIN personen pt ON pt.id = t.teilnehmer_id
|
||||
LEFT JOIN protokolle pr ON pr.termin_id = t.id
|
||||
LEFT JOIN personen pe ON pe.id = pr.erstellt_von`;
|
||||
|
||||
/* Aufgaben, die aus einem Gespraech entstanden sind. */
|
||||
function aufgabenZu(protokollIds) {
|
||||
if (!protokollIds.length) return new Map();
|
||||
const platz = protokollIds.map(() => "?").join(",");
|
||||
const zeilen = db().prepare(`
|
||||
SELECT pa.protokoll_id, a.id, a.titel, a.status, a.frist, p.name AS verantwortlich_name
|
||||
FROM protokoll_aufgaben pa
|
||||
JOIN aufgaben a ON a.id = pa.aufgabe_id
|
||||
LEFT JOIN personen p ON p.id = a.verantwortlich_id
|
||||
WHERE pa.protokoll_id IN (${platz})
|
||||
ORDER BY a.id`).all(...protokollIds);
|
||||
const karte = new Map();
|
||||
for (const z of zeilen) {
|
||||
if (!karte.has(z.protokoll_id)) karte.set(z.protokoll_id, []);
|
||||
karte.get(z.protokoll_id).push({
|
||||
id: z.id, titel: z.titel, status: z.status,
|
||||
frist: z.frist, verantwortlich_name: z.verantwortlich_name,
|
||||
});
|
||||
}
|
||||
return karte;
|
||||
}
|
||||
|
||||
/* ---------- Liste ------------------------------------------------------- */
|
||||
|
||||
callRouter.get("/workspace/api/calls", (req, res) => {
|
||||
try {
|
||||
const { wo, werte } = sichtbar(req.person);
|
||||
const alle = db().prepare(`
|
||||
SELECT ${SPALTEN} ${VERBUND}
|
||||
WHERE ${wo} AND t.art IN ('call','review')
|
||||
ORDER BY t.beginn DESC`).all(...werte);
|
||||
|
||||
const karte = aufgabenZu(alle.filter((c) => c.protokoll_id).map((c) => c.protokoll_id));
|
||||
for (const c of alle) c.aufgaben = karte.get(c.protokoll_id) || [];
|
||||
|
||||
const grenze = jetztLokal();
|
||||
res.json({
|
||||
jetzt: grenze,
|
||||
/* Die Reihenfolge der Gruppen ist die Dringlichkeit: Was fehlt,
|
||||
steht oben -- nicht was als Naechstes kommt. */
|
||||
offen: alle.filter((c) => c.beginn <= grenze && !c.protokoll_id).reverse(),
|
||||
anstehend: alle.filter((c) => c.beginn > grenze).reverse(),
|
||||
erledigt: alle.filter((c) => c.beginn <= grenze && c.protokoll_id),
|
||||
});
|
||||
} catch (fehler) {
|
||||
console.error("[workspace] Calls lesen:", fehler?.message);
|
||||
res.status(503).json({ fehler: "nicht_verfuegbar" });
|
||||
}
|
||||
});
|
||||
|
||||
/* ---------- Protokoll schreiben ----------------------------------------- */
|
||||
|
||||
callRouter.post("/workspace/api/calls/:id/protokoll", gleicheHerkunft, (req, res) => {
|
||||
const d = db();
|
||||
try {
|
||||
const id = Number(req.params.id);
|
||||
if (!Number.isInteger(id)) return res.status(400).json({ fehler: "ungueltig" });
|
||||
|
||||
const { wo, werte } = sichtbar(req.person);
|
||||
const termin = d.prepare(`
|
||||
SELECT t.id, t.titel, t.beginn, t.dauer_min, t.ort, t.art,
|
||||
t.creator_id, t.teilnehmer_id, pr.id AS protokoll_id
|
||||
FROM termine t LEFT JOIN protokolle pr ON pr.termin_id = t.id
|
||||
WHERE ${wo} AND t.id = ? AND t.art IN ('call','review')`).get(...werte, id);
|
||||
if (!termin) return res.status(404).json({ fehler: "nicht_gefunden" });
|
||||
|
||||
const k = req.body || {};
|
||||
const punkte = String(k.punkte ?? "").trim().slice(0, TEXT_MAX) || null;
|
||||
const entscheidungen = String(k.entscheidungen ?? "").trim().slice(0, TEXT_MAX) || null;
|
||||
|
||||
/* To-dos pruefen, BEVOR irgendetwas geschrieben wird. */
|
||||
const roh = Array.isArray(k.todos) ? k.todos : [];
|
||||
if (roh.length > TODOS_MAX) {
|
||||
return res.status(400).json({ fehler: `Höchstens ${TODOS_MAX} To-dos auf einmal.` });
|
||||
}
|
||||
const todos = [];
|
||||
for (const t of roh) {
|
||||
const titel = String(t?.titel ?? "").trim();
|
||||
if (!titel) continue;
|
||||
if (titel.length > TITEL_MAX) return res.status(400).json({ fehler: "Ein To-do ist zu lang." });
|
||||
const frist = String(t?.frist ?? "").trim();
|
||||
if (frist && (!/^\d{4}-\d{2}-\d{2}$/.test(frist) || Number.isNaN(Date.parse(frist)))) {
|
||||
return res.status(400).json({ fehler: "Frist eines To-dos ist ungültig." });
|
||||
}
|
||||
todos.push({ titel, frist: frist || null });
|
||||
}
|
||||
|
||||
/* Nächster Termin, falls im Protokoll vereinbart. */
|
||||
const nb = String(k.naechster_beginn ?? "").trim();
|
||||
if (nb && !/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/.test(nb)) {
|
||||
return res.status(400).json({ fehler: "Der nächste Termin hat kein gültiges Datum." });
|
||||
}
|
||||
let dauer = Number(k.naechster_dauer ?? termin.dauer_min ?? 30);
|
||||
if (!Number.isInteger(dauer) || dauer < 5 || dauer > 480) dauer = 30;
|
||||
|
||||
if (!punkte && !entscheidungen && !todos.length) {
|
||||
return res.status(400).json({ fehler: "Ein leeres Protokoll hilft niemandem." });
|
||||
}
|
||||
|
||||
/* Alles zusammen oder gar nicht -- sonst gaebe es Aufgaben ohne
|
||||
Protokoll oder umgekehrt. */
|
||||
let antwort;
|
||||
d.exec("BEGIN");
|
||||
try {
|
||||
let protokollId = termin.protokoll_id;
|
||||
if (protokollId) {
|
||||
d.prepare("UPDATE protokolle SET punkte = ?, entscheidungen = ?, geaendert = ? WHERE id = ?")
|
||||
.run(punkte, entscheidungen, jetzt(), protokollId);
|
||||
} else {
|
||||
protokollId = Number(d.prepare(`
|
||||
INSERT INTO protokolle (termin_id, punkte, entscheidungen, erstellt, erstellt_von)
|
||||
VALUES (?,?,?,?,?)`).run(id, punkte, entscheidungen, jetzt(), req.person.id).lastInsertRowid);
|
||||
}
|
||||
|
||||
/* To-dos werden zu echten Aufgaben -- genau das ist der Punkt. */
|
||||
const neueAufgaben = [];
|
||||
for (const t of todos) {
|
||||
const a = Number(d.prepare(`
|
||||
INSERT INTO aufgaben
|
||||
(titel, beschreibung, status, prioritaet, creator_id, verantwortlich_id, frist, erstellt, erstellt_von)
|
||||
VALUES (?,?,'offen','mittel',?,?,?,?,?)`).run(
|
||||
t.titel, `Aus dem Gespräch „${termin.titel}"`,
|
||||
termin.creator_id, termin.teilnehmer_id ?? termin.creator_id,
|
||||
t.frist, jetzt(), req.person.id).lastInsertRowid);
|
||||
d.prepare("INSERT INTO protokoll_aufgaben (protokoll_id, aufgabe_id) VALUES (?,?)")
|
||||
.run(protokollId, a);
|
||||
neueAufgaben.push(a);
|
||||
}
|
||||
|
||||
/* Nächster Termin als echter Kalendereintrag, mit demselben
|
||||
Gegenüber und demselben Meeting-Link. */
|
||||
let naechster = null;
|
||||
if (nb) {
|
||||
naechster = Number(d.prepare(`
|
||||
INSERT INTO termine
|
||||
(titel, beschreibung, art, beginn, dauer_min, ort, creator_id, teilnehmer_id, erstellt, erstellt_von)
|
||||
VALUES (?,?,?,?,?,?,?,?,?,?)`).run(
|
||||
termin.titel, `Folgetermin zu „${termin.titel}"`, termin.art, nb, dauer,
|
||||
termin.ort, termin.creator_id, termin.teilnehmer_id, jetzt(), req.person.id).lastInsertRowid);
|
||||
d.prepare("UPDATE protokolle SET naechster_termin_id = ? WHERE id = ?").run(naechster, protokollId);
|
||||
}
|
||||
|
||||
d.prepare("UPDATE termine SET erledigt = 1 WHERE id = ?").run(id);
|
||||
d.exec("COMMIT");
|
||||
antwort = { protokoll_id: protokollId, aufgaben: neueAufgaben.length, naechster_termin_id: naechster };
|
||||
} catch (fehler) {
|
||||
d.exec("ROLLBACK");
|
||||
throw fehler;
|
||||
}
|
||||
|
||||
protokolliere("protokoll_geschrieben", {
|
||||
personId: req.person.id, rolle: req.person.rolle, ip: echteIp(req),
|
||||
detail: `Termin #${id}, ${antwort.aufgaben} To-do(s)`.slice(0, 120),
|
||||
});
|
||||
res.status(201).json(antwort);
|
||||
} catch (fehler) {
|
||||
console.error("[workspace] Protokoll schreiben:", fehler?.message);
|
||||
res.status(503).json({ fehler: "nicht_verfuegbar" });
|
||||
}
|
||||
});
|
||||
@@ -222,6 +222,32 @@ export function db() {
|
||||
);
|
||||
CREATE INDEX IF NOT EXISTS idx_eintraege_bereich ON eintraege (bereich, creator_id);
|
||||
|
||||
/* Meeting-Protokoll zu einem Termin (Konzept, Seite 13).
|
||||
Bewusst eine eigene Tabelle statt neuer Spalten in termine: Es
|
||||
gibt hier keine Migrationen, und ein Protokoll gehoert ohnehin
|
||||
nur zu einem Bruchteil der Termine. Ein Termin hat hoechstens
|
||||
ein Protokoll -- daher UNIQUE. */
|
||||
CREATE TABLE IF NOT EXISTS protokolle (
|
||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||
termin_id INTEGER NOT NULL UNIQUE REFERENCES termine(id) ON DELETE CASCADE,
|
||||
punkte TEXT,
|
||||
entscheidungen TEXT,
|
||||
naechster_termin_id INTEGER REFERENCES termine(id) ON DELETE SET NULL,
|
||||
erstellt TEXT NOT NULL,
|
||||
erstellt_von INTEGER REFERENCES personen(id) ON DELETE SET NULL,
|
||||
geaendert TEXT
|
||||
);
|
||||
|
||||
/* "Jeder Call endet mit klaren To-dos, die direkt ins Board
|
||||
uebernommen werden." Die To-dos leben deshalb NICHT im Protokoll,
|
||||
sondern sind echte Aufgaben. Diese Tabelle merkt sich nur, aus
|
||||
welchem Gespraech eine Aufgabe entstanden ist. */
|
||||
CREATE TABLE IF NOT EXISTS protokoll_aufgaben (
|
||||
protokoll_id INTEGER NOT NULL REFERENCES protokolle(id) ON DELETE CASCADE,
|
||||
aufgabe_id INTEGER NOT NULL REFERENCES aufgaben(id) ON DELETE CASCADE,
|
||||
PRIMARY KEY (protokoll_id, aufgabe_id)
|
||||
);
|
||||
|
||||
/* Scout-CRM: die Pipeline vom ersten Fund bis zur Uebergabe.
|
||||
creator_id ist gesetzt, sobald aus einem uebergebenen Lead eine
|
||||
echte Person angelegt wurde -- damit bleibt nachvollziehbar, wer
|
||||
@@ -387,6 +413,7 @@ const GESCHUETZT = {
|
||||
"/workspace/bereich.html": ["admin", "creator"],
|
||||
"/workspace/report.html": ["admin", "creator"],
|
||||
"/workspace/scouting.html": ["admin", "scout"],
|
||||
"/workspace/calls.html": null,
|
||||
};
|
||||
|
||||
workspaceRouter.use((req, res, next) => {
|
||||
|
||||
@@ -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