1960 lines
77 KiB
JavaScript
1960 lines
77 KiB
JavaScript
/**
|
||
* MYP Platform UI Components
|
||
* JavaScript-Utilities für erweiterte UI-Funktionalität
|
||
* Version: 3.0.0
|
||
*/
|
||
|
||
(function() {
|
||
'use strict';
|
||
|
||
// Namespace für MYP UI Components
|
||
window.MYP = window.MYP || {};
|
||
window.MYP.UI = window.MYP.UI || {};
|
||
|
||
/**
|
||
* Dark Mode Handler
|
||
*/
|
||
class DarkModeManager {
|
||
constructor() {
|
||
// DOM-Elemente
|
||
this.darkModeToggle = document.getElementById('darkModeToggle');
|
||
this.sunIcon = this.darkModeToggle ? this.darkModeToggle.querySelector('.sun-icon') : null;
|
||
this.moonIcon = this.darkModeToggle ? this.darkModeToggle.querySelector('.moon-icon') : null;
|
||
this.html = document.documentElement;
|
||
|
||
// Local Storage Key
|
||
this.STORAGE_KEY = 'myp-dark-mode';
|
||
|
||
this.init();
|
||
}
|
||
|
||
/**
|
||
* Aktuellen Dark Mode Status aus Local Storage oder Systemeinstellung abrufen
|
||
* @returns {boolean} True wenn Dark Mode aktiviert ist
|
||
*/
|
||
isDarkMode() {
|
||
const savedMode = localStorage.getItem(this.STORAGE_KEY);
|
||
if (savedMode !== null) {
|
||
return savedMode === 'true';
|
||
}
|
||
return window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||
}
|
||
|
||
/**
|
||
* Dark Mode aktivieren/deaktivieren
|
||
* @param {boolean} enable - Dark Mode aktivieren (true) oder deaktivieren (false)
|
||
*/
|
||
setDarkMode(enable) {
|
||
if (enable) {
|
||
this.html.classList.add('dark');
|
||
this.html.setAttribute('data-theme', 'dark');
|
||
this.html.style.colorScheme = 'dark';
|
||
this.updateDarkModeIcon(true);
|
||
this.darkModeToggle.setAttribute('aria-pressed', 'true');
|
||
this.darkModeToggle.setAttribute('title', 'Light Mode aktivieren');
|
||
if (this.sunIcon && this.moonIcon) {
|
||
this.sunIcon.classList.add('hidden');
|
||
this.moonIcon.classList.remove('hidden');
|
||
}
|
||
} else {
|
||
this.html.classList.remove('dark');
|
||
this.html.setAttribute('data-theme', 'light');
|
||
this.html.style.colorScheme = 'light';
|
||
this.updateDarkModeIcon(false);
|
||
this.darkModeToggle.setAttribute('aria-pressed', 'false');
|
||
this.darkModeToggle.setAttribute('title', 'Dark Mode aktivieren');
|
||
if (this.sunIcon && this.moonIcon) {
|
||
this.sunIcon.classList.remove('hidden');
|
||
this.moonIcon.classList.add('hidden');
|
||
}
|
||
}
|
||
|
||
// Einstellung im Local Storage speichern
|
||
localStorage.setItem(this.STORAGE_KEY, enable);
|
||
|
||
// ThemeColor Meta-Tag aktualisieren
|
||
const metaThemeColor = document.getElementById('metaThemeColor');
|
||
if (metaThemeColor) {
|
||
metaThemeColor.setAttribute('content', enable ? '#000000' : '#ffffff');
|
||
}
|
||
|
||
// Event für andere Komponenten auslösen
|
||
window.dispatchEvent(new CustomEvent('darkModeChanged', {
|
||
detail: { isDark: enable }
|
||
}));
|
||
|
||
console.log(`${enable ? '🌙' : '☀️'} Design umgeschaltet auf: ${enable ? 'Dark Mode' : 'Light Mode'}`);
|
||
}
|
||
|
||
/**
|
||
* Icon für Dark Mode Toggle aktualisieren
|
||
* @param {boolean} isDark - Ob Dark Mode aktiv ist
|
||
*/
|
||
updateDarkModeIcon(isDark) {
|
||
if (!this.darkModeToggle) return;
|
||
|
||
// Stellen sicher, dass die Icons korrekt angezeigt werden
|
||
if (this.sunIcon && this.moonIcon) {
|
||
if (isDark) {
|
||
this.sunIcon.classList.add('hidden');
|
||
this.moonIcon.classList.remove('hidden');
|
||
} else {
|
||
this.sunIcon.classList.remove('hidden');
|
||
this.moonIcon.classList.add('hidden');
|
||
}
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Event Listener einrichten und Darkmode initialisieren
|
||
*/
|
||
init() {
|
||
if (!this.darkModeToggle) {
|
||
console.error('⚠️ Dark Mode Toggle Button nicht gefunden! UI-Komponente nicht verfügbar.');
|
||
return;
|
||
}
|
||
|
||
console.log('🚀 Dark Mode Manager erfolgreich initialisiert');
|
||
|
||
// Event Listener für den Dark Mode Toggle Button
|
||
this.darkModeToggle.addEventListener('click', () => {
|
||
console.log('👆 Dark Mode Toggle Button angeklickt');
|
||
const newDarkModeState = !this.isDarkMode();
|
||
this.setDarkMode(newDarkModeState);
|
||
});
|
||
|
||
// Alternative Event-Listener für Buttons mit data-action
|
||
document.addEventListener('click', (e) => {
|
||
if (e.target.closest('[data-action="toggle-dark-mode"]')) {
|
||
console.log('👆 Dark Mode Toggle über data-action aktiviert');
|
||
const newDarkModeState = !this.isDarkMode();
|
||
this.setDarkMode(newDarkModeState);
|
||
}
|
||
});
|
||
|
||
// Tastaturkürzel: Strg+Shift+D für Dark Mode Toggle
|
||
document.addEventListener('keydown', (e) => {
|
||
if (e.ctrlKey && e.shiftKey && e.key === 'D') {
|
||
const newDarkModeState = !this.isDarkMode();
|
||
this.setDarkMode(newDarkModeState);
|
||
e.preventDefault();
|
||
}
|
||
});
|
||
|
||
// System-Preference für Dark Mode überwachen
|
||
const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
||
darkModeMediaQuery.addEventListener('change', (e) => {
|
||
// Nur ändern, wenn der Benutzer noch keine eigene Einstellung hat
|
||
if (localStorage.getItem(this.STORAGE_KEY) === null) {
|
||
this.setDarkMode(e.matches);
|
||
}
|
||
});
|
||
|
||
// Initialisierung: Aktuellen Status setzen
|
||
const isDark = this.isDarkMode();
|
||
console.log(`🔍 Initialer Dark Mode Status: ${isDark ? '🌙 aktiviert' : '☀️ deaktiviert'}`);
|
||
this.setDarkMode(isDark);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Mobile Menu Manager
|
||
*/
|
||
class MobileMenuManager {
|
||
constructor() {
|
||
this.mobileMenuToggle = document.getElementById('mobileMenuToggle');
|
||
this.mobileMenu = document.getElementById('mobileMenu');
|
||
this.isOpen = false;
|
||
|
||
this.init();
|
||
}
|
||
|
||
init() {
|
||
if (!this.mobileMenuToggle || !this.mobileMenu) {
|
||
console.log('ℹ️ Mobile Menu Komponenten nicht gefunden - Feature deaktiviert');
|
||
return;
|
||
}
|
||
|
||
console.log('📱 Mobile Menu Manager erfolgreich initialisiert');
|
||
|
||
// Event Listener für den Mobile Menu Toggle Button
|
||
this.mobileMenuToggle.addEventListener('click', () => {
|
||
this.toggleMenu();
|
||
});
|
||
|
||
// Event Listener für Klicks außerhalb des Menüs
|
||
document.addEventListener('click', (e) => {
|
||
if (this.isOpen && !this.mobileMenuToggle.contains(e.target) && !this.mobileMenu.contains(e.target)) {
|
||
this.closeMenu();
|
||
}
|
||
});
|
||
|
||
// Event Listener für das Schließen bei Klick auf einen Menüpunkt
|
||
this.mobileMenu.querySelectorAll('a').forEach(link => {
|
||
link.addEventListener('click', () => {
|
||
this.closeMenu();
|
||
});
|
||
});
|
||
|
||
// Beim Scrollen das Menü schließen
|
||
window.addEventListener('scroll', () => {
|
||
if (this.isOpen && window.scrollY > 50) {
|
||
this.closeMenu();
|
||
}
|
||
});
|
||
}
|
||
|
||
toggleMenu() {
|
||
if (this.isOpen) {
|
||
this.closeMenu();
|
||
} else {
|
||
this.openMenu();
|
||
}
|
||
}
|
||
|
||
openMenu() {
|
||
if (!this.mobileMenu || this.isOpen) return;
|
||
|
||
this.mobileMenu.classList.remove('hidden');
|
||
this.isOpen = true;
|
||
this.mobileMenuToggle.setAttribute('aria-expanded', 'true');
|
||
|
||
// Icon ändern
|
||
const menuIcon = this.mobileMenuToggle.querySelector('svg');
|
||
if (menuIcon) {
|
||
menuIcon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>';
|
||
}
|
||
|
||
// Animation - kleine Verzögerung für sanfte Animation
|
||
setTimeout(() => {
|
||
this.mobileMenu.classList.add('open');
|
||
}, 10);
|
||
|
||
// Body-Scroll verhindern (optional)
|
||
// document.body.style.overflow = 'hidden';
|
||
}
|
||
|
||
closeMenu() {
|
||
if (!this.mobileMenu || !this.isOpen) return;
|
||
|
||
this.mobileMenu.classList.remove('open');
|
||
this.isOpen = false;
|
||
this.mobileMenuToggle.setAttribute('aria-expanded', 'false');
|
||
|
||
// Icon zurücksetzen
|
||
const menuIcon = this.mobileMenuToggle.querySelector('svg');
|
||
if (menuIcon) {
|
||
menuIcon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>';
|
||
}
|
||
|
||
// Nach der Animation ausblenden
|
||
setTimeout(() => {
|
||
this.mobileMenu.classList.add('hidden');
|
||
}, 300);
|
||
|
||
// Body-Scroll wiederherstellen
|
||
// document.body.style.overflow = '';
|
||
}
|
||
}
|
||
|
||
/**
|
||
* User Dropdown Manager
|
||
*/
|
||
class UserDropdownManager {
|
||
constructor() {
|
||
this.toggleButton = document.getElementById('user-menu-button');
|
||
this.container = document.getElementById('user-menu-container');
|
||
this.dropdown = document.getElementById('user-dropdown');
|
||
this.isOpen = false;
|
||
|
||
// Dropdown erstellen, falls nicht vorhanden
|
||
if (!this.dropdown && this.container) {
|
||
this.createDropdown();
|
||
}
|
||
|
||
this.init();
|
||
}
|
||
|
||
/**
|
||
* Dropdown-Menü dynamisch erstellen, falls es nicht existiert
|
||
*/
|
||
createDropdown() {
|
||
if (!this.container) return;
|
||
|
||
// Neue Dropdown-Box erstellen
|
||
this.dropdown = document.createElement('div');
|
||
this.dropdown.id = 'user-dropdown';
|
||
this.dropdown.className = 'user-dropdown hidden';
|
||
this.dropdown.setAttribute('role', 'menu');
|
||
this.dropdown.setAttribute('aria-orientation', 'vertical');
|
||
this.dropdown.setAttribute('aria-labelledby', 'user-menu-button');
|
||
|
||
// HTML für das Dropdown-Menü
|
||
this.dropdown.innerHTML = `
|
||
<div class="dropdown-header">
|
||
<div class="avatar-large">
|
||
${this.getCurrentUserInitial()}
|
||
</div>
|
||
<div class="ml-3">
|
||
<p class="text-sm font-medium text-slate-900 dark:text-white transition-colors duration-300">
|
||
${this.getCurrentUsername()}
|
||
</p>
|
||
<p class="text-xs text-slate-500 dark:text-slate-400 transition-colors duration-300">
|
||
${this.getCurrentUserEmail()}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="dropdown-divider"></div>
|
||
<a href="/profil" id="profile-link" class="dropdown-item" role="menuitem">
|
||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
|
||
</svg>
|
||
<span>Mein Profil</span>
|
||
</a>
|
||
<a href="/einstellungen" id="settings-link" class="dropdown-item" role="menuitem">
|
||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||
</svg>
|
||
<span>Einstellungen</span>
|
||
</a>
|
||
<div class="dropdown-divider"></div>
|
||
<button type="button" data-action="logout" class="dropdown-item text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/10" role="menuitem">
|
||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
|
||
</svg>
|
||
<span>Abmelden</span>
|
||
</button>
|
||
`;
|
||
|
||
// Dropdown zum Container hinzufügen
|
||
this.container.appendChild(this.dropdown);
|
||
}
|
||
|
||
/**
|
||
* Benutzername aus E-Mail extrahieren oder Standardwert verwenden
|
||
*/
|
||
getCurrentUsername() {
|
||
const metaUsername = document.querySelector('meta[name="user-name"]');
|
||
if (metaUsername) {
|
||
return metaUsername.getAttribute('content');
|
||
}
|
||
|
||
// Aus dem vorhandenen DOM extrahieren
|
||
const usernameElement = this.container.querySelector('.text-sm.font-medium');
|
||
if (usernameElement) {
|
||
return usernameElement.textContent.trim();
|
||
}
|
||
|
||
return 'Benutzer';
|
||
}
|
||
|
||
/**
|
||
* E-Mail-Adresse aus dem DOM extrahieren
|
||
*/
|
||
getCurrentUserEmail() {
|
||
const metaEmail = document.querySelector('meta[name="user-email"]');
|
||
if (metaEmail) {
|
||
return metaEmail.getAttribute('content');
|
||
}
|
||
|
||
// Aus dem vorhandenen DOM extrahieren
|
||
const emailElement = this.container.querySelector('.text-xs');
|
||
if (emailElement) {
|
||
return emailElement.textContent.trim();
|
||
}
|
||
|
||
return 'Mercedes-Benz Mitarbeiter';
|
||
}
|
||
|
||
/**
|
||
* Initial des Benutzers extrahieren
|
||
*/
|
||
getCurrentUserInitial() {
|
||
const avatar = this.container.querySelector('.user-avatar');
|
||
if (avatar) {
|
||
return avatar.textContent.trim();
|
||
}
|
||
return 'U';
|
||
}
|
||
|
||
open() {
|
||
if (!this.dropdown || this.isOpen) return;
|
||
|
||
this.dropdown.classList.remove('hidden');
|
||
this.isOpen = true;
|
||
this.toggleButton.setAttribute('aria-expanded', 'true');
|
||
|
||
// Rotate dropdown arrow
|
||
const arrow = this.toggleButton.querySelector('svg');
|
||
if (arrow) {
|
||
arrow.style.transform = 'rotate(180deg)';
|
||
}
|
||
|
||
// Close when clicking outside
|
||
setTimeout(() => {
|
||
document.addEventListener('click', this.outsideClickHandler);
|
||
}, 10);
|
||
|
||
// Close when pressing escape
|
||
document.addEventListener('keydown', this.escapeKeyHandler);
|
||
}
|
||
|
||
close() {
|
||
if (!this.dropdown || !this.isOpen) return;
|
||
|
||
this.dropdown.classList.add('hidden');
|
||
this.isOpen = false;
|
||
this.toggleButton.setAttribute('aria-expanded', 'false');
|
||
|
||
// Reset dropdown arrow
|
||
const arrow = this.toggleButton.querySelector('svg');
|
||
if (arrow) {
|
||
arrow.style.transform = 'rotate(0deg)';
|
||
}
|
||
|
||
// Remove event listeners
|
||
document.removeEventListener('click', this.outsideClickHandler);
|
||
document.removeEventListener('keydown', this.escapeKeyHandler);
|
||
}
|
||
|
||
toggle() {
|
||
if (this.isOpen) {
|
||
this.close();
|
||
} else {
|
||
this.open();
|
||
}
|
||
}
|
||
|
||
init() {
|
||
if (!this.toggleButton || !this.dropdown) return;
|
||
|
||
// Bind methods to this instance
|
||
this.outsideClickHandler = this.handleOutsideClick.bind(this);
|
||
this.escapeKeyHandler = this.handleEscapeKey.bind(this);
|
||
|
||
// Set up click listener for toggle button
|
||
this.toggleButton.addEventListener('click', (e) => {
|
||
e.stopPropagation();
|
||
this.toggle();
|
||
});
|
||
|
||
// Set up logout button
|
||
const logoutButton = this.dropdown.querySelector('[data-action="logout"]');
|
||
if (logoutButton) {
|
||
logoutButton.addEventListener('click', this.handleLogout.bind(this));
|
||
}
|
||
|
||
// Set up settings button
|
||
const settingsLink = this.dropdown.querySelector('#settings-link');
|
||
if (settingsLink) {
|
||
settingsLink.addEventListener('click', this.handleSettings.bind(this));
|
||
}
|
||
}
|
||
|
||
handleOutsideClick(e) {
|
||
if (this.container && !this.container.contains(e.target)) {
|
||
this.close();
|
||
}
|
||
}
|
||
|
||
handleEscapeKey(e) {
|
||
if (e.key === 'Escape') {
|
||
this.close();
|
||
}
|
||
}
|
||
|
||
handleLogout(e) {
|
||
e.preventDefault();
|
||
|
||
// Add smooth logout animation
|
||
document.body.style.opacity = '0.7';
|
||
|
||
// Create and submit logout form
|
||
const form = document.createElement('form');
|
||
form.method = 'POST';
|
||
form.action = '/logout';
|
||
|
||
// Add CSRF token if available
|
||
const csrfToken = document.querySelector('meta[name="csrf-token"]');
|
||
if (csrfToken) {
|
||
const input = document.createElement('input');
|
||
input.type = 'hidden';
|
||
input.name = 'csrf_token';
|
||
input.value = csrfToken.getAttribute('content');
|
||
form.appendChild(input);
|
||
}
|
||
|
||
// Submit the form
|
||
document.body.appendChild(form);
|
||
form.submit();
|
||
}
|
||
|
||
handleSettings(e) {
|
||
// Optionales preventDefault für spezielle Handhabung
|
||
// e.preventDefault();
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Toast-Benachrichtigungen
|
||
*/
|
||
class ToastManager {
|
||
constructor() {
|
||
this.container = this.createContainer();
|
||
this.toasts = new Map();
|
||
}
|
||
|
||
createContainer() {
|
||
let container = document.getElementById('toast-container');
|
||
if (!container) {
|
||
container = document.createElement('div');
|
||
container.id = 'toast-container';
|
||
container.className = 'fixed top-4 right-4 z-50 space-y-2';
|
||
document.body.appendChild(container);
|
||
}
|
||
return container;
|
||
}
|
||
|
||
show(message, type = 'info', duration = 5000) {
|
||
const id = 'toast-' + Date.now();
|
||
const toast = this.createToast(id, message, type);
|
||
|
||
this.container.appendChild(toast);
|
||
this.toasts.set(id, toast);
|
||
|
||
// Animation einblenden
|
||
requestAnimationFrame(() => {
|
||
toast.classList.remove('translate-x-full', 'opacity-0');
|
||
});
|
||
|
||
// Auto-Hide nach duration
|
||
if (duration > 0) {
|
||
setTimeout(() => this.hide(id), duration);
|
||
}
|
||
|
||
return id;
|
||
}
|
||
|
||
createToast(id, message, type) {
|
||
const toast = document.createElement('div');
|
||
toast.id = id;
|
||
toast.className = `transform translate-x-full opacity-0 transition-all duration-300 ease-in-out max-w-sm w-full bg-white dark:bg-slate-800 shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden`;
|
||
|
||
const typeClasses = {
|
||
'success': 'border-l-4 border-green-400',
|
||
'error': 'border-l-4 border-red-400',
|
||
'warning': 'border-l-4 border-yellow-400',
|
||
'info': 'border-l-4 border-blue-400'
|
||
};
|
||
|
||
const iconHTML = {
|
||
'success': '<svg class="w-5 h-5 text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>',
|
||
'error': '<svg class="w-5 h-5 text-red-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path></svg>',
|
||
'warning': '<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg>',
|
||
'info': '<svg class="w-5 h-5 text-blue-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>'
|
||
};
|
||
|
||
toast.className += ' ' + (typeClasses[type] || typeClasses.info);
|
||
|
||
toast.innerHTML = `
|
||
<div class="p-4">
|
||
<div class="flex items-start">
|
||
<div class="flex-shrink-0">
|
||
${iconHTML[type] || iconHTML.info}
|
||
</div>
|
||
<div class="ml-3 w-0 flex-1">
|
||
<p class="text-sm font-medium text-gray-900 dark:text-white">
|
||
${message}
|
||
</p>
|
||
</div>
|
||
<div class="ml-4 flex-shrink-0 flex">
|
||
<button onclick="window.MYP.UI.toast.hide('${id}')"
|
||
class="bg-white dark:bg-slate-800 rounded-md inline-flex text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
||
<span class="sr-only">Schließen</span>
|
||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
return toast;
|
||
}
|
||
|
||
hide(id) {
|
||
const toast = this.toasts.get(id);
|
||
if (toast) {
|
||
toast.classList.add('translate-x-full', 'opacity-0');
|
||
setTimeout(() => {
|
||
if (toast.parentNode) {
|
||
toast.parentNode.removeChild(toast);
|
||
}
|
||
this.toasts.delete(id);
|
||
}, 300);
|
||
}
|
||
}
|
||
|
||
success(message, duration) {
|
||
return this.show(message, 'success', duration);
|
||
}
|
||
|
||
error(message, duration) {
|
||
return this.show(message, 'error', duration);
|
||
}
|
||
|
||
warning(message, duration) {
|
||
return this.show(message, 'warning', duration);
|
||
}
|
||
|
||
info(message, duration) {
|
||
return this.show(message, 'info', duration);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Modal-Dialog-Manager
|
||
*/
|
||
class ModalManager {
|
||
constructor() {
|
||
this.activeModals = new Set();
|
||
this.setupEventListeners();
|
||
}
|
||
|
||
setupEventListeners() {
|
||
// ESC-Taste zum Schließen
|
||
document.addEventListener('keydown', (e) => {
|
||
if (e.key === 'Escape' && this.activeModals.size > 0) {
|
||
this.closeTopModal();
|
||
}
|
||
});
|
||
}
|
||
|
||
open(modalId, options = {}) {
|
||
const modal = document.getElementById(modalId);
|
||
if (!modal) {
|
||
console.error(`Modal mit ID '${modalId}' nicht gefunden`);
|
||
return;
|
||
}
|
||
|
||
// Backdrop erstellen
|
||
const backdrop = this.createBackdrop(modalId);
|
||
document.body.appendChild(backdrop);
|
||
|
||
// Modal anzeigen
|
||
modal.style.display = 'block';
|
||
this.activeModals.add(modalId);
|
||
|
||
// Animation
|
||
requestAnimationFrame(() => {
|
||
backdrop.classList.remove('opacity-0');
|
||
modal.querySelector('.modal-content')?.classList.remove('scale-95', 'opacity-0');
|
||
});
|
||
|
||
// Body-Scroll verhindern
|
||
document.body.style.overflow = 'hidden';
|
||
|
||
// Auto-Focus auf erstes Input-Element
|
||
const firstInput = modal.querySelector('input, select, textarea, button');
|
||
if (firstInput) {
|
||
firstInput.focus();
|
||
}
|
||
}
|
||
|
||
close(modalId) {
|
||
const modal = document.getElementById(modalId);
|
||
const backdrop = document.getElementById(`backdrop-${modalId}`);
|
||
|
||
if (modal && backdrop) {
|
||
// Animation ausblenden
|
||
backdrop.classList.add('opacity-0');
|
||
modal.querySelector('.modal-content')?.classList.add('scale-95', 'opacity-0');
|
||
|
||
setTimeout(() => {
|
||
modal.style.display = 'none';
|
||
if (backdrop.parentNode) {
|
||
backdrop.parentNode.removeChild(backdrop);
|
||
}
|
||
this.activeModals.delete(modalId);
|
||
|
||
// Body-Scroll wiederherstellen, falls kein Modal mehr offen
|
||
if (this.activeModals.size === 0) {
|
||
document.body.style.overflow = '';
|
||
}
|
||
}, 150);
|
||
}
|
||
}
|
||
|
||
closeTopModal() {
|
||
if (this.activeModals.size > 0) {
|
||
const lastModal = Array.from(this.activeModals).pop();
|
||
this.close(lastModal);
|
||
}
|
||
}
|
||
|
||
createBackdrop(modalId) {
|
||
const backdrop = document.createElement('div');
|
||
backdrop.id = `backdrop-${modalId}`;
|
||
backdrop.className = 'fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity opacity-0 z-40';
|
||
backdrop.onclick = () => this.close(modalId);
|
||
return backdrop;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Dropdown-Manager
|
||
*/
|
||
class DropdownManager {
|
||
constructor() {
|
||
this.activeDropdowns = new Set();
|
||
this.setupEventListeners();
|
||
}
|
||
|
||
setupEventListeners() {
|
||
document.addEventListener('click', (e) => {
|
||
// Schließe alle Dropdowns, wenn außerhalb geklickt wird
|
||
if (!e.target.closest('[data-dropdown]')) {
|
||
this.closeAll();
|
||
}
|
||
});
|
||
}
|
||
|
||
toggle(dropdownId) {
|
||
const dropdown = document.querySelector(`[data-dropdown="${dropdownId}"]`);
|
||
if (!dropdown) return;
|
||
|
||
const menu = dropdown.querySelector('.dropdown-menu');
|
||
if (!menu) return;
|
||
|
||
if (this.activeDropdowns.has(dropdownId)) {
|
||
this.close(dropdownId);
|
||
} else {
|
||
this.closeAll(); // Andere schließen
|
||
this.open(dropdownId);
|
||
}
|
||
}
|
||
|
||
open(dropdownId) {
|
||
const dropdown = document.querySelector(`[data-dropdown="${dropdownId}"]`);
|
||
const menu = dropdown?.querySelector('.dropdown-menu');
|
||
|
||
if (dropdown && menu) {
|
||
menu.classList.remove('hidden');
|
||
this.activeDropdowns.add(dropdownId);
|
||
|
||
// Position berechnen
|
||
this.positionDropdown(dropdown, menu);
|
||
}
|
||
}
|
||
|
||
close(dropdownId) {
|
||
const dropdown = document.querySelector(`[data-dropdown="${dropdownId}"]`);
|
||
const menu = dropdown?.querySelector('.dropdown-menu');
|
||
|
||
if (menu) {
|
||
menu.classList.add('hidden');
|
||
this.activeDropdowns.delete(dropdownId);
|
||
}
|
||
}
|
||
|
||
closeAll() {
|
||
this.activeDropdowns.forEach(id => this.close(id));
|
||
}
|
||
|
||
positionDropdown(dropdown, menu) {
|
||
const rect = dropdown.getBoundingClientRect();
|
||
const menuRect = menu.getBoundingClientRect();
|
||
const viewportHeight = window.innerHeight;
|
||
|
||
// Prüfen ob Platz nach unten ist
|
||
if (rect.bottom + menuRect.height > viewportHeight) {
|
||
// Nach oben öffnen
|
||
menu.style.bottom = '100%';
|
||
menu.style.top = 'auto';
|
||
} else {
|
||
// Nach unten öffnen
|
||
menu.style.top = '100%';
|
||
menu.style.bottom = 'auto';
|
||
}
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Loading-Spinner-Manager
|
||
*/
|
||
class LoadingManager {
|
||
show(target = document.body, message = 'Laden...') {
|
||
const loadingId = 'loading-' + Date.now();
|
||
const overlay = document.createElement('div');
|
||
overlay.id = loadingId;
|
||
overlay.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
|
||
|
||
overlay.innerHTML = `
|
||
<div class="bg-white dark:bg-slate-800 rounded-lg p-6 flex items-center space-x-3 shadow-lg">
|
||
<div class="animate-spin rounded-full h-6 w-6 border-b-2 border-indigo-600"></div>
|
||
<span class="text-slate-900 dark:text-white font-medium">${message}</span>
|
||
</div>
|
||
`;
|
||
|
||
target.appendChild(overlay);
|
||
return loadingId;
|
||
}
|
||
|
||
hide(loadingId) {
|
||
const overlay = document.getElementById(loadingId);
|
||
if (overlay) {
|
||
overlay.remove();
|
||
}
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Status-Badge-Helper
|
||
*/
|
||
class StatusHelper {
|
||
static getPrinterStatusClass(status) {
|
||
const statusMap = {
|
||
'ready': 'printer-ready',
|
||
'busy': 'printer-busy',
|
||
'error': 'printer-error',
|
||
'offline': 'printer-offline',
|
||
'maintenance': 'printer-maintenance'
|
||
};
|
||
return `printer-status ${statusMap[status] || 'printer-offline'}`;
|
||
}
|
||
|
||
static getJobStatusClass(status) {
|
||
const statusMap = {
|
||
'queued': 'job-queued',
|
||
'printing': 'job-printing',
|
||
'completed': 'job-completed',
|
||
'failed': 'job-failed',
|
||
'cancelled': 'job-cancelled',
|
||
'paused': 'job-paused'
|
||
};
|
||
return `job-status ${statusMap[status] || 'job-queued'}`;
|
||
}
|
||
|
||
static formatStatus(status, type = 'job') {
|
||
const translations = {
|
||
job: {
|
||
'queued': 'In Warteschlange',
|
||
'printing': 'Wird gedruckt',
|
||
'completed': 'Abgeschlossen',
|
||
'failed': 'Fehlgeschlagen',
|
||
'cancelled': 'Abgebrochen',
|
||
'paused': 'Pausiert'
|
||
},
|
||
printer: {
|
||
'ready': 'Bereit',
|
||
'busy': 'Beschäftigt',
|
||
'error': 'Fehler',
|
||
'offline': 'Offline',
|
||
'maintenance': 'Wartung'
|
||
}
|
||
};
|
||
|
||
return translations[type]?.[status] || status;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Connection Status Manager
|
||
*/
|
||
class ConnectionStatusManager {
|
||
constructor() {
|
||
this.statusElement = document.getElementById('connection-status');
|
||
|
||
if (this.statusElement) {
|
||
this.init();
|
||
}
|
||
}
|
||
|
||
updateStatus() {
|
||
if (!this.statusElement) return;
|
||
|
||
if (navigator.onLine) {
|
||
this.statusElement.innerHTML = '<div class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div><span class="text-green-500 dark:text-green-400 font-medium transition-colors duration-300">Online</span>';
|
||
} else {
|
||
this.statusElement.innerHTML = '<div class="w-2 h-2 bg-red-400 rounded-full animate-pulse"></div><span class="text-red-500 dark:text-red-400 font-medium transition-colors duration-300">Offline</span>';
|
||
}
|
||
}
|
||
|
||
init() {
|
||
// Initial Update
|
||
this.updateStatus();
|
||
|
||
// Event Listener für Netzwerkänderungen
|
||
window.addEventListener('online', () => this.updateStatus());
|
||
window.addEventListener('offline', () => this.updateStatus());
|
||
}
|
||
}
|
||
|
||
/**
|
||
* API-Aufruf Hilfsfunktion für Fetch-Requests
|
||
* @param {string} url - API-Endpunkt
|
||
* @param {object} options - Fetch-Optionen
|
||
* @returns {Promise<object>} API-Antwort als JSON
|
||
*/
|
||
async function apiCall(url, options = {}) {
|
||
// CSRF-Token aus Meta-Tag auslesen
|
||
const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
|
||
|
||
// Standard-Headers setzen
|
||
const headers = {
|
||
'Content-Type': 'application/json',
|
||
'X-Requested-With': 'XMLHttpRequest'
|
||
};
|
||
|
||
// CSRF-Token hinzufügen, wenn vorhanden
|
||
if (csrfToken) {
|
||
headers['X-CSRFToken'] = csrfToken;
|
||
}
|
||
|
||
// Optionen zusammenführen
|
||
const fetchOptions = {
|
||
...options,
|
||
headers: {
|
||
...headers,
|
||
...(options.headers || {})
|
||
}
|
||
};
|
||
|
||
try {
|
||
const response = await fetch(url, fetchOptions);
|
||
|
||
// Prüfen, ob die Antwort JSON ist
|
||
const contentType = response.headers.get('content-type');
|
||
if (contentType && contentType.includes('application/json')) {
|
||
const data = await response.json();
|
||
|
||
// Wenn die Antwort einen Fehler enthält, werfen wir eine Ausnahme
|
||
if (!response.ok) {
|
||
throw new Error(data.error || `HTTP-Fehler: ${response.status}`);
|
||
}
|
||
|
||
return data;
|
||
}
|
||
|
||
// Für nicht-JSON-Antworten
|
||
if (!response.ok) {
|
||
throw new Error(`HTTP-Fehler: ${response.status}`);
|
||
}
|
||
|
||
return { success: true };
|
||
} catch (error) {
|
||
console.error('API-Aufruf fehlgeschlagen:', error);
|
||
throw error;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Erweiterte Flash-Nachricht anzeigen mit glasigen Effekten
|
||
* @param {string} message - Nachrichtentext
|
||
* @param {string} type - Nachrichtentyp (success, error, info, warning)
|
||
* @param {number} duration - Anzeigedauer in Millisekunden (Standard: 5000)
|
||
*/
|
||
function showFlashMessage(message, type = 'info', duration = 5000) {
|
||
// Unique ID für die Nachricht
|
||
const messageId = 'flash-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9);
|
||
|
||
// Flash-Message-Element erstellen
|
||
const flashElement = document.createElement('div');
|
||
flashElement.id = messageId;
|
||
flashElement.className = `flash-message ${type}`;
|
||
|
||
// Icon basierend auf Typ
|
||
let icon = '';
|
||
switch(type) {
|
||
case 'success':
|
||
icon = `<svg class="w-5 h-5 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
|
||
</svg>`;
|
||
break;
|
||
case 'error':
|
||
icon = `<svg class="w-5 h-5 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
|
||
</svg>`;
|
||
break;
|
||
case 'warning':
|
||
icon = `<svg class="w-5 h-5 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
||
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
|
||
</svg>`;
|
||
break;
|
||
case 'info':
|
||
default:
|
||
icon = `<svg class="w-5 h-5 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
||
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
|
||
</svg>`;
|
||
}
|
||
|
||
// Inhalt der Flash Message
|
||
flashElement.innerHTML = `
|
||
<div class="flex items-start">
|
||
${icon}
|
||
<div class="flex-1 min-w-0">
|
||
<p class="font-medium text-sm leading-relaxed">${message}</p>
|
||
</div>
|
||
<button class="flash-close-btn ml-4 flex-shrink-0 text-current opacity-70 hover:opacity-100 transition-opacity duration-200 focus:outline-none focus:opacity-100"
|
||
onclick="closeFlashMessage('${messageId}')"
|
||
aria-label="Nachricht schließen">
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
`;
|
||
|
||
// Flash Message zum DOM hinzufügen
|
||
document.body.appendChild(flashElement);
|
||
|
||
// Flash Messages vertikal stapeln
|
||
repositionFlashMessages();
|
||
|
||
// Einblende-Animation starten
|
||
requestAnimationFrame(() => {
|
||
flashElement.style.transform = 'translateX(0) translateY(0)';
|
||
flashElement.style.opacity = '1';
|
||
});
|
||
|
||
// Nach der angegebenen Zeit automatisch entfernen
|
||
setTimeout(() => {
|
||
closeFlashMessage(messageId);
|
||
}, duration);
|
||
|
||
return messageId;
|
||
}
|
||
|
||
/**
|
||
* Flash Message schließen
|
||
* @param {string} messageId - ID der zu schließenden Nachricht
|
||
*/
|
||
function closeFlashMessage(messageId) {
|
||
const flashElement = document.getElementById(messageId);
|
||
if (flashElement) {
|
||
flashElement.classList.add('hiding');
|
||
|
||
setTimeout(() => {
|
||
if (flashElement.parentNode) {
|
||
flashElement.parentNode.removeChild(flashElement);
|
||
}
|
||
repositionFlashMessages();
|
||
}, 400); // Dauer der Ausblende-Animation
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Flash Messages neu positionieren für Stapel-Effekt
|
||
*/
|
||
function repositionFlashMessages() {
|
||
const flashMessages = document.querySelectorAll('.flash-message:not(.hiding)');
|
||
const gap = 12; // Abstand zwischen Messages
|
||
const startTop = 16; // Top-Offset
|
||
|
||
flashMessages.forEach((flash, index) => {
|
||
const yPosition = startTop + (index * (80 + gap)); // 80px Höhe + gap
|
||
|
||
// Position setzen
|
||
flash.style.position = 'fixed';
|
||
flash.style.top = `${yPosition}px`;
|
||
flash.style.right = '16px';
|
||
flash.style.zIndex = 50 + (flashMessages.length - index); // Neueste Messages haben höheren z-index
|
||
flash.style.width = 'auto';
|
||
flash.style.maxWidth = '420px';
|
||
flash.style.minWidth = '320px';
|
||
|
||
// Initiale Position für Animation (nur bei neuen Messages)
|
||
if (!flash.style.transform) {
|
||
flash.style.transform = 'translateX(100%) translateY(-20px)';
|
||
flash.style.opacity = '0';
|
||
}
|
||
});
|
||
}
|
||
|
||
/**
|
||
* Navbar Scroll Manager - Glassmorphism Effekte beim Scrollen
|
||
*/
|
||
class NavbarScrollManager {
|
||
constructor() {
|
||
this.navbar = document.querySelector('.navbar');
|
||
this.isScrolled = false;
|
||
this.scrollThreshold = 50; // Ab wie vielen Pixeln der Effekt aktiviert wird
|
||
this.ticking = false; // Für requestAnimationFrame Optimierung
|
||
|
||
this.init();
|
||
}
|
||
|
||
/**
|
||
* Scroll-Handler mit Performance-Optimierung
|
||
*/
|
||
handleScroll() {
|
||
if (!this.ticking) {
|
||
requestAnimationFrame(() => {
|
||
this.updateNavbar();
|
||
this.ticking = false;
|
||
});
|
||
this.ticking = true;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Navbar basierend auf Scroll-Position aktualisieren
|
||
*/
|
||
updateNavbar() {
|
||
if (!this.navbar) return;
|
||
|
||
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
||
const shouldBeScrolled = scrollTop > this.scrollThreshold;
|
||
|
||
if (shouldBeScrolled !== this.isScrolled) {
|
||
this.isScrolled = shouldBeScrolled;
|
||
|
||
if (this.isScrolled) {
|
||
this.navbar.classList.add('scrolled');
|
||
this.navbar.style.transform = 'translateY(0)';
|
||
} else {
|
||
this.navbar.classList.remove('scrolled');
|
||
}
|
||
|
||
// Event für andere Komponenten auslösen
|
||
window.dispatchEvent(new CustomEvent('navbarScrolled', {
|
||
detail: { isScrolled: this.isScrolled, scrollTop }
|
||
}));
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Sanfte Navbar-Animation beim Scrollen nach oben/unten
|
||
*/
|
||
handleDirectionalScroll() {
|
||
let lastScrollTop = 0;
|
||
|
||
return () => {
|
||
if (!this.navbar) return;
|
||
|
||
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
||
|
||
if (scrollTop > lastScrollTop && scrollTop > this.scrollThreshold) {
|
||
// Scrollen nach unten - Navbar ausblenden
|
||
this.navbar.style.transform = 'translateY(-100%)';
|
||
} else {
|
||
// Scrollen nach oben - Navbar einblenden
|
||
this.navbar.style.transform = 'translateY(0)';
|
||
}
|
||
|
||
lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
|
||
};
|
||
}
|
||
|
||
/**
|
||
* Parallax-Effekt für die Navbar
|
||
*/
|
||
applyParallaxEffect() {
|
||
if (!this.navbar) return;
|
||
|
||
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
||
const parallaxSpeed = 0.5;
|
||
const yPos = -(scrollTop * parallaxSpeed);
|
||
|
||
// Nur bei größeren Bildschirmen anwenden
|
||
if (window.innerWidth > 768) {
|
||
this.navbar.style.transform = `translateY(${yPos}px)`;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Glassmorphism-Intensität basierend auf Scroll-Position
|
||
*/
|
||
updateGlassmorphismIntensity() {
|
||
if (!this.navbar) return;
|
||
|
||
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
||
const maxScroll = 200; // Maximale Scroll-Distanz für vollen Effekt
|
||
const intensity = Math.min(scrollTop / maxScroll, 1);
|
||
|
||
// CSS Custom Properties für dynamische Blur-Werte
|
||
const blurValue = 40 + (intensity * 20); // Von 40px zu 60px
|
||
const opacityValue = 0.15 + (intensity * 0.2); // Von 0.15 zu 0.35
|
||
|
||
this.navbar.style.setProperty('--navbar-blur', `${blurValue}px`);
|
||
this.navbar.style.setProperty('--navbar-opacity', opacityValue);
|
||
}
|
||
|
||
/**
|
||
* Navbar-Manager initialisieren
|
||
*/
|
||
init() {
|
||
if (!this.navbar) {
|
||
console.log('ℹ️ Navbar nicht gefunden - Scroll-Effekte deaktiviert');
|
||
return;
|
||
}
|
||
|
||
console.log('🌊 Navbar Scroll Manager erfolgreich initialisiert');
|
||
|
||
// CSS Custom Properties initialisieren
|
||
this.navbar.style.setProperty('--navbar-blur', '40px');
|
||
this.navbar.style.setProperty('--navbar-opacity', '0.15');
|
||
|
||
// Event Listener für Scroll-Events
|
||
window.addEventListener('scroll', this.handleScroll.bind(this), { passive: true });
|
||
|
||
// Optionale erweiterte Effekte (können aktiviert werden)
|
||
// const directionalScroll = this.handleDirectionalScroll();
|
||
// window.addEventListener('scroll', directionalScroll, { passive: true });
|
||
|
||
// Resize-Handler für responsive Anpassungen
|
||
window.addEventListener('resize', () => {
|
||
this.updateNavbar();
|
||
});
|
||
|
||
// Initialer Status setzen
|
||
this.updateNavbar();
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Do Not Disturb Manager
|
||
* Verwaltet den Do Not Disturb-Modus für Flash Messages und Benachrichtigungen
|
||
*/
|
||
class DoNotDisturbManager {
|
||
constructor() {
|
||
this.isActive = false;
|
||
this.suppressedMessages = [];
|
||
this.settings = {
|
||
allowCritical: true,
|
||
allowErrorsOnly: false,
|
||
suppressDuration: 60, // Minuten
|
||
autoDisable: true
|
||
};
|
||
this.suppressEndTime = null;
|
||
this.indicator = null;
|
||
this.counter = 0;
|
||
|
||
this.init();
|
||
}
|
||
|
||
/**
|
||
* Do Not Disturb-System initialisieren
|
||
*/
|
||
init() {
|
||
this.loadSettings();
|
||
this.createIndicator();
|
||
this.setupEventListeners();
|
||
this.checkAutoDisable();
|
||
|
||
console.log('🔕 Do Not Disturb Manager erfolgreich initialisiert');
|
||
}
|
||
|
||
/**
|
||
* Einstellungen aus localStorage laden
|
||
*/
|
||
loadSettings() {
|
||
try {
|
||
const saved = localStorage.getItem('dnd-settings');
|
||
if (saved) {
|
||
this.settings = { ...this.settings, ...JSON.parse(saved) };
|
||
}
|
||
|
||
const state = localStorage.getItem('dnd-state');
|
||
if (state) {
|
||
const savedState = JSON.parse(state);
|
||
this.isActive = savedState.isActive || false;
|
||
this.suppressEndTime = savedState.suppressEndTime ? new Date(savedState.suppressEndTime) : null;
|
||
this.suppressedMessages = savedState.suppressedMessages || [];
|
||
this.counter = savedState.counter || 0;
|
||
}
|
||
} catch (error) {
|
||
console.error('Fehler beim Laden der DND-Einstellungen:', error);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Einstellungen in localStorage speichern
|
||
*/
|
||
saveSettings() {
|
||
try {
|
||
localStorage.setItem('dnd-settings', JSON.stringify(this.settings));
|
||
localStorage.setItem('dnd-state', JSON.stringify({
|
||
isActive: this.isActive,
|
||
suppressEndTime: this.suppressEndTime,
|
||
suppressedMessages: this.suppressedMessages,
|
||
counter: this.counter
|
||
}));
|
||
} catch (error) {
|
||
console.error('Fehler beim Speichern der DND-Einstellungen:', error);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* DND-Indikator erstellen
|
||
*/
|
||
createIndicator() {
|
||
this.indicator = document.createElement('div');
|
||
this.indicator.className = 'dnd-indicator';
|
||
this.indicator.innerHTML = `
|
||
<svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
||
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zM9 8a1 1 0 012 0v4a1 1 0 11-2 0V8z" clip-rule="evenodd"/>
|
||
</svg>
|
||
<span class="dnd-text">Nicht stören</span>
|
||
<span class="dnd-counter-badge ml-2 px-2 py-1 text-xs rounded-full bg-red-500 text-white hidden">0</span>
|
||
`;
|
||
|
||
this.indicator.addEventListener('click', () => this.showSettings());
|
||
document.body.appendChild(this.indicator);
|
||
|
||
this.updateIndicator();
|
||
}
|
||
|
||
/**
|
||
* Event-Listener einrichten
|
||
*/
|
||
setupEventListeners() {
|
||
// Original showFlashMessage überschreiben
|
||
const originalShowFlashMessage = window.showFlashMessage;
|
||
window.showFlashMessage = (message, type = 'info') => {
|
||
this.handleFlashMessage(message, type, originalShowFlashMessage);
|
||
};
|
||
|
||
// Original showToast überschreiben
|
||
if (window.showToast) {
|
||
const originalShowToast = window.showToast;
|
||
window.showToast = (message, type = 'info', duration) => {
|
||
this.handleToastMessage(message, type, duration, originalShowToast);
|
||
};
|
||
}
|
||
|
||
// Periodisch Auto-Disable prüfen
|
||
setInterval(() => this.checkAutoDisable(), 60000); // Jede Minute
|
||
}
|
||
|
||
/**
|
||
* Flash Message verarbeiten
|
||
*/
|
||
handleFlashMessage(message, type, originalFunction) {
|
||
if (this.shouldSuppressMessage(type)) {
|
||
this.addSuppressedMessage(message, type, 'flash');
|
||
this.showSuppressedMessage(message, type);
|
||
} else {
|
||
originalFunction(message, type);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Toast Message verarbeiten
|
||
*/
|
||
handleToastMessage(message, type, duration, originalFunction) {
|
||
if (this.shouldSuppressMessage(type)) {
|
||
this.addSuppressedMessage(message, type, 'toast');
|
||
this.showSuppressedMessage(message, type);
|
||
} else {
|
||
originalFunction(message, type, duration);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Prüfen, ob Nachricht unterdrückt werden soll
|
||
*/
|
||
shouldSuppressMessage(type) {
|
||
if (!this.isActive) return false;
|
||
|
||
// Kritische Nachrichten immer anzeigen (falls eingestellt)
|
||
if (this.settings.allowCritical && (type === 'error' || type === 'critical')) {
|
||
return false;
|
||
}
|
||
|
||
// Nur Fehler anzeigen (falls eingestellt)
|
||
if (this.settings.allowErrorsOnly && type !== 'error') {
|
||
return true;
|
||
}
|
||
|
||
return true;
|
||
}
|
||
|
||
/**
|
||
* Unterdrückte Nachricht hinzufügen
|
||
*/
|
||
addSuppressedMessage(message, type, source) {
|
||
const suppressedMessage = {
|
||
id: Date.now(),
|
||
message,
|
||
type,
|
||
source,
|
||
timestamp: new Date(),
|
||
read: false
|
||
};
|
||
|
||
this.suppressedMessages.unshift(suppressedMessage);
|
||
this.counter++;
|
||
|
||
// Nur die letzten 50 Nachrichten behalten
|
||
if (this.suppressedMessages.length > 50) {
|
||
this.suppressedMessages = this.suppressedMessages.slice(0, 50);
|
||
}
|
||
|
||
this.updateIndicator();
|
||
this.saveSettings();
|
||
}
|
||
|
||
/**
|
||
* Gedämpfte Version der Nachricht anzeigen
|
||
*/
|
||
showSuppressedMessage(message, type) {
|
||
const suppressedFlash = document.createElement('div');
|
||
suppressedFlash.className = `flash-message dnd-suppressed ${type}`;
|
||
suppressedFlash.innerHTML = `
|
||
<div class="flex items-center">
|
||
<svg class="w-4 h-4 mr-2 opacity-50" fill="currentColor" viewBox="0 0 20 20">
|
||
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zM9 8a1 1 0 012 0v4a1 1 0 11-2 0V8z" clip-rule="evenodd"/>
|
||
</svg>
|
||
<span class="opacity-70 text-xs">Nachricht unterdrückt</span>
|
||
</div>
|
||
`;
|
||
|
||
suppressedFlash.style.top = '4rem';
|
||
document.body.appendChild(suppressedFlash);
|
||
|
||
setTimeout(() => {
|
||
suppressedFlash.remove();
|
||
}, 2000);
|
||
}
|
||
|
||
/**
|
||
* DND-Modus aktivieren
|
||
*/
|
||
enable(duration = null) {
|
||
this.isActive = true;
|
||
|
||
if (duration) {
|
||
this.suppressEndTime = new Date(Date.now() + duration * 60000);
|
||
} else {
|
||
this.suppressEndTime = null;
|
||
}
|
||
|
||
this.updateIndicator();
|
||
this.saveSettings();
|
||
|
||
console.log('🔕 Do Not Disturb aktiviert', duration ? `für ${duration} Minuten` : 'dauerhaft');
|
||
}
|
||
|
||
/**
|
||
* DND-Modus deaktivieren
|
||
*/
|
||
disable() {
|
||
this.isActive = false;
|
||
this.suppressEndTime = null;
|
||
this.updateIndicator();
|
||
this.saveSettings();
|
||
|
||
console.log('🔔 Do Not Disturb deaktiviert');
|
||
}
|
||
|
||
/**
|
||
* DND-Modus umschalten
|
||
*/
|
||
toggle() {
|
||
if (this.isActive) {
|
||
this.disable();
|
||
} else {
|
||
this.showSettings();
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Auto-Disable prüfen
|
||
*/
|
||
checkAutoDisable() {
|
||
if (this.isActive && this.suppressEndTime && new Date() >= this.suppressEndTime) {
|
||
this.disable();
|
||
if (window.showToast) {
|
||
window.showToast('Do Not Disturb automatisch deaktiviert', 'info');
|
||
}
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Indikator aktualisieren
|
||
*/
|
||
updateIndicator() {
|
||
if (!this.indicator) return;
|
||
|
||
if (this.isActive) {
|
||
this.indicator.classList.add('active');
|
||
|
||
// Counter Badge aktualisieren
|
||
const badge = this.indicator.querySelector('.dnd-counter-badge');
|
||
if (this.counter > 0) {
|
||
badge.textContent = this.counter > 99 ? '99+' : this.counter;
|
||
badge.classList.remove('hidden');
|
||
} else {
|
||
badge.classList.add('hidden');
|
||
}
|
||
|
||
// Zeitanzeige
|
||
const text = this.indicator.querySelector('.dnd-text');
|
||
if (this.suppressEndTime) {
|
||
const remaining = Math.ceil((this.suppressEndTime - new Date()) / 60000);
|
||
text.textContent = `Nicht stören (${remaining}min)`;
|
||
} else {
|
||
text.textContent = 'Nicht stören';
|
||
}
|
||
} else {
|
||
this.indicator.classList.remove('active');
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Einstellungs-Modal anzeigen
|
||
*/
|
||
showSettings() {
|
||
// Prüfen ob Modal bereits offen ist
|
||
if (document.querySelector('.dnd-modal')) {
|
||
return; // Modal bereits offen, nicht doppelt öffnen
|
||
}
|
||
|
||
const modal = document.createElement('div');
|
||
modal.className = 'dnd-modal';
|
||
modal.innerHTML = `
|
||
<div class="dnd-modal-content">
|
||
<div class="flex items-center justify-between mb-6">
|
||
<h3 class="text-lg font-semibold text-slate-900 dark:text-white">
|
||
🔕 Nicht stören
|
||
</h3>
|
||
<button class="dnd-close-btn text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200 transition-colors duration-200"
|
||
type="button">
|
||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="space-y-4">
|
||
<!-- Schnell-Aktionen -->
|
||
<div class="grid grid-cols-2 gap-3">
|
||
<button class="dnd-quick-btn btn-primary" data-duration="30" type="button">
|
||
30 Min
|
||
</button>
|
||
<button class="dnd-quick-btn btn-primary" data-duration="60" type="button">
|
||
1 Stunde
|
||
</button>
|
||
<button class="dnd-quick-btn btn-primary" data-duration="480" type="button">
|
||
8 Stunden
|
||
</button>
|
||
<button class="dnd-quick-btn btn-primary" data-duration="0" type="button">
|
||
Dauerhaft
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Erweiterte Einstellungen -->
|
||
<div class="pt-4 border-t border-gray-200/30 dark:border-slate-700/30 space-y-3">
|
||
<label class="flex items-center space-x-3">
|
||
<input type="checkbox" class="dnd-setting" data-setting="allowCritical"
|
||
${this.settings.allowCritical ? 'checked' : ''}>
|
||
<span class="text-sm text-slate-700 dark:text-slate-300">
|
||
Kritische Fehler anzeigen
|
||
</span>
|
||
</label>
|
||
|
||
<label class="flex items-center space-x-3">
|
||
<input type="checkbox" class="dnd-setting" data-setting="allowErrorsOnly"
|
||
${this.settings.allowErrorsOnly ? 'checked' : ''}>
|
||
<span class="text-sm text-slate-700 dark:text-slate-300">
|
||
Nur Fehler anzeigen
|
||
</span>
|
||
</label>
|
||
</div>
|
||
|
||
<!-- Unterdrückte Nachrichten -->
|
||
${this.suppressedMessages.length > 0 ? `
|
||
<div class="pt-4 border-t border-gray-200/30 dark:border-slate-700/30">
|
||
<div class="flex items-center justify-between mb-3">
|
||
<h4 class="text-sm font-medium text-slate-900 dark:text-white">
|
||
Unterdrückte Nachrichten (${this.suppressedMessages.length})
|
||
</h4>
|
||
<button class="dnd-clear-btn text-xs text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200 transition-colors duration-200"
|
||
type="button">
|
||
Alle löschen
|
||
</button>
|
||
</div>
|
||
<div class="max-h-32 overflow-y-auto space-y-2">
|
||
${this.suppressedMessages.slice(0, 5).map(msg => `
|
||
<div class="text-xs p-2 rounded bg-slate-100/50 dark:bg-slate-800/50">
|
||
<span class="font-medium text-${msg.type === 'error' ? 'red' : msg.type === 'warning' ? 'yellow' : msg.type === 'success' ? 'green' : 'blue'}-600 dark:text-${msg.type === 'error' ? 'red' : msg.type === 'warning' ? 'yellow' : msg.type === 'success' ? 'green' : 'blue'}-400">
|
||
${msg.type.toUpperCase()}:
|
||
</span>
|
||
<span class="text-slate-600 dark:text-slate-400">
|
||
${msg.message}
|
||
</span>
|
||
<div class="text-xs text-slate-400 dark:text-slate-500 mt-1">
|
||
${msg.timestamp.toLocaleTimeString()}
|
||
</div>
|
||
</div>
|
||
`).join('')}
|
||
${this.suppressedMessages.length > 5 ? `
|
||
<div class="text-xs text-center text-slate-500 dark:text-slate-400 py-2">
|
||
... und ${this.suppressedMessages.length - 5} weitere
|
||
</div>
|
||
` : ''}
|
||
</div>
|
||
</div>
|
||
` : ''}
|
||
|
||
<!-- Aktions-Buttons -->
|
||
<div class="flex space-x-3 pt-4">
|
||
${this.isActive ? `
|
||
<button class="dnd-disable-btn btn-secondary flex-1" type="button">
|
||
Deaktivieren
|
||
</button>
|
||
` : ''}
|
||
<button class="dnd-close-btn-main btn-primary flex-1" type="button">
|
||
Schließen
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
// Event Listeners mit Event Delegation
|
||
modal.addEventListener('click', (e) => {
|
||
e.stopPropagation();
|
||
|
||
// Schließen bei Klick auf Hintergrund
|
||
if (e.target === modal) {
|
||
this.closeModal(modal);
|
||
return;
|
||
}
|
||
|
||
// Schließen-Buttons
|
||
if (e.target.closest('.dnd-close-btn') || e.target.closest('.dnd-close-btn-main')) {
|
||
e.preventDefault();
|
||
this.closeModal(modal);
|
||
return;
|
||
}
|
||
|
||
// Schnell-Aktionen
|
||
if (e.target.classList.contains('dnd-quick-btn')) {
|
||
e.preventDefault();
|
||
const duration = parseInt(e.target.dataset.duration);
|
||
if (duration === 0) {
|
||
this.enable();
|
||
} else {
|
||
this.enable(duration);
|
||
}
|
||
this.closeModal(modal);
|
||
return;
|
||
}
|
||
|
||
// Deaktivieren-Button
|
||
if (e.target.classList.contains('dnd-disable-btn')) {
|
||
e.preventDefault();
|
||
this.disable();
|
||
this.closeModal(modal);
|
||
return;
|
||
}
|
||
|
||
// Alle löschen
|
||
if (e.target.classList.contains('dnd-clear-btn')) {
|
||
e.preventDefault();
|
||
this.clearSuppressedMessages();
|
||
this.closeModal(modal);
|
||
// Modal neu öffnen mit aktualisierten Daten
|
||
setTimeout(() => this.showSettings(), 100);
|
||
return;
|
||
}
|
||
|
||
// Einstellungen-Checkboxen
|
||
if (e.target.classList.contains('dnd-setting')) {
|
||
const setting = e.target.dataset.setting;
|
||
this.settings[setting] = e.target.checked;
|
||
this.saveSettings();
|
||
return;
|
||
}
|
||
});
|
||
|
||
// ESC-Taste zum Schließen
|
||
const escapeHandler = (e) => {
|
||
if (e.key === 'Escape') {
|
||
this.closeModal(modal);
|
||
document.removeEventListener('keydown', escapeHandler);
|
||
}
|
||
};
|
||
document.addEventListener('keydown', escapeHandler);
|
||
|
||
// Modal zum DOM hinzufügen
|
||
document.body.appendChild(modal);
|
||
}
|
||
|
||
/**
|
||
* Modal schließen
|
||
*/
|
||
closeModal(modal) {
|
||
if (modal && modal.parentNode) {
|
||
modal.style.opacity = '0';
|
||
modal.style.pointerEvents = 'none';
|
||
setTimeout(() => {
|
||
if (modal.parentNode) {
|
||
modal.parentNode.removeChild(modal);
|
||
}
|
||
}, 200);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Unterdrückte Nachrichten löschen
|
||
*/
|
||
clearSuppressedMessages() {
|
||
this.suppressedMessages = [];
|
||
this.counter = 0;
|
||
this.updateIndicator();
|
||
this.saveSettings();
|
||
}
|
||
|
||
/**
|
||
* Unterdrückte Nachrichten abrufen
|
||
*/
|
||
getSuppressedMessages() {
|
||
return [...this.suppressedMessages];
|
||
}
|
||
|
||
/**
|
||
* Status abrufen
|
||
*/
|
||
getStatus() {
|
||
return {
|
||
isActive: this.isActive,
|
||
suppressEndTime: this.suppressEndTime,
|
||
suppressedCount: this.suppressedMessages.length,
|
||
settings: { ...this.settings }
|
||
};
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Navbar Do Not Disturb Integration
|
||
* Verbindet den DND-Button in der Navbar mit dem DoNotDisturbManager
|
||
*/
|
||
class NavbarDNDIntegration {
|
||
constructor(dndManager) {
|
||
this.dndManager = dndManager;
|
||
this.button = document.getElementById('dndToggle');
|
||
this.counter = document.getElementById('dndCounter');
|
||
this.iconOff = null;
|
||
this.iconOn = null;
|
||
this.tooltipOff = null;
|
||
this.tooltipOn = null;
|
||
|
||
this.init();
|
||
}
|
||
|
||
/**
|
||
* Navbar DND Integration initialisieren
|
||
*/
|
||
init() {
|
||
if (!this.button) {
|
||
console.log('ℹ️ DND Button nicht gefunden - Navbar Integration deaktiviert');
|
||
return;
|
||
}
|
||
|
||
this.iconOff = this.button.querySelector('.dnd-icon-off');
|
||
this.iconOn = this.button.querySelector('.dnd-icon-on');
|
||
this.tooltipOff = this.button.querySelector('.dnd-tooltip-off');
|
||
this.tooltipOn = this.button.querySelector('.dnd-tooltip-on');
|
||
|
||
// Event Listener
|
||
this.button.addEventListener('click', () => this.handleButtonClick());
|
||
|
||
// Initial state setzen
|
||
this.updateButton();
|
||
|
||
// Status-Änderungen überwachen
|
||
setInterval(() => this.updateButton(), 1000);
|
||
|
||
console.log('🔕 Navbar DND Integration erfolgreich initialisiert');
|
||
}
|
||
|
||
/**
|
||
* Button-Click Handler
|
||
*/
|
||
handleButtonClick() {
|
||
this.dndManager.toggle();
|
||
this.updateButton();
|
||
}
|
||
|
||
/**
|
||
* Button-Erscheinungsbild aktualisieren
|
||
*/
|
||
updateButton() {
|
||
if (!this.button) return;
|
||
|
||
const status = this.dndManager.getStatus();
|
||
|
||
if (status.isActive) {
|
||
// DND ist aktiv
|
||
this.button.classList.add('dnd-active');
|
||
|
||
if (this.iconOff) {
|
||
this.iconOff.style.opacity = '0';
|
||
this.iconOff.style.transform = 'scale(0.75)';
|
||
}
|
||
|
||
if (this.iconOn) {
|
||
this.iconOn.style.opacity = '1';
|
||
this.iconOn.style.transform = 'scale(1)';
|
||
}
|
||
|
||
if (this.tooltipOff) this.tooltipOff.classList.add('hidden');
|
||
if (this.tooltipOn) this.tooltipOn.classList.remove('hidden');
|
||
|
||
// Counter aktualisieren
|
||
if (this.counter && status.suppressedCount > 0) {
|
||
this.counter.textContent = status.suppressedCount > 99 ? '99+' : status.suppressedCount;
|
||
this.counter.classList.remove('hidden');
|
||
} else if (this.counter) {
|
||
this.counter.classList.add('hidden');
|
||
}
|
||
|
||
// Button-Erscheinungsbild
|
||
this.button.style.background = 'rgba(239, 68, 68, 0.1)';
|
||
this.button.style.borderColor = 'rgba(239, 68, 68, 0.3)';
|
||
|
||
} else {
|
||
// DND ist inaktiv
|
||
this.button.classList.remove('dnd-active');
|
||
|
||
if (this.iconOff) {
|
||
this.iconOff.style.opacity = '1';
|
||
this.iconOff.style.transform = 'scale(1)';
|
||
}
|
||
|
||
if (this.iconOn) {
|
||
this.iconOn.style.opacity = '0';
|
||
this.iconOn.style.transform = 'scale(0.75)';
|
||
}
|
||
|
||
if (this.tooltipOff) this.tooltipOff.classList.remove('hidden');
|
||
if (this.tooltipOn) this.tooltipOn.classList.add('hidden');
|
||
|
||
if (this.counter) this.counter.classList.add('hidden');
|
||
|
||
// Button-Erscheinungsbild zurücksetzen
|
||
this.button.style.background = '';
|
||
this.button.style.borderColor = '';
|
||
}
|
||
}
|
||
}
|
||
|
||
// Initialisierung aller UI-Komponenten
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// Toast-Manager
|
||
window.MYP.UI.toast = new ToastManager();
|
||
|
||
// Modal-Manager
|
||
window.MYP.UI.modal = new ModalManager();
|
||
|
||
// Dropdown-Manager
|
||
window.MYP.UI.dropdown = new DropdownManager();
|
||
|
||
// Loading-Manager
|
||
window.MYP.UI.loading = new LoadingManager();
|
||
|
||
// Dark Mode Manager
|
||
window.MYP.UI.darkMode = new DarkModeManager();
|
||
|
||
// Mobile Menu Manager
|
||
window.MYP.UI.mobileMenu = new MobileMenuManager();
|
||
|
||
// User Dropdown Manager
|
||
window.MYP.UI.userDropdown = new UserDropdownManager();
|
||
|
||
// Connection Status Manager
|
||
window.MYP.UI.connectionStatus = new ConnectionStatusManager();
|
||
|
||
// Navbar Scroll Manager für Glassmorphism-Effekte
|
||
window.MYP.UI.navbarScroll = new NavbarScrollManager();
|
||
|
||
// Do Not Disturb Manager
|
||
window.MYP.UI.doNotDisturb = new DoNotDisturbManager();
|
||
|
||
// Navbar DND Integration
|
||
window.MYP.UI.navbarDND = new NavbarDNDIntegration(window.MYP.UI.doNotDisturb);
|
||
|
||
// Convenience-Methoden
|
||
window.showToast = (message, type, duration) => window.MYP.UI.toast.show(message, type, duration);
|
||
window.showModal = (modalId, options) => window.MYP.UI.modal.open(modalId, options);
|
||
window.hideModal = (modalId) => window.MYP.UI.modal.close(modalId);
|
||
window.toggleDarkMode = () => window.MYP.UI.darkMode.setDarkMode(!window.MYP.UI.darkMode.isDarkMode());
|
||
window.toggleDoNotDisturb = () => window.MYP.UI.doNotDisturb.toggle();
|
||
window.enableDoNotDisturb = (duration) => window.MYP.UI.doNotDisturb.enable(duration);
|
||
window.disableDoNotDisturb = () => window.MYP.UI.doNotDisturb.disable();
|
||
|
||
// Event-Listener für data-Attribute
|
||
document.addEventListener('click', (e) => {
|
||
// Modal-Trigger
|
||
if (e.target.matches('[data-modal-open]')) {
|
||
const modalId = e.target.getAttribute('data-modal-open');
|
||
window.MYP.UI.modal.open(modalId);
|
||
}
|
||
|
||
// Modal-Close
|
||
if (e.target.matches('[data-modal-close]')) {
|
||
const modalId = e.target.getAttribute('data-modal-close');
|
||
window.MYP.UI.modal.close(modalId);
|
||
}
|
||
|
||
// Dropdown-Toggle
|
||
if (e.target.closest('[data-dropdown-toggle]')) {
|
||
const dropdownId = e.target.closest('[data-dropdown-toggle]').getAttribute('data-dropdown-toggle');
|
||
window.MYP.UI.dropdown.toggle(dropdownId);
|
||
}
|
||
|
||
// Do Not Disturb Toggle
|
||
if (e.target.matches('[data-dnd-toggle]') || e.target.closest('[data-dnd-toggle]')) {
|
||
window.MYP.UI.doNotDisturb.toggle();
|
||
}
|
||
});
|
||
|
||
// Keyboard Shortcuts
|
||
document.addEventListener('keydown', (e) => {
|
||
// Ctrl/Cmd + Shift + D für Do Not Disturb Toggle
|
||
if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key.toLowerCase() === 'd') {
|
||
e.preventDefault();
|
||
window.MYP.UI.doNotDisturb.toggle();
|
||
}
|
||
|
||
// Escape für alle Modals schließen
|
||
if (e.key === 'Escape') {
|
||
window.MYP.UI.modal.closeTopModal();
|
||
}
|
||
});
|
||
|
||
console.log('✅ MYP UI Components erfolgreich initialisiert - Erweiterte Benutzeroberfläche mit Glassmorphism und Do Not Disturb bereit');
|
||
|
||
// Test der glasigen Flash Messages (nur im Development)
|
||
if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
|
||
// Warten auf vollständige Initialisierung, dann Test-Messages anzeigen
|
||
setTimeout(() => {
|
||
console.log('🧪 Teste glasige Flash Messages...');
|
||
showFlashMessage('Glassmorphism Flash Messages sind aktiv! ✨', 'success', 7000);
|
||
|
||
setTimeout(() => {
|
||
showFlashMessage('Do Not Disturb System ist bereit. Probieren Sie es im Footer aus! 🔕', 'info', 7000);
|
||
}, 1000);
|
||
|
||
setTimeout(() => {
|
||
showFlashMessage('Warnung: Dies ist eine Test-Nachricht für das glasige Design.', 'warning', 7000);
|
||
}, 2000);
|
||
}, 2000);
|
||
}
|
||
});
|
||
|
||
// Globale Variablen für erweiterte Flash Messages
|
||
window.showFlashMessage = showFlashMessage;
|
||
window.closeFlashMessage = closeFlashMessage;
|
||
|
||
// Globale Variable für Toast-Funktion
|
||
window.showToast = showToast;
|
||
|
||
// Globale Variable für API-Aufrufe
|
||
window.apiCall = apiCall;
|
||
})();
|