304 lines
13 KiB
HTML
304 lines
13 KiB
HTML
<!-- =============================================
|
|
MYP Platform - Moderne Navbar
|
|
Mercedes-Benz Design System
|
|
============================================= -->
|
|
|
|
<nav class="navbar" role="navigation" aria-label="Hauptnavigation">
|
|
<div class="navbar-container">
|
|
|
|
<!-- Brand Section -->
|
|
<a href="{{ url_for('dashboard') }}" class="navbar-brand" aria-label="Zur Startseite">
|
|
<!-- Mercedes-Benz Logo -->
|
|
<svg class="brand-icon" viewBox="0 0 80 80" fill="currentColor" 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.5C27,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,40c0-13.1,7-24.5,17.5-30.9v0C26.6,6,32.5,4.2,39,4l-4.5,32.7L21.5,46.8v0L8.3,57.1C5.6,52,4,46.2,4,40z M58.6,70.8C53.1,74.1,46.8,76,40,76c-6.8,0-13.2-1.9-18.6-5.2c-4.9-2.9-8.9-6.9-11.9-11.7l11.9-4.9v0L40,46.6l18.6,7.5v0l12,4.9C67.6,63.9,63.4,67.9,58.6,70.8z M58.6,46.8L58.6,46.8l-12.9-10L41.1,4c6.3,0.2,12.3,2,17.4,5.1v0C69,15.4,76,26.9,76,40c0,6.2-1.5,12-4.3,17.1L58.6,46.8z"/>
|
|
</svg>
|
|
|
|
<!-- Brand Text -->
|
|
<div class="brand-text">
|
|
<span class="brand-title">Mercedes-Benz</span>
|
|
<span class="brand-subtitle">MYP Platform</span>
|
|
</div>
|
|
</a>
|
|
|
|
<!-- Desktop Navigation -->
|
|
<div class="navbar-nav">
|
|
<a href="{{ url_for('dashboard') }}"
|
|
class="nav-item {{ 'active' if request.endpoint == 'dashboard' else '' }}"
|
|
aria-label="Dashboard">
|
|
<i class="fas fa-tachometer-alt" aria-hidden="true"></i>
|
|
<span>Dashboard</span>
|
|
</a>
|
|
|
|
<a href="{{ url_for('printers_page') }}"
|
|
class="nav-item {{ 'active' if request.endpoint == 'printers_page' else '' }}"
|
|
aria-label="Drucker verwalten">
|
|
<i class="fas fa-print" aria-hidden="true"></i>
|
|
<span>Drucker</span>
|
|
</a>
|
|
|
|
{% if current_user.is_authenticated and current_user.has_permission('VIEW_JOBS') %}
|
|
<a href="{{ url_for('jobs.jobs_page') }}"
|
|
class="nav-item {{ 'active' if request.endpoint == 'jobs.jobs_page' else '' }}"
|
|
aria-label="Druckaufträge anzeigen">
|
|
<i class="fas fa-tasks" aria-hidden="true"></i>
|
|
<span>Aufträge</span>
|
|
</a>
|
|
{% endif %}
|
|
|
|
{% if current_user.is_authenticated and current_user.has_permission('CONTROL_PRINTER') %}
|
|
<a href="{{ url_for('tapo.tapo_dashboard') }}"
|
|
class="nav-item {{ 'active' if request.endpoint == 'tapo.tapo_dashboard' else '' }}"
|
|
aria-label="Smart-Plugs verwalten">
|
|
<i class="fas fa-plug" aria-hidden="true"></i>
|
|
<span>Smart-Plugs</span>
|
|
</a>
|
|
{% endif %}
|
|
|
|
{% if current_user.is_authenticated and current_user.has_permission('VIEW_CALENDAR') %}
|
|
<a href="{{ url_for('calendar') }}"
|
|
class="nav-item {{ 'active' if request.endpoint == 'calendar' else '' }}"
|
|
aria-label="Kalender anzeigen">
|
|
<i class="fas fa-calendar-alt" aria-hidden="true"></i>
|
|
<span>Kalender</span>
|
|
</a>
|
|
{% endif %}
|
|
|
|
{% if current_user.is_authenticated and current_user.has_role('admin') %}
|
|
<a href="{{ url_for('admin.admin_dashboard') }}"
|
|
class="nav-item {{ 'active' if request.endpoint == 'admin.admin_dashboard' else '' }}"
|
|
aria-label="Administrationsbereich">
|
|
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
<span>Admin</span>
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Navbar Actions (Rechte Seite) -->
|
|
<div class="navbar-actions">
|
|
|
|
{% if current_user.is_authenticated %}
|
|
<!-- Benachrichtigungen -->
|
|
<div class="dropdown">
|
|
<button class="navbar-btn"
|
|
id="notificationToggle"
|
|
aria-label="Benachrichtigungen anzeigen"
|
|
aria-expanded="false">
|
|
<i class="fas fa-bell" aria-hidden="true"></i>
|
|
</button>
|
|
|
|
<div class="dropdown-menu" id="notificationDropdown">
|
|
<div class="dropdown-header">
|
|
<i class="fas fa-bell mr-2" aria-hidden="true"></i>
|
|
Benachrichtigungen
|
|
</div>
|
|
|
|
<div id="notificationList">
|
|
<!-- Wird dynamisch geladen -->
|
|
<div class="dropdown-item">
|
|
<i class="fas fa-info-circle text-blue-500" aria-hidden="true"></i>
|
|
<div>
|
|
<div class="font-medium">Keine neuen Benachrichtigungen</div>
|
|
<div class="text-sm text-gray-500">Alle Meldungen sind aktuell</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dropdown-divider"></div>
|
|
<a href="{{ url_for('notifications') }}" class="dropdown-item">
|
|
<i class="fas fa-eye" aria-hidden="true"></i>
|
|
Alle anzeigen
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- User Menu -->
|
|
<div class="dropdown">
|
|
<div class="user-avatar"
|
|
aria-label="Benutzerprofil öffnen"
|
|
aria-expanded="false">
|
|
{{ current_user.get_initials() }}
|
|
</div>
|
|
|
|
<div class="dropdown-menu" id="userDropdown">
|
|
<div class="dropdown-header">
|
|
<i class="fas fa-user mr-2" aria-hidden="true"></i>
|
|
{{ current_user.display_name or current_user.username }}
|
|
</div>
|
|
|
|
<a href="{{ url_for('users.profile') }}" class="dropdown-item">
|
|
<i class="fas fa-user-circle" aria-hidden="true"></i>
|
|
Mein Profil
|
|
</a>
|
|
|
|
<a href="{{ url_for('users.settings') }}" class="dropdown-item">
|
|
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
Einstellungen
|
|
</a>
|
|
|
|
{% if current_user.has_role('admin') %}
|
|
<div class="dropdown-divider"></div>
|
|
<a href="{{ url_for('admin.admin_dashboard') }}" class="dropdown-item">
|
|
<i class="fas fa-shield-alt" aria-hidden="true"></i>
|
|
Administration
|
|
</a>
|
|
{% endif %}
|
|
|
|
<div class="dropdown-divider"></div>
|
|
<a href="{{ url_for('auth.logout') }}" class="dropdown-item">
|
|
<i class="fas fa-sign-out-alt" aria-hidden="true"></i>
|
|
Abmelden
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{% else %}
|
|
<!-- Nicht angemeldet -->
|
|
<a href="{{ url_for('auth.login') }}" class="navbar-btn" aria-label="Anmelden">
|
|
<i class="fas fa-sign-in-alt" aria-hidden="true"></i>
|
|
</a>
|
|
{% endif %}
|
|
|
|
<!-- Dark Mode Toggle -->
|
|
<button class="navbar-btn"
|
|
id="darkModeToggle"
|
|
aria-label="Dark Mode umschalten"
|
|
title="Dark Mode umschalten">
|
|
<i class="fas fa-moon" aria-hidden="true"></i>
|
|
</button>
|
|
|
|
<!-- Mobile Menu Toggle -->
|
|
<button class="mobile-menu-toggle"
|
|
id="mobileMenuToggle"
|
|
aria-label="Menü öffnen/schließen"
|
|
aria-expanded="false">
|
|
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Mobile Menu -->
|
|
<div class="mobile-menu" id="mobileMenu">
|
|
<div class="mobile-nav">
|
|
<a href="{{ url_for('dashboard') }}"
|
|
class="mobile-nav-item {{ 'active' if request.endpoint == 'dashboard' else '' }}">
|
|
<i class="fas fa-tachometer-alt" aria-hidden="true"></i>
|
|
<span>Dashboard</span>
|
|
</a>
|
|
|
|
<a href="{{ url_for('printers_page') }}"
|
|
class="mobile-nav-item {{ 'active' if request.endpoint == 'printers_page' else '' }}">
|
|
<i class="fas fa-print" aria-hidden="true"></i>
|
|
<span>Drucker</span>
|
|
</a>
|
|
|
|
{% if current_user.is_authenticated and current_user.has_permission('VIEW_JOBS') %}
|
|
<a href="{{ url_for('jobs.jobs_page') }}"
|
|
class="mobile-nav-item {{ 'active' if request.endpoint == 'jobs.jobs_page' else '' }}">
|
|
<i class="fas fa-tasks" aria-hidden="true"></i>
|
|
<span>Druckaufträge</span>
|
|
</a>
|
|
{% endif %}
|
|
|
|
{% if current_user.is_authenticated and current_user.has_permission('CONTROL_PRINTER') %}
|
|
<a href="{{ url_for('tapo.tapo_dashboard') }}"
|
|
class="mobile-nav-item {{ 'active' if request.endpoint == 'tapo.tapo_dashboard' else '' }}">
|
|
<i class="fas fa-plug" aria-hidden="true"></i>
|
|
<span>Smart-Plugs</span>
|
|
</a>
|
|
{% endif %}
|
|
|
|
{% if current_user.is_authenticated and current_user.has_permission('VIEW_CALENDAR') %}
|
|
<a href="{{ url_for('calendar') }}"
|
|
class="mobile-nav-item {{ 'active' if request.endpoint == 'calendar' else '' }}">
|
|
<i class="fas fa-calendar-alt" aria-hidden="true"></i>
|
|
<span>Kalender</span>
|
|
</a>
|
|
{% endif %}
|
|
|
|
{% if current_user.is_authenticated %}
|
|
<div class="dropdown-divider"></div>
|
|
|
|
<a href="{{ url_for('users.profile') }}"
|
|
class="mobile-nav-item">
|
|
<i class="fas fa-user-circle" aria-hidden="true"></i>
|
|
<span>Mein Profil</span>
|
|
</a>
|
|
|
|
<a href="{{ url_for('users.settings') }}"
|
|
class="mobile-nav-item">
|
|
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
<span>Einstellungen</span>
|
|
</a>
|
|
|
|
{% if current_user.has_role('admin') %}
|
|
<a href="{{ url_for('admin.admin_dashboard') }}"
|
|
class="mobile-nav-item">
|
|
<i class="fas fa-shield-alt" aria-hidden="true"></i>
|
|
<span>Administration</span>
|
|
</a>
|
|
{% endif %}
|
|
|
|
<div class="dropdown-divider"></div>
|
|
|
|
<a href="{{ url_for('auth.logout') }}"
|
|
class="mobile-nav-item">
|
|
<i class="fas fa-sign-out-alt" aria-hidden="true"></i>
|
|
<span>Abmelden</span>
|
|
</a>
|
|
|
|
{% else %}
|
|
<a href="{{ url_for('auth.login') }}"
|
|
class="mobile-nav-item">
|
|
<i class="fas fa-sign-in-alt" aria-hidden="true"></i>
|
|
<span>Anmelden</span>
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Navbar JavaScript -->
|
|
<script>
|
|
// Dark Mode Toggle Funktionalität
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const darkModeToggle = document.getElementById('darkModeToggle');
|
|
const icon = darkModeToggle.querySelector('i');
|
|
|
|
// Aktuellen Dark Mode Status prüfen
|
|
const isDark = document.documentElement.classList.contains('dark');
|
|
updateDarkModeIcon(isDark);
|
|
|
|
darkModeToggle.addEventListener('click', function() {
|
|
const htmlElement = document.documentElement;
|
|
const newIsDark = !htmlElement.classList.contains('dark');
|
|
|
|
htmlElement.classList.toggle('dark');
|
|
updateDarkModeIcon(newIsDark);
|
|
|
|
// Status in localStorage speichern
|
|
localStorage.setItem('darkMode', newIsDark ? 'true' : 'false');
|
|
|
|
// Optional: Server-Seite informieren
|
|
fetch('/api/user/theme', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRFToken': '{{ csrf_token() }}'
|
|
},
|
|
body: JSON.stringify({ theme: newIsDark ? 'dark' : 'light' })
|
|
}).catch(() => {
|
|
// Stumm fehlschlagen - Theme funktioniert auch offline
|
|
});
|
|
});
|
|
|
|
function updateDarkModeIcon(isDark) {
|
|
if (isDark) {
|
|
icon.className = 'fas fa-sun';
|
|
darkModeToggle.setAttribute('aria-label', 'Light Mode aktivieren');
|
|
} else {
|
|
icon.className = 'fas fa-moon';
|
|
darkModeToggle.setAttribute('aria-label', 'Dark Mode aktivieren');
|
|
}
|
|
}
|
|
});
|
|
</script> |