61 lines
2.1 KiB
JavaScript
61 lines
2.1 KiB
JavaScript
/**
|
|
* Disk Checker - Main JavaScript
|
|
* Handles HTMX events and dynamic content rendering
|
|
*/
|
|
|
|
// Render drives after HTMX loads them
|
|
function renderDrives(data) {
|
|
const container = document.getElementById('drives-content');
|
|
if (!container) return;
|
|
|
|
container.innerHTML = '';
|
|
|
|
if (!data.drives || data.drives.length === 0) {
|
|
container.innerHTML = '<div class="col-12"><p class="text-muted">No drives found.</p></div>';
|
|
return;
|
|
}
|
|
|
|
data.drives.forEach(drive => {
|
|
const col = document.createElement('div');
|
|
col.className = 'col-md-4 mb-3';
|
|
|
|
const card = document.createElement('div');
|
|
card.className = `drive-card ${drive.mounted ? 'disabled' : 'available'}`;
|
|
|
|
card.innerHTML = `
|
|
<div class="card-body">
|
|
<h5 class="card-title">${drive.name}</h5>
|
|
<p class="card-text">
|
|
<strong>Size:</strong> ${drive.size}<br>
|
|
<strong>Model:</strong> ${drive.model || 'Unknown'}<br>
|
|
${drive.serial ? `<strong>Serial:</strong> ${drive.serial}<br>` : ''}
|
|
${drive.mount_point ? `<strong>Mounted at:</strong> ${drive.mount_point}<br>` : ''}
|
|
</p>
|
|
<div>
|
|
${drive.mounted
|
|
? '<span class="badge bg-secondary">Mounted - Unavailable</span>'
|
|
: '<span class="badge bg-success">Available for Benchmark</span>'
|
|
}
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
col.appendChild(card);
|
|
container.appendChild(col);
|
|
});
|
|
}
|
|
|
|
// Listen for HTMX events
|
|
document.addEventListener('htmx:afterRequest', function(evt) {
|
|
if (evt.detail.target.id === 'drives-content') {
|
|
renderDrives(JSON.parse(evt.detail.xhr.response));
|
|
}
|
|
});
|
|
|
|
// Optional: Listen for HTMX load event as fallback
|
|
document.addEventListener('htmx:load', function(evt) {
|
|
if (evt.target.id === 'drives-content') {
|
|
// HTMX will load the content via hx-get
|
|
// The afterRequest event will handle rendering
|
|
}
|
|
}); |