Admin Dashboard und Hilfeseite
This commit is contained in:
Erik Thiele
206
templates/admin_dashboard.html
Normal file
206
templates/admin_dashboard.html
Normal file
@@ -0,0 +1,206 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CANCOM Simple Signage – Admin Dashboard</title>
|
||||
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">
|
||||
<script>
|
||||
(() => {
|
||||
const stored = window.localStorage.getItem("signage-theme");
|
||||
const theme = stored === "dark" || stored === "light" ? stored : "light";
|
||||
document.documentElement.setAttribute("data-bs-theme", theme);
|
||||
})();
|
||||
</script>
|
||||
<link rel="stylesheet"
|
||||
href="https://unpkg.com/@tabler/core@1.0.0-beta20/dist/css/tabler.min.css">
|
||||
<link rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
|
||||
<script defer
|
||||
src="https://unpkg.com/@tabler/core@1.0.0-beta20/dist/js/tabler.min.js"></script>
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
|
||||
{% include "_styles.html" %}
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
|
||||
{% set brand_subtitle = "Admin Dashboard" %}
|
||||
{% set site_dropdown_url_prefix = "/admin/" %}
|
||||
{% include "_header.html" %}
|
||||
|
||||
<div class="navbar-expand-md">
|
||||
<div class="collapse navbar-collapse show">
|
||||
<div class="navbar navbar-dark nav-surface">
|
||||
<div class="container-xl">
|
||||
<div class="d-flex flex-wrap gap-2 py-2">
|
||||
<a class="btn btn-white" href="/admin/{{ current_site }}"><i class="ti ti-arrow-left me-1"></i>Zurück</a>
|
||||
<a class="btn btn-white active" href="/admin/dashboard"><i class="ti ti-dashboard me-1"></i>Admin Dashboard</a>
|
||||
<a class="btn btn-white" href="/admin/users"><i class="ti ti-users me-1"></i>Userverwaltung</a>
|
||||
<a class="btn btn-white" href="/admin/help"><i class="ti ti-help me-1"></i>Hilfe</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="page-wrapper">
|
||||
<div class="container-xl mt-4">
|
||||
|
||||
<div class="row g-3">
|
||||
<div class="col-6 col-lg">
|
||||
<div class="card card-sm">
|
||||
<div class="card-body p-3 pb-0">
|
||||
<div class="d-flex gap-3">
|
||||
<div class="text-secondary mt-1"><i class="ti ti-building-community" style="font-size:2.2rem;"></i></div>
|
||||
<div class="flex-grow-1">
|
||||
<div class="fs-1 fw-bold d-flex align-items-center gap-2">{{ site_count }}{% if site_trend > 0 %}<span class="text-green d-flex align-items-center gap-1" style="font-size:0.8rem;"><i class="ti ti-trending-up"></i>+{{ site_trend }}</span>{% elif site_trend < 0 %}<span class="text-red d-flex align-items-center gap-1" style="font-size:0.8rem;"><i class="ti ti-trending-down"></i>{{ site_trend }}</span>{% endif %}</div>
|
||||
<div class="text-secondary small">Standorte</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="spark-sites" class="mx-n3" style="height:36px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-lg">
|
||||
<div class="card card-sm">
|
||||
<div class="card-body p-3 pb-0">
|
||||
<div class="d-flex gap-3">
|
||||
<div class="text-secondary mt-1"><i class="ti ti-devices" style="font-size:2.2rem;"></i></div>
|
||||
<div class="flex-grow-1">
|
||||
<div class="fs-1 fw-bold d-flex align-items-center gap-2">{{ screen_count }}{% if screen_trend > 0 %}<span class="text-green d-flex align-items-center gap-1" style="font-size:0.8rem;"><i class="ti ti-trending-up"></i>+{{ screen_trend }}</span>{% elif screen_trend < 0 %}<span class="text-red d-flex align-items-center gap-1" style="font-size:0.8rem;"><i class="ti ti-trending-down"></i>{{ screen_trend }}</span>{% endif %}</div>
|
||||
<div class="text-secondary small">Screens</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="spark-screens" class="mx-n3" style="height:36px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-lg">
|
||||
<div class="card card-sm">
|
||||
<div class="card-body p-3 pb-0">
|
||||
<div class="d-flex gap-3">
|
||||
<div class="text-secondary mt-1"><i class="ti ti-users" style="font-size:2.2rem;"></i></div>
|
||||
<div class="flex-grow-1">
|
||||
<div class="fs-1 fw-bold d-flex align-items-center gap-2">{{ user_count }}{% if user_trend > 0 %}<span class="text-green d-flex align-items-center gap-1" style="font-size:0.8rem;"><i class="ti ti-trending-up"></i>+{{ user_trend }}</span>{% elif user_trend < 0 %}<span class="text-red d-flex align-items-center gap-1" style="font-size:0.8rem;"><i class="ti ti-trending-down"></i>{{ user_trend }}</span>{% endif %}</div>
|
||||
<div class="text-secondary small">User</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="spark-users" class="mx-n3" style="height:36px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-lg">
|
||||
<div class="card card-sm">
|
||||
<div class="card-body p-3 pb-0">
|
||||
<div class="d-flex gap-3">
|
||||
<div class="text-secondary mt-1"><i class="ti ti-shield" style="font-size:2.2rem;"></i></div>
|
||||
<div class="flex-grow-1">
|
||||
<div class="fs-1 fw-bold d-flex align-items-center gap-2">{{ admin_count }}{% if admin_trend > 0 %}<span class="text-green d-flex align-items-center gap-1" style="font-size:0.8rem;"><i class="ti ti-trending-up"></i>+{{ admin_trend }}</span>{% elif admin_trend < 0 %}<span class="text-red d-flex align-items-center gap-1" style="font-size:0.8rem;"><i class="ti ti-trending-down"></i>{{ admin_trend }}</span>{% endif %}</div>
|
||||
<div class="text-secondary small">Admins</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="spark-admins" class="mx-n3" style="height:36px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-lg">
|
||||
<div class="card card-sm">
|
||||
<div class="card-body p-3 pb-0">
|
||||
<div class="d-flex gap-3">
|
||||
<div class="text-secondary mt-1"><i class="ti ti-star" style="font-size:2.2rem;"></i></div>
|
||||
<div class="flex-grow-1">
|
||||
<div class="fs-1 fw-bold d-flex align-items-center gap-2">{{ superuser_count }}{% if superuser_trend > 0 %}<span class="text-green d-flex align-items-center gap-1" style="font-size:0.8rem;"><i class="ti ti-trending-up"></i>+{{ superuser_trend }}</span>{% elif superuser_trend < 0 %}<span class="text-red d-flex align-items-center gap-1" style="font-size:0.8rem;"><i class="ti ti-trending-down"></i>{{ superuser_trend }}</span>{% endif %}</div>
|
||||
<div class="text-secondary small">Superuser</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="spark-superusers" class="mx-n3" style="height:36px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card mt-4">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title"><i class="ti ti-history me-1"></i>Verlauf</h3>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div class="list-group list-group-flush">
|
||||
{% for entry in history %}
|
||||
<div class="list-group-item d-flex align-items-center gap-3 py-2">
|
||||
<span class="d-flex align-items-center">
|
||||
{% if entry.action == "site_created" %}
|
||||
<span class="avatar avatar-xs bg-green" data-bs-toggle="tooltip" title="Standort angelegt"><i class="ti ti-building-community text-white"></i></span>
|
||||
{% elif entry.action == "site_deleted" %}
|
||||
<span class="avatar avatar-xs bg-red" data-bs-toggle="tooltip" title="Standort gelöscht"><i class="ti ti-building-community text-white"></i></span>
|
||||
{% elif entry.action == "screen_created" %}
|
||||
<span class="avatar avatar-xs bg-green" data-bs-toggle="tooltip" title="Screen angelegt"><i class="ti ti-devices text-white"></i></span>
|
||||
{% elif entry.action == "screen_deleted" %}
|
||||
<span class="avatar avatar-xs bg-red" data-bs-toggle="tooltip" title="Screen gelöscht"><i class="ti ti-devices text-white"></i></span>
|
||||
{% elif entry.action == "user_created" %}
|
||||
<span class="avatar avatar-xs bg-green" data-bs-toggle="tooltip" title="User angelegt"><i class="ti ti-user-plus text-white"></i></span>
|
||||
{% elif entry.action == "user_deleted" %}
|
||||
<span class="avatar avatar-xs bg-red" data-bs-toggle="tooltip" title="User gelöscht"><i class="ti ti-user-minus text-white"></i></span>
|
||||
{% elif entry.action == "user_updated" %}
|
||||
<span class="avatar avatar-xs bg-blue" data-bs-toggle="tooltip" title="User bearbeitet"><i class="ti ti-user-edit text-white"></i></span>
|
||||
{% elif entry.action == "user_password_reset" %}
|
||||
<span class="avatar avatar-xs bg-warning" data-bs-toggle="tooltip" title="Passwort zurückgesetzt"><i class="ti ti-key text-white"></i></span>
|
||||
{% elif entry.action == "password_changed" %}
|
||||
<span class="avatar avatar-xs bg-purple" data-bs-toggle="tooltip" title="Passwort geändert"><i class="ti ti-key text-white"></i></span>
|
||||
{% elif entry.action == "background_uploaded" %}
|
||||
<span class="avatar avatar-xs bg-blue" data-bs-toggle="tooltip" title="Hintergrund hochgeladen"><i class="ti ti-photo text-white"></i></span>
|
||||
{% elif entry.action == "background_deleted" %}
|
||||
<span class="avatar avatar-xs bg-yellow" data-bs-toggle="tooltip" title="Hintergrund zurückgesetzt"><i class="ti ti-photo-off text-white"></i></span>
|
||||
{% elif entry.action == "customer_added" %}
|
||||
<span class="avatar avatar-xs bg-teal" data-bs-toggle="tooltip" title="Kunde hinzugefügt"><i class="ti ti-users text-white"></i></span>
|
||||
{% elif entry.action == "user_login" %}
|
||||
<span class="avatar avatar-xs bg-lime" data-bs-toggle="tooltip" title="Anmeldung"><i class="ti ti-login text-white"></i></span>
|
||||
{% elif entry.action == "user_logout" %}
|
||||
<span class="avatar avatar-xs bg-secondary" data-bs-toggle="tooltip" title="Abmeldung"><i class="ti ti-logout text-white"></i></span>
|
||||
{% else %}
|
||||
<span class="avatar avatar-xs bg-secondary" data-bs-toggle="tooltip" title="{{ entry.action }}"><i class="ti ti-info-circle text-white"></i></span>
|
||||
{% endif %}
|
||||
</span>
|
||||
<span class="text-secondary small text-nowrap" style="min-width:8.5rem;">{{ entry.timestamp }}</span>
|
||||
<span class="flex-grow-1">{{ entry.detail }}</span>
|
||||
<span class="text-secondary small text-nowrap">{{ entry.user }}</span>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="list-group-item text-center text-muted py-4">
|
||||
<i class="ti ti-inbox ti-lg d-block mb-1"></i>
|
||||
Noch keine Aktivitäten aufgezeichnet
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include "_footer.html" %}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
if (!window.ApexCharts) return;
|
||||
|
||||
function spark(id, data, color) {
|
||||
new ApexCharts(document.getElementById(id), {
|
||||
chart: { type: "area", height: 32, width: "100%", sparkline: { enabled: true }, animations: { enabled: false } },
|
||||
series: [{ data: data }],
|
||||
stroke: { width: 1.5, curve: "straight" },
|
||||
fill: { opacity: 0.25 },
|
||||
colors: [color],
|
||||
tooltip: { enabled: false }
|
||||
}).render();
|
||||
}
|
||||
|
||||
spark("spark-sites", {{ site_spark | tojson }}, "var(--ccm-primary, #da002d)");
|
||||
spark("spark-screens", {{ screen_spark | tojson }}, "var(--ccm-primary, #da002d)");
|
||||
spark("spark-users", {{ user_spark | tojson }}, "var(--ccm-primary, #da002d)");
|
||||
spark("spark-admins", {{ admin_spark | tojson }}, "var(--ccm-primary, #da002d)");
|
||||
spark("spark-superusers", {{ superuser_spark | tojson }}, "var(--ccm-primary, #da002d)");
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user