v2.0: 3-Raum-System - Hauptraum, Saal A, Saal B mit 18 Tischen, Raum-Buchungen, API-Doku
This commit is contained in:
Peter
@@ -0,0 +1,343 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Reservierungssystem</title>
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<!-- Login Screen -->
|
||||
<div id="login-screen" class="screen">
|
||||
<div class="login-box">
|
||||
<h1>Reservierungssystem</h1>
|
||||
<form id="login-form">
|
||||
<input type="text" id="username" placeholder="Benutzername" required>
|
||||
<input type="password" id="password" placeholder="Passwort" required>
|
||||
<button type="submit">Anmelden</button>
|
||||
<div id="login-error" class="error"></div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main App -->
|
||||
<div id="main-screen" class="screen hidden">
|
||||
<header class="app-header">
|
||||
<h1>Reservierungssystem</h1>
|
||||
<nav>
|
||||
<button class="nav-btn active" data-view="dashboard">Dashboard</button>
|
||||
<button class="nav-btn" data-view="floorplan">Tischplan</button>
|
||||
<button class="nav-btn" data-view="calendar">Kalender</button>
|
||||
<button class="nav-btn" data-view="reservations">Reservierungen</button>
|
||||
<button class="nav-btn" data-view="settings">Einstellungen</button>
|
||||
<button id="logout-btn">Abmelden</button>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main class="app-main">
|
||||
<!-- Dashboard View -->
|
||||
<div id="dashboard-view" class="view active">
|
||||
<div class="dashboard-grid">
|
||||
<div class="stat-card">
|
||||
<h3>Heute</h3>
|
||||
<div class="stat-value" id="today-count">0</div>
|
||||
<div class="stat-label">Reservierungen</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<h3>Gäste</h3>
|
||||
<div class="stat-value" id="today-guests">0</div>
|
||||
<div class="stat-label">Personen erwartet</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<h3>Schnellbuchung</h3>
|
||||
<button class="btn-primary" onclick="app.showQuickBooking()">+ Telefonisch</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="today-list">
|
||||
<h2>Heutige Reservierungen</h2>
|
||||
<div id="today-reservations"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Floor Plan View -->
|
||||
<div id="floorplan-view" class="view">
|
||||
<div class="floorplan-header">
|
||||
<select id="room-select">
|
||||
<option value="">Raum wählen...</option>
|
||||
</select>
|
||||
<button class="btn-secondary" onclick="app.toggleEditMode()">✏️ Bearbeiten</button>
|
||||
<button class="btn-primary" onclick="app.showAddTable()">+ Tisch hinzufügen</button>
|
||||
</div>
|
||||
<div class="floorplan-container" id="floorplan-canvas">
|
||||
<div class="floorplan-area" id="floorplan-area"></div>
|
||||
</div>
|
||||
<div class="floorplan-legend">
|
||||
<div class="legend-item"><span class="legend-color free"></span> Frei</div>
|
||||
<div class="legend-item"><span class="legend-color occupied"></span> Belegt</div>
|
||||
<div class="legend-item"><span class="legend-color selected"></span> Ausgewählt</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Calendar View -->
|
||||
<div id="calendar-view" class="view">
|
||||
<div class="calendar-header">
|
||||
<button id="prev-month">←</button>
|
||||
<h2 id="current-month"></h2>
|
||||
<button id="next-month">→</button>
|
||||
</div>
|
||||
<div class="calendar-grid" id="calendar-grid"></div>
|
||||
</div>
|
||||
|
||||
<!-- Reservations View -->
|
||||
<div id="reservations-view" class="view">
|
||||
<div class="reservations-header">
|
||||
<input type="date" id="reservation-date" value="">
|
||||
<button class="btn-primary" onclick="app.showNewReservation()">+ Neue Reservierung</button>
|
||||
</div>
|
||||
<div class="reservations-list" id="reservations-list"></div>
|
||||
</div>
|
||||
|
||||
<!-- Settings View -->
|
||||
<div id="settings-view" class="view">
|
||||
<div class="settings-tabs">
|
||||
<button class="tab-btn active" data-tab="email">E-Mail</button>
|
||||
<button class="tab-btn" data-tab="rooms">Räume</button>
|
||||
</div>
|
||||
|
||||
<div id="email-settings" class="tab-content active">
|
||||
<h2>E-Mail Konfiguration</h2>
|
||||
<form id="email-config-form">
|
||||
<div class="form-row">
|
||||
<label>Server:</label>
|
||||
<input type="text" name="host" placeholder="imap.example.com">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label>Port:</label>
|
||||
<input type="number" name="port" value="993">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label>Benutzername:</label>
|
||||
<input type="text" name="user">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label>Passwort:</label>
|
||||
<input type="password" name="password">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label>SSL:</label>
|
||||
<input type="checkbox" name="ssl" checked>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label>Ordner:</label>
|
||||
<input type="text" name="folder" value="INBOX">
|
||||
</div>
|
||||
<button type="submit" class="btn-primary">Speichern</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="rooms-settings" class="tab-content">
|
||||
<h2>Räume verwalten</h2>
|
||||
<div id="rooms-list"></div>
|
||||
<button class="btn-primary" onclick="app.showAddRoom()">+ Raum hinzufügen</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modals -->
|
||||
<div id="modal-overlay" class="modal-overlay hidden">
|
||||
<!-- Reservation Modal -->
|
||||
<div id="reservation-modal" class="modal hidden">
|
||||
<div class="modal-header">
|
||||
<h2 id="reservation-modal-title">Neue Reservierung</h2>
|
||||
<button class="modal-close">×</button>
|
||||
</div>
|
||||
<form id="reservation-form">
|
||||
<input type="hidden" name="id">
|
||||
<div class="form-row">
|
||||
<label>Datum:</label>
|
||||
<input type="date" name="date" required>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label>Zeit von:</label>
|
||||
<input type="time" name="time_from" required>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label>Zeit bis:</label>
|
||||
<input type="time" name="time_to" required>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label>Personen:</label>
|
||||
<input type="number" name="guests" min="1" required>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label>Tisch:</label>
|
||||
<select name="table_id" required></select>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label>Name:</label>
|
||||
<input type="text" name="name" required>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label>Telefon:</label>
|
||||
<input type="tel" name="phone">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label>E-Mail:</label>
|
||||
<input type="email" name="email">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label>Quelle:</label>
|
||||
<select name="source">
|
||||
<option value="manual">Manuell</option>
|
||||
<option value="phone">Telefon</option>
|
||||
<option value="email">E-Mail</option>
|
||||
<option value="walkin">Walk-in</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label>Notizen:</label>
|
||||
<textarea name="notes" rows="3"></textarea>
|
||||
</div>
|
||||
<div class="modal-actions">
|
||||
<button type="button" class="btn-secondary" onclick="app.closeModal()">Abbrechen</button>
|
||||
<button type="submit" class="btn-primary">Speichern</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Quick Booking Modal -->
|
||||
<div id="quick-booking-modal" class="modal hidden">
|
||||
<div class="modal-header">
|
||||
<h2>Schnellbuchung (Telefon)</h2>
|
||||
<button class="modal-close">×</button>
|
||||
</div>
|
||||
<form id="quick-booking-form">
|
||||
<div class="form-row">
|
||||
<label>Datum:</label>
|
||||
<input type="date" name="date" required>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label>Uhrzeit:</label>
|
||||
<input type="time" name="time" required>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label>Personen:</label>
|
||||
<input type="number" name="guests" min="1" required>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label>Name:</label>
|
||||
<input type="text" name="name" required>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label>Telefon:</label>
|
||||
<input type="tel" name="phone" required>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label>Notizen:</label>
|
||||
<textarea name="notes" rows="2"></textarea>
|
||||
</div>
|
||||
<div class="modal-actions">
|
||||
<button type="button" class="btn-secondary" onclick="app.closeModal()">Abbrechen</button>
|
||||
<button type="submit" class="btn-primary">Schnell buchen</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Table Modal -->
|
||||
<div id="table-modal" class="modal hidden">
|
||||
<div class="modal-header">
|
||||
<h2 id="table-modal-title">Tisch hinzufügen</h2>
|
||||
<button class="modal-close">×</button>
|
||||
</div>
|
||||
<form id="table-form">
|
||||
<input type="hidden" name="id">
|
||||
<div class="form-row">
|
||||
<label>Raum:</label>
|
||||
<select name="room_id" required></select>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label>Max. Gäste:</label>
|
||||
<input type="number" name="max_guests" min="1" required>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label>Form:</label>
|
||||
<select name="shape">
|
||||
<option value="rect">Rechteck</option>
|
||||
<option value="circle">Kreis</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label>Breite (px):</label>
|
||||
<input type="number" name="width" value="100" min="50">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label>Höhe (px):</label>
|
||||
<input type="number" name="height" value="100" min="50">
|
||||
</div>
|
||||
<div class="modal-actions">
|
||||
<button type="button" class="btn-secondary" onclick="app.closeModal()">Abbrechen</button>
|
||||
<button type="submit" class="btn-primary">Speichern</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Room Modal -->
|
||||
<div id="room-modal" class="modal hidden">
|
||||
<div class="modal-header">
|
||||
<h2>Raum hinzufügen</h2>
|
||||
<button class="modal-close">×</button>
|
||||
</div>
|
||||
<form id="room-form">
|
||||
<div class="form-row">
|
||||
<label>Name:</label>
|
||||
<input type="text" name="name" required>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label>Kapazität:</label>
|
||||
<input type="number" name="capacity" min="1">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label>Farbe:</label>
|
||||
<input type="color" name="color" value="#3b82f6">
|
||||
</div>
|
||||
<div class="modal-actions">
|
||||
<button type="button" class="btn-secondary" onclick="app.closeModal()">Abbrechen</button>
|
||||
<button type="submit" class="btn-primary">Speichern</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Merge Modal -->
|
||||
<div id="merge-modal" class="modal hidden">
|
||||
<div class="modal-header">
|
||||
<h2>Tische zusammenlegen</h2>
|
||||
<button class="modal-close">×</button>
|
||||
</div>
|
||||
<form id="merge-form">
|
||||
<div class="form-row">
|
||||
<label>Haupttisch:</label>
|
||||
<select name="parent_table_id" required></select>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label>Zusätzlicher Tisch:</label>
|
||||
<select name="child_table_id" required></select>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label>Name (optional):</label>
|
||||
<input type="text" name="merged_name" placeholder="z.B. "Tisch A+B"">
|
||||
</div>
|
||||
<div class="modal-actions">
|
||||
<button type="button" class="btn-secondary" onclick="app.closeModal()">Abbrechen</button>
|
||||
<button type="submit" class="btn-primary">Zusammenlegen</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user