From baf2a4cb132bc33dfce4dcb9ed55ee51b038e304 Mon Sep 17 00:00:00 2001 From: Ramon Date: Mon, 13 Jul 2026 16:23:07 +0200 Subject: [PATCH] =?UTF-8?q?v0.2.14-beta:=20beheerpaneel=20volledig=20ge?= =?UTF-8?q?=C3=AFntegreerd=20in=20Instellingen=20(=C3=A9=C3=A9n=20overzich?= =?UTF-8?q?t)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Het beheerpaneel opende nog als los venster (adminWrap) boven op Instellingen; nu is het een tabblad ("Account"/"Beheer") binnen hetzelfde Instellingen-scherm - één modal, geen twee - adminWrap/adminModal-als-los-venster verwijderd; admin.js rendert nu in een contentblok binnen settingsModal, zonder eigen dubbele titel/sluitknop (die van Instellingen zelf dekt dat al) - Instellingen is breder geworden om ruimte te bieden aan de beheerinhoud (klassen, gebruikers, aanmaakformulieren); het accountgedeelte blijft smal en overzichtelijk via een eigen max-breedte Co-Authored-By: Claude Sonnet 5 --- public/css/teach.css | 11 ++++++--- public/index.html | 58 ++++++++++++++++++++++---------------------- public/js/admin.js | 14 +++-------- public/js/core.js | 20 ++++++++++----- 4 files changed, 54 insertions(+), 49 deletions(-) diff --git a/public/css/teach.css b/public/css/teach.css index 9215d11..b86cdef 100644 --- a/public/css/teach.css +++ b/public/css/teach.css @@ -413,7 +413,11 @@ .gcard .gn{font-weight:800; margin-top:8px; font-size:15px;} .gcard .gd{font-size:12.5px; color:var(--muted); margin-top:4px; line-height:1.35;} /* login + instellingen modals */ - #loginModal,#settingsModal{width:min(400px,92vw);} + #loginModal{width:min(400px,92vw);} + /* instellingen is breder dan het inlogscherm: het beheerpaneel (tabblad) heeft + de ruimte nodig van wat vroeger een eigen, brede modal was (#adminModal) */ + #settingsModal{width:min(760px,94vw); max-height:86vh; overflow:auto;} + #settingsAccountPanel{max-width:400px;} #loginModal input,#settingsModal input{ width:100%; border:2px solid #cdd9e8; border-radius:12px; padding:11px 12px; font:inherit; font-size:16px; outline:none; margin-bottom:10px; @@ -428,7 +432,7 @@ .guestnote{font-size:13px; color:var(--muted); margin-top:12px; line-height:1.45;} /* instellingen: neutrale kaarten per sectie (.am-reset, hergebruikt van het beheerpaneel) i.p.v. het speelse bord-uiterlijk - dit scherm is voor volwassenen */ - #settingsModal .am-h3:first-of-type{margin-top:0;} + #settingsAccountPanel .am-h3:first-of-type{margin-top:0;} #settingsModal .am-reset .lrow{margin:0;} #settingsModal .am-reset .guestnote{margin-top:2px;} .st-footer{ @@ -982,8 +986,7 @@ flex:1; min-width:0; border:2px solid #cdd9e8; border-radius:12px; padding:10px 12px; font:inherit; font-size:15px; outline:none; } -/* ---------- beheerpaneel ---------- */ -#adminModal{width:min(760px,94vw); max-height:86vh; overflow:auto;} +/* ---------- beheerpaneel (tabblad "Beheer" binnen Instellingen) ---------- */ .am-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;} .am-head h2{margin:0; font-size:20px;} .am-h3{margin:14px 0 6px; font-size:14px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px;} diff --git a/public/index.html b/public/index.html index a6447b2..c573ad3 100644 --- a/public/index.html +++ b/public/index.html @@ -103,38 +103,41 @@ -
-
-
-
+
+ +
-
-
-
-
- - +
+
+
+
-
- - + +
+
+
+
+ + +
+
+ + +
+
+ +
+
+
+ +
+
- - - -
-
-
- -
-
+
@@ -143,9 +146,6 @@
-
- -
diff --git a/public/js/admin.js b/public/js/admin.js index 44f078a..92e2ce2 100644 --- a/public/js/admin.js +++ b/public/js/admin.js @@ -2,7 +2,8 @@ Zichtbaar voor super (alles), admin (eigen school) en teacher (leerlingen). */ "use strict"; (function(){ - const wrap = document.getElementById("adminWrap"); + /* het beheerpaneel is een tabblad binnen Instellingen (settingsWrap/settingsModal), + geen los venster meer - modal is alleen nog de content-container voor render() */ const modal = document.getElementById("adminModal"); const btn = document.getElementById("btnAdmin"); let SCHOOLS = [], USERS = [], CLASSES = [], selSchool = null; @@ -53,10 +54,9 @@ if(!can("admin.access")) return; selSchool = currentUser.role==="super" ? (selSchool ?? "") : currentUser.schoolId; await reload(); - wrap.classList.add("open"); + switchSettingsTab("admin"); }); - wrap.addEventListener("click", e=>{ if(e.target===wrap) wrap.classList.remove("open"); }); - document.addEventListener("userchange", ()=>{ if(!currentUser){ wrap.classList.remove("open"); resetResults = null; } }); + document.addEventListener("userchange", ()=>{ if(!currentUser) resetResults = null; }); async function reload(){ try{ @@ -266,12 +266,6 @@ function render(){ modal.innerHTML = ""; - const head = h("div","am-head"); - head.appendChild(h("h2", null, T("beheer"))); - const close = h("button","wclose","✕"); - close.addEventListener("click", ()=>wrap.classList.remove("open")); - head.appendChild(close); - modal.appendChild(head); /* super: schoolkiezer + nieuwe school */ if(currentUser.role==="super"){ diff --git a/public/js/core.js b/public/js/core.js index a6ec1a6..fb52143 100644 --- a/public/js/core.js +++ b/public/js/core.js @@ -113,7 +113,7 @@ const I18N = { tmHint:"Sleep aan de rode schijf om de tijd in te stellen.", login:"Inloggen", loginBtn:"Inloggen", registerBtn:"Account maken", logout:"Uitloggen", settingsTitle:"Instellingen", tabLogin:"Inloggen", tabLinkCode:"Koppelcode", busy:"Bezig…", - stAccount:"Account", stPassword:"Wachtwoord", stSession:"Sessie", openAdmin:"Beheerpaneel", + stAccount:"Account", stPassword:"Wachtwoord", stSession:"Sessie", pwChanged:"Wachtwoord gewijzigd ✓", namePh:"naam", passPh:"wachtwoord", guestNote:"Zonder inloggen wordt niets bewaard. Log in met je schoolaccount om alles op de server te bewaren.", @@ -239,7 +239,7 @@ const I18N = { tmHint:"Drag the red disc to set the time.", login:"Log in", loginBtn:"Log in", registerBtn:"Create account", logout:"Log out", settingsTitle:"Settings", tabLogin:"Log in", tabLinkCode:"Link code", busy:"Please wait…", - stAccount:"Account", stPassword:"Password", stSession:"Session", openAdmin:"Admin panel", + stAccount:"Account", stPassword:"Password", stSession:"Session", pwChanged:"Password changed ✓", namePh:"name", passPh:"password", guestNote:"Without logging in nothing is saved. Log in with your school account to keep everything on the server.", @@ -376,9 +376,10 @@ const roleKey = r => r==="super" ? "roleSuper" : r==="admin" ? "roleAdmin" : r== function updateUserUI(){ document.getElementById("userLbl").textContent = currentUser ? currentUser.displayName : T("login"); document.getElementById("btnUser").classList.toggle("on", !!currentUser); + const adminTabBtn = document.getElementById("btnAdmin"); const showAdmin = can("admin.access"); - document.getElementById("stAdminLbl").style.display = showAdmin ? "" : "none"; - document.getElementById("adminBlock").style.display = showAdmin ? "flex" : "none"; + adminTabBtn.style.display = showAdmin ? "" : "none"; + if(!showAdmin && adminTabBtn.classList.contains("active")) switchSettingsTab("account"); if(currentUser){ document.getElementById("helloName").textContent = currentUser.displayName; document.getElementById("helloRole").textContent = T(roleKey(currentUser.role)); @@ -394,6 +395,14 @@ function switchLoginTab(tab){ document.querySelectorAll("#loginModal .ed-tabs button").forEach(b=>{ b.addEventListener("click", ()=>switchLoginTab(b.dataset.tab)); }); +/* instellingen-tabs: "account" vs "beheer" - alles in één overzicht i.p.v. een los venster */ +function switchSettingsTab(tab){ + document.querySelectorAll("#settingsTabs button").forEach(b=>b.classList.toggle("active", b.dataset.tab===tab)); + document.getElementById("settingsAccountPanel").style.display = tab==="account" ? "block" : "none"; + document.getElementById("settingsAdminPanel").style.display = tab==="admin" ? "block" : "none"; +} +/* het "beheer"-tabblad heeft zijn eigen klik-handler in admin.js (moet eerst data laden) */ +document.querySelector('#settingsTabs button[data-tab="account"]').addEventListener("click", ()=>switchSettingsTab("account")); async function loadSchools(){ const sel = document.getElementById("liSchool"); try{ @@ -404,6 +413,7 @@ async function loadSchools(){ } function openSettings(){ settingsMsg.textContent = ""; settingsMsg.classList.remove("ok"); + switchSettingsTab("account"); settingsWrap.classList.add("open"); } document.getElementById("btnUser").addEventListener("click", ()=>{ @@ -414,8 +424,6 @@ document.getElementById("btnUser").addEventListener("click", ()=>{ loginWrap.classList.add("open"); }); document.getElementById("btnSettingsClose").addEventListener("click", ()=>settingsWrap.classList.remove("open")); -/* Beheer wordt vanuit Instellingen geopend: dat scherm zelf dicht zodat er geen twee modals over elkaar staan */ -document.getElementById("btnAdmin").addEventListener("click", ()=>settingsWrap.classList.remove("open")); loginWrap.addEventListener("click", e=>{ if(e.target===loginWrap) loginWrap.classList.remove("open"); }); settingsWrap.addEventListener("click", e=>{ if(e.target===settingsWrap) settingsWrap.classList.remove("open"); });