🔧 Update: Enhanced error handling and logging across various modules
**Änderungen:** - ✅ app.py: Hinzugefügt, um CSRF-Fehler zu behandeln - ✅ models.py: Fehlerprotokollierung bei der Suche nach Gastanfragen per OTP - ✅ api.py: Fehlerprotokollierung beim Markieren von Benachrichtigungen als gelesen - ✅ calendar.py: Fallback-Daten zurückgeben, wenn keine Kalenderereignisse vorhanden sind - ✅ guest.py: Status-Check-Seite für Gäste aktualisiert - ✅ hardware_integration.py: Debugging-Informationen für erweiterte Geräteinformationen hinzugefügt - ✅ tapo_status_manager.py: Rückgabewert für Statusabfrage hinzugefügt **Ergebnis:** - Verbesserte Fehlerbehandlung und Protokollierung für eine robustere Anwendung - Bessere Nachverfolgbarkeit von Fehlern und Systemverhalten 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@ -4,9 +4,10 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
||||
<meta name="description" content="MYP Platform - Mercedes-Benz 3D Druck Management System">
|
||||
<meta name="author" content="Mercedes-Benz Group AG">
|
||||
<meta name="robots" content="noindex, nofollow">
|
||||
<meta name="theme-color" content="#000000" id="theme-color">
|
||||
<meta name="csrf-token" content="{{ csrf_token() }}">
|
||||
<meta id="theme-color" name="theme-color" content="#ffffff">
|
||||
<meta name="csrf-token" content="{{ csrf_token() if csrf_token else session.get('_csrf_token', '') }}">
|
||||
|
||||
<title>{% block title %}MYP - Mercedes-Benz{% endblock %}</title>
|
||||
|
||||
@ -20,6 +21,9 @@
|
||||
<link href="{{ url_for('static', filename='css/tailwind.min.css') }}" rel="stylesheet">
|
||||
<link href="{{ url_for('static', filename='fontawesome/css/all.min.css') }}" rel="stylesheet">
|
||||
|
||||
<!-- Unified Dark/Light Mode System -->
|
||||
<link href="{{ url_for('static', filename='css/dark-light-unified.css') }}" rel="stylesheet">
|
||||
|
||||
<!-- Modern Styles with Glassmorphism -->
|
||||
<style>
|
||||
/* Root Variables */
|
||||
@ -251,10 +255,30 @@
|
||||
<div class="flex items-center space-x-2">
|
||||
{% if current_user.is_authenticated %}
|
||||
<!-- Notifications -->
|
||||
<button class="p-2 rounded-lg hover:bg-white/10 dark:hover:bg-black/10 relative">
|
||||
<i class="fas fa-bell"></i>
|
||||
<span class="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full hidden"></span>
|
||||
</button>
|
||||
<div class="relative">
|
||||
<button id="notificationToggle" class="p-2 rounded-lg hover:bg-white/10 dark:hover:bg-black/10 relative">
|
||||
<i class="fas fa-bell"></i>
|
||||
<span id="notificationBadge" class="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full hidden"></span>
|
||||
</button>
|
||||
|
||||
<!-- Notification Dropdown -->
|
||||
<div id="notificationDropdown" class="hidden absolute right-0 mt-2 w-80 glass rounded-xl overflow-hidden z-50">
|
||||
<div class="p-4 border-b border-white/10">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="font-semibold">Benachrichtigungen</h3>
|
||||
<button id="markAllRead" class="text-xs text-blue-500 hover:text-blue-400">
|
||||
Alle als gelesen markieren
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="notificationList" class="max-h-96 overflow-y-auto">
|
||||
<div class="p-4 text-center text-slate-500 dark:text-slate-400">
|
||||
<i class="fas fa-bell-slash text-2xl mb-2"></i>
|
||||
<p>Keine neuen Benachrichtigungen</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Dark Mode Toggle -->
|
||||
@ -498,26 +522,304 @@
|
||||
|
||||
<!-- JavaScript -->
|
||||
<script>
|
||||
// Dark Mode Toggle
|
||||
// Dark Mode Toggle - Vereinfachte Version ohne Konflikte
|
||||
const darkModeToggle = document.getElementById('darkModeToggle');
|
||||
const sunIcon = document.querySelector('.sun-icon');
|
||||
const moonIcon = document.querySelector('.moon-icon');
|
||||
const STORAGE_KEY = 'myp-dark-mode';
|
||||
|
||||
function updateDarkMode() {
|
||||
function updateDarkModeIcons() {
|
||||
const isDark = document.documentElement.classList.contains('dark');
|
||||
sunIcon.classList.toggle('hidden', isDark);
|
||||
moonIcon.classList.toggle('hidden', !isDark);
|
||||
document.getElementById('theme-color').setAttribute('content', isDark ? '#1e293b' : '#ffffff');
|
||||
if (sunIcon && moonIcon) {
|
||||
sunIcon.classList.toggle('hidden', isDark);
|
||||
moonIcon.classList.toggle('hidden', !isDark);
|
||||
}
|
||||
|
||||
// Meta theme color aktualisieren
|
||||
const themeColorMeta = document.getElementById('theme-color');
|
||||
if (themeColorMeta) {
|
||||
themeColorMeta.setAttribute('content', isDark ? '#1e293b' : '#ffffff');
|
||||
}
|
||||
}
|
||||
|
||||
function setDarkMode(isDark) {
|
||||
if (isDark) {
|
||||
document.documentElement.classList.add('dark');
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark');
|
||||
}
|
||||
|
||||
localStorage.setItem(STORAGE_KEY, isDark.toString());
|
||||
updateDarkModeIcons();
|
||||
|
||||
// Custom Event für andere Komponenten
|
||||
window.dispatchEvent(new CustomEvent('darkModeChanged', {
|
||||
detail: { isDark: isDark }
|
||||
}));
|
||||
|
||||
console.log(`🎨 Theme gewechselt zu: ${isDark ? 'Dark Mode' : 'Light Mode'}`);
|
||||
}
|
||||
|
||||
// Toggle Event Listener
|
||||
darkModeToggle?.addEventListener('click', () => {
|
||||
document.documentElement.classList.toggle('dark');
|
||||
const isDark = document.documentElement.classList.contains('dark');
|
||||
localStorage.setItem('myp-dark-mode', isDark);
|
||||
updateDarkMode();
|
||||
const currentIsDark = document.documentElement.classList.contains('dark');
|
||||
setDarkMode(!currentIsDark);
|
||||
});
|
||||
|
||||
updateDarkMode();
|
||||
// Initial setup
|
||||
updateDarkModeIcons();
|
||||
|
||||
// Notification System
|
||||
class NotificationManager {
|
||||
constructor() {
|
||||
this.notifications = [];
|
||||
this.isOpen = false;
|
||||
this.initializeElements();
|
||||
this.setupEventListeners();
|
||||
this.loadNotifications();
|
||||
|
||||
// Auto-refresh alle 30 Sekunden
|
||||
setInterval(() => this.loadNotifications(), 30000);
|
||||
}
|
||||
|
||||
initializeElements() {
|
||||
this.toggle = document.getElementById('notificationToggle');
|
||||
this.dropdown = document.getElementById('notificationDropdown');
|
||||
this.badge = document.getElementById('notificationBadge');
|
||||
this.list = document.getElementById('notificationList');
|
||||
this.markAllRead = document.getElementById('markAllRead');
|
||||
}
|
||||
|
||||
setupEventListeners() {
|
||||
this.toggle?.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
this.toggleDropdown();
|
||||
});
|
||||
|
||||
this.markAllRead?.addEventListener('click', () => {
|
||||
this.markAllAsRead();
|
||||
});
|
||||
|
||||
// Schließen bei Klick außerhalb
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!this.dropdown?.contains(e.target) && !this.toggle?.contains(e.target)) {
|
||||
this.closeDropdown();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async loadNotifications() {
|
||||
try {
|
||||
const response = await fetch('/api/notifications');
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
this.notifications = data.notifications || [];
|
||||
this.updateUI();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Fehler beim Laden der Benachrichtigungen:', error);
|
||||
}
|
||||
}
|
||||
|
||||
updateUI() {
|
||||
this.updateBadge();
|
||||
this.updateList();
|
||||
}
|
||||
|
||||
updateBadge() {
|
||||
const unreadCount = this.notifications.filter(n => !n.is_read).length;
|
||||
if (this.badge) {
|
||||
this.badge.classList.toggle('hidden', unreadCount === 0);
|
||||
}
|
||||
}
|
||||
|
||||
updateList() {
|
||||
if (!this.list) return;
|
||||
|
||||
if (this.notifications.length === 0) {
|
||||
this.list.innerHTML = `
|
||||
<div class="p-4 text-center text-slate-500 dark:text-slate-400">
|
||||
<i class="fas fa-bell-slash text-2xl mb-2"></i>
|
||||
<p>Keine neuen Benachrichtigungen</p>
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
const notificationHTML = this.notifications.map(notification => {
|
||||
const isUnread = !notification.is_read;
|
||||
const timeAgo = this.formatTimeAgo(new Date(notification.created_at));
|
||||
|
||||
return `
|
||||
<div class="notification-item p-4 border-b border-slate-200 dark:border-slate-600 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors ${isUnread ? 'bg-blue-50 dark:bg-blue-900/20' : ''}"
|
||||
data-notification-id="${notification.id}">
|
||||
<div class="flex items-start space-x-3">
|
||||
<div class="flex-shrink-0">
|
||||
${this.getNotificationIcon(notification.type)}
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between">
|
||||
<p class="text-sm font-medium text-slate-900 dark:text-white">
|
||||
${notification.title || this.getNotificationTitle(notification.type)}
|
||||
</p>
|
||||
${isUnread ? '<div class="w-2 h-2 bg-blue-500 rounded-full"></div>' : ''}
|
||||
</div>
|
||||
<p class="text-sm text-slate-600 dark:text-slate-400 mt-1">
|
||||
${notification.message || this.getNotificationMessage(notification)}
|
||||
</p>
|
||||
<p class="text-xs text-slate-500 dark:text-slate-500 mt-2">
|
||||
${timeAgo}
|
||||
</p>
|
||||
${this.getNotificationActions(notification)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
|
||||
this.list.innerHTML = notificationHTML;
|
||||
|
||||
// Event Listeners für Aktionen hinzufügen
|
||||
this.setupNotificationActions();
|
||||
}
|
||||
|
||||
getNotificationIcon(type) {
|
||||
const icons = {
|
||||
'guest_request': '<i class="fas fa-user-plus text-blue-500"></i>',
|
||||
'job_completed': '<i class="fas fa-check-circle text-green-500"></i>',
|
||||
'job_failed': '<i class="fas fa-exclamation-triangle text-red-500"></i>',
|
||||
'system': '<i class="fas fa-cog text-gray-500"></i>'
|
||||
};
|
||||
return icons[type] || '<i class="fas fa-bell text-blue-500"></i>';
|
||||
}
|
||||
|
||||
getNotificationTitle(type) {
|
||||
const titles = {
|
||||
'guest_request': 'Neue Gastanfrage',
|
||||
'job_completed': 'Job abgeschlossen',
|
||||
'job_failed': 'Job fehlgeschlagen',
|
||||
'system': 'System-Benachrichtigung'
|
||||
};
|
||||
return titles[type] || 'Benachrichtigung';
|
||||
}
|
||||
|
||||
getNotificationMessage(notification) {
|
||||
if (notification.message) return notification.message;
|
||||
|
||||
try {
|
||||
const payload = JSON.parse(notification.payload || '{}');
|
||||
if (notification.type === 'guest_request') {
|
||||
return `Gastanfrage von ${payload.name || 'Unbekannt'} wartet auf Genehmigung.`;
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('Fehler beim Parsen der Notification-Payload:', e);
|
||||
}
|
||||
|
||||
return 'Neue Benachrichtigung verfügbar.';
|
||||
}
|
||||
|
||||
getNotificationActions(notification) {
|
||||
if (notification.type === 'guest_request') {
|
||||
try {
|
||||
const payload = JSON.parse(notification.payload || '{}');
|
||||
return `
|
||||
<div class="mt-3 flex space-x-2">
|
||||
<button onclick="window.notificationManager.viewGuestRequest(${payload.request_id})"
|
||||
class="px-3 py-1 bg-blue-500 text-white text-xs rounded hover:bg-blue-600">
|
||||
Anzeigen
|
||||
</button>
|
||||
<button onclick="window.notificationManager.markAsRead(${notification.id})"
|
||||
class="px-3 py-1 bg-gray-500 text-white text-xs rounded hover:bg-gray-600">
|
||||
Als gelesen markieren
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
} catch (e) {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
setupNotificationActions() {
|
||||
// Event Listeners werden über onclick direkt gesetzt
|
||||
}
|
||||
|
||||
async viewGuestRequest(requestId) {
|
||||
// Weiterleitung zur Admin-Gastanfragen-Seite
|
||||
window.location.href = `/admin/guest-requests?highlight=${requestId}`;
|
||||
}
|
||||
|
||||
async markAsRead(notificationId) {
|
||||
try {
|
||||
const response = await fetch(`/api/notifications/${notificationId}/read`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
}
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
// Benachrichtigung als gelesen markieren
|
||||
const notification = this.notifications.find(n => n.id === notificationId);
|
||||
if (notification) {
|
||||
notification.is_read = true;
|
||||
}
|
||||
this.updateUI();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Fehler beim Markieren als gelesen:', error);
|
||||
}
|
||||
}
|
||||
|
||||
async markAllAsRead() {
|
||||
try {
|
||||
const response = await fetch('/api/notifications/mark-all-read', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
}
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
// Alle Benachrichtigungen als gelesen markieren
|
||||
this.notifications.forEach(n => n.is_read = true);
|
||||
this.updateUI();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Fehler beim Markieren aller als gelesen:', error);
|
||||
}
|
||||
}
|
||||
|
||||
toggleDropdown() {
|
||||
if (this.dropdown) {
|
||||
this.isOpen = !this.isOpen;
|
||||
this.dropdown.classList.toggle('hidden', !this.isOpen);
|
||||
|
||||
if (this.isOpen) {
|
||||
this.loadNotifications(); // Aktualisieren beim Öffnen
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
closeDropdown() {
|
||||
if (this.dropdown && this.isOpen) {
|
||||
this.isOpen = false;
|
||||
this.dropdown.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
formatTimeAgo(date) {
|
||||
const now = new Date();
|
||||
const diffInSeconds = Math.floor((now - date) / 1000);
|
||||
|
||||
if (diffInSeconds < 60) return 'Gerade eben';
|
||||
if (diffInSeconds < 3600) return `vor ${Math.floor(diffInSeconds / 60)} Min.`;
|
||||
if (diffInSeconds < 86400) return `vor ${Math.floor(diffInSeconds / 3600)} Std.`;
|
||||
return `vor ${Math.floor(diffInSeconds / 86400)} Tag(en)`;
|
||||
}
|
||||
}
|
||||
|
||||
// Mobile Menu
|
||||
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
|
||||
@ -526,14 +828,14 @@
|
||||
const mobileMenuOverlay = document.getElementById('mobile-menu-overlay');
|
||||
|
||||
function openMobileMenu() {
|
||||
mobileMenu.classList.add('active');
|
||||
mobileMenuOverlay.classList.remove('hidden');
|
||||
mobileMenu?.classList.add('active');
|
||||
mobileMenuOverlay?.classList.remove('hidden');
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
|
||||
function closeMobileMenu() {
|
||||
mobileMenu.classList.remove('active');
|
||||
mobileMenuOverlay.classList.add('hidden');
|
||||
mobileMenu?.classList.remove('active');
|
||||
mobileMenuOverlay?.classList.add('hidden');
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
|
||||
@ -547,7 +849,7 @@
|
||||
|
||||
userMenuBtn?.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
userDropdown.classList.toggle('hidden');
|
||||
userDropdown?.classList.toggle('hidden');
|
||||
});
|
||||
|
||||
document.addEventListener('click', () => {
|
||||
@ -589,8 +891,18 @@
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Initialize Notification Manager
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
if (document.getElementById('notificationToggle')) {
|
||||
window.notificationManager = new NotificationManager();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Jobs Safety Fix laden -->
|
||||
<script src="{{ url_for('static', filename='js/jobs-safety-fix.js') }}"></script>
|
||||
|
||||
{% block scripts %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@ -372,6 +372,11 @@
|
||||
<form id="guestRequestForm" method="POST" enctype="multipart/form-data" class="space-y-8">
|
||||
{{ form.hidden_tag() if form }}
|
||||
|
||||
<!-- Fallback CSRF Token falls Meta-Tag nicht funktioniert -->
|
||||
{% if not form %}
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() if csrf_token else '' }}"/>
|
||||
{% endif %}
|
||||
|
||||
<!-- Personal Information Section -->
|
||||
<div class="bg-gray-50 dark:bg-slate-800/50 rounded-xl p-6">
|
||||
<h3 class="text-lg font-semibold text-mercedes-black dark:text-white mb-4 flex items-center">
|
||||
@ -1156,7 +1161,10 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
}
|
||||
|
||||
// Add CSRF token
|
||||
const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
|
||||
// CSRF-Token aus Meta-Tag oder verstecktem Feld holen
|
||||
const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') ||
|
||||
document.querySelector('input[name="csrf_token"]')?.value ||
|
||||
'';
|
||||
if (csrfToken) {
|
||||
formData.append('csrf_token', csrfToken);
|
||||
}
|
||||
|
||||
@ -4,6 +4,135 @@
|
||||
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
<style>
|
||||
/* Code-Eingabe Styling */
|
||||
.code-input-container {
|
||||
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
||||
border: 2px solid #10b981;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin-top: 16px;
|
||||
box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.1);
|
||||
}
|
||||
|
||||
.dark .code-input-container {
|
||||
background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
|
||||
border-color: #10b981;
|
||||
}
|
||||
|
||||
.code-input {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
letter-spacing: 8px;
|
||||
padding: 16px;
|
||||
border: 2px solid #d1d5db;
|
||||
border-radius: 8px;
|
||||
background: white;
|
||||
color: #1f2937;
|
||||
transition: all 0.3s ease;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.dark .code-input {
|
||||
background: #374151;
|
||||
color: #f9fafb;
|
||||
border-color: #4b5563;
|
||||
}
|
||||
|
||||
.code-input:focus {
|
||||
outline: none;
|
||||
border-color: #10b981;
|
||||
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.start-job-btn {
|
||||
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
justify-content: center;
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
.start-job-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
|
||||
}
|
||||
|
||||
.start-job-btn:disabled {
|
||||
background: #9ca3af;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.start-job-btn .spinner {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid #ffffff;
|
||||
border-top: 2px solid transparent;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.success-message {
|
||||
background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
|
||||
border: 2px solid #10b981;
|
||||
color: #065f46;
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
margin-top: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.dark .success-message {
|
||||
background: linear-gradient(135deg, #064e3b 0%, #065f46 100%);
|
||||
color: #a7f3d0;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
|
||||
border: 2px solid #ef4444;
|
||||
color: #991b1b;
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
margin-top: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.dark .error-message {
|
||||
background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%);
|
||||
color: #fecaca;
|
||||
}
|
||||
|
||||
.pulse-animation {
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.7; }
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
@ -219,6 +348,50 @@
|
||||
<div class="font-mono text-sm text-slate-600 dark:text-slate-300">{{ request.reason }}</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Code-Eingabe für genehmigte Aufträge -->
|
||||
{% if request.status == 'approved' %}
|
||||
<div class="code-input-container" id="code-container-{{ request.id }}">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-8 h-8 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center">
|
||||
<svg class="w-5 h-5 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m0 0a2 2 0 012 2m-2-2a2 2 0 00-2 2m0 0a2 2 0 01-2 2m2-2V9a2 2 0 00-2-2m0 0V7a2 2 0 00-2-2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold text-slate-900 dark:text-white">Auftrag starten</h4>
|
||||
<p class="text-sm text-slate-600 dark:text-slate-400">Geben Sie Ihren 6-stelligen Startcode ein</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-4 items-end">
|
||||
<div class="flex-1">
|
||||
<label for="code-input-{{ request.id }}" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
|
||||
Startcode (6 Zeichen)
|
||||
</label>
|
||||
<input type="text"
|
||||
id="code-input-{{ request.id }}"
|
||||
class="code-input w-full"
|
||||
placeholder="ABC123"
|
||||
maxlength="6"
|
||||
autocomplete="off"
|
||||
data-request-id="{{ request.id }}">
|
||||
</div>
|
||||
<button type="button"
|
||||
class="start-job-btn"
|
||||
onclick="startJobWithCode({{ request.id }})"
|
||||
id="start-btn-{{ request.id }}">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h1m4 0h1m-6 4h8m-9-4V8a3 3 0 016 0v2M7 16a3 3 0 003 3h4a3 3 0 003-3v-8a3 3 0 00-3-3H10a3 3 0 00-3 3v8z"/>
|
||||
</svg>
|
||||
<span>Starten</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Nachrichten-Container -->
|
||||
<div id="message-container-{{ request.id }}" class="mt-4" style="display: none;"></div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Right Section: Timestamp and Actions -->
|
||||
@ -233,8 +406,8 @@
|
||||
|
||||
{% if request.status == 'approved' %}
|
||||
<div class="mt-3">
|
||||
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400">
|
||||
Startbereit
|
||||
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400 pulse-animation">
|
||||
✨ Startbereit
|
||||
</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -253,7 +426,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
function updateTabTitle() {
|
||||
const now = new Date();
|
||||
const timeString = now.toLocaleTimeString('de-DE');
|
||||
document.title = `Druckanträge (${timeString}) - Mercedes-Benz MYP Platform`;
|
||||
document.title = 'Druckanträge (' + timeString + ') - Mercedes-Benz MYP Platform';
|
||||
}
|
||||
|
||||
updateTabTitle();
|
||||
@ -265,6 +438,153 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
window.location.reload();
|
||||
}
|
||||
}, 30000);
|
||||
|
||||
// Code-Eingabe Event-Listener
|
||||
document.querySelectorAll('.code-input').forEach(input => {
|
||||
input.addEventListener('input', function(e) {
|
||||
// Nur Buchstaben und Zahlen erlauben, automatisch in Großbuchstaben umwandeln
|
||||
this.value = this.value.replace(/[^A-Za-z0-9]/g, '').toUpperCase();
|
||||
|
||||
// Automatisch starten wenn 6 Zeichen erreicht
|
||||
if (this.value.length === 6) {
|
||||
const requestId = this.getAttribute('data-request-id');
|
||||
setTimeout(() => startJobWithCode(parseInt(requestId)), 100);
|
||||
}
|
||||
});
|
||||
|
||||
input.addEventListener('keypress', function(e) {
|
||||
if (e.key === 'Enter' && this.value.length === 6) {
|
||||
const requestId = this.getAttribute('data-request-id');
|
||||
startJobWithCode(parseInt(requestId));
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* Startet einen Job mit dem eingegebenen 6-stelligen Code
|
||||
*/
|
||||
async function startJobWithCode(requestId) {
|
||||
const codeInput = document.getElementById(`code-input-${requestId}`);
|
||||
const startBtn = document.getElementById(`start-btn-${requestId}`);
|
||||
const messageContainer = document.getElementById(`message-container-${requestId}`);
|
||||
|
||||
const code = codeInput.value.trim().toUpperCase();
|
||||
|
||||
// Validierung
|
||||
if (!code || code.length !== 6) {
|
||||
showMessage(messageContainer, 'error', 'Bitte geben Sie einen 6-stelligen Code ein.');
|
||||
codeInput.focus();
|
||||
return;
|
||||
}
|
||||
|
||||
// Button deaktivieren und Loading-Zustand anzeigen
|
||||
startBtn.disabled = true;
|
||||
startBtn.innerHTML = `
|
||||
<div class="spinner"></div>
|
||||
<span>Wird gestartet...</span>
|
||||
`;
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/guest/start-job', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ code: code })
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
// Erfolg anzeigen
|
||||
showMessage(messageContainer, 'success', `
|
||||
<div>
|
||||
<div class="font-semibold">Job erfolgreich gestartet! 🎉</div>
|
||||
<div class="text-sm mt-1">
|
||||
<strong>${data.job_name}</strong> läuft auf <strong>${data.printer_name}</strong><br>
|
||||
Startzeit: ${data.start_time} Uhr | Endzeit: ${data.end_time} Uhr<br>
|
||||
Dauer: ${data.duration_minutes} Minuten
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
|
||||
// Code-Eingabe ausblenden und Button permanent deaktivieren
|
||||
codeInput.disabled = true;
|
||||
codeInput.style.opacity = '0.5';
|
||||
startBtn.innerHTML = `
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
||||
</svg>
|
||||
<span>Gestartet</span>
|
||||
`;
|
||||
startBtn.style.background = '#6b7280';
|
||||
|
||||
// Nach 3 Sekunden Seite neu laden
|
||||
setTimeout(() => {
|
||||
window.location.reload();
|
||||
}, 3000);
|
||||
|
||||
} else {
|
||||
// Fehler anzeigen
|
||||
showMessage(messageContainer, 'error', data.error || 'Unbekannter Fehler beim Starten des Jobs.');
|
||||
|
||||
// Button wieder aktivieren
|
||||
startBtn.disabled = false;
|
||||
startBtn.innerHTML = `
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h1m4 0h1m-6 4h8m-9-4V8a3 3 0 616 0v2M7 16a3 3 0 003 3h4a3 3 0 003-3v-8a3 3 0 00-3-3H10a3 3 0 00-3 3v8z"/>
|
||||
</svg>
|
||||
<span>Starten</span>
|
||||
`;
|
||||
|
||||
// Code-Eingabe fokussieren
|
||||
codeInput.focus();
|
||||
codeInput.select();
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Fehler beim Starten des Jobs:', error);
|
||||
showMessage(messageContainer, 'error', 'Netzwerkfehler. Bitte versuchen Sie es erneut.');
|
||||
|
||||
// Button wieder aktivieren
|
||||
startBtn.disabled = false;
|
||||
startBtn.innerHTML = `
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h1m4 0h1m-6 4h8m-9-4V8a3 3 0 616 0v2M7 16a3 3 0 003 3h4a3 3 0 003-3v-8a3 3 0 00-3-3H10a3 3 0 00-3 3v8z"/>
|
||||
</svg>
|
||||
<span>Starten</span>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Zeigt eine Nachricht im angegebenen Container an
|
||||
*/
|
||||
function showMessage(container, type, message) {
|
||||
const className = type === 'success' ? 'success-message' : 'error-message';
|
||||
const icon = type === 'success' ?
|
||||
`<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>` :
|
||||
`<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>`;
|
||||
|
||||
container.innerHTML = `
|
||||
<div class="${className}">
|
||||
${icon}
|
||||
<div class="flex-1">${message}</div>
|
||||
</div>
|
||||
`;
|
||||
container.style.display = 'block';
|
||||
|
||||
// Bei Fehlern nach 10 Sekunden ausblenden
|
||||
if (type === 'error') {
|
||||
setTimeout(() => {
|
||||
container.style.display = 'none';
|
||||
}, 10000);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
@ -94,26 +94,13 @@
|
||||
6-stelliger Zugangscode <span class="text-red-500">*</span>
|
||||
</label>
|
||||
|
||||
<!-- Code-Input mit einzelnen Feldern -->
|
||||
<div class="flex justify-center gap-3 mb-6">
|
||||
<input type="text" id="code1" maxlength="1"
|
||||
class="code-input w-12 h-12 text-center text-xl font-bold border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-300"
|
||||
oninput="moveToNext(this, 'code2')" onkeydown="handleBackspace(event, this, null)">
|
||||
<input type="text" id="code2" maxlength="1"
|
||||
class="code-input w-12 h-12 text-center text-xl font-bold border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-300"
|
||||
oninput="moveToNext(this, 'code3')" onkeydown="handleBackspace(event, this, 'code1')">
|
||||
<input type="text" id="code3" maxlength="1"
|
||||
class="code-input w-12 h-12 text-center text-xl font-bold border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-300"
|
||||
oninput="moveToNext(this, 'code4')" onkeydown="handleBackspace(event, this, 'code2')">
|
||||
<input type="text" id="code4" maxlength="1"
|
||||
class="code-input w-12 h-12 text-center text-xl font-bold border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-300"
|
||||
oninput="moveToNext(this, 'code5')" onkeydown="handleBackspace(event, this, 'code3')">
|
||||
<input type="text" id="code5" maxlength="1"
|
||||
class="code-input w-12 h-12 text-center text-xl font-bold border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-300"
|
||||
oninput="moveToNext(this, 'code6')" onkeydown="handleBackspace(event, this, 'code4')">
|
||||
<input type="text" id="code6" maxlength="1"
|
||||
class="code-input w-12 h-12 text-center text-xl font-bold border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-300"
|
||||
oninput="moveToNext(this, null)" onkeydown="handleBackspace(event, this, 'code5')">
|
||||
<!-- Einzelnes Code-Input-Feld -->
|
||||
<div class="flex justify-center mb-6">
|
||||
<input type="text" id="codeInput" maxlength="6"
|
||||
class="w-48 h-16 text-center text-2xl font-bold border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-300 uppercase tracking-widest"
|
||||
placeholder="ABC123"
|
||||
autocomplete="off"
|
||||
spellcheck="false">
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
@ -171,64 +158,41 @@
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Code-Eingabe-Logik
|
||||
function moveToNext(current, nextId) {
|
||||
const value = current.value.toUpperCase();
|
||||
|
||||
// Nur alphanumerische Zeichen erlauben
|
||||
if (!/^[A-Z0-9]$/.test(value)) {
|
||||
current.value = '';
|
||||
return;
|
||||
}
|
||||
|
||||
current.value = value;
|
||||
current.classList.add('border-green-500', 'bg-green-50', 'dark:bg-green-900/20');
|
||||
|
||||
// Zum nächsten Feld wechseln
|
||||
if (nextId && value) {
|
||||
document.getElementById(nextId).focus();
|
||||
}
|
||||
|
||||
// Prüfen ob alle Felder ausgefüllt sind
|
||||
checkFormComplete();
|
||||
}
|
||||
|
||||
function handleBackspace(event, current, prevId) {
|
||||
if (event.key === 'Backspace') {
|
||||
if (current.value === '' && prevId) {
|
||||
event.preventDefault();
|
||||
const prevField = document.getElementById(prevId);
|
||||
prevField.focus();
|
||||
prevField.value = '';
|
||||
prevField.classList.remove('border-green-500', 'bg-green-50', 'dark:bg-green-900/20');
|
||||
} else if (current.value !== '') {
|
||||
current.classList.remove('border-green-500', 'bg-green-50', 'dark:bg-green-900/20');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Code-Eingabe-Logik für 6-stelligen Code
|
||||
function checkFormComplete() {
|
||||
const inputs = ['code1', 'code2', 'code3', 'code4', 'code5', 'code6'];
|
||||
const allFilled = inputs.every(id => document.getElementById(id).value !== '');
|
||||
const codeInput = document.getElementById('codeInput');
|
||||
const code = codeInput.value.trim();
|
||||
const isComplete = code.length === 6 && /^[A-Z0-9]{6}$/.test(code);
|
||||
|
||||
const submitBtn = document.getElementById('submitBtn');
|
||||
submitBtn.disabled = !allFilled;
|
||||
submitBtn.disabled = !isComplete;
|
||||
|
||||
// Visuelles Feedback
|
||||
if (code.length > 0) {
|
||||
if (isComplete) {
|
||||
codeInput.classList.add('border-green-500', 'bg-green-50', 'dark:bg-green-900/20');
|
||||
codeInput.classList.remove('border-red-500', 'bg-red-50', 'dark:bg-red-900/20');
|
||||
} else {
|
||||
codeInput.classList.add('border-red-500', 'bg-red-50', 'dark:bg-red-900/20');
|
||||
codeInput.classList.remove('border-green-500', 'bg-green-50', 'dark:bg-green-900/20');
|
||||
}
|
||||
} else {
|
||||
codeInput.classList.remove('border-green-500', 'bg-green-50', 'dark:bg-green-900/20');
|
||||
codeInput.classList.remove('border-red-500', 'bg-red-50', 'dark:bg-red-900/20');
|
||||
}
|
||||
}
|
||||
|
||||
function getCodeValue() {
|
||||
const inputs = ['code1', 'code2', 'code3', 'code4', 'code5', 'code6'];
|
||||
return inputs.map(id => document.getElementById(id).value).join('');
|
||||
return document.getElementById('codeInput').value.trim().toUpperCase();
|
||||
}
|
||||
|
||||
function clearCode() {
|
||||
const inputs = ['code1', 'code2', 'code3', 'code4', 'code5', 'code6'];
|
||||
inputs.forEach(id => {
|
||||
const input = document.getElementById(id);
|
||||
input.value = '';
|
||||
input.classList.remove('border-green-500', 'bg-green-50', 'dark:bg-green-900/20');
|
||||
});
|
||||
const codeInput = document.getElementById('codeInput');
|
||||
codeInput.value = '';
|
||||
codeInput.classList.remove('border-green-500', 'bg-green-50', 'dark:bg-green-900/20');
|
||||
codeInput.classList.remove('border-red-500', 'bg-red-50', 'dark:bg-red-900/20');
|
||||
checkFormComplete();
|
||||
document.getElementById('code1').focus();
|
||||
codeInput.focus();
|
||||
}
|
||||
|
||||
function showSuccess(message, details) {
|
||||
@ -253,9 +217,31 @@ function showError(message, details) {
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const form = document.getElementById('codeForm');
|
||||
const submitBtn = document.getElementById('submitBtn');
|
||||
const codeInput = document.getElementById('codeInput');
|
||||
|
||||
// Erstes Feld fokussieren
|
||||
document.getElementById('code1').focus();
|
||||
// Code-Input fokussieren
|
||||
codeInput.focus();
|
||||
|
||||
// Input-Event-Listener für Echtzeit-Validierung
|
||||
codeInput.addEventListener('input', function(e) {
|
||||
// Nur alphanumerische Zeichen erlauben und zu Großbuchstaben konvertieren
|
||||
let value = e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, '');
|
||||
|
||||
// Maximal 6 Zeichen
|
||||
if (value.length > 6) {
|
||||
value = value.substring(0, 6);
|
||||
}
|
||||
|
||||
e.target.value = value;
|
||||
checkFormComplete();
|
||||
});
|
||||
|
||||
// Enter-Taste für Submit
|
||||
codeInput.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Enter' && !submitBtn.disabled) {
|
||||
form.dispatchEvent(new Event('submit'));
|
||||
}
|
||||
});
|
||||
|
||||
form.addEventListener('submit', async function(e) {
|
||||
e.preventDefault();
|
||||
@ -322,24 +308,13 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
});
|
||||
|
||||
// Paste-Handler für kompletten Code
|
||||
document.addEventListener('paste', function(e) {
|
||||
const target = e.target;
|
||||
if (target.classList.contains('code-input')) {
|
||||
e.preventDefault();
|
||||
const paste = (e.clipboardData || window.clipboardData).getData('text').toUpperCase();
|
||||
|
||||
if (paste.length === 6 && /^[A-Z0-9]+$/.test(paste)) {
|
||||
const inputs = ['code1', 'code2', 'code3', 'code4', 'code5', 'code6'];
|
||||
inputs.forEach((id, index) => {
|
||||
const input = document.getElementById(id);
|
||||
input.value = paste[index] || '';
|
||||
if (input.value) {
|
||||
input.classList.add('border-green-500', 'bg-green-50', 'dark:bg-green-900/20');
|
||||
}
|
||||
});
|
||||
checkFormComplete();
|
||||
document.getElementById('code6').focus();
|
||||
}
|
||||
codeInput.addEventListener('paste', function(e) {
|
||||
e.preventDefault();
|
||||
const paste = (e.clipboardData || window.clipboardData).getData('text').toUpperCase().replace(/[^A-Z0-9]/g, '');
|
||||
|
||||
if (paste.length <= 6) {
|
||||
codeInput.value = paste;
|
||||
checkFormComplete();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
@ -766,13 +766,13 @@
|
||||
<div class="mt-6 flex flex-wrap items-center justify-between gap-4">
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<div class="flex items-center">
|
||||
<input type="checkbox" id="show-offline" class="w-4 h-4 text-mercedes-blue rounded">
|
||||
<input type="checkbox" id="show-offline" class="w-4 h-4 text-mercedes-blue rounded" checked>
|
||||
<label for="show-offline" class="ml-2 text-sm text-mercedes-gray dark:text-slate-400">
|
||||
Offline-Drucker anzeigen
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<input type="checkbox" id="show-maintenance" class="w-4 h-4 text-mercedes-blue rounded">
|
||||
<input type="checkbox" id="show-maintenance" class="w-4 h-4 text-mercedes-blue rounded" checked>
|
||||
<label for="show-maintenance" class="ml-2 text-sm text-mercedes-gray dark:text-slate-400">
|
||||
Wartungsmodus anzeigen
|
||||
</label>
|
||||
@ -1751,6 +1751,23 @@ class PrinterManager {
|
||||
container: 'status-unconfigured',
|
||||
iconBg: 'bg-indigo-100 dark:bg-indigo-900/30 text-indigo-600',
|
||||
badge: 'bg-indigo-100 text-indigo-800 dark:bg-indigo-900/30 dark:text-indigo-400'
|
||||
},
|
||||
// Neue Status für Tapo-basierte Logik
|
||||
'available': {
|
||||
container: 'status-available',
|
||||
iconBg: 'bg-green-100 dark:bg-green-900/30 text-green-600',
|
||||
badge: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400'
|
||||
},
|
||||
'busy': {
|
||||
container: 'status-busy',
|
||||
iconBg: 'bg-orange-100 dark:bg-orange-900/30 text-orange-600',
|
||||
badge: 'bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-400'
|
||||
},
|
||||
// Aliases für Rückwärtskompatibilität
|
||||
'idle': {
|
||||
container: 'status-online',
|
||||
iconBg: 'bg-green-100 dark:bg-green-900/30 text-green-600',
|
||||
badge: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400'
|
||||
}
|
||||
};
|
||||
return classes[status] || classes['offline'];
|
||||
@ -1763,24 +1780,30 @@ class PrinterManager {
|
||||
'printing': '<div class="w-3 h-3 bg-blue-500 rounded-full status-pulse"></div>',
|
||||
'error': '<div class="w-3 h-3 bg-orange-500 rounded-full"></div>',
|
||||
'maintenance': '<div class="w-3 h-3 bg-purple-500 rounded-full"></div>',
|
||||
'idle': '<div class="w-3 h-3 bg-green-500 rounded-full"></div>',
|
||||
'standby': '<div class="w-3 h-3 bg-yellow-500 rounded-full"></div>',
|
||||
'unreachable': '<div class="w-3 h-3 bg-gray-500 rounded-full"></div>',
|
||||
'unconfigured': '<div class="w-3 h-3 bg-indigo-500 rounded-full"></div>'
|
||||
'unconfigured': '<div class="w-3 h-3 bg-indigo-500 rounded-full"></div>',
|
||||
// Neue Status für Tapo-basierte Logik
|
||||
'available': '<div class="w-3 h-3 bg-green-500 rounded-full"></div>',
|
||||
'busy': '<div class="w-3 h-3 bg-orange-500 rounded-full status-pulse"></div>'
|
||||
};
|
||||
return icons[status] || icons['offline'];
|
||||
}
|
||||
|
||||
getStatusText(status) {
|
||||
const texts = {
|
||||
'online': 'Online',
|
||||
'offline': 'Offline',
|
||||
'printing': 'Druckt',
|
||||
'online': 'Verfügbar & Frei', // Steckdose erreichbar & aus → kann reserviert werden
|
||||
'offline': 'Nicht erreichbar', // Steckdose nicht erreichbar
|
||||
'printing': 'Druckt - Besetzt', // Steckdose erreichbar & an → Drucker läuft
|
||||
'error': 'Fehler',
|
||||
'maintenance': 'Wartung',
|
||||
'idle': 'Bereit',
|
||||
'idle': 'Verfügbar & Frei', // Alias für online
|
||||
'standby': 'Standby',
|
||||
'unreachable': 'Unerreichbar',
|
||||
'unconfigured': 'Nicht konfiguriert'
|
||||
'unreachable': 'Nicht erreichbar', // Alias für offline
|
||||
'unconfigured': 'Nicht konfiguriert',
|
||||
'available': 'Verfügbar & Frei', // Neuer Status für "aus"
|
||||
'busy': 'Druckt - Besetzt' // Neuer Status für "an"
|
||||
};
|
||||
return texts[status] || status;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user