This commit is contained in:
2025-03-05 13:18:47 +02:00
parent bd639d9af2
commit 1dc9c36514
5 changed files with 284 additions and 3 deletions

View File

@@ -0,0 +1,93 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Board Logs - {{ hostname }}</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
body {
background-color: #f8f9fa;
}
.card {
border: 1px solid #dee2e6;
border-radius: 0.25rem;
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
.card-title {
font-size: 1.25rem;
font-weight: 500;
}
.card-text {
font-size: 1rem;
color: #6c757d;
}
.timer {
font-size: 1rem;
color: #6c757d;
text-align: right;
}
</style>
<script>
function updateLogs() {
fetch('{{ url_for("get_board_logs", hostname=hostname) }}')
.then(response => response.json())
.then(data => {
const logsContainer = document.getElementById('logs-container');
logsContainer.innerHTML = '';
data.logs.forEach(log => {
const logItem = document.createElement('li');
logItem.className = 'list-group-item';
logItem.innerHTML = `<strong>${log.timestamp}</strong>: ${log.message}`;
logsContainer.appendChild(logItem);
});
});
}
function startTimer() {
let timer = 5;
setInterval(() => {
if (timer === 0) {
updateLogs();
timer = 5;
}
document.getElementById('timer').innerText = `Next update in ${timer} seconds`;
timer--;
}, 1000);
}
window.onload = startTimer;
</script>
</head>
<body>
<div class="container mt-5">
<div class="row mb-4">
<div class="col-md-6">
<form action="{{ url_for('delete_board', hostname=hostname) }}" method="post">
<button type="submit" class="btn btn-danger">Delete Board</button>
<a href="{{ url_for('index') }}" class="btn btn-secondary">Back to Home</a>
</form>
</div>
<div class="col-md-6 timer">
<span id="timer">Next update in 5 seconds</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="card mb-4">
<div class="card-body">
<h5 class="card-title">Logs for {{ hostname }}</h5>
<ul class="list-group" id="logs-container">
{% for log in logs %}
<li class="list-group-item">
<strong>{{ log.timestamp }}</strong>: {{ log.message }}
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ESP Board Status</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
body {
background-color: #f8f9fa;
}
.card {
border: 1px solid #dee2e6;
border-radius: 0.25rem;
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
.card-title {
font-size: 1.25rem;
font-weight: 500;
}
.card-text {
font-size: 1rem;
color: #6c757d;
}
.status-online {
color: #28a745;
font-weight: bold;
}
.status-offline {
color: #dc3545;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container mt-5">
<h1 class="text-center mb-4">ESP Board Status</h1>
<div class="row">
{% for board in boards %}
<div class="col-md-4">
<div class="card mb-4">
<div class="card-body">
<h5 class="card-title">{{ board.hostname }}</h5>
<p class="card-text">Status:
<span class="{{ 'status-online' if board.status == 'Online' else 'status-offline' }}">
{{ board.status }}
</span>
</p>
<p class="card-text">Last Seen: {{ board.last_seen }}</p>
<a href="{{ url_for('view_board', hostname=board.hostname) }}" class="btn btn-primary">View Logs</a>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</body>
</html>