bes-r/roosterwijs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

filterbalk strakker + rooster weergaveschakelaar (kolommen/dagen onder elkaar)

Browse source
This commit is contained in:
bes-r 2026-06-18 23:14:32 +02:00
parent 8361484749
commit 2600db7f69
2 changed files with 19 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
frontend/src/pages.jsx
View file

@ -2055,6 +2055,8 @@ export function RoosterScherm({ mode }) {
const [hoverSlot, setHoverSlot] = useState(null); const [hoverSlot, setHoverSlot] = useState(null);
const [conflictOpen, setConflictOpen] = useState(false); const [conflictOpen, setConflictOpen] = useState(false);
const [genOpen, setGenOpen] = useState(false); const [genOpen, setGenOpen] = useState(false);
const [weergave, setWeergaveState] = useState(() => { try { return localStorage.getItem("rw_weergave") || "kolom"; } catch { return "kolom"; } });
const setWeergave = (v) => { setWeergaveState(v); try { localStorage.setItem("rw_weergave", v); } catch { /* niet beschikbaar */ } };
useEffect(() => { useEffect(() => {
listResource("schooljaren").then((j) => { setSchooljaren(j); if (j.length) setSchooljaar((s) => s || String(j[0].id)); }).catch((e) => setError(e.message)); listResource("schooljaren").then((j) => { setSchooljaren(j); if (j.length) setSchooljaar((s) => s || String(j[0].id)); }).catch((e) => setError(e.message));
@ -2471,6 +2473,9 @@ export function RoosterScherm({ mode }) {
</div> </div>
)} )}
{edit && schooljaar && tab === "week" && <button className="btn primary icon-label" title="Vak toevoegen" onClick={toonForm ? sluitNieuwBlok : openNieuwBlok}>{toonForm ? "×" : "＋"} <span>{toonForm ? "Sluiten" : "Vak"}</span></button>} {edit && schooljaar && tab === "week" && <button className="btn primary icon-label" title="Vak toevoegen" onClick={toonForm ? sluitNieuwBlok : openNieuwBlok}>{toonForm ? "×" : "＋"} <span>{toonForm ? "Sluiten" : "Vak"}</span></button>}
{schooljaar && (edit ? tab === "week" : true) && (
<button className="btn icon-label weergave-knop" title={weergave === "kolom" ? "Toon dagen onder elkaar" : "Toon dagen als kolommen"} onClick={() => setWeergave(weergave === "kolom" ? "lijst" : "kolom")}>{weergave === "kolom" ? "☰" : "▦"} <span>{weergave === "kolom" ? "Dagen onder elkaar" : "Kolommen"}</span></button>
)}
{printAan && schooljaar && (edit ? tab === "week" : true) && ( {printAan && schooljaar && (edit ? tab === "week" : true) && (
<button className="btn print-knop icon-label" title="Rooster afdrukken" onClick={() => window.print()}>🖨 <span>Print</span></button> <button className="btn print-knop icon-label" title="Rooster afdrukken" onClick={() => window.print()}>🖨 <span>Print</span></button>
)} )}
@ -2660,7 +2665,7 @@ export function RoosterScherm({ mode }) {
)} )}
{schooljaar && tab === "week" && ( {schooljaar && tab === "week" && (
<div className="rooster-grid"> <div className={weergave === "lijst" ? "rooster-grid lijst" : "rooster-grid"}>
{WEEKDAGEN.map((d, i) => { {WEEKDAGEN.map((d, i) => {
const datum = weekDatums[i]; const datum = weekDatums[i];
const iso = fmtISO(datum); const iso = fmtISO(datum);

20
frontend/src/styles.css
View file

@ -139,7 +139,12 @@ input[type="color"] { padding: 2px; width: 44px; min-width: 44px; height: 38px;
.tag.dag-vakantie { background: #dcfce7; color: #166534; } .tag.dag-vakantie { background: #dcfce7; color: #166534; }
.rooster-scherm { width: 100%; } .rooster-scherm { width: 100%; }
.rooster-grid { display: grid; grid-template-columns: repeat(5, minmax(210px, 1fr)); gap: 10px; margin-top: 18px; width: 100%; } .rooster-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: 18px; width: 100%; }
/* "Dagen onder elkaar": elke dag een volledige band, tijdvakken naast elkaar; de week scrollt verticaal mee. */
.rooster-grid.lijst { display: flex; flex-direction: column; gap: 12px; }
.rooster-grid.lijst .rooster-kolom { display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; }
.rooster-grid.lijst .rooster-dag { flex: 0 0 100%; text-align: left; padding-right: 32px; margin-bottom: 4px; }
.rooster-grid.lijst .slot-cel { flex: 1 1 210px; max-width: 320px; margin-bottom: 0; }
.rooster-kolom { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px; min-height: 80px; } .rooster-kolom { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px; min-height: 80px; }
.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-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 { border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 8px; padding: 8px; margin-bottom: 8px; background: #fff; }
@ -215,7 +220,6 @@ input[type="color"] { padding: 2px; width: 44px; min-width: 44px; height: 38px;
.split-vak-kop strong { min-width: 0; flex: 1; font-size: 12px; } .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; } .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: 1 1 auto; min-width: 0; } .klas-strip { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; min-width: 0; }
.klas-strip .chip { white-space: nowrap; flex: 0 0 auto; }
/* --- Blok-bewerker --- */ /* --- Blok-bewerker --- */
.blok-editor { margin-top: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #f9fafb; cursor: default; } .blok-editor { margin-top: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #f9fafb; cursor: default; }
@ -271,12 +275,14 @@ input[type="color"] { padding: 2px; width: 44px; min-width: 44px; height: 38px;
.modal-hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0 12px; } .modal-hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0 12px; }
.rooster-blok.klikbaar { cursor: pointer; } .rooster-blok.klikbaar { cursor: pointer; }
.rooster-blok.klikbaar:hover { box-shadow: 0 0 0 2px var(--brand-soft); } .rooster-blok.klikbaar:hover { box-shadow: 0 0 0 2px var(--brand-soft); }
.scope-balk { margin-top: -6px; flex-direction: column; align-items: stretch; gap: 8px; } .scope-balk { margin-top: -6px; flex-direction: column; align-items: stretch; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.scope-rij { display: flex; align-items: baseline; gap: 8px; } .scope-rij { display: flex; align-items: center; gap: 10px; }
.scope-label { color: var(--muted); font-size: 14px; flex: 0 0 auto; min-width: 88px; padding-top: 4px; } .scope-label { color: var(--muted); font-size: 13px; font-weight: 600; flex: 0 0 auto; width: 104px; text-align: right; white-space: nowrap; }
.scope-persoon { flex: 0 0 auto; max-width: 280px; } .klas-strip .chip { white-space: nowrap; flex: 0 0 auto; min-width: 62px; display: inline-flex; align-items: center; justify-content: center; min-height: 34px; }
.klas-strip .chip.chip-plein { min-width: 96px; }
.scope-persoon { flex: 0 0 auto; max-width: 300px; min-height: 34px; }
.scope-persoon.on { border-color: var(--brand); color: var(--brand); font-weight: 600; } .scope-persoon.on { border-color: var(--brand); color: var(--brand); font-weight: 600; }
.scope-aantal { flex: 0 0 auto; white-space: nowrap; align-self: center; } .scope-aantal { flex: 0 0 auto; white-space: nowrap; }
/* --- Afdrukken --- */ /* --- Afdrukken --- */
.print-knop { margin-left: auto; background: #fff; } .print-knop { margin-left: auto; background: #fff; }