diff --git a/ROADMAP.md b/ROADMAP.md index 9ace35e..15ad094 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -15,10 +15,10 @@ volgt. - [x] Vanuit de Roostermaker (tab **Indeling**) direct **subgroepen aanmaken** onder een hoofdgroep, met verantwoordelijke(n) — kolomsgewijs overzicht van subgroepen, vakken en wie verantwoordelijk is. -- [ ] **Sneltoetsen** voor veelgebruikte acties (bv. nieuw blok, kopiëren, - verwijderen, week vooruit/terug, opslaan). -- [ ] **Rol van een begeleider beter zichtbaar** in de roostermaker (bv. functie/ - rol tonen bij de begeleider in een blok en bij het toewijzen). +- [x] **Sneltoetsen** in de Roostermaker: N (nieuw blok), ←/→ (week terug/vooruit), + T (deze week), Esc (paneel/sluiten); met hint. +- [x] **Rol van een begeleider zichtbaar** in de Roostermaker: afkorting (LK/PO/KO) + bij de begeleider in een blok en de volledige rol bij het toewijzen. - [ ] **Vereenvoudigd vak/blok toevoegen** — bijvoorbeeld een **stap-voor-stap wizard** die meeschuift (activiteit → doelgroep → personeel → tijd), in plaats van één groot formulier. diff --git a/frontend/src/pages.jsx b/frontend/src/pages.jsx index 16e36d6..575dee5 100644 --- a/frontend/src/pages.jsx +++ b/frontend/src/pages.jsx @@ -14,6 +14,9 @@ const ROLLEN = [ { value: "klassenondersteuner", label: "Klassenondersteuner" }, ]; +// Korte aanduiding van een medewerkersrol (compact in de roostervakjes). +const ROL_AFK = { leerkracht: "LK", praktijkondersteuner: "PO", klassenondersteuner: "KO" }; + const WEEKDAGEN = [ { value: 0, label: "Maandag" }, { value: 1, label: "Dinsdag" }, @@ -1315,7 +1318,7 @@ function BlokBewerker({ blok, ctx, onSluit, onKlaar }) {
Begeleiders:
- {medewerkers.map((m) => )} + {medewerkers.map((m) => )}
setF({ ...f, opmerkingen: e.target.value })} />
@@ -1540,6 +1543,23 @@ export function RoosterScherm({ mode }) { return () => { window.removeEventListener("pointermove", move); window.removeEventListener("pointerup", up); }; }, []); + // Sneltoetsen (alleen in de Roostermaker). + useEffect(() => { + if (!edit) return; + function onKey(e) { + const t = e.target; + const typing = t && (t.tagName === "INPUT" || t.tagName === "SELECT" || t.tagName === "TEXTAREA" || t.isContentEditable); + if (e.key === "Escape") { setBewerkBlok(null); setToonForm(false); return; } + if (typing) return; + if (e.key === "n" || e.key === "N") { setTab("week"); setToonForm((v) => !v); } + else if (e.key === "ArrowLeft") { setMaandag((m) => plusDagen(m, -7)); } + else if (e.key === "ArrowRight") { setMaandag((m) => plusDagen(m, 7)); } + else if (e.key === "t" || e.key === "T") { setMaandag(maandagVan(new Date())); } + } + window.addEventListener("keydown", onKey); + return () => window.removeEventListener("keydown", onKey); + }, [edit]); + function startDrag(e, blok) { e.preventDefault(); dragRef.current = blok; @@ -1581,6 +1601,7 @@ export function RoosterScherm({ mode }) { const uitzOp = (blokId, iso) => uitzonderingen.find((u) => u.roosterblok === blokId && u.datum === iso); // 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] || "") : ""; }; return (
@@ -1642,6 +1663,9 @@ export function RoosterScherm({ mode }) { )} + {edit && tab === "week" && ( +

Sneltoetsen: N nieuw blok · / week · T deze week · Esc sluiten

+ )} {edit && schooljaar && tab === "week" && toonForm && (
@@ -1673,7 +1697,7 @@ export function RoosterScherm({ mode }) {
Begeleiders:
- {medewerkers.map((m) => )} + {medewerkers.map((m) => )} {medewerkers.length === 0 && Nog geen medewerkers.}
@@ -1731,7 +1755,7 @@ export function RoosterScherm({ mode }) { {b.locatie_naam &&
📍 {b.locatie_naam}
} {b.begeleiders_namen.length > 0 && (
👤 {b.begeleiders_namen.map((x, idx) => ( - {idx > 0 ? ", " : ""}{x.naam} + {idx > 0 ? ", " : ""}{x.naam}{rolAfk(x.id) ? ` (${rolAfk(x.id)})` : ""} ))}
)} {kal &&
Vervalt — {kal.type_label}
} diff --git a/frontend/src/styles.css b/frontend/src/styles.css index 0fc660a..10abaf0 100644 --- a/frontend/src/styles.css +++ b/frontend/src/styles.css @@ -148,6 +148,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; } +.sneltoets-hint { margin: -4px 0 12px; } /* --- Groepsindeling --- */ .indeling { margin-top: 12px; }