usb-server/internal/web/static/app.js

// USB Server Web UI

const API_BASE = '';

// Tab navigation
document.querySelectorAll('.tab').forEach(tab => {
    tab.addEventListener('click', () => {
        document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
        document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
        tab.classList.add('active');
        document.getElementById('tab-' + tab.dataset.tab).classList.add('active');
    });
});

// Status updates
async function updateStatus() {
    try {
        const resp = await fetch(API_BASE + '/api/status');
        const data = await resp.json();

        const el = document.getElementById('status');
        if (data.connected) {
            el.textContent = 'Verbunden';
            el.className = 'status connected';
        } else {
            el.textContent = 'Nicht verbunden';
            el.className = 'status disconnected';
        }

        document.getElementById('mode-info').innerHTML =
            `<strong>Modus:</strong> ${data.mode === 'share' ? 'Freigeben' : 'Empfangen'} | ` +
            `<strong>Name:</strong> ${data.name} | ` +
            `<strong>Client ID:</strong> ${data.client_id ? data.client_id.substring(0, 8) + '...' : '-'}`;
    } catch (e) {
        const el = document.getElementById('status');
        el.textContent = 'Fehler';
        el.className = 'status disconnected';
    }
}

// Device list
async function updateDevices() {
    try {
        const resp = await fetch(API_BASE + '/api/devices');
        const data = await resp.json();
        renderDevices(data);
    } catch (e) {
        document.getElementById('device-list').innerHTML =
            '<p class="loading">Fehler beim Laden der Geraete</p>';
    }
}

function renderDevices(data) {
    const container = document.getElementById('device-list');

    if (data.mode === 'share') {
        renderShareDevices(container, data.local_devices || []);
    } else {
        renderUseDevices(container, data.available_devices || [], data.attached_devices || []);
    }
}

function renderShareDevices(container, devices) {
    if (!devices || devices.length === 0) {
        container.innerHTML = '<p class="no-devices">Keine USB-Geraete gefunden</p>';
        return;
    }

    container.innerHTML = devices.map(dev => `
        <div class="device-card">
            <div class="device-info">
                <div class="device-name">${escapeHtml(dev.name)}</div>
                <div class="device-details">
                    <span>Bus: ${dev.bus_id}</span>
                    <span>VID:PID: ${dev.vendor_id}:${dev.product_id}</span>
                    <span>Speed: ${speedName(dev.speed)}</span>
                </div>
            </div>
            <div class="device-status">
                <span class="badge ${dev.status === 'available' ? 'available' : 'in-use'}">
                    ${dev.status === 'available' ? 'Verfuegbar' : 'In Benutzung'}
                </span>
            </div>
        </div>
    `).join('');
}

function renderUseDevices(container, available, attached) {
    let html = '';

    // Attached devices first
    if (attached && attached.length > 0) {
        html += '<div class="client-header">Verbundene Geraete</div>';
        html += attached.map(dev => `
            <div class="device-card">
                <div class="device-info">
                    <div class="device-name">${escapeHtml(dev.name || dev.bus_id)}</div>
                    <div class="device-details">
                        <span>Von: ${escapeHtml(dev.client_name || dev.client_id)}</span>
                        ${dev.vendor_id ? `<span>VID:PID: ${dev.vendor_id}:${dev.product_id}</span>` : ''}
                        <span>VHCI Port: ${dev.vhci_port}</span>
                    </div>
                </div>
                <div class="device-status">
                    <label class="auto-connect-label" title="Beim Start automatisch verbinden">
                        <input type="checkbox" ${dev.auto_connect ? 'checked' : ''}
                            onchange="toggleAutoConnect('${dev.vendor_id}', '${dev.product_id}', this.checked)">
                        Autostart
                    </label>
                    <span class="badge attached">Verbunden</span>
                    <button class="btn small danger" onclick="detachDevice('${dev.client_id}', '${dev.bus_id}')">Trennen</button>
                </div>
            </div>
        `).join('');
    }

    // Group available by client
    const byClient = {};
    (available || []).forEach(dev => {
        const key = dev.client_id;
        if (!byClient[key]) {
            byClient[key] = { name: dev.client_name, devices: [] };
        }
        byClient[key].devices.push(dev);
    });

    if (Object.keys(byClient).length === 0 && (!attached || attached.length === 0)) {
        container.innerHTML = '<p class="no-devices">Keine Geraete verfuegbar. Warte auf Share-Clients...</p>';
        return;
    }

    for (const [clientId, info] of Object.entries(byClient)) {
        html += `<div class="client-header">${escapeHtml(info.name)} (${clientId.substring(0, 8)}...)</div>`;
        html += info.devices.map(dev => {
            const isAttached = (attached || []).some(a =>
                a.bus_id === dev.bus_id && a.client_id === clientId
            );
            return `
                <div class="device-card">
                    <div class="device-info">
                        <div class="device-name">${escapeHtml(dev.name)}</div>
                        <div class="device-details">
                            <span>Bus: ${dev.bus_id}</span>
                            <span>VID:PID: ${dev.vendor_id}:${dev.product_id}</span>
                            <span>Speed: ${speedName(dev.speed)}</span>
                        </div>
                    </div>
                    <div class="device-status">
                        ${dev.status === 'in_use'
                            ? `<span class="badge in-use">In Benutzung</span>
                               ${dev.allow_force_detach ? `<button class="btn small danger" onclick="forceDetach('${clientId}', '${dev.bus_id}')">Trennen</button>` : ''}`
                            : isAttached
                                ? '<span class="badge attached">Verbunden</span>'
                                : `<span class="badge available">Verfuegbar</span>
                                   <button class="btn small primary" onclick="attachDevice('${clientId}', '${dev.bus_id}')">Verbinden</button>`
                        }
                    </div>
                </div>
            `;
        }).join('');
    }

    container.innerHTML = html || '<p class="no-devices">Keine Geraete verfuegbar</p>';
}

// Attach/Detach
async function attachDevice(clientId, busId) {
    try {
        const resp = await fetch(API_BASE + '/api/attach', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ client_id: clientId, bus_id: busId })
        });
        const data = await resp.json();
        if (!data.ok) {
            alert('Fehler: ' + (data.error || 'Unbekannt'));
        }
        updateDevices();
    } catch (e) {
        alert('Verbindungsfehler: ' + e.message);
    }
}

async function detachDevice(clientId, busId) {
    try {
        const resp = await fetch(API_BASE + '/api/detach', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ client_id: clientId, bus_id: busId })
        });
        const data = await resp.json();
        if (!data.ok) {
            alert('Fehler: ' + (data.error || 'Unbekannt'));
        }
        updateDevices();
    } catch (e) {
        alert('Verbindungsfehler: ' + e.message);
    }
}

// Force detach
async function forceDetach(clientId, busId) {
    try {
        const resp = await fetch(API_BASE + '/api/force-detach', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ client_id: clientId, bus_id: busId })
        });
        const data = await resp.json();
        if (!data.ok) {
            alert('Fehler: ' + (data.error || 'Unbekannt'));
        }
        updateDevices();
    } catch (e) {
        alert('Verbindungsfehler: ' + e.message);
    }
}

// Auto-connect toggle
async function toggleAutoConnect(vendorId, productId, enabled) {
    try {
        const resp = await fetch(API_BASE + '/api/auto-connect', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ vendor_id: vendorId, product_id: productId, enabled: enabled })
        });
        const data = await resp.json();
        if (!data.ok) {
            alert('Fehler: ' + (data.error || 'Unbekannt'));
            updateDevices();
        }
    } catch (e) {
        alert('Fehler: ' + e.message);
        updateDevices();
    }
}

// Settings
async function loadSettings() {
    try {
        const resp = await fetch(API_BASE + '/api/config');
        const cfg = await resp.json();
        document.getElementById('relay-addr').value = cfg.relay_addr || '';
        document.getElementById('hash').value = cfg.hash || '';
        document.getElementById('mode').value = cfg.mode || 'use';
        document.getElementById('client-name').value = cfg.name || '';
        document.getElementById('web-port').value = cfg.web_port || 8080;
        document.getElementById('allow-force-detach').checked = cfg.allow_force_detach || false;
        document.getElementById('token1').value = cfg.token1 || '';
        document.getElementById('token2').value = cfg.token2 || '';
        document.getElementById('token3').value = cfg.token3 || '';
        if (cfg.hash) {
            document.getElementById('computed-hash').textContent = cfg.hash;
        }
    } catch (e) {
        console.error('Failed to load settings:', e);
    }
}

document.getElementById('settings-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    try {
        const resp = await fetch(API_BASE + '/api/config', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                relay_addr: document.getElementById('relay-addr').value,
                mode: document.getElementById('mode').value,
                name: document.getElementById('client-name').value,
                web_port: parseInt(document.getElementById('web-port').value),
                allow_force_detach: document.getElementById('allow-force-detach').checked,
            })
        });
        const data = await resp.json();
        if (data.ok) {
            alert('Einstellungen gespeichert. Neustart erforderlich fuer Aenderungen.');
        } else {
            alert('Fehler: ' + (data.error || 'Unbekannt'));
        }
    } catch (e) {
        alert('Fehler: ' + e.message);
    }
});

// Token generation
document.getElementById('generate-tokens').addEventListener('click', async () => {
    try {
        const resp = await fetch(API_BASE + '/api/generate-token', { method: 'POST' });
        const data = await resp.json();
        document.getElementById('token1').value = data.token1;
        document.getElementById('token2').value = data.token2;
        document.getElementById('token3').value = data.token3;
        document.getElementById('computed-hash').textContent = data.hash;
        document.getElementById('hash').value = data.hash;
    } catch (e) {
        alert('Fehler: ' + e.message);
    }
});

document.getElementById('apply-tokens').addEventListener('click', async () => {
    const token1 = document.getElementById('token1').value;
    const token2 = document.getElementById('token2').value;
    const token3 = document.getElementById('token3').value;

    if (!token1 || !token2 || !token3) {
        alert('Bitte alle 3 Tokens eingeben');
        return;
    }

    try {
        const resp = await fetch(API_BASE + '/api/apply-tokens', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ token1, token2, token3 })
        });
        const data = await resp.json();
        if (data.ok) {
            document.getElementById('computed-hash').textContent = data.hash;
            document.getElementById('hash').value = data.hash;
            alert('Tokens angewandt. Hash: ' + data.hash.substring(0, 16) + '...');
        } else {
            alert('Fehler: ' + (data.error || 'Unbekannt'));
        }
    } catch (e) {
        alert('Fehler: ' + e.message);
    }
});

// Service management
document.getElementById('install-service').addEventListener('click', async () => {
    try {
        const resp = await fetch(API_BASE + '/api/service/install', { method: 'POST' });
        const data = await resp.json();
        document.getElementById('service-status').textContent = data.message || data.error;
    } catch (e) {
        document.getElementById('service-status').textContent = 'Fehler: ' + e.message;
    }
});

document.getElementById('uninstall-service').addEventListener('click', async () => {
    try {
        const resp = await fetch(API_BASE + '/api/service/uninstall', { method: 'POST' });
        const data = await resp.json();
        document.getElementById('service-status').textContent = data.message || data.error;
    } catch (e) {
        document.getElementById('service-status').textContent = 'Fehler: ' + e.message;
    }
});

// Helpers
function speedName(speed) {
    const names = { 1: 'Low (1.5M)', 2: 'Full (12M)', 3: 'High (480M)', 5: 'Super (5G)', 6: 'Super+ (10G)' };
    return names[speed] || 'Unknown';
}

function escapeHtml(str) {
    if (!str) return '';
    return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}

// Init
loadSettings();
updateStatus();
updateDevices();

// Periodic updates
setInterval(updateStatus, 5000);
setInterval(updateDevices, 3000);