65 lines
2.3 KiB
HTML
65 lines
2.3 KiB
HTML
{% 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 %}
|