mirror of
https://github.com/ChuckBuilds/LEDMatrix.git
synced 2026-05-26 22:13:32 +00:00
feat(ui): add reusable json-file-manager widget for plugin file management
Introduces JsonFileManager — a zero-CDN, keyboard-accessible, configurable widget for managing JSON data files from plugin configuration forms. web_interface/static/v3/js/widgets/json-file-manager.js (new): - Self-contained class with scoped CSS (no global leakage) - File list with cards: enable/disable toggle, entry count, size, date - Drag-and-drop + click-to-browse JSON upload - Textarea-based JSON editor (no CDN); Format + Validate buttons - Ctrl+S to save, Escape to close any open modal - Create-new-file modal with configurable fields and validation - Delete confirmation modal - All actions (list/get/save/upload/delete/create/toggle) are configurable via x-widget-config in config_schema.json — no plugin-ID hardcoding web_interface/static/v3/plugins_manager.js: - New handler for x-widget: "json-file-manager" — renders mount div, instantiates JsonFileManager with x-widget-config and plugin ID web_interface/templates/v3/base.html: - Include json-file-manager.js (defer) before plugins_manager.js Usage: set x-widget: "json-file-manager" + x-widget-config in any plugin's config_schema.json (see ledmatrix-plugins of-the-day for a complete example). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -3446,6 +3446,23 @@ function generateFieldHtml(key, prop, value, prefix = '') {
|
||||
html += `<option value="${option}" ${selected}>${option}</option>`;
|
||||
});
|
||||
html += `</select>`;
|
||||
} else if (prop['x-widget'] === 'json-file-manager') {
|
||||
// Reusable JSON file manager widget (no CDN, keyboard shortcuts, configurable actions)
|
||||
const widgetConfig = prop['x-widget-config'] || {};
|
||||
const pluginId = currentPluginConfig?.pluginId || window.currentPluginConfig?.pluginId || '';
|
||||
const safeFieldId = (fullKey || 'file_manager').replace(/[^a-zA-Z0-9_-]/g, '_');
|
||||
|
||||
html += `<div id="${safeFieldId}_jfm_mount"></div>`;
|
||||
|
||||
setTimeout(() => {
|
||||
const mount = document.getElementById(`${safeFieldId}_jfm_mount`);
|
||||
if (!mount) return;
|
||||
if (typeof JsonFileManager !== 'undefined') {
|
||||
new JsonFileManager(mount, widgetConfig, pluginId);
|
||||
} else {
|
||||
mount.innerHTML = '<p style="color:#dc2626;font-size:.875rem;">json-file-manager widget not loaded. Check base.html includes json-file-manager.js.</p>';
|
||||
}
|
||||
}, 150);
|
||||
} else if (prop['x-widget'] === 'custom-html') {
|
||||
// Custom HTML widget - load HTML from plugin directory
|
||||
const htmlFile = prop['x-html-file'];
|
||||
|
||||
Reference in New Issue
Block a user