mirror of
https://github.com/ChuckBuilds/LEDMatrix.git
synced 2026-10-04 06:15:09 +00:00
feat(tools): MQTT bridge and Pixlet editor, ported onto the api_v3 split (#554)
* feat(tools): manage the MQTT bridge and Pixlet editor from the Tools tab PR #544's change, ported onto the api_v3 package split (#553). Identical behaviour; only the placement of the new code differs. The original added 508 lines to web_interface/blueprints/api_v3.py, which #553 deletes, so every hunk of it would conflict irreconcilably. Ported by AST: 26 new top-level items sorted to where the split puts each kind -- __init__.py 2 imports, 11 constants, 7 helpers starlark.py 4 routes (/starlark/editor/{apps,status,start,stop}) misc.py 2 routes (/integrations/mqtt-bridge{,/config}) Everything outside api_v3.py -- the Tools partial, the installer scripts, the JS tests -- applied unchanged. Routes: 111 from the split plus these 6 = 117, and the url-map snapshot is regenerated to match, which is exactly what test_api_v3_url_map.py is designed to make you do when routes are added. Full Python suite: 4,278 passed, 68 skipped, 0 failed. The JS tests this PR ships could not be run here -- node is not installed on this machine -- so test/js/dom/test_tools_sections.js is unverified. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_014RRtqXDCnvnY6EQwhT5CV9 * fix(starlark): don't crash the pixlet editor's start/stop routes, and honor an operator-set PIXLET_EDITOR_HOST The AST-based port of #544 onto the api_v3 package split dropped `time` from starlark.py's import list. start_pixlet_editor() and stop_pixlet_editor() both call time.time()/time.sleep() directly, so every start (NameError building `state['started_at']`) and every stop that has to wait out the EXIT trap crashed with a 500. No test caught it because the route's own tests mock subprocess.Popen but never actually invoked it before now. Also carries over #544's later fix that this port branched before: env['PIXLET_EDITOR_HOST'] = '0.0.0.0' unconditionally overrode an operator who had already pinned PIXLET_EDITOR_HOST to loopback, forcing the unauthenticated `pixlet serve` process onto the LAN regardless (CodeQL CWE-1188). Switched to env.setdefault(...), same as api_v3.starlark.py's siblings already do for _pkg-owned names. Both fixes route the shared _pkg.time reference the rest of the package's route modules already use for anything a test might need to patch, rather than a bare `import time` local to this file. Ported the existing regression test from #544 (TestPixletEditorHostDefaultsButDoesNotOverride) onto this branch's module layout (web_interface.blueprints.api_v3.starlark instead of the old monolithic api_v3 module), which is what caught the NameError. Full suite: 4330 passed, 62 skipped, 2 failed -- identical on this branch and on origin/main (missing tzdata package breaks two timezone-alias tests in test_onboarding_checklist.py, unrelated to this change). Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * fix(api-v3): clear the six lint errors this rebase introduced All six were introduced by rebasing this branch onto the merged blueprint split, not by the split itself. Confirmed by diffing pyflakes output against main with line numbers normalised -- everything else it reports is present on main too and is the package's deliberate re-export pattern. starlark.py used _STARLARK_APPS_DIR three times without importing it (F821). The rebase resolved an import-list conflict as a union of both sides, and that symbol was on neither side of the conflict hunk, so it was silently lost. It is defined in __init__.py and is now imported like its neighbours. This was the only one of the six that would fail at runtime rather than merely lint. __init__.py imported contextlib twice (F811): the cherry-pick added one next to the existing import. Removed the duplicate; the original at line 19 is used. __init__.py imported signal purely to re-export it to starlark.py, so pyflakes saw it as unused (F401). signal is stdlib and does not need routing through the blueprint package, so starlark.py imports it directly and __init__.py no longer does. contextlib stays re-exported because this module genuinely uses it. _read_mqtt_bridge_config()'s local `config` shadowed the `config` submodule this module imports at the bottom for its route side effects (F811). Renamed to `settings`, with a comment saying why, since the name is otherwise the obvious one to reach for. Verified: pyflakes now reports nothing on this branch that main does not, the package imports, all nine route modules load, and 117 routes register, matching the pinned URL-map snapshot. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * fix(api-v3): reject MQTT bridge bodies the endpoint cannot apply Two CodeRabbit findings on the bridge settings endpoint, both of which returned 200 while doing something other than what the caller asked. `request.get_json(silent=True) or {}` turned a missing or unparseable body -- and the JSON literals null, [] and false -- into an empty dict, which then satisfied the isinstance(data, dict) guard on the very next line. The guard was there to reject exactly those bodies. Dropping the `or {}` lets None fail it. The same `or {}` on /errors/clear is left alone: its docstring documents the body as optional, so an absent body legitimately means "use the defaults". The difference is that saving settings has nothing sensible to do with no body. `if data.get('clear_password'):` accepted any truthy value, and the string "false" is truthy in Python -- so a client echoing the field back as a string wiped a password it meant to keep. Now coerced through the package's existing _coerce_to_bool, which already maps 'true'/'on'/'1'/'yes' and nothing else. test_mqtt_bridge_config_endpoint.py covers both: five unusable body shapes plus a missing body, and clear_password across truthy and falsy spellings. Verified against the unfixed code -- reverting the body guard fails 5, reverting the coercion fails 3. Not changed here: CodeRabbit also asks this endpoint to reject MQTT credentials when TLS is off (CWE-319). That is a policy decision about the feature rather than a defect -- unencrypted MQTT on a trusted LAN is common and often deliberate -- so it is raised on the PR for a maintainer call instead. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * fix: work through the remaining review findings on the editor and bridge allow_insecure_mqtt (CWE-319, requested): a password with TLS disabled crosses the network in cleartext. Refused now rather than merely warned about -- but refused, not forbidden, because unencrypted MQTT on a trusted LAN is a normal deliberate setup. allow_insecure_mqtt is the explicit acknowledgement, defaults false, and is coerced like the other booleans so the string "false" cannot switch the guard off. starlark.py:796 -- the supported service runs Flask threaded, so two start requests could each see running=False, each launch an editor, and the second state write replace the first PID, orphaning a process that holds the display down with nothing recording it. The check-launch-write sequence now takes a module-level lock. starlark.py:848 -- if the state write failed the route returned success with an editor running and no PID recorded: status and stop both reported no session while the display stayed down until the timeout expired. It now terminates the process group and returns an error. starlark.py:890 -- SIGKILL gives the script's EXIT trap no chance to run, so nothing hands the display back, yet the response said "the display is restarting". After an escalation the display is now restarted explicitly, and a failure to do so returns an error naming the manual step instead of a success. pixlet_config_editor.sh:184 -- find_pixlet supports Darwin but macOS ships no timeout(1); GNU coreutils installs it as gtimeout. Resolved up front so the failure lands before the display is stopped rather than after. pixlet_config_editor.sh:154 -- wildcard, loopback and an explicit interface address are three cases, not two. Collapsing the last two printed a URL saying "localhost" whenever PIXLET_EDITOR_HOST named a LAN address. tools.html:1254 -- escHtml does not encode single quotes, and the app id was interpolated into an inline onclick="startPixletEditor('...')", so a directory containing an apostrophe could break out of the JS string and run script. The handler binds with addEventListener and reads the id from dataset, where it is only ever parsed as an HTML attribute. Tests: test_mqtt_bridge_config_endpoint.py grows to 23 cases covering the opt-in in both directions. The tools DOM suite gains three guards asserting the edit buttons carry no inline onclick and pass the id via dataset -- those need jsdom and did not run here, so CI verifies them. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * fix(api-v3): log the traceback on the editor state-write failure The 848 fix answers 500 when the session state cannot be written, and logged that at error level -- but without exc_info, so the traceback never reached the log. test_web_error_detail.py guards exactly this: a handler returning 5xx must write an error-level record *with* the traceback and return the sanitized detail, because checking that merely something was logged is too weak. Caught by Core unit tests on the previous commit, not locally: the guard parses every module under web_interface/blueprints/api_v3 as one source, so it only fires once the whole package is read together. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Chuck
@@ -233,6 +233,46 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MQTT Bridge -->
|
||||
<div class="bg-white rounded-lg shadow p-6">
|
||||
<div class="border-b border-gray-200 pb-4 mb-6">
|
||||
<div class="flex items-center justify-between gap-4">
|
||||
<h2 class="text-lg font-semibold text-gray-900">MQTT Bridge</h2>
|
||||
<span id="mqtt-bridge-state" class="text-xs px-2 py-1 rounded-full bg-gray-100 text-gray-600">checking…</span>
|
||||
</div>
|
||||
<p class="mt-1 text-sm text-gray-600">
|
||||
Exposes the display to Home Assistant over MQTT — force a mode on demand, set
|
||||
brightness, toggle power. Runs as <code class="bg-gray-100 px-1 rounded">ledmatrix-mqtt-bridge.service</code>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="mqtt-bridge-body" class="space-y-4">
|
||||
<p class="text-sm text-gray-500">Loading settings…</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pixlet Config Editor -->
|
||||
<div class="bg-white rounded-lg shadow p-6">
|
||||
<div class="border-b border-gray-200 pb-4 mb-6">
|
||||
<h2 class="text-lg font-semibold text-gray-900">Pixlet Config Editor</h2>
|
||||
<p class="mt-1 text-sm text-gray-600">
|
||||
Opens a Starlark app in Pixlet's own config form, which runs the app for real —
|
||||
so dropdowns that build their options at runtime work, and you see the render update
|
||||
as you type.
|
||||
</p>
|
||||
<p class="mt-2 text-sm text-amber-700 bg-amber-50 border border-amber-200 rounded-md p-2">
|
||||
<i class="fas fa-exclamation-triangle mr-1"></i>
|
||||
The display stops while a session is open, and the editor has no password — the
|
||||
same footing as this page. Sessions end by themselves after 30 minutes, so the
|
||||
panel is never left dark.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="pixlet-editor-body" class="space-y-4">
|
||||
<p class="text-sm text-gray-500">Loading apps…</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- System Power -->
|
||||
<div class="bg-white rounded-lg shadow p-6">
|
||||
<div class="border-b border-gray-200 pb-4 mb-6">
|
||||
@@ -962,5 +1002,348 @@
|
||||
|
||||
// WiFi radio current state.
|
||||
window.loadWifiRadio();
|
||||
|
||||
// ── MQTT bridge ───────────────────────────────────────────────────────────
|
||||
|
||||
const MQTT_BRIDGE_URL = '/api/v3/integrations/mqtt-bridge';
|
||||
|
||||
function mqttBadge(service, configExists) {
|
||||
if (!service.installed) return ['bg-gray-100 text-gray-600', 'not installed'];
|
||||
if (service.active) return ['bg-green-100 text-green-700', 'running'];
|
||||
if (!configExists) return ['bg-amber-100 text-amber-700', 'not configured'];
|
||||
return ['bg-amber-100 text-amber-700', 'stopped'];
|
||||
}
|
||||
|
||||
function renderMqttBridge(data) {
|
||||
const badge = document.getElementById('mqtt-bridge-state');
|
||||
const [cls, label] = mqttBadge(data.service, data.config_exists);
|
||||
if (badge) {
|
||||
badge.className = 'text-xs px-2 py-1 rounded-full ' + cls;
|
||||
badge.textContent = label;
|
||||
}
|
||||
|
||||
const c = data.config || {};
|
||||
const field = (id, label, value, type, extra) => `
|
||||
<label class="block">
|
||||
<span class="text-xs font-medium text-gray-700">${escHtml(label)}</span>
|
||||
<input id="${id}" type="${type || 'text'}" value="${value === null || value === undefined ? '' : escHtml(String(value))}"
|
||||
${extra || ''}
|
||||
class="mt-1 w-full px-2 py-1.5 text-sm border border-gray-300 rounded-md">
|
||||
</label>`;
|
||||
|
||||
document.getElementById('mqtt-bridge-body').innerHTML = `
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
${field('mqtt-host', 'Broker host', c.mqtt_host)}
|
||||
${field('mqtt-port', 'Port', c.mqtt_port, 'number', 'min="1" max="65535"')}
|
||||
${field('mqtt-username', 'Username (optional)', c.mqtt_username)}
|
||||
<label class="block">
|
||||
<span class="text-xs font-medium text-gray-700">Password</span>
|
||||
<input id="mqtt-password" type="password" value=""
|
||||
placeholder="${data.password_set ? 'unchanged — leave blank to keep' : 'none set'}"
|
||||
class="mt-1 w-full px-2 py-1.5 text-sm border border-gray-300 rounded-md">
|
||||
<span class="text-xs text-gray-500">
|
||||
Never sent back to the browser.
|
||||
${data.password_set ? '<button type="button" id="mqtt-clear-password" class="text-red-600 hover:underline ml-1">Clear it</button>' : ''}
|
||||
</span>
|
||||
</label>
|
||||
${field('mqtt-topic', 'Command topic', c.mqtt_topic)}
|
||||
${field('mqtt-client-id', 'Client ID', c.mqtt_client_id)}
|
||||
${field('mqtt-api-base', 'LEDMatrix API base', c.ledmatrix_api_base)}
|
||||
${field('mqtt-timeout', 'Request timeout (s)', c.request_timeout, 'number', 'min="1" max="300"')}
|
||||
${field('mqtt-duration', 'On-demand duration (s, blank = default)', c.on_demand_duration, 'number', 'min="1" max="86400"')}
|
||||
<label class="block">
|
||||
<span class="text-xs font-medium text-gray-700">Log level</span>
|
||||
<select id="mqtt-log-level" class="mt-1 w-full px-2 py-1.5 text-sm border border-gray-300 rounded-md bg-white">
|
||||
${['DEBUG', 'INFO', 'WARNING', 'ERROR', 'CRITICAL'].map(l =>
|
||||
`<option value="${l}" ${c.log_level === l ? 'selected' : ''}>${l}</option>`).join('')}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<label class="flex items-center gap-2 text-sm text-gray-700">
|
||||
<input id="mqtt-tls" type="checkbox" ${c.mqtt_tls ? 'checked' : ''}
|
||||
class="rounded border-gray-300">
|
||||
Use TLS
|
||||
<span class="text-xs text-gray-500">(a password without TLS crosses the network in the clear)</span>
|
||||
</label>
|
||||
|
||||
<div class="flex items-center justify-between gap-4 pt-2">
|
||||
<p class="text-xs text-gray-500">
|
||||
Saved to <code class="bg-gray-100 px-1 rounded">${escHtml(data.config_path)}</code>.
|
||||
Any field can also be set as
|
||||
<code class="bg-gray-100 px-1 rounded">${escHtml(data.env_override_prefix)}<KEY></code>,
|
||||
which wins over the file.
|
||||
</p>
|
||||
<button id="btn-mqtt-save" onclick="saveMqttBridge()"
|
||||
class="shrink-0 inline-flex items-center px-3 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700">
|
||||
<i class="fas fa-save mr-2"></i>Save settings
|
||||
</button>
|
||||
</div>
|
||||
<div id="result-mqtt-save" class="hidden"></div>
|
||||
|
||||
<div class="flex flex-wrap items-center gap-2 pt-4 border-t border-gray-100">
|
||||
${data.service.installed ? `
|
||||
<button id="btn-mqtt-restart" onclick="toolsAction('mqtt_bridge_restart','btn-mqtt-restart','result-mqtt-service')"
|
||||
class="inline-flex items-center px-3 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
|
||||
<i class="fas fa-sync-alt mr-2"></i>Restart
|
||||
</button>
|
||||
<button id="btn-mqtt-startstop"
|
||||
onclick="toolsAction('${data.service.active ? 'mqtt_bridge_stop' : 'mqtt_bridge_start'}','btn-mqtt-startstop','result-mqtt-service')"
|
||||
class="inline-flex items-center px-3 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
|
||||
<i class="fas fa-${data.service.active ? 'stop' : 'play'} mr-2"></i>${data.service.active ? 'Stop' : 'Start'}
|
||||
</button>` : `
|
||||
<button id="btn-mqtt-install" onclick="installMqttBridge()"
|
||||
class="inline-flex items-center px-3 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700">
|
||||
<i class="fas fa-download mr-2"></i>Install & start bridge
|
||||
</button>
|
||||
<span class="text-xs text-gray-500">Installs dependencies, enables the unit and starts it.</span>`}
|
||||
</div>
|
||||
<div id="result-mqtt-service" class="hidden"></div>
|
||||
`;
|
||||
|
||||
const clearBtn = document.getElementById('mqtt-clear-password');
|
||||
if (clearBtn) clearBtn.addEventListener('click', () => clearMqttPassword());
|
||||
}
|
||||
|
||||
window.loadMqttBridge = function() {
|
||||
fetch(MQTT_BRIDGE_URL)
|
||||
.then(r => r.json())
|
||||
.then(d => {
|
||||
if (d.status !== 'success') throw new Error(d.message || 'Failed');
|
||||
renderMqttBridge(d.data);
|
||||
})
|
||||
.catch(err => {
|
||||
document.getElementById('mqtt-bridge-body').innerHTML =
|
||||
`<p class="text-sm text-red-600">Could not load bridge settings: ${escHtml(err.message)}</p>`;
|
||||
});
|
||||
};
|
||||
|
||||
function mqttBody() {
|
||||
const val = id => (document.getElementById(id) || {}).value;
|
||||
const body = {
|
||||
mqtt_host: val('mqtt-host'),
|
||||
mqtt_port: val('mqtt-port'),
|
||||
mqtt_username: val('mqtt-username'),
|
||||
mqtt_topic: val('mqtt-topic'),
|
||||
mqtt_client_id: val('mqtt-client-id'),
|
||||
ledmatrix_api_base: val('mqtt-api-base'),
|
||||
request_timeout: val('mqtt-timeout'),
|
||||
on_demand_duration: val('mqtt-duration') === '' ? null : val('mqtt-duration'),
|
||||
log_level: val('mqtt-log-level'),
|
||||
mqtt_tls: !!(document.getElementById('mqtt-tls') || {}).checked,
|
||||
};
|
||||
// Only send a password when one was typed; blank means "leave it alone".
|
||||
const pw = val('mqtt-password');
|
||||
if (pw) body.mqtt_password = pw;
|
||||
return body;
|
||||
}
|
||||
|
||||
window.saveMqttBridge = function() {
|
||||
setBusy('btn-mqtt-save', true);
|
||||
fetch(MQTT_BRIDGE_URL + '/config', {
|
||||
method: 'PUT',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify(mqttBody())
|
||||
})
|
||||
.then(r => r.json().then(d => ({ok: r.ok, d})))
|
||||
.then(({ok, d}) => {
|
||||
showResult('result-mqtt-save', ok && d.status === 'success',
|
||||
d.message || (ok ? 'Saved' : 'Failed'));
|
||||
if (ok && d.status === 'success') loadMqttBridge();
|
||||
})
|
||||
.catch(err => showResult('result-mqtt-save', false, 'Request failed: ' + err.message))
|
||||
.finally(() => setBusy('btn-mqtt-save', false));
|
||||
};
|
||||
|
||||
function clearMqttPassword() {
|
||||
if (!confirm('Remove the stored MQTT password?')) return;
|
||||
fetch(MQTT_BRIDGE_URL + '/config', {
|
||||
method: 'PUT',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({clear_password: true})
|
||||
})
|
||||
.then(r => r.json())
|
||||
.then(d => {
|
||||
showResult('result-mqtt-save', d.status === 'success', d.message || 'Password cleared');
|
||||
loadMqttBridge();
|
||||
})
|
||||
.catch(err => showResult('result-mqtt-save', false, 'Request failed: ' + err.message));
|
||||
}
|
||||
|
||||
window.installMqttBridge = function() {
|
||||
// Installing pulls dependencies, so it is slower than the other actions
|
||||
// and worth saying so rather than leaving a spinner unexplained.
|
||||
showResult('result-mqtt-service', true, 'Installing — this pulls Python dependencies and can take a minute…');
|
||||
setBusy('btn-mqtt-install', true);
|
||||
fetch('/api/v3/system/action', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({action: 'mqtt_bridge_install'})
|
||||
})
|
||||
.then(r => r.json())
|
||||
.then(d => {
|
||||
showResult('result-mqtt-service', d.status === 'success',
|
||||
d.message || (d.status === 'success' ? 'Installed' : 'Failed'), d.output || '');
|
||||
loadMqttBridge();
|
||||
})
|
||||
.catch(err => showResult('result-mqtt-service', false, 'Request failed: ' + err.message))
|
||||
.finally(() => setBusy('btn-mqtt-install', false));
|
||||
};
|
||||
|
||||
// ── Pixlet config editor ──────────────────────────────────────────────────
|
||||
|
||||
const PIXLET_EDITOR_URL = '/api/v3/starlark/editor';
|
||||
let pixletPollTimer = null;
|
||||
|
||||
function fmtRemaining(seconds) {
|
||||
if (seconds === null || seconds === undefined) return '';
|
||||
const m = Math.floor(seconds / 60), s = seconds % 60;
|
||||
return `${m}:${String(s).padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
function editorHost(port) {
|
||||
// The session binds 0.0.0.0, so whatever host reached this page reaches
|
||||
// the editor too -- no tunnel, and no guessing the device's address.
|
||||
return `${window.location.protocol}//${window.location.hostname}:${port}/`;
|
||||
}
|
||||
|
||||
function renderPixletEditor(status, apps, pixletAvailable, appsDir) {
|
||||
const body = document.getElementById('pixlet-editor-body');
|
||||
if (!body) return;
|
||||
|
||||
if (!pixletAvailable) {
|
||||
body.innerHTML = `
|
||||
<p class="text-sm text-gray-700">
|
||||
Pixlet is not installed, so there is nothing to edit with. Install it from the
|
||||
Starlark Apps section of the Plugins tab, or run
|
||||
<code class="bg-gray-100 px-1 rounded">./scripts/download_pixlet.sh</code>.
|
||||
</p>`;
|
||||
return;
|
||||
}
|
||||
|
||||
const active = status.running ? `
|
||||
<div class="rounded-md border border-amber-300 bg-amber-50 p-3">
|
||||
<div class="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<p class="text-sm font-medium text-amber-900">
|
||||
<i class="fas fa-circle-notch fa-spin mr-1"></i>
|
||||
Editing <code class="bg-amber-100 px-1 rounded">${escHtml(status.app_id)}</code> — the display is stopped
|
||||
</p>
|
||||
<p class="text-xs text-amber-800 mt-1">
|
||||
<a href="${editorHost(status.port)}" target="_blank" rel="noopener"
|
||||
class="underline font-medium">Open the editor →</a>
|
||||
<span class="ml-2">stops on its own in
|
||||
<span id="pixlet-countdown">${fmtRemaining(status.seconds_remaining)}</span></span>
|
||||
</p>
|
||||
</div>
|
||||
<button id="btn-pixlet-stop" onclick="stopPixletEditor()"
|
||||
class="shrink-0 inline-flex items-center px-3 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700">
|
||||
<i class="fas fa-stop mr-2"></i>Stop now
|
||||
</button>
|
||||
</div>
|
||||
</div>` : '';
|
||||
|
||||
const rows = apps.length ? apps.map(a => `
|
||||
<div class="flex items-center justify-between gap-4 py-2 border-t border-gray-100 first:border-t-0">
|
||||
<div class="min-w-0">
|
||||
<p class="text-sm font-medium text-gray-900 truncate">${escHtml(a.name)}</p>
|
||||
<p class="text-xs text-gray-500 truncate">${escHtml(a.id)}${a.editable ? '' : ' — no .star file'}</p>
|
||||
</div>
|
||||
<button id="btn-pixlet-edit-${escHtml(a.id)}"
|
||||
${(!a.editable || status.running) ? 'disabled' : ''}
|
||||
data-pixlet-edit data-app-id="${escHtml(a.id)}"
|
||||
class="shrink-0 inline-flex items-center px-3 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">
|
||||
<i class="fas fa-sliders-h mr-2"></i>Edit
|
||||
</button>
|
||||
</div>`).join('') : `
|
||||
<p class="text-sm text-gray-500">
|
||||
No Starlark apps installed. Install one from the Plugins tab first
|
||||
(looked in <code class="bg-gray-100 px-1 rounded">${escHtml(appsDir)}</code>).
|
||||
</p>`;
|
||||
|
||||
body.innerHTML = active + `<div class="mt-2">${rows}</div>
|
||||
<div id="result-pixlet" class="hidden"></div>`;
|
||||
|
||||
// Bound here rather than via an inline onclick: escHtml does not encode
|
||||
// single quotes, and the id used to be interpolated into a single-quoted
|
||||
// JS string, so an app directory containing an apostrophe could break
|
||||
// out of it and run script. Through dataset the value is only ever
|
||||
// parsed as an HTML attribute, never as JavaScript.
|
||||
body.querySelectorAll('[data-pixlet-edit]').forEach(btn => {
|
||||
btn.addEventListener('click', () => startPixletEditor(btn.dataset.appId));
|
||||
});
|
||||
}
|
||||
|
||||
window.loadPixletEditor = function() {
|
||||
Promise.all([
|
||||
fetch(PIXLET_EDITOR_URL + '/status').then(r => r.json()),
|
||||
fetch(PIXLET_EDITOR_URL + '/apps').then(r => r.json())
|
||||
])
|
||||
.then(([s, a]) => {
|
||||
const status = (s.data || {});
|
||||
const apps = (a.data || {}).apps || [];
|
||||
renderPixletEditor(status, apps, (a.data || {}).pixlet_available, (a.data || {}).apps_dir || '');
|
||||
schedulePixletPoll(status.running);
|
||||
})
|
||||
.catch(err => {
|
||||
const body = document.getElementById('pixlet-editor-body');
|
||||
if (body) body.innerHTML = `<p class="text-sm text-red-600">Could not load: ${escHtml(err.message)}</p>`;
|
||||
});
|
||||
};
|
||||
|
||||
function schedulePixletPoll(running) {
|
||||
// Poll only while a session is open: that is the state worth watching,
|
||||
// and it is what makes the banner survive a page reload.
|
||||
if (pixletPollTimer) { clearInterval(pixletPollTimer); pixletPollTimer = null; }
|
||||
if (!running) return;
|
||||
pixletPollTimer = setInterval(() => {
|
||||
fetch(PIXLET_EDITOR_URL + '/status')
|
||||
.then(r => r.json())
|
||||
.then(d => {
|
||||
const st = d.data || {};
|
||||
if (!st.running) { loadPixletEditor(); return; }
|
||||
const el = document.getElementById('pixlet-countdown');
|
||||
if (el) el.textContent = fmtRemaining(st.seconds_remaining);
|
||||
})
|
||||
.catch(() => {});
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
window.startPixletEditor = function(appId) {
|
||||
const btnId = 'btn-pixlet-edit-' + appId;
|
||||
setBusy(btnId, true);
|
||||
fetch(PIXLET_EDITOR_URL + '/start', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({app_id: appId})
|
||||
})
|
||||
.then(r => r.json().then(d => ({ok: r.ok, d})))
|
||||
.then(({ok, d}) => {
|
||||
if (!ok || d.status !== 'success') {
|
||||
showResult('result-pixlet', false, d.message || 'Could not start the editor');
|
||||
return;
|
||||
}
|
||||
loadPixletEditor();
|
||||
})
|
||||
.catch(err => showResult('result-pixlet', false, 'Request failed: ' + err.message))
|
||||
.finally(() => setBusy(btnId, false));
|
||||
};
|
||||
|
||||
window.stopPixletEditor = function() {
|
||||
setBusy('btn-pixlet-stop', true);
|
||||
fetch(PIXLET_EDITOR_URL + '/stop', {method: 'POST'})
|
||||
.then(r => r.json())
|
||||
.then(d => { showResult('result-pixlet', d.status === 'success', d.message || 'Stopped'); loadPixletEditor(); })
|
||||
.catch(err => showResult('result-pixlet', false, 'Request failed: ' + err.message))
|
||||
.finally(() => setBusy('btn-pixlet-stop', false));
|
||||
};
|
||||
|
||||
// Initial load for both sections. Down here rather than at the shared init
|
||||
// site above, because these are assignments to window rather than hoisted
|
||||
// declarations -- calling them earlier in the file throws.
|
||||
loadMqttBridge();
|
||||
loadPixletEditor();
|
||||
|
||||
})();
|
||||
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user