first commit

server/app/templates/connections/log.html

@@ -0,0 +1,64 @@
+{% extends "base.html" %}
+
+{% block title %}Verbindungen - mGuard VPN Manager{% endblock %}
+
+{% block content %}
+<div class="d-flex justify-content-between align-items-center mb-4">
+    <h1><i class="bi bi-plug"></i> Verbindungen</h1>
+    <div>
+        <span class="badge bg-success me-2" id="active-count"
+              hx-get="/htmx/connections/count" hx-trigger="load, every 30s">
+            ...
+        </span>
+        <button class="btn btn-outline-primary"
+                hx-get="/htmx/connections/list" hx-target="#connection-log" hx-swap="innerHTML">
+            <i class="bi bi-arrow-clockwise"></i> Aktualisieren
+        </button>
+    </div>
+</div>
+
+<!-- VPN Clients (Gateways) -->
+<div class="card mb-4">
+    <div class="card-header bg-primary text-white">
+        <h5 class="mb-0"><i class="bi bi-shield-check"></i> VPN-Clients (Gateways)</h5>
+    </div>
+    <div class="card-body" id="vpn-clients"
+         hx-get="/htmx/connections/vpn-clients" hx-trigger="load, every 10s" hx-swap="innerHTML">
+        <div class="text-center py-3">
+            <div class="spinner-border text-primary" role="status">
+                <span class="visually-hidden">Laden...</span>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Active User Sessions -->
+<div class="card mb-4">
+    <div class="card-header bg-success text-white">
+        <h5 class="mb-0"><i class="bi bi-broadcast"></i> Aktive Benutzer-Sessions</h5>
+    </div>
+    <div class="card-body" id="active-connections"
+         hx-get="/htmx/connections/active" hx-trigger="load, every 10s" hx-swap="innerHTML">
+        <div class="text-center py-3">
+            <div class="spinner-border text-success" role="status">
+                <span class="visually-hidden">Laden...</span>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Connection History -->
+<div class="card">
+    <div class="card-header">
+        <h5 class="mb-0"><i class="bi bi-clock-history"></i> Verbindungshistorie</h5>
+    </div>
+    <div class="card-body" id="connection-log"
+         hx-get="/htmx/connections/list" hx-trigger="load" hx-swap="innerHTML">
+        <div class="text-center py-4">
+            <div class="spinner-border text-primary" role="status">
+                <span class="visually-hidden">Laden...</span>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}