core/Projektarbeit-MYP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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.

Browse Source
This commit is contained in:
Till Tomczak
2025-05-29 09:46:16 +02:00
parent e9071c7b57
commit d81149229a
13 changed files with 2138 additions and 1233 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
backend/app/templates/base.html
View File

@@ -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>