Use fieldset for main dashboard

This commit is contained in:
2025-02-02 18:39:45 +01:00
parent 0167afdd31
commit 4aa0a1914e

View File

@@ -374,7 +374,7 @@ function showSection(sectionId) {
//* Fetch data and render dashboard : * //* Fetch data and render dashboard : *
//******************************************************************* //*******************************************************************
// Fetch summary (jails, stats, last 5 bans) // Fetch summary (jails, stats, last bans)
function fetchSummary() { function fetchSummary() {
return fetch('/api/summary') return fetch('/api/summary')
.then(function(res) { return res.json(); }) .then(function(res) { return res.json(); })
@@ -398,6 +398,8 @@ function renderDashboard(data) {
// Add a search bar // Add a search bar
html += ` html += `
<fieldset class="border p-3 rounded mb-4">
<legend class="w-auto px-2"><span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="The Overview displays the currently enabled jails that you have added to your jail.local configuration.">Overview active Jails and Blocks</span></legend>
<div class="mb-3"> <div class="mb-3">
<label for="ipSearch" class="form-label">Search Banned IPs</label> <label for="ipSearch" class="form-label">Search Banned IPs</label>
<input type="text" id="ipSearch" class="form-control" placeholder="Enter IP address to search" onkeyup="filterIPs()"> <input type="text" id="ipSearch" class="form-control" placeholder="Enter IP address to search" onkeyup="filterIPs()">
@@ -409,7 +411,6 @@ function renderDashboard(data) {
html += '<p>No jails found.</p>'; html += '<p>No jails found.</p>';
} else { } else {
html += '' html += ''
+ '<h2><span data-bs-toggle="tooltip" data-bs-placement="top" title="The Overview displays the currently enabled jails that you have added to your jail.local configuration.">Overview</span></h2>'
+ '<div class="table-responsive">' + '<div class="table-responsive">'
+ '<table class="table table-striped" id="jailsTable">' + '<table class="table table-striped" id="jailsTable">'
+ ' <thead>' + ' <thead>'
@@ -437,11 +438,13 @@ function renderDashboard(data) {
+ '</tr>'; + '</tr>';
}); });
html += '</tbody></table></div>'; html += '</tbody></table>';
html += '</div></fieldset>';
} }
// Last 5 bans // Last 5 bans
html += '<h2>Last 5 Ban Events</h2>'; html += '<fieldset class="border p-3 rounded mb-4">';
html += ' <legend class="w-auto px-2">Last 5 Ban Events</legend>';
if (!data.lastBans || data.lastBans.length === 0) { if (!data.lastBans || data.lastBans.length === 0) {
html += '<p>No recent bans found.</p>'; html += '<p>No recent bans found.</p>';
} else { } else {
@@ -468,7 +471,7 @@ function renderDashboard(data) {
+ '</tr>'; + '</tr>';
}); });
html += '</tbody></table>'; html += '</tbody></table></fieldset>';
} }
document.getElementById('dashboard').innerHTML = html; document.getElementById('dashboard').innerHTML = html;