disk_checker/static/js/main.js

/**
 * Disk Checker - Main JavaScript
 * 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');
    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);
    });
}

// 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));
    }
});

// Listen for HTMX load event as fallback
document.addEventListener('htmx:load', function(evt) {
    if (evt.target.id === 'drive-cards') {
        // HTMX will load the content via hx-get
        // The afterRequest event will handle rendering
    }
});