`;
+
+ // Render each property of the object
+ const propertyOrder = itemsSchema['x-propertyOrder'] || Object.keys(itemProperties);
+ propertyOrder.forEach(propKey => {
+ if (!itemProperties[propKey]) return;
+
+ const propSchema = itemProperties[propKey];
+ const propValue = item[propKey] !== undefined ? item[propKey] : propSchema.default;
+ const propLabel = propSchema.title || propKey.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
+ const propDescription = propSchema.description || '';
+ const propFullKey = `${fullKey}[${index}].${propKey}`;
+
+ html += `
`;
+
+ // Handle file-upload widget (for logo field)
+ // NOTE: File upload for array-of-objects items is not yet implemented.
+ // The widget is disabled to prevent silent failures when users try to upload files.
+ // TODO: Implement handleArrayObjectFileUpload and removeArrayObjectFile with proper
+ // endpoint support and [data-file-data] attribute updates before enabling this widget.
+ if (propSchema['x-widget'] === 'file-upload') {
+ html += `
${escapeHtml(propLabel)} `;
+ if (propDescription) {
+ html += `
${escapeHtml(propDescription)}
`;
+ }
+ const uploadConfig = propSchema['x-upload-config'] || {};
+ const pluginId = uploadConfig.plugin_id || (typeof currentPluginConfig !== 'undefined' ? currentPluginConfig?.pluginId : null) || (typeof window.currentPluginConfig !== 'undefined' ? window.currentPluginConfig?.pluginId : null) || 'ledmatrix-news';
+ const logoValue = propValue || {};
+
+ // Display existing logo if present, but disable upload functionality
+ if (logoValue.path) {
+ html += `
+
+ `;
+ } else {
+ html += `
+
+ `;
+ }
+
+ html += `
`;
+ } else if (propSchema.type === 'boolean') {
+ // Boolean checkbox
+ html += `
+
+ ${escapeHtml(propLabel)}
+
+ `;
+ } else {
+ // Regular text/string input
+ html += `
+
+ ${escapeHtml(propLabel)}
+
+ `;
+ if (propDescription) {
+ html += `
${escapeHtml(propDescription)}
`;
+ }
+ html += `
+
+ `;
+ }
+
+ html += `
`;
- enumItems.forEach(option => {
+ enumItems.forEach((option) => {
const isChecked = arrayValue.includes(option);
const label = labels[option] || option.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
- const checkboxId = `${fullKey.replace(/\./g, '_')}_${option}`;
+ const checkboxId = `${fieldId}_${escapeHtml(option)}`;
html += `
${label}
+ ${escapeHtml(label)}
`;
});
html += `
`;
+ // Hidden input to store selected values as JSON array (like array-of-objects pattern)
+ html += `
+
+ `;
+
+ // Render existing items
+ currentItems.forEach((item, index) => {
+ if (typeof window.renderArrayObjectItem === 'function') {
+ html += window.renderArrayObjectItem(fieldId, fullKey, itemProperties, item, index, itemsSchema);
+ } else {
+ // Fallback: create basic HTML structure
+ html += `
`;
+ }
+ });
+
+ html += `
+
+
= maxItems ? 'disabled style="opacity: 0.5; cursor: not-allowed;"' : ''}>
+
+
+
`;
@@ -5167,45 +5378,9 @@ function showError(message) {
`;
}
-// Plugin configuration form submission
-document.addEventListener('submit', function(e) {
- if (e.target.id === 'plugin-config-form') {
- e.preventDefault();
-
- const formData = new FormData(e.target);
- const config = {};
- const schema = currentPluginConfig?.schema;
-
- // Convert form data to config object
- // Note: 'enabled' is managed separately via the header toggle, not through this form
- for (let [key, value] of formData.entries()) {
- // Skip enabled - it's managed separately via the header toggle
- if (key === 'enabled') continue;
-
- // Check if this field is an array type in the schema
- if (schema?.properties?.[key]?.type === 'array') {
- // Convert comma-separated string to array
- const arrayValue = value.split(',').map(item => item.trim()).filter(item => item.length > 0);
- config[key] = arrayValue;
- console.log(`Array field ${key}: "${value}" -> `, arrayValue);
- } else if (key === 'display_duration' || schema?.properties?.[key]?.type === 'integer') {
- config[key] = parseInt(value);
- } else if (schema?.properties?.[key]?.type === 'number') {
- config[key] = parseFloat(value);
- } else if (schema?.properties?.[key]?.type === 'boolean') {
- config[key] = value === 'true' || value === true;
- } else {
- config[key] = value;
- }
- }
-
- console.log('Final config to save:', config);
- console.log('Schema loaded:', schema ? 'Yes' : 'No');
-
- // Save the configuration
- savePluginConfiguration(currentPluginConfig.pluginId, config);
- }
-});
+// Plugin configuration form submission is handled by handlePluginConfigSubmit
+// which is attached directly to the form. The document-level listener has been removed
+// to avoid duplicate submissions and to ensure proper handling of _data fields.
function savePluginConfiguration(pluginId, config) {
// Update the plugin configuration in the backend
@@ -6270,8 +6445,285 @@ window.updateImageScheduleDay = function(fieldId, imageId, imageIdx, day) {
window.updateImageList(fieldId, currentImages);
}
+// Expose renderArrayObjectItem and getSchemaProperty to window for use by global functions
+window.renderArrayObjectItem = renderArrayObjectItem;
+window.getSchemaProperty = getSchemaProperty;
+
})(); // End IIFE
+// Functions to handle array-of-objects
+// Define these at the top level (outside any IIFE) to ensure they're always available
+if (typeof window !== 'undefined') {
+ window.addArrayObjectItem = function(fieldId, fullKey, maxItems) {
+ const itemsContainer = document.getElementById(fieldId + '_items');
+ const hiddenInput = document.getElementById(fieldId + '_data');
+ if (!itemsContainer || !hiddenInput) return;
+
+ const currentItems = itemsContainer.querySelectorAll('.array-object-item');
+ if (currentItems.length >= maxItems) {
+ alert(`Maximum ${maxItems} items allowed`);
+ return;
+ }
+
+ // Get schema for item properties - ensure currentPluginConfig is available
+ // Try window.currentPluginConfig first (most reliable), then currentPluginConfig
+ const schema = (typeof window.currentPluginConfig !== 'undefined' && window.currentPluginConfig?.schema) ||
+ (typeof currentPluginConfig !== 'undefined' && currentPluginConfig?.schema);
+ if (!schema) {
+ console.error('addArrayObjectItem: Schema not available. currentPluginConfig may not be set.');
+ return;
+ }
+
+ // Use getSchemaProperty to properly handle nested schemas (e.g., news.custom_feeds)
+ const arraySchema = window.getSchemaProperty(schema, fullKey);
+ if (!arraySchema || arraySchema.type !== 'array' || !arraySchema.items) {
+ return;
+ }
+
+ const itemsSchema = arraySchema.items;
+ if (!itemsSchema || !itemsSchema.properties) return;
+
+ const newIndex = currentItems.length;
+ // Use renderArrayObjectItem if available, otherwise create basic HTML
+ let itemHtml = '';
+ if (typeof window.renderArrayObjectItem === 'function') {
+ itemHtml = window.renderArrayObjectItem(fieldId, fullKey, itemsSchema.properties, {}, newIndex, itemsSchema);
+ } else {
+ // Fallback: create basic HTML structure
+ // Note: newItem is {} for newly added items, so this will use schema defaults
+ const newItem = {};
+ itemHtml = ``;
+ }
+ itemsContainer.insertAdjacentHTML('beforeend', itemHtml);
+ window.updateArrayObjectData(fieldId);
+
+ // Update add button state
+ const addButton = itemsContainer.nextElementSibling;
+ if (addButton && currentItems.length + 1 >= maxItems) {
+ addButton.disabled = true;
+ addButton.style.opacity = '0.5';
+ addButton.style.cursor = 'not-allowed';
+ }
+ };
+
+ window.removeArrayObjectItem = function(fieldId, index) {
+ const itemsContainer = document.getElementById(fieldId + '_items');
+ if (!itemsContainer) return;
+
+ const item = itemsContainer.querySelector(`.array-object-item[data-index="${index}"]`);
+ if (item) {
+ item.remove();
+ // Re-index remaining items
+ // Use data-index for index storage - no need to encode index in onclick strings or IDs
+ const remainingItems = itemsContainer.querySelectorAll('.array-object-item');
+ remainingItems.forEach((itemEl, newIndex) => {
+ itemEl.setAttribute('data-index', newIndex);
+ // Update all inputs within this item - only update index in array bracket notation
+ itemEl.querySelectorAll('input, select, textarea').forEach(input => {
+ const name = input.getAttribute('name');
+ const id = input.id;
+ if (name) {
+ // Only replace index in bracket notation like [0], [1], etc.
+ // Match pattern: field_name[index] but not field_name123
+ const newName = name.replace(/\[(\d+)\]/, `[${newIndex}]`);
+ input.setAttribute('name', newName);
+ }
+ if (id) {
+ // Only update index in specific patterns like _item_0, _item_1
+ // Match pattern: _item_ but be careful not to break other numeric IDs
+ const newId = id.replace(/_item_(\d+)/, `_item_${newIndex}`);
+ input.id = newId;
+ }
+ });
+ // Update button onclick attributes - only update the index parameter
+ // Since we use data-index for tracking, we can compute index from closest('.array-object-item')
+ // For now, update onclick strings but be more careful with the regex
+ itemEl.querySelectorAll('button[onclick]').forEach(button => {
+ const onclick = button.getAttribute('onclick');
+ if (onclick) {
+ // Match patterns like:
+ // removeArrayObjectItem('fieldId', 0)
+ // handleArrayObjectFileUpload(event, 'fieldId', 0, 'propKey', 'pluginId')
+ // removeArrayObjectFile('fieldId', 0, 'propKey')
+ // Only replace the numeric index parameter (second or third argument depending on function)
+ let newOnclick = onclick;
+ // For removeArrayObjectItem('fieldId', index) - second param
+ newOnclick = newOnclick.replace(
+ /removeArrayObjectItem\s*\(\s*['"]([^'"]+)['"]\s*,\s*\d+\s*\)/g,
+ `removeArrayObjectItem('$1', ${newIndex})`
+ );
+ // For handleArrayObjectFileUpload(event, 'fieldId', index, ...) - third param
+ newOnclick = newOnclick.replace(
+ /handleArrayObjectFileUpload\s*\(\s*event\s*,\s*['"]([^'"]+)['"]\s*,\s*\d+\s*,/g,
+ `handleArrayObjectFileUpload(event, '$1', ${newIndex},`
+ );
+ // For removeArrayObjectFile('fieldId', index, ...) - second param
+ newOnclick = newOnclick.replace(
+ /removeArrayObjectFile\s*\(\s*['"]([^'"]+)['"]\s*,\s*\d+\s*,/g,
+ `removeArrayObjectFile('$1', ${newIndex},`
+ );
+ button.setAttribute('onclick', newOnclick);
+ }
+ });
+ });
+ window.updateArrayObjectData(fieldId);
+
+ // Update add button state
+ const addButton = itemsContainer.nextElementSibling;
+ if (addButton && addButton.getAttribute('onclick')) {
+ // Extract maxItems from onclick attribute more safely
+ // Pattern: addArrayObjectItem('fieldId', 'fullKey', maxItems)
+ const onclickMatch = addButton.getAttribute('onclick').match(/addArrayObjectItem\s*\([^,]+,\s*[^,]+,\s*(\d+)\)/);
+ if (onclickMatch && onclickMatch[1]) {
+ const maxItems = parseInt(onclickMatch[1]);
+ if (remainingItems.length < maxItems) {
+ addButton.disabled = false;
+ addButton.style.opacity = '1';
+ addButton.style.cursor = 'pointer';
+ }
+ }
+ }
+ }
+ };
+
+ window.updateArrayObjectData = function(fieldId) {
+ const itemsContainer = document.getElementById(fieldId + '_items');
+ const hiddenInput = document.getElementById(fieldId + '_data');
+ if (!itemsContainer || !hiddenInput) return;
+
+ // Get schema for type coercion
+ const schema = (typeof currentPluginConfig !== 'undefined' && currentPluginConfig?.schema) || (typeof window.currentPluginConfig !== 'undefined' && window.currentPluginConfig?.schema);
+ // Extract fullKey from hidden input name (e.g., "feeds_data" -> "feeds")
+ const fullKey = hiddenInput.getAttribute('name').replace(/_data$/, '');
+ let itemsSchema = null;
+ if (schema && typeof window.getSchemaProperty === 'function') {
+ const arraySchema = window.getSchemaProperty(schema, fullKey);
+ if (arraySchema && arraySchema.type === 'array' && arraySchema.items && arraySchema.items.properties) {
+ itemsSchema = arraySchema.items;
+ }
+ }
+
+ const items = [];
+ const itemElements = itemsContainer.querySelectorAll('.array-object-item');
+
+ itemElements.forEach((itemEl, index) => {
+ const item = {};
+ const itemProperties = itemsSchema ? itemsSchema.properties : {};
+
+ // Get all text inputs in this item
+ itemEl.querySelectorAll('input[type="text"], input[type="url"], input[type="number"]').forEach(input => {
+ const propKey = input.getAttribute('data-prop-key');
+ if (propKey && propKey !== 'logo_file') {
+ let value = input.value.trim();
+
+ // Type coercion based on schema
+ if (itemsSchema && itemProperties[propKey]) {
+ const propSchema = itemProperties[propKey];
+ const propType = propSchema.type;
+
+ if (propType === 'integer') {
+ const numValue = parseInt(value, 10);
+ value = isNaN(numValue) ? value : numValue;
+ } else if (propType === 'number') {
+ const numValue = parseFloat(value);
+ value = isNaN(numValue) ? value : numValue;
+ }
+ // string and other types keep as-is
+ }
+
+ item[propKey] = value;
+ }
+ });
+ // Handle checkboxes
+ itemEl.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
+ const propKey = checkbox.getAttribute('data-prop-key');
+ if (propKey) {
+ item[propKey] = checkbox.checked;
+ }
+ });
+ // Handle file upload data (stored in data attributes)
+ itemEl.querySelectorAll('[data-file-data]').forEach(fileEl => {
+ const fileData = fileEl.getAttribute('data-file-data');
+ if (fileData) {
+ try {
+ const data = JSON.parse(fileData);
+ const propKey = fileEl.getAttribute('data-prop-key');
+ if (propKey) {
+ item[propKey] = data;
+ }
+ } catch (e) {
+ console.error('Error parsing file data:', e);
+ }
+ }
+ });
+ items.push(item);
+ });
+
+ hiddenInput.value = JSON.stringify(items);
+ };
+
+ window.updateCheckboxGroupData = function(fieldId) {
+ // Update hidden _data input with currently checked values
+ const hiddenInput = document.getElementById(fieldId + '_data');
+ if (!hiddenInput) return;
+
+ const checkboxes = document.querySelectorAll(`input[type="checkbox"][data-checkbox-group="${fieldId}"]`);
+ const selectedValues = [];
+
+ checkboxes.forEach(checkbox => {
+ if (checkbox.checked) {
+ const optionValue = checkbox.getAttribute('data-option-value') || checkbox.value;
+ selectedValues.push(optionValue);
+ }
+ });
+
+ hiddenInput.value = JSON.stringify(selectedValues);
+ };
+
+ window.handleArrayObjectFileUpload = function(event, fieldId, itemIndex, propKey, pluginId) {
+ // TODO: Implement file upload handling for array object items
+ // This is a placeholder - file upload in nested objects needs special handling
+ console.log('File upload for array object item:', { fieldId, itemIndex, propKey, pluginId });
+ window.updateArrayObjectData(fieldId);
+ };
+
+ window.removeArrayObjectFile = function(fieldId, itemIndex, propKey) {
+ // TODO: Implement file removal for array object items
+ // This is a placeholder - file removal in nested objects needs special handling
+ console.log('File removal for array object item:', { fieldId, itemIndex, propKey });
+ window.updateArrayObjectData(fieldId);
+ };
+
+ // Debug logging (only if pluginDebug is enabled)
+ if (_PLUGIN_DEBUG_EARLY) {
+ console.log('[ARRAY-OBJECTS] Functions defined on window:', {
+ addArrayObjectItem: typeof window.addArrayObjectItem,
+ removeArrayObjectItem: typeof window.removeArrayObjectItem,
+ updateArrayObjectData: typeof window.updateArrayObjectData,
+ handleArrayObjectFileUpload: typeof window.handleArrayObjectFileUpload,
+ removeArrayObjectFile: typeof window.removeArrayObjectFile
+ });
+ }
+}
+
// Make currentPluginConfig globally accessible (outside IIFE)
window.currentPluginConfig = null;
diff --git a/web_interface/templates/v3/base.html b/web_interface/templates/v3/base.html
index d36beca9..ce3fee56 100644
--- a/web_interface/templates/v3/base.html
+++ b/web_interface/templates/v3/base.html
@@ -4818,7 +4818,225 @@
-
+
+
+
+
diff --git a/web_interface/templates/v3/partials/plugin_config.html b/web_interface/templates/v3/partials/plugin_config.html
index 52fa4727..c50c2287 100644
--- a/web_interface/templates/v3/partials/plugin_config.html
+++ b/web_interface/templates/v3/partials/plugin_config.html
@@ -58,7 +58,7 @@
{% if field_type == 'integer' %}step="1"{% else %}step="any"{% endif %}
class="form-input w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 bg-white text-black placeholder:text-gray-500">
- {# Array - check if it's a file upload widget #}
+ {# Array - check for file upload widget first (to avoid breaking static-image plugin), then checkbox-group, then array of objects #}
{% elif field_type == 'array' %}
{% set x_widget = prop.get('x-widget') or prop.get('x_widget') %}
{% if x_widget == 'file-upload' %}
@@ -152,16 +152,148 @@
+ {% elif x_widget == 'checkbox-group' %}
+ {# Checkbox group widget for multi-select arrays with enum items #}
+ {% set array_value = value if value is not none and value is iterable and value is not string else (prop.default if prop.default is defined and prop.default is iterable and prop.default is not string else []) %}
+ {% set items_schema = prop.get('items') or {} %}
+ {% set enum_items = items_schema.get('enum') or [] %}
+ {% set x_options = prop.get('x-options') or {} %}
+ {% set labels = x_options.get('labels') or {} %}
+
+
+ {% for option in enum_items %}
+ {% set is_checked = option in array_value %}
+ {% set option_label = labels.get(option, option|replace('_', ' ')|title) %}
+ {% set checkbox_id = (field_id ~ '_' ~ option)|replace('.', '_')|replace(' ', '_') %}
+
+ {{ option_label }}
+
+ {% endfor %}
+
+ {# Hidden input to store selected values as JSON array (like array-of-objects pattern) #}
+ Separate multiple values with commas
+ {# Check for custom-feeds widget first #}
+ {% set items_schema = prop.get('items') or {} %}
+ {% if x_widget == 'custom-feeds' %}
+ {# Custom feeds table interface - widget-specific implementation #}
+ {# Validate that required fields exist in schema #}
+ {% set item_properties = items_schema.get('properties', {}) %}
+ {% if not (item_properties.get('name') and item_properties.get('url')) %}
+ {# Fallback to generic if schema doesn't match expected structure #}
+
+
+ {% else %}
+ {% set max_items = prop.get('maxItems', 50) %}
+ {% set array_value = value if value is not none and value is iterable and value is not string else (prop.default if prop.default is defined and prop.default is iterable and prop.default is not string else []) %}
+
+
+
+
= max_items %}disabled style="opacity: 0.5;"{% endif %}>
+
+
Separate multiple values with commas
+ {% endif %}
{% endif %}
{# Text input (default) #}
+ File upload not yet available for array items
+