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); // 200 ms debounce
|
||
|
||
searchInput.addEventListener('input', filterRows);
|
||
});
|
||
</script>
|
||
|
||
</html>
|