Maak splitsingen visueel in roostermaker
This commit is contained in:
bes-r
parent
8f62734af3
commit
d16b3b0e3a
2 changed files with 204 additions and 92 deletions
|
|
@ -1333,23 +1333,29 @@ function BlokBewerker({ blok, ctx, onSluit, onKlaar }) {
|
|||
try { await deleteResource("roosterblokken", blok.id); await onKlaar(); } catch (e) { setError(e.message); }
|
||||
}
|
||||
return (
|
||||
<div className="modal-overlay" onClick={onSluit}>
|
||||
<div className="modal" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="modal-kop"><h2>Blok bewerken</h2><button className="link" onClick={onSluit}>sluiten ✕</button></div>
|
||||
<Foutmelding msg={error} />
|
||||
<div className="form-row">
|
||||
<select value={f.tijdslot} onChange={(e) => setF({ ...f, tijdslot: e.target.value })}>
|
||||
{tijdsloten.map((t) => <option key={t.id} value={t.id}>{t.dag_label} {t.start_tijd?.slice(0, 5)} {t.naam}</option>)}
|
||||
</select>
|
||||
<select value={f.activiteit} onChange={(e) => setF({ ...f, activiteit: e.target.value })}>
|
||||
{activiteiten.map((a) => <option key={a.id} value={a.id}>{a.naam}</option>)}
|
||||
</select>
|
||||
<select value={f.locatie} onChange={(e) => setF({ ...f, locatie: e.target.value })}>
|
||||
<option value="">— locatie —</option>
|
||||
{locaties.map((l) => <option key={l.id} value={l.id}>{l.naam}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div className="form-row">
|
||||
<div className="blok-editor no-print" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="blok-editor-kop">
|
||||
<strong>Bewerken</strong>
|
||||
<button type="button" className="icon-btn" title="Sluiten" onClick={onSluit}>×</button>
|
||||
</div>
|
||||
<Foutmelding msg={error} />
|
||||
<div className="editor-grid">
|
||||
<select value={f.tijdslot} title="Tijdslot" onChange={(e) => setF({ ...f, tijdslot: e.target.value })}>
|
||||
{tijdsloten.map((t) => <option key={t.id} value={t.id}>{t.dag_label} {t.start_tijd?.slice(0, 5)} {t.naam}</option>)}
|
||||
</select>
|
||||
<select value={f.activiteit} title="Activiteit" onChange={(e) => setF({ ...f, activiteit: e.target.value })}>
|
||||
{activiteiten.map((a) => <option key={a.id} value={a.id}>{a.naam}</option>)}
|
||||
</select>
|
||||
<select value={f.locatie} title="Locatie" onChange={(e) => setF({ ...f, locatie: e.target.value })}>
|
||||
<option value="">— locatie —</option>
|
||||
{locaties.map((l) => <option key={l.id} value={l.id}>{l.naam}</option>)}
|
||||
</select>
|
||||
<input placeholder="Opmerking" value={f.opmerkingen} onChange={(e) => setF({ ...f, opmerkingen: e.target.value })} />
|
||||
</div>
|
||||
|
||||
<details className="editor-detail">
|
||||
<summary>Doelgroep en begeleiding</summary>
|
||||
<div className="editor-grid">
|
||||
<select value={f.doel_type} onChange={(e) => {
|
||||
setF({ ...f, doel_type: e.target.value, doel: "" });
|
||||
if (e.target.value !== "subgroep") setSubgroepGroepFilter("");
|
||||
|
|
@ -1362,52 +1368,59 @@ function BlokBewerker({ blok, ctx, onSluit, onKlaar }) {
|
|||
<option value="">— kies {f.doel_type} —</option>
|
||||
{doelOpties.map((o) => <option key={o.id} value={o.id}>{o.naam || o.volledige_naam}</option>)}
|
||||
</select>
|
||||
{f.doel_type === "subgroep" && (
|
||||
<>
|
||||
<select value={subgroepGroepFilter || ""} onChange={(e) => { setSubgroepGroepFilter(e.target.value ? Number(e.target.value) : ""); setF({ ...f, doel: "", doel_type: "subgroep" }); }}>
|
||||
<option value="">— alle groepen —</option>
|
||||
{groepen.map((g) => <option key={g.id} value={g.id}>{g.naam}</option>)}
|
||||
</select>
|
||||
<input placeholder="Nieuwe subgroep" value={nieuweSub} onChange={(e) => setNieuweSub(e.target.value)} />
|
||||
<button type="button" className="btn icon-label" onClick={maakSubgroep} title="Subgroep aanmaken">＋ <span>Subgroep</span></button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
{f.doel_type === "subgroep" && (
|
||||
<div className="form-row">
|
||||
<select value={subgroepGroepFilter || ""} onChange={(e) => { setSubgroepGroepFilter(e.target.value ? Number(e.target.value) : ""); setF({ ...f, doel: "", doel_type: "subgroep" }); }}>
|
||||
<option value="">— alle groepen —</option>
|
||||
{groepen.map((g) => <option key={g.id} value={g.id}>{g.naam}</option>)}
|
||||
</select>
|
||||
<input placeholder="Nieuwe subgroep" value={nieuweSub} onChange={(e) => setNieuweSub(e.target.value)} />
|
||||
<button type="button" className="btn" onClick={maakSubgroep}>+ Subgroep aanmaken</button>
|
||||
</div>
|
||||
)}
|
||||
<div className="leden-keuze">
|
||||
<div className="muted small">Begeleiders:</div>
|
||||
<div className="chips">
|
||||
{medewerkers.map((m) => <button type="button" key={m.id} className={f.begeleiders.includes(m.id) ? "chip on" : "chip"} onClick={() => toggleBeg(m.id)}>{m.volledige_naam}{m.rol_label ? ` · ${m.rol_label}` : ""}</button>)}
|
||||
</div>
|
||||
<div className="chips compact">
|
||||
{medewerkers.map((m) => <button type="button" key={m.id} className={f.begeleiders.includes(m.id) ? "chip on" : "chip"} onClick={() => toggleBeg(m.id)} title={m.rol_label || "Begeleider"}>{m.volledige_naam}{m.rol_label ? ` · ${m.rol_label}` : ""}</button>)}
|
||||
</div>
|
||||
<div className="form-row"><input placeholder="Opmerking" value={f.opmerkingen} onChange={(e) => setF({ ...f, opmerkingen: e.target.value })} /></div>
|
||||
<div className="form-row">
|
||||
<button className="btn primary" onClick={opslaan}>Opslaan</button>
|
||||
<button className="btn" onClick={verwijderen}>Verwijderen</button>
|
||||
</div>
|
||||
<hr className="modal-hr" />
|
||||
<div className="muted small">Groep → subgroep: deel dit vak op onder {splitGroepNaam} (zelfde tijd):</div>
|
||||
<div className="chips">
|
||||
</details>
|
||||
|
||||
<div className="editor-actions">
|
||||
<button type="button" className="btn primary icon-label" onClick={opslaan} title="Opslaan">✓ <span>Opslaan</span></button>
|
||||
<button type="button" className="btn icon-label" onClick={verwijderen} title="Verwijderen">🗑 <span>Verwijderen</span></button>
|
||||
</div>
|
||||
|
||||
<details className="editor-detail split-editor" open>
|
||||
<summary>Splitsen onder {splitGroepNaam}</summary>
|
||||
<div className="chips compact">
|
||||
{splitOpties.map((s) => <button type="button" key={s.id} className={splitSubs.includes(s.id) ? "chip on" : "chip"} onClick={() => toggleSplit(s.id)}>{s.naam}</button>)}
|
||||
{splitOpties.length === 0 && <span className="muted small">Nog geen subgroepen onder deze groep.</span>}
|
||||
</div>
|
||||
<div className="form-row">
|
||||
{splitSubs.length > 0 && (
|
||||
<div className="split-preview">
|
||||
<div className="split-preview-root">{splitGroepNaam}</div>
|
||||
<div className="split-preview-children">
|
||||
{splitSubs.map((sid) => {
|
||||
const sub = splitOpties.find((s) => s.id === sid) || subs.find((s) => s.id === sid);
|
||||
return <span key={sid}>{sub ? sub.naam : "Subgroep"}</span>;
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="editor-grid">
|
||||
<input placeholder="Nieuwe subgroep" value={splitNieuw} onChange={(e) => setSplitNieuw(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); maakSplitSub(); } }} />
|
||||
<button type="button" className="btn" onClick={maakSplitSub}>+ Subgroep</button>
|
||||
</div>
|
||||
<label className="veld"><input type="checkbox" checked={verwijderOrig} onChange={(e) => setVerwijderOrig(e.target.checked)} /> oorspronkelijke blok verwijderen na opdelen</label>
|
||||
<div className="form-row">
|
||||
<button className="btn primary" disabled={splitSubs.length === 0} onClick={opdelen}>Opdelen in {splitSubs.length} subgroep(en)</button>
|
||||
<button type="button" className="btn icon-label" onClick={maakSplitSub} title="Subgroep toevoegen">＋ <span>Subgroep</span></button>
|
||||
</div>
|
||||
<label className="veld editor-check"><input type="checkbox" checked={verwijderOrig} onChange={(e) => setVerwijderOrig(e.target.checked)} /> oorspronkelijke blok verwijderen</label>
|
||||
<button type="button" className="btn primary icon-label" disabled={splitSubs.length === 0} onClick={opdelen} title="Opdelen">✂ <span>{splitSubs.length}</span></button>
|
||||
</details>
|
||||
|
||||
<hr className="modal-hr" />
|
||||
<div className="muted small">Kopiëren naar andere tijden/dagen:</div>
|
||||
<div className="chips">
|
||||
<details className="editor-detail">
|
||||
<summary>Kopiëren</summary>
|
||||
<div className="chips compact">
|
||||
{tijdsloten.map((t) => <button type="button" key={t.id} className={kopieDoelen.includes(t.id) ? "chip on" : "chip"} onClick={() => toggleKopie(t.id)}>{t.dag_label} {t.start_tijd?.slice(0, 5)} {t.naam}</button>)}
|
||||
</div>
|
||||
<div className="form-row">
|
||||
<button className="btn" disabled={kopieDoelen.length === 0} onClick={kopieer}>Kopieer naar {kopieDoelen.length} tijdslot(en)</button>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" className="btn icon-label" disabled={kopieDoelen.length === 0} onClick={kopieer} title="Kopiëren">⧉ <span>{kopieDoelen.length}</span></button>
|
||||
</details>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1706,21 +1719,33 @@ export function RoosterScherm({ mode }) {
|
|||
// Op id vergelijken, niet op naam: twee personen kunnen dezelfde naam hebben.
|
||||
const persoonAfwezig = (id, iso) => afwezig.some((a) => a.persoon === id && a.start_datum <= iso && a.eind_datum >= iso);
|
||||
const rolAfk = (id) => { const m = medewerkers.find((x) => x.id === id); return m ? (ROL_AFK[m.rol] || "") : ""; };
|
||||
const editorCtx = { activiteiten, locaties, groepen, subgroepen, leerlingen, medewerkers, tijdsloten };
|
||||
const isOpenBlok = (b) => edit && bewerkBlok && bewerkBlok.id === b.id;
|
||||
const toggleOpenBlok = (b) => setBewerkBlok((huidig) => (huidig && huidig.id === b.id ? null : b));
|
||||
const inlineBewerker = (b) => isOpenBlok(b) && (
|
||||
<BlokBewerker
|
||||
blok={b}
|
||||
ctx={editorCtx}
|
||||
onSluit={() => setBewerkBlok(null)}
|
||||
onKlaar={async () => { setBewerkBlok(null); await laadBlokken(); }}
|
||||
/>
|
||||
);
|
||||
function renderRoosterBlok(b, iso, kal) {
|
||||
const uit = uitzOp(b.id, iso);
|
||||
const vervallen = !!kal || (uit && uit.vervalt);
|
||||
return (
|
||||
<div
|
||||
className={(vervallen ? "rooster-blok vervallen" : "rooster-blok") + (edit ? " klikbaar" : "")}
|
||||
className={(vervallen ? "rooster-blok vervallen" : "rooster-blok") + (edit ? " klikbaar" : "") + (isOpenBlok(b) ? " open" : "")}
|
||||
key={b.id}
|
||||
style={{ borderLeftColor: b.activiteit_kleur }}
|
||||
onClick={edit ? () => setBewerkBlok(b) : undefined}
|
||||
onClick={edit ? () => toggleOpenBlok(b) : undefined}
|
||||
title={edit ? "Klik om te bewerken" : undefined}
|
||||
>
|
||||
<div className="rb-top">
|
||||
{edit && <span className="rb-greep" onPointerDown={(e) => startDrag(e, b)} onClick={(e) => e.stopPropagation()} title="Sleep naar ander tijdslot">⠿</span>}
|
||||
<strong>{b.activiteit_naam}</strong>
|
||||
{edit && <button className="link danger rb-x" onClick={(e) => { e.stopPropagation(); verwijder(b.id); }} title="Blok verwijderen">×</button>}
|
||||
{edit && <button type="button" className="icon-btn" onClick={(e) => { e.stopPropagation(); toggleOpenBlok(b); }} title="Bewerken">✎</button>}
|
||||
{edit && <button type="button" className="icon-btn danger rb-x" onClick={(e) => { e.stopPropagation(); verwijder(b.id); }} title="Blok verwijderen">×</button>}
|
||||
</div>
|
||||
<div className="small">Doel: {b.doel_naam} <span className="muted">({b.doel_type})</span></div>
|
||||
{b.locatie_naam && <div className="small">Locatie: {b.locatie_naam}</div>}
|
||||
|
|
@ -1730,11 +1755,38 @@ export function RoosterScherm({ mode }) {
|
|||
))}</div>
|
||||
)}
|
||||
{kal && <div className="small rb-status">Vervalt - {kal.type_label}</div>}
|
||||
{!kal && uit && uit.vervalt && <div className="small rb-status">Vervalt {uit.opmerking ? `(${uit.opmerking})` : ""}{edit && <> · <button className="link" onClick={(e) => { e.stopPropagation(); herstel(uit.id); }}>herstel</button></>}</div>}
|
||||
{!kal && uit && uit.vervalt && <div className="small rb-status">Vervalt {uit.opmerking ? `(${uit.opmerking})` : ""}{edit && <button type="button" className="icon-btn" title="Herstellen" onClick={(e) => { e.stopPropagation(); herstel(uit.id); }}>↺</button>}</div>}
|
||||
{!kal && uit && !uit.vervalt && uit.vervanger_naam && <div className="small rb-verv">Vervanger: {uit.vervanger_naam}</div>}
|
||||
{edit && !kal && !uit && (
|
||||
<button className="link danger small rb-verval no-print" onClick={(e) => { e.stopPropagation(); laatVervallen(b, iso); }}>dit vak laten vervallen</button>
|
||||
<button type="button" className="icon-btn danger rb-verval no-print" title="Dit vak laten vervallen" onClick={(e) => { e.stopPropagation(); laatVervallen(b, iso); }}>⊘</button>
|
||||
)}
|
||||
{inlineBewerker(b)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
function renderCompactBlok(b, iso, kal) {
|
||||
const uit = uitzOp(b.id, iso);
|
||||
const vervallen = !!kal || (uit && uit.vervalt);
|
||||
return (
|
||||
<div
|
||||
className={(vervallen ? "split-vak vervallen" : "split-vak") + (edit ? " klikbaar" : "") + (isOpenBlok(b) ? " open" : "")}
|
||||
key={b.id}
|
||||
style={{ borderLeftColor: b.activiteit_kleur }}
|
||||
onClick={edit ? () => toggleOpenBlok(b) : undefined}
|
||||
title={edit ? "Klik om te bewerken" : undefined}
|
||||
>
|
||||
<div className="split-vak-kop">
|
||||
{edit && <span className="rb-greep" onPointerDown={(e) => startDrag(e, b)} onClick={(e) => e.stopPropagation()} title="Sleep naar ander tijdslot">⠿</span>}
|
||||
<strong>{b.activiteit_naam}</strong>
|
||||
{edit && <button type="button" className="icon-btn" onClick={(e) => { e.stopPropagation(); toggleOpenBlok(b); }} title="Bewerken">✎</button>}
|
||||
{edit && <button type="button" className="icon-btn danger" onClick={(e) => { e.stopPropagation(); verwijder(b.id); }} title="Blok verwijderen">×</button>}
|
||||
</div>
|
||||
<div className="split-vak-meta">
|
||||
{b.locatie_naam && <span>{b.locatie_naam}</span>}
|
||||
{b.begeleiders_namen.length > 0 && <span>{b.begeleiders_namen.map((x) => x.naam).join(", ")}</span>}
|
||||
{vervallen && <span className="rb-status">Vervalt</span>}
|
||||
</div>
|
||||
{inlineBewerker(b)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1750,16 +1802,24 @@ export function RoosterScherm({ mode }) {
|
|||
const out = losse.map((b) => renderRoosterBlok(b, iso, kal));
|
||||
if (scopeType === "leerplein" && scopeId && perGroep.size > 0) {
|
||||
const leerplein = leerpleinen.find((l) => l.id === Number(scopeId));
|
||||
const kolommen = [...perGroep.entries()];
|
||||
out.push(
|
||||
<div className="blok-splitsing leerplein-splitsing" key={`leerplein-${scopeId}`}>
|
||||
<div className="split-groep">{leerplein ? leerplein.naam : "Leerplein"}</div>
|
||||
<div className="split-header">
|
||||
<span className="split-icon">⤴</span>
|
||||
<div className="split-title">
|
||||
<strong>{leerplein ? leerplein.naam : "Leerplein"}</strong>
|
||||
<span>Leerplein → groepen</span>
|
||||
</div>
|
||||
<span className="split-count">{kolommen.length}</span>
|
||||
</div>
|
||||
<div className="split-kolommen">
|
||||
{[...perGroep.entries()].map(([gid, groepBlokken]) => {
|
||||
{kolommen.map(([gid, groepBlokken]) => {
|
||||
const groep = groepen.find((g) => g.id === gid);
|
||||
return (
|
||||
<div className="split-kolom" key={gid}>
|
||||
<div className="split-kop">{groep ? groep.naam : "Groep"}</div>
|
||||
{groepBlokken.map((b) => renderRoosterBlok(b, iso, kal))}
|
||||
{groepBlokken.map((b) => renderCompactBlok(b, iso, kal))}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
|
@ -1777,14 +1837,22 @@ export function RoosterScherm({ mode }) {
|
|||
const groep = groepen.find((g) => g.id === gid);
|
||||
const heleGroep = groepBlokken.filter((b) => b.groep === gid);
|
||||
const subIds = [...new Set(groepBlokken.filter((b) => b.subgroep).map((b) => b.subgroep))];
|
||||
const kolomAantal = subIds.length + (heleGroep.length > 0 ? 1 : 0);
|
||||
out.push(
|
||||
<div className="blok-splitsing" key={`split-${gid}`}>
|
||||
<div className="split-groep">{groep ? groep.naam : "Groep"}</div>
|
||||
<div className="split-header">
|
||||
<span className="split-icon">⤴</span>
|
||||
<div className="split-title">
|
||||
<strong>{groep ? groep.naam : "Groep"}</strong>
|
||||
<span>Groep → subgroepen</span>
|
||||
</div>
|
||||
<span className="split-count">{kolomAantal}</span>
|
||||
</div>
|
||||
<div className="split-kolommen">
|
||||
{heleGroep.length > 0 && (
|
||||
<div className="split-kolom">
|
||||
<div className="split-kop">Hele groep</div>
|
||||
{heleGroep.map((b) => renderRoosterBlok(b, iso, kal))}
|
||||
{heleGroep.map((b) => renderCompactBlok(b, iso, kal))}
|
||||
</div>
|
||||
)}
|
||||
{subIds.map((sid) => {
|
||||
|
|
@ -1793,7 +1861,7 @@ export function RoosterScherm({ mode }) {
|
|||
return (
|
||||
<div className="split-kolom" key={sid}>
|
||||
<div className="split-kop">{sub ? sub.naam : "Subgroep"}</div>
|
||||
{blocks.map((b) => renderRoosterBlok(b, iso, kal))}
|
||||
{blocks.map((b) => renderCompactBlok(b, iso, kal))}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
|
@ -1829,9 +1897,9 @@ export function RoosterScherm({ mode }) {
|
|||
<span className="week-label">week van {fmtDM(maandag)}</span>
|
||||
</div>
|
||||
)}
|
||||
{edit && schooljaar && tab === "week" && <button className="btn primary" onClick={() => setToonForm((v) => !v)}>{toonForm ? "Sluiten" : "+ Blok"}</button>}
|
||||
{edit && schooljaar && tab === "week" && <button className="btn primary icon-label" title="Blok toevoegen" onClick={() => setToonForm((v) => !v)}>{toonForm ? "×" : "＋"} <span>{toonForm ? "Sluiten" : "Blok"}</span></button>}
|
||||
{printAan && schooljaar && (edit ? tab === "week" : true) && (
|
||||
<button className="btn print-knop" title="Rooster afdrukken" onClick={() => window.print()}>🖨 Afdrukken</button>
|
||||
<button className="btn print-knop icon-label" title="Rooster afdrukken" onClick={() => window.print()}>🖨 <span>Print</span></button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
|
@ -1853,16 +1921,31 @@ export function RoosterScherm({ mode }) {
|
|||
</select>
|
||||
)}
|
||||
{scopeType !== "alles" && scopeId && <span className="muted small">{zichtbareBlokken.length} blok(ken)</span>}
|
||||
{edit && groepen.length > 0 && (
|
||||
<div className="klas-strip">
|
||||
<button type="button" className={scopeType === "alles" ? "chip on" : "chip"} onClick={() => { setScopeType("alles"); setScopeId(""); }}>Alle</button>
|
||||
{groepen.map((g) => (
|
||||
<button
|
||||
type="button"
|
||||
key={g.id}
|
||||
className={scopeType === "klas" && Number(scopeId) === g.id ? "chip on" : "chip"}
|
||||
onClick={() => { setScopeType("klas"); setScopeId(String(g.id)); }}
|
||||
>
|
||||
{g.naam}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{edit && (
|
||||
<div className="tabbar no-print">
|
||||
<button className={tab === "week" ? "tab on" : "tab"} onClick={() => setTab("week")}>Weekrooster</button>
|
||||
<button className={tab === "indeling" ? "tab on" : "tab"} onClick={() => setTab("indeling")}>Indeling</button>
|
||||
<button className={tab === "conflicten" ? "tab on" : "tab"} onClick={() => setTab("conflicten")}>Conflicten</button>
|
||||
<button className={tab === "schooljaar" ? "tab on" : "tab"} onClick={() => setTab("schooljaar")}>Schooljaar</button>
|
||||
<button className={tab === "instellingen" ? "tab on" : "tab"} onClick={() => setTab("instellingen")}>Instellingen</button>
|
||||
<button className={tab === "week" ? "tab on" : "tab"} title="Weekrooster" onClick={() => setTab("week")}>▦ Week</button>
|
||||
<button className={tab === "indeling" ? "tab on" : "tab"} title="Indeling" onClick={() => setTab("indeling")}>▥ Indeling</button>
|
||||
<button className={tab === "conflicten" ? "tab on" : "tab"} title="Conflicten" onClick={() => setTab("conflicten")}>⚠ Conflicten</button>
|
||||
<button className={tab === "schooljaar" ? "tab on" : "tab"} title="Schooljaar" onClick={() => setTab("schooljaar")}>◷ Jaar</button>
|
||||
<button className={tab === "instellingen" ? "tab on" : "tab"} title="Instellingen" onClick={() => setTab("instellingen")}>⚙ Instellingen</button>
|
||||
</div>
|
||||
)}
|
||||
{edit && tab === "week" && (
|
||||
|
|
@ -1923,8 +2006,8 @@ export function RoosterScherm({ mode }) {
|
|||
{d.label} <span className="muted">{fmtDM(datum)}</span>
|
||||
{kal && <div className={`tag dag-${kal.type}`}>{kal.type_label}{kal.omschrijving ? `: ${kal.omschrijving}` : ""}</div>}
|
||||
{edit && (kal
|
||||
? <button className="link small no-print dag-actie" onClick={() => dagHerstel(kal.id)}>weer lesdag</button>
|
||||
: <button className="link danger small no-print dag-actie" onClick={() => dagVervallen(iso)}>dag laten vervallen</button>
|
||||
? <button type="button" className="icon-btn no-print dag-actie" title="Weer lesdag maken" onClick={() => dagHerstel(kal.id)}>↺</button>
|
||||
: <button type="button" className="icon-btn danger no-print dag-actie" title="Dag laten vervallen" onClick={() => dagVervallen(iso)}>⊘</button>
|
||||
)}
|
||||
</div>
|
||||
{slots.length === 0 && <div className="muted small">—</div>}
|
||||
|
|
@ -1979,15 +2062,6 @@ export function RoosterScherm({ mode }) {
|
|||
</div>
|
||||
)}
|
||||
|
||||
{edit && bewerkBlok && (
|
||||
<BlokBewerker
|
||||
blok={bewerkBlok}
|
||||
ctx={{ activiteiten, locaties, groepen, subgroepen, leerlingen, medewerkers, tijdsloten }}
|
||||
onSluit={() => setBewerkBlok(null)}
|
||||
onKlaar={async () => { setBewerkBlok(null); await laadBlokken(); }}
|
||||
/>
|
||||
)}
|
||||
|
||||
{edit && ghost && <div className="drag-ghost" style={{ left: ghost.x + 10, top: ghost.y + 10 }}>{ghost.label}</div>}
|
||||
</section>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -114,11 +114,13 @@ input[type="color"] { padding: 2px; width: 44px; min-width: 44px; height: 38px;
|
|||
.tag.dag-vrije_dag { background: #fee2e2; color: #b91c1c; }
|
||||
.tag.dag-vakantie { background: #dcfce7; color: #166534; }
|
||||
|
||||
.rooster-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 20px; }
|
||||
.rooster-grid { display: grid; grid-template-columns: repeat(5, minmax(220px, 1fr)); gap: 12px; margin-top: 20px; }
|
||||
.rooster-kolom { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px; min-height: 80px; }
|
||||
.rooster-dag { font-weight: 600; font-size: 13px; text-align: center; padding: 6px 0; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
|
||||
.rooster-dag { position: relative; font-weight: 600; font-size: 13px; text-align: center; padding: 6px 32px 6px 0; border-bottom: 1px solid var(--line); margin-bottom: 8px; min-height: 36px; }
|
||||
.rooster-blok { border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 8px; padding: 8px; margin-bottom: 8px; background: #fff; }
|
||||
.rooster-blok.open { box-shadow: 0 0 0 2px var(--brand-soft); }
|
||||
.rb-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
|
||||
.rb-top strong { min-width: 0; flex: 1; }
|
||||
.link.small { font-size: 16px; line-height: 1; padding: 0 4px; }
|
||||
@media (max-width: 900px) { .rooster-grid { grid-template-columns: 1fr; } }
|
||||
|
||||
|
|
@ -140,6 +142,10 @@ input[type="color"] { padding: 2px; width: 44px; min-width: 44px; height: 38px;
|
|||
.rb-greep { cursor: grab; color: var(--muted); font-size: 16px; padding: 0 4px; touch-action: none; user-select: none; }
|
||||
.rb-greep:active { cursor: grabbing; }
|
||||
.rb-x { margin-left: auto; }
|
||||
.icon-btn { width: 28px; height: 28px; display: inline-grid; place-items: center; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; font: inherit; line-height: 1; flex: none; }
|
||||
.icon-btn:hover { background: var(--bg); color: var(--ink); border-color: var(--line); }
|
||||
.icon-btn.danger { color: #b91c1c; }
|
||||
.icon-label { display: inline-flex; align-items: center; gap: 6px; }
|
||||
.rb-status { color: #b91c1c; font-weight: 600; }
|
||||
.rb-verv { color: #166534; font-weight: 600; }
|
||||
.rb-verval { display: inline-block; margin-top: 4px; }
|
||||
|
|
@ -147,7 +153,7 @@ input[type="color"] { padding: 2px; width: 44px; min-width: 44px; height: 38px;
|
|||
|
||||
.drag-ghost { position: fixed; z-index: 1000; pointer-events: none; background: var(--brand); color: #fff; padding: 6px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
|
||||
|
||||
.dag-actie { display: block; margin-top: 4px; font-size: 11px; }
|
||||
.dag-actie { position: absolute; right: 0; top: 3px; margin: 0; }
|
||||
.sneltoets-hint { margin: -4px 0 12px; }
|
||||
|
||||
/* --- Groepsindeling --- */
|
||||
|
|
@ -161,14 +167,46 @@ input[type="color"] { padding: 2px; width: 44px; min-width: 44px; height: 38px;
|
|||
.indeling-kop { font-weight: 600; margin-bottom: 2px; }
|
||||
@media (max-width: 700px) { .indeling-kolommen { grid-template-columns: 1fr; } }
|
||||
|
||||
.blok-splitsing { border: 1px solid var(--line); border-radius: 8px; background: #fafbff; padding: 6px; margin-bottom: 8px; }
|
||||
.split-groep { font-size: 12px; font-weight: 700; color: var(--brand); margin: 0 2px 6px; }
|
||||
.split-kolommen { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 6px; align-items: stretch; }
|
||||
.split-kolom { min-width: 0; }
|
||||
.blok-splitsing { position: relative; border: 1px solid #bfdbfe; border-radius: 8px; background: linear-gradient(180deg, #eff6ff 0, #f8fbff 42px, #fff 100%); padding: 8px; margin-bottom: 8px; }
|
||||
.split-header { display: flex; align-items: center; gap: 8px; border: 1px solid #bfdbfe; border-radius: 7px; background: #fff; padding: 6px 8px; margin-bottom: 12px; }
|
||||
.split-icon { width: 24px; height: 24px; display: inline-grid; place-items: center; border-radius: 6px; background: var(--brand); color: #fff; font-weight: 800; flex: none; }
|
||||
.split-title { display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.15; flex: 1; }
|
||||
.split-title strong { font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.split-title span { font-size: 11px; color: var(--muted); }
|
||||
.split-count { min-width: 22px; height: 22px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-size: 12px; font-weight: 800; }
|
||||
.split-groep { font-size: 12px; font-weight: 800; color: var(--brand); margin: 0 2px 7px; }
|
||||
.split-kolommen { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: 7px; align-items: start; padding-top: 12px; }
|
||||
.split-kolommen::before { content: ""; position: absolute; top: 0; left: 10%; right: 10%; border-top: 2px solid #bfdbfe; }
|
||||
.split-kolom { position: relative; min-width: 0; border-left: 1px solid var(--line); padding-left: 7px; }
|
||||
.split-kolom::before { content: ""; position: absolute; top: -12px; left: 50%; width: 2px; height: 12px; background: #bfdbfe; }
|
||||
.split-kolom:first-child { border-left: 0; padding-left: 0; }
|
||||
.split-kop { font-size: 11px; font-weight: 700; color: var(--muted); margin: 0 0 4px; }
|
||||
.split-kolom .rooster-blok { margin-bottom: 0; }
|
||||
.split-vak { position: relative; border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 6px; background: #fff; padding: 6px 6px 5px; margin-bottom: 6px; cursor: pointer; box-shadow: 0 1px 0 rgba(31,41,55,.03); }
|
||||
.split-vak.open { box-shadow: 0 0 0 2px var(--brand-soft); }
|
||||
.split-vak.vervallen { opacity: .55; }
|
||||
.split-vak-kop { display: flex; align-items: center; gap: 5px; }
|
||||
.split-vak-kop strong { min-width: 0; flex: 1; font-size: 12px; }
|
||||
.split-vak-meta { display: flex; flex-direction: column; gap: 1px; color: var(--muted); font-size: 11px; margin-top: 2px; }
|
||||
.klas-strip { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; }
|
||||
|
||||
/* --- Blok-bewerker (modal) --- */
|
||||
/* --- Blok-bewerker --- */
|
||||
.blok-editor { margin-top: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #f9fafb; cursor: default; }
|
||||
.blok-editor-kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
|
||||
.editor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 7px; margin: 7px 0; }
|
||||
.editor-grid input, .editor-grid select { width: 100%; min-width: 0; font-size: 12px; padding: 7px 8px; }
|
||||
.editor-detail { border-top: 1px dashed var(--line); padding-top: 7px; margin-top: 7px; }
|
||||
.editor-detail summary { cursor: pointer; color: var(--brand); font-size: 12px; font-weight: 700; }
|
||||
.editor-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
|
||||
.editor-check { margin: 6px 0; }
|
||||
.chips.compact { gap: 5px; margin-top: 6px; }
|
||||
.chips.compact .chip { font-size: 12px; padding: 5px 8px; }
|
||||
.split-editor { background: #f8fbff; border: 1px solid #dbeafe; border-radius: 7px; padding: 7px; }
|
||||
.split-preview { margin: 8px 0; padding: 8px; border-radius: 7px; background: #fff; border: 1px solid #dbeafe; }
|
||||
.split-preview-root { display: inline-block; padding: 5px 9px; border-radius: 6px; background: var(--brand); color: #fff; font-size: 12px; font-weight: 800; }
|
||||
.split-preview-children { position: relative; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; padding-top: 13px; }
|
||||
.split-preview-children::before { content: ""; position: absolute; top: 0; left: 12px; right: 12px; border-top: 2px solid #bfdbfe; }
|
||||
.split-preview-children span { position: relative; padding: 5px 8px; border-radius: 6px; background: var(--brand-soft); color: var(--brand); font-size: 12px; font-weight: 700; }
|
||||
.split-preview-children span::before { content: ""; position: absolute; top: -13px; left: 50%; width: 2px; height: 13px; background: #bfdbfe; }
|
||||
.modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.45); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; z-index: 900; overflow: auto; }
|
||||
.modal { background: var(--panel); border-radius: 12px; padding: 18px 20px; width: min(560px, 100%); box-shadow: 0 20px 50px rgba(0,0,0,.3); }
|
||||
.modal-kop { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
|
||||
|
|
@ -182,7 +220,7 @@ input[type="color"] { padding: 2px; width: 44px; min-width: 44px; height: 38px;
|
|||
.print-knop { margin-left: auto; background: #fff; }
|
||||
@media print {
|
||||
.sidebar, .no-print, .tabbar, .rooster-balk, .banner,
|
||||
.rb-greep, .rb-x, .rb-verval, .print-knop, .drag-ghost { display: none !important; }
|
||||
.rb-greep, .rb-x, .rb-verval, .icon-btn, .print-knop, .drag-ghost { display: none !important; }
|
||||
body { background: #fff; }
|
||||
.app { display: block; }
|
||||
.content { padding: 0; }
|
||||
|
|
|
|||
Loading…
Reference in a new issue