321 lines
17 KiB
HTML
321 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Admin-Bereich - Turnierverwaltung</title>
|
|
<link rel="stylesheet" href="/css/style.css">
|
|
<style>
|
|
/* Tab Styling */
|
|
.tab-container {
|
|
border: 1px solid #ccc;
|
|
background-color: #f1f1f1;
|
|
border-radius: 5px 5px 0 0;
|
|
overflow: hidden; /* Contains the floated buttons */
|
|
}
|
|
.tab-container button {
|
|
background-color: inherit;
|
|
float: left;
|
|
border: none;
|
|
outline: none;
|
|
cursor: pointer;
|
|
padding: 14px 16px;
|
|
transition: 0.3s;
|
|
font-size: 1em;
|
|
color: #333;
|
|
border-radius: 0; /* Override general button style */
|
|
margin-right: 0; /* Override general button style */
|
|
border-bottom: 3px solid transparent; /* For active indicator */
|
|
}
|
|
.tab-container button:hover {
|
|
background-color: #ddd;
|
|
border-bottom-color: #bbb;
|
|
}
|
|
.tab-container button.active {
|
|
background-color: #ccc;
|
|
border-bottom-color: #007bff; /* Highlight active tab */
|
|
color: #000;
|
|
}
|
|
.tab-content {
|
|
padding: 20px;
|
|
border: 1px solid #ccc;
|
|
border-top: none;
|
|
border-radius: 0 0 5px 5px;
|
|
background-color: white;
|
|
}
|
|
/* Hide inactive tab content */
|
|
.tab-content.hidden {
|
|
display: none;
|
|
}
|
|
|
|
/* Adjust section margin for better spacing with tabs */
|
|
.content-section {
|
|
margin-bottom: 20px;
|
|
}
|
|
#selected-tournament-context {
|
|
margin-top: 25px;
|
|
}
|
|
#selected-tournament-header {
|
|
padding: 15px;
|
|
background-color: #e9ecef;
|
|
border-radius: 5px;
|
|
margin-bottom: 0; /* Connects visually with tabs */
|
|
border: 1px solid #ccc;
|
|
border-bottom: none; /* Remove bottom border to merge with tabs */
|
|
border-radius: 5px 5px 0 0;
|
|
}
|
|
#selected-tournament-header h2 {
|
|
margin: 0;
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
/* Ensure forms inside tabs don't have extra borders */
|
|
.tab-content form {
|
|
border: none;
|
|
padding: 0;
|
|
margin-bottom: 0;
|
|
box-shadow: none;
|
|
}
|
|
.tab-content table {
|
|
margin-top: 0; /* Remove extra top margin for tables in tabs */
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<nav>
|
|
<a href="/admin.html" class="active">Admin</a>
|
|
<a href="/referee.html">Schiedsrichter</a>
|
|
<a href="/spectator.html">Zuschauer</a>
|
|
<a href="#" id="logout-button" style="float: right;">Logout</a>
|
|
</nav>
|
|
|
|
<div class="container">
|
|
<h1>Admin-Bereich</h1>
|
|
<p id="welcome-message">Willkommen!</p>
|
|
|
|
<div id="login-section" class="auth-form">
|
|
<h2>Login</h2>
|
|
<form id="login-form">
|
|
<div>
|
|
<label for="login-username">Benutzername:</label>
|
|
<input type="text" id="login-username" required>
|
|
</div>
|
|
<div>
|
|
<label for="login-password">Passwort:</label>
|
|
<input type="password" id="login-password" required>
|
|
</div>
|
|
<button type="submit">Login</button>
|
|
<div id="login-error" class="error-message hidden"></div>
|
|
</form>
|
|
</div>
|
|
|
|
<div id="admin-content" class="hidden">
|
|
|
|
<section id="tournament-management" class="content-section">
|
|
<div class="section-header">
|
|
<h2>Turnierübersicht & Verwaltung</h2>
|
|
<button id="show-add-tournament-form">Neues Turnier erstellen</button>
|
|
</div>
|
|
|
|
<form id="tournament-form" class="hidden">
|
|
<h3 id="tournament-form-title">Neues Turnier erstellen</h3>
|
|
<input type="hidden" id="tournament-id">
|
|
<div><label for="tournament-name">Name:</label><input type="text" id="tournament-name" required></div>
|
|
<div><label for="tournament-date">Datum:</label><input type="date" id="tournament-date"></div>
|
|
<div><label for="tournament-location">Ort:</label><input type="text" id="tournament-location"></div>
|
|
<div><label for="tournament-type">Turnier-Typ:</label><select id="tournament-type" required><option value="knockout">KO-System</option><option value="group">Gruppenphase</option></select></div>
|
|
<div><label for="tournament-game-type">Spiel-Typ (Punkte pro Satz):</label><select id="tournament-game-type" required><option value="11_points">11 Punkte</option><option value="21_points">21 Punkte</option></select></div>
|
|
<div><label for="tournament-max-players">Max. Spieler (optional):</label><input type="number" id="tournament-max-players" min="0"></div>
|
|
<div><label for="tournament-status">Status:</label><select id="tournament-status"><option value="planned">Geplant</option><option value="running">Laufend</option><option value="finished">Beendet</option><option value="cancelled">Abgesagt</option></select></div>
|
|
<div><label for="tournament-description">Beschreibung:</label><textarea id="tournament-description"></textarea></div>
|
|
<button type="submit" id="save-tournament-button">Speichern</button>
|
|
<button type="button" id="cancel-tournament-button" class="secondary">Abbrechen</button>
|
|
<div id="tournament-form-error" class="error-message hidden"></div>
|
|
</form>
|
|
|
|
<div id="tournament-list-message" class="message-area hidden"></div>
|
|
|
|
<p>Wählen Sie ein Turnier aus der Liste aus, um es zu verwalten:</p>
|
|
<table id="tournament-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Datum</th>
|
|
<th>Status</th>
|
|
<th>Aktionen</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="tournament-list">
|
|
</tbody>
|
|
</table>
|
|
<p id="loading-tournaments" class="loading-indicator hidden">Lade Turniere...</p>
|
|
</section>
|
|
|
|
<section id="selected-tournament-context" class="hidden">
|
|
|
|
<div id="selected-tournament-header">
|
|
<h2 id="selected-tournament-context-name">Turnier: [Name]</h2>
|
|
</div>
|
|
|
|
<div class="tab-container">
|
|
<button class="tab-button active" data-tab="info">Übersicht</button>
|
|
<button class="tab-button" data-tab="players">Teilnehmer</button>
|
|
<button class="tab-button" data-tab="matches">Spiele</button>
|
|
<button class="tab-button" data-tab="users">Benutzer</button> <button class="tab-button" data-tab="settings">Einstellungen</button> </div>
|
|
|
|
<div id="tab-content-info" class="tab-content">
|
|
<h3>Turnierdetails</h3>
|
|
<p>Hier könnten allgemeine Turnierinformationen, Statistiken oder schnelle Aktionen angezeigt werden.</p>
|
|
<p><strong>Status:</strong> <span id="info-tab-status"></span></p>
|
|
<p><strong>Typ:</strong> <span id="info-tab-type"></span></p>
|
|
<p><strong>Ort:</strong> <span id="info-tab-location"></span></p>
|
|
<p><strong>Beschreibung:</strong> <span id="info-tab-description"></span></p>
|
|
<button id="edit-selected-tournament-button">Turnierdetails bearbeiten</button>
|
|
</div>
|
|
|
|
<div id="tab-content-players" class="tab-content hidden">
|
|
<div class="section-header">
|
|
<h3>Turnierteilnehmer</h3>
|
|
<div>
|
|
<button id="show-add-player-form-tab">Neuen Spieler erstellen</button>
|
|
<button id="link-existing-player-button" disabled title="Funktion zum Verknüpfen existierender Spieler noch nicht implementiert">Existierenden Spieler hinzufügen</button>
|
|
</div>
|
|
</div>
|
|
|
|
<form id="player-form" class="hidden">
|
|
<h4 id="player-form-title">Neuen Spieler erstellen</h4>
|
|
<input type="hidden" id="player-id"> <div><label for="player-first-name">Vorname:</label><input type="text" id="player-first-name" required></div>
|
|
<div><label for="player-last-name">Nachname:</label><input type="text" id="player-last-name" required></div>
|
|
<div>
|
|
<label for="player-gender">Geschlecht:</label>
|
|
<select id="player-gender" required>
|
|
<option value="">-- Bitte wählen --</option>
|
|
<option value="m">Männlich</option>
|
|
<option value="w">Weiblich</option>
|
|
<option value="d">Divers</option>
|
|
</select>
|
|
</div>
|
|
<div><label for="player-club">Verein:</label><input type="text" id="player-club"></div>
|
|
<div><label for="player-qttr">QTTR-Punkte:</label><input type="number" id="player-qttr" min="0"></div>
|
|
<div><label for="player-age-class">Altersklasse:</label><input type="text" id="player-age-class" placeholder="z.B. Herren A, U18"></div>
|
|
<button type="submit" id="save-player-button">Spieler erstellen</button>
|
|
<button type="button" id="cancel-player-button" class="secondary">Abbrechen</button>
|
|
<div id="player-form-error" class="error-message hidden"></div>
|
|
<p><small>Erstellt einen Spieler global. Das Hinzufügen zum Turnier muss separat erfolgen (noch nicht implementiert).</small></p>
|
|
</form>
|
|
|
|
<div id="tournament-player-list-message" class="message-area hidden"></div>
|
|
|
|
<table id="tournament-player-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Nachname</th>
|
|
<th>Vorname</th>
|
|
<th>Geschlecht</th>
|
|
<th>Verein</th>
|
|
<th>QTTR</th>
|
|
<th>Status</th> <th>Aktionen</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="tournament-player-list">
|
|
</tbody>
|
|
</table>
|
|
<p id="loading-tournament-players" class="loading-indicator hidden">Lade Teilnehmer...</p>
|
|
</div>
|
|
|
|
<div id="tab-content-matches" class="tab-content hidden">
|
|
<div class="section-header">
|
|
<h3>Spiele dieses Turniers</h3>
|
|
<div>
|
|
<button id="show-add-match-form">Neues Spiel hinzufügen</button>
|
|
<button id="generate-bracket-button" disabled title="Funktion noch nicht implementiert">Turnierbaum generieren</button>
|
|
</div>
|
|
</div>
|
|
|
|
<form id="match-form" class="hidden">
|
|
<h4 id="match-form-title">Neues Spiel hinzufügen</h4>
|
|
<input type="hidden" id="match-id">
|
|
<input type="hidden" id="match-form-tournament-id"> <div><label for="match-round">Runde:</label><input type="number" id="match-round" min="1"></div>
|
|
<div><label for="match-number-in-round">Spiel Nr. in Runde:</label><input type="number" id="match-number-in-round" min="1"></div>
|
|
<div><label for="match-player1">Spieler 1:</label><select id="match-player1"><option value="">-- Teilnehmer wählen --</option></select></div>
|
|
<div><label for="match-player2">Spieler 2:</label><select id="match-player2"><option value="">-- Teilnehmer wählen --</option></select></div>
|
|
<div><label for="match-scheduled-time">Geplante Zeit:</label><input type="datetime-local" id="match-scheduled-time"></div>
|
|
<div><label for="match-table-number">Tisch Nr.:</label><input type="text" id="match-table-number"></div>
|
|
<div><label for="match-status">Status:</label><select id="match-status"><option value="scheduled">Geplant</option><option value="ongoing">Laufend</option><option value="finished">Beendet</option><option value="postponed">Verschoben</option></select></div>
|
|
<button type="submit" id="save-match-button">Speichern</button>
|
|
<button type="button" id="cancel-match-button" class="secondary">Abbrechen</button>
|
|
<div id="match-form-error" class="error-message hidden"></div>
|
|
</form>
|
|
|
|
<div id="match-list-message" class="message-area hidden"></div>
|
|
|
|
<table id="match-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Runde</th>
|
|
<th>Spiel Nr.</th>
|
|
<th>Spieler 1</th>
|
|
<th>Spieler 2</th>
|
|
<th>Ergebnis</th>
|
|
<th>Status</th>
|
|
<th>Geplant</th>
|
|
<th>Tisch</th>
|
|
<th>Aktionen</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="match-list">
|
|
</tbody>
|
|
</table>
|
|
<p id="loading-matches" class="loading-indicator hidden">Lade Spiele...</p>
|
|
|
|
<div id="bracket-visualization-area" style="margin-top: 20px;">
|
|
<h4>Turnierbaum / Gruppen</h4>
|
|
<p><i>Visualisierung noch nicht implementiert.</i></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="tab-content-users" class="tab-content hidden">
|
|
<div class="section-header">
|
|
<h3>Benutzerverwaltung (Global)</h3>
|
|
<button id="show-add-user-form">Neuen Benutzer hinzufügen</button>
|
|
</div>
|
|
|
|
<form id="user-form" class="hidden">
|
|
<h4 id="user-form-title">Neuen Benutzer hinzufügen</h4>
|
|
<input type="hidden" id="user-id">
|
|
<div><label for="user-username">Benutzername:</label><input type="text" id="user-username" required></div>
|
|
<div><label for="user-password">Passwort:</label><input type="password" id="user-password"><small>Beim Bearbeiten leer lassen, um nicht zu ändern.</small></div>
|
|
<div><label for="user-role">Rolle:</label><select id="user-role" required><option value="spectator">Zuschauer</option><option value="referee">Schiedsrichter</option><option value="admin">Admin</option></select></div>
|
|
<button type="submit" id="save-user-button">Speichern</button>
|
|
<button type="button" id="cancel-user-button" class="secondary">Abbrechen</button>
|
|
<div id="user-form-error" class="error-message hidden"></div>
|
|
</form>
|
|
|
|
<div id="user-list-message" class="message-area hidden"></div>
|
|
|
|
<table id="user-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Benutzername</th>
|
|
<th>Rolle</th>
|
|
<th>Erstellt am</th>
|
|
<th>Aktionen</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="user-list">
|
|
</tbody>
|
|
</table>
|
|
<p id="loading-users" class="loading-indicator hidden">Lade Benutzer...</p>
|
|
</div>
|
|
|
|
<div id="tab-content-settings" class="tab-content hidden">
|
|
<h3>Einstellungen</h3>
|
|
<p>Globale oder turnierspezifische Einstellungen (z.B. Backup-Intervall, Standard-Spielregeln) könnten hier verwaltet werden.</p>
|
|
<p><i>Funktion noch nicht implementiert.</i></p>
|
|
</div>
|
|
|
|
</section> </div> </div> <script src="/js/admin.js"></script>
|
|
</body>
|
|
</html>
|