Praktikumsplatz-Kalender<\/title>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/2.5.1\/jspdf.umd.min.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf-autotable\/3.5.31\/jspdf.plugin.autotable.min.js\"><\/script>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n padding: 20px;\n min-height: 100vh;\n }\n\n .container {\n max-width: 1600px;\n margin: 0 auto;\n background: white;\n border-radius: 15px;\n box-shadow: 0 20px 60px rgba(0,0,0,0.3);\n overflow: hidden;\n }\n\n \/* Login Screen *\/\n .login-screen {\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 80vh;\n padding: 40px;\n }\n\n .login-box {\n background: white;\n padding: 40px;\n border-radius: 15px;\n box-shadow: 0 10px 40px rgba(0,0,0,0.2);\n max-width: 400px;\n width: 100%;\n }\n\n .login-box h2 {\n color: #667eea;\n margin-bottom: 10px;\n text-align: center;\n }\n\n .login-box p {\n text-align: center;\n color: #666;\n margin-bottom: 30px;\n }\n\n .login-form {\n display: flex;\n flex-direction: column;\n gap: 15px;\n }\n\n .login-form input,\n .login-form select {\n padding: 12px;\n border: 2px solid #ddd;\n border-radius: 8px;\n font-size: 1em;\n }\n\n .login-form input:focus,\n .login-form select:focus {\n outline: none;\n border-color: #667eea;\n }\n\n .forgot-password-link {\n text-align: center;\n margin-top: 15px;\n }\n\n .forgot-password-link a {\n color: #667eea;\n text-decoration: none;\n font-size: 0.9em;\n cursor: pointer;\n }\n\n .forgot-password-link a:hover {\n text-decoration: underline;\n }\n\n .role-info {\n background: #f5f5f5;\n padding: 15px;\n border-radius: 8px;\n margin-top: 20px;\n }\n\n .role-info h4 {\n color: #667eea;\n margin-bottom: 10px;\n }\n\n .role-info ul {\n margin-left: 20px;\n color: #666;\n font-size: 0.9em;\n }\n\n .role-info li {\n margin-bottom: 5px;\n }\n\n .header {\n background: linear-gradient(135deg, #e53935 0%, #c62828 100%);\n color: white;\n padding: 30px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .header-left h1 {\n font-size: 2em;\n margin-bottom: 10px;\n }\n\n .header-right {\n text-align: right;\n }\n\n .user-info {\n background: rgba(255,255,255,0.2);\n padding: 10px 20px;\n border-radius: 8px;\n margin-bottom: 10px;\n }\n\n .user-info strong {\n display: block;\n font-size: 1.1em;\n }\n\n .user-role {\n font-size: 0.9em;\n opacity: 0.9;\n }\n\n .view-toggle {\n background: #f5f5f5;\n padding: 15px;\n text-align: center;\n border-bottom: 2px solid #ddd;\n }\n\n .view-toggle button {\n margin: 0 10px;\n }\n\n .controls {\n background: #f5f5f5;\n padding: 20px;\n border-bottom: 2px solid #ddd;\n }\n\n .month-nav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 20px;\n }\n\n .month-nav h2 {\n color: #333;\n font-size: 1.5em;\n }\n\n .btn {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n border: none;\n padding: 10px 20px;\n border-radius: 8px;\n cursor: pointer;\n font-size: 1em;\n transition: transform 0.2s, box-shadow 0.2s;\n }\n\n .btn:hover {\n transform: translateY(-2px);\n box-shadow: 0 5px 15px rgba(0,0,0,0.2);\n }\n\n .btn:active {\n transform: translateY(0);\n }\n\n .btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n transform: none;\n }\n\n .btn-success {\n background: linear-gradient(135deg, #4caf50, #45a049);\n }\n\n .btn-warning {\n background: linear-gradient(135deg, #ff9800, #f57c00);\n }\n\n .btn-danger {\n background: linear-gradient(135deg, #f44336, #d32f2f);\n }\n\n .btn-logout {\n background: linear-gradient(135deg, #f44336, #d32f2f);\n padding: 8px 16px;\n font-size: 0.9em;\n }\n\n .export-section {\n display: flex;\n gap: 10px;\n justify-content: center;\n flex-wrap: wrap;\n margin-top: 15px;\n }\n\n \/* Backend-Ansicht *\/\n .backend-view {\n display: none;\n }\n\n .backend-view.active {\n display: block;\n }\n\n .backend-tabs {\n display: flex;\n background: #e0e0e0;\n border-bottom: 3px solid #667eea;\n overflow-x: auto;\n }\n\n .backend-tab {\n flex: 1;\n padding: 15px;\n text-align: center;\n cursor: pointer;\n background: #f5f5f5;\n border: none;\n font-size: 1em;\n font-weight: bold;\n transition: background 0.3s;\n white-space: nowrap;\n }\n\n .backend-tab:hover {\n background: #e8e8e8;\n }\n\n .backend-tab.active {\n background: white;\n color: #667eea;\n }\n\n .backend-tab:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .backend-content {\n padding: 30px;\n }\n\n .backend-panel {\n display: none;\n }\n\n .backend-panel.active {\n display: block;\n }\n\n .capacity-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 20px;\n margin-bottom: 30px;\n }\n\n .capacity-card {\n background: #f9f9f9;\n padding: 20px;\n border-radius: 10px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n }\n\n .capacity-card h3 {\n color: #667eea;\n margin-bottom: 15px;\n }\n\n .capacity-card label {\n display: block;\n font-weight: bold;\n color: #333;\n margin-bottom: 8px;\n }\n\n .capacity-card input[type=\"number\"],\n .capacity-card input[type=\"color\"] {\n width: 100%;\n padding: 10px;\n border: 2px solid #ddd;\n border-radius: 5px;\n font-size: 1em;\n margin-bottom: 10px;\n }\n\n .capacity-card input[type=\"color\"] {\n height: 50px;\n cursor: pointer;\n }\n\n .color-preview {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-top: 5px;\n }\n\n .color-sample {\n width: 40px;\n height: 40px;\n border-radius: 5px;\n border: 2px solid #ddd;\n }\n\n .booking-editor {\n background: #f9f9f9;\n padding: 20px;\n border-radius: 10px;\n margin-bottom: 20px;\n }\n\n .booking-form {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 15px;\n margin-bottom: 15px;\n }\n\n .booking-form select,\n .booking-form input {\n padding: 10px;\n border: 2px solid #ddd;\n border-radius: 5px;\n font-size: 1em;\n }\n\n .booking-list,\n .activity-list {\n max-height: 400px;\n overflow-y: auto;\n }\n\n .booking-item,\n .activity-item {\n background: white;\n padding: 15px;\n border-radius: 8px;\n margin-bottom: 10px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n }\n\n .activity-item {\n border-left: 4px solid #667eea;\n }\n\n .activity-item.action-create {\n border-left-color: #4caf50;\n }\n\n .activity-item.action-update {\n border-left-color: #ff9800;\n }\n\n .activity-item.action-delete {\n border-left-color: #f44336;\n }\n\n .activity-item.action-login {\n border-left-color: #2196f3;\n }\n\n .activity-meta {\n font-size: 0.85em;\n color: #999;\n margin-top: 5px;\n }\n\n .activity-filters {\n display: flex;\n gap: 10px;\n margin-bottom: 20px;\n flex-wrap: wrap;\n }\n\n .activity-filters select {\n padding: 8px;\n border: 2px solid #ddd;\n border-radius: 5px;\n }\n\n .booking-info {\n flex: 1;\n }\n\n .booking-info strong {\n color: #667eea;\n }\n\n .booking-actions {\n display: flex;\n gap: 10px;\n }\n\n .btn-small {\n padding: 5px 15px;\n font-size: 0.9em;\n }\n\n .email-settings {\n background: #f9f9f9;\n padding: 20px;\n border-radius: 10px;\n margin-bottom: 20px;\n }\n\n .email-settings label {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 15px;\n cursor: pointer;\n }\n\n .email-settings input[type=\"checkbox\"] {\n width: 20px;\n height: 20px;\n cursor: pointer;\n }\n\n .email-settings input[type=\"email\"] {\n width: 100%;\n padding: 10px;\n border: 2px solid #ddd;\n border-radius: 5px;\n font-size: 1em;\n margin-top: 10px;\n }\n\n .user-management {\n background: #f9f9f9;\n padding: 20px;\n border-radius: 10px;\n margin-bottom: 20px;\n }\n\n .user-list {\n display: grid;\n gap: 15px;\n margin-top: 20px;\n }\n\n .user-item {\n background: white;\n padding: 15px;\n border-radius: 8px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n }\n\n .user-item-info strong {\n color: #667eea;\n font-size: 1.1em;\n }\n\n .user-role-badge {\n display: inline-block;\n padding: 5px 15px;\n border-radius: 20px;\n font-size: 0.85em;\n font-weight: bold;\n margin-left: 10px;\n }\n\n .role-admin {\n background: #f44336;\n color: white;\n }\n\n .role-editor {\n background: #ff9800;\n color: white;\n }\n\n .role-viewer {\n background: #4caf50;\n color: white;\n }\n\n \/* Frontend-Ansicht *\/\n .frontend-view {\n display: none;\n }\n\n .frontend-view.active {\n display: block;\n }\n\n .calendar {\n padding: 20px;\n overflow-x: auto;\n }\n\n table {\n width: 100%;\n border-collapse: collapse;\n background: white;\n }\n\n th {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n padding: 15px 10px;\n text-align: center;\n font-weight: bold;\n position: sticky;\n top: 0;\n z-index: 10;\n }\n\n th:first-child {\n text-align: left;\n padding-left: 20px;\n }\n\n td {\n padding: 12px 10px;\n text-align: center;\n border-bottom: 1px solid #eee;\n transition: background 0.2s;\n }\n\n td:first-child {\n text-align: left;\n font-weight: bold;\n color: #333;\n padding-left: 20px;\n background: #f9f9f9;\n position: sticky;\n left: 0;\n z-index: 5;\n }\n\n .station-colored {\n padding: 8px 15px;\n border-radius: 5px;\n color: white;\n text-shadow: 1px 1px 2px rgba(0,0,0,0.3);\n }\n\n tr:hover td {\n background: #f0f0f0;\n }\n\n tr:hover td:first-child {\n background: #e8e8e8;\n }\n\n .day-cell {\n cursor: pointer;\n min-width: 80px;\n position: relative;\n }\n\n .status-indicator {\n display: inline-block;\n width: 60px;\n height: 60px;\n border-radius: 50%;\n line-height: 60px;\n font-weight: bold;\n font-size: 1.1em;\n transition: transform 0.2s, box-shadow 0.2s;\n }\n\n .day-cell:hover .status-indicator {\n transform: scale(1.1);\n box-shadow: 0 5px 15px rgba(0,0,0,0.3);\n }\n\n .status-green {\n background: linear-gradient(135deg, #4caf50, #45a049);\n color: white;\n }\n\n .status-yellow {\n background: linear-gradient(135deg, #ffc107, #ff9800);\n color: white;\n }\n\n .status-red {\n background: linear-gradient(135deg, #f44336, #d32f2f);\n color: white;\n }\n\n .weekend {\n background: #fff9e6;\n }\n\n .today {\n background: #e3f2fd !important;\n }\n\n .comment-indicator {\n display: inline-block;\n width: 20px;\n height: 20px;\n background: #2196f3;\n color: white;\n border-radius: 50%;\n font-size: 0.8em;\n line-height: 20px;\n margin-left: 5px;\n cursor: help;\n }\n\n .legend {\n display: flex;\n justify-content: center;\n gap: 30px;\n padding: 20px;\n background: #f5f5f5;\n border-top: 2px solid #ddd;\n flex-wrap: wrap;\n }\n\n .legend-item {\n display: flex;\n align-items: center;\n gap: 10px;\n }\n\n .legend-circle {\n width: 30px;\n height: 30px;\n border-radius: 50%;\n }\n\n \/* Modal *\/\n .modal {\n display: none;\n position: fixed;\n z-index: 1000;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background: rgba(0,0,0,0.6);\n backdrop-filter: blur(5px);\n }\n\n .modal.active {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .modal-content {\n background: white;\n padding: 30px;\n border-radius: 15px;\n max-width: 500px;\n width: 90%;\n box-shadow: 0 10px 40px rgba(0,0,0,0.3);\n max-height: 80vh;\n overflow-y: auto;\n }\n\n .modal-content h3 {\n color: #667eea;\n margin-bottom: 15px;\n }\n\n .modal-content textarea {\n width: 100%;\n padding: 10px;\n border: 2px solid #ddd;\n border-radius: 5px;\n font-size: 1em;\n font-family: inherit;\n resize: vertical;\n min-height: 100px;\n }\n\n .modal-content input {\n width: 100%;\n padding: 10px;\n border: 2px solid #ddd;\n border-radius: 5px;\n font-size: 1em;\n margin-bottom: 15px;\n }\n\n .modal-actions {\n display: flex;\n gap: 10px;\n justify-content: flex-end;\n margin-top: 20px;\n }\n\n .save-indicator {\n position: fixed;\n bottom: 20px;\n right: 20px;\n background: #4caf50;\n color: white;\n padding: 15px 25px;\n border-radius: 8px;\n box-shadow: 0 5px 15px rgba(0,0,0,0.3);\n display: none;\n animation: slideIn 0.3s;\n z-index: 1001;\n }\n\n .save-indicator.active {\n display: block;\n }\n\n @keyframes slideIn {\n from {\n transform: translateX(400px);\n opacity: 0;\n }\n to {\n transform: translateX(0);\n opacity: 1;\n }\n }\n\n .checkbox-group {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 10px;\n }\n\n .checkbox-group input[type=\"checkbox\"] {\n width: 20px;\n height: 20px;\n cursor: pointer;\n }\n\n @media (max-width: 768px) {\n .header {\n flex-direction: column;\n text-align: center;\n }\n\n .header-right {\n text-align: center;\n margin-top: 15px;\n }\n\n .capacity-grid {\n grid-template-columns: 1fr;\n }\n\n .booking-form {\n grid-template-columns: 1fr;\n }\n\n th, td {\n padding: 8px 5px;\n font-size: 0.9em;\n }\n\n .status-indicator {\n width: 45px;\n height: 45px;\n line-height: 45px;\n font-size: 0.9em;\n }\n\n .view-toggle button {\n font-size: 0.9em;\n padding: 8px 15px;\n margin: 5px;\n }\n\n .backend-tabs {\n font-size: 0.85em;\n }\n\n .activity-filters {\n flex-direction: column;\n }\n\n .activity-filters select {\n width: 100%;\n }\n }\n <\/style>\n<\/head>\n<body>\n \n <div class=\"login-screen\" id=\"loginScreen\">\n <div class=\"login-box\">\n <h2>\ud83d\ude91 Praktikumsplatz-Kalender<\/h2>\n <p>Bitte melden Sie sich an<\/p>\n \n <form class=\"login-form\" onsubmit=\"login(event)\">\n <input type=\"text\" id=\"loginUsername\" placeholder=\"Benutzername\" required>\n <input type=\"password\" id=\"loginPassword\" placeholder=\"Passwort\" required>\n <select id=\"loginRole\">\n <option value=\"viewer\">Betrachter<\/option>\n <option value=\"editor\">Bearbeiter<\/option>\n <option value=\"admin\">Administrator<\/option>\n <\/select>\n <button type=\"submit\" class=\"btn btn-success\">Anmelden<\/button>\n <\/form>\n\n <div class=\"forgot-password-link\">\n <a onclick=\"showPasswordReset()\">Passwort vergessen?<\/a>\n <\/div>\n\n <div class=\"role-info\">\n <h4>Benutzerrollen:<\/h4>\n <ul>\n <li><strong>Betrachter:<\/strong> Kalender ansehen & exportieren<\/li>\n <li><strong>Bearbeiter:<\/strong> + Buchungen & Kommentare verwalten<\/li>\n <li><strong>Administrator:<\/strong> + Alle Einstellungen & Benutzerverwaltung<\/li>\n <\/ul>\n <p style=\"margin-top: 15px; font-size: 0.85em; color: #999;\">\n Demo: Beliebiger Benutzername\/Passwort\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"container\" id=\"mainApp\" style=\"display: none;\">\n <div class=\"header\">\n <div class=\"header-left\">\n <h1>\ud83d\ude91 Praktikumsplatz-Kalender Rettungswachen<\/h1>\n <p>Verf\u00fcgbarkeit der Praktikumspl\u00e4tze im \u00dcberblick<\/p>\n <\/div>\n <div class=\"header-right\">\n <div class=\"user-info\">\n <strong id=\"displayUsername\"><\/strong>\n <span class=\"user-role\" id=\"displayRole\"><\/span>\n <\/div>\n <button class=\"btn btn-logout\" onclick=\"logout()\">\ud83d\udeaa Abmelden<\/button>\n <\/div>\n <\/div>\n\n <div class=\"view-toggle\">\n <button class=\"btn\" onclick=\"switchView('frontend')\">\ud83d\udc41\ufe0f \u00d6ffentliche Ansicht<\/button>\n <button class=\"btn btn-warning\" id=\"backendBtn\" onclick=\"switchView('backend')\">\u2699\ufe0f Verwaltung (Backend)<\/button>\n <\/div>\n\n \n <div class=\"frontend-view active\" id=\"frontendView\">\n <div class=\"controls\">\n <div class=\"month-nav\">\n <button class=\"btn\" onclick=\"previousMonth()\">\u2190 Vorheriger Monat<\/button>\n <h2 id=\"currentMonth\"><\/h2>\n <button class=\"btn\" onclick=\"nextMonth()\">N\u00e4chster Monat \u2192<\/button>\n <\/div>\n \n <div class=\"export-section\">\n <button class=\"btn btn-success\" onclick=\"exportPDF('all')\">\ud83d\udcc4 Gesamtexport (PDF)<\/button>\n <button class=\"btn btn-success\" onclick=\"showExportMenu()\">\ud83d\udcc4 Einzelne Wache exportieren<\/button>\n <\/div>\n <\/div>\n\n <div class=\"calendar\">\n <table id=\"calendarTable\"><\/table>\n <\/div>\n\n <div class=\"legend\">\n <div class=\"legend-item\">\n <div class=\"legend-circle status-green\"><\/div>\n <span>Verf\u00fcgbar (>50%)<\/span>\n <\/div>\n <div class=\"legend-item\">\n <div class=\"legend-circle status-yellow\"><\/div>\n <span>Teilweise belegt (20-50%)<\/span>\n <\/div>\n <div class=\"legend-item\">\n <div class=\"legend-circle status-red\"><\/div>\n <span>Ausgebucht (<20%)<\/span>\n <\/div>\n <div class=\"legend-item\">\n <span style=\"background: #2196f3; color: white; padding: 5px 10px; border-radius: 15px; font-size: 0.9em;\">\ud83d\udcac = Kommentar vorhanden<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"backend-view\" id=\"backendView\">\n <div class=\"backend-tabs\">\n <button class=\"backend-tab active\" id=\"capacityTab\" onclick=\"switchBackendTab('capacity')\">Kapazit\u00e4ten<\/button>\n <button class=\"backend-tab\" id=\"bookingsTab\" onclick=\"switchBackendTab('bookings')\">Buchungen<\/button>\n <button class=\"backend-tab\" id=\"notificationsTab\" onclick=\"switchBackendTab('notifications')\">E-Mail<\/button>\n <button class=\"backend-tab\" id=\"usersTab\" onclick=\"switchBackendTab('users')\">Benutzer<\/button>\n <button class=\"backend-tab\" id=\"activityTab\" onclick=\"switchBackendTab('activity')\">Aktivit\u00e4ten<\/button>\n <\/div>\n\n <div class=\"backend-content\">\n \n <div class=\"backend-panel active\" id=\"capacityPanel\">\n <h2 style=\"color: #667eea; margin-bottom: 20px;\">Wachen konfigurieren<\/h2>\n <div class=\"capacity-grid\" id=\"capacityGrid\"><\/div>\n <button class=\"btn btn-success\" onclick=\"saveCapacities()\">\ud83d\udcbe Einstellungen speichern<\/button>\n <\/div>\n\n \n <div class=\"backend-panel\" id=\"bookingsPanel\">\n <h2 style=\"color: #667eea; margin-bottom: 20px;\">Buchungen & Kommentare verwalten<\/h2>\n \n <div class=\"booking-editor\">\n <h3>Neue Buchung \/ Kommentar hinzuf\u00fcgen<\/h3>\n <div class=\"booking-form\">\n <select id=\"bookingStation\">\n <option value=\"\">Wache ausw\u00e4hlen<\/option>\n <\/select>\n <input type=\"date\" id=\"bookingDate\">\n <input type=\"number\" id=\"bookingCount\" min=\"0\" placeholder=\"Anzahl Buchungen\">\n <input type=\"text\" id=\"bookingComment\" placeholder=\"Kommentar (optional)\">\n <\/div>\n <button class=\"btn btn-success\" onclick=\"addBooking()\">\u2795 Hinzuf\u00fcgen<\/button>\n <\/div>\n\n <h3 style=\"margin-top: 30px; margin-bottom: 15px; color: #667eea;\">Bestehende Eintr\u00e4ge<\/h3>\n <div class=\"booking-list\" id=\"bookingList\"><\/div>\n <\/div>\n\n \n <div class=\"backend-panel\" id=\"notificationsPanel\">\n <h2 style=\"color: #667eea; margin-bottom: 20px;\">E-Mail Benachrichtigungen<\/h2>\n \n <div class=\"email-settings\">\n <h3>Benachrichtigungseinstellungen<\/h3>\n <p style=\"color: #666; margin-bottom: 20px;\">\n Aktivieren Sie E-Mail-Benachrichtigungen, um bei neuen Buchungen automatisch informiert zu werden.\n <\/p>\n \n <label>\n <input type=\"checkbox\" id=\"emailEnabled\" onchange=\"toggleEmailSettings()\">\n <strong>E-Mail Benachrichtigungen aktivieren<\/strong>\n <\/label>\n\n <div id=\"emailConfig\" style=\"display: none; margin-top: 20px;\">\n <label style=\"display: block; margin-bottom: 10px;\">\n <strong>E-Mail-Adresse f\u00fcr Benachrichtigungen:<\/strong>\n <\/label>\n <input type=\"email\" id=\"emailAddress\" placeholder=\"ihre@email.de\">\n \n <div style=\"margin-top: 20px;\">\n <p style=\"font-weight: bold; margin-bottom: 10px;\">Benachrichtigen bei:<\/p>\n <div class=\"checkbox-group\">\n <input type=\"checkbox\" id=\"notifyNewBooking\" checked>\n <label for=\"notifyNewBooking\">Neue Buchung<\/label>\n <\/div>\n <div class=\"checkbox-group\">\n <input type=\"checkbox\" id=\"notifyFullyBooked\" checked>\n <label for=\"notifyFullyBooked\">Wache ausgebucht<\/label>\n <\/div>\n <div class=\"checkbox-group\">\n <input type=\"checkbox\" id=\"notifyLowCapacity\" checked>\n <label for=\"notifyLowCapacity\">Wenig verf\u00fcgbare Pl\u00e4tze (<20%)<\/label>\n <\/div>\n <\/div>\n\n <div style=\"margin-top: 20px; padding: 15px; background: #fff3cd; border-radius: 5px;\">\n <strong>\u26a0\ufe0f Hinweis:<\/strong> Die E-Mail-Funktion ist eine Simulation. \n In der produktiven Umgebung m\u00fcsste dies serverseitig implementiert werden.\n <\/div>\n <\/div>\n\n <button class=\"btn btn-success\" style=\"margin-top: 20px;\" onclick=\"saveEmailSettings()\">\ud83d\udcbe Benachrichtigungen speichern<\/button>\n <\/div>\n\n <div style=\"margin-top: 30px;\">\n <h3 style=\"color: #667eea; margin-bottom: 15px;\">Test-Benachrichtigung senden<\/h3>\n <p style=\"color: #666; margin-bottom: 15px;\">\n Testen Sie die E-Mail-Benachrichtigung mit einer Demo-Nachricht.\n <\/p>\n <button class=\"btn\" onclick=\"sendTestEmail()\">\ud83d\udce7 Test-E-Mail senden<\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"backend-panel\" id=\"usersPanel\">\n <h2 style=\"color: #667eea; margin-bottom: 20px;\">Benutzerverwaltung<\/h2>\n \n <div class=\"user-management\">\n <h3>Neuen Benutzer anlegen<\/h3>\n <div class=\"booking-form\" style=\"margin-top: 15px;\">\n <input type=\"text\" id=\"newUsername\" placeholder=\"Benutzername\">\n <input type=\"password\" id=\"newPassword\" placeholder=\"Passwort\">\n <select id=\"newUserRole\">\n <option value=\"viewer\">Betrachter<\/option>\n <option value=\"editor\">Bearbeiter<\/option>\n <option value=\"admin\">Administrator<\/option>\n <\/select>\n <\/div>\n <button class=\"btn btn-success\" style=\"margin-top: 15px;\" onclick=\"addUser()\">\u2795 Benutzer hinzuf\u00fcgen<\/button>\n <\/div>\n\n <h3 style=\"margin-top: 30px; margin-bottom: 15px; color: #667eea;\">Registrierte Benutzer<\/h3>\n <div class=\"user-list\" id=\"userList\"><\/div>\n <\/div>\n\n \n <div class=\"backend-panel\" id=\"activityPanel\">\n <h2 style=\"color: #667eea; margin-bottom: 20px;\">Aktivit\u00e4tsprotokoll<\/h2>\n \n <div style=\"background: #f9f9f9; padding: 20px; border-radius: 10px; margin-bottom: 20px;\">\n <div class=\"activity-filters\">\n <select id=\"filterUser\" onchange=\"filterActivities()\">\n <option value=\"\">Alle Benutzer<\/option>\n <\/select>\n <select id=\"filterAction\" onchange=\"filterActivities()\">\n <option value=\"\">Alle Aktionen<\/option>\n <option value=\"login\">Anmeldungen<\/option>\n <option value=\"logout\">Abmeldungen<\/option>\n <option value=\"create\">Erstellt<\/option>\n <option value=\"update\">Bearbeitet<\/option>\n <option value=\"delete\">Gel\u00f6scht<\/option>\n <\/select>\n <select id=\"filterDays\" onchange=\"filterActivities()\">\n <option value=\"7\">Letzte 7 Tage<\/option>\n <option value=\"30\">Letzte 30 Tage<\/option>\n <option value=\"90\">Letzte 90 Tage<\/option>\n <option value=\"all\">Gesamter Zeitraum<\/option>\n <\/select>\n <button class=\"btn btn-small btn-danger\" onclick=\"clearActivityLog()\">\ud83d\uddd1\ufe0f Protokoll l\u00f6schen<\/button>\n <\/div>\n <\/div>\n\n <div class=\"activity-list\" id=\"activityList\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"modal\" id=\"commentModal\">\n <div class=\"modal-content\">\n <h3>Kommentar anzeigen<\/h3>\n <p id=\"commentDate\" style=\"color: #666; margin-bottom: 10px;\"><\/p>\n <div id=\"commentText\" style=\"padding: 15px; background: #f5f5f5; border-radius: 5px; min-height: 60px;\"><\/div>\n <div class=\"modal-actions\">\n <button class=\"btn\" onclick=\"closeCommentModal()\">Schlie\u00dfen<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"modal\" id=\"exportModal\">\n <div class=\"modal-content\">\n <h3>Wache f\u00fcr Export ausw\u00e4hlen<\/h3>\n <div id=\"exportStationList\" style=\"margin: 20px 0;\"><\/div>\n <div class=\"modal-actions\">\n <button class=\"btn\" onclick=\"closeExportModal()\">Abbrechen<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"modal\" id=\"passwordResetModal\">\n <div class=\"modal-content\">\n <h3>Passwort zur\u00fccksetzen<\/h3>\n <p style=\"color: #666; margin-bottom: 20px;\">\n Geben Sie Ihren Benutzernamen ein, um Ihr Passwort zur\u00fcckzusetzen.\n <\/p>\n <input type=\"text\" id=\"resetUsername\" placeholder=\"Benutzername\">\n <input type=\"password\" id=\"resetNewPassword\" placeholder=\"Neues Passwort\">\n <input type=\"password\" id=\"resetConfirmPassword\" placeholder=\"Passwort best\u00e4tigen\">\n <div style=\"padding: 15px; background: #e3f2fd; border-radius: 5px; margin-top: 15px;\">\n <strong>\u2139\ufe0f Demo-Modus:<\/strong> Das Passwort kann direkt zur\u00fcckgesetzt werden.\n In der Produktivumgebung w\u00fcrde hier ein Best\u00e4tigungslink per E-Mail versendet.\n <\/div>\n <div class=\"modal-actions\">\n <button class=\"btn\" onclick=\"closePasswordReset()\">Abbrechen<\/button>\n <button class=\"btn btn-success\" onclick=\"resetPassword()\">Passwort zur\u00fccksetzen<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"modal\" id=\"changePasswordModal\">\n <div class=\"modal-content\">\n <h3>Passwort \u00e4ndern<\/h3>\n <p style=\"color: #666; margin-bottom: 20px;\">\n \u00c4ndern Sie das Passwort f\u00fcr: <strong id=\"changePasswordUser\"><\/strong>\n <\/p>\n <input type=\"password\" id=\"changeNewPassword\" placeholder=\"Neues Passwort\">\n <input type=\"password\" id=\"changeConfirmPassword\" placeholder=\"Passwort best\u00e4tigen\">\n <div class=\"modal-actions\">\n <button class=\"btn\" onclick=\"closeChangePassword()\">Abbrechen<\/button>\n <button class=\"btn btn-success\" onclick=\"saveNewPassword()\">Passwort speichern<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"save-indicator\" id=\"saveIndicator\">\u2713 Gespeichert!<\/div>\n\n <script>\n const stations = ['RW20\/30', 'RW50', 'RW60', 'RW65', 'RW70\/91', 'RW90', 'RW97'];\n \n let capacity = {\n 'RW20\/30': 3, 'RW50': 2, 'RW60': 2, 'RW65': 2,\n 'RW70\/91': 3, 'RW90': 2, 'RW97': 2\n };\n\n let stationColors = {\n 'RW20\/30': '#667eea', 'RW50': '#f093fb', 'RW60': '#4facfe',\n 'RW65': '#43e97b', 'RW70\/91': '#fa709a', 'RW90': '#feca57', 'RW97': '#ff6348'\n };\n\n let colorEnabled = {\n 'RW20\/30': false, 'RW50': false, 'RW60': false, 'RW65': false,\n 'RW70\/91': false, 'RW90': false, 'RW97': false\n };\n\n let bookings = {};\n let comments = {};\n let emailSettings = {\n enabled: false, address: '',\n notifyNewBooking: true, notifyFullyBooked: true, notifyLowCapacity: true\n };\n\n let users = {\n 'admin': { password: 'admin', role: 'admin', name: 'Administrator' },\n 'editor': { password: 'editor', role: 'editor', name: 'Bearbeiter' },\n 'viewer': { password: 'viewer', role: 'viewer', name: 'Betrachter' }\n };\n\n let activityLog = [];\n let currentUser = null;\n let currentDate = new Date();\n let currentView = 'frontend';\n let currentBackendTab = 'capacity';\n let changePasswordUsername = null;\n\n function initializeData() {\n const storedCapacity = localStorage.getItem('praktikumCapacity');\n const storedBookings = localStorage.getItem('praktikumBookings');\n const storedComments = localStorage.getItem('praktikumComments');\n const storedColors = localStorage.getItem('praktikumColors');\n const storedColorEnabled = localStorage.getItem('praktikumColorEnabled');\n const storedEmailSettings = localStorage.getItem('praktikumEmailSettings');\n const storedUsers = localStorage.getItem('praktikumUsers');\n const storedCurrentUser = localStorage.getItem('praktikumCurrentUser');\n const storedActivityLog = localStorage.getItem('praktikumActivityLog');\n \n if (storedCapacity) capacity = JSON.parse(storedCapacity);\n if (storedBookings) bookings = JSON.parse(storedBookings);\n if (storedComments) comments = JSON.parse(storedComments);\n if (storedColors) stationColors = JSON.parse(storedColors);\n if (storedColorEnabled) colorEnabled = JSON.parse(storedColorEnabled);\n if (storedEmailSettings) emailSettings = JSON.parse(storedEmailSettings);\n if (storedUsers) users = JSON.parse(storedUsers);\n if (storedActivityLog) activityLog = JSON.parse(storedActivityLog);\n if (storedCurrentUser) {\n currentUser = JSON.parse(storedCurrentUser);\n showMainApp();\n }\n }\n\n function saveData() {\n localStorage.setItem('praktikumCapacity', JSON.stringify(capacity));\n localStorage.setItem('praktikumBookings', JSON.stringify(bookings));\n localStorage.setItem('praktikumComments', JSON.stringify(comments));\n localStorage.setItem('praktikumColors', JSON.stringify(stationColors));\n localStorage.setItem('praktikumColorEnabled', JSON.stringify(colorEnabled));\n localStorage.setItem('praktikumEmailSettings', JSON.stringify(emailSettings));\n localStorage.setItem('praktikumUsers', JSON.stringify(users));\n localStorage.setItem('praktikumActivityLog', JSON.stringify(activityLog));\n if (currentUser) {\n localStorage.setItem('praktikumCurrentUser', JSON.stringify(currentUser));\n }\n showSaveIndicator();\n }\n\n function showSaveIndicator() {\n const indicator = document.getElementById('saveIndicator');\n indicator.classList.add('active');\n setTimeout(() => indicator.classList.remove('active'), 2000);\n }\n\n function logActivity(action, details) {\n const activity = {\n id: Date.now(),\n timestamp: new Date().toISOString(),\n user: currentUser ? currentUser.username : 'System',\n action: action,\n details: details\n };\n activityLog.unshift(activity);\n if (activityLog.length > 1000) activityLog = activityLog.slice(0, 1000);\n saveData();\n }\n\n function login(event) {\n event.preventDefault();\n const username = document.getElementById('loginUsername').value;\n const password = document.getElementById('loginPassword').value;\n const role = document.getElementById('loginRole').value;\n\n currentUser = { username: username, role: role, name: username };\n localStorage.setItem('praktikumCurrentUser', JSON.stringify(currentUser));\n logActivity('login', `Benutzer ${username} hat sich angemeldet`);\n showMainApp();\n }\n\n function logout() {\n logActivity('logout', `Benutzer ${currentUser.username} hat sich abgemeldet`);\n currentUser = null;\n localStorage.removeItem('praktikumCurrentUser');\n document.getElementById('loginScreen').style.display = 'flex';\n document.getElementById('mainApp').style.display = 'none';\n document.getElementById('loginUsername').value = '';\n document.getElementById('loginPassword').value = '';\n }\n\n function showPasswordReset() {\n document.getElementById('passwordResetModal').classList.add('active');\n }\n\n function closePasswordReset() {\n document.getElementById('passwordResetModal').classList.remove('active');\n document.getElementById('resetUsername').value = '';\n document.getElementById('resetNewPassword').value = '';\n document.getElementById('resetConfirmPassword').value = '';\n }\n\n function resetPassword() {\n const username = document.getElementById('resetUsername').value;\n const newPassword = document.getElementById('resetNewPassword').value;\n const confirmPassword = document.getElementById('resetConfirmPassword').value;\n\n if (!username || !newPassword || !confirmPassword) {\n alert('Bitte f\u00fcllen Sie alle Felder aus!');\n return;\n }\n\n if (newPassword !== confirmPassword) {\n alert('Die Passw\u00f6rter stimmen nicht \u00fcberein!');\n return;\n }\n\n if (!users[username]) {\n alert('Benutzername nicht gefunden!');\n return;\n }\n\n users[username].password = newPassword;\n saveData();\n logActivity('password_reset', `Passwort f\u00fcr Benutzer ${username} wurde zur\u00fcckgesetzt`);\n closePasswordReset();\n alert('Passwort erfolgreich zur\u00fcckgesetzt!');\n }\n\n function showChangePassword(username) {\n changePasswordUsername = username;\n document.getElementById('changePasswordUser').textContent = username;\n document.getElementById('changePasswordModal').classList.add('active');\n }\n\n function closeChangePassword() {\n document.getElementById('changePasswordModal').classList.remove('active');\n document.getElementById('changeNewPassword').value = '';\n document.getElementById('changeConfirmPassword').value = '';\n changePasswordUsername = null;\n }\n\n function saveNewPassword() {\n const newPassword = document.getElementById('changeNewPassword').value;\n const confirmPassword = document.getElementById('changeConfirmPassword').value;\n\n if (!newPassword || !confirmPassword) {\n alert('Bitte f\u00fcllen Sie beide Felder aus!');\n return;\n }\n\n if (newPassword !== confirmPassword) {\n alert('Die Passw\u00f6rter stimmen nicht \u00fcberein!');\n return;\n }\n\n users[changePasswordUsername].password = newPassword;\n saveData();\n logActivity('password_change', `Passwort f\u00fcr Benutzer ${changePasswordUsername} wurde ge\u00e4ndert`);\n closeChangePassword();\n renderUserList();\n alert('Passwort erfolgreich ge\u00e4ndert!');\n }\n\n function showMainApp() {\n document.getElementById('loginScreen').style.display = 'none';\n document.getElementById('mainApp').style.display = 'block';\n \n document.getElementById('displayUsername').textContent = currentUser.name;\n const roleNames = { 'admin': 'Administrator', 'editor': 'Bearbeiter', 'viewer': 'Betrachter' };\n document.getElementById('displayRole').textContent = roleNames[currentUser.role];\n\n updateUIForRole();\n renderCalendar();\n }\n\n function updateUIForRole() {\n const role = currentUser.role;\n const backendBtn = document.getElementById('backendBtn');\n \n if (role === 'viewer') {\n backendBtn.disabled = true;\n backendBtn.title = 'Keine Berechtigung';\n } else {\n backendBtn.disabled = false;\n backendBtn.title = '';\n }\n\n const capacityTab = document.getElementById('capacityTab');\n const notificationsTab = document.getElementById('notificationsTab');\n const usersTab = document.getElementById('usersTab');\n const activityTab = document.getElementById('activityTab');\n\n if (role === 'editor') {\n capacityTab.disabled = true;\n notificationsTab.disabled = true;\n usersTab.disabled = true;\n activityTab.disabled = false;\n } else if (role === 'admin') {\n capacityTab.disabled = false;\n notificationsTab.disabled = false;\n usersTab.disabled = false;\n activityTab.disabled = false;\n }\n }\n\n function hasPermission(requiredRole) {\n const roleHierarchy = { 'viewer': 0, 'editor': 1, 'admin': 2 };\n return roleHierarchy[currentUser.role] >= roleHierarchy[requiredRole];\n }\n\n function switchView(view) {\n if (view === 'backend' && !hasPermission('editor')) {\n alert('Sie haben keine Berechtigung f\u00fcr den Verwaltungsbereich.');\n return;\n }\n\n currentView = view;\n document.getElementById('frontendView').classList.remove('active');\n document.getElementById('backendView').classList.remove('active');\n \n if (view === 'frontend') {\n document.getElementById('frontendView').classList.add('active');\n renderCalendar();\n } else {\n document.getElementById('backendView').classList.add('active');\n renderBackend();\n }\n }\n\n function switchBackendTab(tab) {\n if ((tab === 'capacity' || tab === 'notifications' || tab === 'users') && !hasPermission('admin')) {\n alert('Nur Administratoren haben Zugriff auf diese Einstellungen.');\n return;\n }\n\n currentBackendTab = tab;\n document.querySelectorAll('.backend-tab').forEach(t => t.classList.remove('active'));\n document.querySelectorAll('.backend-panel').forEach(p => p.classList.remove('active'));\n \n event.target.classList.add('active');\n document.getElementById(tab + 'Panel').classList.add('active');\n \n if (tab === 'bookings') renderBookingList();\n else if (tab === 'notifications') loadEmailSettings();\n else if (tab === 'users') renderUserList();\n else if (tab === 'activity') renderActivityLog();\n }\n\n function renderBackend() {\n renderCapacityGrid();\n renderBookingForm();\n renderBookingList();\n loadEmailSettings();\n renderUserList();\n renderActivityLog();\n }\n\n function renderCapacityGrid() {\n const grid = document.getElementById('capacityGrid');\n const isDisabled = !hasPermission('admin');\n \n grid.innerHTML = stations.map(station => `\n <div class=\"capacity-card\">\n <h3>${station}<\/h3>\n <label>Maximale Anzahl Pl\u00e4tze:<\/label>\n <input type=\"number\" id=\"cap-${station}\" value=\"${capacity[station]}\" \n min=\"1\" max=\"20\" ${isDisabled ? 'disabled' : ''}>\n <label style=\"margin-top: 15px;\">\n <input type=\"checkbox\" id=\"color-enabled-${station}\"\n ${colorEnabled[station] ? 'checked' : ''}\n ${isDisabled ? 'disabled' : ''}\n onchange=\"toggleColorPicker('${station}')\">\n Farbliche Markierung aktivieren\n <\/label>\n <div id=\"color-picker-${station}\" style=\"display: ${colorEnabled[station] ? 'block' : 'none'}; margin-top: 10px;\">\n <label>Farbe w\u00e4hlen:<\/label>\n <input type=\"color\" id=\"color-${station}\" value=\"${stationColors[station]}\"\n ${isDisabled ? 'disabled' : ''}>\n <div class=\"color-preview\">\n <div class=\"color-sample\" style=\"background: ${stationColors[station]};\"><\/div>\n <span style=\"font-size: 0.9em; color: #666;\">Vorschau<\/span>\n <\/div>\n <\/div>\n <\/div>\n `).join('');\n }\n\n function toggleColorPicker(station) {\n const checkbox = document.getElementById(`color-enabled-${station}`);\n const picker = document.getElementById(`color-picker-${station}`);\n picker.style.display = checkbox.checked ? 'block' : 'none';\n }\n\n function saveCapacities() {\n if (!hasPermission('admin')) {\n alert('Nur Administratoren k\u00f6nnen Kapazit\u00e4ten \u00e4ndern.');\n return;\n }\n\n stations.forEach(station => {\n const oldCap = capacity[station];\n capacity[station] = parseInt(document.getElementById(`cap-${station}`).value);\n colorEnabled[station] = document.getElementById(`color-enabled-${station}`).checked;\n stationColors[station] = document.getElementById(`color-${station}`).value;\n \n if (oldCap !== capacity[station]) {\n logActivity('update', `Kapazit\u00e4t f\u00fcr ${station} von ${oldCap} auf ${capacity[station]} ge\u00e4ndert`);\n }\n });\n saveData();\n }\n\n function renderBookingForm() {\n const select = document.getElementById('bookingStation');\n select.innerHTML = '<option value=\"\">Wache ausw\u00e4hlen<\/option>' + \n stations.map(s => `<option value=\"${s}\">${s}<\/option>`).join('');\n }\n\n function addBooking() {\n if (!hasPermission('editor')) {\n alert('Sie haben keine Berechtigung, Buchungen hinzuzuf\u00fcgen.');\n return;\n }\n\n const station = document.getElementById('bookingStation').value;\n const date = document.getElementById('bookingDate').value;\n const count = parseInt(document.getElementById('bookingCount').value);\n const comment = document.getElementById('bookingComment').value;\n \n if (!station || !date || isNaN(count)) {\n alert('Bitte f\u00fcllen Sie alle Pflichtfelder aus!');\n return;\n }\n \n const key = `${station}_${date}`;\n const previousCount = bookings[key] || 0;\n const isNew = !bookings[key];\n \n bookings[key] = count;\n if (comment) comments[key] = comment;\n \n const action = isNew ? 'create' : 'update';\n logActivity(action, `Buchung f\u00fcr ${station} am ${formatDate(date)}: ${count} Pl\u00e4tze${comment ? ' (Kommentar hinzugef\u00fcgt)' : ''}`);\n \n saveData();\n checkAndSendNotification(station, date, count, previousCount);\n renderBookingList();\n \n document.getElementById('bookingStation').value = '';\n document.getElementById('bookingDate').value = '';\n document.getElementById('bookingCount').value = '';\n document.getElementById('bookingComment').value = '';\n }\n\n function checkAndSendNotification(station, date, newCount, oldCount) {\n if (!emailSettings.enabled || !emailSettings.address) return;\n \n const available = capacity[station] - newCount;\n const percentage = (available \/ capacity[station]) * 100;\n \n let shouldNotify = false;\n let notificationType = '';\n \n if (emailSettings.notifyNewBooking && newCount > oldCount) {\n shouldNotify = true;\n notificationType = 'Neue Buchung';\n }\n \n if (emailSettings.notifyFullyBooked && available === 0) {\n shouldNotify = true;\n notificationType = 'Wache ausgebucht';\n }\n \n if (emailSettings.notifyLowCapacity && percentage < 20 && percentage > 0) {\n shouldNotify = true;\n notificationType = 'Geringe Verf\u00fcgbarkeit';\n }\n \n if (shouldNotify) {\n simulateEmailSend(station, date, available, capacity[station], notificationType);\n }\n }\n\n function simulateEmailSend(station, date, available, total, type) {\n console.log('\ud83d\udce7 E-Mail w\u00fcrde gesendet werden:');\n console.log(`An: ${emailSettings.address}`);\n console.log(`Betreff: ${type} - ${station}`);\n console.log(`Datum: ${formatDate(date)}`);\n console.log(`Verf\u00fcgbar: ${available}\/${total}`);\n \n logActivity('notification', `E-Mail-Benachrichtigung: ${type} f\u00fcr ${station}`);\n \n const indicator = document.getElementById('saveIndicator');\n indicator.textContent = '\ud83d\udce7 E-Mail-Benachrichtigung gesendet!';\n indicator.style.background = '#2196f3';\n indicator.classList.add('active');\n setTimeout(() => {\n indicator.classList.remove('active');\n indicator.textContent = '\u2713 Gespeichert!';\n indicator.style.background = '#4caf50';\n }, 3000);\n }\n\n function renderBookingList() {\n const list = document.getElementById('bookingList');\n const entries = [];\n \n Object.keys(bookings).forEach(key => {\n const [station, date] = key.split('_');\n entries.push({ key, station, date, count: bookings[key], comment: comments[key] || '' });\n });\n \n entries.sort((a, b) => new Date(b.date) - new Date(a.date));\n \n if (entries.length === 0) {\n list.innerHTML = '<p style=\"text-align: center; color: #999;\">Keine Buchungen vorhanden<\/p>';\n return;\n }\n\n const canEdit = hasPermission('editor');\n \n list.innerHTML = entries.map(entry => `\n <div class=\"booking-item\">\n <div class=\"booking-info\">\n <strong>${entry.station}<\/strong> - ${formatDate(entry.date)}<br>\n Buchungen: ${entry.count}\/${capacity[entry.station]}\n ${entry.comment ? '<br>\ud83d\udcac ' + entry.comment : ''}\n <\/div>\n ${canEdit ? `\n <div class=\"booking-actions\">\n <button class=\"btn btn-small\" onclick=\"editBooking('${entry.key}')\">\u270f\ufe0f<\/button>\n <button class=\"btn btn-small btn-danger\" onclick=\"deleteBooking('${entry.key}')\">\ud83d\uddd1\ufe0f<\/button>\n <\/div>\n ` : ''}\n <\/div>\n `).join('');\n }\n\n function editBooking(key) {\n if (!hasPermission('editor')) {\n alert('Sie haben keine Berechtigung, Buchungen zu bearbeiten.');\n return;\n }\n\n const [station, date] = key.split('_');\n document.getElementById('bookingStation').value = station;\n document.getElementById('bookingDate').value = date;\n document.getElementById('bookingCount').value = bookings[key];\n document.getElementById('bookingComment').value = comments[key] || '';\n window.scrollTo({ top: 0, behavior: 'smooth' });\n }\n\n function deleteBooking(key) {\n if (!hasPermission('editor')) {\n alert('Sie haben keine Berechtigung, Buchungen zu l\u00f6schen.');\n return;\n }\n\n if (confirm('Wirklich l\u00f6schen?')) {\n const [station, date] = key.split('_');\n logActivity('delete', `Buchung f\u00fcr ${station} am ${formatDate(date)} gel\u00f6scht`);\n delete bookings[key];\n delete comments[key];\n saveData();\n renderBookingList();\n }\n }\n\n function loadEmailSettings() {\n document.getElementById('emailEnabled').checked = emailSettings.enabled;\n document.getElementById('emailAddress').value = emailSettings.address;\n document.getElementById('notifyNewBooking').checked = emailSettings.notifyNewBooking;\n document.getElementById('notifyFullyBooked').checked = emailSettings.notifyFullyBooked;\n document.getElementById('notifyLowCapacity').checked = emailSettings.notifyLowCapacity;\n toggleEmailSettings();\n }\n\n function toggleEmailSettings() {\n const enabled = document.getElementById('emailEnabled').checked;\n document.getElementById('emailConfig').style.display = enabled ? 'block' : 'none';\n }\n\n function saveEmailSettings() {\n if (!hasPermission('admin')) {\n alert('Nur Administratoren k\u00f6nnen E-Mail-Einstellungen \u00e4ndern.');\n return;\n }\n\n emailSettings.enabled = document.getElementById('emailEnabled').checked;\n emailSettings.address = document.getElementById('emailAddress').value;\n emailSettings.notifyNewBooking = document.getElementById('notifyNewBooking').checked;\n emailSettings.notifyFullyBooked = document.getElementById('notifyFullyBooked').checked;\n emailSettings.notifyLowCapacity = document.getElementById('notifyLowCapacity').checked;\n logActivity('update', `E-Mail-Einstellungen aktualisiert`);\n saveData();\n }\n\n function sendTestEmail() {\n if (!emailSettings.enabled || !emailSettings.address) {\n alert('Bitte aktivieren Sie E-Mail-Benachrichtigungen und geben Sie eine E-Mail-Adresse ein.');\n return;\n }\n \n simulateEmailSend('RW50', new Date().toISOString().split('T')[0], 1, 2, 'Test-Benachrichtigung');\n alert(`Test-E-Mail w\u00fcrde an ${emailSettings.address} gesendet.`);\n }\n\n function addUser() {\n if (!hasPermission('admin')) {\n alert('Nur Administratoren k\u00f6nnen Benutzer hinzuf\u00fcgen.');\n return;\n }\n\n const username = document.getElementById('newUsername').value;\n const password = document.getElementById('newPassword').value;\n const role = document.getElementById('newUserRole').value;\n\n if (!username || !password) {\n alert('Bitte f\u00fcllen Sie alle Felder aus!');\n return;\n }\n\n if (users[username]) {\n alert('Benutzername existiert bereits!');\n return;\n }\n\n users[username] = { password: password, role: role, name: username };\n logActivity('create', `Neuer Benutzer erstellt: ${username} (${role})`);\n saveData();\n renderUserList();\n\n document.getElementById('newUsername').value = '';\n document.getElementById('newPassword').value = '';\n }\n\n function deleteUser(username) {\n if (!hasPermission('admin')) {\n alert('Nur Administratoren k\u00f6nnen Benutzer l\u00f6schen.');\n return;\n }\n\n if (username === currentUser.username) {\n alert('Sie k\u00f6nnen sich nicht selbst l\u00f6schen!');\n return;\n }\n\n if (confirm(`Benutzer \"${username}\" wirklich l\u00f6schen?`)) {\n logActivity('delete', `Benutzer gel\u00f6scht: ${username}`);\n delete users[username];\n saveData();\n renderUserList();\n }\n }\n\n function changeUserRole(username, newRole) {\n if (!hasPermission('admin')) {\n alert('Nur Administratoren k\u00f6nnen Rollen \u00e4ndern.');\n return;\n }\n\n const oldRole = users[username].role;\n users[username].role = newRole;\n logActivity('update', `Rolle f\u00fcr ${username} von ${oldRole} zu ${newRole} ge\u00e4ndert`);\n saveData();\n renderUserList();\n }\n\n function renderUserList() {\n const list = document.getElementById('userList');\n const userEntries = Object.keys(users);\n\n if (userEntries.length === 0) {\n list.innerHTML = '<p style=\"text-align: center; color: #999;\">Keine Benutzer vorhanden<\/p>';\n return;\n }\n\n const roleNames = { 'admin': 'Administrator', 'editor': 'Bearbeiter', 'viewer': 'Betrachter' };\n\n list.innerHTML = userEntries.map(username => {\n const user = users[username];\n const roleBadgeClass = `role-${user.role}`;\n \n return `\n <div class=\"user-item\">\n <div class=\"user-item-info\">\n <strong>${user.name}<\/strong>\n <span class=\"user-role-badge ${roleBadgeClass}\">${roleNames[user.role]}<\/span>\n <\/div>\n <div class=\"booking-actions\">\n <select onchange=\"changeUserRole('${username}', this.value)\" style=\"padding: 5px; border-radius: 5px; border: 2px solid #ddd;\">\n <option value=\"viewer\" ${user.role === 'viewer' ? 'selected' : ''}>Betrachter<\/option>\n <option value=\"editor\" ${user.role === 'editor' ? 'selected' : ''}>Bearbeiter<\/option>\n <option value=\"admin\" ${user.role === 'admin' ? 'selected' : ''}>Administrator<\/option>\n <\/select>\n <button class=\"btn btn-small\" onclick=\"showChangePassword('${username}')\" title=\"Passwort \u00e4ndern\">\ud83d\udd11<\/button>\n <button class=\"btn btn-small btn-danger\" onclick=\"deleteUser('${username}')\" ${username === currentUser.username ? 'disabled' : ''}>\ud83d\uddd1\ufe0f<\/button>\n <\/div>\n <\/div>\n `;\n }).join('');\n }\n\n function renderActivityLog() {\n updateActivityFilters();\n filterActivities();\n }\n\n function updateActivityFilters() {\n const filterUser = document.getElementById('filterUser');\n const uniqueUsers = [...new Set(activityLog.map(a => a.user))];\n \n filterUser.innerHTML = '<option value=\"\">Alle Benutzer<\/option>' +\n uniqueUsers.map(user => `<option value=\"${user}\">${user}<\/option>`).join('');\n }\n\n function filterActivities() {\n const filterUser = document.getElementById('filterUser').value;\n const filterAction = document.getElementById('filterAction').value;\n const filterDays = document.getElementById('filterDays').value;\n\n let filtered = [...activityLog];\n\n if (filterUser) {\n filtered = filtered.filter(a => a.user === filterUser);\n }\n\n if (filterAction) {\n filtered = filtered.filter(a => a.action === filterAction);\n }\n\n if (filterDays !== 'all') {\n const days = parseInt(filterDays);\n const cutoff = new Date();\n cutoff.setDate(cutoff.getDate() - days);\n filtered = filtered.filter(a => new Date(a.timestamp) >= cutoff);\n }\n\n displayActivityLog(filtered);\n }\n\n function displayActivityLog(activities) {\n const list = document.getElementById('activityList');\n\n if (activities.length === 0) {\n list.innerHTML = '<p style=\"text-align: center; color: #999;\">Keine Aktivit\u00e4ten im gew\u00e4hlten Zeitraum<\/p>';\n return;\n }\n\n const actionIcons = {\n 'login': '\ud83d\udd13',\n 'logout': '\ud83d\udd12',\n 'create': '\u2795',\n 'update': '\u270f\ufe0f',\n 'delete': '\ud83d\uddd1\ufe0f',\n 'password_reset': '\ud83d\udd11',\n 'password_change': '\ud83d\udd10',\n 'notification': '\ud83d\udce7'\n };\n\n const actionNames = {\n 'login': 'Anmeldung',\n 'logout': 'Abmeldung',\n 'create': 'Erstellt',\n 'update': 'Aktualisiert',\n 'delete': 'Gel\u00f6scht',\n 'password_reset': 'Passwort zur\u00fcckgesetzt',\n 'password_change': 'Passwort ge\u00e4ndert',\n 'notification': 'Benachrichtigung'\n };\n\n list.innerHTML = activities.map(activity => {\n const date = new Date(activity.timestamp);\n const timeStr = date.toLocaleString('de-DE', {\n day: '2-digit',\n month: '2-digit',\n year: 'numeric',\n hour: '2-digit',\n minute: '2-digit'\n });\n\n return `\n <div class=\"activity-item action-${activity.action}\">\n <div style=\"flex: 1;\">\n <div>\n <strong>${actionIcons[activity.action] || '\ud83d\udcdd'} ${actionNames[activity.action] || activity.action}<\/strong>\n <span style=\"margin-left: 10px; color: #666;\">von ${activity.user}<\/span>\n <\/div>\n <div style=\"margin-top: 5px; color: #666;\">${activity.details}<\/div>\n <div class=\"activity-meta\">${timeStr}<\/div>\n <\/div>\n <\/div>\n `;\n }).join('');\n }\n\n function clearActivityLog() {\n if (!hasPermission('admin')) {\n alert('Nur Administratoren k\u00f6nnen das Aktivit\u00e4tsprotokoll l\u00f6schen.');\n return;\n }\n\n if (confirm('Wirklich das gesamte Aktivit\u00e4tsprotokoll l\u00f6schen?')) {\n logActivity('delete', 'Aktivit\u00e4tsprotokoll wurde geleert');\n activityLog = activityLog.slice(0, 1); \/\/ Nur letzte Aktivit\u00e4t (das L\u00f6schen selbst) behalten\n saveData();\n renderActivityLog();\n }\n }\n\n function formatDate(dateStr) {\n const date = new Date(dateStr + 'T00:00:00');\n return date.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' });\n }\n\n function getBookingKey(station, date) {\n return `${station}_${date.toISOString().split('T')[0]}`;\n }\n\n function getAvailable(station, date) {\n const key = getBookingKey(station, date);\n const booked = bookings[key] || 0;\n return capacity[station] - booked;\n }\n\n function hasComment(station, date) {\n const key = getBookingKey(station, date);\n return !!comments[key];\n }\n\n function showComment(station, date) {\n const key = getBookingKey(station, date);\n const comment = comments[key];\n \n if (!comment) return;\n \n document.getElementById('commentDate').textContent = `${station} - ${formatDate(date.toISOString().split('T')[0])}`;\n document.getElementById('commentText').textContent = comment;\n document.getElementById('commentModal').classList.add('active');\n }\n\n function closeCommentModal() {\n document.getElementById('commentModal').classList.remove('active');\n }\n\n function getStatusClass(available, total) {\n const percentage = (available \/ total) * 100;\n if (percentage > 50) return 'status-green';\n if (percentage >= 20) return 'status-yellow';\n return 'status-red';\n }\n\n function getDaysInMonth(date) {\n const year = date.getFullYear();\n const month = date.getMonth();\n return new Date(year, month + 1, 0).getDate();\n }\n\n function previousMonth() {\n currentDate.setMonth(currentDate.getMonth() - 1);\n renderCalendar();\n }\n\n function nextMonth() {\n currentDate.setMonth(currentDate.getMonth() + 1);\n renderCalendar();\n }\n\n function isWeekend(date) {\n const day = date.getDay();\n return day === 0 || day === 6;\n }\n\n function isToday(date) {\n const today = new Date();\n return date.toDateString() === today.toDateString();\n }\n\n function renderCalendar() {\n const year = currentDate.getFullYear();\n const month = currentDate.getMonth();\n const daysInMonth = getDaysInMonth(currentDate);\n \n const monthNames = ['Januar', 'Februar', 'M\u00e4rz', 'April', 'Mai', 'Juni', \n 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'];\n \n document.getElementById('currentMonth').textContent = `${monthNames[month]} ${year}`;\n \n let html = '<thead><tr><th>Wache<\/th>';\n \n for (let day = 1; day <= daysInMonth; day++) {\n const date = new Date(year, month, day);\n const dayName = ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'][date.getDay()];\n html += `<th>${dayName}<br>${day}.<\/th>`;\n }\n \n html += '<\/tr><\/thead><tbody>';\n \n stations.forEach(station => {\n const stationStyle = colorEnabled[station] \n ? `class=\"station-colored\" style=\"background: ${stationColors[station]};\"` \n : '';\n html += `<tr><td><span ${stationStyle}>${station}<\/span><\/td>`;\n \n for (let day = 1; day <= daysInMonth; day++) {\n const date = new Date(year, month, day);\n const available = getAvailable(station, date);\n const total = capacity[station];\n const statusClass = getStatusClass(available, total);\n const comment = hasComment(station, date);\n \n let cellClass = 'day-cell';\n if (isWeekend(date)) cellClass += ' weekend';\n if (isToday(date)) cellClass += ' today';\n \n html += `<td class=\"${cellClass}\" onclick='${comment ? `showComment(\"${station}\", new Date(${year}, ${month}, ${day}))` : ''}'>\n <div class=\"status-indicator ${statusClass}\">${available}\/${total}<\/div>\n ${comment ? '<span class=\"comment-indicator\" title=\"Kommentar vorhanden\">\ud83d\udcac<\/span>' : ''}\n <\/td>`;\n }\n \n html += '<\/tr>';\n });\n \n html += '<\/tbody>';\n \n document.getElementById('calendarTable').innerHTML = html;\n }\n\n async function exportPDF(type) {\n const { jsPDF } = window.jspdf;\n const doc = new jsPDF('l', 'mm', 'a4');\n \n const year = currentDate.getFullYear();\n const month = currentDate.getMonth();\n const daysInMonth = getDaysInMonth(currentDate);\n const monthNames = ['Januar', 'Februar', 'M\u00e4rz', 'April', 'Mai', 'Juni', \n 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'];\n \n const title = type === 'all' \n ? `Praktikumsplatz-\u00dcbersicht Alle Wachen - ${monthNames[month]} ${year}`\n : `Praktikumsplatz-\u00dcbersicht ${type} - ${monthNames[month]} ${year}`;\n \n doc.setFontSize(16);\n doc.text(title, 15, 15);\n \n doc.setFontSize(10);\n doc.text(`Erstellt am: ${new Date().toLocaleDateString('de-DE')} von ${currentUser.name}`, 15, 22);\n \n const stationsToExport = type === 'all' ? stations : [type];\n \n const tableData = [];\n stationsToExport.forEach(station => {\n for (let day = 1; day <= daysInMonth; day++) {\n const date = new Date(year, month, day);\n const key = getBookingKey(station, date);\n const available = getAvailable(station, date);\n const total = capacity[station];\n const booked = bookings[key] || 0;\n const comment = comments[key] || '';\n const dateStr = date.toLocaleDateString('de-DE');\n const dayName = ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'][date.getDay()];\n \n let status = '\u2713 Verf\u00fcgbar';\n const percentage = (available \/ total) * 100;\n if (percentage <= 20 && available > 0) status = '\u26a0 Wenig verf\u00fcgbar';\n if (available === 0) status = '\u2717 Ausgebucht';\n \n tableData.push([\n station,\n `${dayName} ${dateStr}`,\n `${available}\/${total}`,\n status,\n comment || '-'\n ]);\n }\n });\n \n doc.autoTable({\n startY: 30,\n head: [['Wache', 'Datum', 'Verf\u00fcgbar', 'Status', 'Kommentar']],\n body: tableData,\n theme: 'striped',\n styles: { fontSize: 9 },\n headStyles: { fillColor: [102, 126, 234], textColor: 255 },\n alternateRowStyles: { fillColor: [245, 245, 245] },\n columnStyles: {\n 0: { cellWidth: 25 },\n 1: { cellWidth: 35 },\n 2: { cellWidth: 25 },\n 3: { cellWidth: 35 },\n 4: { cellWidth: 'auto' }\n }\n });\n \n const fileName = type === 'all' \n ? `Praktikumsplaetze_Gesamt_${monthNames[month]}_${year}.pdf`\n : `Praktikumsplaetze_${type}_${monthNames[month]}_${year}.pdf`;\n \n logActivity('create', `PDF-Export erstellt: ${fileName}`);\n doc.save(fileName);\n }\n\n function showExportMenu() {\n const list = document.getElementById('exportStationList');\n list.innerHTML = stations.map(station => `\n <button class=\"btn\" style=\"width: 100%; margin-bottom: 10px;\" \n onclick=\"exportPDF('${station}'); closeExportModal();\">\n ${station}\n <\/button>\n `).join('');\n document.getElementById('exportModal').classList.add('active');\n }\n\n function closeExportModal() {\n document.getElementById('exportModal').classList.remove('active');\n }\n\n document.getElementById('commentModal').addEventListener('click', function(e) {\n if (e.target === this) closeCommentModal();\n });\n\n document.getElementById('exportModal').addEventListener('click', function(e) {\n if (e.target === this) closeExportModal();\n });\n\n document.getElementById('passwordResetModal').addEventListener('click', function(e) {\n if (e.target === this) closePasswordReset();\n });\n\n document.getElementById('changePasswordModal').addEventListener('click', function(e) {\n if (e.target === this) closeChangePassword();\n });\n\n initializeData();\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Praktikumsplatz-Kalender \ud83d\ude91 Praktikumsplatz-Kalender Bitte melden Sie sich an BetrachterBearbeiterAdministrator Anmelden Passwort vergessen? Benutzerrollen: Betrachter: Kalender ansehen & exportieren Bearbeiter: + Buchungen & Kommentare verwalten Administrator: + Alle Einstellungen & Benutzerverwaltung Demo: Beliebiger Benutzername\/Passwort \ud83d\ude91 Praktikumsplatz-Kalender Rettungswachen Verf\u00fcgbarkeit der Praktikumspl\u00e4tze im \u00dcberblick \ud83d\udeaa Abmelden \ud83d\udc41\ufe0f \u00d6ffentliche Ansicht \u2699\ufe0f Verwaltung (Backend) \u2190 Vorheriger Monat N\u00e4chster Monat \u2192 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-49","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/rettungstormarn.wenk-hh.de\/index.php\/wp-json\/wp\/v2\/pages\/49","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rettungstormarn.wenk-hh.de\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/rettungstormarn.wenk-hh.de\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/rettungstormarn.wenk-hh.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rettungstormarn.wenk-hh.de\/index.php\/wp-json\/wp\/v2\/comments?post=49"}],"version-history":[{"count":5,"href":"https:\/\/rettungstormarn.wenk-hh.de\/index.php\/wp-json\/wp\/v2\/pages\/49\/revisions"}],"predecessor-version":[{"id":54,"href":"https:\/\/rettungstormarn.wenk-hh.de\/index.php\/wp-json\/wp\/v2\/pages\/49\/revisions\/54"}],"wp:attachment":[{"href":"https:\/\/rettungstormarn.wenk-hh.de\/index.php\/wp-json\/wp\/v2\/media?parent=49"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":49,"date":"2025-10-20T17:41:14","date_gmt":"2025-10-20T17:41:14","guid":{"rendered":"https:\/\/rettungstormarn.wenk-hh.de\/?page_id=49"},"modified":"2025-10-20T18:10:41","modified_gmt":"2025-10-20T18:10:41","slug":"praktikumsuebersicht","status":"publish","type":"page","link":"https:\/\/rettungstormarn.wenk-hh.de\/index.php\/praktikumsuebersicht\/","title":{"rendered":"Praktikums\u00fcbersicht"},"content":{"rendered":"\n\n\n\n \n \n Praktikumsplatz-Kalender<\/title>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/2.5.1\/jspdf.umd.min.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf-autotable\/3.5.31\/jspdf.plugin.autotable.min.js\"><\/script>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n padding: 20px;\n min-height: 100vh;\n }\n\n .container {\n max-width: 1600px;\n margin: 0 auto;\n background: white;\n border-radius: 15px;\n box-shadow: 0 20px 60px rgba(0,0,0,0.3);\n overflow: hidden;\n }\n\n \/* Login Screen *\/\n .login-screen {\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 80vh;\n padding: 40px;\n }\n\n .login-box {\n background: white;\n padding: 40px;\n border-radius: 15px;\n box-shadow: 0 10px 40px rgba(0,0,0,0.2);\n max-width: 400px;\n width: 100%;\n }\n\n .login-box h2 {\n color: #667eea;\n margin-bottom: 10px;\n text-align: center;\n }\n\n .login-box p {\n text-align: center;\n color: #666;\n margin-bottom: 30px;\n }\n\n .login-form {\n display: flex;\n flex-direction: column;\n gap: 15px;\n }\n\n .login-form input,\n .login-form select {\n padding: 12px;\n border: 2px solid #ddd;\n border-radius: 8px;\n font-size: 1em;\n }\n\n .login-form input:focus,\n .login-form select:focus {\n outline: none;\n border-color: #667eea;\n }\n\n .forgot-password-link {\n text-align: center;\n margin-top: 15px;\n }\n\n .forgot-password-link a {\n color: #667eea;\n text-decoration: none;\n font-size: 0.9em;\n cursor: pointer;\n }\n\n .forgot-password-link a:hover {\n text-decoration: underline;\n }\n\n .role-info {\n background: #f5f5f5;\n padding: 15px;\n border-radius: 8px;\n margin-top: 20px;\n }\n\n .role-info h4 {\n color: #667eea;\n margin-bottom: 10px;\n }\n\n .role-info ul {\n margin-left: 20px;\n color: #666;\n font-size: 0.9em;\n }\n\n .role-info li {\n margin-bottom: 5px;\n }\n\n .header {\n background: linear-gradient(135deg, #e53935 0%, #c62828 100%);\n color: white;\n padding: 30px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .header-left h1 {\n font-size: 2em;\n margin-bottom: 10px;\n }\n\n .header-right {\n text-align: right;\n }\n\n .user-info {\n background: rgba(255,255,255,0.2);\n padding: 10px 20px;\n border-radius: 8px;\n margin-bottom: 10px;\n }\n\n .user-info strong {\n display: block;\n font-size: 1.1em;\n }\n\n .user-role {\n font-size: 0.9em;\n opacity: 0.9;\n }\n\n .view-toggle {\n background: #f5f5f5;\n padding: 15px;\n text-align: center;\n border-bottom: 2px solid #ddd;\n }\n\n .view-toggle button {\n margin: 0 10px;\n }\n\n .controls {\n background: #f5f5f5;\n padding: 20px;\n border-bottom: 2px solid #ddd;\n }\n\n .month-nav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 20px;\n }\n\n .month-nav h2 {\n color: #333;\n font-size: 1.5em;\n }\n\n .btn {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n border: none;\n padding: 10px 20px;\n border-radius: 8px;\n cursor: pointer;\n font-size: 1em;\n transition: transform 0.2s, box-shadow 0.2s;\n }\n\n .btn:hover {\n transform: translateY(-2px);\n box-shadow: 0 5px 15px rgba(0,0,0,0.2);\n }\n\n .btn:active {\n transform: translateY(0);\n }\n\n .btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n transform: none;\n }\n\n .btn-success {\n background: linear-gradient(135deg, #4caf50, #45a049);\n }\n\n .btn-warning {\n background: linear-gradient(135deg, #ff9800, #f57c00);\n }\n\n .btn-danger {\n background: linear-gradient(135deg, #f44336, #d32f2f);\n }\n\n .btn-logout {\n background: linear-gradient(135deg, #f44336, #d32f2f);\n padding: 8px 16px;\n font-size: 0.9em;\n }\n\n .export-section {\n display: flex;\n gap: 10px;\n justify-content: center;\n flex-wrap: wrap;\n margin-top: 15px;\n }\n\n \/* Backend-Ansicht *\/\n .backend-view {\n display: none;\n }\n\n .backend-view.active {\n display: block;\n }\n\n .backend-tabs {\n display: flex;\n background: #e0e0e0;\n border-bottom: 3px solid #667eea;\n overflow-x: auto;\n }\n\n .backend-tab {\n flex: 1;\n padding: 15px;\n text-align: center;\n cursor: pointer;\n background: #f5f5f5;\n border: none;\n font-size: 1em;\n font-weight: bold;\n transition: background 0.3s;\n white-space: nowrap;\n }\n\n .backend-tab:hover {\n background: #e8e8e8;\n }\n\n .backend-tab.active {\n background: white;\n color: #667eea;\n }\n\n .backend-tab:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .backend-content {\n padding: 30px;\n }\n\n .backend-panel {\n display: none;\n }\n\n .backend-panel.active {\n display: block;\n }\n\n .capacity-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 20px;\n margin-bottom: 30px;\n }\n\n .capacity-card {\n background: #f9f9f9;\n padding: 20px;\n border-radius: 10px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n }\n\n .capacity-card h3 {\n color: #667eea;\n margin-bottom: 15px;\n }\n\n .capacity-card label {\n display: block;\n font-weight: bold;\n color: #333;\n margin-bottom: 8px;\n }\n\n .capacity-card input[type=\"number\"],\n .capacity-card input[type=\"color\"] {\n width: 100%;\n padding: 10px;\n border: 2px solid #ddd;\n border-radius: 5px;\n font-size: 1em;\n margin-bottom: 10px;\n }\n\n .capacity-card input[type=\"color\"] {\n height: 50px;\n cursor: pointer;\n }\n\n .color-preview {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-top: 5px;\n }\n\n .color-sample {\n width: 40px;\n height: 40px;\n border-radius: 5px;\n border: 2px solid #ddd;\n }\n\n .booking-editor {\n background: #f9f9f9;\n padding: 20px;\n border-radius: 10px;\n margin-bottom: 20px;\n }\n\n .booking-form {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 15px;\n margin-bottom: 15px;\n }\n\n .booking-form select,\n .booking-form input {\n padding: 10px;\n border: 2px solid #ddd;\n border-radius: 5px;\n font-size: 1em;\n }\n\n .booking-list,\n .activity-list {\n max-height: 400px;\n overflow-y: auto;\n }\n\n .booking-item,\n .activity-item {\n background: white;\n padding: 15px;\n border-radius: 8px;\n margin-bottom: 10px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n }\n\n .activity-item {\n border-left: 4px solid #667eea;\n }\n\n .activity-item.action-create {\n border-left-color: #4caf50;\n }\n\n .activity-item.action-update {\n border-left-color: #ff9800;\n }\n\n .activity-item.action-delete {\n border-left-color: #f44336;\n }\n\n .activity-item.action-login {\n border-left-color: #2196f3;\n }\n\n .activity-meta {\n font-size: 0.85em;\n color: #999;\n margin-top: 5px;\n }\n\n .activity-filters {\n display: flex;\n gap: 10px;\n margin-bottom: 20px;\n flex-wrap: wrap;\n }\n\n .activity-filters select {\n padding: 8px;\n border: 2px solid #ddd;\n border-radius: 5px;\n }\n\n .booking-info {\n flex: 1;\n }\n\n .booking-info strong {\n color: #667eea;\n }\n\n .booking-actions {\n display: flex;\n gap: 10px;\n }\n\n .btn-small {\n padding: 5px 15px;\n font-size: 0.9em;\n }\n\n .email-settings {\n background: #f9f9f9;\n padding: 20px;\n border-radius: 10px;\n margin-bottom: 20px;\n }\n\n .email-settings label {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 15px;\n cursor: pointer;\n }\n\n .email-settings input[type=\"checkbox\"] {\n width: 20px;\n height: 20px;\n cursor: pointer;\n }\n\n .email-settings input[type=\"email\"] {\n width: 100%;\n padding: 10px;\n border: 2px solid #ddd;\n border-radius: 5px;\n font-size: 1em;\n margin-top: 10px;\n }\n\n .user-management {\n background: #f9f9f9;\n padding: 20px;\n border-radius: 10px;\n margin-bottom: 20px;\n }\n\n .user-list {\n display: grid;\n gap: 15px;\n margin-top: 20px;\n }\n\n .user-item {\n background: white;\n padding: 15px;\n border-radius: 8px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n }\n\n .user-item-info strong {\n color: #667eea;\n font-size: 1.1em;\n }\n\n .user-role-badge {\n display: inline-block;\n padding: 5px 15px;\n border-radius: 20px;\n font-size: 0.85em;\n font-weight: bold;\n margin-left: 10px;\n }\n\n .role-admin {\n background: #f44336;\n color: white;\n }\n\n .role-editor {\n background: #ff9800;\n color: white;\n }\n\n .role-viewer {\n background: #4caf50;\n color: white;\n }\n\n \/* Frontend-Ansicht *\/\n .frontend-view {\n display: none;\n }\n\n .frontend-view.active {\n display: block;\n }\n\n .calendar {\n padding: 20px;\n overflow-x: auto;\n }\n\n table {\n width: 100%;\n border-collapse: collapse;\n background: white;\n }\n\n th {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n padding: 15px 10px;\n text-align: center;\n font-weight: bold;\n position: sticky;\n top: 0;\n z-index: 10;\n }\n\n th:first-child {\n text-align: left;\n padding-left: 20px;\n }\n\n td {\n padding: 12px 10px;\n text-align: center;\n border-bottom: 1px solid #eee;\n transition: background 0.2s;\n }\n\n td:first-child {\n text-align: left;\n font-weight: bold;\n color: #333;\n padding-left: 20px;\n background: #f9f9f9;\n position: sticky;\n left: 0;\n z-index: 5;\n }\n\n .station-colored {\n padding: 8px 15px;\n border-radius: 5px;\n color: white;\n text-shadow: 1px 1px 2px rgba(0,0,0,0.3);\n }\n\n tr:hover td {\n background: #f0f0f0;\n }\n\n tr:hover td:first-child {\n background: #e8e8e8;\n }\n\n .day-cell {\n cursor: pointer;\n min-width: 80px;\n position: relative;\n }\n\n .status-indicator {\n display: inline-block;\n width: 60px;\n height: 60px;\n border-radius: 50%;\n line-height: 60px;\n font-weight: bold;\n font-size: 1.1em;\n transition: transform 0.2s, box-shadow 0.2s;\n }\n\n .day-cell:hover .status-indicator {\n transform: scale(1.1);\n box-shadow: 0 5px 15px rgba(0,0,0,0.3);\n }\n\n .status-green {\n background: linear-gradient(135deg, #4caf50, #45a049);\n color: white;\n }\n\n .status-yellow {\n background: linear-gradient(135deg, #ffc107, #ff9800);\n color: white;\n }\n\n .status-red {\n background: linear-gradient(135deg, #f44336, #d32f2f);\n color: white;\n }\n\n .weekend {\n background: #fff9e6;\n }\n\n .today {\n background: #e3f2fd !important;\n }\n\n .comment-indicator {\n display: inline-block;\n width: 20px;\n height: 20px;\n background: #2196f3;\n color: white;\n border-radius: 50%;\n font-size: 0.8em;\n line-height: 20px;\n margin-left: 5px;\n cursor: help;\n }\n\n .legend {\n display: flex;\n justify-content: center;\n gap: 30px;\n padding: 20px;\n background: #f5f5f5;\n border-top: 2px solid #ddd;\n flex-wrap: wrap;\n }\n\n .legend-item {\n display: flex;\n align-items: center;\n gap: 10px;\n }\n\n .legend-circle {\n width: 30px;\n height: 30px;\n border-radius: 50%;\n }\n\n \/* Modal *\/\n .modal {\n display: none;\n position: fixed;\n z-index: 1000;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background: rgba(0,0,0,0.6);\n backdrop-filter: blur(5px);\n }\n\n .modal.active {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .modal-content {\n background: white;\n padding: 30px;\n border-radius: 15px;\n max-width: 500px;\n width: 90%;\n box-shadow: 0 10px 40px rgba(0,0,0,0.3);\n max-height: 80vh;\n overflow-y: auto;\n }\n\n .modal-content h3 {\n color: #667eea;\n margin-bottom: 15px;\n }\n\n .modal-content textarea {\n width: 100%;\n padding: 10px;\n border: 2px solid #ddd;\n border-radius: 5px;\n font-size: 1em;\n font-family: inherit;\n resize: vertical;\n min-height: 100px;\n }\n\n .modal-content input {\n width: 100%;\n padding: 10px;\n border: 2px solid #ddd;\n border-radius: 5px;\n font-size: 1em;\n margin-bottom: 15px;\n }\n\n .modal-actions {\n display: flex;\n gap: 10px;\n justify-content: flex-end;\n margin-top: 20px;\n }\n\n .save-indicator {\n position: fixed;\n bottom: 20px;\n right: 20px;\n background: #4caf50;\n color: white;\n padding: 15px 25px;\n border-radius: 8px;\n box-shadow: 0 5px 15px rgba(0,0,0,0.3);\n display: none;\n animation: slideIn 0.3s;\n z-index: 1001;\n }\n\n .save-indicator.active {\n display: block;\n }\n\n @keyframes slideIn {\n from {\n transform: translateX(400px);\n opacity: 0;\n }\n to {\n transform: translateX(0);\n opacity: 1;\n }\n }\n\n .checkbox-group {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 10px;\n }\n\n .checkbox-group input[type=\"checkbox\"] {\n width: 20px;\n height: 20px;\n cursor: pointer;\n }\n\n @media (max-width: 768px) {\n .header {\n flex-direction: column;\n text-align: center;\n }\n\n .header-right {\n text-align: center;\n margin-top: 15px;\n }\n\n .capacity-grid {\n grid-template-columns: 1fr;\n }\n\n .booking-form {\n grid-template-columns: 1fr;\n }\n\n th, td {\n padding: 8px 5px;\n font-size: 0.9em;\n }\n\n .status-indicator {\n width: 45px;\n height: 45px;\n line-height: 45px;\n font-size: 0.9em;\n }\n\n .view-toggle button {\n font-size: 0.9em;\n padding: 8px 15px;\n margin: 5px;\n }\n\n .backend-tabs {\n font-size: 0.85em;\n }\n\n .activity-filters {\n flex-direction: column;\n }\n\n .activity-filters select {\n width: 100%;\n }\n }\n <\/style>\n<\/head>\n<body>\n \n <div class=\"login-screen\" id=\"loginScreen\">\n <div class=\"login-box\">\n <h2>\ud83d\ude91 Praktikumsplatz-Kalender<\/h2>\n <p>Bitte melden Sie sich an<\/p>\n \n <form class=\"login-form\" onsubmit=\"login(event)\">\n <input type=\"text\" id=\"loginUsername\" placeholder=\"Benutzername\" required>\n <input type=\"password\" id=\"loginPassword\" placeholder=\"Passwort\" required>\n <select id=\"loginRole\">\n <option value=\"viewer\">Betrachter<\/option>\n <option value=\"editor\">Bearbeiter<\/option>\n <option value=\"admin\">Administrator<\/option>\n <\/select>\n <button type=\"submit\" class=\"btn btn-success\">Anmelden<\/button>\n <\/form>\n\n <div class=\"forgot-password-link\">\n <a onclick=\"showPasswordReset()\">Passwort vergessen?<\/a>\n <\/div>\n\n <div class=\"role-info\">\n <h4>Benutzerrollen:<\/h4>\n <ul>\n <li><strong>Betrachter:<\/strong> Kalender ansehen & exportieren<\/li>\n <li><strong>Bearbeiter:<\/strong> + Buchungen & Kommentare verwalten<\/li>\n <li><strong>Administrator:<\/strong> + Alle Einstellungen & Benutzerverwaltung<\/li>\n <\/ul>\n <p style=\"margin-top: 15px; font-size: 0.85em; color: #999;\">\n Demo: Beliebiger Benutzername\/Passwort\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"container\" id=\"mainApp\" style=\"display: none;\">\n <div class=\"header\">\n <div class=\"header-left\">\n <h1>\ud83d\ude91 Praktikumsplatz-Kalender Rettungswachen<\/h1>\n <p>Verf\u00fcgbarkeit der Praktikumspl\u00e4tze im \u00dcberblick<\/p>\n <\/div>\n <div class=\"header-right\">\n <div class=\"user-info\">\n <strong id=\"displayUsername\"><\/strong>\n <span class=\"user-role\" id=\"displayRole\"><\/span>\n <\/div>\n <button class=\"btn btn-logout\" onclick=\"logout()\">\ud83d\udeaa Abmelden<\/button>\n <\/div>\n <\/div>\n\n <div class=\"view-toggle\">\n <button class=\"btn\" onclick=\"switchView('frontend')\">\ud83d\udc41\ufe0f \u00d6ffentliche Ansicht<\/button>\n <button class=\"btn btn-warning\" id=\"backendBtn\" onclick=\"switchView('backend')\">\u2699\ufe0f Verwaltung (Backend)<\/button>\n <\/div>\n\n \n <div class=\"frontend-view active\" id=\"frontendView\">\n <div class=\"controls\">\n <div class=\"month-nav\">\n <button class=\"btn\" onclick=\"previousMonth()\">\u2190 Vorheriger Monat<\/button>\n <h2 id=\"currentMonth\"><\/h2>\n <button class=\"btn\" onclick=\"nextMonth()\">N\u00e4chster Monat \u2192<\/button>\n <\/div>\n \n <div class=\"export-section\">\n <button class=\"btn btn-success\" onclick=\"exportPDF('all')\">\ud83d\udcc4 Gesamtexport (PDF)<\/button>\n <button class=\"btn btn-success\" onclick=\"showExportMenu()\">\ud83d\udcc4 Einzelne Wache exportieren<\/button>\n <\/div>\n <\/div>\n\n <div class=\"calendar\">\n <table id=\"calendarTable\"><\/table>\n <\/div>\n\n <div class=\"legend\">\n <div class=\"legend-item\">\n <div class=\"legend-circle status-green\"><\/div>\n <span>Verf\u00fcgbar (>50%)<\/span>\n <\/div>\n <div class=\"legend-item\">\n <div class=\"legend-circle status-yellow\"><\/div>\n <span>Teilweise belegt (20-50%)<\/span>\n <\/div>\n <div class=\"legend-item\">\n <div class=\"legend-circle status-red\"><\/div>\n <span>Ausgebucht (<20%)<\/span>\n <\/div>\n <div class=\"legend-item\">\n <span style=\"background: #2196f3; color: white; padding: 5px 10px; border-radius: 15px; font-size: 0.9em;\">\ud83d\udcac = Kommentar vorhanden<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"backend-view\" id=\"backendView\">\n <div class=\"backend-tabs\">\n <button class=\"backend-tab active\" id=\"capacityTab\" onclick=\"switchBackendTab('capacity')\">Kapazit\u00e4ten<\/button>\n <button class=\"backend-tab\" id=\"bookingsTab\" onclick=\"switchBackendTab('bookings')\">Buchungen<\/button>\n <button class=\"backend-tab\" id=\"notificationsTab\" onclick=\"switchBackendTab('notifications')\">E-Mail<\/button>\n <button class=\"backend-tab\" id=\"usersTab\" onclick=\"switchBackendTab('users')\">Benutzer<\/button>\n <button class=\"backend-tab\" id=\"activityTab\" onclick=\"switchBackendTab('activity')\">Aktivit\u00e4ten<\/button>\n <\/div>\n\n <div class=\"backend-content\">\n \n <div class=\"backend-panel active\" id=\"capacityPanel\">\n <h2 style=\"color: #667eea; margin-bottom: 20px;\">Wachen konfigurieren<\/h2>\n <div class=\"capacity-grid\" id=\"capacityGrid\"><\/div>\n <button class=\"btn btn-success\" onclick=\"saveCapacities()\">\ud83d\udcbe Einstellungen speichern<\/button>\n <\/div>\n\n \n <div class=\"backend-panel\" id=\"bookingsPanel\">\n <h2 style=\"color: #667eea; margin-bottom: 20px;\">Buchungen & Kommentare verwalten<\/h2>\n \n <div class=\"booking-editor\">\n <h3>Neue Buchung \/ Kommentar hinzuf\u00fcgen<\/h3>\n <div class=\"booking-form\">\n <select id=\"bookingStation\">\n <option value=\"\">Wache ausw\u00e4hlen<\/option>\n <\/select>\n <input type=\"date\" id=\"bookingDate\">\n <input type=\"number\" id=\"bookingCount\" min=\"0\" placeholder=\"Anzahl Buchungen\">\n <input type=\"text\" id=\"bookingComment\" placeholder=\"Kommentar (optional)\">\n <\/div>\n <button class=\"btn btn-success\" onclick=\"addBooking()\">\u2795 Hinzuf\u00fcgen<\/button>\n <\/div>\n\n <h3 style=\"margin-top: 30px; margin-bottom: 15px; color: #667eea;\">Bestehende Eintr\u00e4ge<\/h3>\n <div class=\"booking-list\" id=\"bookingList\"><\/div>\n <\/div>\n\n \n <div class=\"backend-panel\" id=\"notificationsPanel\">\n <h2 style=\"color: #667eea; margin-bottom: 20px;\">E-Mail Benachrichtigungen<\/h2>\n \n <div class=\"email-settings\">\n <h3>Benachrichtigungseinstellungen<\/h3>\n <p style=\"color: #666; margin-bottom: 20px;\">\n Aktivieren Sie E-Mail-Benachrichtigungen, um bei neuen Buchungen automatisch informiert zu werden.\n <\/p>\n \n <label>\n <input type=\"checkbox\" id=\"emailEnabled\" onchange=\"toggleEmailSettings()\">\n <strong>E-Mail Benachrichtigungen aktivieren<\/strong>\n <\/label>\n\n <div id=\"emailConfig\" style=\"display: none; margin-top: 20px;\">\n <label style=\"display: block; margin-bottom: 10px;\">\n <strong>E-Mail-Adresse f\u00fcr Benachrichtigungen:<\/strong>\n <\/label>\n <input type=\"email\" id=\"emailAddress\" placeholder=\"ihre@email.de\">\n \n <div style=\"margin-top: 20px;\">\n <p style=\"font-weight: bold; margin-bottom: 10px;\">Benachrichtigen bei:<\/p>\n <div class=\"checkbox-group\">\n <input type=\"checkbox\" id=\"notifyNewBooking\" checked>\n <label for=\"notifyNewBooking\">Neue Buchung<\/label>\n <\/div>\n <div class=\"checkbox-group\">\n <input type=\"checkbox\" id=\"notifyFullyBooked\" checked>\n <label for=\"notifyFullyBooked\">Wache ausgebucht<\/label>\n <\/div>\n <div class=\"checkbox-group\">\n <input type=\"checkbox\" id=\"notifyLowCapacity\" checked>\n <label for=\"notifyLowCapacity\">Wenig verf\u00fcgbare Pl\u00e4tze (<20%)<\/label>\n <\/div>\n <\/div>\n\n <div style=\"margin-top: 20px; padding: 15px; background: #fff3cd; border-radius: 5px;\">\n <strong>\u26a0\ufe0f Hinweis:<\/strong> Die E-Mail-Funktion ist eine Simulation. \n In der produktiven Umgebung m\u00fcsste dies serverseitig implementiert werden.\n <\/div>\n <\/div>\n\n <button class=\"btn btn-success\" style=\"margin-top: 20px;\" onclick=\"saveEmailSettings()\">\ud83d\udcbe Benachrichtigungen speichern<\/button>\n <\/div>\n\n <div style=\"margin-top: 30px;\">\n <h3 style=\"color: #667eea; margin-bottom: 15px;\">Test-Benachrichtigung senden<\/h3>\n <p style=\"color: #666; margin-bottom: 15px;\">\n Testen Sie die E-Mail-Benachrichtigung mit einer Demo-Nachricht.\n <\/p>\n <button class=\"btn\" onclick=\"sendTestEmail()\">\ud83d\udce7 Test-E-Mail senden<\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"backend-panel\" id=\"usersPanel\">\n <h2 style=\"color: #667eea; margin-bottom: 20px;\">Benutzerverwaltung<\/h2>\n \n <div class=\"user-management\">\n <h3>Neuen Benutzer anlegen<\/h3>\n <div class=\"booking-form\" style=\"margin-top: 15px;\">\n <input type=\"text\" id=\"newUsername\" placeholder=\"Benutzername\">\n <input type=\"password\" id=\"newPassword\" placeholder=\"Passwort\">\n <select id=\"newUserRole\">\n <option value=\"viewer\">Betrachter<\/option>\n <option value=\"editor\">Bearbeiter<\/option>\n <option value=\"admin\">Administrator<\/option>\n <\/select>\n <\/div>\n <button class=\"btn btn-success\" style=\"margin-top: 15px;\" onclick=\"addUser()\">\u2795 Benutzer hinzuf\u00fcgen<\/button>\n <\/div>\n\n <h3 style=\"margin-top: 30px; margin-bottom: 15px; color: #667eea;\">Registrierte Benutzer<\/h3>\n <div class=\"user-list\" id=\"userList\"><\/div>\n <\/div>\n\n \n <div class=\"backend-panel\" id=\"activityPanel\">\n <h2 style=\"color: #667eea; margin-bottom: 20px;\">Aktivit\u00e4tsprotokoll<\/h2>\n \n <div style=\"background: #f9f9f9; padding: 20px; border-radius: 10px; margin-bottom: 20px;\">\n <div class=\"activity-filters\">\n <select id=\"filterUser\" onchange=\"filterActivities()\">\n <option value=\"\">Alle Benutzer<\/option>\n <\/select>\n <select id=\"filterAction\" onchange=\"filterActivities()\">\n <option value=\"\">Alle Aktionen<\/option>\n <option value=\"login\">Anmeldungen<\/option>\n <option value=\"logout\">Abmeldungen<\/option>\n <option value=\"create\">Erstellt<\/option>\n <option value=\"update\">Bearbeitet<\/option>\n <option value=\"delete\">Gel\u00f6scht<\/option>\n <\/select>\n <select id=\"filterDays\" onchange=\"filterActivities()\">\n <option value=\"7\">Letzte 7 Tage<\/option>\n <option value=\"30\">Letzte 30 Tage<\/option>\n <option value=\"90\">Letzte 90 Tage<\/option>\n <option value=\"all\">Gesamter Zeitraum<\/option>\n <\/select>\n <button class=\"btn btn-small btn-danger\" onclick=\"clearActivityLog()\">\ud83d\uddd1\ufe0f Protokoll l\u00f6schen<\/button>\n <\/div>\n <\/div>\n\n <div class=\"activity-list\" id=\"activityList\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"modal\" id=\"commentModal\">\n <div class=\"modal-content\">\n <h3>Kommentar anzeigen<\/h3>\n <p id=\"commentDate\" style=\"color: #666; margin-bottom: 10px;\"><\/p>\n <div id=\"commentText\" style=\"padding: 15px; background: #f5f5f5; border-radius: 5px; min-height: 60px;\"><\/div>\n <div class=\"modal-actions\">\n <button class=\"btn\" onclick=\"closeCommentModal()\">Schlie\u00dfen<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"modal\" id=\"exportModal\">\n <div class=\"modal-content\">\n <h3>Wache f\u00fcr Export ausw\u00e4hlen<\/h3>\n <div id=\"exportStationList\" style=\"margin: 20px 0;\"><\/div>\n <div class=\"modal-actions\">\n <button class=\"btn\" onclick=\"closeExportModal()\">Abbrechen<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"modal\" id=\"passwordResetModal\">\n <div class=\"modal-content\">\n <h3>Passwort zur\u00fccksetzen<\/h3>\n <p style=\"color: #666; margin-bottom: 20px;\">\n Geben Sie Ihren Benutzernamen ein, um Ihr Passwort zur\u00fcckzusetzen.\n <\/p>\n <input type=\"text\" id=\"resetUsername\" placeholder=\"Benutzername\">\n <input type=\"password\" id=\"resetNewPassword\" placeholder=\"Neues Passwort\">\n <input type=\"password\" id=\"resetConfirmPassword\" placeholder=\"Passwort best\u00e4tigen\">\n <div style=\"padding: 15px; background: #e3f2fd; border-radius: 5px; margin-top: 15px;\">\n <strong>\u2139\ufe0f Demo-Modus:<\/strong> Das Passwort kann direkt zur\u00fcckgesetzt werden.\n In der Produktivumgebung w\u00fcrde hier ein Best\u00e4tigungslink per E-Mail versendet.\n <\/div>\n <div class=\"modal-actions\">\n <button class=\"btn\" onclick=\"closePasswordReset()\">Abbrechen<\/button>\n <button class=\"btn btn-success\" onclick=\"resetPassword()\">Passwort zur\u00fccksetzen<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"modal\" id=\"changePasswordModal\">\n <div class=\"modal-content\">\n <h3>Passwort \u00e4ndern<\/h3>\n <p style=\"color: #666; margin-bottom: 20px;\">\n \u00c4ndern Sie das Passwort f\u00fcr: <strong id=\"changePasswordUser\"><\/strong>\n <\/p>\n <input type=\"password\" id=\"changeNewPassword\" placeholder=\"Neues Passwort\">\n <input type=\"password\" id=\"changeConfirmPassword\" placeholder=\"Passwort best\u00e4tigen\">\n <div class=\"modal-actions\">\n <button class=\"btn\" onclick=\"closeChangePassword()\">Abbrechen<\/button>\n <button class=\"btn btn-success\" onclick=\"saveNewPassword()\">Passwort speichern<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"save-indicator\" id=\"saveIndicator\">\u2713 Gespeichert!<\/div>\n\n <script>\n const stations = ['RW20\/30', 'RW50', 'RW60', 'RW65', 'RW70\/91', 'RW90', 'RW97'];\n \n let capacity = {\n 'RW20\/30': 3, 'RW50': 2, 'RW60': 2, 'RW65': 2,\n 'RW70\/91': 3, 'RW90': 2, 'RW97': 2\n };\n\n let stationColors = {\n 'RW20\/30': '#667eea', 'RW50': '#f093fb', 'RW60': '#4facfe',\n 'RW65': '#43e97b', 'RW70\/91': '#fa709a', 'RW90': '#feca57', 'RW97': '#ff6348'\n };\n\n let colorEnabled = {\n 'RW20\/30': false, 'RW50': false, 'RW60': false, 'RW65': false,\n 'RW70\/91': false, 'RW90': false, 'RW97': false\n };\n\n let bookings = {};\n let comments = {};\n let emailSettings = {\n enabled: false, address: '',\n notifyNewBooking: true, notifyFullyBooked: true, notifyLowCapacity: true\n };\n\n let users = {\n 'admin': { password: 'admin', role: 'admin', name: 'Administrator' },\n 'editor': { password: 'editor', role: 'editor', name: 'Bearbeiter' },\n 'viewer': { password: 'viewer', role: 'viewer', name: 'Betrachter' }\n };\n\n let activityLog = [];\n let currentUser = null;\n let currentDate = new Date();\n let currentView = 'frontend';\n let currentBackendTab = 'capacity';\n let changePasswordUsername = null;\n\n function initializeData() {\n const storedCapacity = localStorage.getItem('praktikumCapacity');\n const storedBookings = localStorage.getItem('praktikumBookings');\n const storedComments = localStorage.getItem('praktikumComments');\n const storedColors = localStorage.getItem('praktikumColors');\n const storedColorEnabled = localStorage.getItem('praktikumColorEnabled');\n const storedEmailSettings = localStorage.getItem('praktikumEmailSettings');\n const storedUsers = localStorage.getItem('praktikumUsers');\n const storedCurrentUser = localStorage.getItem('praktikumCurrentUser');\n const storedActivityLog = localStorage.getItem('praktikumActivityLog');\n \n if (storedCapacity) capacity = JSON.parse(storedCapacity);\n if (storedBookings) bookings = JSON.parse(storedBookings);\n if (storedComments) comments = JSON.parse(storedComments);\n if (storedColors) stationColors = JSON.parse(storedColors);\n if (storedColorEnabled) colorEnabled = JSON.parse(storedColorEnabled);\n if (storedEmailSettings) emailSettings = JSON.parse(storedEmailSettings);\n if (storedUsers) users = JSON.parse(storedUsers);\n if (storedActivityLog) activityLog = JSON.parse(storedActivityLog);\n if (storedCurrentUser) {\n currentUser = JSON.parse(storedCurrentUser);\n showMainApp();\n }\n }\n\n function saveData() {\n localStorage.setItem('praktikumCapacity', JSON.stringify(capacity));\n localStorage.setItem('praktikumBookings', JSON.stringify(bookings));\n localStorage.setItem('praktikumComments', JSON.stringify(comments));\n localStorage.setItem('praktikumColors', JSON.stringify(stationColors));\n localStorage.setItem('praktikumColorEnabled', JSON.stringify(colorEnabled));\n localStorage.setItem('praktikumEmailSettings', JSON.stringify(emailSettings));\n localStorage.setItem('praktikumUsers', JSON.stringify(users));\n localStorage.setItem('praktikumActivityLog', JSON.stringify(activityLog));\n if (currentUser) {\n localStorage.setItem('praktikumCurrentUser', JSON.stringify(currentUser));\n }\n showSaveIndicator();\n }\n\n function showSaveIndicator() {\n const indicator = document.getElementById('saveIndicator');\n indicator.classList.add('active');\n setTimeout(() => indicator.classList.remove('active'), 2000);\n }\n\n function logActivity(action, details) {\n const activity = {\n id: Date.now(),\n timestamp: new Date().toISOString(),\n user: currentUser ? currentUser.username : 'System',\n action: action,\n details: details\n };\n activityLog.unshift(activity);\n if (activityLog.length > 1000) activityLog = activityLog.slice(0, 1000);\n saveData();\n }\n\n function login(event) {\n event.preventDefault();\n const username = document.getElementById('loginUsername').value;\n const password = document.getElementById('loginPassword').value;\n const role = document.getElementById('loginRole').value;\n\n currentUser = { username: username, role: role, name: username };\n localStorage.setItem('praktikumCurrentUser', JSON.stringify(currentUser));\n logActivity('login', `Benutzer ${username} hat sich angemeldet`);\n showMainApp();\n }\n\n function logout() {\n logActivity('logout', `Benutzer ${currentUser.username} hat sich abgemeldet`);\n currentUser = null;\n localStorage.removeItem('praktikumCurrentUser');\n document.getElementById('loginScreen').style.display = 'flex';\n document.getElementById('mainApp').style.display = 'none';\n document.getElementById('loginUsername').value = '';\n document.getElementById('loginPassword').value = '';\n }\n\n function showPasswordReset() {\n document.getElementById('passwordResetModal').classList.add('active');\n }\n\n function closePasswordReset() {\n document.getElementById('passwordResetModal').classList.remove('active');\n document.getElementById('resetUsername').value = '';\n document.getElementById('resetNewPassword').value = '';\n document.getElementById('resetConfirmPassword').value = '';\n }\n\n function resetPassword() {\n const username = document.getElementById('resetUsername').value;\n const newPassword = document.getElementById('resetNewPassword').value;\n const confirmPassword = document.getElementById('resetConfirmPassword').value;\n\n if (!username || !newPassword || !confirmPassword) {\n alert('Bitte f\u00fcllen Sie alle Felder aus!');\n return;\n }\n\n if (newPassword !== confirmPassword) {\n alert('Die Passw\u00f6rter stimmen nicht \u00fcberein!');\n return;\n }\n\n if (!users[username]) {\n alert('Benutzername nicht gefunden!');\n return;\n }\n\n users[username].password = newPassword;\n saveData();\n logActivity('password_reset', `Passwort f\u00fcr Benutzer ${username} wurde zur\u00fcckgesetzt`);\n closePasswordReset();\n alert('Passwort erfolgreich zur\u00fcckgesetzt!');\n }\n\n function showChangePassword(username) {\n changePasswordUsername = username;\n document.getElementById('changePasswordUser').textContent = username;\n document.getElementById('changePasswordModal').classList.add('active');\n }\n\n function closeChangePassword() {\n document.getElementById('changePasswordModal').classList.remove('active');\n document.getElementById('changeNewPassword').value = '';\n document.getElementById('changeConfirmPassword').value = '';\n changePasswordUsername = null;\n }\n\n function saveNewPassword() {\n const newPassword = document.getElementById('changeNewPassword').value;\n const confirmPassword = document.getElementById('changeConfirmPassword').value;\n\n if (!newPassword || !confirmPassword) {\n alert('Bitte f\u00fcllen Sie beide Felder aus!');\n return;\n }\n\n if (newPassword !== confirmPassword) {\n alert('Die Passw\u00f6rter stimmen nicht \u00fcberein!');\n return;\n }\n\n users[changePasswordUsername].password = newPassword;\n saveData();\n logActivity('password_change', `Passwort f\u00fcr Benutzer ${changePasswordUsername} wurde ge\u00e4ndert`);\n closeChangePassword();\n renderUserList();\n alert('Passwort erfolgreich ge\u00e4ndert!');\n }\n\n function showMainApp() {\n document.getElementById('loginScreen').style.display = 'none';\n document.getElementById('mainApp').style.display = 'block';\n \n document.getElementById('displayUsername').textContent = currentUser.name;\n const roleNames = { 'admin': 'Administrator', 'editor': 'Bearbeiter', 'viewer': 'Betrachter' };\n document.getElementById('displayRole').textContent = roleNames[currentUser.role];\n\n updateUIForRole();\n renderCalendar();\n }\n\n function updateUIForRole() {\n const role = currentUser.role;\n const backendBtn = document.getElementById('backendBtn');\n \n if (role === 'viewer') {\n backendBtn.disabled = true;\n backendBtn.title = 'Keine Berechtigung';\n } else {\n backendBtn.disabled = false;\n backendBtn.title = '';\n }\n\n const capacityTab = document.getElementById('capacityTab');\n const notificationsTab = document.getElementById('notificationsTab');\n const usersTab = document.getElementById('usersTab');\n const activityTab = document.getElementById('activityTab');\n\n if (role === 'editor') {\n capacityTab.disabled = true;\n notificationsTab.disabled = true;\n usersTab.disabled = true;\n activityTab.disabled = false;\n } else if (role === 'admin') {\n capacityTab.disabled = false;\n notificationsTab.disabled = false;\n usersTab.disabled = false;\n activityTab.disabled = false;\n }\n }\n\n function hasPermission(requiredRole) {\n const roleHierarchy = { 'viewer': 0, 'editor': 1, 'admin': 2 };\n return roleHierarchy[currentUser.role] >= roleHierarchy[requiredRole];\n }\n\n function switchView(view) {\n if (view === 'backend' && !hasPermission('editor')) {\n alert('Sie haben keine Berechtigung f\u00fcr den Verwaltungsbereich.');\n return;\n }\n\n currentView = view;\n document.getElementById('frontendView').classList.remove('active');\n document.getElementById('backendView').classList.remove('active');\n \n if (view === 'frontend') {\n document.getElementById('frontendView').classList.add('active');\n renderCalendar();\n } else {\n document.getElementById('backendView').classList.add('active');\n renderBackend();\n }\n }\n\n function switchBackendTab(tab) {\n if ((tab === 'capacity' || tab === 'notifications' || tab === 'users') && !hasPermission('admin')) {\n alert('Nur Administratoren haben Zugriff auf diese Einstellungen.');\n return;\n }\n\n currentBackendTab = tab;\n document.querySelectorAll('.backend-tab').forEach(t => t.classList.remove('active'));\n document.querySelectorAll('.backend-panel').forEach(p => p.classList.remove('active'));\n \n event.target.classList.add('active');\n document.getElementById(tab + 'Panel').classList.add('active');\n \n if (tab === 'bookings') renderBookingList();\n else if (tab === 'notifications') loadEmailSettings();\n else if (tab === 'users') renderUserList();\n else if (tab === 'activity') renderActivityLog();\n }\n\n function renderBackend() {\n renderCapacityGrid();\n renderBookingForm();\n renderBookingList();\n loadEmailSettings();\n renderUserList();\n renderActivityLog();\n }\n\n function renderCapacityGrid() {\n const grid = document.getElementById('capacityGrid');\n const isDisabled = !hasPermission('admin');\n \n grid.innerHTML = stations.map(station => `\n <div class=\"capacity-card\">\n <h3>${station}<\/h3>\n <label>Maximale Anzahl Pl\u00e4tze:<\/label>\n <input type=\"number\" id=\"cap-${station}\" value=\"${capacity[station]}\" \n min=\"1\" max=\"20\" ${isDisabled ? 'disabled' : ''}>\n <label style=\"margin-top: 15px;\">\n <input type=\"checkbox\" id=\"color-enabled-${station}\"\n ${colorEnabled[station] ? 'checked' : ''}\n ${isDisabled ? 'disabled' : ''}\n onchange=\"toggleColorPicker('${station}')\">\n Farbliche Markierung aktivieren\n <\/label>\n <div id=\"color-picker-${station}\" style=\"display: ${colorEnabled[station] ? 'block' : 'none'}; margin-top: 10px;\">\n <label>Farbe w\u00e4hlen:<\/label>\n <input type=\"color\" id=\"color-${station}\" value=\"${stationColors[station]}\"\n ${isDisabled ? 'disabled' : ''}>\n <div class=\"color-preview\">\n <div class=\"color-sample\" style=\"background: ${stationColors[station]};\"><\/div>\n <span style=\"font-size: 0.9em; color: #666;\">Vorschau<\/span>\n <\/div>\n <\/div>\n <\/div>\n `).join('');\n }\n\n function toggleColorPicker(station) {\n const checkbox = document.getElementById(`color-enabled-${station}`);\n const picker = document.getElementById(`color-picker-${station}`);\n picker.style.display = checkbox.checked ? 'block' : 'none';\n }\n\n function saveCapacities() {\n if (!hasPermission('admin')) {\n alert('Nur Administratoren k\u00f6nnen Kapazit\u00e4ten \u00e4ndern.');\n return;\n }\n\n stations.forEach(station => {\n const oldCap = capacity[station];\n capacity[station] = parseInt(document.getElementById(`cap-${station}`).value);\n colorEnabled[station] = document.getElementById(`color-enabled-${station}`).checked;\n stationColors[station] = document.getElementById(`color-${station}`).value;\n \n if (oldCap !== capacity[station]) {\n logActivity('update', `Kapazit\u00e4t f\u00fcr ${station} von ${oldCap} auf ${capacity[station]} ge\u00e4ndert`);\n }\n });\n saveData();\n }\n\n function renderBookingForm() {\n const select = document.getElementById('bookingStation');\n select.innerHTML = '<option value=\"\">Wache ausw\u00e4hlen<\/option>' + \n stations.map(s => `<option value=\"${s}\">${s}<\/option>`).join('');\n }\n\n function addBooking() {\n if (!hasPermission('editor')) {\n alert('Sie haben keine Berechtigung, Buchungen hinzuzuf\u00fcgen.');\n return;\n }\n\n const station = document.getElementById('bookingStation').value;\n const date = document.getElementById('bookingDate').value;\n const count = parseInt(document.getElementById('bookingCount').value);\n const comment = document.getElementById('bookingComment').value;\n \n if (!station || !date || isNaN(count)) {\n alert('Bitte f\u00fcllen Sie alle Pflichtfelder aus!');\n return;\n }\n \n const key = `${station}_${date}`;\n const previousCount = bookings[key] || 0;\n const isNew = !bookings[key];\n \n bookings[key] = count;\n if (comment) comments[key] = comment;\n \n const action = isNew ? 'create' : 'update';\n logActivity(action, `Buchung f\u00fcr ${station} am ${formatDate(date)}: ${count} Pl\u00e4tze${comment ? ' (Kommentar hinzugef\u00fcgt)' : ''}`);\n \n saveData();\n checkAndSendNotification(station, date, count, previousCount);\n renderBookingList();\n \n document.getElementById('bookingStation').value = '';\n document.getElementById('bookingDate').value = '';\n document.getElementById('bookingCount').value = '';\n document.getElementById('bookingComment').value = '';\n }\n\n function checkAndSendNotification(station, date, newCount, oldCount) {\n if (!emailSettings.enabled || !emailSettings.address) return;\n \n const available = capacity[station] - newCount;\n const percentage = (available \/ capacity[station]) * 100;\n \n let shouldNotify = false;\n let notificationType = '';\n \n if (emailSettings.notifyNewBooking && newCount > oldCount) {\n shouldNotify = true;\n notificationType = 'Neue Buchung';\n }\n \n if (emailSettings.notifyFullyBooked && available === 0) {\n shouldNotify = true;\n notificationType = 'Wache ausgebucht';\n }\n \n if (emailSettings.notifyLowCapacity && percentage < 20 && percentage > 0) {\n shouldNotify = true;\n notificationType = 'Geringe Verf\u00fcgbarkeit';\n }\n \n if (shouldNotify) {\n simulateEmailSend(station, date, available, capacity[station], notificationType);\n }\n }\n\n function simulateEmailSend(station, date, available, total, type) {\n console.log('\ud83d\udce7 E-Mail w\u00fcrde gesendet werden:');\n console.log(`An: ${emailSettings.address}`);\n console.log(`Betreff: ${type} - ${station}`);\n console.log(`Datum: ${formatDate(date)}`);\n console.log(`Verf\u00fcgbar: ${available}\/${total}`);\n \n logActivity('notification', `E-Mail-Benachrichtigung: ${type} f\u00fcr ${station}`);\n \n const indicator = document.getElementById('saveIndicator');\n indicator.textContent = '\ud83d\udce7 E-Mail-Benachrichtigung gesendet!';\n indicator.style.background = '#2196f3';\n indicator.classList.add('active');\n setTimeout(() => {\n indicator.classList.remove('active');\n indicator.textContent = '\u2713 Gespeichert!';\n indicator.style.background = '#4caf50';\n }, 3000);\n }\n\n function renderBookingList() {\n const list = document.getElementById('bookingList');\n const entries = [];\n \n Object.keys(bookings).forEach(key => {\n const [station, date] = key.split('_');\n entries.push({ key, station, date, count: bookings[key], comment: comments[key] || '' });\n });\n \n entries.sort((a, b) => new Date(b.date) - new Date(a.date));\n \n if (entries.length === 0) {\n list.innerHTML = '<p style=\"text-align: center; color: #999;\">Keine Buchungen vorhanden<\/p>';\n return;\n }\n\n const canEdit = hasPermission('editor');\n \n list.innerHTML = entries.map(entry => `\n <div class=\"booking-item\">\n <div class=\"booking-info\">\n <strong>${entry.station}<\/strong> - ${formatDate(entry.date)}<br>\n Buchungen: ${entry.count}\/${capacity[entry.station]}\n ${entry.comment ? '<br>\ud83d\udcac ' + entry.comment : ''}\n <\/div>\n ${canEdit ? `\n <div class=\"booking-actions\">\n <button class=\"btn btn-small\" onclick=\"editBooking('${entry.key}')\">\u270f\ufe0f<\/button>\n <button class=\"btn btn-small btn-danger\" onclick=\"deleteBooking('${entry.key}')\">\ud83d\uddd1\ufe0f<\/button>\n <\/div>\n ` : ''}\n <\/div>\n `).join('');\n }\n\n function editBooking(key) {\n if (!hasPermission('editor')) {\n alert('Sie haben keine Berechtigung, Buchungen zu bearbeiten.');\n return;\n }\n\n const [station, date] = key.split('_');\n document.getElementById('bookingStation').value = station;\n document.getElementById('bookingDate').value = date;\n document.getElementById('bookingCount').value = bookings[key];\n document.getElementById('bookingComment').value = comments[key] || '';\n window.scrollTo({ top: 0, behavior: 'smooth' });\n }\n\n function deleteBooking(key) {\n if (!hasPermission('editor')) {\n alert('Sie haben keine Berechtigung, Buchungen zu l\u00f6schen.');\n return;\n }\n\n if (confirm('Wirklich l\u00f6schen?')) {\n const [station, date] = key.split('_');\n logActivity('delete', `Buchung f\u00fcr ${station} am ${formatDate(date)} gel\u00f6scht`);\n delete bookings[key];\n delete comments[key];\n saveData();\n renderBookingList();\n }\n }\n\n function loadEmailSettings() {\n document.getElementById('emailEnabled').checked = emailSettings.enabled;\n document.getElementById('emailAddress').value = emailSettings.address;\n document.getElementById('notifyNewBooking').checked = emailSettings.notifyNewBooking;\n document.getElementById('notifyFullyBooked').checked = emailSettings.notifyFullyBooked;\n document.getElementById('notifyLowCapacity').checked = emailSettings.notifyLowCapacity;\n toggleEmailSettings();\n }\n\n function toggleEmailSettings() {\n const enabled = document.getElementById('emailEnabled').checked;\n document.getElementById('emailConfig').style.display = enabled ? 'block' : 'none';\n }\n\n function saveEmailSettings() {\n if (!hasPermission('admin')) {\n alert('Nur Administratoren k\u00f6nnen E-Mail-Einstellungen \u00e4ndern.');\n return;\n }\n\n emailSettings.enabled = document.getElementById('emailEnabled').checked;\n emailSettings.address = document.getElementById('emailAddress').value;\n emailSettings.notifyNewBooking = document.getElementById('notifyNewBooking').checked;\n emailSettings.notifyFullyBooked = document.getElementById('notifyFullyBooked').checked;\n emailSettings.notifyLowCapacity = document.getElementById('notifyLowCapacity').checked;\n logActivity('update', `E-Mail-Einstellungen aktualisiert`);\n saveData();\n }\n\n function sendTestEmail() {\n if (!emailSettings.enabled || !emailSettings.address) {\n alert('Bitte aktivieren Sie E-Mail-Benachrichtigungen und geben Sie eine E-Mail-Adresse ein.');\n return;\n }\n \n simulateEmailSend('RW50', new Date().toISOString().split('T')[0], 1, 2, 'Test-Benachrichtigung');\n alert(`Test-E-Mail w\u00fcrde an ${emailSettings.address} gesendet.`);\n }\n\n function addUser() {\n if (!hasPermission('admin')) {\n alert('Nur Administratoren k\u00f6nnen Benutzer hinzuf\u00fcgen.');\n return;\n }\n\n const username = document.getElementById('newUsername').value;\n const password = document.getElementById('newPassword').value;\n const role = document.getElementById('newUserRole').value;\n\n if (!username || !password) {\n alert('Bitte f\u00fcllen Sie alle Felder aus!');\n return;\n }\n\n if (users[username]) {\n alert('Benutzername existiert bereits!');\n return;\n }\n\n users[username] = { password: password, role: role, name: username };\n logActivity('create', `Neuer Benutzer erstellt: ${username} (${role})`);\n saveData();\n renderUserList();\n\n document.getElementById('newUsername').value = '';\n document.getElementById('newPassword').value = '';\n }\n\n function deleteUser(username) {\n if (!hasPermission('admin')) {\n alert('Nur Administratoren k\u00f6nnen Benutzer l\u00f6schen.');\n return;\n }\n\n if (username === currentUser.username) {\n alert('Sie k\u00f6nnen sich nicht selbst l\u00f6schen!');\n return;\n }\n\n if (confirm(`Benutzer \"${username}\" wirklich l\u00f6schen?`)) {\n logActivity('delete', `Benutzer gel\u00f6scht: ${username}`);\n delete users[username];\n saveData();\n renderUserList();\n }\n }\n\n function changeUserRole(username, newRole) {\n if (!hasPermission('admin')) {\n alert('Nur Administratoren k\u00f6nnen Rollen \u00e4ndern.');\n return;\n }\n\n const oldRole = users[username].role;\n users[username].role = newRole;\n logActivity('update', `Rolle f\u00fcr ${username} von ${oldRole} zu ${newRole} ge\u00e4ndert`);\n saveData();\n renderUserList();\n }\n\n function renderUserList() {\n const list = document.getElementById('userList');\n const userEntries = Object.keys(users);\n\n if (userEntries.length === 0) {\n list.innerHTML = '<p style=\"text-align: center; color: #999;\">Keine Benutzer vorhanden<\/p>';\n return;\n }\n\n const roleNames = { 'admin': 'Administrator', 'editor': 'Bearbeiter', 'viewer': 'Betrachter' };\n\n list.innerHTML = userEntries.map(username => {\n const user = users[username];\n const roleBadgeClass = `role-${user.role}`;\n \n return `\n <div class=\"user-item\">\n <div class=\"user-item-info\">\n <strong>${user.name}<\/strong>\n <span class=\"user-role-badge ${roleBadgeClass}\">${roleNames[user.role]}<\/span>\n <\/div>\n <div class=\"booking-actions\">\n <select onchange=\"changeUserRole('${username}', this.value)\" style=\"padding: 5px; border-radius: 5px; border: 2px solid #ddd;\">\n <option value=\"viewer\" ${user.role === 'viewer' ? 'selected' : ''}>Betrachter<\/option>\n <option value=\"editor\" ${user.role === 'editor' ? 'selected' : ''}>Bearbeiter<\/option>\n <option value=\"admin\" ${user.role === 'admin' ? 'selected' : ''}>Administrator<\/option>\n <\/select>\n <button class=\"btn btn-small\" onclick=\"showChangePassword('${username}')\" title=\"Passwort \u00e4ndern\">\ud83d\udd11<\/button>\n <button class=\"btn btn-small btn-danger\" onclick=\"deleteUser('${username}')\" ${username === currentUser.username ? 'disabled' : ''}>\ud83d\uddd1\ufe0f<\/button>\n <\/div>\n <\/div>\n `;\n }).join('');\n }\n\n function renderActivityLog() {\n updateActivityFilters();\n filterActivities();\n }\n\n function updateActivityFilters() {\n const filterUser = document.getElementById('filterUser');\n const uniqueUsers = [...new Set(activityLog.map(a => a.user))];\n \n filterUser.innerHTML = '<option value=\"\">Alle Benutzer<\/option>' +\n uniqueUsers.map(user => `<option value=\"${user}\">${user}<\/option>`).join('');\n }\n\n function filterActivities() {\n const filterUser = document.getElementById('filterUser').value;\n const filterAction = document.getElementById('filterAction').value;\n const filterDays = document.getElementById('filterDays').value;\n\n let filtered = [...activityLog];\n\n if (filterUser) {\n filtered = filtered.filter(a => a.user === filterUser);\n }\n\n if (filterAction) {\n filtered = filtered.filter(a => a.action === filterAction);\n }\n\n if (filterDays !== 'all') {\n const days = parseInt(filterDays);\n const cutoff = new Date();\n cutoff.setDate(cutoff.getDate() - days);\n filtered = filtered.filter(a => new Date(a.timestamp) >= cutoff);\n }\n\n displayActivityLog(filtered);\n }\n\n function displayActivityLog(activities) {\n const list = document.getElementById('activityList');\n\n if (activities.length === 0) {\n list.innerHTML = '<p style=\"text-align: center; color: #999;\">Keine Aktivit\u00e4ten im gew\u00e4hlten Zeitraum<\/p>';\n return;\n }\n\n const actionIcons = {\n 'login': '\ud83d\udd13',\n 'logout': '\ud83d\udd12',\n 'create': '\u2795',\n 'update': '\u270f\ufe0f',\n 'delete': '\ud83d\uddd1\ufe0f',\n 'password_reset': '\ud83d\udd11',\n 'password_change': '\ud83d\udd10',\n 'notification': '\ud83d\udce7'\n };\n\n const actionNames = {\n 'login': 'Anmeldung',\n 'logout': 'Abmeldung',\n 'create': 'Erstellt',\n 'update': 'Aktualisiert',\n 'delete': 'Gel\u00f6scht',\n 'password_reset': 'Passwort zur\u00fcckgesetzt',\n 'password_change': 'Passwort ge\u00e4ndert',\n 'notification': 'Benachrichtigung'\n };\n\n list.innerHTML = activities.map(activity => {\n const date = new Date(activity.timestamp);\n const timeStr = date.toLocaleString('de-DE', {\n day: '2-digit',\n month: '2-digit',\n year: 'numeric',\n hour: '2-digit',\n minute: '2-digit'\n });\n\n return `\n <div class=\"activity-item action-${activity.action}\">\n <div style=\"flex: 1;\">\n <div>\n <strong>${actionIcons[activity.action] || '\ud83d\udcdd'} ${actionNames[activity.action] || activity.action}<\/strong>\n <span style=\"margin-left: 10px; color: #666;\">von ${activity.user}<\/span>\n <\/div>\n <div style=\"margin-top: 5px; color: #666;\">${activity.details}<\/div>\n <div class=\"activity-meta\">${timeStr}<\/div>\n <\/div>\n <\/div>\n `;\n }).join('');\n }\n\n function clearActivityLog() {\n if (!hasPermission('admin')) {\n alert('Nur Administratoren k\u00f6nnen das Aktivit\u00e4tsprotokoll l\u00f6schen.');\n return;\n }\n\n if (confirm('Wirklich das gesamte Aktivit\u00e4tsprotokoll l\u00f6schen?')) {\n logActivity('delete', 'Aktivit\u00e4tsprotokoll wurde geleert');\n activityLog = activityLog.slice(0, 1); \/\/ Nur letzte Aktivit\u00e4t (das L\u00f6schen selbst) behalten\n saveData();\n renderActivityLog();\n }\n }\n\n function formatDate(dateStr) {\n const date = new Date(dateStr + 'T00:00:00');\n return date.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' });\n }\n\n function getBookingKey(station, date) {\n return `${station}_${date.toISOString().split('T')[0]}`;\n }\n\n function getAvailable(station, date) {\n const key = getBookingKey(station, date);\n const booked = bookings[key] || 0;\n return capacity[station] - booked;\n }\n\n function hasComment(station, date) {\n const key = getBookingKey(station, date);\n return !!comments[key];\n }\n\n function showComment(station, date) {\n const key = getBookingKey(station, date);\n const comment = comments[key];\n \n if (!comment) return;\n \n document.getElementById('commentDate').textContent = `${station} - ${formatDate(date.toISOString().split('T')[0])}`;\n document.getElementById('commentText').textContent = comment;\n document.getElementById('commentModal').classList.add('active');\n }\n\n function closeCommentModal() {\n document.getElementById('commentModal').classList.remove('active');\n }\n\n function getStatusClass(available, total) {\n const percentage = (available \/ total) * 100;\n if (percentage > 50) return 'status-green';\n if (percentage >= 20) return 'status-yellow';\n return 'status-red';\n }\n\n function getDaysInMonth(date) {\n const year = date.getFullYear();\n const month = date.getMonth();\n return new Date(year, month + 1, 0).getDate();\n }\n\n function previousMonth() {\n currentDate.setMonth(currentDate.getMonth() - 1);\n renderCalendar();\n }\n\n function nextMonth() {\n currentDate.setMonth(currentDate.getMonth() + 1);\n renderCalendar();\n }\n\n function isWeekend(date) {\n const day = date.getDay();\n return day === 0 || day === 6;\n }\n\n function isToday(date) {\n const today = new Date();\n return date.toDateString() === today.toDateString();\n }\n\n function renderCalendar() {\n const year = currentDate.getFullYear();\n const month = currentDate.getMonth();\n const daysInMonth = getDaysInMonth(currentDate);\n \n const monthNames = ['Januar', 'Februar', 'M\u00e4rz', 'April', 'Mai', 'Juni', \n 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'];\n \n document.getElementById('currentMonth').textContent = `${monthNames[month]} ${year}`;\n \n let html = '<thead><tr><th>Wache<\/th>';\n \n for (let day = 1; day <= daysInMonth; day++) {\n const date = new Date(year, month, day);\n const dayName = ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'][date.getDay()];\n html += `<th>${dayName}<br>${day}.<\/th>`;\n }\n \n html += '<\/tr><\/thead><tbody>';\n \n stations.forEach(station => {\n const stationStyle = colorEnabled[station] \n ? `class=\"station-colored\" style=\"background: ${stationColors[station]};\"` \n : '';\n html += `<tr><td><span ${stationStyle}>${station}<\/span><\/td>`;\n \n for (let day = 1; day <= daysInMonth; day++) {\n const date = new Date(year, month, day);\n const available = getAvailable(station, date);\n const total = capacity[station];\n const statusClass = getStatusClass(available, total);\n const comment = hasComment(station, date);\n \n let cellClass = 'day-cell';\n if (isWeekend(date)) cellClass += ' weekend';\n if (isToday(date)) cellClass += ' today';\n \n html += `<td class=\"${cellClass}\" onclick='${comment ? `showComment(\"${station}\", new Date(${year}, ${month}, ${day}))` : ''}'>\n <div class=\"status-indicator ${statusClass}\">${available}\/${total}<\/div>\n ${comment ? '<span class=\"comment-indicator\" title=\"Kommentar vorhanden\">\ud83d\udcac<\/span>' : ''}\n <\/td>`;\n }\n \n html += '<\/tr>';\n });\n \n html += '<\/tbody>';\n \n document.getElementById('calendarTable').innerHTML = html;\n }\n\n async function exportPDF(type) {\n const { jsPDF } = window.jspdf;\n const doc = new jsPDF('l', 'mm', 'a4');\n \n const year = currentDate.getFullYear();\n const month = currentDate.getMonth();\n const daysInMonth = getDaysInMonth(currentDate);\n const monthNames = ['Januar', 'Februar', 'M\u00e4rz', 'April', 'Mai', 'Juni', \n 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'];\n \n const title = type === 'all' \n ? `Praktikumsplatz-\u00dcbersicht Alle Wachen - ${monthNames[month]} ${year}`\n : `Praktikumsplatz-\u00dcbersicht ${type} - ${monthNames[month]} ${year}`;\n \n doc.setFontSize(16);\n doc.text(title, 15, 15);\n \n doc.setFontSize(10);\n doc.text(`Erstellt am: ${new Date().toLocaleDateString('de-DE')} von ${currentUser.name}`, 15, 22);\n \n const stationsToExport = type === 'all' ? stations : [type];\n \n const tableData = [];\n stationsToExport.forEach(station => {\n for (let day = 1; day <= daysInMonth; day++) {\n const date = new Date(year, month, day);\n const key = getBookingKey(station, date);\n const available = getAvailable(station, date);\n const total = capacity[station];\n const booked = bookings[key] || 0;\n const comment = comments[key] || '';\n const dateStr = date.toLocaleDateString('de-DE');\n const dayName = ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'][date.getDay()];\n \n let status = '\u2713 Verf\u00fcgbar';\n const percentage = (available \/ total) * 100;\n if (percentage <= 20 && available > 0) status = '\u26a0 Wenig verf\u00fcgbar';\n if (available === 0) status = '\u2717 Ausgebucht';\n \n tableData.push([\n station,\n `${dayName} ${dateStr}`,\n `${available}\/${total}`,\n status,\n comment || '-'\n ]);\n }\n });\n \n doc.autoTable({\n startY: 30,\n head: [['Wache', 'Datum', 'Verf\u00fcgbar', 'Status', 'Kommentar']],\n body: tableData,\n theme: 'striped',\n styles: { fontSize: 9 },\n headStyles: { fillColor: [102, 126, 234], textColor: 255 },\n alternateRowStyles: { fillColor: [245, 245, 245] },\n columnStyles: {\n 0: { cellWidth: 25 },\n 1: { cellWidth: 35 },\n 2: { cellWidth: 25 },\n 3: { cellWidth: 35 },\n 4: { cellWidth: 'auto' }\n }\n });\n \n const fileName = type === 'all' \n ? `Praktikumsplaetze_Gesamt_${monthNames[month]}_${year}.pdf`\n : `Praktikumsplaetze_${type}_${monthNames[month]}_${year}.pdf`;\n \n logActivity('create', `PDF-Export erstellt: ${fileName}`);\n doc.save(fileName);\n }\n\n function showExportMenu() {\n const list = document.getElementById('exportStationList');\n list.innerHTML = stations.map(station => `\n <button class=\"btn\" style=\"width: 100%; margin-bottom: 10px;\" \n onclick=\"exportPDF('${station}'); closeExportModal();\">\n ${station}\n <\/button>\n `).join('');\n document.getElementById('exportModal').classList.add('active');\n }\n\n function closeExportModal() {\n document.getElementById('exportModal').classList.remove('active');\n }\n\n document.getElementById('commentModal').addEventListener('click', function(e) {\n if (e.target === this) closeCommentModal();\n });\n\n document.getElementById('exportModal').addEventListener('click', function(e) {\n if (e.target === this) closeExportModal();\n });\n\n document.getElementById('passwordResetModal').addEventListener('click', function(e) {\n if (e.target === this) closePasswordReset();\n });\n\n document.getElementById('changePasswordModal').addEventListener('click', function(e) {\n if (e.target === this) closeChangePassword();\n });\n\n initializeData();\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Praktikumsplatz-Kalender \ud83d\ude91 Praktikumsplatz-Kalender Bitte melden Sie sich an BetrachterBearbeiterAdministrator Anmelden Passwort vergessen? Benutzerrollen: Betrachter: Kalender ansehen & exportieren Bearbeiter: + Buchungen & Kommentare verwalten Administrator: + Alle Einstellungen & Benutzerverwaltung Demo: Beliebiger Benutzername\/Passwort \ud83d\ude91 Praktikumsplatz-Kalender Rettungswachen Verf\u00fcgbarkeit der Praktikumspl\u00e4tze im \u00dcberblick \ud83d\udeaa Abmelden \ud83d\udc41\ufe0f \u00d6ffentliche Ansicht \u2699\ufe0f Verwaltung (Backend) \u2190 Vorheriger Monat N\u00e4chster Monat \u2192 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-49","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/rettungstormarn.wenk-hh.de\/index.php\/wp-json\/wp\/v2\/pages\/49","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rettungstormarn.wenk-hh.de\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/rettungstormarn.wenk-hh.de\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/rettungstormarn.wenk-hh.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rettungstormarn.wenk-hh.de\/index.php\/wp-json\/wp\/v2\/comments?post=49"}],"version-history":[{"count":5,"href":"https:\/\/rettungstormarn.wenk-hh.de\/index.php\/wp-json\/wp\/v2\/pages\/49\/revisions"}],"predecessor-version":[{"id":54,"href":"https:\/\/rettungstormarn.wenk-hh.de\/index.php\/wp-json\/wp\/v2\/pages\/49\/revisions\/54"}],"wp:attachment":[{"href":"https:\/\/rettungstormarn.wenk-hh.de\/index.php\/wp-json\/wp\/v2\/media?parent=49"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}