feat: Erweiterung der Druckerstatusüberprüfung durch Implementierung einer Steckdosenabfrage für Drucker. Verbesserung der Benutzeroberfläche mit optimierten Dark Mode-Elementen und neuen Statusanzeigen für Drucker. Anpassungen in den Templates zur Unterstützung dynamischer Statusinformationen und zur Verbesserung der Benutzererfahrung. Aktualisierung der CSS-Styles für ein ansprechenderes Design und bessere Benutzerinteraktion.
This commit is contained in:
@@ -79,7 +79,7 @@
|
||||
}, 100);
|
||||
|
||||
// Erfolgsmeldung in die Konsole
|
||||
console.log(`Dark Mode ${enable ? 'aktiviert' : 'deaktiviert'}`);
|
||||
console.log(`${enable ? '🌙' : '☀️'} ${enable ? 'Dark Mode aktiviert - Augenschonender Modus aktiv' : 'Light Mode aktiviert - Heller Modus aktiv'}`);
|
||||
}
|
||||
|
||||
// Aktualisiert das Theme-Color Meta-Tag
|
||||
@@ -117,35 +117,38 @@
|
||||
darkModeToggle.setAttribute('aria-pressed', isDark.toString());
|
||||
darkModeToggle.title = isDark ? "Light Mode aktivieren" : "Dark Mode aktivieren";
|
||||
|
||||
// Stile aktualisieren mit Tailwind-Klassen
|
||||
if (isDark) {
|
||||
darkModeToggle.classList.remove('bg-indigo-600', 'hover:bg-indigo-700');
|
||||
darkModeToggle.classList.add('bg-slate-800', 'hover:bg-slate-700', 'text-amber-400');
|
||||
darkModeToggle.setAttribute('data-tooltip', 'Light Mode aktivieren');
|
||||
} else {
|
||||
darkModeToggle.classList.remove('bg-slate-800', 'hover:bg-slate-700', 'text-amber-400');
|
||||
darkModeToggle.classList.add('bg-indigo-600', 'hover:bg-indigo-700');
|
||||
darkModeToggle.setAttribute('data-tooltip', 'Dark Mode aktivieren');
|
||||
}
|
||||
// Icons aktualisieren
|
||||
const sunIcon = darkModeToggle.querySelector('.sun-icon');
|
||||
const moonIcon = darkModeToggle.querySelector('.moon-icon');
|
||||
|
||||
// Icon aktualisieren - ohne innerHTML für CSP-Kompatibilität
|
||||
const icon = darkModeToggle.querySelector('svg');
|
||||
if (icon) {
|
||||
// Animationsklasse hinzufügen
|
||||
icon.classList.add('animate-spin-once');
|
||||
|
||||
// Nach Animation wieder entfernen
|
||||
setTimeout(() => {
|
||||
icon.classList.remove('animate-spin-once');
|
||||
}, 300);
|
||||
|
||||
const pathElement = icon.querySelector('path');
|
||||
if (pathElement) {
|
||||
// Sonnen- oder Mond-Symbol
|
||||
if (isDark) {
|
||||
pathElement.setAttribute("d", "M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z");
|
||||
} else {
|
||||
pathElement.setAttribute("d", "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z");
|
||||
if (sunIcon && moonIcon) {
|
||||
if (isDark) {
|
||||
sunIcon.classList.add('hidden');
|
||||
moonIcon.classList.remove('hidden');
|
||||
} else {
|
||||
sunIcon.classList.remove('hidden');
|
||||
moonIcon.classList.add('hidden');
|
||||
}
|
||||
} else {
|
||||
// Fallback für ältere Implementierung mit einem Icon
|
||||
const icon = darkModeToggle.querySelector('svg');
|
||||
if (icon) {
|
||||
// Animationsklasse hinzufügen
|
||||
icon.classList.add('animate-spin-once');
|
||||
|
||||
// Nach Animation wieder entfernen
|
||||
setTimeout(() => {
|
||||
icon.classList.remove('animate-spin-once');
|
||||
}, 300);
|
||||
|
||||
const pathElement = icon.querySelector('path');
|
||||
if (pathElement) {
|
||||
// Sonnen- oder Mond-Symbol
|
||||
if (isDark) {
|
||||
pathElement.setAttribute("d", "M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z");
|
||||
} else {
|
||||
pathElement.setAttribute("d", "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -158,6 +161,7 @@
|
||||
|
||||
// Wenn kein Toggle existiert, erstelle einen
|
||||
if (!darkModeToggle) {
|
||||
console.log('🔧 Dark Mode Toggle nicht gefunden - erstelle automatisch einen neuen Button');
|
||||
createDarkModeToggle();
|
||||
}
|
||||
|
||||
@@ -165,6 +169,7 @@
|
||||
if (darkModeToggle) {
|
||||
darkModeToggle.addEventListener('click', function() {
|
||||
const isDark = !shouldUseDarkMode();
|
||||
console.log(`👆 Dark Mode Toggle: Wechsel zu ${isDark ? '🌙 dunkel' : '☀️ hell'} angefordert`);
|
||||
setDarkMode(isDark);
|
||||
});
|
||||
}
|
||||
@@ -173,6 +178,7 @@
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.ctrlKey && e.shiftKey && e.key === 'D') {
|
||||
const isDark = !shouldUseDarkMode();
|
||||
console.log(`⌨️ Tastenkombination STRG+SHIFT+D erkannt: Wechsel zu ${isDark ? '🌙 dunkel' : '☀️ hell'}`);
|
||||
setDarkMode(isDark);
|
||||
e.preventDefault();
|
||||
}
|
||||
@@ -186,6 +192,7 @@
|
||||
darkModeMediaQuery.addEventListener('change', function(e) {
|
||||
// Nur anwenden, wenn keine benutzerdefinierte Einstellung gespeichert ist
|
||||
if (localStorage.getItem(STORAGE_KEY) === null) {
|
||||
console.log(`🖥️ Systemeinstellung geändert: ${e.matches ? '🌙 dunkel' : '☀️ hell'}`);
|
||||
setDarkMode(e.matches);
|
||||
}
|
||||
});
|
||||
@@ -193,22 +200,27 @@
|
||||
// Fallback für ältere Browser
|
||||
darkModeMediaQuery.addListener(function(e) {
|
||||
if (localStorage.getItem(STORAGE_KEY) === null) {
|
||||
console.log(`🖥️ Systemeinstellung geändert (Legacy-Browser): ${e.matches ? '🌙 dunkel' : '☀️ hell'}`);
|
||||
setDarkMode(e.matches);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Initialer Zustand
|
||||
setDarkMode(shouldUseDarkMode());
|
||||
const initialState = shouldUseDarkMode();
|
||||
console.log(`🔍 Ermittelter Ausgangszustand: ${initialState ? '🌙 Dark Mode' : '☀️ Light Mode'}`);
|
||||
setDarkMode(initialState);
|
||||
|
||||
// Animation für den korrekten Modus hinzufügen
|
||||
const animClass = shouldUseDarkMode() ? 'dark-mode-transition' : 'light-mode-transition';
|
||||
const animClass = initialState ? 'dark-mode-transition' : 'light-mode-transition';
|
||||
document.body.classList.add(animClass);
|
||||
|
||||
// Animation entfernen nach Abschluss
|
||||
setTimeout(() => {
|
||||
document.body.classList.remove(animClass);
|
||||
}, 300);
|
||||
|
||||
console.log('🚀 Dark Mode Handler erfolgreich initialisiert');
|
||||
}
|
||||
|
||||
// Erstellt ein Toggle-Element, falls keines existiert
|
||||
@@ -218,46 +230,61 @@
|
||||
const nav = document.querySelector('nav');
|
||||
const container = document.querySelector('.dark-mode-container') || header || nav;
|
||||
|
||||
if (!container) return;
|
||||
if (!container) {
|
||||
console.error('⚠️ Kein geeigneter Container für Dark Mode Toggle gefunden');
|
||||
return;
|
||||
}
|
||||
|
||||
// Toggle-Button erstellen
|
||||
darkModeToggle = document.createElement('button');
|
||||
darkModeToggle.id = 'darkModeToggle';
|
||||
darkModeToggle.className = 'p-2 sm:p-3 rounded-full bg-indigo-600 text-white transition-all duration-300';
|
||||
darkModeToggle.className = 'dark-mode-toggle-new';
|
||||
darkModeToggle.setAttribute('aria-label', 'Dark Mode umschalten');
|
||||
darkModeToggle.setAttribute('title', 'Dark Mode aktivieren');
|
||||
darkModeToggle.setAttribute('data-tooltip', 'Dark Mode aktivieren');
|
||||
darkModeToggle.setAttribute('data-action', 'toggle-dark-mode');
|
||||
|
||||
// SVG-Icon erstellen (ohne innerHTML für Content Security Policy)
|
||||
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
||||
svg.setAttribute("class", "w-4 h-4 sm:w-5 sm:h-5");
|
||||
svg.setAttribute("fill", "none");
|
||||
svg.setAttribute("stroke", "currentColor");
|
||||
svg.setAttribute("viewBox", "0 0 24 24");
|
||||
// Sonnen-Icon erstellen
|
||||
const sunIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
||||
sunIcon.setAttribute("class", "w-5 h-5 sm:w-5 sm:h-5 sun-icon");
|
||||
sunIcon.setAttribute("fill", "none");
|
||||
sunIcon.setAttribute("stroke", "currentColor");
|
||||
sunIcon.setAttribute("viewBox", "0 0 24 24");
|
||||
sunIcon.setAttribute("aria-hidden", "true");
|
||||
|
||||
// Path für das Icon
|
||||
const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
||||
path.setAttribute("stroke-linecap", "round");
|
||||
path.setAttribute("stroke-linejoin", "round");
|
||||
path.setAttribute("stroke-width", "2");
|
||||
path.setAttribute("d", "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z");
|
||||
const sunPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
||||
sunPath.setAttribute("stroke-linecap", "round");
|
||||
sunPath.setAttribute("stroke-linejoin", "round");
|
||||
sunPath.setAttribute("stroke-width", "2");
|
||||
sunPath.setAttribute("d", "M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z");
|
||||
|
||||
// Mond-Icon erstellen
|
||||
const moonIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
||||
moonIcon.setAttribute("class", "w-5 h-5 sm:w-5 sm:h-5 moon-icon hidden");
|
||||
moonIcon.setAttribute("fill", "none");
|
||||
moonIcon.setAttribute("stroke", "currentColor");
|
||||
moonIcon.setAttribute("viewBox", "0 0 24 24");
|
||||
moonIcon.setAttribute("aria-hidden", "true");
|
||||
|
||||
const moonPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
||||
moonPath.setAttribute("stroke-linecap", "round");
|
||||
moonPath.setAttribute("stroke-linejoin", "round");
|
||||
moonPath.setAttribute("stroke-width", "2");
|
||||
moonPath.setAttribute("d", "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z");
|
||||
|
||||
// Elemente zusammenfügen
|
||||
svg.appendChild(path);
|
||||
darkModeToggle.appendChild(svg);
|
||||
|
||||
// Screenreader-Text hinzufügen
|
||||
const srText = document.createElement('span');
|
||||
srText.className = 'sr-only';
|
||||
srText.textContent = 'Dark Mode umschalten';
|
||||
darkModeToggle.appendChild(srText);
|
||||
sunIcon.appendChild(sunPath);
|
||||
moonIcon.appendChild(moonPath);
|
||||
darkModeToggle.appendChild(sunIcon);
|
||||
darkModeToggle.appendChild(moonIcon);
|
||||
|
||||
// Zum Container hinzufügen
|
||||
container.appendChild(darkModeToggle);
|
||||
console.log('✅ Dark Mode Toggle Button erfolgreich erstellt und zur Benutzeroberfläche hinzugefügt');
|
||||
}
|
||||
|
||||
// Sofort Dark/Light Mode anwenden (vor DOMContentLoaded)
|
||||
const isDark = shouldUseDarkMode();
|
||||
console.log(`🏃♂️ Sofortige Anwendung: ${isDark ? '🌙 Dark Mode' : '☀️ Light Mode'} (vor DOM-Ladung)`);
|
||||
setDarkMode(isDark);
|
||||
})();
|
||||
|
||||
@@ -275,4 +302,5 @@ if (!document.querySelector('style#dark-mode-animations')) {
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(styleTag);
|
||||
console.log('💫 Animations-Styles für Dark Mode Toggle hinzugefügt');
|
||||
}
|
||||
Reference in New Issue
Block a user