clean initial commit
This commit is contained in:
Simon
@@ -0,0 +1,601 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>IFB · Admin</title>
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||
<style>
|
||||
:root {
|
||||
--blue: #2563eb; --blue-d: #1d4ed8; --blue-50: #eff6ff;
|
||||
--slate-50: #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0;
|
||||
--slate-400: #94a3b8; --slate-500: #64748b; --slate-600: #475569; --slate-900: #0f172a;
|
||||
--green: #16a34a; --red: #dc2626; --amber: #d97706;
|
||||
--shadow: 0 1px 3px rgba(0,0,0,.07), 0 4px 12px rgba(0,0,0,.04);
|
||||
--shadow-lg: 0 4px 20px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.06);
|
||||
--r: 12px; --r-sm: 8px;
|
||||
}
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { font-family: 'Inter', -apple-system, sans-serif; background: var(--slate-50); color: var(--slate-900); min-height: 100vh; display: flex; flex-direction: column; }
|
||||
|
||||
header { background: #fff; border-bottom: 1px solid var(--slate-200); padding: 0 28px; height: 58px; display: flex; align-items: center; gap: 14px; position: sticky; top: 0; z-index: 100; }
|
||||
.brand { display: flex; flex-direction: column; }
|
||||
.brand-school { font-size: 10px; color: var(--slate-400); font-weight: 600; letter-spacing: .6px; text-transform: uppercase; }
|
||||
.brand-class { font-size: 20px; font-weight: 800; color: var(--blue); letter-spacing: -1px; line-height: 1.1; }
|
||||
.h-spacer { flex: 1; }
|
||||
.back-link { font-size: 13px; color: var(--slate-500); text-decoration: none; font-weight: 500; padding: 6px 12px; border-radius: var(--r-sm); border: 1.5px solid var(--slate-200); }
|
||||
.back-link:hover { background: var(--slate-100); }
|
||||
.admin-badge { background: #fef3c7; color: #92400e; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 99px; border: 1px solid #fde68a; }
|
||||
|
||||
.page-title { padding: 24px 28px 0; }
|
||||
.page-title h1 { font-size: 22px; font-weight: 800; }
|
||||
.page-title p { font-size: 13px; color: var(--slate-500); margin-top: 4px; }
|
||||
|
||||
/* TABS */
|
||||
.tabs { display: flex; gap: 4px; padding: 16px 28px 0; border-bottom: 1px solid var(--slate-200); background: var(--slate-50); position: sticky; top: 58px; z-index: 90; }
|
||||
.tab { padding: 8px 16px; font-size: 13px; font-weight: 600; border: none; background: none; cursor: pointer; color: var(--slate-500); border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: inherit; border-radius: var(--r-sm) var(--r-sm) 0 0; transition: color .15s; }
|
||||
.tab:hover { color: var(--blue); background: var(--slate-100); }
|
||||
.tab.active { color: var(--blue); border-bottom-color: var(--blue); }
|
||||
.tab-badge { background: var(--red); color: #fff; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 99px; margin-left: 5px; }
|
||||
|
||||
.content { padding: 24px 28px; flex: 1; }
|
||||
|
||||
/* SECTION */
|
||||
.section { display: none; }
|
||||
.section.active { display: block; }
|
||||
|
||||
/* FILTER BAR */
|
||||
.filter-bar { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
|
||||
.filter-bar input, .filter-bar select { padding: 7px 12px; border: 1.5px solid var(--slate-200); border-radius: var(--r-sm); font-size: 13px; font-family: inherit; outline: none; background: #fff; }
|
||||
.filter-bar input:focus, .filter-bar select:focus { border-color: var(--blue); }
|
||||
.filter-bar input { flex: 1; min-width: 180px; }
|
||||
.filter-count { font-size: 12px; color: var(--slate-400); font-weight: 500; margin-left: auto; }
|
||||
|
||||
/* TABLE */
|
||||
.tbl-wrap { overflow-x: auto; border-radius: var(--r); border: 1px solid var(--slate-200); background: #fff; }
|
||||
table { width: 100%; border-collapse: collapse; font-size: 13px; }
|
||||
thead th { background: var(--slate-50); padding: 10px 14px; text-align: left; font-size: 11px; font-weight: 700; color: var(--slate-500); letter-spacing: .4px; text-transform: uppercase; border-bottom: 1px solid var(--slate-200); white-space: nowrap; }
|
||||
tbody tr { border-bottom: 1px solid var(--slate-100); transition: background .1s; }
|
||||
tbody tr:last-child { border-bottom: none; }
|
||||
tbody tr:hover { background: var(--slate-50); }
|
||||
tbody td { padding: 10px 14px; vertical-align: middle; }
|
||||
.td-actions { display: flex; gap: 6px; flex-wrap: wrap; }
|
||||
|
||||
/* BADGES */
|
||||
.badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
|
||||
.badge-green { background: #dcfce7; color: #166534; }
|
||||
.badge-red { background: #fee2e2; color: #991b1b; }
|
||||
.badge-orange { background: #fef3c7; color: #92400e; }
|
||||
.badge-blue { background: #dbeafe; color: #1d4ed8; }
|
||||
.badge-gray { background: var(--slate-100); color: var(--slate-500); }
|
||||
.badge-purple { background: #f3e8ff; color: #6b21a8; }
|
||||
|
||||
/* BUTTONS */
|
||||
.btn { font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: var(--r-sm); border: none; cursor: pointer; font-family: inherit; white-space: nowrap; transition: opacity .15s; }
|
||||
.btn:hover { opacity: .85; }
|
||||
.btn-green { background: #dcfce7; color: #166534; }
|
||||
.btn-red { background: #fee2e2; color: #991b1b; }
|
||||
.btn-orange { background: #fef3c7; color: #92400e; }
|
||||
.btn-blue { background: var(--blue-50); color: var(--blue); }
|
||||
.btn-gray { background: var(--slate-100); color: var(--slate-600); }
|
||||
|
||||
/* STATS ROW */
|
||||
.stats-row { display: flex; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
|
||||
.stat-card { background: #fff; border: 1px solid var(--slate-200); border-radius: var(--r); padding: 14px 18px; flex: 1; min-width: 120px; }
|
||||
.stat-val { font-size: 24px; font-weight: 800; color: var(--blue); }
|
||||
.stat-label { font-size: 12px; color: var(--slate-500); margin-top: 2px; }
|
||||
|
||||
/* TICKET */
|
||||
.ticket-msg { font-size: 12px; color: var(--slate-500); max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
|
||||
/* LOG */
|
||||
.log-action { font-family: monospace; font-size: 12px; background: var(--slate-100); padding: 2px 6px; border-radius: 4px; }
|
||||
.log-details { font-size: 11px; color: var(--slate-400); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
|
||||
/* EMPTY */
|
||||
.empty { text-align: center; color: var(--slate-300); font-size: 13px; padding: 32px; font-weight: 500; }
|
||||
|
||||
/* TOAST */
|
||||
#toasts { position: fixed; bottom: 24px; right: 24px; z-index: 400; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
|
||||
.toast { background: #1e293b; color: #fff; font-size: 13px; font-weight: 500; padding: 10px 16px; border-radius: var(--r-sm); box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; pointer-events: none; max-width: 280px; }
|
||||
.toast.show { opacity: 1; transform: none; }
|
||||
.toast.success { background: #166534; }
|
||||
.toast.error { background: #991b1b; }
|
||||
|
||||
/* CONFIRM MODAL */
|
||||
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 300; display: flex; align-items: center; justify-content: center; padding: 16px; }
|
||||
.modal { background: #fff; border-radius: var(--r); padding: 24px; width: 100%; max-width: 380px; box-shadow: var(--shadow-lg); }
|
||||
.modal h3 { font-size: 16px; font-weight: 700; margin-bottom: 10px; }
|
||||
.modal p { font-size: 13px; color: var(--slate-600); margin-bottom: 18px; }
|
||||
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; }
|
||||
.btn-cancel { padding: 8px 16px; border: 1.5px solid var(--slate-200); border-radius: var(--r-sm); background: none; cursor: pointer; font-size: 13px; font-family: inherit; color: var(--slate-600); }
|
||||
.btn-confirm { padding: 8px 16px; background: var(--red); color: #fff; border: none; border-radius: var(--r-sm); font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; }
|
||||
|
||||
/* TICKET DETAIL */
|
||||
.ticket-detail { background: var(--slate-50); border: 1px solid var(--slate-200); border-radius: var(--r-sm); padding: 12px 14px; margin-top: 8px; font-size: 13px; white-space: pre-wrap; word-break: break-word; max-height: 200px; overflow-y: auto; }
|
||||
|
||||
/* Icons */
|
||||
.lucide { display: inline-block; vertical-align: -0.125em; flex-shrink: 0; width: 1em; height: 1em; stroke-width: 2; }
|
||||
.tab .lucide { width: 14px; height: 14px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<div class="brand">
|
||||
<div class="brand-school">IFB-Berufsfachschule Rosenheim</div>
|
||||
<div class="brand-class">INFO1</div>
|
||||
</div>
|
||||
<div class="h-spacer"></div>
|
||||
<span class="admin-badge">Admin-Panel</span>
|
||||
<a href="/" class="back-link">← Dashboard</a>
|
||||
</header>
|
||||
|
||||
<div class="page-title">
|
||||
<h1>Admin-Dashboard</h1>
|
||||
<p id="admin-username-line">Eingeloggt als …</p>
|
||||
</div>
|
||||
|
||||
<div class="tabs">
|
||||
<button class="tab active" onclick="switchTab('users')"><i data-lucide="users" aria-hidden="true"></i> Benutzer <span id="tab-badge-users" class="tab-badge" style="display:none"></span></button>
|
||||
<button class="tab" onclick="switchTab('pending')"><i data-lucide="clock" aria-hidden="true"></i> Ausstehend <span id="tab-badge-pending" class="tab-badge" style="display:none"></span></button>
|
||||
<button class="tab" onclick="switchTab('tickets')"><i data-lucide="life-buoy" aria-hidden="true"></i> Tickets <span id="tab-badge-tickets" class="tab-badge" style="display:none"></span></button>
|
||||
<button class="tab" onclick="switchTab('usage')"><i data-lucide="bar-chart-2" aria-hidden="true"></i> Datennutzung</button>
|
||||
<button class="tab" onclick="switchTab('logs')"><i data-lucide="clipboard" aria-hidden="true"></i> Aktionslog</button>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
|
||||
<!-- USERS TAB -->
|
||||
<div class="section active" id="section-users">
|
||||
<div class="stats-row" id="stats-row"></div>
|
||||
<div class="filter-bar">
|
||||
<input type="search" id="user-search" placeholder="Suche nach Benutzername / E-Mail …" oninput="filterUsers()">
|
||||
<select id="user-role-filter" onchange="filterUsers()">
|
||||
<option value="">Alle Rollen</option>
|
||||
<option value="student">Student</option>
|
||||
<option value="teacher">Lehrer</option>
|
||||
<option value="admin">Admin</option>
|
||||
</select>
|
||||
<select id="user-status-filter" onchange="filterUsers()">
|
||||
<option value="">Alle Status</option>
|
||||
<option value="active">Aktiv</option>
|
||||
<option value="pending">Ausstehend</option>
|
||||
<option value="banned">Gesperrt</option>
|
||||
<option value="rejected">Abgelehnt</option>
|
||||
</select>
|
||||
<span class="filter-count" id="user-count"></span>
|
||||
</div>
|
||||
<div class="tbl-wrap">
|
||||
<table>
|
||||
<thead><tr>
|
||||
<th>ID</th><th>Benutzername</th><th>E-Mail</th><th>Rolle</th><th>Status</th><th>Registriert</th><th>Aktionen</th>
|
||||
</tr></thead>
|
||||
<tbody id="users-tbody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PENDING TAB -->
|
||||
<div class="section" id="section-pending">
|
||||
<p style="font-size:13px;color:var(--slate-500);margin-bottom:16px">Lehrerkkonten warten auf Genehmigung.</p>
|
||||
<div class="tbl-wrap">
|
||||
<table>
|
||||
<thead><tr>
|
||||
<th>ID</th><th>Benutzername</th><th>E-Mail</th><th>Registriert</th><th>Aktionen</th>
|
||||
</tr></thead>
|
||||
<tbody id="pending-tbody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TICKETS TAB -->
|
||||
<div class="section" id="section-tickets">
|
||||
<div class="filter-bar">
|
||||
<select id="ticket-status-filter" onchange="filterTickets()">
|
||||
<option value="">Alle Status</option>
|
||||
<option value="open">Offen</option>
|
||||
<option value="in_progress">In Bearbeitung</option>
|
||||
<option value="closed">Geschlossen</option>
|
||||
</select>
|
||||
<span class="filter-count" id="ticket-count"></span>
|
||||
</div>
|
||||
<div class="tbl-wrap">
|
||||
<table>
|
||||
<thead><tr>
|
||||
<th>ID</th><th>Von</th><th>Betreff</th><th>Status</th><th>Erstellt</th><th>Aktionen</th>
|
||||
</tr></thead>
|
||||
<tbody id="tickets-tbody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- USAGE TAB -->
|
||||
<div class="section" id="section-usage">
|
||||
<div class="tbl-wrap">
|
||||
<table>
|
||||
<thead><tr>
|
||||
<th>Benutzername</th><th>Rolle</th><th>Stundenplan</th><th>Hausaufgaben</th><th>Noten</th><th>Fehlzeiten</th><th>Todos</th><th>Countdowns</th><th>Links</th><th>Tickets</th>
|
||||
</tr></thead>
|
||||
<tbody id="usage-tbody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- LOGS TAB -->
|
||||
<div class="section" id="section-logs">
|
||||
<div class="tbl-wrap">
|
||||
<table>
|
||||
<thead><tr>
|
||||
<th>Zeit</th><th>Admin</th><th>Aktion</th><th>Ziel-ID</th><th>Details</th>
|
||||
</tr></thead>
|
||||
<tbody id="logs-tbody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- CONFIRM MODAL -->
|
||||
<div class="overlay" id="confirm-overlay" style="display:none">
|
||||
<div class="modal">
|
||||
<h3 id="confirm-title">Bestätigung</h3>
|
||||
<p id="confirm-msg"></p>
|
||||
<div class="modal-actions">
|
||||
<button class="btn-cancel" onclick="closeConfirm()">Abbrechen</button>
|
||||
<button class="btn-confirm" id="confirm-ok">Bestätigen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TICKET DETAIL MODAL -->
|
||||
<div class="overlay" id="ticket-overlay" style="display:none" onclick="if(event.target===this)closeTicket()">
|
||||
<div class="modal" style="max-width:540px">
|
||||
<h3 id="ticket-modal-title" style="word-break:break-word"></h3>
|
||||
<p id="ticket-modal-meta" style="font-size:12px;color:var(--slate-500);margin-bottom:8px"></p>
|
||||
<div id="ticket-modal-thread" style="display:flex;flex-direction:column;gap:8px;max-height:320px;overflow-y:auto;padding-right:2px;margin-bottom:10px"></div>
|
||||
<div id="ticket-modal-reply-area" style="display:flex;gap:8px;margin-bottom:4px">
|
||||
<textarea id="ticket-modal-reply" placeholder="Als Admin antworten…" rows="2" maxlength="5000"
|
||||
style="flex:1;border:1.5px solid var(--slate-200);border-radius:var(--r-sm);padding:8px 10px;font-size:13px;font-family:inherit;resize:none;outline:none"></textarea>
|
||||
<button class="btn btn-blue" style="align-self:flex-end;padding:7px 14px" onclick="sendAdminReply()">Senden</button>
|
||||
</div>
|
||||
<div class="modal-actions" style="margin-top:8px">
|
||||
<button class="btn-cancel" onclick="closeTicket()">Schließen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="toasts"></div>
|
||||
|
||||
<script>
|
||||
function esc(s){ return String(s??'').replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"'); }
|
||||
|
||||
function toast(msg, type='success'){
|
||||
const el=document.createElement('div');
|
||||
el.className=`toast ${type}`; el.textContent=msg;
|
||||
document.getElementById('toasts').appendChild(el);
|
||||
requestAnimationFrame(()=>requestAnimationFrame(()=>el.classList.add('show')));
|
||||
setTimeout(()=>{ el.classList.remove('show'); setTimeout(()=>el.remove(),300); },3200);
|
||||
}
|
||||
|
||||
async function api(method, path, body){
|
||||
const r=await fetch('/api/'+path,{method,headers:{'Content-Type':'application/json'},body:body?JSON.stringify(body):undefined});
|
||||
if(!r.ok){ const d=await r.json().catch(()=>({})); throw new Error(d.error||r.status); }
|
||||
return r.json();
|
||||
}
|
||||
|
||||
// ── AUTH GUARD ─────────────────────────────────────────────────
|
||||
async function authGuard(){
|
||||
const r = await fetch('/api/me');
|
||||
if(!r.ok){ location.href='/login'; return false; }
|
||||
const d = await r.json();
|
||||
if(d.role !== 'admin'){ location.href='/'; return false; }
|
||||
document.getElementById('admin-username-line').textContent = `Eingeloggt als ${d.username}`;
|
||||
return true;
|
||||
}
|
||||
|
||||
// ── TABS ───────────────────────────────────────────────────────
|
||||
let currentTab = 'users';
|
||||
function switchTab(name){
|
||||
document.querySelectorAll('.tab').forEach((t,i)=>{
|
||||
const tabs=['users','pending','tickets','usage','logs'];
|
||||
t.classList.toggle('active', tabs[i]===name);
|
||||
});
|
||||
document.querySelectorAll('.section').forEach(s=>s.classList.remove('active'));
|
||||
document.getElementById('section-'+name).classList.add('active');
|
||||
currentTab=name;
|
||||
}
|
||||
|
||||
// ── DATA STORES ────────────────────────────────────────────────
|
||||
let allUsers=[], allTickets=[], allLogs=[], allUsage=[];
|
||||
|
||||
// ── USERS ──────────────────────────────────────────────────────
|
||||
async function loadUsers(){
|
||||
allUsers = await api('GET','admin/users');
|
||||
renderStats();
|
||||
renderUsers();
|
||||
renderPending();
|
||||
}
|
||||
|
||||
function renderStats(){
|
||||
const total=allUsers.length;
|
||||
const active=allUsers.filter(u=>u.status==='active').length;
|
||||
const pending=allUsers.filter(u=>u.status==='pending').length;
|
||||
const banned=allUsers.filter(u=>u.status==='banned').length;
|
||||
document.getElementById('stats-row').innerHTML=`
|
||||
<div class="stat-card"><div class="stat-val">${total}</div><div class="stat-label">Benutzer gesamt</div></div>
|
||||
<div class="stat-card"><div class="stat-val" style="color:var(--green)">${active}</div><div class="stat-label">Aktiv</div></div>
|
||||
<div class="stat-card"><div class="stat-val" style="color:var(--amber)">${pending}</div><div class="stat-label">Ausstehend</div></div>
|
||||
<div class="stat-card"><div class="stat-val" style="color:var(--red)">${banned}</div><div class="stat-label">Gesperrt</div></div>
|
||||
`;
|
||||
const pb=document.getElementById('tab-badge-pending');
|
||||
pb.textContent=pending; pb.style.display=pending?'':'none';
|
||||
}
|
||||
|
||||
function filterUsers(){
|
||||
const q=document.getElementById('user-search').value.toLowerCase();
|
||||
const role=document.getElementById('user-role-filter').value;
|
||||
const status=document.getElementById('user-status-filter').value;
|
||||
const filtered=allUsers.filter(u=>
|
||||
(!q || u.username.toLowerCase().includes(q) || u.email.toLowerCase().includes(q)) &&
|
||||
(!role || u.role===role) &&
|
||||
(!status || u.status===status)
|
||||
);
|
||||
document.getElementById('user-count').textContent=`${filtered.length} von ${allUsers.length}`;
|
||||
renderUsersRows(filtered, document.getElementById('users-tbody'));
|
||||
}
|
||||
|
||||
function renderUsers(){
|
||||
filterUsers();
|
||||
}
|
||||
|
||||
function renderUsersRows(users, tbody){
|
||||
if(!users.length){ tbody.innerHTML=`<tr><td colspan="7" class="empty">Keine Benutzer gefunden</td></tr>`; return; }
|
||||
tbody.innerHTML=users.map(u=>`
|
||||
<tr>
|
||||
<td style="color:var(--slate-400);font-size:12px">${u.id}</td>
|
||||
<td><strong>${esc(u.username)}</strong></td>
|
||||
<td style="font-size:12px;color:var(--slate-500)">${esc(u.email)}</td>
|
||||
<td>${roleBadge(u.role)}</td>
|
||||
<td>${statusBadge(u.status)}</td>
|
||||
<td style="font-size:12px;color:var(--slate-400)">${fmtDate(u.created_at)}</td>
|
||||
<td><div class="td-actions">${userActions(u)}</div></td>
|
||||
</tr>`).join('');
|
||||
}
|
||||
|
||||
function roleBadge(r){
|
||||
const m={admin:'badge-purple',teacher:'badge-blue',student:'badge-green'};
|
||||
return `<span class="badge ${m[r]||'badge-gray'}">${esc(r)}</span>`;
|
||||
}
|
||||
function statusBadge(s){
|
||||
const m={active:'badge-green',pending:'badge-orange',banned:'badge-red',rejected:'badge-gray'};
|
||||
return `<span class="badge ${m[s]||'badge-gray'}">${esc(s)}</span>`;
|
||||
}
|
||||
|
||||
function userActions(u){
|
||||
const parts=[];
|
||||
if(u.status==='active') parts.push(`<button class="btn btn-red" onclick="banUser(${u.id},'${esc(u.username)}')">Sperren</button>`);
|
||||
if(u.status==='banned') parts.push(`<button class="btn btn-green" onclick="unbanUser(${u.id},'${esc(u.username)}')">Entsperren</button>`);
|
||||
if(u.role!=='admin') parts.push(`<button class="btn btn-gray" onclick="deleteUser(${u.id},'${esc(u.username)}')">Löschen</button>`);
|
||||
return parts.join('');
|
||||
}
|
||||
|
||||
function renderPending(){
|
||||
const pending=allUsers.filter(u=>u.status==='pending'&&u.role==='teacher');
|
||||
const tbody=document.getElementById('pending-tbody');
|
||||
if(!pending.length){ tbody.innerHTML=`<tr><td colspan="5" class="empty">Keine ausstehenden Anfragen</td></tr>`; return; }
|
||||
tbody.innerHTML=pending.map(u=>`
|
||||
<tr>
|
||||
<td style="color:var(--slate-400);font-size:12px">${u.id}</td>
|
||||
<td><strong>${esc(u.username)}</strong></td>
|
||||
<td style="font-size:12px;color:var(--slate-500)">${esc(u.email)}</td>
|
||||
<td style="font-size:12px;color:var(--slate-400)">${fmtDate(u.created_at)}</td>
|
||||
<td><div class="td-actions">
|
||||
<button class="btn btn-green" onclick="approveTeacher(${u.id},'${esc(u.username)}')">Genehmigen</button>
|
||||
<button class="btn btn-red" onclick="rejectTeacher(${u.id},'${esc(u.username)}')">Ablehnen</button>
|
||||
</div></td>
|
||||
</tr>`).join('');
|
||||
}
|
||||
|
||||
async function banUser(id, name){
|
||||
confirm2(`Benutzer "${name}" sperren?`, `Der Benutzer kann sich bis zur Entsperrung nicht anmelden.`, async()=>{
|
||||
await api('PATCH',`admin/users/${id}`,{status:'banned'});
|
||||
toast(`${name} gesperrt`,'success'); loadUsers();
|
||||
});
|
||||
}
|
||||
async function unbanUser(id, name){
|
||||
confirm2(`Benutzer "${name}" entsperren?`, `Der Benutzer kann sich wieder anmelden.`, async()=>{
|
||||
await api('PATCH',`admin/users/${id}`,{status:'active'});
|
||||
toast(`${name} entsperrt`,'success'); loadUsers();
|
||||
});
|
||||
}
|
||||
async function deleteUser(id, name){
|
||||
confirm2(`Benutzer "${name}" löschen?`, `Alle Daten dieses Benutzers werden unwiderruflich gelöscht.`, async()=>{
|
||||
await api('DELETE',`admin/users/${id}`);
|
||||
toast(`${name} gelöscht`,'success'); loadUsers();
|
||||
});
|
||||
}
|
||||
async function approveTeacher(id, name){
|
||||
await api('POST',`admin/teachers/${id}/approve`);
|
||||
toast(`${name} genehmigt`,'success'); loadUsers();
|
||||
}
|
||||
async function rejectTeacher(id, name){
|
||||
confirm2(`Lehrer "${name}" ablehnen?`, `Die Registrierung wird abgelehnt.`, async()=>{
|
||||
await api('POST',`admin/teachers/${id}/reject`);
|
||||
toast(`${name} abgelehnt`,'success'); loadUsers();
|
||||
});
|
||||
}
|
||||
|
||||
// ── TICKETS ────────────────────────────────────────────────────
|
||||
async function loadTickets(){
|
||||
allTickets = await api('GET','admin/tickets');
|
||||
filterTickets();
|
||||
const open=allTickets.filter(t=>t.status==='open').length;
|
||||
const tb=document.getElementById('tab-badge-tickets');
|
||||
tb.textContent=open; tb.style.display=open?'':'none';
|
||||
}
|
||||
|
||||
function filterTickets(){
|
||||
const status=document.getElementById('ticket-status-filter').value;
|
||||
const filtered=status?allTickets.filter(t=>t.status===status):allTickets;
|
||||
document.getElementById('ticket-count').textContent=`${filtered.length} Ticket${filtered.length!==1?'s':''}`;
|
||||
const tbody=document.getElementById('tickets-tbody');
|
||||
if(!filtered.length){ tbody.innerHTML=`<tr><td colspan="6" class="empty">Keine Tickets</td></tr>`; return; }
|
||||
tbody.innerHTML=filtered.map(t=>`
|
||||
<tr>
|
||||
<td style="color:var(--slate-400);font-size:12px">#${t.id}</td>
|
||||
<td><strong>${esc(t.username)}</strong><br><span style="font-size:11px;color:var(--slate-400)">${esc(t.email)}</span></td>
|
||||
<td>
|
||||
<div style="font-weight:600">${esc(t.subject)}</div>
|
||||
<div class="ticket-msg">${esc(t.message)}</div>
|
||||
</td>
|
||||
<td>${ticketStatusBadge(t.status)}</td>
|
||||
<td style="font-size:12px;color:var(--slate-400)">${fmtDate(t.created_at)}</td>
|
||||
<td><div class="td-actions">
|
||||
<button class="btn btn-blue" onclick="viewTicket(${t.id})">Anzeigen</button>
|
||||
${t.status!=='closed'?`<button class="btn btn-gray" onclick="closeTicketAction(${t.id})">Schließen</button>`:''}
|
||||
${t.status==='open'?`<button class="btn btn-orange" onclick="inProgressTicket(${t.id})">In Bearbeitung</button>`:''}
|
||||
</div></td>
|
||||
</tr>`).join('');
|
||||
}
|
||||
|
||||
function ticketStatusBadge(s){
|
||||
const m={open:'badge-red',in_progress:'badge-orange',closed:'badge-green'};
|
||||
const l={open:'Offen',in_progress:'In Bearbeitung',closed:'Geschlossen'};
|
||||
return `<span class="badge ${m[s]||'badge-gray'}">${l[s]||esc(s)}</span>`;
|
||||
}
|
||||
|
||||
let activeAdminTicket = null;
|
||||
|
||||
async function viewTicket(id){
|
||||
const t=allTickets.find(x=>x.id===id); if(!t)return;
|
||||
activeAdminTicket=t;
|
||||
document.getElementById('ticket-modal-title').textContent=t.subject;
|
||||
document.getElementById('ticket-modal-meta').textContent=`Von ${esc(t.username)} (${esc(t.email)}) · ${fmtDateTime(t.created_at)}`;
|
||||
document.getElementById('ticket-modal-reply').value='';
|
||||
document.getElementById('ticket-modal-reply-area').style.display=t.status==='closed'?'none':'flex';
|
||||
document.getElementById('ticket-modal-thread').innerHTML='<div style="text-align:center;color:var(--slate-400);font-size:13px;padding:8px">Laden…</div>';
|
||||
document.getElementById('ticket-overlay').style.display='flex';
|
||||
try{
|
||||
const msgs=await api('GET',`tickets/${id}/messages`);
|
||||
renderAdminThread(t,msgs);
|
||||
}catch(e){
|
||||
document.getElementById('ticket-modal-thread').innerHTML=`<div style="color:var(--red);font-size:12px">${esc(e.message)}</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
function renderAdminThread(ticket, messages){
|
||||
const wrap=document.getElementById('ticket-modal-thread');
|
||||
const rows=[];
|
||||
rows.push(`<div style="display:flex;flex-direction:column;align-items:flex-start">
|
||||
<div style="background:var(--slate-100);border-radius:10px 10px 10px 4px;padding:8px 12px;font-size:13px;max-width:85%;white-space:pre-wrap;word-break:break-word">${esc(ticket.message)}</div>
|
||||
<div style="font-size:10px;color:var(--slate-400);margin-top:3px">${esc(ticket.username)} · ${fmtDateTime(ticket.created_at)}</div>
|
||||
</div>`);
|
||||
messages.forEach(m=>{
|
||||
const isAdmin=m.role==='admin';
|
||||
rows.push(`<div style="display:flex;flex-direction:column;align-items:${isAdmin?'flex-end':'flex-start'}">
|
||||
<div style="background:${isAdmin?'#2563eb':'var(--slate-100)'};color:${isAdmin?'#fff':'var(--slate-900)'};border-radius:${isAdmin?'10px 10px 4px 10px':'10px 10px 10px 4px'};padding:8px 12px;font-size:13px;max-width:85%;white-space:pre-wrap;word-break:break-word">${esc(m.message)}</div>
|
||||
<div style="font-size:10px;color:var(--slate-400);margin-top:3px;text-align:${isAdmin?'right':'left'}">${isAdmin?'🛡️ Admin':''}${esc(m.username)} · ${fmtDateTime(m.created_at)}</div>
|
||||
</div>`);
|
||||
});
|
||||
wrap.innerHTML=rows.join('');
|
||||
wrap.scrollTop=wrap.scrollHeight;
|
||||
}
|
||||
|
||||
async function sendAdminReply(){
|
||||
if(!activeAdminTicket)return;
|
||||
const inp=document.getElementById('ticket-modal-reply');
|
||||
const message=inp.value.trim();
|
||||
if(!message){ toast('Nachricht darf nicht leer sein','error'); return; }
|
||||
try{
|
||||
await api('POST',`tickets/${activeAdminTicket.id}/messages`,{message});
|
||||
inp.value='';
|
||||
await loadTickets();
|
||||
const updated=allTickets.find(x=>x.id===activeAdminTicket.id);
|
||||
if(updated) activeAdminTicket=updated;
|
||||
const msgs=await api('GET',`tickets/${activeAdminTicket.id}/messages`);
|
||||
renderAdminThread(activeAdminTicket,msgs);
|
||||
toast('Antwort gesendet');
|
||||
}catch(e){ toast(e.message,'error'); }
|
||||
}
|
||||
|
||||
function closeTicket(){ document.getElementById('ticket-overlay').style.display='none'; activeAdminTicket=null; }
|
||||
|
||||
async function closeTicketAction(id){
|
||||
await api('PATCH',`admin/tickets/${id}`,{status:'closed'});
|
||||
toast('Ticket geschlossen'); loadTickets();
|
||||
}
|
||||
async function inProgressTicket(id){
|
||||
await api('PATCH',`admin/tickets/${id}`,{status:'in_progress'});
|
||||
toast('Status aktualisiert'); loadTickets();
|
||||
}
|
||||
|
||||
// ── USAGE ──────────────────────────────────────────────────────
|
||||
async function loadUsage(){
|
||||
allUsage = await api('GET','admin/usage');
|
||||
const tbody=document.getElementById('usage-tbody');
|
||||
if(!allUsage.length){ tbody.innerHTML=`<tr><td colspan="10" class="empty">Keine Daten</td></tr>`; return; }
|
||||
const tables=['timetable','homework','grades','absences','todos','countdowns','quicklinks','support_tickets'];
|
||||
tbody.innerHTML=allUsage.map(u=>`
|
||||
<tr>
|
||||
<td><strong>${esc(u.username)}</strong></td>
|
||||
<td>${roleBadge(u.role)}</td>
|
||||
${tables.map(t=>`<td style="text-align:center;font-size:13px;color:${u.counts[t]>0?'var(--slate-900)':'var(--slate-300)'}">${u.counts[t]}</td>`).join('')}
|
||||
</tr>`).join('');
|
||||
}
|
||||
|
||||
// ── LOGS ───────────────────────────────────────────────────────
|
||||
async function loadLogs(){
|
||||
allLogs = await api('GET','admin/logs');
|
||||
const tbody=document.getElementById('logs-tbody');
|
||||
if(!allLogs.length){ tbody.innerHTML=`<tr><td colspan="5" class="empty">Keine Aktionen protokolliert</td></tr>`; return; }
|
||||
tbody.innerHTML=allLogs.map(l=>`
|
||||
<tr>
|
||||
<td style="font-size:12px;color:var(--slate-400);white-space:nowrap">${fmtDateTime(l.created_at)}</td>
|
||||
<td><strong>${esc(l.admin_username)}</strong></td>
|
||||
<td><span class="log-action">${esc(l.action)}</span></td>
|
||||
<td style="text-align:center;font-size:12px;color:var(--slate-500)">${l.target_id??'–'}</td>
|
||||
<td><span class="log-details" title="${esc(l.details??'')}">${esc(l.details??'–')}</span></td>
|
||||
</tr>`).join('');
|
||||
}
|
||||
|
||||
// ── CONFIRM MODAL ──────────────────────────────────────────────
|
||||
let confirmCallback=null;
|
||||
function confirm2(title, msg, cb){
|
||||
document.getElementById('confirm-title').textContent=title;
|
||||
document.getElementById('confirm-msg').textContent=msg;
|
||||
confirmCallback=cb;
|
||||
document.getElementById('confirm-overlay').style.display='flex';
|
||||
}
|
||||
function closeConfirm(){ document.getElementById('confirm-overlay').style.display='none'; confirmCallback=null; }
|
||||
document.getElementById('confirm-ok').addEventListener('click',async()=>{
|
||||
if(!confirmCallback)return;
|
||||
const cb=confirmCallback; closeConfirm();
|
||||
try{ await cb(); } catch(e){ toast(e.message,'error'); }
|
||||
});
|
||||
|
||||
// ── UTILS ──────────────────────────────────────────────────────
|
||||
function fmtDate(s){ return s?new Date(s).toLocaleDateString('de-DE',{day:'2-digit',month:'2-digit',year:'numeric'}):'–'; }
|
||||
function fmtDateTime(s){ if(!s)return'–'; const d=new Date(s); return d.toLocaleDateString('de-DE',{day:'2-digit',month:'2-digit',year:'numeric'})+' '+d.toLocaleTimeString('de-DE',{hour:'2-digit',minute:'2-digit'}); }
|
||||
|
||||
// ── INIT ───────────────────────────────────────────────────────
|
||||
(async()=>{
|
||||
lucide.createIcons();
|
||||
const ok = await authGuard();
|
||||
if(!ok)return;
|
||||
await Promise.all([loadUsers(), loadTickets()]);
|
||||
// Lazy-load usage + logs on tab switch
|
||||
document.querySelectorAll('.tab').forEach((t,i)=>{
|
||||
const tabs=['users','pending','tickets','usage','logs'];
|
||||
t.addEventListener('click',()=>{
|
||||
if(tabs[i]==='usage') loadUsage();
|
||||
if(tabs[i]==='logs') loadLogs();
|
||||
});
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user