"feat: Added debug server and related components for improved development experience"
This commit is contained in:
444
backend/debug-server/templates/dashboard.html
Normal file
444
backend/debug-server/templates/dashboard.html
Normal file
@@ -0,0 +1,444 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>MYP Debug Dashboard</title>
|
||||
|
||||
<!-- CSS Stylesheets -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/debug-dashboard.css') }}">
|
||||
|
||||
<!-- JavaScript Libraries -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="message" class="message"></div>
|
||||
|
||||
<div class="page-header">
|
||||
<h1>MYP Debug Dashboard</h1>
|
||||
<div class="last-update">
|
||||
Letzte Aktualisierung: {{ last_check }}
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<button class="btn btn-refresh" onclick="refreshPage()"><i class="fas fa-sync-alt"></i> Aktualisieren</button>
|
||||
<button class="btn btn-health" onclick="checkHealth()"><i class="fas fa-heartbeat"></i> Systemstatus prüfen</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="system-health-banner" id="systemHealthBanner" style="display: none;">
|
||||
<div class="health-icon"><i class="fas fa-spinner fa-spin"></i></div>
|
||||
<div class="health-status">Systemstatus wird geprüft...</div>
|
||||
</div>
|
||||
|
||||
<div class="dashboard-container">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="fas fa-server"></i> Systemübersicht
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="stats-row">
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">CPU-Auslastung</div>
|
||||
<div class="stat-value" id="cpu-percent">-</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">RAM-Auslastung</div>
|
||||
<div class="stat-value" id="memory-percent">-</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Aktive Container</div>
|
||||
<div class="stat-value" id="active-containers">-</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chart-container">
|
||||
<canvas id="cpu-usage-chart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="fas fa-microchip"></i> Speichernutzung
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="chart-container">
|
||||
<canvas id="memory-usage-chart"></canvas>
|
||||
</div>
|
||||
|
||||
<div class="stats-row">
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Verwendet</div>
|
||||
<div class="stat-value" id="memory-used">-</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Verfügbar</div>
|
||||
<div class="stat-value" id="memory-available">-</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Gesamt</div>
|
||||
<div class="stat-value" id="memory-total">-</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dashboard-section">
|
||||
<h2><i class="fas fa-hdd"></i> Festplattennutzung</h2>
|
||||
|
||||
<div class="chart-container">
|
||||
<canvas id="disk-usage-chart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dashboard-section">
|
||||
<h2><i class="fas fa-network-wired"></i> Netzwerkkonfiguration</h2>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Verbindungsstatus
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3>Backend</h3>
|
||||
<div class="status {{ 'status-good' if 'Verbunden' in backend_status else 'status-error' }}">
|
||||
{{ backend_status }}
|
||||
</div>
|
||||
|
||||
<h3>Frontend</h3>
|
||||
<div class="status {{ 'status-good' if 'Verbunden' in frontend_status else 'status-error' }}">
|
||||
{{ frontend_status }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="fas fa-cogs"></i> Netzwerkkonfiguration
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form id="configForm">
|
||||
<div class="form-group">
|
||||
<label for="backend_hostname">Backend Hostname/IP:</label>
|
||||
<input type="text" id="backend_hostname" name="backend_hostname" value="{{ config.backend_hostname }}">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="backend_port">Backend Port:</label>
|
||||
<input type="text" id="backend_port" name="backend_port" value="{{ config.backend_port }}">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="frontend_hostname">Frontend Hostname/IP:</label>
|
||||
<input type="text" id="frontend_hostname" name="frontend_hostname" value="{{ config.frontend_hostname }}">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="frontend_port">Frontend Port:</label>
|
||||
<input type="text" id="frontend_port" name="frontend_port" value="{{ config.frontend_port }}">
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn" onclick="testConnection()">Verbindung testen</button>
|
||||
<button type="button" class="btn btn-success" onclick="saveConfig()">Konfiguration speichern</button>
|
||||
<button type="button" class="btn btn-warning" onclick="syncFrontend()">Frontend synchronisieren</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dashboard-section">
|
||||
<h2><i class="fab fa-docker"></i> Docker-Container</h2>
|
||||
|
||||
<div class="dashboard-container">
|
||||
<div class="card">
|
||||
<div class="card-header">Container-Status</div>
|
||||
<div class="card-body">
|
||||
<div class="chart-container small">
|
||||
<canvas id="container-status-chart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">Docker-Info</div>
|
||||
<div class="card-body">
|
||||
<table>
|
||||
<tr>
|
||||
<th>Version</th>
|
||||
<td id="docker-version">-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>API-Version</th>
|
||||
<td id="docker-api-version">-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>OS</th>
|
||||
<td id="docker-os">-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Status</th>
|
||||
<td id="docker-status">-</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">Container-Liste</div>
|
||||
<div class="card-body">
|
||||
<div class="filter-bar">
|
||||
<input type="text" id="container-filter" placeholder="Container filtern..." oninput="filterContainers()">
|
||||
<div class="btn-group">
|
||||
<button class="btn" onclick="refreshContainers()"><i class="fas fa-sync-alt"></i> Aktualisieren</button>
|
||||
<button class="btn" onclick="expandAllContainers()"><i class="fas fa-expand-alt"></i> Alle erweitern</button>
|
||||
<button class="btn" onclick="collapseAllContainers()"><i class="fas fa-compress-alt"></i> Alle einklappen</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table id="container-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Status</th>
|
||||
<th>CPU</th>
|
||||
<th>Speicher</th>
|
||||
<th>Netzwerk</th>
|
||||
<th>Aktionen</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td colspan="6">Lade Container-Informationen...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">Docker-Logs Analyse</div>
|
||||
<div class="card-body">
|
||||
<div class="form-group">
|
||||
<label for="log-container-select">Container auswählen:</label>
|
||||
<select id="log-container-select">
|
||||
<option value="">-- Container auswählen --</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="log-filter">Log-Filter:</label>
|
||||
<input type="text" id="log-filter" placeholder="Nach Text filtern...">
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<button class="btn" onclick="loadContainerLogs()"><i class="fas fa-search"></i> Logs laden</button>
|
||||
<button class="btn" onclick="downloadContainerLogs()"><i class="fas fa-download"></i> Logs herunterladen</button>
|
||||
</div>
|
||||
|
||||
<div class="logs-container" id="container-logs">
|
||||
<div class="log-placeholder">Container auswählen, um Logs anzuzeigen</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dashboard-section">
|
||||
<h2><i class="fas fa-network-wired"></i> Netzwerkschnittstellen</h2>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Netzwerkschnittstellen
|
||||
<button class="btn btn-sm" onclick="refreshNetworkInterfaces()"><i class="fas fa-sync-alt"></i></button>
|
||||
</div>
|
||||
<div class="card-body" id="network-interfaces">
|
||||
<div class="loading">Lade Netzwerkschnittstellen...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Aktive Verbindungen
|
||||
<button class="btn btn-sm" onclick="refreshActiveConnections()"><i class="fas fa-sync-alt"></i></button>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<table id="connections-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Lokale Adresse</th>
|
||||
<th>Remote-Adresse</th>
|
||||
<th>Status</th>
|
||||
<th>Prozess</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td colspan="4">Lade aktive Verbindungen...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Routing-Tabelle
|
||||
<button class="btn btn-sm" onclick="loadRouteTable()"><i class="fas fa-sync-alt"></i></button>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<pre id="route-table">Lade Routing-Tabelle...</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dashboard-section">
|
||||
<h2><i class="fas fa-exclamation-triangle"></i> Diagnose-Tools</h2>
|
||||
|
||||
<div class="tabs">
|
||||
<div class="tab active" data-tab="ping">Ping-Test</div>
|
||||
<div class="tab" data-tab="traceroute">Traceroute</div>
|
||||
<div class="tab" data-tab="dns">DNS-Abfrage</div>
|
||||
<div class="tab" data-tab="port-scan">Port-Scan</div>
|
||||
<div class="tab" data-tab="logs">Log-Analyse</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-content active" id="ping-tab">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="form-group">
|
||||
<label for="ping-host">Host:</label>
|
||||
<div class="input-group">
|
||||
<input type="text" id="ping-host" placeholder="z.B. example.com oder 192.168.1.1">
|
||||
<div class="input-group-append">
|
||||
<button class="btn" onclick="pingHost()">Ping</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="ping-result" class="status">
|
||||
Führen Sie einen Ping-Test durch, um Ergebnisse zu sehen.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-content" id="traceroute-tab">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="form-group">
|
||||
<label for="traceroute-host">Host:</label>
|
||||
<div class="input-group">
|
||||
<input type="text" id="traceroute-host" placeholder="z.B. example.com oder 192.168.1.1">
|
||||
<div class="input-group-append">
|
||||
<button class="btn" onclick="tracerouteHost()">Traceroute</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="traceroute-result" class="status">
|
||||
Führen Sie einen Traceroute-Test durch, um Ergebnisse zu sehen.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-content" id="dns-tab">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="form-group">
|
||||
<label for="dns-host">Host:</label>
|
||||
<div class="input-group">
|
||||
<input type="text" id="dns-host" placeholder="z.B. example.com">
|
||||
<div class="input-group-append">
|
||||
<button class="btn" onclick="dnsLookup()">DNS-Abfrage</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="dns-result" class="status">
|
||||
Führen Sie eine DNS-Abfrage durch, um Ergebnisse zu sehen.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-content" id="port-scan-tab">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="form-group">
|
||||
<label for="port-scan-host">Host:</label>
|
||||
<input type="text" id="port-scan-host" placeholder="z.B. example.com oder 192.168.1.1">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="port-scan-range">Port-Bereich:</label>
|
||||
<input type="text" id="port-scan-range" placeholder="z.B. 1-1024" value="1-1024">
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<button class="btn" onclick="startPortScan()">Port-Scan starten</button>
|
||||
<button class="btn" onclick="checkPortScanStatus()">Status prüfen</button>
|
||||
</div>
|
||||
|
||||
<div id="port-scan-status" class="status">
|
||||
Kein Port-Scan aktiv.
|
||||
</div>
|
||||
|
||||
<div id="port-scan-results" class="results-container">
|
||||
<table id="port-scan-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Port</th>
|
||||
<th>Status</th>
|
||||
<th>Dienst</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-content" id="logs-tab">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="form-group">
|
||||
<label for="log-type">Log-Typ:</label>
|
||||
<select id="log-type">
|
||||
<option value="backend">Backend-Logs</option>
|
||||
<option value="frontend">Frontend-Logs</option>
|
||||
<option value="debug">Debug-Server-Logs</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="log-lines">Anzahl Zeilen:</label>
|
||||
<input type="number" id="log-lines" value="100" min="10" max="1000">
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<button class="btn" onclick="loadLogs()">Logs laden</button>
|
||||
<button class="btn" onclick="analyzeLogs()">Logs analysieren</button>
|
||||
</div>
|
||||
|
||||
<div class="logs-container" id="log-content">
|
||||
<div class="log-placeholder">Wählen Sie einen Log-Typ und klicken Sie auf "Logs laden"</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- JavaScript Code -->
|
||||
<script src="{{ url_for('static', filename='js/debug-dashboard.js') }}"></script>
|
||||
</body>
|
||||
</html>
|
||||
261
backend/debug-server/templates/debug.html
Normal file
261
backend/debug-server/templates/debug.html
Normal file
@@ -0,0 +1,261 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>MYP Debug Server</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
h1, h2, h3 {
|
||||
color: #2c3e50;
|
||||
}
|
||||
.section {
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
padding: 15px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
color: #34495e;
|
||||
}
|
||||
input[type="text"] {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.btn {
|
||||
background-color: #3498db;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 15px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.btn:hover {
|
||||
background-color: #2980b9;
|
||||
}
|
||||
.btn-success {
|
||||
background-color: #2ecc71;
|
||||
}
|
||||
.btn-success:hover {
|
||||
background-color: #27ae60;
|
||||
}
|
||||
.btn-warning {
|
||||
background-color: #f39c12;
|
||||
}
|
||||
.btn-warning:hover {
|
||||
background-color: #e67e22;
|
||||
}
|
||||
.status {
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.status-good {
|
||||
background-color: #d4edda;
|
||||
color: #155724;
|
||||
}
|
||||
.status-warning {
|
||||
background-color: #fff3cd;
|
||||
color: #856404;
|
||||
}
|
||||
.status-error {
|
||||
background-color: #f8d7da;
|
||||
color: #721c24;
|
||||
}
|
||||
.interface-item {
|
||||
background-color: #f8f9fa;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 4px;
|
||||
border-left: 4px solid #3498db;
|
||||
}
|
||||
.message {
|
||||
display: none;
|
||||
padding: 10px;
|
||||
margin: 10px 0;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.message-success {
|
||||
background-color: #d4edda;
|
||||
color: #155724;
|
||||
}
|
||||
.message-error {
|
||||
background-color: #f8d7da;
|
||||
color: #721c24;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>MYP Debug Server</h1>
|
||||
<p>Letzte Aktualisierung: {{ last_check }}</p>
|
||||
|
||||
<div id="message" class="message"></div>
|
||||
|
||||
<div class="section">
|
||||
<h2>Netzwerkkonfiguration</h2>
|
||||
<form id="configForm">
|
||||
<div class="form-group">
|
||||
<label for="backend_hostname">Backend Hostname/IP:</label>
|
||||
<input type="text" id="backend_hostname" name="backend_hostname" value="{{ config.backend_hostname }}">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="backend_port">Backend Port:</label>
|
||||
<input type="text" id="backend_port" name="backend_port" value="{{ config.backend_port }}">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="frontend_hostname">Frontend Hostname/IP:</label>
|
||||
<input type="text" id="frontend_hostname" name="frontend_hostname" value="{{ config.frontend_hostname }}">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="frontend_port">Frontend Port:</label>
|
||||
<input type="text" id="frontend_port" name="frontend_port" value="{{ config.frontend_port }}">
|
||||
</div>
|
||||
|
||||
<button type="button" class="btn" onclick="testConnection()">Verbindung testen</button>
|
||||
<button type="button" class="btn btn-success" onclick="saveConfig()">Konfiguration speichern</button>
|
||||
<button type="button" class="btn btn-warning" onclick="syncFrontend()">Frontend synchronisieren</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>Verbindungsstatus</h2>
|
||||
|
||||
<h3>Backend</h3>
|
||||
<div class="status {{ 'status-good' if 'Verbunden' in backend_status else 'status-error' }}">
|
||||
{{ backend_status }}
|
||||
</div>
|
||||
|
||||
<h3>Frontend</h3>
|
||||
<div class="status {{ 'status-good' if 'Verbunden' in frontend_status else 'status-error' }}">
|
||||
{{ frontend_status }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>Netzwerkschnittstellen</h2>
|
||||
{% for interface in interfaces %}
|
||||
<div class="interface-item">
|
||||
<strong>{{ interface.name }}</strong>: {{ interface.address }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function showMessage(message, isError = false) {
|
||||
const messageEl = document.getElementById('message');
|
||||
messageEl.textContent = message;
|
||||
messageEl.className = isError ? 'message message-error' : 'message message-success';
|
||||
messageEl.style.display = 'block';
|
||||
|
||||
// Verstecke Nachricht nach 5 Sekunden
|
||||
setTimeout(() => {
|
||||
messageEl.style.display = 'none';
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
function getFormData() {
|
||||
return {
|
||||
backend_hostname: document.getElementById('backend_hostname').value,
|
||||
backend_port: document.getElementById('backend_port').value,
|
||||
frontend_hostname: document.getElementById('frontend_hostname').value,
|
||||
frontend_port: document.getElementById('frontend_port').value
|
||||
};
|
||||
}
|
||||
|
||||
function testConnection() {
|
||||
const formData = getFormData();
|
||||
const data = new FormData();
|
||||
|
||||
for (const key in formData) {
|
||||
data.append(key, formData[key]);
|
||||
}
|
||||
|
||||
fetch('/test-connection', {
|
||||
method: 'POST',
|
||||
body: data
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
let message = 'Backend: ';
|
||||
message += data.results.backend.ping ? 'Ping OK' : 'Ping fehlgeschlagen';
|
||||
message += ', ';
|
||||
message += data.results.backend.connection ? 'Verbindung OK' : 'Keine Verbindung';
|
||||
|
||||
message += ' | Frontend: ';
|
||||
message += data.results.frontend.ping ? 'Ping OK' : 'Ping fehlgeschlagen';
|
||||
message += ', ';
|
||||
message += data.results.frontend.connection ? 'Verbindung OK' : 'Keine Verbindung';
|
||||
|
||||
showMessage(message, !(data.results.backend.connection && data.results.frontend.connection));
|
||||
} else {
|
||||
showMessage(data.message, true);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
showMessage('Fehler bei der Verbindungsprüfung: ' + error, true);
|
||||
});
|
||||
}
|
||||
|
||||
function saveConfig() {
|
||||
const formData = getFormData();
|
||||
const data = new FormData();
|
||||
|
||||
for (const key in formData) {
|
||||
data.append(key, formData[key]);
|
||||
}
|
||||
|
||||
fetch('/save-config', {
|
||||
method: 'POST',
|
||||
body: data
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
showMessage(data.message, !data.success);
|
||||
if (data.success) {
|
||||
// Aktualisiere die Seite nach erfolgreicher Speicherung
|
||||
setTimeout(() => {
|
||||
location.reload();
|
||||
}, 1500);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
showMessage('Fehler beim Speichern: ' + error, true);
|
||||
});
|
||||
}
|
||||
|
||||
function syncFrontend() {
|
||||
fetch('/sync-frontend', {
|
||||
method: 'POST'
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
showMessage(data.message, !data.success);
|
||||
})
|
||||
.catch(error => {
|
||||
showMessage('Fehler bei der Frontend-Synchronisierung: ' + error, true);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user