92 lines
4.9 KiB
HTML
92 lines
4.9 KiB
HTML
<!-- ═══════════════════════════════════════════════════
|
||
HEADER – Wird von admin.html, priority.html und customer.html eingebunden.
|
||
Zeigt CANCOM-Logo, Standort-Dropdown, Theme-Toggle und Logout.
|
||
Erwartet im Kontext: site_list, current_site, brand_subtitle, site_dropdown_url_prefix
|
||
═══════════════════════════════════════════════════ -->
|
||
<header class="navbar navbar-expand-md d-print-none brand-surface">
|
||
<div class="container-xl">
|
||
<!-- Logo + Titel -->
|
||
<div class="navbar-brand navbar-brand-autodark pe-0 pe-md-3">
|
||
<img class="navbar-brand-logo me-3" src="{{ url_for('static', filename='cancom.svg') }}" alt="CANCOM Logo">
|
||
<span class="navbar-brand-wordmark">
|
||
<strong>Simple Signage</strong>
|
||
<span>{{ brand_subtitle }}</span>
|
||
</span>
|
||
</div>
|
||
|
||
<!-- Aktionen: Standort-Dropdown, +Button, Theme, Logout -->
|
||
<div class="navbar-nav flex-row order-md-last top-actions">
|
||
<!-- Standort-Auswahl -->
|
||
{% if current_user.is_authenticated %}
|
||
<div class="dropdown me-2">
|
||
<a class="btn btn-outline-secondary" href="#" data-bs-toggle="dropdown">
|
||
<i class="ti ti-building me-1"></i>{{ current_site | capitalize }} <i class="ti ti-chevron-down"></i>
|
||
</a>
|
||
<div class="dropdown-menu">
|
||
{% for s in site_list %}
|
||
<a class="dropdown-item{% if s == current_site %} active{% endif %}"
|
||
href="{{ site_dropdown_url_prefix }}{{ s }}"><i class="ti ti-building me-1"></i>{{ s | capitalize }}</a>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Neuen Standort anlegen (+ Button) -->
|
||
<a class="btn btn-outline-secondary me-2" href="javascript:void(0)"
|
||
onclick="var n=prompt('Name des neuen Standorts:'); if(n&&n.trim()) location.href='/add-site?name='+encodeURIComponent(n.trim().toLowerCase());"
|
||
title="Neuen Standort anlegen"
|
||
style="display:inline-flex;align-items:center;justify-content:center;min-width:2.5rem;min-height:2.5rem;padding:0;"><i class="ti ti-plus"></i></a>
|
||
{% endif %}
|
||
|
||
<!-- Dark-Mode-Toggle (persistiert in localStorage("signage-theme")) -->
|
||
<div>
|
||
<button class="btn btn-outline-secondary theme-toggle" id="theme-toggle" title="Dark Mode umschalten">
|
||
<i class="ti ti-moon"></i>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- User-Dropdown (Passwort ändern, Userverwaltung, Abmelden) -->
|
||
{% if current_user.is_authenticated %}
|
||
<div class="dropdown ms-2">
|
||
<a class="btn btn-outline-secondary text-nowrap" href="#" data-bs-toggle="dropdown">
|
||
<i class="ti ti-user me-1"></i>{{ current_user.email }}{% if current_user.is_admin %}<span class="badge bg-red text-red-fg ms-2" style="font-size:0.6rem;">Admin</span>{% elif current_user.is_superuser %}<span class="badge bg-purple text-purple-fg ms-2" style="font-size:0.6rem;">Superuser</span>{% else %}<span class="badge bg-blue text-blue-fg ms-2" style="font-size:0.6rem;">User</span>{% endif %} <i class="ti ti-chevron-down"></i>
|
||
</a>
|
||
<div class="dropdown-menu dropdown-menu-end">
|
||
<a class="dropdown-item" href="/change-password"><i class="ti ti-key me-1"></i>Passwort ändern</a>
|
||
<a class="dropdown-item" href="/mfa/setup"><i class="ti ti-shield me-1"></i>MFA einrichten{% if current_user.mfa_enabled %} <span class="badge bg-green text-green-fg ms-1" style="font-size:0.6rem;">Aktiv</span>{% endif %}</a>
|
||
<a class="dropdown-item" href="/admin/help"><i class="ti ti-help me-1"></i>Hilfe</a>
|
||
{% if current_user.is_admin %}
|
||
<a class="dropdown-item" href="/admin/dashboard"><i class="ti ti-dashboard me-1"></i>Admin Dashboard</a>
|
||
<a class="dropdown-item" href="/admin/users"><i class="ti ti-users me-1"></i>Userverwaltung</a>
|
||
{% endif %}
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="/logout"><i class="ti ti-logout me-1"></i>Abmelden</a>
|
||
</div>
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<script>
|
||
document.addEventListener("DOMContentLoaded", function() {
|
||
const themeToggle = document.getElementById("theme-toggle");
|
||
const root = document.documentElement;
|
||
const syncThemeToggle = () => {
|
||
const theme = root.getAttribute("data-bs-theme") || "light";
|
||
if (!themeToggle) return;
|
||
themeToggle.innerHTML = theme === "dark"
|
||
? '<i class="ti ti-sun"></i>'
|
||
: '<i class="ti ti-moon"></i>';
|
||
};
|
||
if (themeToggle) {
|
||
syncThemeToggle();
|
||
themeToggle.addEventListener("click", () => {
|
||
const nextTheme = (root.getAttribute("data-bs-theme") || "light") === "dark" ? "light" : "dark";
|
||
root.setAttribute("data-bs-theme", nextTheme);
|
||
window.localStorage.setItem("signage-theme", nextTheme);
|
||
syncThemeToggle();
|
||
});
|
||
}
|
||
});
|
||
</script>
|