760 lines
75 KiB
HTML
760 lines
75 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>CorePlan</title>
|
|
<style>
|
|
:root { --bg-color: #12141c; --surface-color: #1e212b; --surface-hover: #2a2e3d; --text-main: #ffffff; --text-muted: #8b92a5; --accent-blue: #3b82f6; --accent-red: #ef4444; --accent-green: #10b981; --accent-orange: #f59e0b; }
|
|
body { background-color: var(--bg-color); color: var(--text-main); font-family: -apple-system, sans-serif; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; margin: 0; padding: 20px; box-sizing: border-box; }
|
|
.container { background-color: var(--surface-color); padding: 2.5rem; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.5); width: 100%; max-width: 350px; margin-top: 10vh; }
|
|
.dashboard-container { max-width: 1400px; width: 98%; padding: 2rem; margin-top: 0; }
|
|
h1, h2, h3 { margin-top: 0; } h1 { font-size: 1.5rem; text-align: center; }
|
|
.form-group { margin-bottom: 1.5rem; } label { display: block; margin-bottom: 0.5rem; color: var(--text-muted); font-size: 0.9rem; }
|
|
input, select, textarea { width: 100%; box-sizing: border-box; padding: 0.75rem; background-color: var(--bg-color); border: 1px solid var(--surface-hover); color: white; border-radius: 6px; outline: none; transition: border 0.2s; font-family: inherit; }
|
|
input:focus, select:focus, textarea:focus { border-color: var(--accent-blue); }
|
|
button { width: 100%; padding: 0.75rem; background-color: var(--accent-blue); color: white; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; transition: opacity 0.2s; }
|
|
button:hover { opacity: 0.9; }
|
|
.error-msg { color: var(--accent-red); font-size: 0.85rem; text-align: center; margin-bottom: 1rem; display: none; }
|
|
.hidden { display: none !important; }
|
|
.log-container { margin-top: 1.5rem; background-color: var(--bg-color); border-radius: 8px; padding: 1.5rem; overflow-x: auto; }
|
|
table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } th, td { padding: 0.75rem; text-align: left; border-bottom: 1px solid var(--surface-hover); }
|
|
th { color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.75rem; } tr:last-child td { border-bottom: none; }
|
|
tr:hover { background-color: rgba(255,255,255,0.02); }
|
|
.badge { background: rgba(255,255,255,0.1); padding: 3px 8px; border-radius: 4px; font-size: 0.75rem; display: inline-block; }
|
|
.btn-delete { background-color: transparent; color: var(--accent-red); border: none; padding: 0; width: auto; font-size: 1.1rem; }
|
|
|
|
.list-container { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 1.5rem; }
|
|
.project-card { background-color: var(--surface-hover); border-radius: 8px; padding: 1.5rem; border: 1px solid transparent; transition: border-color 0.2s, transform 0.2s; cursor: pointer; position: relative; }
|
|
.project-card:hover { border-color: var(--accent-blue); transform: translateX(5px); }
|
|
.project-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.5rem; }
|
|
.project-title { font-size: 1.2rem; font-weight: bold; margin: 0; }
|
|
.project-desc { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 0.5rem; }
|
|
.progress-bg { background-color: var(--bg-color); height: 6px; border-radius: 3px; overflow: hidden; margin-top: 5px; }
|
|
.progress-fill { background-color: var(--accent-blue); height: 100%; transition: width 0.3s; }
|
|
.assigned-badge { font-size: 0.7rem; background: rgba(59, 130, 246, 0.2); color: var(--accent-blue); padding: 2px 6px; border-radius: 4px; position: absolute; top: 1.5rem; right: 3.5rem; }
|
|
|
|
.modal-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.75); display: flex; justify-content: center; align-items: center; z-index: 1000; padding: 20px; box-sizing: border-box;}
|
|
.modal-content { background-color: var(--surface-color); width: 100%; max-width: 900px; border-radius: 12px; padding: 2rem; box-shadow: 0 10px 25px rgba(0,0,0,0.5); max-height: 90vh; overflow-y: auto; }
|
|
.modal-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--surface-hover); padding-bottom: 1rem; margin-bottom: 1rem; }
|
|
.btn-close { background: transparent; color: var(--text-muted); border: none; font-size: 1.5rem; cursor: pointer; padding: 0; width: auto; }
|
|
.btn-close:hover { color: var(--accent-red); }
|
|
|
|
.phase-header { font-weight: bold; font-size: 1.1rem; color: var(--accent-blue); margin-top: 1.5rem; border-bottom: 1px solid var(--surface-hover); padding-bottom: 0.5rem; }
|
|
.task-item { display: flex; align-items: flex-start; gap: 12px; padding: 0.75rem; border-bottom: 1px solid rgba(255,255,255,0.02); position: relative; }
|
|
.task-item:hover { background-color: rgba(255,255,255,0.02); }
|
|
.task-item.done { opacity: 0.5; } .task-item.done .task-text { text-decoration: line-through; }
|
|
.task-checkbox { width: 18px; height: 18px; cursor: pointer; accent-color: var(--accent-blue); margin-top: 3px; }
|
|
.task-details { display: flex; flex-direction: column; flex-grow: 1; }
|
|
.task-meta { font-size: 0.75rem; display: flex; gap: 10px; margin-top: 4px; color: var(--text-muted); flex-wrap: wrap;}
|
|
.prio-badge { font-size: 0.65rem; padding: 2px 6px; border-radius: 4px; font-weight: bold; text-transform: uppercase; }
|
|
.task-actions { display: none; position: absolute; right: 10px; top: 10px; gap: 5px; } .task-item:hover .task-actions { display: flex; }
|
|
.btn-icon { background: transparent; border: none; padding: 5px; cursor: pointer; color: var(--text-muted); font-size: 1rem; width: auto; } .btn-icon:hover { color: var(--text-main); } .btn-icon.del:hover { color: var(--accent-red); }
|
|
.pm-controls { display: flex; gap: 10px; margin-bottom: 1.5rem; background: rgba(0,0,0,0.2); padding: 10px; border-radius: 6px; flex-wrap: wrap;}
|
|
|
|
.license-banner { padding: 15px; margin-bottom: 20px; border-radius: 6px; display: flex; flex-direction: column; gap: 5px; }
|
|
.license-community { background: rgba(255,255,255,0.05); border-left: 4px solid var(--text-muted); }
|
|
.license-active { background: rgba(16, 185, 129, 0.1); border-left: 4px solid var(--accent-green); }
|
|
.license-expired { background: rgba(239, 68, 68, 0.1); border-left: 4px solid var(--accent-red); }
|
|
.info-box { background: rgba(59, 130, 246, 0.1); border-left: 4px solid var(--accent-blue); padding: 10px; border-radius: 0 4px 4px 0; margin-bottom: 1.5rem; font-size: 0.9rem;}
|
|
.deadline-box { background: var(--surface-hover); padding: 1.5rem; border-radius: 8px; border-left: 4px solid var(--accent-orange); }
|
|
.deadline-item { padding: 8px; margin-bottom: 5px; border-radius: 4px; font-size: 0.9rem; }
|
|
.deadline-warn { background: rgba(245, 158, 11, 0.1); border-left: 3px solid var(--accent-orange); }
|
|
.deadline-danger { background: rgba(239, 68, 68, 0.2); border-left: 3px solid var(--accent-red); color: var(--accent-red); }
|
|
|
|
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 10px;}
|
|
.cal-day-header { text-align: center; font-size: 0.75rem; color: var(--text-muted); font-weight: bold; margin-bottom: 5px; }
|
|
.cal-day { background: var(--bg-color); min-height: 50px; border-radius: 4px; padding: 5px; font-size: 0.8rem; position: relative; border: 1px solid transparent; cursor: pointer; transition: background 0.2s; }
|
|
.cal-day:hover:not(.empty) { background: rgba(255,255,255,0.05); }
|
|
.cal-day.today { border-color: var(--accent-blue); }
|
|
.cal-day.empty { background: transparent; cursor: default; }
|
|
.cal-event-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-top: 2px; margin-right: 2px; }
|
|
details > summary { list-style: none; user-select: none; }
|
|
details > summary::-webkit-details-marker { display: none; }
|
|
|
|
/* NEU: Native Print PDF Report Styles */
|
|
@media print {
|
|
body { background: white !important; color: black !important; padding: 0 !important; margin: 0 !important; }
|
|
.container, .modal-overlay, #dashboardView, #loginView, #forgotView, #resetView { display: none !important; }
|
|
#printArea { display: block !important; position: absolute; left: 0; top: 0; width: 100%; background: white; color: black; font-family: Arial, sans-serif; padding: 10mm; }
|
|
#printArea h1 { color: #3b82f6; text-align: left; border-bottom: 2px solid #ccc; padding-bottom: 10px; margin-bottom: 20px;}
|
|
#printArea h2 { color: #555; margin-top: 30px; border-bottom: 1px solid #ccc; padding-bottom: 5px;}
|
|
.print-task { border: 1px solid #ddd; padding: 15px; margin-bottom: 15px; border-radius: 6px; page-break-inside: avoid; }
|
|
.print-task h3 { margin: 0 0 10px 0; font-size: 1.1rem; }
|
|
.print-comment { padding-left: 20px; font-style: italic; color: #555; margin-bottom: 5px; font-size: 0.9rem;}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- DRUCK BEREICH (Unsichtbar im Browser, sichtbar beim Drucken) -->
|
|
<div id="printArea" style="display: none;"></div>
|
|
|
|
<div class="container" id="loginView">
|
|
<h1>CorePlan Login</h1>
|
|
<div class="error-msg" id="loginError">Login fehlgeschlagen.</div>
|
|
<form id="loginForm">
|
|
<div class="form-group"><label>Benutzername</label><input type="text" id="username" required></div>
|
|
<div class="form-group"><label>Passwort</label><input type="password" id="password" required></div>
|
|
<button type="submit">Anmelden</button>
|
|
<div style="text-align:center; margin-top:1rem; font-size:0.8rem;"><a href="#" onclick="toggleAuthView('forgot')" style="color:var(--text-muted); text-decoration:none;">Passwort vergessen?</a></div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Passwort Vergessen -->
|
|
<div class="container hidden" id="forgotView">
|
|
<h1>Passwort zurücksetzen</h1>
|
|
<p style="font-size:0.85rem; color:var(--text-muted); text-align:center;">Gib deine E-Mail Adresse ein. Wenn ein Account existiert, senden wir dir einen Link.</p>
|
|
<div class="error-msg" id="forgotError" style="color:var(--accent-green);"></div>
|
|
<form id="forgotForm">
|
|
<div class="form-group"><label>E-Mail Adresse</label><input type="email" id="forgotEmail" required></div>
|
|
<button type="submit">Link anfordern</button>
|
|
<div style="text-align:center; margin-top:1rem; font-size:0.8rem;"><a href="#" onclick="toggleAuthView('login')" style="color:var(--text-muted); text-decoration:none;">Zurück zum Login</a></div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Neues Passwort vergeben -->
|
|
<div class="container hidden" id="resetView">
|
|
<h1>Neues Passwort</h1>
|
|
<div class="error-msg" id="resetError"></div>
|
|
<form id="resetForm">
|
|
<input type="hidden" id="resetToken">
|
|
<div class="form-group"><label>Neues Passwort</label><input type="password" id="resetPassword" required minlength="4"></div>
|
|
<button type="submit">Passwort speichern</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="container dashboard-container hidden" id="dashboardView">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--surface-hover); padding-bottom: 1rem; margin-bottom: 1rem; flex-wrap: wrap; gap: 10px;">
|
|
<h1 style="margin: 0;">CorePlan <span style="font-size: 0.9rem; color: var(--text-muted); font-weight: normal;">| <span id="userNameDisplay"></span> (<span id="userRoleDisplay"></span>)</span></h1>
|
|
<div style="display: flex; gap: 10px; flex-wrap: wrap;">
|
|
<button onclick="toggleView('myarea')" style="width: auto; background-color: var(--surface-hover); color: var(--accent-blue);">👤 Mein Bereich</button>
|
|
<button onclick="toggleView('projects')" style="width: auto; background-color: transparent; border: 1px solid var(--text-muted); color: var(--text-main);">Projekte</button>
|
|
<button id="navLogs" onclick="toggleView('logs')" style="width: auto; background-color: transparent; border: 1px solid var(--text-muted); color: var(--text-main);">Logs</button>
|
|
<button id="navSettings" onclick="toggleView('settings')" style="width: auto; background-color: transparent; border: 1px solid var(--text-muted); color: var(--text-main);">Settings</button>
|
|
<button id="navUsers" onclick="toggleView('users')" style="width: auto; background-color: transparent; border: 1px solid var(--text-muted); color: var(--text-main);">Benutzer</button>
|
|
<button onclick="logout()" style="width: auto; background-color: var(--accent-red);">Abmelden</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="tabMyarea">
|
|
<div style="display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 1rem;">
|
|
<div>
|
|
<h2 style="margin-bottom: 0.2rem;">Mein Bereich</h2>
|
|
<p style="color: var(--text-muted); font-size: 0.9rem; margin-top: 0;">Dein Command Center: Deadlines, Projekte und Tasks im Überblick.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display: flex; gap: 2rem; align-items: stretch; flex-wrap: wrap;">
|
|
|
|
<!-- LINKE SPALTE -->
|
|
<div style="flex: 1.2; min-width: 450px; display: flex; flex-direction: column; gap: 1.5rem;">
|
|
<!-- OBERE REIHE -->
|
|
<div style="display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: stretch;">
|
|
<div class="deadline-box" style="flex: 1; min-width: 200px; margin: 0;">
|
|
<h3 style="margin-top: 0; margin-bottom: 1rem; color: var(--accent-orange);">🚨 Deadlines (7 Tage)</h3>
|
|
<div id="upcomingDeadlinesBox" style="display: flex; flex-direction: column; gap: 5px;"></div>
|
|
</div>
|
|
|
|
<div style="flex: 1; min-width: 200px; display: flex; flex-direction: column;">
|
|
<div style="background: var(--surface-hover); border-radius: 8px; padding: 1.5rem; flex-grow: 1; display: flex; flex-direction: column;">
|
|
<h3 style="margin-top: 0; margin-bottom: 1rem;">Meine Projekte</h3>
|
|
<div id="myProjectsContainer" style="margin-top: 0; flex-grow: 1; display: flex; flex-direction: column; gap: 10px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- UNTERE REIHE: Kalender -->
|
|
<div class="deadline-box" style="margin: 0; border-left-color: var(--accent-blue);">
|
|
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:0.5rem;">
|
|
<button onclick="changeCalMonth(-1)" style="width:auto; padding:5px 10px; background:var(--surface-color); color:var(--text-main);"><</button>
|
|
<h3 id="calMonthYear" style="margin:0; color: var(--accent-blue);">Monat Jahr</h3>
|
|
<button onclick="changeCalMonth(1)" style="width:auto; padding:5px 10px; background:var(--surface-color); color:var(--text-main);">></button>
|
|
</div>
|
|
<div class="cal-grid" id="calGrid"></div>
|
|
<div style="margin-top: 15px; font-size: 0.75rem; color: var(--text-muted); display: flex; gap: 10px; justify-content: center;">
|
|
<span><span class="cal-event-dot" style="background: var(--accent-red);"></span> Prio 1</span>
|
|
<span><span class="cal-event-dot" style="background: var(--accent-orange);"></span> Prio 2</span>
|
|
<span><span class="cal-event-dot" style="background: var(--accent-green);"></span> Prio 3</span>
|
|
<span><span class="cal-event-dot" style="background: var(--accent-blue); border-radius:2px;"></span> Projekt</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- RECHTE SPALTE -->
|
|
<div style="flex: 1; min-width: 350px; display: flex; flex-direction: column;">
|
|
<div style="background: var(--surface-hover); border-radius: 8px; padding: 1.5rem; flex-grow: 1; display: flex; flex-direction: column; max-height: calc(100vh - 180px);">
|
|
<h3 style="margin-top: 0; margin-bottom: 1rem;">Meine Aufgaben</h3>
|
|
<div id="myTasksContainer" style="overflow-y: auto; padding-right: 5px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="tabProjects" class="hidden">
|
|
<div class="log-container" id="newProjectFormContainer">
|
|
<h3 style="margin-top: 0; margin-bottom: 1rem;">Neues Projekt starten</h3>
|
|
<form id="projectForm" style="display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start;">
|
|
<div style="flex: 1; min-width: 200px;"><input type="text" id="projTitle" placeholder="Projekt Titel" required></div>
|
|
<div style="flex: 2; min-width: 200px;"><input type="text" id="projDesc" placeholder="Kurze Beschreibung..."></div>
|
|
<div style="flex: 1; min-width: 150px;"><input type="date" id="projDeadline" title="Deadline (Optional)"></div>
|
|
<select id="projAssignee" class="user-select-dropdown" style="flex: 1; min-width: 120px; padding: 0.75rem;"><option value="">-- Zuweisung --</option></select>
|
|
<textarea id="projBriefing" placeholder="Projekt-Steckbrief / Zielsetzung (Optional - Zeilenumbrüche erlaubt)" style="width: 100%; min-height: 60px; margin-top: 5px;"></textarea>
|
|
<button type="submit" style="width: auto; padding: 0.75rem 2rem; margin-top: 5px;">Projekt Anlegen</button>
|
|
</form>
|
|
</div>
|
|
<div id="projectsGrid" class="list-container"></div>
|
|
</div>
|
|
|
|
<div id="tabLogs" class="log-container hidden"><h3 style="margin-top: 0;">System Audit Log</h3><table><thead><tr><th>Zeit</th><th>User</th><th>Aktion</th><th>Info</th></tr></thead><tbody id="logTableBody"></tbody></table></div>
|
|
|
|
<div id="tabSettings" class="hidden">
|
|
<div class="log-container" style="border: 1px solid var(--accent-blue);">
|
|
<h3 style="margin-top: 0; color: var(--accent-blue);">Lizenz & Version</h3>
|
|
<div id="licenseBannerBox"></div>
|
|
<form id="licenseForm" style="display: flex; gap: 10px; margin-top: 1rem;">
|
|
<input type="text" id="licenseInput" placeholder="Lizenzschlüssel hier einfügen..." required style="flex: 1;">
|
|
<button type="submit" style="width: auto;">Lizenz aktivieren</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="log-container" style="margin-top: 1.5rem;">
|
|
<h3 style="margin-top: 0; color: var(--accent-green);">Gotify Push-Benachrichtigungen (Globales Radar)</h3>
|
|
<p style="font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1rem;">Sendet alle System-Alarme zentral auf dein Admin-Handy.</p>
|
|
<form style="display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px;">
|
|
<input type="url" id="setGotifyUrl" placeholder="Gotify URL (z.B. https://push.domain.de)" style="flex: 2; min-width: 200px;">
|
|
<input type="text" id="setGotifyToken" placeholder="App Token" style="flex: 1; min-width: 150px;">
|
|
<button type="button" onclick="saveSpecificSettings(['GOTIFY_URL', 'GOTIFY_TOKEN'], [document.getElementById('setGotifyUrl').value, document.getElementById('setGotifyToken').value])" style="width: auto;">Gotify Speichern</button>
|
|
<button type="button" onclick="testGotify()" style="width: auto; background-color: transparent; border: 1px solid var(--accent-blue); color: var(--accent-blue);">🔔 Test Senden</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="log-container" style="margin-top: 1.5rem;">
|
|
<h3 style="margin-top: 0; color: var(--accent-orange);">SMTP E-Mail Server (Persönliches Radar)</h3>
|
|
<p style="font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1rem;">Verschickt personalisierte Erinnerungen an User (unterstützt Port 465 SSL oder 587 TLS).</p>
|
|
<form style="display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px;">
|
|
<input type="text" id="setSmtpHost" placeholder="SMTP Host (z.B. mail.domain.de)" style="flex: 1; min-width: 150px;">
|
|
<input type="number" id="setSmtpPort" placeholder="Port (z.B. 465 oder 587)" style="flex: 1; min-width: 80px;">
|
|
<input type="text" id="setSmtpUser" placeholder="Benutzername" style="flex: 1; min-width: 120px;">
|
|
<input type="password" id="setSmtpPass" placeholder="Passwort" style="flex: 1; min-width: 120px;">
|
|
<input type="email" id="setSmtpFrom" placeholder="Absender (From:)" style="flex: 1.5; min-width: 150px;">
|
|
<button type="button" onclick="saveSpecificSettings(['SMTP_HOST', 'SMTP_PORT', 'SMTP_USER', 'SMTP_PASS', 'SMTP_FROM'], [document.getElementById('setSmtpHost').value, document.getElementById('setSmtpPort').value, document.getElementById('setSmtpUser').value, document.getElementById('setSmtpPass').value, document.getElementById('setSmtpFrom').value])" style="width: auto;">SMTP Speichern</button>
|
|
<button type="button" onclick="testSmtp()" style="width: auto; background-color: transparent; border: 1px solid var(--accent-blue); color: var(--accent-blue);">📧 Test Senden</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="log-container" style="margin-top: 1.5rem;">
|
|
<h3 style="margin-top: 0;">Erweiterte Systemeinstellungen</h3>
|
|
<form id="settingsForm" style="display: flex; gap: 10px; margin-bottom: 1rem;"><input type="text" id="configKey" placeholder="Schlüssel" required style="flex: 1;"><input type="text" id="configValue" placeholder="Wert" required style="flex: 2;"><button type="submit" style="width: auto;">Speichern</button></form>
|
|
<table><thead><tr><th>Schlüssel</th><th>Wert</th><th style="text-align: right;">Aktion</th></tr></thead><tbody id="settingsTableBody"></tbody></table>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="tabUsers" class="log-container hidden">
|
|
<h3 style="margin-top: 0;">Nutzerverwaltung (Admins)</h3>
|
|
<form id="userForm" style="display: flex; gap: 10px; margin-bottom: 1rem; flex-wrap: wrap;">
|
|
<input type="text" id="newUsername" placeholder="Benutzername" required style="flex: 1; min-width: 120px;">
|
|
<input type="email" id="newUserEmail" placeholder="E-Mail Adresse" style="flex: 1.5; min-width: 150px;">
|
|
<input type="password" id="newUserPass" placeholder="Passwort" required style="flex: 1; min-width: 120px;">
|
|
<select id="newUserRole" style="flex: 1; min-width: 100px;"><option value="user">User</option><option value="pm">Projektmanager (PM)</option><option value="admin">Admin</option></select>
|
|
<button type="submit" style="width: auto;">Anlegen</button>
|
|
</form>
|
|
<table><thead><tr><th>ID</th><th>User</th><th>E-Mail</th><th>Rolle</th><th style="text-align: right;">Aktion</th></tr></thead><tbody id="usersTableBody"></tbody></table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- MAIN TASK MODAL -->
|
|
<div id="taskModal" class="modal-overlay hidden">
|
|
<div class="modal-content">
|
|
<div class="modal-header"><h2 id="modalProjectTitle" style="margin: 0;">Projekt Details</h2><button class="btn-close" onclick="closeTaskModal()">✖</button></div>
|
|
<div class="modal-body">
|
|
<div style="display:flex; justify-content: space-between; margin-bottom: 1rem;"><span id="modalProjectStatus" class="badge">Aktiv</span></div>
|
|
<div id="modalBriefingBox" class="info-box hidden"><strong>Steckbrief:</strong> <div id="modalBriefingText" style="margin-top: 5px; line-height: 1.4;"></div></div>
|
|
<div id="modalCloseComment" style="display:none; color: var(--text-muted); font-size: 0.9rem; font-style: italic; margin-bottom: 1.5rem; border-left: 3px solid var(--surface-hover); padding-left: 10px;"></div>
|
|
<div id="pmControls" class="pm-controls hidden">
|
|
<button onclick="assignProjectToMe()" style="background-color: var(--surface-color); border: 1px solid var(--text-muted); color: var(--text-main); width: auto; font-size: 0.85rem;">🙋 Mir zuweisen</button>
|
|
<button onclick="extendProject()" style="background-color: var(--accent-blue); width: auto; font-size: 0.85rem;">⏳ Verlängern</button>
|
|
<button onclick="closeProject('closed')" style="background-color: var(--accent-green); width: auto; font-size: 0.85rem;">✔ Abschließen</button>
|
|
<button onclick="closeProject('canceled')" style="background-color: var(--accent-red); width: auto; font-size: 0.85rem;">✖ Abbrechen</button>
|
|
<button id="btnReport" onclick="generateReport()" style="background-color: var(--surface-color); border: 1px solid var(--accent-orange); color: var(--accent-orange); width: auto; font-size: 0.85rem; margin-left: auto;">📄 Report</button>
|
|
</div>
|
|
<form id="taskAddForm" style="display: flex; gap: 10px; margin-bottom: 2rem; flex-wrap: wrap; background: rgba(0,0,0,0.2); padding: 15px; border-radius: 8px;">
|
|
<input type="text" id="newTaskPhase" placeholder="Phase (z.B. Phase 1)" required style="flex: 1; min-width: 120px;">
|
|
<input type="text" id="newTaskTitle" placeholder="Neues To-Do..." required style="flex: 2; min-width: 200px;">
|
|
<select id="newTaskAssignee" class="user-select-dropdown" style="flex: 1; min-width: 120px;"><option value="">-- Frei --</option></select>
|
|
<select id="newTaskPriority" style="flex: 1; min-width: 100px;"><option value="1">🔥 Hoch</option><option value="2" selected>⚡ Mittel</option><option value="3">🧊 Niedrig</option></select>
|
|
<input type="date" id="newTaskDeadline" title="Ziel-Datum" style="flex: 1; min-width: 130px;">
|
|
<button type="submit" style="width: 100%;">Hinzufügen</button>
|
|
</form>
|
|
<div id="taskList"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- DAY VIEW MODAL (Kalender Klick) -->
|
|
<div id="dayViewModal" class="modal-overlay hidden" style="z-index: 1060; background: rgba(0,0,0,0.85);">
|
|
<div class="modal-content" style="max-width: 450px;">
|
|
<div class="modal-header"><h3 id="dayViewTitle" style="margin:0;">Aufgaben</h3><button class="btn-close" onclick="document.getElementById('dayViewModal').classList.add('hidden')">✖</button></div>
|
|
<div id="dayViewContent"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- COMMENTS MODAL (Task Notizen) -->
|
|
<div id="commentsModal" class="modal-overlay hidden" style="z-index: 1070; background: rgba(0,0,0,0.85);">
|
|
<div class="modal-content" style="max-width: 500px;">
|
|
<div class="modal-header"><h3 id="commentsTaskTitle" style="margin:0; font-size:1.1rem; color:var(--accent-blue);">Notizen</h3><button class="btn-close" onclick="document.getElementById('commentsModal').classList.add('hidden')">✖</button></div>
|
|
<div id="commentsList" style="max-height: 300px; overflow-y: auto; margin-bottom: 1rem; display:flex; flex-direction:column; gap:10px;"></div>
|
|
<form id="commentAddForm" style="display:flex; gap:10px; background: rgba(0,0,0,0.2); padding: 10px; border-radius: 8px;">
|
|
<input type="hidden" id="commentTaskId">
|
|
<input type="text" id="newCommentText" placeholder="Kurzes Update oder Notiz..." required style="flex:1;">
|
|
<button type="submit" style="width:auto; padding: 0.5rem 1rem;">Senden</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- EDIT TASK MODAL -->
|
|
<div id="editTaskModal" class="modal-overlay hidden" style="z-index: 1050; background: rgba(0,0,0,0.85);">
|
|
<div class="modal-content" style="max-width: 500px;">
|
|
<div class="modal-header"><h3 style="margin:0;">Task bearbeiten</h3><button class="btn-close" onclick="document.getElementById('editTaskModal').classList.add('hidden')">✖</button></div>
|
|
<form id="taskEditForm" style="display: flex; flex-direction: column; gap: 15px;">
|
|
<input type="hidden" id="editTaskId">
|
|
<input type="text" id="editTaskTitle" placeholder="To-Do Titel" required>
|
|
<input type="text" id="editTaskPhase" placeholder="Phase" required>
|
|
<select id="editTaskAssignee" class="user-select-dropdown"><option value="">-- Nicht zugewiesen --</option></select>
|
|
<select id="editTaskPriority"><option value="1">🔥 Hoch</option><option value="2">⚡ Mittel</option><option value="3">🧊 Niedrig</option></select>
|
|
<input type="date" id="editTaskDeadline" title="Ziel-Datum">
|
|
<button type="submit">Speichern</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- EDIT USER MODAL -->
|
|
<div id="editUserModal" class="modal-overlay hidden" style="z-index: 1050; background: rgba(0,0,0,0.85);">
|
|
<div class="modal-content" style="max-width: 400px;">
|
|
<div class="modal-header"><h3 style="margin:0;">Benutzer bearbeiten</h3><button class="btn-close" onclick="document.getElementById('editUserModal').classList.add('hidden')">✖</button></div>
|
|
<form id="userEditForm" style="display: flex; flex-direction: column; gap: 15px;">
|
|
<input type="hidden" id="editUserId">
|
|
<div><label>Benutzername</label><input type="text" id="editUserName" required></div>
|
|
<div><label>E-Mail</label><input type="email" id="editUserEmail"></div>
|
|
<div><label>Rolle</label><select id="editUserRole"><option value="user">User</option><option value="pm">Projektmanager (PM)</option><option value="admin">Admin</option></select></div>
|
|
<div><label>Passwort überschreiben (leer = keine Änderung)</label><input type="password" id="editUserPass" placeholder="***"></div>
|
|
<button type="submit">Speichern</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let currentUserRole = 'user'; let currentUserId = null; let allUsers = [];
|
|
let currentCalDate = new Date(); let cachedProjects = []; let cachedTasks = [];
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const token = urlParams.get('reset_token');
|
|
if (token) {
|
|
document.getElementById('loginView').classList.add('hidden');
|
|
document.getElementById('dashboardView').classList.add('hidden');
|
|
document.getElementById('resetView').classList.remove('hidden');
|
|
document.getElementById('resetToken').value = token;
|
|
} else {
|
|
checkSession();
|
|
}
|
|
});
|
|
|
|
function toggleAuthView(view) {
|
|
document.getElementById('loginView').classList.add('hidden');
|
|
document.getElementById('forgotView').classList.add('hidden');
|
|
document.getElementById('resetView').classList.add('hidden');
|
|
document.getElementById(view + 'View').classList.remove('hidden');
|
|
document.getElementById('forgotError').style.display = 'none';
|
|
}
|
|
|
|
document.getElementById('forgotForm').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
const fd = new FormData(); fd.append('email', document.getElementById('forgotEmail').value);
|
|
fetch('/api/password/forgot', { method: 'POST', body: fd }).then(res => res.json()).then(data => {
|
|
const msgBox = document.getElementById('forgotError');
|
|
msgBox.innerText = 'Falls die E-Mail existiert, wurde ein Link versendet.';
|
|
msgBox.style.color = 'var(--accent-green)';
|
|
msgBox.style.display = 'block';
|
|
document.getElementById('forgotForm').reset();
|
|
});
|
|
});
|
|
|
|
document.getElementById('resetForm').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
const fd = new FormData();
|
|
fd.append('reset_token', document.getElementById('resetToken').value);
|
|
fd.append('new_password', document.getElementById('resetPassword').value);
|
|
fetch('/api/password/reset', { method: 'POST', body: fd }).then(res => res.json()).then(data => {
|
|
if(data.success) {
|
|
alert('Passwort erfolgreich geändert! Du kannst dich jetzt anmelden.');
|
|
window.location.href = '/';
|
|
} else {
|
|
const msgBox = document.getElementById('resetError');
|
|
msgBox.innerText = data.error; msgBox.style.display = 'block';
|
|
}
|
|
});
|
|
});
|
|
|
|
function checkSession() {
|
|
fetch('/api/me').then(res => res.json()).then(data => {
|
|
if (data.success) {
|
|
currentUserRole = data.role; currentUserId = data.user_id; document.getElementById('userRoleDisplay').innerText = data.role.toUpperCase();
|
|
if(currentUserRole !== 'admin') { document.getElementById('navLogs').style.display = 'none'; document.getElementById('navSettings').style.display = 'none'; document.getElementById('navUsers').style.display = 'none'; }
|
|
if(currentUserRole === 'user') { document.getElementById('newProjectFormContainer').style.display = 'none'; }
|
|
fetchAllUsers(); showDashboard(data.username);
|
|
} else { document.getElementById('loginView').classList.remove('hidden'); }
|
|
});
|
|
}
|
|
|
|
function fetchAllUsers() {
|
|
fetch('/api/users').then(res => res.json()).then(data => {
|
|
if (data.success) {
|
|
allUsers = data.data; let options = '<option value="">-- Zuweisung (Frei) --</option>';
|
|
allUsers.forEach(u => {
|
|
let sel = (currentUserId == u.id) ? 'selected' : '';
|
|
options += `<option value="${u.id}" ${sel}>${u.username}</option>`;
|
|
});
|
|
document.querySelectorAll('.user-select-dropdown').forEach(el => el.innerHTML = options);
|
|
}
|
|
});
|
|
}
|
|
|
|
document.getElementById('loginForm').addEventListener('submit', function(e) { e.preventDefault(); const formData = new FormData(); formData.append('username', document.getElementById('username').value); formData.append('password', document.getElementById('password').value); fetch('/api/login', { method: 'POST', body: formData }).then(res => res.json()).then(data => { if (data.success) { document.getElementById('loginError').style.display = 'none'; checkSession(); } else { document.getElementById('loginError').style.display = 'block'; } }); });
|
|
function logout() { fetch('/api/logout').then(() => { location.reload(); }); }
|
|
function showDashboard(username) { document.getElementById('loginView').classList.add('hidden'); document.getElementById('dashboardView').classList.remove('hidden'); document.getElementById('userNameDisplay').innerText = username; toggleView('myarea'); }
|
|
function toggleView(tab) { document.getElementById('tabMyarea').classList.add('hidden'); document.getElementById('tabProjects').classList.add('hidden'); document.getElementById('tabLogs').classList.add('hidden'); document.getElementById('tabSettings').classList.add('hidden'); document.getElementById('tabUsers').classList.add('hidden'); const target = document.getElementById('tab'+tab.charAt(0).toUpperCase() + tab.slice(1)); if (target) target.classList.remove('hidden'); if (tab === 'projects') loadProjects(); else if (tab === 'logs') loadAuditLogs(); else if (tab === 'settings') loadSettings(); else if (tab === 'users') loadUsers(); else if (tab === 'myarea') loadMyArea(); }
|
|
|
|
function loadMyArea() {
|
|
fetch('/api/myarea').then(res => res.json()).then(data => {
|
|
if(data.success) {
|
|
cachedProjects = data.projects; cachedTasks = data.tasks;
|
|
renderCalendar();
|
|
|
|
const pGrid = document.getElementById('myProjectsContainer'); const tGrid = document.getElementById('myTasksContainer');
|
|
pGrid.innerHTML = ''; tGrid.innerHTML = '';
|
|
|
|
let upcomingHtml = '';
|
|
const now = new Date(); now.setHours(0,0,0,0);
|
|
const nextWeek = new Date(now); nextWeek.setDate(now.getDate() + 7);
|
|
|
|
if(data.projects.length === 0) pGrid.innerHTML = '<span style="color:var(--text-muted);">Keine aktiven Projekte zugewiesen.</span>';
|
|
data.projects.forEach(p => {
|
|
const safeBriefing = (p.briefing || '').replace(/\r\n|\r|\n/g, '<br>').replace(/'/g, "\\'").replace(/"/g, '"');
|
|
const safeTitle = p.title.replace(/'/g, "\\'");
|
|
pGrid.innerHTML += `<div class="project-card" style="padding: 1rem; margin-bottom: 0;" onclick="openTaskModal(${p.id}, '${safeTitle}', '${p.status}', '', '${safeBriefing}')"><h3 style="margin:0; font-size:1rem; color:var(--accent-blue);">${p.title}</h3><p style="font-size:0.8rem; color:var(--text-muted); margin: 5px 0 0 0;">${p.description || 'Keine Info'}</p></div>`;
|
|
if(p.deadline) {
|
|
let d = new Date(p.deadline);
|
|
if(d >= now && d <= nextWeek) upcomingHtml += `<div class="deadline-item deadline-warn"><strong>Projekt:</strong> ${p.title} (Fällig am: ${p.deadline})</div>`;
|
|
else if (d < now) upcomingHtml += `<div class="deadline-item deadline-danger"><strong>⚠️ Überfällig:</strong> Projekt "${p.title}" (war fällig am: ${p.deadline})</div>`;
|
|
}
|
|
});
|
|
|
|
if(data.tasks.length === 0) {
|
|
tGrid.innerHTML = '<span style="color:var(--text-muted);">Keine offenen Aufgaben. Gut gemacht!</span>';
|
|
} else {
|
|
let taskHtml = '<div>';
|
|
let groupedTasks = {};
|
|
|
|
data.tasks.forEach(t => {
|
|
if(!groupedTasks[t.project_title]) groupedTasks[t.project_title] = {1:[], 2:[], 3:[]};
|
|
groupedTasks[t.project_title][t.priority].push(t);
|
|
|
|
if(t.deadline) {
|
|
let d = new Date(t.deadline);
|
|
if(d >= now && d <= nextWeek) upcomingHtml += `<div class="deadline-item deadline-warn"><strong>Task:</strong> ${t.title} (Fällig am: ${t.deadline})</div>`;
|
|
else if (d < now) upcomingHtml += `<div class="deadline-item deadline-danger"><strong>⚠️ Überfällig:</strong> Task "${t.title}" (war fällig am: ${t.deadline})</div>`;
|
|
}
|
|
});
|
|
|
|
for(let pTitle in groupedTasks) {
|
|
taskHtml += `<div style="font-weight:bold; margin: 15px 0 10px 0; color:var(--accent-blue); border-bottom:1px solid rgba(255,255,255,0.05); padding-bottom:5px;">📂 ${pTitle}</div>`;
|
|
|
|
[1, 2, 3].forEach(prio => {
|
|
if(groupedTasks[pTitle][prio].length > 0) {
|
|
let prioName = prio == 1 ? '🔥 Hoch' : (prio == 2 ? '⚡ Mittel' : '🧊 Niedrig');
|
|
let color = prio == 1 ? 'var(--accent-red)' : (prio == 2 ? 'var(--accent-orange)' : 'var(--accent-green)');
|
|
|
|
taskHtml += `<details open style="margin-bottom: 5px; background: rgba(0,0,0,0.1); border-radius: 6px;">
|
|
<summary style="cursor:pointer; color: ${color}; font-weight:bold; font-size:0.85rem; padding: 8px;">${prioName} (${groupedTasks[pTitle][prio].length})</summary>
|
|
<ul style="list-style:none; padding:0 8px 8px 8px; margin:0;">`;
|
|
|
|
groupedTasks[pTitle][prio].forEach(t => {
|
|
let dlHtml = t.deadline ? `<span style="color:var(--accent-orange);">⏳ ${t.deadline}</span>` : '';
|
|
const safeTitle = t.title.replace(/'/g, "\\'").replace(/"/g, '"');
|
|
taskHtml += `<li style="padding: 10px; border-radius: 6px; background: rgba(0,0,0,0.2); margin-bottom: 5px; display:flex; gap:10px; align-items:flex-start;">
|
|
<input type="checkbox" class="task-checkbox" onclick="event.preventDefault(); toggleTaskGlobal(${t.id}, ${t.project_id}, 0)">
|
|
<div>
|
|
<div style="font-weight:bold; margin-bottom: 4px; font-size: 0.9rem;">${t.title}</div>
|
|
<div style="font-size:0.8rem; color:var(--text-muted); display:flex; gap:15px; align-items:center;">
|
|
${dlHtml}
|
|
<span onclick="openComments(${t.id}, '${safeTitle}')" style="cursor:pointer; color:var(--accent-blue); display:flex; align-items:center; gap:4px;" title="Task Notizen öffnen">💬 Notizen</span>
|
|
</div>
|
|
</div>
|
|
</li>`;
|
|
});
|
|
taskHtml += `</ul></details>`;
|
|
}
|
|
});
|
|
}
|
|
taskHtml += '</div>';
|
|
tGrid.innerHTML = taskHtml;
|
|
}
|
|
|
|
if(upcomingHtml === '') upcomingHtml = '<span style="color:var(--text-muted);">Keine Deadlines in den nächsten 7 Tagen. Entspann dich! ☕</span>';
|
|
document.getElementById('upcomingDeadlinesBox').innerHTML = upcomingHtml;
|
|
}
|
|
});
|
|
}
|
|
|
|
function changeCalMonth(offset) { currentCalDate.setMonth(currentCalDate.getMonth() + offset); renderCalendar(); }
|
|
function renderCalendar() {
|
|
const year = currentCalDate.getFullYear(); const month = currentCalDate.getMonth(); const today = new Date();
|
|
const firstDay = new Date(year, month, 1).getDay(); const daysInMonth = new Date(year, month + 1, 0).getDate();
|
|
let firstDayIndex = firstDay === 0 ? 6 : firstDay - 1;
|
|
const monthNames = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"];
|
|
|
|
document.getElementById('calMonthYear').innerText = `${monthNames[month]} ${year}`;
|
|
const grid = document.getElementById('calGrid');
|
|
grid.innerHTML = '<div class="cal-day-header">Mo</div><div class="cal-day-header">Di</div><div class="cal-day-header">Mi</div><div class="cal-day-header">Do</div><div class="cal-day-header">Fr</div><div class="cal-day-header">Sa</div><div class="cal-day-header">So</div>';
|
|
|
|
for (let i = 0; i < firstDayIndex; i++) grid.innerHTML += '<div class="cal-day empty"></div>';
|
|
|
|
for (let d = 1; d <= daysInMonth; d++) {
|
|
let dateStr = `${year}-${String(month+1).padStart(2, '0')}-${String(d).padStart(2, '0')}`;
|
|
let isToday = (year === today.getFullYear() && month === today.getMonth() && d === today.getDate()) ? 'today' : '';
|
|
let eventsHtml = '';
|
|
|
|
cachedTasks.forEach(t => {
|
|
if (t.deadline === dateStr) {
|
|
let color = t.priority == 1 ? 'var(--accent-red)' : (t.priority == 2 ? 'var(--accent-orange)' : 'var(--accent-green)');
|
|
eventsHtml += `<span class="cal-event-dot" style="background: ${color};" title="Task: ${t.title.replace(/"/g, '"')}"></span>`;
|
|
}
|
|
});
|
|
cachedProjects.forEach(p => {
|
|
if (p.deadline === dateStr) {
|
|
eventsHtml += `<span class="cal-event-dot" style="background: var(--accent-blue); border-radius: 2px;" title="Projekt: ${p.title.replace(/"/g, '"')}"></span>`;
|
|
}
|
|
});
|
|
grid.innerHTML += `<div class="cal-day ${isToday}" onclick="openDayView('${dateStr}')"><div style="font-weight:bold; margin-bottom:2px;">${d}</div><div>${eventsHtml}</div></div>`;
|
|
}
|
|
}
|
|
|
|
function openDayView(dateStr) {
|
|
let dayTasks = cachedTasks.filter(t => t.deadline === dateStr);
|
|
document.getElementById('dayViewTitle').innerText = `Aufgaben: ${dateStr}`;
|
|
|
|
let html = '';
|
|
if(dayTasks.length === 0) {
|
|
html = `<p style="color:var(--text-muted);">Keine To-Dos für diesen Tag.</p>`;
|
|
} else {
|
|
html += `<ul style="list-style:none; padding:0; margin:0;">`;
|
|
dayTasks.forEach(t => {
|
|
let prioHtml = t.priority == 1 ? `<span class="prio-badge" style="background: rgba(239, 68, 68, 0.2); color: var(--accent-red);">Hoch</span>` : (t.priority == 2 ? `<span class="prio-badge" style="background: rgba(245, 158, 11, 0.2); color: var(--accent-orange);">Mittel</span>` : `<span class="prio-badge" style="background: rgba(16, 185, 129, 0.2); color: var(--accent-green);">Niedrig</span>`);
|
|
html += `<li style="padding: 10px; border-radius: 6px; background: rgba(0,0,0,0.2); margin-bottom: 5px; display:flex; gap:10px; align-items:flex-start;"><input type="checkbox" class="task-checkbox" onclick="event.preventDefault(); toggleTaskGlobal(${t.id}, ${t.project_id}, 0); document.getElementById('dayViewModal').classList.add('hidden');"><div><div style="font-weight:bold; margin-bottom: 4px;">${t.title} ${prioHtml}</div><div style="font-size:0.8rem; color:var(--text-muted);">📂 ${t.project_title}</div></div></li>`;
|
|
});
|
|
html += `</ul>`;
|
|
}
|
|
document.getElementById('dayViewContent').innerHTML = html;
|
|
document.getElementById('dayViewModal').classList.remove('hidden');
|
|
}
|
|
|
|
function openComments(taskId, title) {
|
|
document.getElementById('commentTaskId').value = taskId;
|
|
document.getElementById('commentsTaskTitle').innerText = 'Notizen: ' + title;
|
|
document.getElementById('commentsModal').classList.remove('hidden');
|
|
loadComments(taskId);
|
|
}
|
|
function loadComments(taskId) {
|
|
fetch('/api/tasks/comments?task_id=' + taskId).then(res=>res.json()).then(data=>{
|
|
let html = '';
|
|
if(data.success) {
|
|
if(data.data.length === 0) html = '<div style="color:var(--text-muted); font-size:0.9rem; text-align:center; margin-top:20px;">Noch keine Notizen vorhanden.</div>';
|
|
data.data.forEach(c => {
|
|
html += `<div style="background:rgba(255,255,255,0.05); padding:10px; border-radius:6px; font-size:0.85rem;"><div style="display:flex; justify-content:space-between; margin-bottom:5px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 3px;"><strong style="color:var(--accent-blue);">🙋 ${c.username}</strong><span style="color:var(--text-muted); font-size:0.75rem;">${c.created_at}</span></div><div style="line-height:1.4;">${c.comment}</div></div>`;
|
|
});
|
|
}
|
|
const cl = document.getElementById('commentsList');
|
|
cl.innerHTML = html; cl.scrollTop = cl.scrollHeight;
|
|
});
|
|
}
|
|
document.getElementById('commentAddForm').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
let taskId = document.getElementById('commentTaskId').value;
|
|
let comment = document.getElementById('newCommentText').value;
|
|
let fd = new FormData(); fd.append('task_id', taskId); fd.append('comment', comment);
|
|
fetch('/api/tasks/comment', {method:'POST', body:fd}).then(res=>res.json()).then(data=>{
|
|
if(data.success) { document.getElementById('newCommentText').value = ''; loadComments(taskId); }
|
|
});
|
|
});
|
|
|
|
function toggleTaskGlobal(taskId, projectId, state) { let comment = prompt("Kurzer Kommentar zur Erledigung:", ""); if (comment === null) return; const formData = new FormData(); formData.append('task_id', taskId); formData.append('project_id', projectId); formData.append('comment', comment); fetch('/api/tasks/toggle', { method: 'POST', body: formData }).then(res=>res.json()).then(data=>{ if(data.success) loadMyArea(); }); }
|
|
|
|
function loadProjects() {
|
|
fetch('/api/projects').then(res => res.json()).then(data => {
|
|
if (data.success) {
|
|
const grid = document.getElementById('projectsGrid'); grid.innerHTML = '';
|
|
if (data.data.length === 0) { grid.innerHTML = '<p style="color: var(--text-muted);">Noch keine Projekte vorhanden.</p>'; return; }
|
|
data.data.forEach(p => {
|
|
let percent = p.total_tasks > 0 ? Math.round((p.completed_tasks / p.total_tasks) * 100) : 0; let timelineHtml = '';
|
|
if (p.deadline) {
|
|
const start = new Date(p.created_at.replace(' ', 'T')).getTime(); const end = new Date(p.deadline).getTime(); const now = new Date().getTime();
|
|
let timePercent = end > start ? Math.max(0, Math.min(100, ((now - start) / (end - start)) * 100)) : 0; const daysLeft = Math.ceil((end - now) / 86400000); const daysText = daysLeft >= 0 ? `${daysLeft} Tage verbleibend` : `${Math.abs(daysLeft)} Tage überfällig`; const timeColor = daysLeft < 0 ? 'var(--accent-red)' : (daysLeft <= 3 ? 'var(--accent-orange)' : 'var(--text-muted)');
|
|
timelineHtml = `<div style="margin-top: 15px; background: rgba(0,0,0,0.2); padding: 10px; border-radius: 6px;"><div style="display: flex; justify-content: space-between; font-size: 0.75rem; margin-bottom: 5px;"><span style="color: var(--text-muted);">Start: ${p.created_at.substring(0,10)}</span><span style="color: ${timeColor}; font-weight: bold;">⏳ ${daysText}</span><span style="color: var(--text-muted);">Ziel: ${p.deadline}</span></div><div class="progress-bg"><div class="progress-fill" style="width: ${timePercent}%; background-color: ${timeColor};"></div></div></div>`;
|
|
}
|
|
const safeBriefing = (p.briefing || '').replace(/\r\n|\r|\n/g, '<br>').replace(/'/g, "\\'").replace(/"/g, '"');
|
|
const safeTitle = p.title.replace(/'/g, "\\'");
|
|
const isClosed = p.status === 'closed'; const isCanceled = p.status === 'canceled'; let statusColor = 'var(--accent-green)'; let statusLabel = 'Aktiv';
|
|
if (isClosed) { statusColor = 'var(--text-muted)'; statusLabel = 'Abgeschlossen'; } if (isCanceled) { statusColor = 'var(--accent-red)'; statusLabel = 'Abgebrochen'; }
|
|
let deleteBtn = currentUserRole === 'admin' ? `<button class="btn-delete" onclick="event.stopPropagation(); deleteProject(${p.id}, '${safeTitle}')" title="Projekt löschen">✖</button>` : '';
|
|
let assignedHtml = p.assigned_username ? `<div class="assigned-badge">🙋 ${p.assigned_username}</div>` : '';
|
|
|
|
grid.innerHTML += `<div class="project-card" onclick="openTaskModal(${p.id}, '${safeTitle}', '${p.status}', '${(p.close_comment || '').replace(/'/g, "\\'")}', '${safeBriefing}')" style="opacity: ${isClosed||isCanceled ? '0.6' : '1'}; border-left: 3px solid ${statusColor};">${assignedHtml}<div class="project-header"><h3 class="project-title">${p.title} <span style="font-size: 0.75rem; color: ${statusColor}; font-weight: normal; margin-left: 10px;">[${statusLabel}]</span></h3>${deleteBtn}</div><p class="project-desc">${p.description || 'Keine Beschreibung'}</p><div style="font-size: 0.8rem; color: var(--text-muted); margin-bottom: 5px;">Task-Fortschritt (${p.completed_tasks}/${p.total_tasks})</div><div class="progress-bg" title="${percent}%"><div class="progress-fill ${percent === 100 ? 'done' : ''}" style="width: ${percent}%;"></div></div>${timelineHtml}</div>`;
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
document.getElementById('projectForm').addEventListener('submit', function(e) { e.preventDefault(); const formData = new FormData(); formData.append('title', document.getElementById('projTitle').value); formData.append('description', document.getElementById('projDesc').value); formData.append('briefing', document.getElementById('projBriefing').value); formData.append('deadline', document.getElementById('projDeadline').value); formData.append('assigned_to', document.getElementById('projAssignee').value); fetch('/api/projects', { method: 'POST', body: formData }).then(res => res.json()).then(data => { if (data.success) { document.getElementById('projectForm').reset(); loadProjects(); } else { alert(data.error); } }); });
|
|
function deleteProject(id, title) { if (!confirm(`Das Projekt "${title}" unwiderruflich löschen?`)) return; const formData = new FormData(); formData.append('id', id); fetch('/api/projects/delete', { method: 'POST', body: formData }).then(res => res.json()).then(data => { if (data.success) loadProjects(); else alert(data.error); }); }
|
|
|
|
function openTaskModal(id, title, status, closeComment, briefing) {
|
|
currentProjectId = id; document.getElementById('modalProjectTitle').innerText = title; document.getElementById('taskModal').classList.remove('hidden');
|
|
const badge = document.getElementById('modalProjectStatus'); const pmControls = document.getElementById('pmControls'); const taskForm = document.getElementById('taskAddForm'); const commentBox = document.getElementById('modalCloseComment');
|
|
const briefingBox = document.getElementById('modalBriefingBox'); const briefingText = document.getElementById('modalBriefingText');
|
|
if (briefing && briefing.trim() !== '') { briefingText.innerHTML = briefing; briefingBox.classList.remove('hidden'); } else { briefingBox.classList.add('hidden'); }
|
|
if (status !== 'active') { badge.innerText = status === 'canceled' ? 'Abgebrochen (Schreibgeschützt)' : 'Abgeschlossen (Schreibgeschützt)'; badge.style.background = status === 'canceled' ? 'var(--accent-red)' : 'var(--text-muted)'; pmControls.classList.add('hidden'); taskForm.style.display = 'none'; if (closeComment) { commentBox.innerText = `"${closeComment}"`; commentBox.style.display = 'block'; } else { commentBox.style.display = 'none'; } }
|
|
else { badge.innerText = 'Aktiv'; badge.style.background = 'var(--accent-green)'; taskForm.style.display = 'flex'; commentBox.style.display = 'none'; if(currentUserRole === 'pm' || currentUserRole === 'admin') { pmControls.classList.remove('hidden'); document.getElementById('btnReport').style.display = 'inline-block'; } else { pmControls.classList.add('hidden'); document.getElementById('btnReport').style.display = 'none'; } }
|
|
loadTasks();
|
|
}
|
|
function closeTaskModal() { document.getElementById('taskModal').classList.add('hidden'); currentProjectId = null; loadProjects(); }
|
|
function assignProjectToMe() { if(!confirm('Möchtest du die Verantwortung für dieses Projekt übernehmen?')) return; const formData = new FormData(); formData.append('id', currentProjectId); fetch('/api/projects/assign', { method: 'POST', body: formData }).then(res=>res.json()).then(data=>{ if(data.success) { alert('Projekt zugewiesen!'); loadProjects(); } else alert(data.error); }); }
|
|
function extendProject() { const newDate = prompt("Bitte neue Deadline eingeben (JJJJ-MM-TT):", ""); if (!newDate) return; const formData = new FormData(); formData.append('id', currentProjectId); formData.append('deadline', newDate); fetch('/api/projects/extend', { method: 'POST', body: formData }).then(res=>res.json()).then(data=>{ if(data.success) closeTaskModal(); else alert(data.error); }); }
|
|
function closeProject(status) { const actionText = status === 'canceled' ? 'Abbruch' : 'Abschluss'; const comment = prompt(`Bitte hinterlasse einen zwingenden Kommentar zum ${actionText}:`, ""); if (!comment) { alert('Aktion abgebrochen.'); return; } if(!confirm(`Bist du sicher? Das Projekt wird permanent auf "${status}" gesetzt!`)) return; const formData = new FormData(); formData.append('id', currentProjectId); formData.append('status', status); formData.append('comment', comment); fetch('/api/projects/close', { method: 'POST', body: formData }).then(res=>res.json()).then(data=>{ if(data.success) closeTaskModal(); else alert(data.error); }); }
|
|
|
|
// NEU: Native Print-Report Engine
|
|
function generateReport() {
|
|
fetch('/api/projects/report?id=' + currentProjectId).then(res => res.json()).then(data => {
|
|
if(!data.success) return;
|
|
const p = data.project;
|
|
let html = `<h1>Projekt-Report: ${p.title}</h1>`;
|
|
html += `<p style="font-size: 1.1rem; border: 1px solid #ccc; padding: 10px; border-radius: 6px;"><strong>Status:</strong> ${p.status.toUpperCase()} | <strong>Ziel:</strong> ${p.deadline || '-'} | <strong>Verantwortlich:</strong> ${p.assigned_username || '-'}</p>`;
|
|
html += `<p style="font-size: 1rem; color: #444;"><strong>Kurzbeschreibung:</strong> ${p.description || '-'}</p>`;
|
|
if (p.briefing) html += `<p style="font-size: 1rem; color: #444;"><strong>Steckbrief / Zielsetzung:</strong><br>${p.briefing.replace(/\n/g, '<br>')}</p>`;
|
|
html += `<h2 style="margin-top: 30px;">Aufgaben & Notizen</h2>`;
|
|
|
|
data.tasks.forEach(t => {
|
|
let status = t.is_completed ? '✅ Erledigt' : '⏳ Offen';
|
|
let assign = t.assigned_username ? ` | Zuweisung: ${t.assigned_username}` : '';
|
|
html += `<div class="print-task">`;
|
|
html += `<h3>${t.title} <span style="font-size:0.9rem; font-weight:normal; color:#666;">(${status}${assign})</span></h3>`;
|
|
|
|
let tComments = data.comments.filter(c => c.task_id === t.id);
|
|
if(tComments.length > 0) {
|
|
html += `<ul style="margin: 5px 0; padding-left: 20px;">`;
|
|
tComments.forEach(c => { html += `<li class="print-comment"><strong>${c.username}</strong> (${c.created_at.substring(0,16)}): ${c.comment}</li>`; });
|
|
html += `</ul>`;
|
|
} else { html += `<p class="print-comment">Keine Notizen erfasst.</p>`; }
|
|
html += `</div>`;
|
|
});
|
|
|
|
document.getElementById('printArea').innerHTML = html;
|
|
window.print();
|
|
setTimeout(() => { document.getElementById('printArea').innerHTML = ''; }, 2000);
|
|
});
|
|
}
|
|
|
|
function loadTasks() {
|
|
fetch('/api/tasks?project_id=' + currentProjectId).then(res => res.json()).then(data => {
|
|
if(data.success) {
|
|
const list = document.getElementById('taskList'); list.innerHTML = '';
|
|
if (data.data.length === 0) { list.innerHTML = '<div style="color: var(--text-muted); font-size: 0.9rem;">Noch keine To-Dos angelegt.</div>'; return; }
|
|
const grouped = {}; data.data.forEach(t => { if (!grouped[t.phase]) grouped[t.phase] = []; grouped[t.phase].push(t); });
|
|
for (const phase in grouped) {
|
|
list.innerHTML += `<div class="phase-header">${phase}</div>`;
|
|
grouped[phase].forEach(t => {
|
|
const isDone = t.is_completed == 1; const isClosed = document.getElementById('modalProjectStatus').innerText.includes('Schreibgeschützt'); const disabledAttr = isClosed ? 'disabled' : '';
|
|
let prioHtml = t.priority == 1 ? `<span class="prio-badge" style="background: rgba(239, 68, 68, 0.2); color: var(--accent-red);">Hoch</span>` : (t.priority == 2 ? `<span class="prio-badge" style="background: rgba(245, 158, 11, 0.2); color: var(--accent-orange);">Mittel</span>` : `<span class="prio-badge" style="background: rgba(16, 185, 129, 0.2); color: var(--accent-green);">Niedrig</span>`);
|
|
let tTimelineHtml = (t.deadline && !isDone) ? `<span style="color: var(--accent-orange);">⏳ Ziel: ${t.deadline}</span>` : '';
|
|
let completedText = (isDone && t.completed_at) ? `<span style="color: var(--accent-green);">✔ Erledigt am: ${t.completed_at.substring(0,10)}</span>` : '';
|
|
if (isDone && t.completion_comment) completedText += `<div style="color: var(--text-muted); margin-top:4px; font-style:italic;">💬 "${t.completion_comment}"</div>`;
|
|
let assignHtml = t.assigned_username ? `<span style="color: var(--accent-blue);">🙋 Zuweisung: ${t.assigned_username}</span>` : '';
|
|
const safeTitle = t.title.replace(/'/g, "\\'").replace(/"/g, '"'); const safePhase = t.phase.replace(/'/g, "\\'").replace(/"/g, '"');
|
|
let actionsHtml = !isClosed ? `<div class="task-actions"><button class="btn-icon" onclick="openComments(${t.id}, '${safeTitle}')" title="Notizen">💬</button><button class="btn-icon" onclick="openEditTodoModal(${t.id}, '${safeTitle}', '${safePhase}', ${t.priority}, '${t.deadline || ''}', '${t.assigned_to || ''}')" title="Bearbeiten">✏️</button><button class="btn-icon del" onclick="deleteTodo(${t.id}, '${safeTitle}')" title="Löschen">🗑️</button></div>` : '';
|
|
list.innerHTML += `<div class="task-item ${isDone ? 'done' : ''}"><input type="checkbox" class="task-checkbox" ${isDone ? 'checked' : ''} ${disabledAttr} onclick="event.preventDefault(); toggleTask(${t.id}, ${t.is_completed})"><div class="task-details"><div style="display: flex; align-items: center; gap: 10px;"><span class="task-text" style="font-size: 1.05rem;">${t.title}</span>${prioHtml}</div><div class="task-meta">${tTimelineHtml} ${assignHtml}</div><div>${completedText}</div></div>${actionsHtml}</div>`;
|
|
});
|
|
}
|
|
}
|
|
});
|
|
}
|
|
document.getElementById('taskAddForm').addEventListener('submit', function(e) { e.preventDefault(); const formData = new FormData(); formData.append('project_id', currentProjectId); formData.append('phase', document.getElementById('newTaskPhase').value); formData.append('title', document.getElementById('newTaskTitle').value); formData.append('priority', document.getElementById('newTaskPriority').value); formData.append('deadline', document.getElementById('newTaskDeadline').value); formData.append('assigned_to', document.getElementById('newTaskAssignee').value); fetch('/api/tasks/create', { method: 'POST', body: formData }).then(res=>res.json()).then(data=>{ if(data.success) { document.getElementById('newTaskTitle').value = ''; document.getElementById('newTaskDeadline').value = ''; loadTasks(); } }); });
|
|
function toggleTask(taskId, currentState) { let comment = ''; if (currentState == 0) { comment = prompt("Kurzer Kommentar zur Erledigung (optional):", ""); if (comment === null) return; } const formData = new FormData(); formData.append('task_id', taskId); formData.append('project_id', currentProjectId); formData.append('comment', comment); fetch('/api/tasks/toggle', { method: 'POST', body: formData }).then(res=>res.json()).then(data=>{ if(data.success) loadTasks(); }); }
|
|
function deleteTodo(id, title) { if (!confirm(`To-Do "${title}" wirklich löschen?`)) return; const formData = new FormData(); formData.append('task_id', id); fetch('/api/tasks/delete', { method: 'POST', body: formData }).then(res=>res.json()).then(data=>{ if(data.success) loadTasks(); else alert(data.error); }); }
|
|
function openEditTodoModal(id, title, phase, prio, deadline, assignedTo) { document.getElementById('editTaskId').value = id; document.getElementById('editTaskTitle').value = title; document.getElementById('editTaskPhase').value = phase; document.getElementById('editTaskPriority').value = prio; document.getElementById('editTaskDeadline').value = deadline; document.getElementById('editTaskAssignee').value = assignedTo; document.getElementById('editTaskModal').classList.remove('hidden'); }
|
|
document.getElementById('taskEditForm').addEventListener('submit', function(e) { e.preventDefault(); const formData = new FormData(); formData.append('task_id', document.getElementById('editTaskId').value); formData.append('title', document.getElementById('editTaskTitle').value); formData.append('phase', document.getElementById('editTaskPhase').value); formData.append('priority', document.getElementById('editTaskPriority').value); formData.append('deadline', document.getElementById('editTaskDeadline').value); formData.append('assigned_to', document.getElementById('editTaskAssignee').value); fetch('/api/tasks/edit', { method: 'POST', body: formData }).then(res=>res.json()).then(data=>{ if(data.success) { document.getElementById('editTaskModal').classList.add('hidden'); loadTasks(); } else alert(data.error); }); });
|
|
|
|
function loadAuditLogs() { fetch('/api/logs').then(res => res.json()).then(data => { if (data.success) { const tbody = document.getElementById('logTableBody'); tbody.innerHTML = ''; data.data.forEach(log => { tbody.innerHTML += `<tr><td style="color: var(--text-muted);">${log.timestamp}</td><td><strong>${log.username}</strong></td><td>${log.action}</td><td>${log.target || '-'}</td></tr>`; }); } }); }
|
|
|
|
async function saveSpecificSettings(keys, values) {
|
|
for(let i=0; i<keys.length; i++) {
|
|
let fd = new FormData();
|
|
fd.append('config_key', keys[i]);
|
|
fd.append('config_value', values[i]);
|
|
await fetch('/api/settings', { method: 'POST', body: fd });
|
|
}
|
|
alert('Einstellungen erfolgreich gespeichert!');
|
|
loadSettings();
|
|
}
|
|
|
|
function loadSettings() {
|
|
fetch('/api/settings').then(res => res.json()).then(data => {
|
|
if (data.success) {
|
|
const tbody = document.getElementById('settingsTableBody'); tbody.innerHTML = '';
|
|
const banner = document.getElementById('licenseBannerBox');
|
|
let hasLicense = false; let sDict = {};
|
|
|
|
data.data.forEach(setting => {
|
|
sDict[setting.config_key] = setting.config_value;
|
|
if (setting.config_key !== 'LICENSE_KEY' && !['GOTIFY_URL', 'GOTIFY_TOKEN', 'SMTP_HOST', 'SMTP_PORT', 'SMTP_USER', 'SMTP_PASS', 'SMTP_FROM'].includes(setting.config_key)) {
|
|
tbody.innerHTML += `<tr><td><strong>${setting.config_key}</strong></td><td style="color: var(--text-muted);">${setting.config_value}</td><td style="text-align: right;"><button class="btn-delete" onclick="deleteSetting('${setting.config_key}')">✖</button></td></tr>`;
|
|
}
|
|
if (setting.config_key === 'LICENSE_KEY') {
|
|
hasLicense = true;
|
|
try {
|
|
let payloadStr = atob(setting.config_value.split('.')[0]); let payload = JSON.parse(payloadStr);
|
|
let isExpired = new Date(payload.expires) < new Date();
|
|
if (isExpired) { banner.innerHTML = `<div class="license-banner license-expired"><h3 style="margin:0; color:var(--accent-red);">⚠️ Lizenz abgelaufen</h3><span style="font-size:0.9rem; color:var(--text-muted);">Deine ${payload.tier} ist am ${payload.expires} abgelaufen. CorePlan läuft jetzt im Community Modus.</span></div>`; }
|
|
else { banner.innerHTML = `<div class="license-banner license-active"><h3 style="margin:0; color:var(--accent-green);">✔ ${payload.tier} aktiv</h3><span style="font-size:0.9rem; color:var(--text-muted);">Erlaubt bis zu ${payload.limit} aktive Projekte. Gültig bis: <strong>${payload.expires}</strong></span></div>`; }
|
|
} catch(e) { banner.innerHTML = `<div class="license-banner license-expired"><h3 style="margin:0; color:var(--accent-red);">❌ Ungültiger Lizenzschlüssel</h3><span style="font-size:0.9rem; color:var(--text-muted);">Der Schlüssel konnte nicht verifiziert werden.</span></div>`; }
|
|
}
|
|
});
|
|
if (!hasLicense) { banner.innerHTML = `<div class="license-banner license-community"><h3 style="margin:0; color:var(--text-main);">Community Edition (Max 3 Projekte)</h3><span style="font-size:0.9rem; color:var(--text-muted);">Hinterlege unten einen gültigen Lizenzschlüssel für unlimitierte Features.</span></div>`; }
|
|
|
|
if(document.getElementById('setGotifyUrl')) document.getElementById('setGotifyUrl').value = sDict['GOTIFY_URL'] || '';
|
|
if(document.getElementById('setGotifyToken')) document.getElementById('setGotifyToken').value = sDict['GOTIFY_TOKEN'] || '';
|
|
if(document.getElementById('setSmtpHost')) document.getElementById('setSmtpHost').value = sDict['SMTP_HOST'] || '';
|
|
if(document.getElementById('setSmtpPort')) document.getElementById('setSmtpPort').value = sDict['SMTP_PORT'] || '';
|
|
if(document.getElementById('setSmtpUser')) document.getElementById('setSmtpUser').value = sDict['SMTP_USER'] || '';
|
|
if(document.getElementById('setSmtpPass')) document.getElementById('setSmtpPass').value = sDict['SMTP_PASS'] || '';
|
|
if(document.getElementById('setSmtpFrom')) document.getElementById('setSmtpFrom').value = sDict['SMTP_FROM'] || '';
|
|
}
|
|
});
|
|
}
|
|
|
|
function testGotify() { fetch('/api/settings/test-gotify', { method: 'POST' }).then(res => res.json()).then(data => { if(data.success) alert("Test-Push erfolgreich an Gotify gesendet!"); else alert("Fehler: " + data.error); }); }
|
|
function testSmtp() { alert("Sende Test-Mail... Dies kann ein paar Sekunden dauern."); fetch('/api/settings/test-smtp', { method: 'POST' }).then(res => res.json()).then(data => { if(data.success) alert("Test-E-Mail erfolgreich an deine Admin-Adresse gesendet!"); else alert("SMTP Fehler: " + data.error); }); }
|
|
|
|
document.getElementById('licenseForm').addEventListener('submit', function(e) { e.preventDefault(); const formData = new FormData(); formData.append('config_key', 'LICENSE_KEY'); formData.append('config_value', document.getElementById('licenseInput').value); fetch('/api/settings', { method: 'POST', body: formData }).then(res => res.json()).then(data => { if (data.success) { document.getElementById('licenseInput').value = ''; loadSettings(); } }); });
|
|
|
|
function loadUsers() { fetch('/api/users').then(res => res.json()).then(data => { if (data.success) { const tbody = document.getElementById('usersTableBody'); tbody.innerHTML = ''; data.data.forEach(u => { const safeName = u.username.replace(/'/g, "\\'"); const safeEmail = (u.email || '').replace(/'/g, "\\'"); tbody.innerHTML += `<tr><td>${u.id}</td><td><strong>${u.username}</strong></td><td>${u.email || '-'}</td><td><span class="badge">${u.role}</span></td><td style="text-align: right;"><button class="btn-icon" onclick="openEditUserModal(${u.id}, '${safeName}', '${safeEmail}', '${u.role}')" title="Bearbeiten">✏️</button><button class="btn-icon del" onclick="deleteUser(${u.id})" title="Löschen">🗑️</button></td></tr>`; }); } }); }
|
|
|
|
function openEditUserModal(id, username, email, role) { document.getElementById('editUserId').value = id; document.getElementById('editUserName').value = username; document.getElementById('editUserEmail').value = email; document.getElementById('editUserRole').value = role; document.getElementById('editUserPass').value = ''; document.getElementById('editUserModal').classList.remove('hidden'); }
|
|
document.getElementById('userEditForm').addEventListener('submit', function(e) { e.preventDefault(); const formData = new FormData(); formData.append('id', document.getElementById('editUserId').value); formData.append('username', document.getElementById('editUserName').value); formData.append('email', document.getElementById('editUserEmail').value); formData.append('role', document.getElementById('editUserRole').value); formData.append('password', document.getElementById('editUserPass').value); fetch('/api/users/edit', { method: 'POST', body: formData }).then(res => res.json()).then(data => { if(data.success) { document.getElementById('editUserModal').classList.add('hidden'); loadUsers(); fetchAllUsers(); } else alert(data.error); }); });
|
|
|
|
function deleteSetting(key) { if (!confirm(`Einstellung "${key}" wirklich löschen?`)) return; const formData = new FormData(); formData.append('config_key', key); fetch('/api/settings/delete', { method: 'POST', body: formData }).then(res => res.json()).then(data => { if (data.success) loadSettings(); else alert(data.error); }); }
|
|
function deleteUser(id) { if (!confirm('Diesen Benutzer wirklich löschen?')) return; const formData = new FormData(); formData.append('id', id); fetch('/api/users/delete', { method: 'POST', body: formData }).then(res => res.json()).then(data => { if (data.success) { loadUsers(); fetchAllUsers(); } else alert(data.error); }); }
|
|
document.getElementById('settingsForm').addEventListener('submit', function(e) { e.preventDefault(); const formData = new FormData(); formData.append('config_key', document.getElementById('configKey').value); formData.append('config_value', document.getElementById('configValue').value); fetch('/api/settings', { method: 'POST', body: formData }).then(res => res.json()).then(data => { if (data.success) { document.getElementById('configKey').value = ''; document.getElementById('configValue').value = ''; loadSettings(); } }); });
|
|
document.getElementById('userForm').addEventListener('submit', function(e) { e.preventDefault(); const formData = new FormData(); formData.append('username', document.getElementById('newUsername').value); formData.append('email', document.getElementById('newUserEmail').value); formData.append('password', document.getElementById('newUserPass').value); formData.append('role', document.getElementById('newUserRole').value); fetch('/api/users', { method: 'POST', body: formData }).then(res => res.json()).then(data => { if (data.success) { document.getElementById('newUsername').value = ''; document.getElementById('newUserEmail').value = ''; document.getElementById('newUserPass').value = ''; loadUsers(); fetchAllUsers(); } else { alert(data.error); } }); });
|
|
</script>
|
|
</body>
|
|
</html> |