mirror of
https://github.com/ChuckBuilds/LEDMatrix.git
synced 2026-05-31 16:13:31 +00:00
b1af068f7a
## New widgets ### plugin-file-manager (reusable) Inline file management UI driven entirely by x-widget-config in the plugin schema. Any plugin can adopt it by declaring web_ui_actions in manifest.json and adding x-widget: "plugin-file-manager" to their config schema. Features: - File card grid with enable/disable toggles, metadata (entry count, size, date) - Drag-and-drop + click upload zone with configurable hint text - Create file modal driven by create_fields schema config - Delete confirmation modal - Edit modal: auto-detects tabular data (object-of-objects) → paginated table with inline-editable cells and "Jump to today" navigation; falls back to JSON textarea for unstructured data - plugin_id auto-injected from template context; no per-plugin JS needed - Immediate saves via /api/v3/plugins/action — no Save Configuration required ### time-picker Wraps native <input type="time">, returns HH:MM string. Generic, zero config. ### file-upload-single Single-image upload for string fields. Shows thumbnail preview + clear button. plugin_id auto-injected from template context. ## New route (pages_v3.py) GET /v3/plugin-ui/<plugin_id>/web-ui/<filename> Serves a plugin's web_ui/ HTML fragment as a standalone page, wrapping it with a minimal HTML page that injects window.PLUGIN_ID and loads Tailwind CSS. Enables the json-file-manager iframe fallback (Phase A) and future plugin UIs. ## plugin_config.html updates - json-file-manager: renders plugin's web_ui/file_manager.html in an iframe via the new /v3/plugin-ui/ route (Phase A compatibility) - plugin-file-manager: full inline widget registration - time-picker, file-upload-single: registered in widget elif chain - color-picker: wired for type:array (RGB triplet) fields — renders hex picker + R/G/B number inputs with bidirectional sync - Plugin Actions section: suppressed when schema has a file-manager widget or when all actions are marked ui_hidden in manifest - x-widget-config passed to all widgets in the init script block ## array-table.js improvements (v2.0.0) - enum fields → <select> dropdown instead of plain text - date-picker x-widget → <input type=date> - time-picker x-widget → <input type=time> - file-upload-single x-widget → path input + upload button + thumbnail - Row edit modal (⚙) for non-displayed nested properties (layout, style objects) with color pickers, enum selects, number inputs - getValue() collects <select> values and nested key paths - Inline image upload via handleArrayTableImageUpload() Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
267 lines
12 KiB
JavaScript
267 lines
12 KiB
JavaScript
/**
|
|
* LEDMatrix File Upload Single Widget
|
|
*
|
|
* Single-image upload for string fields. Uploads to the plugin's asset folder
|
|
* and sets the string field value to the returned relative path.
|
|
* Designed for per-item image fields within array-table rows.
|
|
*
|
|
* The plugin_id is injected automatically from the template context
|
|
* via options.pluginId — no need to specify it in the schema.
|
|
*
|
|
* Schema example (any plugin):
|
|
* {
|
|
* "image_path": {
|
|
* "type": "string",
|
|
* "x-widget": "file-upload-single",
|
|
* "x-upload-config": {
|
|
* "allowed_types": ["image/png", "image/jpeg", "image/bmp", "image/gif"],
|
|
* "max_size_mb": 5
|
|
* }
|
|
* }
|
|
* }
|
|
*
|
|
* @module FileUploadSingleWidget
|
|
*/
|
|
|
|
(function() {
|
|
'use strict';
|
|
|
|
if (typeof window.LEDMatrixWidgets === 'undefined') {
|
|
console.error('[FileUploadSingleWidget] LEDMatrixWidgets registry not found. Load registry.js first.');
|
|
return;
|
|
}
|
|
|
|
const base = window.BaseWidget ? new window.BaseWidget('FileUploadSingle', '1.0.0') : null;
|
|
|
|
function escapeHtml(text) {
|
|
if (base) return base.escapeHtml(text);
|
|
const div = document.createElement('div');
|
|
div.textContent = String(text);
|
|
return div.innerHTML.replace(/"/g, '"').replace(/'/g, ''');
|
|
}
|
|
|
|
function sanitizeId(id) {
|
|
if (base) return base.sanitizeId(id);
|
|
return String(id).replace(/[^a-zA-Z0-9_-]/g, '_');
|
|
}
|
|
|
|
function triggerChange(fieldId, value) {
|
|
if (base) {
|
|
base.triggerChange(fieldId, value);
|
|
} else {
|
|
document.dispatchEvent(new CustomEvent('widget-change', {
|
|
detail: { fieldId, value },
|
|
bubbles: true,
|
|
cancelable: true
|
|
}));
|
|
}
|
|
}
|
|
|
|
function isImagePath(path) {
|
|
if (!path) return false;
|
|
return /\.(png|jpg|jpeg|bmp|gif)$/i.test(path);
|
|
}
|
|
|
|
window.LEDMatrixWidgets.register('file-upload-single', {
|
|
name: 'File Upload Single Widget',
|
|
version: '1.0.0',
|
|
|
|
render: function(container, config, value, options) {
|
|
const fieldId = sanitizeId(options.fieldId || container.id || 'file_upload_single');
|
|
const uploadConfig = config['x-upload-config'] || config['x_upload_config'] || {};
|
|
const allowedTypes = (uploadConfig.allowed_types || ['image/png', 'image/jpeg', 'image/bmp', 'image/gif']).join(',');
|
|
const maxSizeMb = uploadConfig.max_size_mb || 5;
|
|
const pluginId = options.pluginId || '';
|
|
const currentValue = value || '';
|
|
const hasImage = isImagePath(currentValue);
|
|
|
|
let html = `<div id="${fieldId}_widget" class="file-upload-single-widget" data-field-id="${fieldId}" data-plugin-id="${escapeHtml(pluginId)}">`;
|
|
|
|
// Hidden input carries the actual string value
|
|
html += `<input type="hidden" id="${fieldId}" name="${escapeHtml(options.name || fieldId)}" value="${escapeHtml(currentValue)}">`;
|
|
|
|
// Preview area (shown when a value is set)
|
|
html += `<div id="${fieldId}_preview" class="${hasImage ? '' : 'hidden'} flex items-center space-x-3 mb-2 p-2 bg-gray-50 rounded border border-gray-200">`;
|
|
html += `<img id="${fieldId}_thumb" src="/${escapeHtml(currentValue)}" alt="Preview"
|
|
class="w-12 h-12 object-cover rounded"
|
|
onerror="this.style.display='none';document.getElementById('${fieldId}_thumb_placeholder').style.display='flex'">`;
|
|
html += `<div id="${fieldId}_thumb_placeholder" style="display:none" class="w-12 h-12 bg-gray-200 rounded flex items-center justify-center">
|
|
<i class="fas fa-image text-gray-400 text-lg"></i>
|
|
</div>`;
|
|
html += `<div class="flex-1 min-w-0">
|
|
<p id="${fieldId}_filename" class="text-xs text-gray-600 truncate">${escapeHtml(currentValue.split('/').pop() || '')}</p>
|
|
<p class="text-xs text-gray-400">${escapeHtml(currentValue)}</p>
|
|
</div>`;
|
|
html += `<button type="button"
|
|
onclick="window.LEDMatrixWidgets.getHandlers('file-upload-single').onClear('${fieldId}')"
|
|
class="flex-shrink-0 text-red-400 hover:text-red-600 p-1" title="Remove image">
|
|
<i class="fas fa-times"></i>
|
|
</button>`;
|
|
html += '</div>';
|
|
|
|
// Upload drop zone (always shown, acts as change button when value is set)
|
|
html += `<div id="${fieldId}_drop_zone"
|
|
class="border-2 border-dashed border-gray-300 rounded-lg p-3 text-center hover:border-blue-400 transition-colors cursor-pointer"
|
|
ondrop="window.LEDMatrixWidgets.getHandlers('file-upload-single').onDrop(event, '${fieldId}')"
|
|
ondragover="event.preventDefault()"
|
|
onclick="document.getElementById('${fieldId}_file_input').click()">
|
|
<input type="file"
|
|
id="${fieldId}_file_input"
|
|
accept="${escapeHtml(allowedTypes)}"
|
|
style="display:none"
|
|
data-field-id="${fieldId}"
|
|
data-plugin-id="${escapeHtml(pluginId)}"
|
|
data-max-size-mb="${maxSizeMb}"
|
|
data-allowed-types="${escapeHtml(allowedTypes)}"
|
|
onchange="window.LEDMatrixWidgets.getHandlers('file-upload-single').onFileSelect(event, '${fieldId}')">
|
|
<i class="fas fa-cloud-upload-alt text-xl text-gray-400 mb-1"></i>
|
|
<p class="text-xs text-gray-500">${hasImage ? 'Click to replace image' : 'Click or drag to upload image'}</p>
|
|
<p class="text-xs text-gray-400">Max ${maxSizeMb}MB</p>
|
|
</div>`;
|
|
|
|
// Status area for upload feedback
|
|
html += `<div id="${fieldId}_status" class="mt-1 text-xs hidden"></div>`;
|
|
|
|
html += '</div>';
|
|
container.innerHTML = html;
|
|
},
|
|
|
|
getValue: function(fieldId) {
|
|
const safeId = sanitizeId(fieldId);
|
|
const input = document.getElementById(safeId);
|
|
return input ? input.value : '';
|
|
},
|
|
|
|
setValue: function(fieldId, value) {
|
|
const safeId = sanitizeId(fieldId);
|
|
const hidden = document.getElementById(safeId);
|
|
const preview = document.getElementById(`${safeId}_preview`);
|
|
const thumb = document.getElementById(`${safeId}_thumb`);
|
|
const thumbPlaceholder = document.getElementById(`${safeId}_thumb_placeholder`);
|
|
const filename = document.getElementById(`${safeId}_filename`);
|
|
const dropZone = document.getElementById(`${safeId}_drop_zone`);
|
|
|
|
if (hidden) hidden.value = value || '';
|
|
|
|
const hasImage = isImagePath(value);
|
|
if (preview) preview.classList.toggle('hidden', !hasImage);
|
|
if (thumb && hasImage) {
|
|
thumb.src = `/${value}`;
|
|
thumb.style.display = '';
|
|
if (thumbPlaceholder) thumbPlaceholder.style.display = 'none';
|
|
}
|
|
if (filename) filename.textContent = hasImage ? value.split('/').pop() : '';
|
|
|
|
// Update drop zone hint text
|
|
const hint = dropZone ? dropZone.querySelector('p') : null;
|
|
if (hint) hint.textContent = hasImage ? 'Click to replace image' : 'Click or drag to upload image';
|
|
},
|
|
|
|
handlers: {
|
|
onFileSelect: function(event, fieldId) {
|
|
const files = event.target.files;
|
|
if (files && files.length > 0) {
|
|
window.LEDMatrixWidgets.getHandlers('file-upload-single').uploadFile(fieldId, files[0]);
|
|
}
|
|
},
|
|
|
|
onDrop: function(event, fieldId) {
|
|
event.preventDefault();
|
|
const files = event.dataTransfer.files;
|
|
if (files && files.length > 0) {
|
|
window.LEDMatrixWidgets.getHandlers('file-upload-single').uploadFile(fieldId, files[0]);
|
|
}
|
|
},
|
|
|
|
onClear: function(fieldId) {
|
|
const widget = window.LEDMatrixWidgets.get('file-upload-single');
|
|
widget.setValue(fieldId, '');
|
|
triggerChange(fieldId, '');
|
|
// Reset file input so the same file can be re-selected
|
|
const fileInput = document.getElementById(`${sanitizeId(fieldId)}_file_input`);
|
|
if (fileInput) fileInput.value = '';
|
|
},
|
|
|
|
uploadFile: async function(fieldId, file) {
|
|
const safeId = sanitizeId(fieldId);
|
|
const fileInput = document.getElementById(`${safeId}_file_input`);
|
|
const statusDiv = document.getElementById(`${safeId}_status`);
|
|
const notifyFn = window.showNotification || console.log;
|
|
|
|
// Read config from the file input data attributes
|
|
const pluginId = (fileInput && fileInput.dataset.pluginId) || '';
|
|
const maxSizeMb = parseFloat((fileInput && fileInput.dataset.maxSizeMb) || '5');
|
|
const allowedTypes = ((fileInput && fileInput.dataset.allowedTypes) || 'image/png,image/jpeg,image/bmp,image/gif')
|
|
.split(',').map(t => t.trim());
|
|
|
|
if (!pluginId) {
|
|
notifyFn('Plugin ID not set — cannot upload', 'error');
|
|
return;
|
|
}
|
|
|
|
// Validate type
|
|
if (!allowedTypes.includes(file.type)) {
|
|
notifyFn(`File type "${file.type}" not allowed`, 'error');
|
|
return;
|
|
}
|
|
|
|
// Validate size
|
|
if (file.size > maxSizeMb * 1024 * 1024) {
|
|
notifyFn(`File exceeds ${maxSizeMb}MB limit`, 'error');
|
|
return;
|
|
}
|
|
|
|
// Show uploading status
|
|
if (statusDiv) {
|
|
statusDiv.className = 'mt-1 text-xs text-gray-500';
|
|
statusDiv.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i>Uploading...';
|
|
}
|
|
|
|
const formData = new FormData();
|
|
formData.append('plugin_id', pluginId);
|
|
formData.append('files', file);
|
|
|
|
try {
|
|
const response = await fetch('/api/v3/plugins/assets/upload', {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const body = await response.text();
|
|
throw new Error(`Server error ${response.status}: ${body}`);
|
|
}
|
|
|
|
const data = await response.json();
|
|
|
|
if (data.status === 'success' && data.uploaded_files && data.uploaded_files.length > 0) {
|
|
const uploadedPath = data.uploaded_files[0].path;
|
|
const widget = window.LEDMatrixWidgets.get('file-upload-single');
|
|
widget.setValue(fieldId, uploadedPath);
|
|
triggerChange(fieldId, uploadedPath);
|
|
|
|
if (statusDiv) {
|
|
statusDiv.className = 'mt-1 text-xs text-green-600';
|
|
statusDiv.innerHTML = '<i class="fas fa-check-circle mr-1"></i>Uploaded successfully';
|
|
setTimeout(() => { statusDiv.className = 'mt-1 text-xs hidden'; statusDiv.innerHTML = ''; }, 3000);
|
|
}
|
|
notifyFn('Image uploaded successfully', 'success');
|
|
} else {
|
|
throw new Error(data.message || 'Upload failed');
|
|
}
|
|
} catch (error) {
|
|
if (statusDiv) {
|
|
statusDiv.className = 'mt-1 text-xs text-red-600';
|
|
statusDiv.innerHTML = `<i class="fas fa-exclamation-circle mr-1"></i>${escapeHtml(error.message)}`;
|
|
}
|
|
notifyFn(`Upload error: ${error.message}`, 'error');
|
|
} finally {
|
|
if (fileInput) fileInput.value = '';
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
console.log('[FileUploadSingleWidget] File upload single widget registered');
|
|
})();
|