348 lines
13 KiB
JavaScript
348 lines
13 KiB
JavaScript
// 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>'
|
|
: 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);
|
|
}
|
|
}
|
|
|
|
// 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('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, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
|
|
}
|
|
|
|
// Init
|
|
loadSettings();
|
|
updateStatus();
|
|
updateDevices();
|
|
|
|
// Periodic updates
|
|
setInterval(updateStatus, 5000);
|
|
setInterval(updateDevices, 3000);
|