alexei.dolgolyov
1410a8d2cb
- Add ScriptParameterConfig model (string, integer, float, boolean, select types) - Server-side validation at both define-time and execute-time - Parameters passed as SCRIPT_PARAM_* environment variables - Web UI parameter editor in script create/edit dialog (add/remove/reorder) - Icon-grid selector component (ported from wled-screen-controller) - Replace audio device dropdown with icon-grid selector - Replace callback event dropdown with icon-grid selector - Localization for parameter UI (en, ru)
856 lines
33 KiB
JavaScript
856 lines
33 KiB
JavaScript
// ============================================================
|
|
// Scripts: CRUD, quick access, execution dialog
|
|
// ============================================================
|
|
|
|
import {
|
|
t, showToast, escapeHtml, closeDialog, showConfirm,
|
|
resolveMdiIcons, fetchMdiIcon,
|
|
scripts, setScripts,
|
|
getAuthHeaders, hasCredentials,
|
|
} from './core.js';
|
|
import { IconSelect } from './icon-select.js';
|
|
import { paramTypeIcons } from './icons.js';
|
|
|
|
export let scriptFormDirty = false;
|
|
export function setScriptFormDirty(value) { scriptFormDirty = value; }
|
|
|
|
export async function loadScripts() {
|
|
try {
|
|
const response = await fetch('/api/scripts/list', {
|
|
headers: getAuthHeaders()
|
|
});
|
|
|
|
if (response.ok) {
|
|
setScripts(await response.json());
|
|
displayQuickAccess();
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading scripts:', error);
|
|
}
|
|
}
|
|
|
|
let _quickAccessGen = 0;
|
|
export async function displayQuickAccess() {
|
|
const gen = ++_quickAccessGen;
|
|
const grid = document.getElementById('scripts-grid');
|
|
|
|
const fragment = document.createDocumentFragment();
|
|
const hasScripts = scripts.length > 0;
|
|
let hasLinks = false;
|
|
|
|
scripts.forEach(script => {
|
|
const button = document.createElement('button');
|
|
button.className = 'script-btn';
|
|
button.onclick = () => executeScript(script.name, button);
|
|
|
|
if (script.icon) {
|
|
const iconEl = document.createElement('div');
|
|
iconEl.className = 'script-icon';
|
|
iconEl.setAttribute('data-mdi-icon', script.icon);
|
|
button.appendChild(iconEl);
|
|
}
|
|
|
|
const label = document.createElement('div');
|
|
label.className = 'script-label';
|
|
label.textContent = script.label || script.name;
|
|
button.appendChild(label);
|
|
|
|
if (script.description) {
|
|
const description = document.createElement('div');
|
|
description.className = 'script-description';
|
|
description.textContent = script.description;
|
|
button.appendChild(description);
|
|
}
|
|
|
|
fragment.appendChild(button);
|
|
});
|
|
|
|
try {
|
|
if (hasCredentials()) {
|
|
const response = await fetch('/api/links/list', {
|
|
headers: getAuthHeaders()
|
|
});
|
|
if (gen !== _quickAccessGen) return;
|
|
if (response.ok) {
|
|
const links = await response.json();
|
|
hasLinks = links.length > 0;
|
|
links.forEach(link => {
|
|
const card = document.createElement('a');
|
|
card.className = 'script-btn link-card';
|
|
card.href = link.url;
|
|
card.target = '_blank';
|
|
card.rel = 'noopener noreferrer';
|
|
|
|
if (link.icon) {
|
|
const iconEl = document.createElement('div');
|
|
iconEl.className = 'script-icon';
|
|
iconEl.setAttribute('data-mdi-icon', link.icon);
|
|
card.appendChild(iconEl);
|
|
}
|
|
|
|
const label = document.createElement('div');
|
|
label.className = 'script-label';
|
|
label.textContent = link.label || link.name;
|
|
card.appendChild(label);
|
|
|
|
if (link.description) {
|
|
const desc = document.createElement('div');
|
|
desc.className = 'script-description';
|
|
desc.textContent = link.description;
|
|
card.appendChild(desc);
|
|
}
|
|
|
|
fragment.appendChild(card);
|
|
});
|
|
}
|
|
}
|
|
} catch (e) {
|
|
if (gen !== _quickAccessGen) return;
|
|
console.warn('Failed to load links for quick access:', e);
|
|
}
|
|
|
|
if (!hasScripts && !hasLinks) {
|
|
const empty = document.createElement('div');
|
|
empty.className = 'scripts-empty empty-state-illustration';
|
|
empty.innerHTML = `<svg viewBox="0 0 64 64"><path d="M20 8l-8 48"/><path d="M44 8l8 48"/><path d="M10 24h44"/><path d="M8 40h44"/></svg><p>${t('quick_access.no_items')}</p>`;
|
|
fragment.prepend(empty);
|
|
}
|
|
|
|
grid.innerHTML = '';
|
|
grid.appendChild(fragment);
|
|
resolveMdiIcons(grid);
|
|
}
|
|
|
|
function _getScriptParams(scriptName) {
|
|
const script = scripts.find(s => s.name === scriptName);
|
|
return (script && script.parameters) ? script.parameters : {};
|
|
}
|
|
|
|
async function executeScript(scriptName, buttonElement) {
|
|
const paramDefs = _getScriptParams(scriptName);
|
|
if (Object.keys(paramDefs).length > 0) {
|
|
_showParamsInputDialog(scriptName, paramDefs, async (params) => {
|
|
buttonElement.classList.add('executing');
|
|
try {
|
|
await _doExecuteScript(scriptName, params);
|
|
} finally {
|
|
buttonElement.classList.remove('executing');
|
|
}
|
|
});
|
|
return;
|
|
}
|
|
|
|
buttonElement.classList.add('executing');
|
|
try {
|
|
await _doExecuteScript(scriptName, {});
|
|
} finally {
|
|
buttonElement.classList.remove('executing');
|
|
}
|
|
}
|
|
|
|
async function _doExecuteScript(scriptName, params) {
|
|
try {
|
|
const response = await fetch(`/api/scripts/execute/${scriptName}`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json', ...getAuthHeaders() },
|
|
body: JSON.stringify({ params })
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (response.ok && result.success) {
|
|
showToast(t('scripts.msg.executed', { name: scriptName }), 'success');
|
|
} else {
|
|
showToast(result.detail || t('scripts.msg.execute_failed', { name: scriptName }), 'error');
|
|
}
|
|
} catch (error) {
|
|
console.error(`Error executing script ${scriptName}:`, error);
|
|
showToast(t('scripts.msg.execute_error', { name: scriptName }), 'error');
|
|
}
|
|
}
|
|
|
|
// ============================================================
|
|
// Script Parameters Input Dialog (execution-time)
|
|
// ============================================================
|
|
|
|
let _paramsCallback = null;
|
|
let _paramsScriptName = null;
|
|
let _paramsIconSelects = null;
|
|
|
|
function _showParamsInputDialog(scriptName, paramDefs, callback) {
|
|
_paramsCallback = callback;
|
|
_paramsScriptName = scriptName;
|
|
|
|
const dialog = document.getElementById('scriptParamsDialog');
|
|
const title = document.getElementById('scriptParamsDialogTitle');
|
|
const container = document.getElementById('scriptParamsInputs');
|
|
|
|
const script = scripts.find(s => s.name === scriptName);
|
|
title.textContent = script ? (script.label || scriptName) : scriptName;
|
|
container.innerHTML = '';
|
|
|
|
// Track IconSelect instances for cleanup
|
|
if (!_paramsIconSelects) _paramsIconSelects = [];
|
|
|
|
for (const [pname, pdef] of Object.entries(paramDefs)) {
|
|
const wrapper = document.createElement('label');
|
|
|
|
const labelText = document.createElement('span');
|
|
labelText.textContent = pname + (pdef.required ? ' *' : '');
|
|
wrapper.appendChild(labelText);
|
|
|
|
if (pdef.description) {
|
|
const hint = document.createElement('small');
|
|
hint.className = 'param-hint';
|
|
hint.textContent = pdef.description;
|
|
wrapper.appendChild(hint);
|
|
}
|
|
|
|
let input;
|
|
if (pdef.type === 'select' && pdef.options) {
|
|
input = document.createElement('select');
|
|
if (!pdef.required) {
|
|
const opt = document.createElement('option');
|
|
opt.value = '';
|
|
opt.textContent = '—';
|
|
input.appendChild(opt);
|
|
}
|
|
for (const optVal of pdef.options) {
|
|
const opt = document.createElement('option');
|
|
opt.value = optVal;
|
|
opt.textContent = optVal;
|
|
if (pdef.default !== undefined && pdef.default !== null && String(pdef.default) === optVal) {
|
|
opt.selected = true;
|
|
}
|
|
input.appendChild(opt);
|
|
}
|
|
input.dataset.paramName = pname;
|
|
input.dataset.paramType = pdef.type;
|
|
if (pdef.required) input.required = true;
|
|
wrapper.appendChild(input);
|
|
|
|
// Enhance with icon grid if few options
|
|
if (pdef.options.length <= 10) {
|
|
const selItems = pdef.options.map(o => ({ value: o, icon: '', label: o }));
|
|
const cols = Math.min(pdef.options.length, 4);
|
|
const isel = new IconSelect({ target: input, items: selItems, columns: cols });
|
|
_paramsIconSelects.push(isel);
|
|
}
|
|
} else if (pdef.type === 'boolean') {
|
|
const boolSvgTrue = '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>';
|
|
const boolSvgFalse = '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>';
|
|
|
|
input = document.createElement('select');
|
|
const optTrue = document.createElement('option');
|
|
optTrue.value = 'true';
|
|
optTrue.textContent = 'true';
|
|
const optFalse = document.createElement('option');
|
|
optFalse.value = 'false';
|
|
optFalse.textContent = 'false';
|
|
input.appendChild(optTrue);
|
|
input.appendChild(optFalse);
|
|
if (pdef.default !== undefined && pdef.default !== null) {
|
|
input.value = String(pdef.default);
|
|
}
|
|
input.dataset.paramName = pname;
|
|
input.dataset.paramType = pdef.type;
|
|
if (pdef.required) input.required = true;
|
|
wrapper.appendChild(input);
|
|
|
|
// Enhance with icon grid
|
|
const isel = new IconSelect({
|
|
target: input,
|
|
items: [
|
|
{ value: 'true', icon: boolSvgTrue, label: 'True' },
|
|
{ value: 'false', icon: boolSvgFalse, label: 'False' },
|
|
],
|
|
columns: 2,
|
|
});
|
|
_paramsIconSelects.push(isel);
|
|
} else if (pdef.type === 'integer' || pdef.type === 'float') {
|
|
input = document.createElement('input');
|
|
input.type = 'number';
|
|
if (pdef.type === 'float') input.step = 'any';
|
|
if (pdef.min !== undefined && pdef.min !== null) input.min = pdef.min;
|
|
if (pdef.max !== undefined && pdef.max !== null) input.max = pdef.max;
|
|
if (pdef.default !== undefined && pdef.default !== null) input.value = pdef.default;
|
|
input.dataset.paramName = pname;
|
|
input.dataset.paramType = pdef.type;
|
|
if (pdef.required) input.required = true;
|
|
wrapper.appendChild(input);
|
|
} else {
|
|
input = document.createElement('input');
|
|
input.type = 'text';
|
|
if (pdef.default !== undefined && pdef.default !== null) input.value = pdef.default;
|
|
input.dataset.paramName = pname;
|
|
input.dataset.paramType = pdef.type;
|
|
if (pdef.required) input.required = true;
|
|
wrapper.appendChild(input);
|
|
}
|
|
|
|
container.appendChild(wrapper);
|
|
}
|
|
|
|
document.body.classList.add('dialog-open');
|
|
dialog.showModal();
|
|
}
|
|
|
|
export function closeScriptParamsDialog() {
|
|
const dialog = document.getElementById('scriptParamsDialog');
|
|
_paramsCallback = null;
|
|
_paramsScriptName = null;
|
|
// Destroy icon selects from execution dialog
|
|
if (_paramsIconSelects) {
|
|
_paramsIconSelects.forEach(isel => isel.destroy());
|
|
_paramsIconSelects = null;
|
|
}
|
|
closeDialog(dialog);
|
|
document.body.classList.remove('dialog-open');
|
|
}
|
|
|
|
export async function submitScriptWithParams(event) {
|
|
event.preventDefault();
|
|
const container = document.getElementById('scriptParamsInputs');
|
|
const inputs = container.querySelectorAll('[data-param-name]');
|
|
const params = {};
|
|
|
|
for (const input of inputs) {
|
|
const name = input.dataset.paramName;
|
|
const type = input.dataset.paramType;
|
|
let val = input.value;
|
|
|
|
if (val === '' && !input.required) continue;
|
|
if (val === '') continue;
|
|
|
|
if (type === 'integer') val = parseInt(val, 10);
|
|
else if (type === 'float') val = parseFloat(val);
|
|
else if (type === 'boolean') val = val === 'true';
|
|
|
|
params[name] = val;
|
|
}
|
|
|
|
const callback = _paramsCallback;
|
|
closeScriptParamsDialog();
|
|
|
|
if (callback) {
|
|
await callback(params);
|
|
}
|
|
}
|
|
|
|
// ============================================================
|
|
// Script Management CRUD
|
|
// ============================================================
|
|
|
|
let _loadScriptsPromise = null;
|
|
export async function loadScriptsTable() {
|
|
if (_loadScriptsPromise) return _loadScriptsPromise;
|
|
_loadScriptsPromise = _loadScriptsTableImpl();
|
|
_loadScriptsPromise.finally(() => { _loadScriptsPromise = null; });
|
|
return _loadScriptsPromise;
|
|
}
|
|
|
|
async function _loadScriptsTableImpl() {
|
|
const tbody = document.getElementById('scriptsTableBody');
|
|
|
|
try {
|
|
const response = await fetch('/api/scripts/list', {
|
|
headers: getAuthHeaders()
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Failed to fetch scripts');
|
|
}
|
|
|
|
const scriptsList = await response.json();
|
|
|
|
if (scriptsList.length === 0) {
|
|
tbody.innerHTML = '<tr><td colspan="5" class="empty-state"><div class="empty-state-illustration"><svg viewBox="0 0 64 64"><rect x="8" y="4" width="48" height="56" rx="4"/><path d="M20 20h24M20 32h16M20 44h20"/></svg><p>' + t('scripts.empty') + '</p></div></td></tr>';
|
|
return;
|
|
}
|
|
|
|
tbody.innerHTML = scriptsList.map(script => `
|
|
<tr>
|
|
<td><span class="name-with-icon">${script.icon ? `<span class="table-icon" data-mdi-icon="${escapeHtml(script.icon)}"></span>` : ''}<code>${escapeHtml(script.name)}</code></span></td>
|
|
<td>${escapeHtml(script.label || script.name)}</td>
|
|
<td style="max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"
|
|
title="${escapeHtml(script.command || 'N/A')}">${escapeHtml(script.command || 'N/A')}</td>
|
|
<td>${script.timeout}s</td>
|
|
<td>
|
|
<div class="action-buttons">
|
|
<button class="action-btn execute" data-action="execute" data-script-name="${escapeHtml(script.name)}" title="Execute script">
|
|
<svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
|
|
</button>
|
|
<button class="action-btn" data-action="edit" data-script-name="${escapeHtml(script.name)}" title="Edit script">
|
|
<svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
|
|
</button>
|
|
<button class="action-btn delete" data-action="delete" data-script-name="${escapeHtml(script.name)}" title="Delete script">
|
|
<svg viewBox="0 0 24 24"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
`).join('');
|
|
resolveMdiIcons(tbody);
|
|
} catch (error) {
|
|
console.error('Error loading scripts:', error);
|
|
tbody.innerHTML = '<tr><td colspan="5" class="empty-state" style="color: var(--error);">Failed to load scripts</td></tr>';
|
|
}
|
|
}
|
|
|
|
export function showAddScriptDialog() {
|
|
const dialog = document.getElementById('scriptDialog');
|
|
const form = document.getElementById('scriptForm');
|
|
const title = document.getElementById('dialogTitle');
|
|
|
|
form.reset();
|
|
document.getElementById('scriptOriginalName').value = '';
|
|
document.getElementById('scriptIsEdit').value = 'false';
|
|
document.getElementById('scriptName').disabled = false;
|
|
document.getElementById('scriptIconPreview').innerHTML = '';
|
|
document.getElementById('scriptParamsContainer').innerHTML = '';
|
|
title.textContent = t('scripts.dialog.add');
|
|
|
|
scriptFormDirty = false;
|
|
|
|
document.body.classList.add('dialog-open');
|
|
dialog.showModal();
|
|
}
|
|
|
|
export async function showEditScriptDialog(scriptName) {
|
|
const dialog = document.getElementById('scriptDialog');
|
|
const title = document.getElementById('dialogTitle');
|
|
|
|
try {
|
|
const response = await fetch('/api/scripts/list', {
|
|
headers: getAuthHeaders()
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Failed to fetch script details');
|
|
}
|
|
|
|
const scriptsList = await response.json();
|
|
const script = scriptsList.find(s => s.name === scriptName);
|
|
|
|
if (!script) {
|
|
showToast('Script not found', 'error');
|
|
return;
|
|
}
|
|
|
|
document.getElementById('scriptOriginalName').value = scriptName;
|
|
document.getElementById('scriptIsEdit').value = 'true';
|
|
document.getElementById('scriptName').value = scriptName;
|
|
document.getElementById('scriptName').disabled = true;
|
|
document.getElementById('scriptLabel').value = script.label || '';
|
|
document.getElementById('scriptCommand').value = script.command || '';
|
|
document.getElementById('scriptDescription').value = script.description || '';
|
|
document.getElementById('scriptIcon').value = script.icon || '';
|
|
document.getElementById('scriptTimeout').value = script.timeout || 30;
|
|
|
|
const preview = document.getElementById('scriptIconPreview');
|
|
if (script.icon) {
|
|
fetchMdiIcon(script.icon).then(svg => { preview.innerHTML = svg; });
|
|
} else {
|
|
preview.innerHTML = '';
|
|
}
|
|
|
|
// Populate parameters
|
|
const paramsContainer = document.getElementById('scriptParamsContainer');
|
|
paramsContainer.innerHTML = '';
|
|
if (script.parameters) {
|
|
for (const [pname, pdef] of Object.entries(script.parameters)) {
|
|
_addParameterRowWithData(pname, pdef);
|
|
}
|
|
}
|
|
|
|
title.textContent = t('scripts.dialog.edit');
|
|
scriptFormDirty = false;
|
|
|
|
document.body.classList.add('dialog-open');
|
|
dialog.showModal();
|
|
} catch (error) {
|
|
console.error('Error loading script for edit:', error);
|
|
showToast('Failed to load script details', 'error');
|
|
}
|
|
}
|
|
|
|
export async function closeScriptDialog() {
|
|
if (scriptFormDirty) {
|
|
if (!await showConfirm(t('scripts.confirm.unsaved'))) {
|
|
return;
|
|
}
|
|
}
|
|
|
|
const dialog = document.getElementById('scriptDialog');
|
|
scriptFormDirty = false;
|
|
closeDialog(dialog);
|
|
document.body.classList.remove('dialog-open');
|
|
}
|
|
|
|
export async function saveScript(event) {
|
|
event.preventDefault();
|
|
|
|
const submitBtn = event.target.querySelector('button[type="submit"]');
|
|
if (submitBtn) submitBtn.disabled = true;
|
|
|
|
const isEdit = document.getElementById('scriptIsEdit').value === 'true';
|
|
const scriptName = isEdit ?
|
|
document.getElementById('scriptOriginalName').value :
|
|
document.getElementById('scriptName').value;
|
|
|
|
const data = {
|
|
command: document.getElementById('scriptCommand').value,
|
|
label: document.getElementById('scriptLabel').value || null,
|
|
description: document.getElementById('scriptDescription').value || '',
|
|
icon: document.getElementById('scriptIcon').value || null,
|
|
timeout: parseInt(document.getElementById('scriptTimeout').value) || 30,
|
|
shell: true,
|
|
parameters: _collectParameterDefinitions(),
|
|
};
|
|
|
|
const endpoint = isEdit ?
|
|
`/api/scripts/update/${scriptName}` :
|
|
`/api/scripts/create/${scriptName}`;
|
|
|
|
const method = isEdit ? 'PUT' : 'POST';
|
|
|
|
try {
|
|
const response = await fetch(endpoint, {
|
|
method,
|
|
headers: { 'Content-Type': 'application/json', ...getAuthHeaders() },
|
|
body: JSON.stringify(data)
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (response.ok && result.success) {
|
|
showToast(`Script ${isEdit ? 'updated' : 'created'} successfully`, 'success');
|
|
scriptFormDirty = false;
|
|
closeScriptDialog();
|
|
} else {
|
|
showToast(result.detail || `Failed to ${isEdit ? 'update' : 'create'} script`, 'error');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error saving script:', error);
|
|
showToast(`Error ${isEdit ? 'updating' : 'creating'} script`, 'error');
|
|
} finally {
|
|
if (submitBtn) submitBtn.disabled = false;
|
|
}
|
|
}
|
|
|
|
export async function deleteScriptConfirm(scriptName) {
|
|
if (!await showConfirm(t('scripts.confirm.delete').replace('{name}', scriptName))) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch(`/api/scripts/delete/${scriptName}`, {
|
|
method: 'DELETE',
|
|
headers: getAuthHeaders()
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (response.ok && result.success) {
|
|
showToast('Script deleted successfully', 'success');
|
|
} else {
|
|
showToast(result.detail || 'Failed to delete script', 'error');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error deleting script:', error);
|
|
showToast('Error deleting script', 'error');
|
|
}
|
|
}
|
|
|
|
// ============================================================
|
|
// Execution Result Dialog (shared by scripts and callbacks)
|
|
// ============================================================
|
|
|
|
export function closeExecutionDialog() {
|
|
const dialog = document.getElementById('executionDialog');
|
|
closeDialog(dialog);
|
|
document.body.classList.remove('dialog-open');
|
|
}
|
|
|
|
function showExecutionResult(name, result, type = 'script') {
|
|
const dialog = document.getElementById('executionDialog');
|
|
const title = document.getElementById('executionDialogTitle');
|
|
const statusDiv = document.getElementById('executionStatus');
|
|
const outputSection = document.getElementById('outputSection');
|
|
const errorSection = document.getElementById('errorSection');
|
|
const outputPre = document.getElementById('executionOutput');
|
|
const errorPre = document.getElementById('executionError');
|
|
|
|
title.textContent = `Execution Result: ${name}`;
|
|
|
|
const success = result.success && result.exit_code === 0;
|
|
const statusClass = success ? 'success' : 'error';
|
|
const statusText = success ? 'Success' : 'Failed';
|
|
|
|
statusDiv.innerHTML = `
|
|
<div class="status-item ${statusClass}">
|
|
<label>Status</label>
|
|
<value>${statusText}</value>
|
|
</div>
|
|
<div class="status-item">
|
|
<label>Exit Code</label>
|
|
<value>${result.exit_code !== undefined ? result.exit_code : 'N/A'}</value>
|
|
</div>
|
|
<div class="status-item">
|
|
<label>Duration</label>
|
|
<value>${result.execution_time !== undefined && result.execution_time !== null ? result.execution_time.toFixed(3) + 's' : 'N/A'}</value>
|
|
</div>
|
|
`;
|
|
|
|
outputSection.style.display = 'block';
|
|
if (result.stdout && result.stdout.trim()) {
|
|
outputPre.textContent = result.stdout;
|
|
} else {
|
|
outputPre.textContent = '(no output)';
|
|
outputPre.style.fontStyle = 'italic';
|
|
outputPre.style.color = 'var(--text-secondary)';
|
|
}
|
|
|
|
if (result.stderr && result.stderr.trim()) {
|
|
errorSection.style.display = 'block';
|
|
errorPre.textContent = result.stderr;
|
|
errorPre.style.fontStyle = 'normal';
|
|
errorPre.style.color = 'var(--error)';
|
|
} else if (!success && result.error) {
|
|
errorSection.style.display = 'block';
|
|
errorPre.textContent = result.error;
|
|
errorPre.style.fontStyle = 'normal';
|
|
errorPre.style.color = 'var(--error)';
|
|
} else {
|
|
errorSection.style.display = 'none';
|
|
}
|
|
|
|
dialog.showModal();
|
|
}
|
|
|
|
export async function executeScriptDebug(scriptName) {
|
|
const paramDefs = _getScriptParams(scriptName);
|
|
if (Object.keys(paramDefs).length > 0) {
|
|
_showParamsInputDialog(scriptName, paramDefs, (params) => _executeScriptDebugWithParams(scriptName, params));
|
|
return;
|
|
}
|
|
await _executeScriptDebugWithParams(scriptName, {});
|
|
}
|
|
|
|
async function _executeScriptDebugWithParams(scriptName, params) {
|
|
const dialog = document.getElementById('executionDialog');
|
|
const title = document.getElementById('executionDialogTitle');
|
|
const statusDiv = document.getElementById('executionStatus');
|
|
|
|
title.textContent = `Executing: ${scriptName}`;
|
|
statusDiv.innerHTML = `
|
|
<div class="status-item">
|
|
<label>Status</label>
|
|
<value><span class="loading-spinner"></span> Running...</value>
|
|
</div>
|
|
`;
|
|
document.getElementById('outputSection').style.display = 'none';
|
|
document.getElementById('errorSection').style.display = 'none';
|
|
document.body.classList.add('dialog-open');
|
|
dialog.showModal();
|
|
|
|
try {
|
|
const response = await fetch(`/api/scripts/execute/${scriptName}`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json', ...getAuthHeaders() },
|
|
body: JSON.stringify({ params })
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (response.ok) {
|
|
showExecutionResult(scriptName, result, 'script');
|
|
} else {
|
|
showExecutionResult(scriptName, {
|
|
success: false,
|
|
exit_code: -1,
|
|
error: result.detail || 'Execution failed',
|
|
stderr: result.detail || 'Unknown error'
|
|
}, 'script');
|
|
}
|
|
} catch (error) {
|
|
console.error(`Error executing script ${scriptName}:`, error);
|
|
showExecutionResult(scriptName, {
|
|
success: false,
|
|
exit_code: -1,
|
|
error: error.message,
|
|
stderr: `Network error: ${error.message}`
|
|
}, 'script');
|
|
}
|
|
}
|
|
|
|
// ============================================================
|
|
// Parameter Definition Editor (CRUD dialog)
|
|
// ============================================================
|
|
|
|
const PARAM_TYPES = ['string', 'integer', 'float', 'boolean', 'select'];
|
|
|
|
export function addParameterRow() {
|
|
_addParameterRowWithData('', {});
|
|
scriptFormDirty = true;
|
|
}
|
|
|
|
const _paramTypeItems = PARAM_TYPES.map(pt => ({
|
|
value: pt,
|
|
icon: paramTypeIcons[pt] || '',
|
|
label: pt.charAt(0).toUpperCase() + pt.slice(1),
|
|
}));
|
|
|
|
function _addParameterRowWithData(name, def) {
|
|
const container = document.getElementById('scriptParamsContainer');
|
|
const row = document.createElement('div');
|
|
row.className = 'param-row';
|
|
|
|
row.innerHTML = `
|
|
<div class="param-row-header">
|
|
<input type="text" class="param-name" value="${escapeHtml(name)}"
|
|
placeholder="${t('scripts.params.name_placeholder')}" pattern="[a-zA-Z][a-zA-Z0-9_]*">
|
|
<select class="param-type">
|
|
${PARAM_TYPES.map(pt => `<option value="${pt}" ${def.type === pt ? 'selected' : ''}>${pt}</option>`).join('')}
|
|
</select>
|
|
<label class="param-required-label" title="${t('scripts.params.required')}">
|
|
<input type="checkbox" class="param-required" ${def.required ? 'checked' : ''}>
|
|
<span>*</span>
|
|
</label>
|
|
<button type="button" class="param-remove-btn" title="${t('scripts.params.remove')}">×</button>
|
|
</div>
|
|
<div class="param-row-details">
|
|
<input type="text" class="param-description" value="${escapeHtml(def.description || '')}"
|
|
placeholder="${t('scripts.params.description_placeholder')}">
|
|
<div class="param-row-extra">
|
|
<input type="text" class="param-default" value="${def.default !== undefined && def.default !== null ? escapeHtml(String(def.default)) : ''}"
|
|
placeholder="${t('scripts.params.default_placeholder')}">
|
|
<input type="text" class="param-min" value="${def.min !== undefined && def.min !== null ? def.min : ''}"
|
|
placeholder="Min" style="display:${def.type === 'integer' || def.type === 'float' ? '' : 'none'}">
|
|
<input type="text" class="param-max" value="${def.max !== undefined && def.max !== null ? def.max : ''}"
|
|
placeholder="Max" style="display:${def.type === 'integer' || def.type === 'float' ? '' : 'none'}">
|
|
<input type="text" class="param-options" value="${def.options ? def.options.join(', ') : ''}"
|
|
placeholder="${t('scripts.params.options_placeholder')}" style="display:${def.type === 'select' ? '' : 'none'}">
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
// Enhance the type <select> with icon grid
|
|
const typeSelect = row.querySelector('.param-type');
|
|
const iconSelect = new IconSelect({
|
|
target: typeSelect,
|
|
items: _paramTypeItems,
|
|
columns: 5,
|
|
onChange: () => {
|
|
const isNumeric = typeSelect.value === 'integer' || typeSelect.value === 'float';
|
|
const isSelect = typeSelect.value === 'select';
|
|
row.querySelector('.param-min').style.display = isNumeric ? '' : 'none';
|
|
row.querySelector('.param-max').style.display = isNumeric ? '' : 'none';
|
|
row.querySelector('.param-options').style.display = isSelect ? '' : 'none';
|
|
scriptFormDirty = true;
|
|
},
|
|
});
|
|
|
|
row.querySelector('.param-remove-btn').addEventListener('click', () => {
|
|
iconSelect.destroy();
|
|
row.remove();
|
|
scriptFormDirty = true;
|
|
});
|
|
|
|
// Mark dirty on any input change
|
|
row.querySelectorAll('input').forEach(el => {
|
|
el.addEventListener('input', () => { scriptFormDirty = true; });
|
|
});
|
|
|
|
container.appendChild(row);
|
|
}
|
|
|
|
function _collectParameterDefinitions() {
|
|
const container = document.getElementById('scriptParamsContainer');
|
|
const rows = container.querySelectorAll('.param-row');
|
|
const params = {};
|
|
|
|
for (const row of rows) {
|
|
const name = row.querySelector('.param-name').value.trim();
|
|
if (!name) continue;
|
|
|
|
const type = row.querySelector('.param-type').value;
|
|
const def = { type };
|
|
|
|
const description = row.querySelector('.param-description').value.trim();
|
|
if (description) def.description = description;
|
|
|
|
if (row.querySelector('.param-required').checked) def.required = true;
|
|
|
|
const defaultVal = row.querySelector('.param-default').value.trim();
|
|
if (defaultVal !== '') {
|
|
if (type === 'integer') def.default = parseInt(defaultVal, 10);
|
|
else if (type === 'float') def.default = parseFloat(defaultVal);
|
|
else if (type === 'boolean') def.default = defaultVal.toLowerCase() === 'true';
|
|
else def.default = defaultVal;
|
|
}
|
|
|
|
if (type === 'integer' || type === 'float') {
|
|
const minVal = row.querySelector('.param-min').value.trim();
|
|
const maxVal = row.querySelector('.param-max').value.trim();
|
|
if (minVal !== '') def.min = parseFloat(minVal);
|
|
if (maxVal !== '') def.max = parseFloat(maxVal);
|
|
}
|
|
|
|
if (type === 'select') {
|
|
const optStr = row.querySelector('.param-options').value.trim();
|
|
if (optStr) def.options = optStr.split(',').map(s => s.trim()).filter(Boolean);
|
|
}
|
|
|
|
params[name] = def;
|
|
}
|
|
|
|
return params;
|
|
}
|
|
|
|
export async function executeCallbackDebug(callbackName) {
|
|
const dialog = document.getElementById('executionDialog');
|
|
const title = document.getElementById('executionDialogTitle');
|
|
const statusDiv = document.getElementById('executionStatus');
|
|
|
|
title.textContent = `Executing: ${callbackName}`;
|
|
statusDiv.innerHTML = `
|
|
<div class="status-item">
|
|
<label>Status</label>
|
|
<value><span class="loading-spinner"></span> Running...</value>
|
|
</div>
|
|
`;
|
|
document.getElementById('outputSection').style.display = 'none';
|
|
document.getElementById('errorSection').style.display = 'none';
|
|
document.body.classList.add('dialog-open');
|
|
dialog.showModal();
|
|
|
|
try {
|
|
const response = await fetch(`/api/callbacks/execute/${callbackName}`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json', ...getAuthHeaders() }
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (response.ok) {
|
|
showExecutionResult(callbackName, result, 'callback');
|
|
} else {
|
|
showExecutionResult(callbackName, {
|
|
success: false,
|
|
exit_code: -1,
|
|
error: result.detail || 'Execution failed',
|
|
stderr: result.detail || 'Unknown error'
|
|
}, 'callback');
|
|
}
|
|
} catch (error) {
|
|
console.error(`Error executing callback ${callbackName}:`, error);
|
|
showExecutionResult(callbackName, {
|
|
success: false,
|
|
exit_code: -1,
|
|
error: error.message,
|
|
stderr: `Network error: ${error.message}`
|
|
}, 'callback');
|
|
}
|
|
}
|