feat(frontend): drive selection added

static/js/main.js

@@ -3,6 +3,9 @@
  * Handles HTMX events and dynamic content rendering
  */
 
+// Global state
+let selectedDrive = null;
+
 // Render drives after HTMX loads them
 function renderDrives(data) {
     const container = document.getElementById('drives-content');
@@ -45,16 +48,117 @@ function renderDrives(data) {
     });
 }
 
+// Render drive selector for benchmark tab (available drives only)
+function renderDriveSelector(data) {
+    const container = document.getElementById('drive-cards');
+    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;
+    }
+
+    // Filter to show only available drives
+    const availableDrives = data.drives.filter(drive => !drive.mounted);
+
+    if (availableDrives.length === 0) {
+        container.innerHTML = '<div class="col-12"><div class="alert alert-warning">No available drives. All drives are mounted.</div></div>';
+        return;
+    }
+
+    availableDrives.forEach(drive => {
+        const col = document.createElement('div');
+        col.className = 'col-md-4 mb-3';
+
+        const cardWrapper = document.createElement('div');
+        cardWrapper.className = 'drive-selector-card';
+        cardWrapper.dataset.drivePath = drive.path;
+
+        // Radio input (hidden)
+        const radio = document.createElement('input');
+        radio.type = 'radio';
+        radio.name = 'selected_drive';
+        radio.value = drive.path;
+        radio.id = `drive-${drive.name}`;
+        radio.className = 'btn-check';
+        radio.setAttribute('autocomplete', 'off');
+
+        // Label as card
+        const label = document.createElement('label');
+        label.htmlFor = `drive-${drive.name}`;
+        label.className = 'btn btn-outline-primary w-100 text-start';
+        label.innerHTML = `
+            <div class="d-flex justify-content-between align-items-start">
+                <div>
+                    <h6 class="mb-1">${drive.name}</h6>
+                    <small class="text-muted">${drive.size} ${drive.model || ''}</small>
+                </div>
+                <div class="text-end">
+                    <small class="text-success">Available</small>
+                </div>
+            </div>
+            ${drive.serial ? `<small class="text-muted d-block mt-1">SN: ${drive.serial}</small>` : ''}
+        `;
+
+        cardWrapper.appendChild(radio);
+        cardWrapper.appendChild(label);
+        col.appendChild(cardWrapper);
+        container.appendChild(col);
+
+        // Add click handler to show selected drive info
+        radio.addEventListener('change', function() {
+            if (this.checked) {
+                selectDrive(drive);
+            }
+        });
+    });
+}
+
+// Handle drive selection
+function selectDrive(drive) {
+    selectedDrive = drive;
+    console.log('Selected drive:', drive);
+    
+    // Update UI to show selection
+    const infoDiv = document.getElementById('selected-drive-info');
+    if (infoDiv) {
+        infoDiv.innerHTML = `
+            <div class="alert alert-success">
+                <strong>Selected:</strong> ${drive.name} (${drive.path})
+                <br><small>${drive.size} - ${drive.model || 'Unknown model'}</small>
+            </div>
+        `;
+    }
+    
+    // Enable benchmark configuration section
+    const configDiv = document.getElementById('benchmark-config');
+    if (configDiv) {
+        configDiv.classList.remove('opacity-50');
+        configDiv.querySelector('.card-body').innerHTML = `
+            <p>Drive <strong>${drive.name}</strong> selected. Configure benchmark parameters below.</p>
+            <!-- Benchmark options will go here -->
+        `;
+    }
+}
+
 // Listen for HTMX events
 document.addEventListener('htmx:afterRequest', function(evt) {
+    // Render drives in home page
     if (evt.detail.target.id === 'drives-content') {
         renderDrives(JSON.parse(evt.detail.xhr.response));
     }
+    
+    // Render drive selector in benchmark page
+    if (evt.detail.target.id === 'drive-cards') {
+        renderDriveSelector(JSON.parse(evt.detail.xhr.response));
+    }
 });
 
-// Optional: Listen for HTMX load event as fallback
+// Listen for HTMX load event as fallback
 document.addEventListener('htmx:load', function(evt) {
-    if (evt.target.id === 'drives-content') {
+    if (evt.target.id === 'drive-cards') {
         // HTMX will load the content via hx-get
         // The afterRequest event will handle rendering
     }