Peter123/reservierungssystem
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v2.0: 3-Raum-System - Hauptraum, Saal A, Saal B mit 18 Tischen, Raum-Buchungen, API-Doku

Browse Source
This commit is contained in:
Peter
2026-05-16 12:15:46 +00:00
commit 1ae070f82f
35 changed files with 10640 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/css/style.css
+343
View File
@@ -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>
frontend/index.html
+576
View File
@@ -0,0 +1,576 @@
/* Reset & Base */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
background: #f5f5f5;
color: #333;
line-height: 1.5;
}
/* Screen Management */
.screen {
min-height: 100vh;
}
.screen.hidden {
display: none;
}
/* Login Screen */
#login-screen {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.login-box {
background: white;
padding: 2.5rem;
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
width: 100%;
max-width: 400px;
}
.login-box h1 {
text-align: center;
margin-bottom: 1.5rem;
color: #333;
font-size: 1.5rem;
}
.login-box input {
width: 100%;
padding: 0.75rem 1rem;
margin-bottom: 1rem;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 1rem;
}
.login-box input:focus {
outline: none;
border-color: #667eea;
}
.login-box button {
width: 100%;
padding: 0.75rem;
background: #667eea;
color: white;
border: none;
border-radius: 6px;
font-size: 1rem;
cursor: pointer;
transition: background 0.2s;
}
.login-box button:hover {
background: #5a67d8;
}
.error {
color: #dc2626;
font-size: 0.875rem;
margin-top: 0.5rem;
}
/* App Header */
.app-header {
background: white;
border-bottom: 1px solid #e5e7eb;
padding: 1rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.app-header h1 {
font-size: 1.25rem;
color: #333;
}
.app-header nav {
display: flex;
gap: 0.5rem;
}
.nav-btn {
padding: 0.5rem 1rem;
border: none;
background: transparent;
color: #6b7280;
cursor: pointer;
border-radius: 6px;
transition: all 0.2s;
}
.nav-btn:hover {
background: #f3f4f6;
}
.nav-btn.active {
background: #667eea;
color: white;
}
#logout-btn {
padding: 0.5rem 1rem;
border: 1px solid #dc2626;
background: transparent;
color: #dc2626;
cursor: pointer;
border-radius: 6px;
margin-left: 1rem;
}
#logout-btn:hover {
background: #dc2626;
color: white;
}
/* Main Content */
.app-main {
padding: 2rem;
max-width: 1400px;
margin: 0 auto;
}
/* View Management */
.view {
display: none;
}
.view.active {
display: block;
}
/* Dashboard */
.dashboard-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
.stat-card {
background: white;
padding: 1.5rem;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.stat-card h3 {
font-size: 0.875rem;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.5rem;
}
.stat-value {
font-size: 2.5rem;
font-weight: 700;
color: #333;
}
.stat-label {
font-size: 0.875rem;
color: #9ca3af;
}
.today-list {
background: white;
padding: 1.5rem;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.today-list h2 {
margin-bottom: 1rem;
font-size: 1.25rem;
}
.reservation-item {
display: flex;
justify-content: space-between;
padding: 1rem;
border-bottom: 1px solid #f3f4f6;
}
.reservation-item:last-child {
border-bottom: none;
}
.reservation-time {
font-weight: 600;
color: #667eea;
}
.reservation-guests {
color: #6b7280;
}
.reservation-name {
font-weight: 500;
}
/* Floor Plan */
.floorplan-header {
display: flex;
gap: 1rem;
margin-bottom: 1rem;
align-items: center;
}
.floorplan-container {
background: white;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
min-height: 500px;
padding: 2rem;
position: relative;
}
.floorplan-area {
position: relative;
width: 100%;
height: 450px;
background: #f9fafb;
border: 2px dashed #d1d5db;
border-radius: 8px;
}
.table {
position: absolute;
background: #22c55e;
border: 2px solid #16a34a;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s;
color: white;
font-weight: 600;
user-select: none;
}
.table:hover {
transform: scale(1.05);
}
.table.occupied {
background: #ef4444;
border-color: #dc2626;
}
.table.selected {
background: #f59e0b;
border-color: #d97706;
}
.table.merged {
background: #8b5cf6;
border-color: #7c3aed;
}
.table.circle {
border-radius: 50%;
}
.floorplan-legend {
display: flex;
gap: 2rem;
margin-top: 1rem;
}
.legend-item {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
}
.legend-color {
width: 20px;
height: 20px;
border-radius: 4px;
}
.legend-color.free { background: #22c55e; }
.legend-color.occupied { background: #ef4444; }
.legend-color.selected { background: #f59e0b; }
/* Calendar */
.calendar-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.calendar-header button {
padding: 0.5rem 1rem;
background: white;
border: 1px solid #d1d5db;
border-radius: 6px;
cursor: pointer;
}
.calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 1px;
background: #e5e7eb;
border: 1px solid #e5e7eb;
border-radius: 8px;
overflow: hidden;
}
.calendar-day-header {
background: #f9fafb;
padding: 1rem;
text-align: center;
font-weight: 600;
font-size: 0.875rem;
}
.calendar-day {
background: white;
min-height: 100px;
padding: 0.5rem;
cursor: pointer;
transition: background 0.2s;
}
.calendar-day:hover {
background: #f3f4f6;
}
.calendar-day.other-month {
color: #9ca3af;
background: #fafafa;
}
.calendar-day.today {
background: #dbeafe;
}
.calendar-day.has-reservations::after {
content: '';
display: block;
width: 6px;
height: 6px;
background: #ef4444;
border-radius: 50%;
margin-top: 4px;
}
.day-number {
font-weight: 500;
font-size: 0.875rem;
}
.reservation-count {
font-size: 0.75rem;
color: #6b7280;
margin-top: 0.25rem;
}
/* Reservations */
.reservations-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.reservations-list {
background: white;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
/* Settings */
.settings-tabs {
display: flex;
gap: 0.5rem;
margin-bottom: 1.5rem;
border-bottom: 1px solid #e5e7eb;
}
.tab-btn {
padding: 0.75rem 1.5rem;
border: none;
background: transparent;
color: #6b7280;
cursor: pointer;
border-bottom: 2px solid transparent;
}
.tab-btn.active {
color: #667eea;
border-bottom-color: #667eea;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
/* Forms */
.form-row {
margin-bottom: 1rem;
}
.form-row label {
display: block;
margin-bottom: 0.25rem;
font-weight: 500;
font-size: 0.875rem;
}
.form-row input,
.form-row select,
.form-row textarea {
width: 100%;
padding: 0.5rem 0.75rem;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 0.875rem;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
outline: none;
border-color: #667eea;
}
/* Buttons */
.btn-primary {
padding: 0.5rem 1rem;
background: #667eea;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 0.875rem;
transition: background 0.2s;
}
.btn-primary:hover {
background: #5a67d8;
}
.btn-secondary {
padding: 0.5rem 1rem;
background: white;
color: #374151;
border: 1px solid #d1d5db;
border-radius: 6px;
cursor: pointer;
font-size: 0.875rem;
}
.btn-secondary:hover {
background: #f3f4f6;
}
/* Modal */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.modal-overlay.hidden {
display: none;
}
.modal {
background: white;
border-radius: 12px;
width: 100%;
max-width: 500px;
max-height: 90vh;
overflow-y: auto;
}
.modal.hidden {
display: none;
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem;
border-bottom: 1px solid #e5e7eb;
}
.modal-header h2 {
font-size: 1.25rem;
}
.modal-close {
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: #6b7280;
}
.modal-close:hover {
color: #333;
}
.modal form {
padding: 1.5rem;
}
.modal-actions {
display: flex;
justify-content: flex-end;
gap: 1rem;
margin-top: 1.5rem;
}
/* Responsive */
@media (max-width: 768px) {
.app-header {
flex-direction: column;
gap: 1rem;
}
.app-header nav {
flex-wrap: wrap;
justify-content: center;
}
.dashboard-grid {
grid-template-columns: 1fr;
}
.floorplan-container {
padding: 1rem;
}
}