2193 lines
91 KiB
HTML
Executable File
2193 lines
91 KiB
HTML
Executable File
<!--
|
||
Copyright 2025-2026 AIIrondev
|
||
|
||
Licensed under the Inventarsystem EULA (Endbenutzer-Lizenzvertrag).
|
||
See Legal/LICENSE for the full license text.
|
||
Unauthorized commercial use, SaaS hosting, or removal of branding is prohibited.
|
||
For commercial licensing inquiries: https://github.com/AIIrondev
|
||
-->
|
||
<!DOCTYPE html>
|
||
<html lang="de" data-module="{{ CURRENT_MODULE }}">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover">
|
||
<meta name="mobile-web-app-capable" content="yes">
|
||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||
<meta name="theme-color" content="#2c3e50" id="meta-theme-color">
|
||
<script>
|
||
// Init theme early to prevent FOUC (Flash of Unstyled Content)
|
||
(function() {
|
||
var theme = localStorage.getItem('inventarsystem-theme');
|
||
if (theme === 'dark' || (!theme && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||
document.documentElement.setAttribute('data-theme', 'dark');
|
||
document.getElementById('meta-theme-color').setAttribute('content', '#1a252f');
|
||
} else {
|
||
document.documentElement.setAttribute('data-theme', 'light');
|
||
document.getElementById('meta-theme-color').setAttribute('content', '#2c3e50');
|
||
}
|
||
})();
|
||
</script>
|
||
<meta name="csrf-token" content="{{ csrf_token }}">
|
||
<title>{% block title %}Inventarsystem{% endblock %}</title>
|
||
{% block head %}
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css', v=ASSET_VERSION) }}">
|
||
<link rel="stylesheet" href="{{ url_for('static', filename='css/planned_appointments.css', v=ASSET_VERSION) }}">
|
||
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">
|
||
<link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}">
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
|
||
<script>
|
||
(function () {
|
||
const csrfMeta = document.querySelector('meta[name="csrf-token"]');
|
||
const csrfToken = csrfMeta ? csrfMeta.content : '';
|
||
if (!csrfToken) {
|
||
return;
|
||
}
|
||
|
||
const safeMethods = new Set(['GET', 'HEAD', 'OPTIONS', 'TRACE']);
|
||
|
||
function sameOrigin(url) {
|
||
try {
|
||
return new URL(url, window.location.href).origin === window.location.origin;
|
||
} catch (error) {
|
||
return false;
|
||
}
|
||
}
|
||
|
||
function ensureFormToken(form) {
|
||
const method = (form.getAttribute('method') || 'GET').toUpperCase();
|
||
if (safeMethods.has(method)) {
|
||
return;
|
||
}
|
||
|
||
const action = form.getAttribute('action') || window.location.href;
|
||
if (!sameOrigin(action)) {
|
||
return;
|
||
}
|
||
|
||
let tokenInput = form.querySelector('input[name="csrf_token"]');
|
||
if (!tokenInput) {
|
||
tokenInput = document.createElement('input');
|
||
tokenInput.type = 'hidden';
|
||
tokenInput.name = 'csrf_token';
|
||
form.appendChild(tokenInput);
|
||
}
|
||
tokenInput.value = csrfToken;
|
||
}
|
||
|
||
document.addEventListener('submit', function (event) {
|
||
const form = event.target;
|
||
if (form && form.tagName === 'FORM') {
|
||
ensureFormToken(form);
|
||
}
|
||
}, true);
|
||
|
||
const originalFetch = window.fetch.bind(window);
|
||
window.fetch = function (resource, init) {
|
||
const options = init ? { ...init } : {};
|
||
const method = (options.method || 'GET').toUpperCase();
|
||
const targetUrl = resource instanceof Request ? resource.url : String(resource);
|
||
if (!safeMethods.has(method) && sameOrigin(targetUrl)) {
|
||
const headers = new Headers(resource instanceof Request ? resource.headers : undefined);
|
||
if (options.headers) {
|
||
new Headers(options.headers).forEach((value, key) => headers.set(key, value));
|
||
}
|
||
headers.set('X-CSRFToken', csrfToken);
|
||
headers.set('X-Requested-With', 'fetch');
|
||
options.headers = headers;
|
||
}
|
||
return originalFetch(resource, options);
|
||
};
|
||
|
||
document.addEventListener('DOMContentLoaded', function () {
|
||
document.querySelectorAll('form[method="post"], form[method="POST"]').forEach(ensureFormToken);
|
||
});
|
||
})();
|
||
</script>
|
||
<style>
|
||
/* ===== MODULE DETECTION & SETUP ===== */
|
||
:root {
|
||
--module-primary-color: #2c3e50;
|
||
--module-primary-light: #34495e;
|
||
--module-accent-color: #3498db;
|
||
--module-accent-light: rgba(52, 152, 219, 0.1);
|
||
--module-brand-icon: "📦";
|
||
--page-bg-gradient: linear-gradient(180deg, #f2f5f8, #e7edf4);
|
||
--page-bg-overlay1: rgba(86, 145, 200, 0.08);
|
||
--page-bg-overlay2: rgba(52, 98, 150, 0.09);
|
||
}
|
||
|
||
html[data-module="library"] {
|
||
--module-primary-color: #6c4e71;
|
||
--module-primary-light: #7d5a8a;
|
||
--module-accent-color: #9b59b6;
|
||
--module-accent-light: rgba(155, 89, 182, 0.1);
|
||
--module-brand-icon: "📚";
|
||
}
|
||
|
||
:root[data-theme="dark"] {
|
||
--module-primary-color: #1a252f;
|
||
--module-primary-light: #2c3e50;
|
||
--module-accent-color: #2980b9;
|
||
--module-brand-icon: "📦";
|
||
--page-bg-gradient: linear-gradient(180deg, #0f172a, #1e293b);
|
||
--page-bg-overlay1: rgba(56, 189, 248, 0.05);
|
||
--page-bg-overlay2: rgba(59, 130, 246, 0.06);
|
||
}
|
||
|
||
html[data-theme="dark"][data-module="library"] {
|
||
--module-primary-color: #4a354d;
|
||
--module-primary-light: #614666;
|
||
--module-accent-color: #8e44ad;
|
||
}
|
||
|
||
/* Global styles */
|
||
body {
|
||
font-family: "Manrope", "Segoe UI", "Noto Sans", sans-serif;
|
||
background:
|
||
radial-gradient(1200px 500px at 10% -10%, var(--page-bg-overlay1), transparent 55%),
|
||
radial-gradient(900px 420px at 95% 0%, var(--page-bg-overlay2), transparent 52%),
|
||
var(--page-bg-gradient);
|
||
margin: 0;
|
||
padding: 0;
|
||
padding-bottom: auto; /* Fallback for dynamic calculation */
|
||
padding-bottom: env(safe-area-inset-bottom, 30px);
|
||
color: var(--ui-text, #1f2d3d);
|
||
}
|
||
|
||
.container {
|
||
padding-top: 20px;
|
||
}
|
||
|
||
/* Navigation styles */
|
||
.navbar {
|
||
box-shadow: 0 4px 14px rgba(2, 6, 23, 0.24);
|
||
background-color: var(--module-primary-color) !important;
|
||
position: sticky;
|
||
top: 0;
|
||
/* iOS Safe Area insets for notches and rounded corners */
|
||
padding-top: env(safe-area-inset-top, 0);
|
||
padding-left: env(safe-area-inset-left, 0);
|
||
padding-right: env(safe-area-inset-right, 0);
|
||
z-index: 1900;
|
||
}
|
||
|
||
#loginNavbar {
|
||
padding-top: 0;
|
||
padding-bottom: 0;
|
||
min-height: 28px;
|
||
overflow: visible;
|
||
}
|
||
|
||
.navbar .container-fluid {
|
||
gap: 8px;
|
||
/* Ensure container respects safe areas on all sides */
|
||
padding-left: max(env(safe-area-inset-left, 0), 12px);
|
||
padding-right: max(env(safe-area-inset-right, 0), 12px);
|
||
padding-bottom: env(safe-area-inset-bottom, 0);
|
||
}
|
||
|
||
#loginNavbar .container-fluid {
|
||
padding-top: 2px;
|
||
padding-bottom: 2px;
|
||
align-items: center;
|
||
min-height: 28px;
|
||
}
|
||
|
||
.navbar-brand {
|
||
font-weight: bold;
|
||
font-size: 1.3rem;
|
||
padding-right: 10px;
|
||
white-space: nowrap;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
#loginNavbar .navbar-brand {
|
||
padding-right: 0;
|
||
}
|
||
|
||
#loginNavbar .navbar-brand::before {
|
||
content: none;
|
||
margin-right: 0;
|
||
}
|
||
|
||
#loginNavbar .invario-logo {
|
||
display: block;
|
||
height: 114px;
|
||
width: auto;
|
||
max-width: min(78vw, 520px);
|
||
object-fit: contain;
|
||
filter: none;
|
||
margin-top: 0;
|
||
margin-bottom: 0;
|
||
transform: translateY(8px);
|
||
}
|
||
|
||
.navbar-text.tenant-badge {
|
||
font-size: 0.82rem;
|
||
color: rgba(255,255,255,0.9);
|
||
background: rgba(255,255,255,0.12);
|
||
border: 1px solid rgba(255,255,255,0.18);
|
||
padding: 0.25rem 0.55rem;
|
||
border-radius: 999px;
|
||
white-space: nowrap;
|
||
margin-right: 0.75rem;
|
||
}
|
||
|
||
.navbar-brand::before {
|
||
content: attr(data-icon);
|
||
margin-right: 6px;
|
||
}
|
||
|
||
.navbar-nav .nav-link {
|
||
font-size: 0.95rem;
|
||
font-weight: 600;
|
||
padding: 0.5rem 0.75rem;
|
||
border-radius: 6px;
|
||
transition: padding .18s ease, font-size .18s ease;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
body.tutorial-tooltips-active [data-tutorial-tip] {
|
||
position: relative;
|
||
border-radius: 10px;
|
||
outline: 1px dashed rgba(59, 130, 246, 0.35);
|
||
outline-offset: 2px;
|
||
cursor: help;
|
||
}
|
||
|
||
body.tutorial-tooltips-active [data-tutorial-tip]::before {
|
||
content: '💡';
|
||
position: absolute;
|
||
top: 50%;
|
||
right: -26px;
|
||
transform: translateY(-50%);
|
||
width: 20px;
|
||
height: 20px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 999px;
|
||
background: rgba(59, 130, 246, 0.15);
|
||
color: #0f172a;
|
||
font-size: 0.75rem;
|
||
pointer-events: none;
|
||
}
|
||
|
||
body.tutorial-tooltips-active [data-tutorial-tip]::after {
|
||
content: attr(data-tutorial-tip);
|
||
position: absolute;
|
||
top: calc(100% + 10px);
|
||
left: 50%;
|
||
transform: translateX(-50%) translateY(6px);
|
||
min-width: 220px;
|
||
max-width: 280px;
|
||
padding: 10px 12px;
|
||
border-radius: 14px;
|
||
background: rgba(15, 23, 42, 0.92);
|
||
color: #f8fafc;
|
||
font-size: 0.9rem;
|
||
line-height: 1.4;
|
||
text-align: left;
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
pointer-events: none;
|
||
box-shadow: 0 24px 48px rgba(15, 23, 42, 0.22);
|
||
z-index: 9999;
|
||
white-space: normal;
|
||
}
|
||
|
||
body.tutorial-tooltips-active [data-tutorial-tip]:hover::after {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
transform: translateX(-50%) translateY(10px);
|
||
}
|
||
|
||
.tutorial-tooltip-indicator {
|
||
position: fixed;
|
||
top: 92px;
|
||
right: 16px;
|
||
z-index: 2000;
|
||
display: none;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 10px 14px;
|
||
border-radius: 999px;
|
||
background: rgba(56, 189, 248, 0.12);
|
||
border: 1px solid rgba(56, 189, 248, 0.25);
|
||
color: #0f172a;
|
||
font-size: 0.95rem;
|
||
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
|
||
}
|
||
|
||
body.tutorial-tooltips-active .tutorial-tooltip-indicator {
|
||
display: inline-flex;
|
||
}
|
||
|
||
/* iPad/Tablet responsive adjustments */
|
||
@media (max-width: 768px) {
|
||
.navbar .container-fluid {
|
||
gap: 6px;
|
||
padding-left: max(env(safe-area-inset-left, 0), 10px);
|
||
padding-right: max(env(safe-area-inset-right, 0), 10px);
|
||
}
|
||
|
||
.navbar-brand {
|
||
font-size: 1.1rem;
|
||
padding-right: 8px;
|
||
}
|
||
|
||
.navbar-brand::before {
|
||
margin-right: 4px;
|
||
}
|
||
|
||
.navbar-nav .nav-link {
|
||
font-size: 0.85rem;
|
||
padding: 0.45rem 0.6rem;
|
||
}
|
||
}
|
||
|
||
/* Small phones responsive adjustments */
|
||
@media (max-width: 576px) {
|
||
.navbar .container-fluid {
|
||
gap: 4px;
|
||
padding-left: max(env(safe-area-inset-left, 0), 8px);
|
||
padding-right: max(env(safe-area-inset-right, 0), 8px);
|
||
}
|
||
|
||
.navbar-brand {
|
||
font-size: 0.95rem;
|
||
padding-right: 6px;
|
||
}
|
||
|
||
.navbar-brand::before {
|
||
display: none;
|
||
}
|
||
|
||
.navbar-nav .nav-link {
|
||
font-size: 0.75rem;
|
||
padding: 0.4rem 0.5rem;
|
||
}
|
||
|
||
#loginNavbar .invario-logo {
|
||
height: 94px;
|
||
max-width: 80vw;
|
||
margin-top: 0;
|
||
margin-bottom: 0;
|
||
transform: translateY(6px);
|
||
}
|
||
}
|
||
|
||
.navbar.nav-compact .navbar-brand {
|
||
font-size: 1.18rem;
|
||
}
|
||
|
||
.navbar.nav-compact .navbar-nav .nav-link {
|
||
font-size: 0.93rem;
|
||
padding: 0.48rem 0.62rem;
|
||
}
|
||
|
||
.navbar.nav-compact .function-search-wrap {
|
||
width: min(320px, 34vw);
|
||
}
|
||
|
||
.navbar.nav-compact .function-search-input,
|
||
.navbar.nav-compact .function-search-btn {
|
||
min-height: 34px;
|
||
padding-top: 6px;
|
||
padding-bottom: 6px;
|
||
}
|
||
|
||
.navbar.nav-ultra-compact .navbar-brand {
|
||
font-size: 1.04rem;
|
||
}
|
||
|
||
.navbar.nav-ultra-compact .navbar-nav .nav-link {
|
||
font-size: 0.86rem;
|
||
padding: 0.4rem 0.52rem;
|
||
}
|
||
|
||
.navbar.nav-ultra-compact .function-search-wrap {
|
||
width: min(270px, 30vw);
|
||
}
|
||
|
||
.navbar.nav-ultra-compact .function-search-btn {
|
||
padding-left: 9px;
|
||
padding-right: 9px;
|
||
font-size: 0.82rem;
|
||
}
|
||
|
||
.navbar.nav-ultra-compact .navbar-text {
|
||
margin-right: 0.45rem !important;
|
||
font-size: 0.86rem;
|
||
}
|
||
|
||
.navbar-nav .nav-link.nav-active {
|
||
background-color: rgba(255, 255, 255, 0.2);
|
||
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
|
||
}
|
||
|
||
.function-search-wrap {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-right: 10px;
|
||
width: min(420px, 42vw);
|
||
min-width: 0;
|
||
}
|
||
|
||
.function-search-form {
|
||
width: 100%;
|
||
display: flex;
|
||
gap: 6px;
|
||
align-items: center;
|
||
min-width: 0;
|
||
}
|
||
|
||
.function-search-input {
|
||
flex: 1 1 auto;
|
||
width: auto;
|
||
min-width: 0;
|
||
min-height: 38px;
|
||
border-radius: 10px;
|
||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||
background: rgba(255, 255, 255, 0.12);
|
||
color: #ffffff;
|
||
padding: 8px 12px;
|
||
outline: none;
|
||
}
|
||
|
||
.function-search-input::placeholder {
|
||
color: rgba(255, 255, 255, 0.78);
|
||
}
|
||
|
||
.function-search-input:focus {
|
||
border-color: #93c5fd;
|
||
box-shadow: 0 0 0 2px rgba(147, 197, 253, 0.35);
|
||
background: rgba(255, 255, 255, 0.18);
|
||
}
|
||
|
||
.function-search-btn {
|
||
flex: 0 0 auto;
|
||
min-height: 38px;
|
||
border-radius: 10px;
|
||
border: 1px solid rgba(255, 255, 255, 0.45);
|
||
background: rgba(255, 255, 255, 0.15);
|
||
color: #ffffff;
|
||
padding: 7px 12px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.function-search-btn:hover {
|
||
background: rgba(255, 255, 255, 0.26);
|
||
}
|
||
|
||
.quick-link-pill {
|
||
border: 1px solid rgba(255, 255, 255, 0.35);
|
||
background: rgba(255, 255, 255, 0.08);
|
||
}
|
||
|
||
.navbar-nav .nav-link:hover,
|
||
.navbar-nav .nav-link:focus {
|
||
background-color: rgba(255, 255, 255, 0.12);
|
||
}
|
||
|
||
.nav-priority-link {
|
||
background: var(--module-accent-light);
|
||
border: 1px solid var(--module-accent-color);
|
||
}
|
||
|
||
.admin-nav-section {
|
||
margin-left: auto;
|
||
display: flex;
|
||
gap: 15px;
|
||
}
|
||
|
||
.admin-nav-section .nav-item {
|
||
background-color: var(--module-accent-color);
|
||
color: white;
|
||
padding: 5px 10px;
|
||
border-radius: 4px;
|
||
text-decoration: none;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.admin-nav-section .nav-item:hover {
|
||
opacity: 0.8;
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
/* Admin dropdown styling */
|
||
.nav-item.dropdown .nav-link.dropdown-toggle {
|
||
color: #ffffff;
|
||
font-weight: 500;
|
||
position: relative;
|
||
}
|
||
|
||
.nav-item.dropdown .nav-link.dropdown-toggle:hover {
|
||
color: #ffffff;
|
||
}
|
||
|
||
/* Consistent spacing for admin nav items */
|
||
.navbar-nav .nav-item {
|
||
margin-right: 5px;
|
||
}
|
||
|
||
.navbar-nav {
|
||
align-items: center;
|
||
}
|
||
|
||
.navbar-nav .nav-item:last-child {
|
||
margin-right: 0;
|
||
}
|
||
|
||
/* Flash messages */
|
||
.flashes {
|
||
margin-top: 20px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.flash {
|
||
padding: 12px 20px;
|
||
margin-bottom: 15px;
|
||
border-radius: 5px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.flash.success {
|
||
background-color: #d4edda;
|
||
color: #155724;
|
||
border-left: 5px solid #28a745;
|
||
}
|
||
|
||
.flash.error {
|
||
background-color: #f8d7da;
|
||
color: #721c24;
|
||
border-left: 5px solid #dc3545;
|
||
}
|
||
|
||
.flash.info {
|
||
background-color: #e2e3e5;
|
||
color: #383d41;
|
||
border-left: 5px solid #6c757d;
|
||
}
|
||
|
||
/* Dropdown menus - consistent with system design */
|
||
.dropdown-menu {
|
||
box-shadow: var(--ui-shadow-md);
|
||
border: 1px solid var(--ui-border);
|
||
border-radius: 8px;
|
||
padding: 8px 0;
|
||
min-width: 200px;
|
||
margin-top: 5px;
|
||
background-color: var(--ui-surface);
|
||
}
|
||
|
||
.dropdown-item {
|
||
padding: 10px 16px;
|
||
font-size: 0.9rem;
|
||
color: var(--ui-text);
|
||
transition: all 0.2s ease;
|
||
border: none;
|
||
background: none;
|
||
}
|
||
|
||
.dropdown-item:hover,
|
||
.dropdown-item:focus {
|
||
background-color: var(--ui-surface-soft);
|
||
color: var(--module-accent-color);
|
||
transform: translateX(2px);
|
||
}
|
||
|
||
/* Navigation dropdown specific styles */
|
||
.nav-item.dropdown .dropdown-toggle {
|
||
position: relative;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.nav-item.dropdown .dropdown-toggle:hover {
|
||
background-color: rgba(255,255,255,0.1);
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.nav-item.dropdown .dropdown-toggle::after {
|
||
transition: transform 0.2s ease;
|
||
}
|
||
|
||
.nav-item.dropdown.show .dropdown-toggle::after {
|
||
transform: rotate(180deg);
|
||
}
|
||
|
||
/* User account dropdown specific styles */
|
||
.dropdown-menu-end {
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||
}
|
||
|
||
.dropdown-divider {
|
||
margin: 6px 0;
|
||
border-color: #dee2e6;
|
||
}
|
||
|
||
/* Version display */
|
||
.text-info {
|
||
opacity: 0.8;
|
||
}
|
||
|
||
/* Mobile responsive navigation styles */
|
||
@media screen and (max-width: 768px) {
|
||
.navbar-nav .dropdown-menu {
|
||
border: none;
|
||
box-shadow: none;
|
||
background-color: rgba(52, 58, 64, 0.95);
|
||
margin-left: 15px;
|
||
margin-top: 5px;
|
||
border-radius: 6px;
|
||
}
|
||
|
||
.navbar-nav .dropdown-item {
|
||
color: #ffffff;
|
||
padding: 12px 20px;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.navbar-nav .dropdown-item:hover,
|
||
.navbar-nav .dropdown-item:focus {
|
||
background-color: rgba(255,255,255,0.1);
|
||
color: #ffffff;
|
||
transform: none;
|
||
}
|
||
|
||
.nav-item.dropdown .dropdown-toggle {
|
||
padding: 12px 12px;
|
||
min-height: 48px;
|
||
}
|
||
|
||
.navbar-toggler {
|
||
padding: 0.6rem 0.8rem;
|
||
border-width: 2px;
|
||
min-height: 48px;
|
||
min-width: 48px;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.navbar-collapse {
|
||
width: 100%;
|
||
}
|
||
|
||
.navbar-collapse > .d-flex {
|
||
width: 100%;
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
gap: 8px;
|
||
}
|
||
|
||
.function-search-wrap {
|
||
width: 100%;
|
||
max-width: 100%;
|
||
margin: 8px 0 10px;
|
||
flex: 1 1 100%;
|
||
}
|
||
|
||
.function-search-form {
|
||
width: 100%;
|
||
max-width: 100%;
|
||
flex-wrap: nowrap;
|
||
}
|
||
|
||
.function-search-input {
|
||
width: auto;
|
||
min-width: 0;
|
||
flex: 1 1 auto;
|
||
}
|
||
|
||
.function-search-btn {
|
||
flex: 0 0 auto;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.navbar-text {
|
||
margin-right: 0 !important;
|
||
width: 100%;
|
||
}
|
||
|
||
.user-menu-wrap {
|
||
align-self: flex-start;
|
||
}
|
||
|
||
.navbar-nav .nav-item {
|
||
margin-right: 0;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.navbar-nav .nav-link {
|
||
min-height: 44px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
/* Better touch targets for mobile */
|
||
.dropdown-toggle::after {
|
||
margin-left: 8px;
|
||
}
|
||
|
||
/* Account dropdown stays light theme on mobile */
|
||
.dropdown-menu-end {
|
||
background-color: var(--ui-surface);
|
||
border: 1px solid #dee2e6;
|
||
}
|
||
|
||
.dropdown-menu-end .dropdown-item {
|
||
color: #495057;
|
||
}
|
||
|
||
.dropdown-menu-end .dropdown-item:hover {
|
||
background-color: var(--ui-surface-soft);
|
||
color: #007bff;
|
||
}
|
||
}
|
||
|
||
/* Module Selector Bar Styles */
|
||
.module-selector-bar {
|
||
background: linear-gradient(90deg, var(--module-primary-color) 0%, var(--module-primary-light) 100%);
|
||
border-bottom: 3px solid var(--module-accent-color);
|
||
padding: 10px 16px;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
gap: 12px;
|
||
align-items: center;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.module-selector-bar .module-label {
|
||
font-size: 0.7rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.12em;
|
||
color: rgba(255, 255, 255, 0.7);
|
||
font-weight: 800;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.module-selector-bar .module-tabs {
|
||
display: flex;
|
||
gap: 8px;
|
||
align-items: center;
|
||
flex: 1;
|
||
}
|
||
|
||
.module-selector-bar .module-tab {
|
||
padding: 7px 16px;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
border: 1.5px solid rgba(255, 255, 255, 0.2);
|
||
color: rgba(255, 255, 255, 0.8);
|
||
text-decoration: none;
|
||
border-radius: 6px;
|
||
font-size: 0.95rem;
|
||
font-weight: 700;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
display: inline-block;
|
||
}
|
||
|
||
.module-selector-bar .module-tab:hover {
|
||
background: rgba(255, 255, 255, 0.2);
|
||
border-color: rgba(255, 255, 255, 0.4);
|
||
color: #fff;
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.module-selector-bar .module-tab.active {
|
||
background: var(--module-accent-color);
|
||
border-color: rgba(255, 255, 255, 0.8);
|
||
color: #fff;
|
||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
|
||
}
|
||
|
||
.module-separator {
|
||
width: 1px;
|
||
height: 24px;
|
||
background: rgba(255, 255, 255, 0.25);
|
||
margin: 0 4px;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.navbar {
|
||
border-bottom-left-radius: 14px;
|
||
border-bottom-right-radius: 14px;
|
||
}
|
||
|
||
.navbar .container-fluid {
|
||
align-items: flex-start;
|
||
flex-wrap: wrap;
|
||
padding-top: 0.2rem;
|
||
padding-bottom: 0.35rem;
|
||
}
|
||
|
||
.navbar-brand {
|
||
order: 1;
|
||
flex: 1 1 auto;
|
||
min-width: 0;
|
||
font-size: 1.08rem;
|
||
line-height: 1.1;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding-top: 0.2rem;
|
||
padding-bottom: 0.2rem;
|
||
}
|
||
|
||
.navbar-toggler {
|
||
order: 2;
|
||
margin-left: auto;
|
||
flex: 0 0 auto;
|
||
align-self: flex-start;
|
||
min-width: 48px;
|
||
min-height: 48px;
|
||
border: none;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
border-radius: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: background 0.2s ease;
|
||
}
|
||
|
||
.navbar-toggler:active,
|
||
.navbar-toggler:focus {
|
||
background: rgba(255, 255, 255, 0.2);
|
||
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
.navbar-collapse {
|
||
order: 4;
|
||
width: 100%;
|
||
margin-top: 12px;
|
||
padding: 12px;
|
||
border-radius: 16px;
|
||
background: rgba(15, 23, 42, 0.85);
|
||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
backdrop-filter: blur(16px);
|
||
-webkit-backdrop-filter: blur(16px);
|
||
max-height: calc(100vh - 90px); /* fallback */
|
||
max-height: calc(100dvh - 90px);
|
||
overflow-y: auto;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
.navbar-collapse.show,
|
||
.navbar-collapse.collapsing {
|
||
display: block;
|
||
}
|
||
|
||
.navbar-nav {
|
||
width: 100%;
|
||
align-items: stretch;
|
||
gap: 8px;
|
||
padding-top: 4px;
|
||
}
|
||
|
||
.navbar-nav .nav-item {
|
||
width: 100%;
|
||
}
|
||
|
||
.navbar-nav .nav-link {
|
||
width: 100%;
|
||
justify-content: flex-start;
|
||
min-height: 48px;
|
||
padding: 0.9rem 1.1rem;
|
||
margin-bottom: 2px;
|
||
border-radius: 12px;
|
||
background: rgba(255, 255, 255, 0.06);
|
||
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
|
||
}
|
||
|
||
.navbar-nav .nav-link.nav-active,
|
||
.navbar-nav .nav-link.quick-link-pill,
|
||
.navbar-nav .nav-link.nav-priority-link {
|
||
background: rgba(255, 255, 255, 0.16);
|
||
}
|
||
|
||
.navbar-nav .nav-item.dropdown {
|
||
width: 100%;
|
||
}
|
||
|
||
.navbar-nav .nav-item.dropdown .nav-link.dropdown-toggle {
|
||
width: 100%;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.navbar-nav .dropdown-menu {
|
||
width: 100%;
|
||
margin-left: 0;
|
||
margin-top: 6px;
|
||
border-radius: 12px;
|
||
background: rgba(255, 255, 255, 0.08); /* Match nav-link slightly */
|
||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||
box-shadow: none;
|
||
}
|
||
|
||
.navbar-nav .dropdown-item {
|
||
color: rgba(255, 255, 255, 0.9);
|
||
padding: 12px 16px;
|
||
border-radius: 8px;
|
||
margin: 2px 8px;
|
||
width: calc(100% - 16px);
|
||
}
|
||
|
||
.navbar-nav .dropdown-item:hover,
|
||
.navbar-nav .dropdown-item:focus {
|
||
background: rgba(255, 255, 255, 0.15);
|
||
color: #fff;
|
||
}
|
||
|
||
.module-selector-bar {
|
||
padding: 8px 10px;
|
||
gap: 8px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.module-selector-bar .module-label {
|
||
display: none;
|
||
}
|
||
|
||
.module-selector-bar .module-tabs {
|
||
width: 100%;
|
||
gap: 8px;
|
||
}
|
||
|
||
.module-selector-bar .module-tab {
|
||
width: 100%;
|
||
text-align: center;
|
||
padding: 8px 12px;
|
||
font-size: 0.92rem;
|
||
}
|
||
|
||
.module-separator {
|
||
display: none;
|
||
}
|
||
|
||
.function-search-wrap {
|
||
order: 3;
|
||
width: 100%;
|
||
margin: 0;
|
||
}
|
||
|
||
.function-search-form {
|
||
width: 100%;
|
||
flex-wrap: nowrap;
|
||
gap: 8px;
|
||
}
|
||
|
||
.function-search-input {
|
||
flex: 1 1 auto;
|
||
min-width: 0;
|
||
min-height: 44px;
|
||
}
|
||
|
||
.function-search-btn {
|
||
flex: 0 0 auto;
|
||
min-height: 44px;
|
||
min-width: 72px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.navbar-text {
|
||
order: 5;
|
||
width: 100%;
|
||
margin: 0 !important;
|
||
padding: 8px 10px;
|
||
border-radius: 12px;
|
||
background: rgba(255, 255, 255, 0.08);
|
||
text-align: center;
|
||
}
|
||
|
||
.user-menu-wrap {
|
||
order: 6;
|
||
width: 100%;
|
||
margin-right: 0 !important;
|
||
}
|
||
|
||
.user-menu-btn {
|
||
width: 100%;
|
||
min-height: 46px;
|
||
border-radius: 12px;
|
||
justify-content: center;
|
||
}
|
||
|
||
.dropdown-menu-end {
|
||
width: 100%;
|
||
}
|
||
|
||
@media (max-width: 520px) {
|
||
.function-search-form {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.function-search-input,
|
||
.function-search-btn,
|
||
.user-menu-btn,
|
||
.module-selector-bar .module-tab {
|
||
width: 100%;
|
||
}
|
||
|
||
.module-selector-bar .module-tabs {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.navbar-text {
|
||
font-size: 0.88rem;
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
{% endblock %}
|
||
</head>
|
||
<body>
|
||
{% set current_path = request.path %}
|
||
<!-- Module Selector Bar -->
|
||
{% if 'username' in session %}
|
||
<div class="module-selector-bar" id="moduleBar">
|
||
<span class="module-label">Module:</span>
|
||
<div class="module-tabs">
|
||
{% if inventory_module_enabled %}
|
||
<a href="{{ url_for('home') }}"
|
||
class="module-tab {% if CURRENT_MODULE == 'inventory' %}active{% endif %}"
|
||
id="inventoryModule"
|
||
data-module="inventory">
|
||
📦 Inventarsystem
|
||
</a>
|
||
{% endif %}
|
||
{% if inventory_module_enabled and library_module_enabled %}
|
||
<div class="module-separator"></div>
|
||
{% endif %}
|
||
{% if library_module_enabled %}
|
||
<a href="{{ url_for('library_view') }}"
|
||
class="module-tab {% if CURRENT_MODULE == 'library' %}active{% endif %}"
|
||
id="libraryModule"
|
||
data-module="library">
|
||
📚 Bibliothek
|
||
</a>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
{% endif %}
|
||
{% if 'username' in session %}
|
||
{% if CURRENT_MODULE != 'library' and inventory_module_enabled %}
|
||
<nav class="navbar navbar-expand-lg navbar-dark" id="inventoryNavbar">
|
||
<div class="container-fluid">
|
||
<a class="navbar-brand" href="{{ url_for('home') }}" data-icon="📦">Inventarsystem</a>
|
||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#inventoryNavContent">
|
||
<span class="navbar-toggler-icon"></span>
|
||
</button>
|
||
<div class="collapse navbar-collapse" id="inventoryNavContent">
|
||
<ul class="navbar-nav me-auto mb-2 mb-lg-0" id="inventoryNavList">
|
||
{% if current_permissions.pages.get('home', True) %}
|
||
<li class="nav-item" data-nav-fixed="true">
|
||
<a class="nav-link {% if current_path == url_for('home') %}nav-active{% endif %}" href="{{ url_for('home') }}" data-tutorial-tip="Starten Sie hier mit dem Materialbestand und suchen Sie nach Artikeln.">Artikel</a>
|
||
</li>
|
||
{% endif %}
|
||
{% if 'username' in session %}
|
||
{% if current_permissions.pages.get('my_borrowed_items', True) %}
|
||
<li class="nav-item">
|
||
<a class="nav-link quick-link-pill {% if current_path == url_for('my_borrowed_items') %}nav-active{% endif %}" href="{{ url_for('my_borrowed_items') }}" data-tutorial-tip="Ihre aktuellen Ausleihen und Rückgaben finden Sie hier.">Meine Ausleihen</a>
|
||
</li>
|
||
{% endif %}
|
||
{% endif %}
|
||
<li class="nav-item" data-nav-fixed="true">
|
||
<button id="themeToggleBtn" class="btn btn-link nav-link px-3" aria-label="Dark Mode umschalten" title="Theme umschalten">
|
||
<span class="theme-icon-light" style="display: none;">☀️</span>
|
||
<span class="theme-icon-dark" style="display: none;">🌙</span>
|
||
</button>
|
||
</li>
|
||
|
||
<li class="nav-item dropdown ms-lg-auto">
|
||
<a class="nav-link dropdown-toggle" href="#" id="invMoreDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false" title="Weitere Optionen">
|
||
Mehr Optionen
|
||
</a>
|
||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="invMoreDropdown">
|
||
{% if 'username' in session %}
|
||
{% if current_permissions.pages.get('tutorial_page', True) %}
|
||
<li><a class="dropdown-item" href="{{ url_for('tutorial_page') }}">Tutorial</a></li>
|
||
{% endif %}
|
||
{% if current_permissions.pages.get('upload_admin', True) and current_permissions.actions.get('can_insert', True) %}
|
||
<li><a class="dropdown-item" href="{{ url_for('upload_admin') }}">➕ Hochladen</a></li>
|
||
{% endif %}
|
||
<li><hr class="dropdown-divider"></li>
|
||
{% endif %}
|
||
{% if 'username' in session and (session.get('admin', False) or is_admin) and current_permissions.actions.get('can_manage_settings', True) %}
|
||
<li><h6 class="dropdown-header">Verwaltung</h6></li>
|
||
{% if current_permissions.pages.get('manage_filters', True) %}
|
||
<li><a class="dropdown-item" href="{{ url_for('manage_filters') }}">Filter verwalten</a></li>
|
||
{% endif %}
|
||
{% if current_permissions.pages.get('manage_locations', True) %}
|
||
<li><a class="dropdown-item" href="{{ url_for('manage_locations') }}">Orte verwalten</a></li>
|
||
{% endif %}
|
||
<li><a class="dropdown-item" href="{{ url_for('admin_school_settings') }}">Schulstammdaten</a></li>
|
||
{% if current_permissions.pages.get('admin_borrowings', True) %}
|
||
<li><a class="dropdown-item" href="{{ url_for('admin_borrowings') }}">Ausleihen</a></li>
|
||
{% endif %}
|
||
{% if current_permissions.pages.get('admin_damaged_items', True) %}
|
||
<li><a class="dropdown-item" href="{{ url_for('admin_damaged_items') }}">Defekte Items</a></li>
|
||
{% endif %}
|
||
{% if current_permissions.actions.get('can_view_logs', True) and current_permissions.pages.get('admin_audit_dashboard', True) %}
|
||
<li><a class="dropdown-item" href="{{ url_for('admin_audit_dashboard') }}">Audit Dashboard</a></li>
|
||
{% endif %}
|
||
{% if current_permissions.actions.get('can_view_logs', True) and current_permissions.pages.get('logs', True) %}
|
||
<li><a class="dropdown-item" href="{{ url_for('logs') }}">Logs</a></li>
|
||
{% endif %}
|
||
<li><hr class="dropdown-divider"></li>
|
||
{% if current_permissions.actions.get('can_manage_users', True) %}
|
||
<li><h6 class="dropdown-header">System</h6></li>
|
||
{% if current_permissions.pages.get('user_del', True) %}
|
||
<li><a class="dropdown-item" href="{{ url_for('user_del') }}">Benutzer verwalten</a></li>
|
||
{% endif %}
|
||
{% if current_permissions.pages.get('register', True) %}
|
||
<li><a class="dropdown-item" href="{{ url_for('register') }}">Neuer Benutzer</a></li>
|
||
{% endif %}
|
||
<li><hr class="dropdown-divider"></li>
|
||
{% endif %}
|
||
{% endif %}
|
||
<li><a class="dropdown-item" href="{{ url_for('impressum') }}">Impressum</a></li>
|
||
<li><a class="dropdown-item" href="{{ url_for('license') }}">Lizenz</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="nav-item d-none" id="inv-nav-overflow-anchor" aria-hidden="true"></li>
|
||
</ul>
|
||
<div class="d-flex">
|
||
{% if 'username' in session %}
|
||
<div class="function-search-wrap">
|
||
<form class="function-search-form" data-function-search="true">
|
||
<input
|
||
class="function-search-input"
|
||
type="search"
|
||
name="function_search"
|
||
placeholder="Funktion suchen..."
|
||
list="function-search-options"
|
||
autocomplete="off"
|
||
>
|
||
<button class="function-search-btn" type="submit">Los</button>
|
||
</form>
|
||
</div>
|
||
{% if current_tenant_db %}
|
||
<span class="navbar-text tenant-badge" title="Aktive Tenant-Datenbank">{{ current_tenant_db }}</span>
|
||
{% endif %}
|
||
<span class="navbar-text text-light me-3">{{ session['username'] }}</span>
|
||
<div class="dropdown me-2 user-menu-wrap">
|
||
<button class="btn btn-secondary dropdown-toggle user-menu-btn" type="button" id="invUserMenuDropdown" data-bs-toggle="dropdown" aria-expanded="false" data-notification-button="true">
|
||
👤
|
||
<span class="user-notification-dot {% if unread_notification_count and unread_notification_count > 0 %}visible{% endif %}" aria-hidden="true"></span>
|
||
</button>
|
||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="invUserMenuDropdown">
|
||
{% if current_permissions.pages.get('notifications_view', True) %}
|
||
<li><a class="dropdown-item" href="{{ url_for('notifications_view') }}">Benachrichtigungen</a></li>
|
||
{% endif %}
|
||
<li><hr class="dropdown-divider"></li>
|
||
<li><a class="dropdown-item" href="{{ url_for('change_password') }}">Passwort ändern</a></li>
|
||
<li><hr class="dropdown-divider"></li>
|
||
<li><a class="dropdown-item" href="{{ url_for('logout') }}">Logout</a></li>
|
||
</ul>
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
{% endif %}
|
||
|
||
{% if library_module_enabled and CURRENT_MODULE == 'library' %}
|
||
<nav class="navbar navbar-expand-lg navbar-dark" id="libraryNavbar">
|
||
<div class="container-fluid">
|
||
<a class="navbar-brand" href="{{ url_for('library_view') }}" data-icon="📚">Bibliothek</a>
|
||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#libraryNavContent">
|
||
<span class="navbar-toggler-icon"></span>
|
||
</button>
|
||
<div class="collapse navbar-collapse" id="libraryNavContent">
|
||
<ul class="navbar-nav me-auto mb-2 mb-lg-0" id="libraryNavList">
|
||
{% if current_permissions.pages.get('library_view', True) %}
|
||
<li class="nav-item" data-nav-fixed="true">
|
||
<a class="nav-link {% if current_path == url_for('library_view') %}nav-active{% endif %}" href="{{ url_for('library_view') }}" data-tutorial-tip="Die Bibliothek zeigt Ihnen alle Medien und verfügbaren Bücher.">Medien</a>
|
||
</li>
|
||
{% endif %}
|
||
{% if 'username' in session %}
|
||
{% if current_permissions.pages.get('my_borrowed_items', True) %}
|
||
<li class="nav-item">
|
||
<a class="nav-link quick-link-pill {% if current_path == url_for('my_borrowed_items') %}nav-active{% endif %}" href="{{ url_for('my_borrowed_items') }}" data-tutorial-tip="Hier sehen Sie Ihre bibliotheksbezogenen Ausleihen.">Meine Medien</a>
|
||
</li>
|
||
{% endif %}
|
||
{% if current_permissions.pages.get('tutorial_page', True) %}
|
||
<li class="nav-item">
|
||
<a class="nav-link quick-link-pill {% if current_path == url_for('tutorial_page') %}nav-active{% endif %}" href="{{ url_for('tutorial_page') }}" data-tutorial-tip="Nutzen Sie das Tutorial, um die Bibliotheksfunktionen kennenzulernen.">Tutorial</a>
|
||
</li>
|
||
{% endif %}
|
||
{% endif %}
|
||
{% if 'username' in session and current_permissions.actions.get('can_insert', True) and current_permissions.pages.get('library_admin', True) %}
|
||
<li class="nav-item">
|
||
<a class="nav-link nav-priority-link {% if current_path == url_for('library_admin') %}nav-active{% endif %}" href="{{ url_for('library_admin') }}" data-tutorial-tip="Neue Bibliotheksmedien können hier aufgenommen werden.">📖 Hochladen</a>
|
||
</li>
|
||
{% endif %}
|
||
<li class="nav-item" data-nav-fixed="true">
|
||
<button id="themeToggleBtn" class="btn btn-link nav-link px-3" aria-label="Dark Mode umschalten" title="Theme umschalten">
|
||
<span class="theme-icon-light" style="display: none;">☀️</span>
|
||
<span class="theme-icon-dark" style="display: none;">🌙</span>
|
||
</button>
|
||
</li>
|
||
|
||
<li class="nav-item dropdown ms-lg-auto">
|
||
<a class="nav-link dropdown-toggle" href="#" id="libMoreDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false" title="Weitere Optionen">
|
||
Mehr Optionen
|
||
</a>
|
||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="libMoreDropdown">
|
||
{% if 'username' in session and (session.get('admin', False) or is_admin) and current_permissions.actions.get('can_manage_settings', True) %}
|
||
<li><h6 class="dropdown-header">Bibliotheks-Verwaltung</h6></li>
|
||
{% if current_permissions.pages.get('library_loans_admin', True) %}
|
||
<li><a class="dropdown-item" href="{{ url_for('library_loans_admin') }}">Ausleihen</a></li>
|
||
{% endif %}
|
||
{% if current_permissions.pages.get('admin_damaged_items', True) %}
|
||
<li><a class="dropdown-item" href="{{ url_for('admin_damaged_items') }}">Defekte Items</a></li>
|
||
{% endif %}
|
||
{% if student_cards_module_enabled %}
|
||
<li><a class="dropdown-item" href="{{ url_for('student_cards_admin') }}">Bibliotheksausweis</a></li>
|
||
{% endif %}
|
||
<li><a class="dropdown-item" href="{{ url_for('admin_school_settings') }}">Schulstammdaten</a></li>
|
||
<li><hr class="dropdown-divider"></li>
|
||
{% if current_permissions.actions.get('can_manage_users', True) %}
|
||
<li><h6 class="dropdown-header">System</h6></li>
|
||
{% if current_permissions.pages.get('user_del', True) %}
|
||
<li><a class="dropdown-item" href="{{ url_for('user_del') }}">Benutzer verwalten</a></li>
|
||
{% endif %}
|
||
{% if current_permissions.pages.get('register', True) %}
|
||
<li><a class="dropdown-item" href="{{ url_for('register') }}">Neuer Benutzer</a></li>
|
||
{% endif %}
|
||
<li><hr class="dropdown-divider"></li>
|
||
{% endif %}
|
||
{% endif %}
|
||
<li><a class="dropdown-item" href="{{ url_for('impressum') }}">Impressum</a></li>
|
||
<li><a class="dropdown-item" href="{{ url_for('license') }}">Lizenz</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="nav-item d-none" id="lib-nav-overflow-anchor" aria-hidden="true"></li>
|
||
</ul>
|
||
<div class="d-flex">
|
||
{% if 'username' in session %}
|
||
<div class="function-search-wrap">
|
||
<form class="function-search-form" data-function-search="true">
|
||
<input
|
||
class="function-search-input"
|
||
type="search"
|
||
name="function_search"
|
||
placeholder="Funktion suchen..."
|
||
list="function-search-options"
|
||
autocomplete="off"
|
||
>
|
||
<button class="function-search-btn" type="submit">Los</button>
|
||
</form>
|
||
</div>
|
||
<span class="navbar-text text-light me-3">{{ session['username'] }}</span>
|
||
<div class="dropdown me-2 user-menu-wrap">
|
||
<button class="btn btn-secondary dropdown-toggle user-menu-btn" type="button" id="libUserMenuDropdown" data-bs-toggle="dropdown" aria-expanded="false" data-notification-button="true">
|
||
👤
|
||
<span class="user-notification-dot {% if unread_notification_count and unread_notification_count > 0 %}visible{% endif %}" aria-hidden="true"></span>
|
||
</button>
|
||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="libUserMenuDropdown">
|
||
{% if current_permissions.pages.get('notifications_view', True) %}
|
||
<li><a class="dropdown-item" href="{{ url_for('notifications_view') }}">Benachrichtigungen</a></li>
|
||
{% endif %}
|
||
<li><hr class="dropdown-divider"></li>
|
||
<li><a class="dropdown-item" href="{{ url_for('change_password') }}">Passwort ändern</a></li>
|
||
<li><hr class="dropdown-divider"></li>
|
||
<li><a class="dropdown-item" href="{{ url_for('logout') }}">Logout</a></li>
|
||
</ul>
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
{% endif %}
|
||
|
||
{% else %}
|
||
<nav class="navbar navbar-expand-lg navbar-dark" id="loginNavbar">
|
||
<div class="container-fluid">
|
||
<a class="navbar-brand py-0" href="{{ url_for('home') }}">
|
||
{% set school_logo_thumb = school_info.get('logo_thumb') if school_info else '' %}
|
||
{% set school_logo_path = school_info.get('logo_path') if school_info else '' %}
|
||
{% if school_logo_thumb or school_logo_path %}
|
||
{% if school_logo_thumb %}
|
||
<img src="{{ url_for('uploaded_file', filename=school_logo_thumb) }}" alt="{{ school_info.name or 'Schullogo' }}" class="invario-logo">
|
||
{% else %}
|
||
<img src="{{ url_for('uploaded_file', filename=school_logo_path) }}" alt="{{ school_info.name or 'Schullogo' }}" class="invario-logo">
|
||
{% endif %}
|
||
{% else %}
|
||
<img src="{{ url_for('static', filename='img/invario-logo.png') }}" alt="Invario" class="invario-logo">
|
||
{% endif %}
|
||
</a>
|
||
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="{{ url_for('impressum') }}">Impressum</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</nav>
|
||
{% endif %}
|
||
<div class="container">
|
||
{% with messages = get_flashed_messages(with_categories=true) %}
|
||
{% if messages %}
|
||
<div class="flashes">
|
||
{% for category, message in messages %}
|
||
<div class="flash {{ category }}">{{ message }}</div>
|
||
{% endfor %}
|
||
</div>
|
||
{% endif %}
|
||
{% endwith %}
|
||
{% block content %}{% endblock %}
|
||
</div>
|
||
<!-- Cookie consent banner -->
|
||
<style>
|
||
#cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; background: rgba(33,37,41,.98); color: #fff; padding: 14px 16px; display: none; z-index: 2000; box-shadow: 0 -2px 8px rgba(0,0,0,.25); }
|
||
#cookie-banner .cb-inner { max-width: 1100px; margin: 0 auto; display:flex; gap:12px; align-items:center; justify-content:space-between; }
|
||
#cookie-banner .cb-text { font-size: .95rem; line-height:1.35; margin-right: 12px; }
|
||
#cookie-banner .cb-actions { display:flex; gap:8px; flex-shrink:0; }
|
||
#cookie-banner .btn-accept { background:#28a745; border:2px solid #28a745; color:#fff; padding:6px 12px; border-radius:4px; cursor:pointer; }
|
||
#cookie-banner .btn-decline { background:transparent; border:2px solid #ffc107; color:#ffc107; padding:6px 12px; border-radius:4px; cursor:pointer; }
|
||
#cookie-banner .btn-accept:hover { background:#218838; border-color:#218838; }
|
||
#cookie-banner .btn-decline:hover { background:#ffc107; color:#212529; }
|
||
|
||
#onboarding-overlay {
|
||
position: fixed;
|
||
inset: 0;
|
||
background: rgba(15, 23, 42, 0.6);
|
||
display: none;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 2100;
|
||
padding: 16px;
|
||
}
|
||
|
||
#onboarding-modal {
|
||
width: min(680px, 100%);
|
||
background: var(--ui-surface);
|
||
border-radius: 14px;
|
||
border: 1px solid #dbe3ee;
|
||
box-shadow: 0 18px 35px rgba(15, 23, 42, 0.25);
|
||
padding: 20px;
|
||
}
|
||
|
||
#onboarding-modal h3 {
|
||
margin: 0 0 8px;
|
||
color: #0f172a;
|
||
font-size: 1.2rem;
|
||
font-weight: 800;
|
||
}
|
||
|
||
#onboarding-modal p {
|
||
margin: 0;
|
||
color: #334155;
|
||
line-height: 1.45;
|
||
}
|
||
|
||
.onboarding-actions {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
margin-top: 14px;
|
||
}
|
||
|
||
.onboarding-actions .btn {
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.dynamic-overflow-control .dropdown-menu {
|
||
min-width: 240px;
|
||
max-width: min(420px, 85vw);
|
||
max-height: 70vh;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.dynamic-overflow-control .dropdown-header {
|
||
font-weight: 800;
|
||
color: var(--module-accent-color);
|
||
font-size: 0.78rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
}
|
||
|
||
.notif-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-width: 20px;
|
||
height: 20px;
|
||
border-radius: 999px;
|
||
background: #dc2626;
|
||
color: #fff;
|
||
font-size: 0.72rem;
|
||
font-weight: 800;
|
||
padding: 0 6px;
|
||
margin-left: 8px;
|
||
line-height: 1;
|
||
}
|
||
|
||
.user-menu-wrap {
|
||
position: relative;
|
||
}
|
||
|
||
.user-menu-btn {
|
||
position: relative;
|
||
}
|
||
|
||
.user-notification-dot {
|
||
position: absolute;
|
||
top: 6px;
|
||
right: 10px;
|
||
width: 10px;
|
||
height: 10px;
|
||
border-radius: 50%;
|
||
background: #dc2626;
|
||
border: 2px solid #ffffff;
|
||
box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.35);
|
||
display: none;
|
||
}
|
||
|
||
.user-notification-dot.visible {
|
||
display: block;
|
||
}
|
||
|
||
.notification-toast {
|
||
position: fixed;
|
||
right: 16px;
|
||
bottom: 18px;
|
||
z-index: 2300;
|
||
max-width: 360px;
|
||
background: #0f172a;
|
||
color: #fff;
|
||
border-radius: 10px;
|
||
border: 1px solid rgba(148, 163, 184, 0.35);
|
||
box-shadow: 0 18px 35px rgba(2, 6, 23, 0.4);
|
||
padding: 12px 14px;
|
||
font-size: 0.9rem;
|
||
line-height: 1.35;
|
||
display: none;
|
||
}
|
||
|
||
.notification-toast strong {
|
||
display: block;
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
.notification-toast.show {
|
||
display: block;
|
||
}
|
||
</style>
|
||
<div id="cookie-banner" role="dialog" aria-live="polite" aria-label="Cookie-Hinweis">
|
||
<div class="cb-inner">
|
||
<div class="cb-text">
|
||
Wir verwenden technisch notwendige Cookies, um Ihre Sitzung zu verwalten und die Anwendung bereitzustellen. Bitte akzeptieren Sie Cookies, um fortzufahren.
|
||
</div>
|
||
<div class="cb-actions">
|
||
<button class="btn-decline" id="cookie-decline">Ablehnen</button>
|
||
<button class="btn-accept" id="cookie-accept">Akzeptieren</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="onboarding-overlay" role="dialog" aria-modal="true" aria-label="Tutorial Vorschlag">
|
||
<div id="onboarding-modal">
|
||
<h3>Wollen Sie eine Vorstellung des Produkts?</h3>
|
||
<p>
|
||
Wir empfehlen ein kurzes Tutorial (2-5 Minuten), damit Sie die Kernfunktionen anhand einer vorgefertigten Seite kennenlernen und gut auf den Schulalltagsbetrieb vorbereitet sind.
|
||
</p>
|
||
<div class="onboarding-actions">
|
||
<button type="button" class="btn btn-primary btn-sm" id="onboarding-start">Ja, Tutorial starten</button>
|
||
<button type="button" class="btn btn-outline-secondary btn-sm" id="onboarding-later">Später erinnern</button>
|
||
<button type="button" class="btn btn-outline-dark btn-sm" id="onboarding-dismiss">Nicht mehr anzeigen</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="notification-toast" class="notification-toast" role="status" aria-live="polite">
|
||
<strong id="notification-toast-title">Neue Benachrichtigung</strong>
|
||
<span id="notification-toast-message"></span>
|
||
</div>
|
||
|
||
<datalist id="function-search-options">
|
||
<option value="Artikel"></option>
|
||
<option value="Meine Ausleihen"></option>
|
||
<option value="Benachrichtigungen"></option>
|
||
<option value="Tutorial"></option>
|
||
<option value="Impressum"></option>
|
||
<option value="Lizenz"></option>
|
||
{% if library_module_enabled %}
|
||
<option value="Bibliothek"></option>
|
||
<option value="Meine Medien"></option>
|
||
{% endif %}
|
||
{% if 'username' in session and (session.get('admin', False) or is_admin) %}
|
||
<option value="Hochladen"></option>
|
||
<option value="Ausleihen Verwaltung"></option>
|
||
<option value="Defekte Items"></option>
|
||
<option value="Filter verwalten"></option>
|
||
<option value="Orte verwalten"></option>
|
||
<option value="Schulstammdaten"></option>
|
||
<option value="Audit Dashboard"></option>
|
||
<option value="Logs"></option>
|
||
<option value="Benutzer verwalten"></option>
|
||
<option value="Neuer Benutzer"></option>
|
||
{% if student_cards_module_enabled %}
|
||
<option value="Bibliotheksausweis"></option>
|
||
{% endif %}
|
||
{% endif %}
|
||
</datalist>
|
||
|
||
<script>
|
||
(function(){
|
||
function getCookie(name){
|
||
const v = document.cookie.split(';').map(s=>s.trim());
|
||
for(const c of v){ if(c.startsWith(name+'=')) return decodeURIComponent(c.split('=')[1]); }
|
||
return null;
|
||
}
|
||
function setCookie(name, value, days){
|
||
const d = new Date(); d.setTime(d.getTime() + (days*24*60*60*1000));
|
||
document.cookie = name + '=' + encodeURIComponent(value) + ';expires=' + d.toUTCString() + ';path=/;SameSite=Lax';
|
||
}
|
||
function showBanner(){ var el = document.getElementById('cookie-banner'); if(el) el.style.display = 'block'; }
|
||
function hideBanner(){ var el = document.getElementById('cookie-banner'); if(el) el.style.display = 'none'; }
|
||
|
||
// If not decided yet, show banner and block app until decision
|
||
const consent = getCookie('cookie_consent');
|
||
if(!consent){
|
||
showBanner();
|
||
// Optionally blur content until consent
|
||
document.body.style.filter = 'none';
|
||
}
|
||
document.getElementById('cookie-accept')?.addEventListener('click', function(){
|
||
setCookie('cookie_consent','accepted',365);
|
||
hideBanner();
|
||
});
|
||
document.getElementById('cookie-decline')?.addEventListener('click', function(){
|
||
setCookie('cookie_consent','declined',365);
|
||
window.location.href = 'https://www.ecosia.org/';
|
||
});
|
||
|
||
const username = {{ (session['username'] if 'username' in session else '')|tojson }};
|
||
const isTutorialPage = window.location.pathname === {{ url_for('tutorial_page')|tojson }};
|
||
const isLoginPage = window.location.pathname === {{ url_for('login')|tojson }};
|
||
const notificationsPagePath = {{ url_for('notifications_view')|tojson }};
|
||
const onboardingKey = username ? ('inventarsystem_tutorial_prompt_v1_' + username) : null;
|
||
const onboardingOverlay = document.getElementById('onboarding-overlay');
|
||
const notificationButtons = Array.from(document.querySelectorAll('[data-notification-button="true"]'));
|
||
const notificationToast = document.getElementById('notification-toast');
|
||
const notificationToastTitle = document.getElementById('notification-toast-title');
|
||
const notificationToastMessage = document.getElementById('notification-toast-message');
|
||
let lastUnreadCount = Number({{ unread_notification_count|default(0)|int }});
|
||
const loginHintKey = username ? ('inventarsystem_notification_login_hint_v1_' + username) : null;
|
||
|
||
const functionSearchEntries = [
|
||
{ label: 'Artikel', keywords: ['artikel', 'inventar', 'home'], url: {{ url_for('home')|tojson }} },
|
||
{ label: 'Meine Ausleihen', keywords: ['meine ausleihen', 'ausleihen', 'borrowed'], url: {{ url_for('my_borrowed_items')|tojson }} },
|
||
{ label: 'Benachrichtigungen', keywords: ['benachrichtigungen', 'nachrichten', 'notifications'], url: {{ url_for('notifications_view')|tojson }} },
|
||
{ label: 'Tutorial', keywords: ['tutorial', 'hilfe', 'anleitung'], url: {{ url_for('tutorial_page')|tojson }} },
|
||
{ label: 'Impressum', keywords: ['impressum'], url: {{ url_for('impressum')|tojson }} },
|
||
{ label: 'Lizenz', keywords: ['lizenz', 'license'], url: {{ url_for('license')|tojson }} },
|
||
{% if library_module_enabled %}
|
||
{ label: 'Bibliothek', keywords: ['bibliothek', 'medien'], url: {{ url_for('library_view')|tojson }} },
|
||
{% endif %}
|
||
{% if 'username' in session and (session.get('admin', False) or is_admin) %}
|
||
{ label: 'Hochladen', keywords: ['hochladen', 'upload'], url: {{ url_for('upload_admin')|tojson }} },
|
||
{ label: 'Ausleihen Verwaltung', keywords: ['ausleihen verwaltung', 'admin borrowings'], url: {{ url_for('admin_borrowings')|tojson }} },
|
||
{ label: 'Defekte Items', keywords: ['defekte items', 'defekt', 'schaden'], url: {{ url_for('admin_damaged_items')|tojson }} },
|
||
{ label: 'Filter verwalten', keywords: ['filter verwalten', 'filter'], url: {{ url_for('manage_filters')|tojson }} },
|
||
{ label: 'Orte verwalten', keywords: ['orte verwalten', 'orte', 'location'], url: {{ url_for('manage_locations')|tojson }} },
|
||
{ label: 'Schulstammdaten', keywords: ['schule', 'settings', 'stammdaten', 'school settings'], url: {{ url_for('admin_school_settings')|tojson }} },
|
||
{ label: 'Audit Dashboard', keywords: ['audit', 'audit dashboard'], url: {{ url_for('admin_audit_dashboard')|tojson }} },
|
||
{ label: 'Logs', keywords: ['logs', 'protokoll'], url: {{ url_for('logs')|tojson }} },
|
||
{ label: 'Benutzer verwalten', keywords: ['benutzer verwalten', 'user'], url: {{ url_for('user_del')|tojson }} },
|
||
{ label: 'Neuer Benutzer', keywords: ['neuer benutzer', 'register'], url: {{ url_for('register')|tojson }} },
|
||
{% if library_module_enabled %}
|
||
{ label: 'Bibliotheks-Ausleihen', keywords: ['bibliotheks ausleihen', 'library loans'], url: {{ url_for('library_loans_admin')|tojson }} },
|
||
{% endif %}
|
||
{% if student_cards_module_enabled %}
|
||
{ label: 'Bibliotheksausweis', keywords: ['bibliotheksausweis', 'student card'], url: {{ url_for('student_cards_admin')|tojson }} },
|
||
{% endif %}
|
||
{% endif %}
|
||
];
|
||
|
||
function normalizeSearchText(value) {
|
||
return String(value || '')
|
||
.toLowerCase()
|
||
.replace(/[ä]/g, 'ae')
|
||
.replace(/[ö]/g, 'oe')
|
||
.replace(/[ü]/g, 'ue')
|
||
.replace(/[ß]/g, 'ss')
|
||
.trim();
|
||
}
|
||
|
||
function findFunctionRoute(rawValue) {
|
||
const input = normalizeSearchText(rawValue);
|
||
if (!input) {
|
||
return null;
|
||
}
|
||
|
||
let exact = null;
|
||
for (const entry of functionSearchEntries) {
|
||
const candidates = [entry.label].concat(entry.keywords || []);
|
||
for (const candidate of candidates) {
|
||
if (normalizeSearchText(candidate) === input) {
|
||
exact = entry;
|
||
break;
|
||
}
|
||
}
|
||
if (exact) {
|
||
break;
|
||
}
|
||
}
|
||
if (exact) {
|
||
return exact.url;
|
||
}
|
||
|
||
for (const entry of functionSearchEntries) {
|
||
const candidates = [entry.label].concat(entry.keywords || []);
|
||
for (const candidate of candidates) {
|
||
if (normalizeSearchText(candidate).includes(input) || input.includes(normalizeSearchText(candidate))) {
|
||
return entry.url;
|
||
}
|
||
}
|
||
}
|
||
|
||
return null;
|
||
}
|
||
|
||
function bindFunctionSearchForms() {
|
||
const forms = document.querySelectorAll('form[data-function-search="true"]');
|
||
forms.forEach(function(form) {
|
||
form.addEventListener('submit', function(event) {
|
||
event.preventDefault();
|
||
const input = form.querySelector('input[name="function_search"]');
|
||
const targetUrl = findFunctionRoute(input ? input.value : '');
|
||
if (targetUrl) {
|
||
window.location.href = targetUrl;
|
||
return;
|
||
}
|
||
showInAppNotification('Keine Funktion gefunden', 'Bitte Suche verfeinern, z.B. "Defekte Items" oder "Benachrichtigungen".');
|
||
});
|
||
});
|
||
}
|
||
|
||
bindFunctionSearchForms();
|
||
|
||
function maybeShowLoginNotificationHint() {
|
||
if (!username || !loginHintKey) {
|
||
return;
|
||
}
|
||
if (window.location.pathname === notificationsPagePath) {
|
||
return;
|
||
}
|
||
|
||
const alreadyShown = sessionStorage.getItem(loginHintKey);
|
||
if (alreadyShown) {
|
||
return;
|
||
}
|
||
|
||
if (lastUnreadCount > 0) {
|
||
const hintTitle = 'Neue Benachrichtigungen';
|
||
const hintMessage =
|
||
lastUnreadCount === 1
|
||
? 'Sie haben 1 neue Benachrichtigung. Im Nutzer-Menue finden Sie den Eintrag Benachrichtigungen.'
|
||
: 'Sie haben ' + lastUnreadCount + ' neue Benachrichtigungen. Im Nutzer-Menue finden Sie den Eintrag Benachrichtigungen.';
|
||
showInAppNotification(hintTitle, hintMessage);
|
||
}
|
||
|
||
sessionStorage.setItem(loginHintKey, 'shown');
|
||
}
|
||
|
||
maybeShowLoginNotificationHint();
|
||
|
||
function updateNotificationDots(unreadCount) {
|
||
const hasUnread = Number(unreadCount) > 0;
|
||
notificationButtons.forEach(function(btn) {
|
||
const dot = btn.querySelector('.user-notification-dot');
|
||
if (!dot) {
|
||
return;
|
||
}
|
||
if (hasUnread) {
|
||
dot.classList.add('visible');
|
||
} else {
|
||
dot.classList.remove('visible');
|
||
}
|
||
});
|
||
}
|
||
|
||
function showInAppNotification(title, message) {
|
||
if (!notificationToast || !notificationToastTitle || !notificationToastMessage) {
|
||
return;
|
||
}
|
||
notificationToastTitle.textContent = title || 'Neue Benachrichtigung';
|
||
notificationToastMessage.textContent = message || '';
|
||
notificationToast.classList.add('show');
|
||
window.setTimeout(function() {
|
||
notificationToast.classList.remove('show');
|
||
}, 5000);
|
||
}
|
||
|
||
function showBrowserNotification(title, message) {
|
||
if (!('Notification' in window)) {
|
||
showInAppNotification(title, message);
|
||
return;
|
||
}
|
||
if (Notification.permission === 'granted') {
|
||
new Notification(title || 'Neue Benachrichtigung', {
|
||
body: message || '',
|
||
});
|
||
return;
|
||
}
|
||
if (Notification.permission === 'default') {
|
||
Notification.requestPermission().then(function(permission) {
|
||
if (permission === 'granted') {
|
||
new Notification(title || 'Neue Benachrichtigung', {
|
||
body: message || '',
|
||
});
|
||
} else {
|
||
showInAppNotification(title, message);
|
||
}
|
||
}).catch(function() {
|
||
showInAppNotification(title, message);
|
||
});
|
||
return;
|
||
}
|
||
showInAppNotification(title, message);
|
||
}
|
||
|
||
function pollNotificationStatus() {
|
||
if (!username) {
|
||
return;
|
||
}
|
||
|
||
fetch('/notifications/unread_status', {
|
||
method: 'GET',
|
||
headers: {
|
||
'Accept': 'application/json'
|
||
}
|
||
})
|
||
.then(function(response) {
|
||
if (!response.ok) {
|
||
throw new Error('status request failed');
|
||
}
|
||
return response.json();
|
||
})
|
||
.then(function(data) {
|
||
if (!data || !data.ok) {
|
||
return;
|
||
}
|
||
|
||
const unreadCount = Number(data.unread_count || 0);
|
||
updateNotificationDots(unreadCount);
|
||
|
||
if (unreadCount > lastUnreadCount && window.location.pathname !== notificationsPagePath) {
|
||
const latest = data.latest_unread || {};
|
||
showBrowserNotification(latest.title || 'Neue Nachricht', latest.message || 'Es gibt neue Benachrichtigungen.');
|
||
}
|
||
|
||
lastUnreadCount = unreadCount;
|
||
})
|
||
.catch(function() {
|
||
// Silent fail; polling retries automatically.
|
||
});
|
||
}
|
||
|
||
updateNotificationDots(lastUnreadCount);
|
||
if (username) {
|
||
window.setInterval(pollNotificationStatus, 30000);
|
||
}
|
||
|
||
function showOnboarding(){
|
||
if (onboardingOverlay) {
|
||
onboardingOverlay.style.display = 'flex';
|
||
}
|
||
}
|
||
|
||
function hideOnboarding(){
|
||
if (onboardingOverlay) {
|
||
onboardingOverlay.style.display = 'none';
|
||
}
|
||
}
|
||
|
||
if (onboardingKey && !isTutorialPage && !isLoginPage) {
|
||
const decision = localStorage.getItem(onboardingKey);
|
||
if (!decision || decision === 'later') {
|
||
showOnboarding();
|
||
}
|
||
}
|
||
|
||
document.getElementById('onboarding-start')?.addEventListener('click', function(){
|
||
if (onboardingKey) {
|
||
localStorage.setItem(onboardingKey, 'started');
|
||
}
|
||
window.location.href = {{ url_for('tutorial_page')|tojson }};
|
||
});
|
||
|
||
document.getElementById('onboarding-later')?.addEventListener('click', function(){
|
||
if (onboardingKey) {
|
||
localStorage.setItem(onboardingKey, 'later');
|
||
}
|
||
hideOnboarding();
|
||
});
|
||
|
||
document.getElementById('onboarding-dismiss')?.addEventListener('click', function(){
|
||
if (onboardingKey) {
|
||
localStorage.setItem(onboardingKey, 'dismissed');
|
||
}
|
||
hideOnboarding();
|
||
});
|
||
|
||
const navList = document.getElementById('inventoryNavList');
|
||
const navOverflowAnchor = document.getElementById('inv-nav-overflow-anchor');
|
||
const libraryNavList = document.getElementById('libraryNavList');
|
||
const libNavOverflowAnchor = document.getElementById('lib-nav-overflow-anchor');
|
||
|
||
function initNavbarOverflow(navList, navOverflowAnchor, options) {
|
||
if (!navList) return;
|
||
|
||
const moreToggleId = options && options.moreToggleId ? options.moreToggleId : '';
|
||
const moreToggle = moreToggleId ? document.getElementById(moreToggleId) : null;
|
||
const moreControlItem = moreToggle ? moreToggle.closest('li.nav-item.dropdown') : null;
|
||
const moreMenu = moreControlItem ? moreControlItem.querySelector(':scope > ul.dropdown-menu') : null;
|
||
const moreLabelDefault = moreToggle ? moreToggle.textContent.trim() : 'Mehr Optionen';
|
||
const moreMenuOriginal = moreMenu ? moreMenu.innerHTML : '';
|
||
|
||
const navRoot = navList.closest('nav.navbar');
|
||
const navCollapse = navList.closest('.navbar-collapse');
|
||
const navContainer = navList.closest('.container-fluid') || navList.parentElement;
|
||
|
||
function applyCompactMode() {
|
||
if (!navRoot || !navContainer) return;
|
||
const width = navContainer.clientWidth || window.innerWidth;
|
||
navRoot.classList.remove('nav-compact', 'nav-ultra-compact');
|
||
|
||
if (window.innerWidth < 992) {
|
||
return;
|
||
}
|
||
|
||
if (width < 1220) {
|
||
navRoot.classList.add('nav-compact');
|
||
}
|
||
if (width < 1080) {
|
||
navRoot.classList.add('nav-ultra-compact');
|
||
}
|
||
}
|
||
|
||
function collectTopLevelNavSources() {
|
||
if (!navList) return [];
|
||
return Array.from(navList.children).filter(function(li){
|
||
if (!(li instanceof HTMLElement)) return false;
|
||
if (!li.classList.contains('nav-item')) return false;
|
||
if (navOverflowAnchor && li.id === navOverflowAnchor.id) return false;
|
||
if (li.dataset.overflowControl === 'true') return false;
|
||
if (li.dataset.navFixed === 'true') return false;
|
||
if (moreControlItem && li === moreControlItem) return false;
|
||
return li.style.display !== 'none';
|
||
});
|
||
}
|
||
|
||
function clearOverflowControls() {
|
||
if (!moreMenu) return;
|
||
moreMenu.innerHTML = moreMenuOriginal;
|
||
if (moreControlItem) {
|
||
moreControlItem.style.display = '';
|
||
}
|
||
if (moreToggle) {
|
||
moreToggle.textContent = moreLabelDefault;
|
||
}
|
||
}
|
||
|
||
function restoreAllNavItems() {
|
||
if (!navList) return;
|
||
navList.querySelectorAll('li.nav-item').forEach(function(li){
|
||
if (navOverflowAnchor && li.id === navOverflowAnchor.id) return;
|
||
if (li.dataset.overflowControl === 'true') return;
|
||
li.style.display = '';
|
||
});
|
||
clearOverflowControls();
|
||
}
|
||
|
||
function getNavCandidatePriority(item) {
|
||
if (!(item instanceof HTMLElement)) {
|
||
return -1;
|
||
}
|
||
|
||
const topLink = item.querySelector(':scope > a.nav-link');
|
||
if (!topLink) {
|
||
return 10;
|
||
}
|
||
|
||
if (topLink.classList.contains('nav-active')) {
|
||
return 1000;
|
||
}
|
||
|
||
if (topLink.classList.contains('nav-priority-link')) {
|
||
return 900;
|
||
}
|
||
|
||
if (topLink.classList.contains('quick-link-pill')) {
|
||
return 700;
|
||
}
|
||
|
||
if (item.classList.contains('dropdown')) {
|
||
return 300;
|
||
}
|
||
|
||
return 500;
|
||
}
|
||
|
||
function pickNextNavItemToHide(candidates) {
|
||
if (!Array.isArray(candidates) || candidates.length === 0) {
|
||
return null;
|
||
}
|
||
|
||
let selected = candidates[0];
|
||
let selectedIndex = 0;
|
||
let selectedPriority = getNavCandidatePriority(selected);
|
||
|
||
for (let i = 1; i < candidates.length; i += 1) {
|
||
const candidate = candidates[i];
|
||
const candidatePriority = getNavCandidatePriority(candidate);
|
||
if (candidatePriority < selectedPriority || (candidatePriority === selectedPriority && i > selectedIndex)) {
|
||
selected = candidate;
|
||
selectedIndex = i;
|
||
selectedPriority = candidatePriority;
|
||
}
|
||
}
|
||
|
||
return selected;
|
||
}
|
||
|
||
function appendSourceToOverflowMenu(sourceItem, menu) {
|
||
const topLink = sourceItem.querySelector(':scope > a.nav-link');
|
||
if (!topLink) return;
|
||
|
||
const childMenu = sourceItem.querySelector(':scope > ul.dropdown-menu');
|
||
const sourceLabel = topLink.textContent.trim();
|
||
|
||
if (!childMenu) {
|
||
const entry = document.createElement('li');
|
||
entry.innerHTML = '<a class="dropdown-item" href="' + topLink.getAttribute('href') + '">' + sourceLabel + '</a>';
|
||
menu.appendChild(entry);
|
||
return;
|
||
}
|
||
|
||
const header = document.createElement('li');
|
||
header.innerHTML = '<h6 class="dropdown-header">' + sourceLabel + '</h6>';
|
||
menu.appendChild(header);
|
||
|
||
childMenu.querySelectorAll(':scope > li > a.dropdown-item').forEach(function(subLink){
|
||
const subEntry = document.createElement('li');
|
||
subEntry.innerHTML = '<a class="dropdown-item" style="padding-left: 2.5rem;" href="' + subLink.getAttribute('href') + '">' + subLink.textContent.trim() + '</a>';
|
||
menu.appendChild(subEntry);
|
||
});
|
||
|
||
const divider = document.createElement('li');
|
||
divider.innerHTML = '<hr class="dropdown-divider">';
|
||
menu.appendChild(divider);
|
||
}
|
||
|
||
function rebuildOverflowControl(hiddenSources) {
|
||
clearOverflowControls();
|
||
if (!moreMenu || hiddenSources.length === 0) return;
|
||
|
||
const overflowFragment = document.createDocumentFragment();
|
||
hiddenSources.forEach(function(source){
|
||
appendSourceToOverflowMenu(source, overflowFragment);
|
||
});
|
||
|
||
const overflowWrap = document.createElement('div');
|
||
overflowWrap.appendChild(overflowFragment);
|
||
const trailingDivider = overflowWrap.querySelector('li:last-child .dropdown-divider');
|
||
if (trailingDivider && trailingDivider.parentElement) {
|
||
trailingDivider.parentElement.remove();
|
||
}
|
||
|
||
const overflowEntries = Array.from(overflowWrap.childNodes);
|
||
if (overflowEntries.length > 0) {
|
||
const marker = document.createElement('li');
|
||
marker.innerHTML = '<h6 class="dropdown-header">Ausgeblendete Navigation</h6>';
|
||
const firstExistingNode = moreMenu.firstChild;
|
||
moreMenu.insertBefore(marker, firstExistingNode);
|
||
|
||
let insertAfter = marker;
|
||
overflowEntries.forEach(function(node){
|
||
moreMenu.insertBefore(node, insertAfter.nextSibling);
|
||
insertAfter = node;
|
||
});
|
||
|
||
const divider = document.createElement('li');
|
||
divider.innerHTML = '<hr class="dropdown-divider">';
|
||
moreMenu.insertBefore(divider, insertAfter.nextSibling);
|
||
|
||
if (moreToggle) {
|
||
moreToggle.textContent = moreLabelDefault + ' (' + hiddenSources.length + ')';
|
||
}
|
||
}
|
||
|
||
if (moreControlItem) {
|
||
moreControlItem.style.display = '';
|
||
}
|
||
}
|
||
|
||
function adaptNavbarByWidth() {
|
||
if (!navList) return;
|
||
|
||
const isMobileViewport = window.matchMedia('(max-width: 991.98px)').matches;
|
||
|
||
function isNavOverflowing(bufferPx) {
|
||
const buffer = typeof bufferPx === 'number' ? bufferPx : 0;
|
||
const collapseOverflow = navCollapse ? (navCollapse.scrollWidth > (navCollapse.clientWidth - buffer)) : false;
|
||
const containerOverflow = navContainer ? (navContainer.scrollWidth > (navContainer.clientWidth - buffer)) : false;
|
||
const listOverflow = navList.scrollWidth > (navList.clientWidth - buffer);
|
||
return collapseOverflow || containerOverflow || listOverflow;
|
||
}
|
||
|
||
applyCompactMode();
|
||
|
||
// Desktop/tablet-large: keep complete navigation visible.
|
||
if (!isMobileViewport) {
|
||
restoreAllNavItems();
|
||
return;
|
||
}
|
||
|
||
// Mobile menu is collapsed: avoid hiding links preemptively.
|
||
if (navCollapse && !navCollapse.classList.contains('show')) {
|
||
restoreAllNavItems();
|
||
return;
|
||
}
|
||
|
||
restoreAllNavItems();
|
||
|
||
const hiddenSources = [];
|
||
let candidates = collectTopLevelNavSources();
|
||
const overflowBuffer = 12;
|
||
|
||
while (isNavOverflowing(overflowBuffer) && candidates.length > 0) {
|
||
const toHide = pickNextNavItemToHide(candidates);
|
||
if (!toHide) {
|
||
break;
|
||
}
|
||
toHide.style.display = 'none';
|
||
hiddenSources.unshift(toHide);
|
||
candidates = collectTopLevelNavSources();
|
||
}
|
||
|
||
rebuildOverflowControl(hiddenSources);
|
||
|
||
// One final pass in case the overflow menu label/count itself changed row width.
|
||
candidates = collectTopLevelNavSources();
|
||
while (isNavOverflowing(overflowBuffer) && candidates.length > 0) {
|
||
const toHide = pickNextNavItemToHide(candidates);
|
||
if (!toHide) {
|
||
break;
|
||
}
|
||
toHide.style.display = 'none';
|
||
hiddenSources.unshift(toHide);
|
||
rebuildOverflowControl(hiddenSources);
|
||
candidates = collectTopLevelNavSources();
|
||
}
|
||
}
|
||
|
||
let resizeTimer = null;
|
||
function debounceAdapt() {
|
||
if (resizeTimer) {
|
||
window.clearTimeout(resizeTimer);
|
||
}
|
||
resizeTimer = window.setTimeout(adaptNavbarByWidth, 120);
|
||
}
|
||
|
||
adaptNavbarByWidth();
|
||
window.addEventListener('resize', debounceAdapt);
|
||
|
||
if (navCollapse) {
|
||
navCollapse.addEventListener('shown.bs.collapse', debounceAdapt);
|
||
navCollapse.addEventListener('hidden.bs.collapse', debounceAdapt);
|
||
}
|
||
|
||
if ('ResizeObserver' in window && navContainer) {
|
||
const resizeObserver = new ResizeObserver(function() {
|
||
debounceAdapt();
|
||
});
|
||
resizeObserver.observe(navContainer);
|
||
}
|
||
}
|
||
|
||
// Initialize overflow control for inventory navbar
|
||
if (navList && navOverflowAnchor) {
|
||
initNavbarOverflow(navList, navOverflowAnchor, { moreToggleId: 'invMoreDropdown' });
|
||
}
|
||
|
||
// Initialize overflow control for library navbar
|
||
if (libraryNavList && libNavOverflowAnchor) {
|
||
initNavbarOverflow(libraryNavList, libNavOverflowAnchor, { moreToggleId: 'libMoreDropdown' });
|
||
}
|
||
})();
|
||
</script>
|
||
<!-- Mobile compatibility scripts -->
|
||
<script src="{{ url_for('static', filename='js/mobile_compatibility.js') }}"></script>
|
||
<script src="{{ url_for('static', filename='js/ios_fixes.js') }}"></script>
|
||
|
||
<!-- Push Notifications Script -->
|
||
<script src="{{ url_for('static', filename='js/push-notifications.js') }}"></script>
|
||
|
||
<!-- Theme Toggle Script -->
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
const toggleBtns = document.querySelectorAll('#themeToggleBtn');
|
||
if (toggleBtns.length === 0) return;
|
||
|
||
function updateIcons(theme) {
|
||
const isDark = theme === 'dark';
|
||
document.querySelectorAll('.theme-icon-light').forEach(icon => icon.style.display = isDark ? 'inline' : 'none');
|
||
document.querySelectorAll('.theme-icon-dark').forEach(icon => icon.style.display = isDark ? 'none' : 'inline');
|
||
}
|
||
|
||
// Get current setup from initial script in head
|
||
let currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
|
||
updateIcons(currentTheme);
|
||
|
||
toggleBtns.forEach(btn => {
|
||
btn.addEventListener('click', (e) => {
|
||
e.preventDefault();
|
||
currentTheme = currentTheme === 'light' ? 'dark' : 'light';
|
||
|
||
document.documentElement.setAttribute('data-theme', currentTheme);
|
||
localStorage.setItem('inventarsystem-theme', currentTheme);
|
||
document.getElementById('meta-theme-color').setAttribute('content', currentTheme === 'dark' ? '#1a252f' : '#2c3e50');
|
||
|
||
updateIcons(currentTheme);
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
<script>
|
||
(function () {
|
||
const username = {{ (session['username'] if 'username' in session else '')|tojson }};
|
||
const tooltipModeKey = username ? ('inventarsystem_tutorial_tooltips_enabled_' + username) : 'inventarsystem_tutorial_tooltips_enabled';
|
||
const enabled = localStorage.getItem(tooltipModeKey) === '1';
|
||
|
||
function applyTooltipMode(active) {
|
||
document.body.classList.toggle('tutorial-tooltips-active', active);
|
||
let indicator = document.getElementById('tutorialTooltipIndicator');
|
||
if (!indicator) {
|
||
indicator = document.createElement('div');
|
||
indicator.id = 'tutorialTooltipIndicator';
|
||
indicator.className = 'tutorial-tooltip-indicator';
|
||
indicator.textContent = 'Tutorial-Modus aktiv: Tooltips sind eingeschaltet';
|
||
document.body.appendChild(indicator);
|
||
}
|
||
indicator.style.display = active ? 'inline-flex' : 'none';
|
||
}
|
||
|
||
applyTooltipMode(enabled);
|
||
})();
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|