first commit

2026-02-18 22:01:54 +01:00
commit 5464e553b3
35 changed files with 5432 additions and 0 deletions
@@ -0,0 +1,322 @@
+// 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.bus_id)}</div>
+                    <div class="device-details">
+                        <span>Von: ${escapeHtml(dev.client_name || dev.client_id)}</span>
+                        <span>VHCI Port: ${dev.vhci_port}</span>
+                    </div>
+                </div>
+                <div class="device-status">
+                    <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>'
+                            : 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);
+    }
+}
+
+// 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('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),
+            })
+        });
+        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);
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>USB Server</title>
+    <link rel="stylesheet" href="/static/style.css">
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>USB Server</h1>
+            <div class="status" id="status">Nicht verbunden</div>
+        </header>
+
+        <nav>
+            <button class="tab active" data-tab="devices">Geraete</button>
+            <button class="tab" data-tab="settings">Einstellungen</button>
+            <button class="tab" data-tab="token">Token</button>
+            <button class="tab" data-tab="service">Service</button>
+        </nav>
+
+        <!-- Devices Tab -->
+        <section id="tab-devices" class="tab-content active">
+            <div id="mode-info" class="info-box"></div>
+            <div id="device-list" class="device-list">
+                <p class="loading">Lade Geraete...</p>
+            </div>
+        </section>
+
+        <!-- Settings Tab -->
+        <section id="tab-settings" class="tab-content">
+            <form id="settings-form">
+                <div class="form-group">
+                    <label for="relay-addr">Relay Server Adresse</label>
+                    <input type="text" id="relay-addr" placeholder="ws://localhost:8443">
+                </div>
+                <div class="form-group">
+                    <label for="hash">Hash</label>
+                    <input type="text" id="hash" placeholder="SHA256 Hash" readonly>
+                    <small>Wird aus den 3 Tokens berechnet</small>
+                </div>
+                <div class="form-group">
+                    <label for="mode">Modus</label>
+                    <select id="mode">
+                        <option value="share">Freigeben (Share)</option>
+                        <option value="use">Empfangen (Use)</option>
+                    </select>
+                </div>
+                <div class="form-group">
+                    <label for="client-name">Client Name</label>
+                    <input type="text" id="client-name" placeholder="Mein PC">
+                </div>
+                <div class="form-group">
+                    <label for="web-port">Web-UI Port</label>
+                    <input type="number" id="web-port" value="8080">
+                </div>
+                <button type="submit" class="btn primary">Speichern</button>
+            </form>
+        </section>
+
+        <!-- Token Tab -->
+        <section id="tab-token" class="tab-content">
+            <div class="form-group">
+                <label for="token1">Token 1</label>
+                <input type="text" id="token1" placeholder="Token 1">
+            </div>
+            <div class="form-group">
+                <label for="token2">Token 2</label>
+                <input type="text" id="token2" placeholder="Token 2">
+            </div>
+            <div class="form-group">
+                <label for="token3">Token 3</label>
+                <input type="text" id="token3" placeholder="Token 3">
+            </div>
+            <div class="form-group">
+                <label>Berechneter Hash</label>
+                <div id="computed-hash" class="hash-display">-</div>
+            </div>
+            <div class="button-group">
+                <button id="generate-tokens" class="btn primary">Neue Tokens Generieren</button>
+                <button id="apply-tokens" class="btn">Tokens Anwenden</button>
+            </div>
+        </section>
+
+        <!-- Service Tab -->
+        <section id="tab-service" class="tab-content">
+            <div class="info-box">
+                <p>USB Client als Systemdienst installieren fuer automatischen Start.</p>
+            </div>
+            <div class="button-group">
+                <button id="install-service" class="btn primary">Service Installieren</button>
+                <button id="uninstall-service" class="btn danger">Service Deinstallieren</button>
+            </div>
+            <div id="service-status" class="info-box" style="margin-top: 1rem;"></div>
+        </section>
+    </div>
+
+    <script src="/static/app.js"></script>
+</body>
+</html>
@@ -0,0 +1,281 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    background: #1a1a2e;
+    color: #e0e0e0;
+    min-height: 100vh;
+}
+
+.container {
+    max-width: 900px;
+    margin: 0 auto;
+    padding: 2rem 1rem;
+}
+
+header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 2rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid #333;
+}
+
+h1 {
+    color: #00d4ff;
+    font-size: 1.5rem;
+}
+
+.status {
+    padding: 0.3rem 0.8rem;
+    border-radius: 20px;
+    font-size: 0.85rem;
+    font-weight: 500;
+}
+
+.status.connected {
+    background: rgba(0, 200, 80, 0.2);
+    color: #00c850;
+    border: 1px solid #00c850;
+}
+
+.status.disconnected {
+    background: rgba(255, 80, 80, 0.2);
+    color: #ff5050;
+    border: 1px solid #ff5050;
+}
+
+nav {
+    display: flex;
+    gap: 0.5rem;
+    margin-bottom: 1.5rem;
+}
+
+.tab {
+    padding: 0.5rem 1.2rem;
+    background: #16213e;
+    border: 1px solid #333;
+    border-radius: 8px;
+    color: #999;
+    cursor: pointer;
+    font-size: 0.9rem;
+    transition: all 0.2s;
+}
+
+.tab:hover {
+    color: #ccc;
+    border-color: #555;
+}
+
+.tab.active {
+    background: #0f3460;
+    color: #00d4ff;
+    border-color: #00d4ff;
+}
+
+.tab-content {
+    display: none;
+}
+
+.tab-content.active {
+    display: block;
+}
+
+.device-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.device-card {
+    background: #16213e;
+    border: 1px solid #333;
+    border-radius: 12px;
+    padding: 1rem 1.2rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    transition: border-color 0.2s;
+}
+
+.device-card:hover {
+    border-color: #555;
+}
+
+.device-info {
+    flex: 1;
+}
+
+.device-name {
+    font-weight: 600;
+    font-size: 1rem;
+    margin-bottom: 0.3rem;
+}
+
+.device-details {
+    font-size: 0.8rem;
+    color: #888;
+}
+
+.device-details span {
+    margin-right: 1rem;
+}
+
+.device-status {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.badge {
+    padding: 0.2rem 0.6rem;
+    border-radius: 12px;
+    font-size: 0.75rem;
+    font-weight: 500;
+}
+
+.badge.available {
+    background: rgba(0, 200, 80, 0.15);
+    color: #00c850;
+}
+
+.badge.in-use {
+    background: rgba(255, 165, 0, 0.15);
+    color: #ffa500;
+}
+
+.badge.attached {
+    background: rgba(0, 212, 255, 0.15);
+    color: #00d4ff;
+}
+
+.btn {
+    padding: 0.5rem 1.2rem;
+    border: 1px solid #555;
+    border-radius: 8px;
+    background: #16213e;
+    color: #e0e0e0;
+    cursor: pointer;
+    font-size: 0.85rem;
+    transition: all 0.2s;
+}
+
+.btn:hover {
+    background: #1a2a4e;
+    border-color: #777;
+}
+
+.btn.primary {
+    background: #0f3460;
+    border-color: #00d4ff;
+    color: #00d4ff;
+}
+
+.btn.primary:hover {
+    background: #134080;
+}
+
+.btn.danger {
+    border-color: #ff5050;
+    color: #ff5050;
+}
+
+.btn.danger:hover {
+    background: #3a1010;
+}
+
+.btn.small {
+    padding: 0.3rem 0.8rem;
+    font-size: 0.8rem;
+}
+
+.btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.form-group {
+    margin-bottom: 1.2rem;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 0.4rem;
+    color: #aaa;
+    font-size: 0.85rem;
+}
+
+.form-group input,
+.form-group select {
+    width: 100%;
+    padding: 0.6rem 0.8rem;
+    background: #0d1b2a;
+    border: 1px solid #333;
+    border-radius: 8px;
+    color: #e0e0e0;
+    font-size: 0.9rem;
+}
+
+.form-group input:focus,
+.form-group select:focus {
+    outline: none;
+    border-color: #00d4ff;
+}
+
+.form-group small {
+    color: #666;
+    font-size: 0.75rem;
+    margin-top: 0.2rem;
+    display: block;
+}
+
+.info-box {
+    background: #16213e;
+    border: 1px solid #333;
+    border-radius: 8px;
+    padding: 1rem;
+    margin-bottom: 1rem;
+    font-size: 0.9rem;
+    color: #aaa;
+}
+
+.hash-display {
+    background: #0d1b2a;
+    padding: 0.6rem 0.8rem;
+    border-radius: 8px;
+    font-family: monospace;
+    font-size: 0.85rem;
+    word-break: break-all;
+    color: #00d4ff;
+}
+
+.button-group {
+    display: flex;
+    gap: 0.75rem;
+    flex-wrap: wrap;
+}
+
+.loading {
+    color: #666;
+    text-align: center;
+    padding: 2rem;
+}
+
+.client-header {
+    font-size: 0.85rem;
+    color: #00d4ff;
+    margin: 1rem 0 0.5rem;
+    padding-bottom: 0.3rem;
+    border-bottom: 1px solid #222;
+}
+
+.no-devices {
+    text-align: center;
+    color: #666;
+    padding: 2rem;
+}