115 lines
3.6 KiB
PHP
115 lines
3.6 KiB
PHP
<?php
|
|
// Function to fetch SSD information from the API
|
|
function fetchSSDData() {
|
|
$url = 'http://172.17.0.1:5000/drives';
|
|
$options = [
|
|
'http' => [
|
|
'header' => "Content-type: application/json\r\n",
|
|
'method' => 'GET',
|
|
],
|
|
];
|
|
|
|
$context = stream_context_create($options);
|
|
$result = file_get_contents($url, false, $context);
|
|
|
|
if ($result === FALSE) {
|
|
die('Error Fetching data');
|
|
}
|
|
|
|
return json_decode($result, true); // Decode JSON as an associative array
|
|
}
|
|
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>SSD Health Dashboard</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<button onclick="window.location.reload();" class="title-button"><h2>SSD Health Dashboard</h2></button><br>
|
|
This is a historical list of every disk ever scanned by this device.<p>
|
|
For a live dashboard, please visit <a href=/>home</a>.
|
|
</div>
|
|
<div class="container">
|
|
Search for disk:<br>
|
|
<input id="search" type="text" placeholder="Search by ID, model, serial…" /><p>
|
|
<?php
|
|
$ssdData = fetchSSDData(); // Fetch data from the API
|
|
// Start the table
|
|
echo '<table class="ssd-list" style="border-collapse:collapse;width:100%;">';
|
|
// Table header (optional but handy)
|
|
echo '<thead>
|
|
<tr>
|
|
<th>Disk ID</th>
|
|
<th>Model String</th>
|
|
<th>Serial Number</th>
|
|
<th>GB Written</th>
|
|
<th>Disk Capacity</th>
|
|
<th>Disk Flavor</th>
|
|
<th>SMART Result</th>
|
|
</tr>
|
|
</thead>';
|
|
// Table body - one row per SSD
|
|
echo '<tbody id="ssd-body">';
|
|
foreach ($ssdData as $ssd) {
|
|
// Escape the values so the page stays safe
|
|
$id = htmlspecialchars($ssd['id']);
|
|
$model = htmlspecialchars($ssd['model']);
|
|
$serial = htmlspecialchars($ssd['serial']);
|
|
$tbw = htmlspecialchars($ssd['gb_written']);
|
|
$cap = htmlspecialchars($ssd['capacity']);
|
|
$flavor = htmlspecialchars($ssd['flavor']);
|
|
$smart = htmlspecialchars($ssd['smart']);
|
|
|
|
echo "<tr>
|
|
<td>{$id}</td>
|
|
<td>{$model}</td>
|
|
<td>{$serial}</td>
|
|
<td>{$tbw}</td>
|
|
<td>{$cap}</td>
|
|
<td>{$flavor}</td>
|
|
<td>{$smart}</td>
|
|
</tr>";
|
|
}
|
|
echo '</tbody></table>';
|
|
?>
|
|
</div>
|
|
|
|
</body>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const searchInput = document.getElementById('search');
|
|
const tbody = document.getElementById('ssd-body');
|
|
const rows = Array.from(tbody.rows); // snapshot of rows
|
|
|
|
// Optional: a simple debounce so we don't react on every keystroke
|
|
const debounce = (fn, delay) => {
|
|
let timer;
|
|
return (...args) => {
|
|
clearTimeout(timer);
|
|
timer = setTimeout(() => fn.apply(this, args), delay);
|
|
};
|
|
};
|
|
|
|
const filterRows = debounce(() => {
|
|
const query = searchInput.value.trim().toLowerCase();
|
|
rows.forEach(row => {
|
|
// Grab all cells in this row as a single string
|
|
const rowText = Array.from(row.cells)
|
|
.map(cell => cell.textContent)
|
|
.join(' ')
|
|
.toLowerCase();
|
|
|
|
row.style.display = rowText.includes(query) ? '' : 'none';
|
|
});
|
|
}, 200); // 200ms debounce
|
|
|
|
searchInput.addEventListener('input', filterRows);
|
|
});
|
|
</script>
|
|
|
|
</html>
|