289 lines
9.6 KiB
HTML
289 lines
9.6 KiB
HTML
{% extends "base.html" %}
|
|
{% block content %}
|
|
|
|
<h2 class="d-flex justify-content-between align-items-center">
|
|
Dashboard
|
|
<span id="dashboard-timer" class="badge bg-success">
|
|
Nächste Prüfung in -- Sekunden
|
|
</span>
|
|
</h2>
|
|
<div class="row g-3">
|
|
{% for d in devices %}
|
|
<div class="col-6 col-md-4 col-lg-3 col-xl-2">
|
|
<div class="card text-center p-2 device-card"
|
|
style="cursor:pointer;"
|
|
data-mac="{{ d[0] }}"
|
|
data-name="{{ d[1] }}"
|
|
data-ip="{{ d[2] }}"
|
|
data-switch="{{ d[3] }}"
|
|
data-port="{{ d[4] }}"
|
|
data-active="{{ d[5] }}"
|
|
{% if last_seen.get(d[0]) %}
|
|
title="{{ last_seen[d[0]] }}"
|
|
{% elif status[d[0]] == 'offline' %}
|
|
title="Noch nie online"
|
|
{% endif %}>
|
|
<div class="card-header">{{ d[1] }}</div>
|
|
<div class="card-body">
|
|
<span class="fw-bold" style="color:
|
|
{% if d[5] == 0 %}gray
|
|
{% elif status[d[0]] == 'online' %}green
|
|
{% else %}red
|
|
{% endif %};">
|
|
{% if d[5] == 0 %}
|
|
Deaktiviert
|
|
{% else %}
|
|
{% if status[d[0]] %}{{ status[d[0]]|capitalize }}{% else %}Unbekannt{% endif %}
|
|
{% endif %}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
const intervalMinutes = {{ interval | int }}; // aus DB
|
|
const intervalMilliseconds = intervalMinutes * 60 * 1000;
|
|
let lastUpdateTime = Date.now();
|
|
let selectedCard = null;
|
|
let selectedMac = null;
|
|
let selectedName = null;
|
|
|
|
const deviceModal = new bootstrap.Modal(
|
|
document.getElementById("deviceModal")
|
|
);
|
|
|
|
const restartModal = new bootstrap.Modal(
|
|
document.getElementById("restartModal")
|
|
);
|
|
|
|
function parseLogTimestamp(ts) {
|
|
const parts = ts.match(/^(\d{4})-(\d{2})-(\d{2}) (\d{2}):(\d{2}):(\d{2})$/);
|
|
if (!parts) return Date.now();
|
|
const [, year, month, day, hour, minute, second] = parts.map(Number);
|
|
return new Date(year, month - 1, day, hour, minute, second).getTime();
|
|
}
|
|
|
|
function updateTimer() {
|
|
const now = Date.now();
|
|
const elapsed = now - lastUpdateTime;
|
|
const remainingMs = intervalMilliseconds - (elapsed % intervalMilliseconds);
|
|
const remainingSec = Math.ceil(remainingMs / 1000);
|
|
document.getElementById("dashboard-timer").innerText =
|
|
`Nächste Prüfung in ${remainingSec} Sekunden`;
|
|
|
|
if (remainingSec <= 1) {
|
|
// Timer abgelaufen → Reload starten
|
|
window.location.reload();
|
|
}
|
|
}
|
|
|
|
function fetchLastLog() {
|
|
fetch("{{ url_for('get_log') }}")
|
|
.then(response => response.text())
|
|
.then(data => {
|
|
const lines = data.split("\n");
|
|
let lastSepIndex = -1;
|
|
for (let i = lines.length - 1; i >= 0; i--) {
|
|
if (lines[i].startsWith("--------------------------------------------------------------------")) {
|
|
lastSepIndex = i;
|
|
break;
|
|
}
|
|
}
|
|
if (lastSepIndex >= 0 && lastSepIndex + 1 < lines.length) {
|
|
const firstLine = lines[lastSepIndex + 1];
|
|
const match = firstLine.match(/^(\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2})/);
|
|
if (match) lastUpdateTime = parseLogTimestamp(match[1]);
|
|
}
|
|
})
|
|
.catch(err => console.error("Fehler beim Laden der Logs:", err));
|
|
}
|
|
|
|
document.querySelectorAll(".device-card").forEach(card => {
|
|
const mac = card.dataset.mac;
|
|
if (sessionStorage.getItem("restart_" + mac)) {
|
|
const span = card.querySelector(".fw-bold");
|
|
span.innerHTML =
|
|
'<span class="spinner-border spinner-border-sm me-2"></span>Restarting...';
|
|
span.style.color = "#ffc107";
|
|
}
|
|
|
|
card.addEventListener("click", function () {
|
|
if (this.dataset.active == "0") {
|
|
return;
|
|
}
|
|
if (sessionStorage.getItem("restart_" + this.dataset.mac)) {
|
|
return;
|
|
}
|
|
selectedCard = this;
|
|
selectedMac = this.dataset.mac;
|
|
selectedName = this.dataset.name;
|
|
document.getElementById("deviceModalTitle").innerText =
|
|
this.dataset.name;
|
|
document.getElementById("deviceIp").innerText =
|
|
this.dataset.ip || "-";
|
|
document.getElementById("deviceSwitch").innerText =
|
|
this.dataset.switch || "-";
|
|
document.getElementById("devicePort").innerText =
|
|
this.dataset.port || "-";
|
|
document.getElementById("deviceStatus").innerText =
|
|
this.querySelector(".fw-bold").innerText;
|
|
deviceModal.show();
|
|
});
|
|
});
|
|
|
|
document
|
|
.getElementById("restartButton")
|
|
.addEventListener("click", function () {
|
|
deviceModal.hide();
|
|
document.getElementById("restartTitle").innerText =
|
|
selectedName + " neu starten?";
|
|
restartModal.show();
|
|
});
|
|
|
|
document
|
|
.getElementById("confirmRestart")
|
|
.addEventListener("click", function () {
|
|
const button = this;
|
|
button.disabled = true;
|
|
fetch("/restart/" + encodeURIComponent(selectedMac), {
|
|
method: "POST"
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
button.disabled = false;
|
|
if (!data.success) {
|
|
alert(data.message || "Neustart konnte nicht gestartet werden.");
|
|
return;
|
|
}
|
|
restartModal.hide();
|
|
deviceModal.hide();
|
|
sessionStorage.setItem(
|
|
"restart_" + selectedMac,
|
|
"1"
|
|
);
|
|
const span = selectedCard.querySelector(".fw-bold");
|
|
span.innerHTML =
|
|
'<span class="spinner-border spinner-border-sm me-2"></span>Restarting...';
|
|
span.style.color = "#ffc107";
|
|
})
|
|
.catch(error => {
|
|
button.disabled = false;
|
|
alert(
|
|
"Fehler beim Starten des Neustarts.\n\n" +
|
|
error
|
|
);
|
|
});
|
|
});
|
|
|
|
// Timer alle 1 Sekunde aktualisieren
|
|
setInterval(updateTimer, 1000);
|
|
|
|
// einmal beim Laden die letzte Log-Zeit setzen
|
|
fetchLastLog();
|
|
});
|
|
</script>
|
|
|
|
<!-- ========================================================= -->
|
|
<!-- Geräteinformationen -->
|
|
<!-- ========================================================= -->
|
|
|
|
<div class="modal fade"
|
|
id="deviceModal"
|
|
tabindex="-1"
|
|
aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5
|
|
id="deviceModalTitle"
|
|
class="modal-title">
|
|
</h5>
|
|
<button
|
|
type="button"
|
|
class="btn-close"
|
|
data-bs-dismiss="modal"
|
|
aria-label="Schließen">
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<table class="table table-sm align-middle mb-0">
|
|
<tr>
|
|
<th style="width:120px;">IP-Adresse</th>
|
|
<td id="deviceIp"></td>
|
|
</tr>
|
|
<tr>
|
|
<th>Switch</th>
|
|
<td id="deviceSwitch"></td>
|
|
</tr>
|
|
<tr>
|
|
<th>Port</th>
|
|
<td id="devicePort"></td>
|
|
</tr>
|
|
<tr>
|
|
<th>Status</th>
|
|
<td id="deviceStatus"></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button
|
|
id="restartButton"
|
|
class="btn btn-warning">
|
|
🔄 Neustarten
|
|
</button>
|
|
<button
|
|
class="btn btn-secondary"
|
|
data-bs-dismiss="modal">
|
|
Schließen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ========================================================= -->
|
|
<!-- Neustart bestätigen -->
|
|
<!-- ========================================================= -->
|
|
|
|
<div class="modal fade"
|
|
id="restartModal"
|
|
tabindex="-1"
|
|
aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5
|
|
id="restartTitle"
|
|
class="modal-title">
|
|
</h5>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p class="mb-2">
|
|
Der Neustart erfolgt durch einen kurzen
|
|
PoE-Reset.
|
|
</p>
|
|
<p class="mb-0">
|
|
Der Pi wird für wenige Sekunden
|
|
vom Netzwerk getrennt.
|
|
</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button
|
|
class="btn btn-secondary"
|
|
data-bs-dismiss="modal">
|
|
Abbrechen
|
|
</button>
|
|
<button
|
|
id="confirmRestart"
|
|
class="btn btn-danger">
|
|
Neustarten
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock %}
|