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:
@@ -63,6 +63,28 @@
|
||||
setTimeout(function() {
|
||||
document.documentElement.classList.remove('disable-transitions');
|
||||
}, 10);
|
||||
|
||||
// Diese Funktion wird nach dem DOM-Laden ausgeführt
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Dark Mode Toggle Button Icons aktualisieren
|
||||
const darkModeToggle = document.getElementById('darkModeToggle');
|
||||
if (darkModeToggle) {
|
||||
const sunIcon = darkModeToggle.querySelector('.sun-icon');
|
||||
const moonIcon = darkModeToggle.querySelector('.moon-icon');
|
||||
|
||||
if (isDark) {
|
||||
darkModeToggle.setAttribute('aria-pressed', 'true');
|
||||
darkModeToggle.setAttribute('title', 'Light Mode aktivieren');
|
||||
if (sunIcon) sunIcon.classList.add('hidden');
|
||||
if (moonIcon) moonIcon.classList.remove('hidden');
|
||||
} else {
|
||||
darkModeToggle.setAttribute('aria-pressed', 'false');
|
||||
darkModeToggle.setAttribute('title', 'Dark Mode aktivieren');
|
||||
if (sunIcon) sunIcon.classList.remove('hidden');
|
||||
if (moonIcon) moonIcon.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Disable Transitions Styling -->
|
||||
@@ -76,17 +98,17 @@
|
||||
{% block head %}{% endblock %}
|
||||
</head>
|
||||
|
||||
<body class="min-h-screen flex flex-col bg-white text-slate-900 dark:bg-[#050505] dark:text-slate-200 transition-colors duration-300 text-base mercedes-background">
|
||||
<body class="min-h-screen flex flex-col bg-white text-slate-900 dark:bg-black dark:text-white transition-colors duration-300 text-base mercedes-background">
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="navbar">
|
||||
<div class="max-w-7xl mx-auto px-2 sm:px-4 lg:px-6">
|
||||
<div class="flex items-center justify-between h-14 sm:h-16 lg:h-20">
|
||||
<div class="max-w-7xl mx-auto px-3 sm:px-4 lg:px-6">
|
||||
<div class="flex items-center justify-between h-16 sm:h-18 lg:h-20">
|
||||
<!-- Brand Section -->
|
||||
<div class="flex-shrink-0">
|
||||
<a href="{{ url_for('dashboard') }}" class="navbar-brand" aria-label="Zur Startseite">
|
||||
<!-- Mercedes-Benz Logo -->
|
||||
<div class="w-8 h-8 sm:w-10 sm:h-10 lg:w-12 lg:h-12 transition-all duration-300 group-hover:rotate-12">
|
||||
<div class="w-9 h-9 sm:w-10 sm:h-10 lg:w-12 lg:h-12 transition-all duration-300 group-hover:rotate-12">
|
||||
<svg class="w-full h-full text-slate-900 dark:text-white transition-colors duration-300" fill="currentColor" viewBox="0 0 80 80" aria-hidden="true">
|
||||
<path d="M58.6,4.5C53,1.6,46.7,0,40,0c-6.7,0-13,1.6-18.6,4.5v0C8.7,11.2,0,24.6,0,40c0,15.4,8.7,28.8,21.5,35.5
|
||||
C27,78.3,33.3,80,40,80c6.7,0,12.9-1.7,18.5-4.6C71.3,68.8,80,55.4,80,40C80,24.6,71.3,11.2,58.6,4.5z M4,40
|
||||
@@ -104,11 +126,11 @@
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Desktop Navigation Menu -->
|
||||
<div class="hidden lg:flex flex-1 justify-center px-8">
|
||||
<nav class="navbar-menu" role="navigation" aria-label="Hauptnavigation">
|
||||
<!-- Desktop Navigation Menu - überarbeitetes Design -->
|
||||
<div class="hidden lg:flex flex-1 justify-center">
|
||||
<nav class="navbar-menu-new" role="navigation" aria-label="Hauptnavigation">
|
||||
<a href="{{ url_for('dashboard') }}"
|
||||
class="menu-item {{ 'text-blue-600 border-blue-600 dark:text-blue-400 dark:border-blue-500' if request.endpoint == 'dashboard' else '' }}">
|
||||
class="nav-item {{ 'active' if request.endpoint == 'dashboard' else '' }}">
|
||||
<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="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z"/>
|
||||
</svg>
|
||||
@@ -116,15 +138,15 @@
|
||||
</a>
|
||||
|
||||
<a href="{{ url_for('printers_page') }}"
|
||||
class="menu-item {{ 'text-blue-600 border-blue-600 dark:text-blue-400 dark:border-blue-500' if request.endpoint == 'printers_page' else '' }}">
|
||||
<svg class="w-8 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
class="nav-item {{ 'active' if request.endpoint == 'printers_page' else '' }}">
|
||||
<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 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/>
|
||||
</svg>
|
||||
<span>3D-Drucker</span>
|
||||
</a>
|
||||
|
||||
<a href="{{ url_for('jobs_page') }}"
|
||||
class="menu-item {{ 'text-blue-600 border-blue-600 dark:text-blue-400 dark:border-blue-500' if request.endpoint == 'jobs_page' else '' }}">
|
||||
class="nav-item {{ 'active' if request.endpoint == 'jobs_page' else '' }}">
|
||||
<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="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
|
||||
</svg>
|
||||
@@ -132,7 +154,7 @@
|
||||
</a>
|
||||
|
||||
<a href="{{ url_for('stats_page') }}"
|
||||
class="menu-item {{ 'text-blue-600 border-blue-600 dark:text-blue-400 dark:border-blue-500' if request.endpoint == 'stats_page' else '' }}">
|
||||
class="nav-item {{ 'active' if request.endpoint == 'stats_page' else '' }}">
|
||||
<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="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
|
||||
</svg>
|
||||
@@ -141,7 +163,7 @@
|
||||
|
||||
{% if current_user.is_authenticated and current_user.is_admin %}
|
||||
<a href="{{ url_for('admin_page') }}"
|
||||
class="menu-item {{ 'text-blue-600 border-blue-600 dark:text-blue-400 dark:border-blue-500' if request.endpoint == 'admin_page' else '' }}">
|
||||
class="nav-item {{ 'active' if request.endpoint == 'admin_page' else '' }}">
|
||||
<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 stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
|
||||
@@ -152,47 +174,60 @@
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- Right Side Controls -->
|
||||
<!-- Rechte Seite der Navbar -->
|
||||
<div class="flex items-center space-x-2 sm:space-x-3">
|
||||
<!-- Dark Mode Toggle -->
|
||||
<!-- Mobile Menu Toggle (neu) -->
|
||||
<button
|
||||
id="mobileMenuToggle"
|
||||
class="lg:hidden p-2 rounded-full text-slate-700 dark:text-slate-300 hover:bg-slate-100/80 dark:hover:bg-slate-800/50"
|
||||
aria-label="Menü öffnen"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Dark Mode Toggle - neues Design -->
|
||||
<button
|
||||
id="darkModeToggle"
|
||||
class="dark-mode-toggle p-2 sm:p-3"
|
||||
class="dark-mode-toggle-new"
|
||||
aria-label="Dark Mode umschalten"
|
||||
aria-pressed="false"
|
||||
data-action="toggle-dark-mode"
|
||||
title="Dark Mode aktivieren"
|
||||
>
|
||||
<svg class="w-6 h-6 sm:w-7 sm:h-7 transition-all duration-300 transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<svg class="w-5 h-5 sm:w-5 sm:h-5 sun-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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" />
|
||||
</svg>
|
||||
<svg class="w-5 h-5 sm:w-5 sm:h-5 moon-icon hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{% if current_user.is_authenticated %}
|
||||
<!-- User Profile Dropdown -->
|
||||
<!-- User Profile Dropdown - neues Design -->
|
||||
<div class="relative" id="user-menu-container">
|
||||
<button
|
||||
id="user-menu-button"
|
||||
class="flex items-center space-x-2 text-sm font-medium rounded-lg p-1.5 transition-all duration-300 hover:bg-blue-50 dark:hover:bg-blue-950"
|
||||
class="user-menu-button-new"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
aria-label="Benutzermenu öffnen"
|
||||
>
|
||||
<!-- Profile Avatar -->
|
||||
<div class="h-8 w-8 rounded-full flex items-center justify-center bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 font-medium transition-colors duration-300">
|
||||
<div class="user-avatar-new">
|
||||
{{ current_user.email[0].upper() if current_user.email else 'U' }}
|
||||
</div>
|
||||
<!-- User Info (hidden on mobile) -->
|
||||
<div class="hidden md:block text-left ml-2">
|
||||
<div class="text-sm font-medium text-slate-900 dark:text-white transition-colors duration-300">{{ current_user.email.split('@')[0] if current_user.email else 'Benutzer' }}</div>
|
||||
<div class="text-sm font-semibold text-slate-900 dark:text-white transition-colors duration-300">{{ current_user.email.split('@')[0] if current_user.email else 'Benutzer' }}</div>
|
||||
<div class="text-xs text-slate-600 dark:text-slate-400 transition-colors duration-300">Mercedes-Benz Mitarbeiter</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
{% else %}
|
||||
<!-- Login Button -->
|
||||
<!-- Login Button - neues Design -->
|
||||
<a href="{{ url_for('login') }}"
|
||||
class="bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium shadow-sm hover:shadow-md transition-all duration-300 flex items-center">
|
||||
class="login-button-new">
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
|
||||
</svg>
|
||||
@@ -203,6 +238,54 @@
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Mobile Menu (neu) -->
|
||||
<div id="mobileMenu" class="mobile-menu-new hidden lg:hidden">
|
||||
<nav class="flex flex-col space-y-1 px-3 py-4" role="navigation" aria-label="Mobile Navigation">
|
||||
<a href="{{ url_for('dashboard') }}"
|
||||
class="mobile-nav-item {{ 'active' if request.endpoint == 'dashboard' else '' }}">
|
||||
<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="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z"/>
|
||||
</svg>
|
||||
<span>Dashboard</span>
|
||||
</a>
|
||||
|
||||
<a href="{{ url_for('printers_page') }}"
|
||||
class="mobile-nav-item {{ 'active' if request.endpoint == 'printers_page' else '' }}">
|
||||
<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 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/>
|
||||
</svg>
|
||||
<span>3D-Drucker</span>
|
||||
</a>
|
||||
|
||||
<a href="{{ url_for('jobs_page') }}"
|
||||
class="mobile-nav-item {{ 'active' if request.endpoint == 'jobs_page' else '' }}">
|
||||
<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="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
|
||||
</svg>
|
||||
<span>Druckaufträge</span>
|
||||
</a>
|
||||
|
||||
<a href="{{ url_for('stats_page') }}"
|
||||
class="mobile-nav-item {{ 'active' if request.endpoint == 'stats_page' else '' }}">
|
||||
<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="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
|
||||
</svg>
|
||||
<span>Statistiken</span>
|
||||
</a>
|
||||
|
||||
{% if current_user.is_authenticated and current_user.is_admin %}
|
||||
<a href="{{ url_for('admin_page') }}"
|
||||
class="mobile-nav-item {{ 'active' if request.endpoint == 'admin_page' else '' }}">
|
||||
<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 stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
|
||||
</svg>
|
||||
<span>Administration</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main id="main-content" class="flex-grow max-w-7xl w-full mx-auto px-3 sm:px-6 lg:px-8 py-4 sm:py-8">
|
||||
@@ -288,6 +371,7 @@
|
||||
|
||||
<!-- JavaScript -->
|
||||
<script src="{{ url_for('static', filename='js/ui-components.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/dark-mode-fix.js') }}"></script>
|
||||
|
||||
{% block scripts %}{% endblock %}
|
||||
</body>
|
||||
|
||||
@@ -35,14 +35,23 @@
|
||||
<option value="">Drucker auswählen...</option>
|
||||
<!-- Wird durch JavaScript gefüllt -->
|
||||
</select>
|
||||
<div id="printer-status-info" class="mt-2 text-center">
|
||||
<!-- Status-Info wird dynamisch gefüllt -->
|
||||
</div>
|
||||
<div id="printer-status-warning" class="mt-2 hidden">
|
||||
<div class="flex items-center p-3 bg-orange-50 dark:bg-orange-900/20 border border-orange-200 dark:border-orange-800 rounded-lg">
|
||||
<svg class="w-5 h-5 text-orange-500 mr-2 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
||||
</svg>
|
||||
<div class="text-sm">
|
||||
<p class="font-medium text-orange-800 dark:text-orange-200">Offline-Drucker ausgewählt</p>
|
||||
<p class="text-orange-700 dark:text-orange-300">Der Job wird erstellt, startet aber erst, wenn der Drucker online geht.</p>
|
||||
<div class="flex items-center p-4 bg-red-50 dark:bg-red-900/20 border-2 border-red-400 dark:border-red-700 rounded-lg shadow-sm">
|
||||
<div class="flex-shrink-0 w-10 h-10 mr-3 flex items-center justify-center rounded-full bg-red-100 dark:bg-red-800">
|
||||
<svg class="w-6 h-6 text-red-600 dark:text-red-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-lg font-bold text-red-800 dark:text-red-200">ACHTUNG: Offline-Drucker ausgewählt!</p>
|
||||
<p class="text-sm text-red-700 dark:text-red-300 mt-1">
|
||||
Dieser Drucker ist derzeit <span class="font-bold">NICHT VERFÜGBAR</span>.
|
||||
Der Job wird in der Warteschlange gespeichert und erst gestartet,
|
||||
wenn der Drucker wieder online ist.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -213,20 +222,49 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
loadPrinters();
|
||||
loadActiveJobs();
|
||||
|
||||
// Event-Listener für Drucker-Auswahl (Offline-Warnung)
|
||||
// Event-Listener für Drucker-Auswahl (Status-Anzeige)
|
||||
const printerSelect = document.getElementById('printer_id');
|
||||
const statusWarning = document.getElementById('printer-status-warning');
|
||||
const statusInfo = document.getElementById('printer-status-info');
|
||||
|
||||
if (printerSelect && statusWarning) {
|
||||
if (printerSelect && statusWarning && statusInfo) {
|
||||
printerSelect.addEventListener('change', function() {
|
||||
const selectedOption = this.options[this.selectedIndex];
|
||||
|
||||
if (selectedOption && selectedOption.getAttribute('data-offline') === 'true') {
|
||||
statusWarning.classList.remove('hidden');
|
||||
} else {
|
||||
if (!selectedOption || selectedOption.value === "") {
|
||||
// Keine Auswahl
|
||||
statusWarning.classList.add('hidden');
|
||||
statusInfo.innerHTML = '';
|
||||
return;
|
||||
}
|
||||
|
||||
// Status des ausgewählten Druckers bestimmen
|
||||
const isOffline = selectedOption.getAttribute('data-offline') === 'true';
|
||||
const printerName = selectedOption.textContent.split('(')[0].trim().replace(/🟢|🔴/g, '').trim();
|
||||
|
||||
if (isOffline) {
|
||||
// Offline-Drucker: Deutliche Warnung anzeigen
|
||||
statusWarning.classList.remove('hidden');
|
||||
statusInfo.innerHTML = `
|
||||
<div class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800 border border-red-200">
|
||||
<span class="w-2 h-2 mr-1 bg-red-500 rounded-full"></span>
|
||||
${printerName} ist OFFLINE
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
// Online-Drucker: Positive Statusmeldung
|
||||
statusWarning.classList.add('hidden');
|
||||
statusInfo.innerHTML = `
|
||||
<div class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 border border-green-200">
|
||||
<span class="w-2 h-2 mr-1 bg-green-500 rounded-full animate-pulse"></span>
|
||||
${printerName} ist ONLINE und bereit
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
});
|
||||
|
||||
// Initial auslösen, um den Status der Vorauswahl anzuzeigen
|
||||
printerSelect.dispatchEvent(new Event('change'));
|
||||
}
|
||||
|
||||
// Formulare initialisieren
|
||||
@@ -342,25 +380,50 @@ function populatePrinterSelect(printers, onlineOnly = false) {
|
||||
// Bei gleichem Online-Status nach Name sortieren
|
||||
return a.name.localeCompare(b.name);
|
||||
});
|
||||
|
||||
// Zähler für Online- und Offline-Drucker
|
||||
let onlineCount = 0;
|
||||
let offlineCount = 0;
|
||||
|
||||
// Optionsgruppen für bessere visuelle Trennung erstellen
|
||||
const onlineGroup = document.createElement('optgroup');
|
||||
onlineGroup.label = "── ONLINE DRUCKER ──";
|
||||
onlineGroup.style.fontWeight = 'bold';
|
||||
onlineGroup.style.color = '#047857'; // Dunkelgrün
|
||||
|
||||
const offlineGroup = document.createElement('optgroup');
|
||||
offlineGroup.label = "── OFFLINE DRUCKER ──";
|
||||
offlineGroup.style.fontWeight = 'bold';
|
||||
offlineGroup.style.color = '#b91c1c'; // Dunkelrot
|
||||
|
||||
// Drucker in entsprechende Gruppen einsortieren
|
||||
sortedPrinters.forEach(printer => {
|
||||
const option = document.createElement('option');
|
||||
option.value = printer.id;
|
||||
|
||||
// Status-Indikator bestimmen
|
||||
const isOnline = printer.status === 'available' || printer.is_online || printer.active;
|
||||
let statusIcon, statusText;
|
||||
let statusIcon, statusText, statusClass;
|
||||
|
||||
if (isOnline) {
|
||||
statusIcon = '🟢';
|
||||
statusText = 'Online';
|
||||
option.style.color = '#059669'; // Grün für online
|
||||
statusText = 'ONLINE';
|
||||
statusClass = 'online';
|
||||
option.style.backgroundColor = 'rgba(4, 120, 87, 0.1)'; // Leicht grüner Hintergrund
|
||||
option.style.color = '#047857'; // Grün für online
|
||||
option.style.fontWeight = '500';
|
||||
onlineCount++;
|
||||
} else {
|
||||
statusIcon = '🔴';
|
||||
statusText = 'Offline';
|
||||
option.style.color = '#dc2626'; // Rot für offline
|
||||
statusText = 'OFFLINE';
|
||||
statusClass = 'offline';
|
||||
option.style.backgroundColor = 'rgba(185, 28, 28, 0.05)'; // Sehr leicht roter Hintergrund
|
||||
option.style.color = '#b91c1c'; // Rot für offline
|
||||
option.style.fontStyle = 'italic';
|
||||
option.style.fontWeight = '400';
|
||||
// Offline-Drucker NICHT deaktivieren, aber kennzeichnen
|
||||
option.setAttribute('data-offline', 'true');
|
||||
offlineCount++;
|
||||
}
|
||||
|
||||
// Letzter Check-Zeitstempel
|
||||
@@ -384,18 +447,52 @@ function populatePrinterSelect(printers, onlineOnly = false) {
|
||||
// Tooltip für zusätzliche Informationen
|
||||
option.title = `Standort: ${printer.location || 'Unbekannt'}\nIP: ${printer.plug_ip || printer.ip_address || 'Unbekannt'}\nStatus: ${statusText}${lastChecked}`;
|
||||
|
||||
printerSelect.appendChild(option);
|
||||
// Zu entsprechender Gruppe hinzufügen
|
||||
if (isOnline) {
|
||||
onlineGroup.appendChild(option);
|
||||
} else {
|
||||
offlineGroup.appendChild(option);
|
||||
}
|
||||
});
|
||||
|
||||
// Hinweis für Offline-Drucker
|
||||
const offlineCount = printers.filter(p => !(p.status === 'available' || p.is_online || p.active)).length;
|
||||
// Status-Info als erste Option hinzufügen
|
||||
const statusOption = document.createElement('option');
|
||||
statusOption.disabled = true;
|
||||
statusOption.className = 'status-summary';
|
||||
statusOption.style.backgroundColor = '#f3f4f6';
|
||||
statusOption.style.fontWeight = 'bold';
|
||||
statusOption.style.textAlign = 'center';
|
||||
statusOption.style.padding = '4px';
|
||||
statusOption.style.marginBottom = '4px';
|
||||
statusOption.style.borderBottom = '1px solid #d1d5db';
|
||||
|
||||
// Deutliche Status-Zusammenfassung
|
||||
if (onlineCount > 0) {
|
||||
statusOption.textContent = `✅ ${onlineCount} von ${printers.length} Drucker ONLINE`;
|
||||
statusOption.style.color = '#047857'; // Grün
|
||||
} else {
|
||||
statusOption.textContent = `⚠️ ACHTUNG: Alle ${printers.length} Drucker OFFLINE`;
|
||||
statusOption.style.color = '#b91c1c'; // Rot
|
||||
}
|
||||
printerSelect.appendChild(statusOption);
|
||||
|
||||
// Gruppen zum Select hinzufügen
|
||||
if (onlineCount > 0) {
|
||||
printerSelect.appendChild(onlineGroup);
|
||||
}
|
||||
|
||||
if (offlineCount > 0) {
|
||||
const infoOption = document.createElement('option');
|
||||
infoOption.disabled = true;
|
||||
infoOption.textContent = `--- ${offlineCount} Drucker offline (nicht verfügbar) ---`;
|
||||
infoOption.style.fontStyle = 'italic';
|
||||
infoOption.style.color = '#6b7280';
|
||||
printerSelect.appendChild(infoOption);
|
||||
printerSelect.appendChild(offlineGroup);
|
||||
}
|
||||
|
||||
// Wenn online Drucker verfügbar, den ersten online Drucker vorauswählen
|
||||
if (onlineCount > 0 && onlineGroup.firstChild) {
|
||||
onlineGroup.firstChild.selected = true;
|
||||
document.getElementById('printer-status-warning').classList.add('hidden');
|
||||
} else if (offlineCount > 0 && offlineGroup.firstChild) {
|
||||
// Sonst den ersten offline Drucker vorauswählen und Warnung anzeigen
|
||||
offlineGroup.firstChild.selected = true;
|
||||
document.getElementById('printer-status-warning').classList.remove('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
@@ -442,11 +539,22 @@ function loadPrintersWithLiveStatus() {
|
||||
|
||||
populatePrinterSelect(printers, false);
|
||||
|
||||
const onlineCount = printers.filter(p => p.status === 'available' || p.is_online || p.active).length;
|
||||
// Verwende die vom Backend bereitgestellten Werte
|
||||
const onlineCount = data.online_count || 0;
|
||||
const totalCount = data.count || printers.length;
|
||||
|
||||
if (onlineCount > 0) {
|
||||
showNotification(`${onlineCount} von ${printers.length} Drucker online (Live-Check)`, 'success');
|
||||
if (onlineCount === totalCount) {
|
||||
// Alle Drucker online
|
||||
showNotification(`✅ OPTIMAL: Alle ${totalCount} Drucker sind ONLINE und BEREIT`, 'success');
|
||||
} else {
|
||||
// Einige Drucker online
|
||||
const offlineCount = totalCount - onlineCount;
|
||||
showNotification(`⚠️ ${onlineCount} von ${totalCount} Drucker ONLINE | ${offlineCount} Drucker OFFLINE`, 'success');
|
||||
}
|
||||
} else {
|
||||
showNotification(`${printers.length} Drucker gefunden, aber alle offline`, 'warning');
|
||||
// Kein Drucker online
|
||||
showNotification(`❌ ACHTUNG: Alle ${totalCount} Drucker sind OFFLINE - Reservierte Jobs werden in Warteschlange gespeichert`, 'error');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
@@ -556,23 +664,29 @@ function initNewJobForm() {
|
||||
// Prüfen, ob ein Offline-Drucker ausgewählt wurde
|
||||
const selectedOption = document.querySelector(`#printer_id option[value="${printer_id}"]`);
|
||||
if (selectedOption && selectedOption.getAttribute('data-offline') === 'true') {
|
||||
const printerName = selectedOption.textContent.split(' (')[0].replace('🔴 ', '');
|
||||
const printerName = selectedOption.textContent.split(' (')[0].replace(/🔴\s*/g, '').trim();
|
||||
|
||||
// Deutlichere Warnung mit einem ausführlicheren Dialog
|
||||
const confirmOffline = confirm(
|
||||
`⚠️ WARNUNG: Offline-Drucker ausgewählt!\n\n` +
|
||||
`Der Drucker "${printerName}" ist derzeit OFFLINE.\n\n` +
|
||||
`Wenn Sie fortfahren:\n` +
|
||||
`• Der Job wird als "Wartend auf Drucker" markiert\n` +
|
||||
`• Sie erhalten eine Benachrichtigung, wenn der Drucker online geht\n` +
|
||||
`• Der Job startet automatisch, sobald der Drucker verfügbar ist\n\n` +
|
||||
`Möchten Sie trotzdem fortfahren?`
|
||||
`⛔ ACHTUNG: OFFLINE-DRUCKER AUSGEWÄHLT! ⛔\n` +
|
||||
`---------------------------------------------\n\n` +
|
||||
`Der Drucker "${printerName}" ist DERZEIT NICHT VERFÜGBAR!\n\n` +
|
||||
`Wenn Sie trotzdem fortfahren:\n\n` +
|
||||
`✓ Ihr Job wird in der WARTESCHLANGE gespeichert\n` +
|
||||
`✓ Der System-Status wird regelmäßig überprüft\n` +
|
||||
`✓ Sie erhalten eine BENACHRICHTIGUNG, sobald der Drucker online geht\n` +
|
||||
`✓ Der Job startet AUTOMATISCH, wenn der Drucker verfügbar wird\n\n` +
|
||||
`---------------------------------------------\n` +
|
||||
`Möchten Sie TROTZDEM mit diesem Offline-Drucker fortfahren?`
|
||||
);
|
||||
|
||||
if (!confirmOffline) {
|
||||
showNotification('Job-Erstellung abgebrochen. Bitte wählen Sie einen Online-Drucker oder warten Sie, bis der gewünschte Drucker verfügbar ist.', 'info');
|
||||
showNotification('Job-Erstellung abgebrochen - Bitte wählen Sie einen ONLINE-Drucker für sofortigen Start', 'info');
|
||||
return;
|
||||
}
|
||||
|
||||
showNotification(`Job für Offline-Drucker "${printerName}" wird erstellt. Sie werden benachrichtigt, wenn der Drucker online geht.`, 'warning');
|
||||
// Spezielle Benachrichtigung für Offline-Drucker-Jobs
|
||||
showNotification(`⏳ Job für OFFLINE-Drucker "${printerName}" wird in Warteschlange erstellt. Sie werden benachrichtigt, wenn der Drucker verfügbar wird.`, 'warning');
|
||||
}
|
||||
|
||||
// Startzeit in ISO-Format konvertieren
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user