diff --git a/static/js/main.js b/static/js/main.js index f88e68f..83f65dd 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -132,6 +132,12 @@ function selectDrive(drive) { `; } + // Show clear selection button + const clearContainer = document.getElementById('clear-selection-container'); + if (clearContainer) { + clearContainer.style.display = 'block'; + } + // Enable benchmark configuration section const configDiv = document.getElementById('benchmark-config'); if (configDiv) { @@ -143,6 +149,44 @@ function selectDrive(drive) { } } +// Handle drive deselection (clear selection) +function clearDriveSelection() { + selectedDrive = null; + console.log('Cleared drive selection'); + + // Clear selected drive info + const infoDiv = document.getElementById('selected-drive-info'); + if (infoDiv) { + infoDiv.innerHTML = ''; + } + + // Hide clear selection button + const clearContainer = document.getElementById('clear-selection-container'); + if (clearContainer) { + clearContainer.style.display = 'none'; + } + + // Disable benchmark configuration section + const configDiv = document.getElementById('benchmark-config'); + if (configDiv) { + configDiv.classList.add('opacity-50'); + configDiv.querySelector('.card-body').innerHTML = ` +
Select a drive above to configure benchmark parameters.
+ `; + } + + // Uncheck all radio buttons + const radios = document.querySelectorAll('input[name="selected_drive"]'); + radios.forEach(radio => { radio.checked = false; }); +} + +// Listen for clear selection button click +document.addEventListener('click', function(evt) { + if (evt.target.id === 'clear-selection-btn' || evt.target.closest('#clear-selection-btn')) { + clearDriveSelection(); + } +}); + // Listen for HTMX events document.addEventListener('htmx:afterRequest', function(evt) { // Render drives in home page