256 lines
8.6 KiB
JavaScript
256 lines
8.6 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
const openBtn = document.getElementById('led-tool-btn');
|
|
const modal = document.getElementById('led-tool-modal');
|
|
const closeBtn = document.getElementById('led-tool-close-btn');
|
|
const refreshPortsBtn = document.getElementById('led-tool-refresh-ports-btn');
|
|
const form = document.getElementById('led-tool-form');
|
|
const readBtn = document.getElementById('led-tool-read-btn');
|
|
const resetBtn = document.getElementById('led-tool-reset-btn');
|
|
const portSelect = document.getElementById('led-tool-port');
|
|
const outputEl = document.getElementById('led-tool-output');
|
|
const messageEl = document.getElementById('led-tool-message');
|
|
|
|
if (!openBtn || !modal || !form || !portSelect || !outputEl || !messageEl) {
|
|
return;
|
|
}
|
|
|
|
const showMessage = (text, type = 'success') => {
|
|
messageEl.textContent = text;
|
|
messageEl.className = `message ${type} show`;
|
|
};
|
|
|
|
const setOutput = (text) => {
|
|
outputEl.value = text || '';
|
|
};
|
|
|
|
const parseApiResponse = async (response) => {
|
|
const bodyText = await response.text();
|
|
let data = null;
|
|
try {
|
|
data = bodyText ? JSON.parse(bodyText) : {};
|
|
} catch (error) {
|
|
data = { error: bodyText || `HTTP ${response.status}` };
|
|
}
|
|
return data;
|
|
};
|
|
|
|
const setFieldValue = (id, value) => {
|
|
const el = document.getElementById(id);
|
|
if (!el) return;
|
|
if (value === undefined || value === null) return;
|
|
el.value = String(value);
|
|
};
|
|
|
|
const populateFormFromSettings = (settings) => {
|
|
if (!settings || typeof settings !== 'object') return false;
|
|
setFieldValue('led-tool-name', settings.name);
|
|
setFieldValue('led-tool-num-leds', settings.num_leds);
|
|
setFieldValue('led-tool-led-pin', settings.led_pin);
|
|
setFieldValue('led-tool-brightness', settings.brightness);
|
|
setFieldValue('led-tool-transport', settings.transport_type);
|
|
setFieldValue('led-tool-ssid', settings.ssid);
|
|
setFieldValue('led-tool-password', settings.password);
|
|
setFieldValue('led-tool-wifi-channel', settings.wifi_channel);
|
|
setFieldValue('led-tool-default', settings.default);
|
|
return true;
|
|
};
|
|
|
|
const loadPorts = async () => {
|
|
const defaultPort = '/dev/ttyACM0';
|
|
try {
|
|
const response = await fetch('/led-tool/ports');
|
|
const data = await response.json();
|
|
const previous = portSelect.value;
|
|
portSelect.innerHTML = '<option value="">Select a serial port</option>';
|
|
|
|
for (const port of data.ports || []) {
|
|
const option = document.createElement('option');
|
|
option.value = port.device;
|
|
option.textContent = `${port.device} - ${port.description || 'Unknown'}`;
|
|
portSelect.appendChild(option);
|
|
}
|
|
if (previous) {
|
|
portSelect.value = previous;
|
|
} else if ((data.ports || []).some((p) => p.device === defaultPort)) {
|
|
portSelect.value = defaultPort;
|
|
} else {
|
|
const fallback = document.createElement('option');
|
|
fallback.value = defaultPort;
|
|
fallback.textContent = `${defaultPort} - default`;
|
|
portSelect.appendChild(fallback);
|
|
portSelect.value = defaultPort;
|
|
}
|
|
|
|
if (!data.led_cli_exists) {
|
|
showMessage('led-tool/cli.py was not found on the host.', 'error');
|
|
} else if ((data.ports || []).length === 0) {
|
|
showMessage('No serial ports found.', 'error');
|
|
} else {
|
|
showMessage(`Found ${(data.ports || []).length} serial port(s).`, 'success');
|
|
}
|
|
} catch (error) {
|
|
showMessage(`Failed to read serial ports: ${error.message}`, 'error');
|
|
}
|
|
};
|
|
|
|
openBtn.addEventListener('click', () => {
|
|
modal.classList.add('active');
|
|
loadPorts();
|
|
});
|
|
|
|
if (closeBtn) {
|
|
closeBtn.addEventListener('click', () => {
|
|
modal.classList.remove('active');
|
|
});
|
|
}
|
|
|
|
if (refreshPortsBtn) {
|
|
refreshPortsBtn.addEventListener('click', () => {
|
|
loadPorts();
|
|
});
|
|
}
|
|
|
|
if (readBtn) {
|
|
readBtn.addEventListener('click', async () => {
|
|
const port = portSelect.value.trim();
|
|
if (!port) {
|
|
showMessage('Select a serial port first.', 'error');
|
|
return;
|
|
}
|
|
setOutput('Reading settings from device...');
|
|
showMessage('Reading settings over USB...', 'success');
|
|
try {
|
|
const response = await fetch(`/led-tool/settings?port=${encodeURIComponent(port)}`);
|
|
const data = await parseApiResponse(response);
|
|
if (!response.ok) {
|
|
showMessage(data.error || 'Read failed.', 'error');
|
|
setOutput(data.error || 'Request failed.');
|
|
return;
|
|
}
|
|
const output = [
|
|
`exit code: ${data.returncode}`,
|
|
'',
|
|
'stdout:',
|
|
data.stdout || '(none)',
|
|
'',
|
|
'stderr:',
|
|
data.stderr || '(none)',
|
|
].join('\n');
|
|
setOutput(output);
|
|
if (data.ok) {
|
|
const populated = populateFormFromSettings(data.settings);
|
|
if (populated) {
|
|
showMessage('Settings read and fields populated.', 'success');
|
|
} else {
|
|
showMessage('Settings read successfully.', 'success');
|
|
}
|
|
} else {
|
|
showMessage('Read completed with errors. Check output.', 'error');
|
|
}
|
|
} catch (error) {
|
|
showMessage(`Request failed: ${error.message}`, 'error');
|
|
setOutput(error.message);
|
|
}
|
|
});
|
|
}
|
|
|
|
if (resetBtn) {
|
|
resetBtn.addEventListener('click', async () => {
|
|
const port = portSelect.value.trim();
|
|
if (!port) {
|
|
showMessage('Select a serial port first.', 'error');
|
|
return;
|
|
}
|
|
setOutput('Resetting device and following output...');
|
|
showMessage('Resetting device over USB...', 'success');
|
|
try {
|
|
const response = await fetch('/led-tool/reset', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ port }),
|
|
});
|
|
const data = await parseApiResponse(response);
|
|
if (!response.ok) {
|
|
showMessage(data.error || 'Reset failed.', 'error');
|
|
setOutput(data.error || 'Request failed.');
|
|
return;
|
|
}
|
|
const output = [
|
|
`exit code: ${data.returncode}`,
|
|
'',
|
|
'stdout:',
|
|
data.stdout || '(none)',
|
|
'',
|
|
'stderr:',
|
|
data.stderr || '(none)',
|
|
].join('\n');
|
|
setOutput(output);
|
|
if (data.ok) {
|
|
showMessage('Device reset complete.', 'success');
|
|
} else {
|
|
showMessage('Reset completed with errors. Check output.', 'error');
|
|
}
|
|
} catch (error) {
|
|
showMessage(`Request failed: ${error.message}`, 'error');
|
|
setOutput(error.message);
|
|
}
|
|
});
|
|
}
|
|
|
|
form.addEventListener('submit', async (event) => {
|
|
event.preventDefault();
|
|
const port = portSelect.value.trim();
|
|
if (!port) {
|
|
showMessage('Select a serial port first.', 'error');
|
|
return;
|
|
}
|
|
|
|
const payload = {
|
|
port,
|
|
name: document.getElementById('led-tool-name')?.value?.trim() || '',
|
|
num_leds: document.getElementById('led-tool-num-leds')?.value?.trim() || '',
|
|
led_pin: document.getElementById('led-tool-led-pin')?.value?.trim() || '',
|
|
brightness: document.getElementById('led-tool-brightness')?.value?.trim() || '',
|
|
transport: document.getElementById('led-tool-transport')?.value?.trim() || '',
|
|
ssid: document.getElementById('led-tool-ssid')?.value?.trim() || '',
|
|
password: document.getElementById('led-tool-password')?.value?.trim() || '',
|
|
wifi_channel: document.getElementById('led-tool-wifi-channel')?.value?.trim() || '',
|
|
default: document.getElementById('led-tool-default')?.value?.trim() || '',
|
|
};
|
|
|
|
setOutput('Running led-tool command...');
|
|
showMessage('Running command over USB...', 'success');
|
|
try {
|
|
const response = await fetch('/led-tool/settings', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(payload),
|
|
});
|
|
const data = await parseApiResponse(response);
|
|
if (!response.ok) {
|
|
showMessage(data.error || 'Command failed.', 'error');
|
|
setOutput(data.error || 'Request failed.');
|
|
return;
|
|
}
|
|
const output = [
|
|
`exit code: ${data.returncode}`,
|
|
'',
|
|
'stdout:',
|
|
data.stdout || '(none)',
|
|
'',
|
|
'stderr:',
|
|
data.stderr || '(none)',
|
|
].join('\n');
|
|
setOutput(output);
|
|
if (data.ok) {
|
|
showMessage('Settings applied via USB.', 'success');
|
|
} else {
|
|
showMessage('Command completed with errors. Check output.', 'error');
|
|
}
|
|
} catch (error) {
|
|
showMessage(`Request failed: ${error.message}`, 'error');
|
|
setOutput(error.message);
|
|
}
|
|
});
|
|
});
|