227 lines
7.0 KiB
Plaintext
227 lines
7.0 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title><%= title %></title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
background-color: #f5f5f5;
|
|
}
|
|
h1, h2, h3 {
|
|
color: #2c3e50;
|
|
}
|
|
.card {
|
|
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-primary {
|
|
background-color: #2ecc71;
|
|
}
|
|
.btn-primary:hover {
|
|
background-color: #27ae60;
|
|
}
|
|
.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;
|
|
}
|
|
.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;
|
|
}
|
|
.interface-list {
|
|
list-style-type: none;
|
|
padding: 0;
|
|
}
|
|
.interface-item {
|
|
background-color: #f8f9fa;
|
|
padding: 10px;
|
|
margin-bottom: 10px;
|
|
border-radius: 4px;
|
|
border-left: 4px solid #3498db;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1><%= title %></h1>
|
|
<p>Letzte Aktualisierung: <%= lastCheck %></p>
|
|
|
|
<div id="message" class="message"></div>
|
|
|
|
<div class="card">
|
|
<h2>Backend-Konfiguration</h2>
|
|
<div class="form-group">
|
|
<label for="backendUrl">Backend-URL:</label>
|
|
<input type="text" id="backendUrl" value="<%= backendUrl %>">
|
|
</div>
|
|
|
|
<button type="button" class="btn" onclick="testBackend()">Verbindung testen</button>
|
|
<button type="button" class="btn btn-primary" onclick="updateBackend()">URL aktualisieren</button>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2>Backend-Status</h2>
|
|
<div class="status <%= backendStatus === 'Verbunden' ? 'status-good' : 'status-error' %>">
|
|
<strong>Status:</strong> <%= backendStatus %>
|
|
</div>
|
|
<div class="status <%= pingStatus ? 'status-good' : 'status-error' %>">
|
|
<strong>Ping:</strong> <%= pingStatus ? 'Erfolgreich' : 'Fehlgeschlagen' %>
|
|
</div>
|
|
<div class="status">
|
|
<strong>Host:</strong> <%= backendHost %>
|
|
</div>
|
|
<div class="status">
|
|
<strong>Port:</strong> <%= backendPort %>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2>Netzwerkschnittstellen</h2>
|
|
<ul class="interface-list">
|
|
<% if (interfaces && interfaces.length > 0) { %>
|
|
<% interfaces.forEach(function(iface) { %>
|
|
<li class="interface-item">
|
|
<strong><%= iface.name %>:</strong> <%= iface.address %>
|
|
</li>
|
|
<% }); %>
|
|
<% } else { %>
|
|
<li class="interface-item">Keine Netzwerkschnittstellen gefunden</li>
|
|
<% } %>
|
|
</ul>
|
|
</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 testBackend() {
|
|
const backendUrl = document.getElementById('backendUrl').value;
|
|
|
|
if (!backendUrl) {
|
|
showMessage('Bitte geben Sie eine Backend-URL ein', true);
|
|
return;
|
|
}
|
|
|
|
fetch('/test-backend', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({ backendUrl })
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
const pingStatus = data.ping ? 'Erfolgreich' : 'Fehlgeschlagen';
|
|
const connectionStatus = data.connection ? 'Verbunden' : 'Keine Verbindung';
|
|
|
|
showMessage(`Ping: ${pingStatus}, API-Verbindung: ${connectionStatus}`, !(data.ping && data.connection));
|
|
} else {
|
|
showMessage(data.message, true);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
showMessage(`Fehler: ${error}`, true);
|
|
});
|
|
}
|
|
|
|
function updateBackend() {
|
|
const backendUrl = document.getElementById('backendUrl').value;
|
|
|
|
if (!backendUrl) {
|
|
showMessage('Bitte geben Sie eine Backend-URL ein', true);
|
|
return;
|
|
}
|
|
|
|
fetch('/update-backend', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({ backendUrl })
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
showMessage(data.message, !data.success);
|
|
|
|
if (data.success) {
|
|
// Lade die Seite neu nach erfolgreicher Aktualisierung
|
|
setTimeout(() => {
|
|
location.reload();
|
|
}, 1500);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
showMessage(`Fehler: ${error}`, true);
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |