From a92078442e464ae796ef394075c4efc279befa69 Mon Sep 17 00:00:00 2001
From: Chuck <chuck@example.com>
Date: Mon, 5 Jan 2026 14:49:43 -0500
Subject: [PATCH] Replace complex array-of-objects widget with simple table
 interface

- Replace nested array-of-objects widget with clean table interface
- Table shows: Name, URL, Logo (with upload), Enabled checkbox, Delete button
- Fix file-upload widget detection order to prevent breaking static-image plugin
- Add simple JavaScript functions for add/remove rows and logo upload
- Much more intuitive and easier to use
---
 web_interface/templates/v3/base.html          | 141 ++++++++++++++++++
 .../templates/v3/partials/plugin_config.html  | 111 +-------------
 2 files changed, 144 insertions(+), 108 deletions(-)

diff --git a/web_interface/templates/v3/base.html b/web_interface/templates/v3/base.html
index 9a37c291..07520b1e 100644
--- a/web_interface/templates/v3/base.html
+++ b/web_interface/templates/v3/base.html
@@ -4820,6 +4820,147 @@
     <!-- Legacy plugins_manager.js (for backward compatibility during migration) -->
     <script src="{{ url_for('static', filename='v3/plugins_manager.js') }}?v=20250104i" defer></script>
     
+    <!-- Custom feeds table helper functions -->
+    <script>
+        function addCustomFeedRow(fieldId, fullKey, maxItems) {
+            const tbody = document.getElementById(fieldId + '_tbody');
+            if (!tbody) return;
+            
+            const currentRows = tbody.querySelectorAll('.custom-feed-row');
+            if (currentRows.length >= maxItems) {
+                alert(`Maximum ${maxItems} feeds allowed`);
+                return;
+            }
+            
+            const newIndex = currentRows.length;
+            const newRow = document.createElement('tr');
+            newRow.className = 'custom-feed-row';
+            newRow.setAttribute('data-index', newIndex);
+            newRow.innerHTML = `
+                <td class="px-4 py-3 whitespace-nowrap">
+                    <input type="text" 
+                           name="${fullKey}[${newIndex}].name"
+                           value=""
+                           class="block w-full px-2 py-1 border border-gray-300 rounded text-sm"
+                           placeholder="Feed Name"
+                           required>
+                </td>
+                <td class="px-4 py-3 whitespace-nowrap">
+                    <input type="url" 
+                           name="${fullKey}[${newIndex}].url"
+                           value=""
+                           class="block w-full px-2 py-1 border border-gray-300 rounded text-sm"
+                           placeholder="https://example.com/feed"
+                           required>
+                </td>
+                <td class="px-4 py-3 whitespace-nowrap">
+                    <div class="flex items-center space-x-2">
+                        <input type="file" 
+                               id="${fieldId}_logo_${newIndex}"
+                               accept="image/png,image/jpeg,image/bmp"
+                               style="display: none;"
+                               onchange="handleCustomFeedLogoUpload(event, '${fieldId}', ${newIndex}, 'ledmatrix-news')">
+                        <button type="button" 
+                                onclick="document.getElementById('${fieldId}_logo_${newIndex}').click()"
+                                class="px-2 py-1 text-xs bg-gray-200 hover:bg-gray-300 rounded">
+                            <i class="fas fa-upload mr-1"></i> Upload
+                        </button>
+                        <span class="text-xs text-gray-400">No logo</span>
+                    </div>
+                </td>
+                <td class="px-4 py-3 whitespace-nowrap text-center">
+                    <input type="checkbox" 
+                           name="${fullKey}[${newIndex}].enabled"
+                           checked
+                           class="h-4 w-4 text-blue-600">
+                </td>
+                <td class="px-4 py-3 whitespace-nowrap text-center">
+                    <button type="button" 
+                            onclick="removeCustomFeedRow(this)"
+                            class="text-red-600 hover:text-red-800 px-2 py-1">
+                        <i class="fas fa-trash"></i>
+                    </button>
+                </td>
+            `;
+            tbody.appendChild(newRow);
+        }
+        
+        function removeCustomFeedRow(button) {
+            const row = button.closest('tr');
+            if (row && confirm('Remove this feed?')) {
+                row.remove();
+                // Re-index remaining rows
+                const tbody = row.parentElement;
+                const rows = tbody.querySelectorAll('.custom-feed-row');
+                rows.forEach((r, index) => {
+                    r.setAttribute('data-index', index);
+                    // Update all input names with new index
+                    r.querySelectorAll('input, button').forEach(input => {
+                        const name = input.getAttribute('name');
+                        if (name) {
+                            input.setAttribute('name', name.replace(/\[\d+\]/, `[${index}]`));
+                        }
+                        const id = input.id;
+                        if (id && id.includes('_logo_')) {
+                            const newId = id.replace(/_logo_\d+/, `_logo_${index}`);
+                            input.id = newId;
+                            if (input.onclick) {
+                                input.setAttribute('onclick', input.getAttribute('onclick').replace(/\d+/, index));
+                            }
+                        }
+                    });
+                });
+            }
+        }
+        
+        function handleCustomFeedLogoUpload(event, fieldId, index, pluginId) {
+            const file = event.target.files[0];
+            if (!file) return;
+            
+            const formData = new FormData();
+            formData.append('file', file);
+            formData.append('plugin_id', pluginId);
+            
+            fetch('/api/v3/plugins/assets/upload', {
+                method: 'POST',
+                body: formData
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.status === 'success' && data.data && data.data.files && data.data.files.length > 0) {
+                    const uploadedFile = data.data.files[0];
+                    const row = document.querySelector(`#${fieldId}_tbody tr[data-index="${index}"]`);
+                    if (row) {
+                        const logoCell = row.querySelector('td:nth-child(3)');
+                        logoCell.innerHTML = `
+                            <div class="flex items-center space-x-2">
+                                <input type="file" 
+                                       id="${fieldId}_logo_${index}"
+                                       accept="image/png,image/jpeg,image/bmp"
+                                       style="display: none;"
+                                       onchange="handleCustomFeedLogoUpload(event, '${fieldId}', ${index}, '${pluginId}')">
+                                <button type="button" 
+                                        onclick="document.getElementById('${fieldId}_logo_${index}').click()"
+                                        class="px-2 py-1 text-xs bg-gray-200 hover:bg-gray-300 rounded">
+                                    <i class="fas fa-upload mr-1"></i> Upload
+                                </button>
+                                <img src="/${uploadedFile.path}" alt="Logo" class="w-8 h-8 object-cover rounded border" id="${fieldId}_logo_preview_${index}">
+                                <input type="hidden" name="${logoCell.querySelector('input[name*=".logo.path"]')?.name || `feeds.custom_feeds[${index}].logo.path`}" value="${uploadedFile.path}">
+                                <input type="hidden" name="${logoCell.querySelector('input[name*=".logo.id"]')?.name || `feeds.custom_feeds[${index}].logo.id`}" value="${uploadedFile.id}">
+                            </div>
+                        `;
+                    }
+                } else {
+                    alert('Upload failed: ' + (data.message || 'Unknown error'));
+                }
+            })
+            .catch(error => {
+                console.error('Upload error:', error);
+                alert('Upload failed: ' + error.message);
+            });
+        }
+    </script>
+    
     <!-- On-Demand Modal (moved here from plugins.html so it's always available) -->
     <div id="on-demand-modal" class="fixed inset-0 modal-backdrop flex items-center justify-center z-50" style="display: none;">
         <div class="modal-content p-6 w-full max-w-md bg-white rounded-lg shadow-lg">
diff --git a/web_interface/templates/v3/partials/plugin_config.html b/web_interface/templates/v3/partials/plugin_config.html
index 7113ff6d..5a8bd851 100644
--- a/web_interface/templates/v3/partials/plugin_config.html
+++ b/web_interface/templates/v3/partials/plugin_config.html
@@ -58,115 +58,10 @@
                    {% 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 an array of objects first, then file upload widget #}
+            {# Array - check for file upload widget first (to avoid breaking static-image plugin), then array of objects #}
             {% elif field_type == 'array' %}
-            {% set items_schema = prop.get('items') or {} %}
-            {% set is_array_of_objects = items_schema.get('type') == 'object' and items_schema.get('properties') %}
-            {% if is_array_of_objects %}
-                {# Array of objects widget (like custom_feeds with name, url, enabled, logo) #}
-                {% set item_properties = items_schema.get('properties', {}) %}
-                {% 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 []) %}
-                
-                <div class="array-of-objects-container mt-1">
-                    <div id="{{ field_id }}_items" class="space-y-4">
-                        {% for item in array_value %}
-                        {% set item_index = loop.index0 %}
-                        <div class="border border-gray-300 rounded-lg p-4 bg-gray-50 array-object-item" data-index="{{ item_index }}">
-                            {% for prop_key, prop_schema in item_properties.items() %}
-                            {% set prop_value = item.get(prop_key, prop_schema.get('default')) %}
-                            {% set prop_label = prop_schema.get('title') or prop_key|replace('_', ' ')|title %}
-                            {% set prop_description = prop_schema.get('description') or '' %}
-                            {% set prop_full_key = full_key ~ '[' ~ item_index ~ '].' ~ prop_key %}
-                            {% set prop_field_id = field_id ~ '_item_' ~ item_index ~ '_' ~ prop_key %}
-                            
-                            <div class="mb-3">
-                                {% if prop_schema.get('x-widget') == 'file-upload' %}
-                                    {# File upload widget for logo field #}
-                                    {% set upload_config = prop_schema.get('x-upload-config') or {} %}
-                                    {% set plugin_id_from_config = upload_config.get('plugin_id', plugin_id) %}
-                                    {% set allowed_types = upload_config.get('allowed_types', ['image/png', 'image/jpeg', 'image/bmp']) %}
-                                    
-                                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ prop_label }}</label>
-                                    {% if prop_description %}
-                                    <p class="text-xs text-gray-500 mb-2">{{ prop_description }}</p>
-                                    {% endif %}
-                                    
-                                    <div class="file-upload-widget-inline">
-                                        <input type="file" 
-                                               id="{{ prop_field_id }}_file" 
-                                               accept="{{ allowed_types|join(',') }}"
-                                               style="display: none;"
-                                               onchange="if (typeof window.handleArrayObjectFileUpload === 'function') { window.handleArrayObjectFileUpload(event, '{{ field_id }}', {{ item_index }}, '{{ prop_key }}', '{{ plugin_id_from_config }}'); } else { console.error('handleArrayObjectFileUpload not available'); }">
-                                        <button type="button" 
-                                                onclick="document.getElementById('{{ prop_field_id }}_file').click()"
-                                                class="px-3 py-2 text-sm bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-md transition-colors">
-                                            <i class="fas fa-upload mr-1"></i> Upload Logo
-                                        </button>
-                                        
-                                        {% if prop_value and prop_value.get('path') %}
-                                        <div class="mt-2 flex items-center space-x-2" data-file-data='{{ prop_value|tojson|safe }}' data-prop-key="{{ prop_key }}">
-                                            <img src="/{{ prop_value.get('path') }}" alt="Logo" class="w-16 h-16 object-cover rounded border">
-                                            <button type="button" 
-                                                    onclick="if (typeof window.removeArrayObjectFile === 'function') { window.removeArrayObjectFile('{{ field_id }}', {{ item_index }}, '{{ prop_key }}'); } else { console.error('removeArrayObjectFile not available'); }"
-                                                    class="text-red-600 hover:text-red-800">
-                                                <i class="fas fa-trash"></i> Remove
-                                            </button>
-                                        </div>
-                                        {% endif %}
-                                    </div>
-                                {% elif prop_schema.get('type') == 'boolean' %}
-                                    {# Boolean checkbox #}
-                                    <label class="flex items-center">
-                                        <input type="checkbox" 
-                                               id="{{ prop_field_id }}"
-                                               data-prop-key="{{ prop_key }}"
-                                               class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
-                                               {% if prop_value %}checked{% endif %}
-                                               onchange="if (typeof window.updateArrayObjectData === 'function') { window.updateArrayObjectData('{{ field_id }}'); }">
-                                        <span class="ml-2 text-sm text-gray-700">{{ prop_label }}</span>
-                                    </label>
-                                {% else %}
-                                    {# Regular text/string input #}
-                                    <label for="{{ prop_field_id }}" class="block text-sm font-medium text-gray-700 mb-1">
-                                        {{ prop_label }}
-                                    </label>
-                                    {% if prop_description %}
-                                    <p class="text-xs text-gray-500 mb-1">{{ prop_description }}</p>
-                                    {% endif %}
-                                    <input type="text" 
-                                           id="{{ prop_field_id }}"
-                                           data-prop-key="{{ prop_key }}"
-                                           class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-white text-black"
-                                           value="{{ prop_value if prop_value is not none else '' }}"
-                                           placeholder="{% if prop_schema.get('format') == 'uri' %}https://example.com/feed{% endif %}"
-                                           onchange="updateArrayObjectData('{{ field_id }}')">
-                                {% endif %}
-                            </div>
-                            {% endfor %}
-                            
-                            <div class="flex justify-end mt-2">
-                                <button type="button" 
-                                        onclick="if (typeof window.removeArrayObjectItem === 'function') { window.removeArrayObjectItem('{{ field_id }}', {{ item_index }}); } else { console.error('removeArrayObjectItem not available'); }"
-                                        class="px-3 py-2 text-red-600 hover:text-red-800 hover:bg-red-50 rounded-md transition-colors"
-                                        title="Remove Feed">
-                                    <i class="fas fa-trash mr-1"></i> Remove Feed
-                                </button>
-                            </div>
-                        </div>
-                        {% endfor %}
-                    </div>
-                    
-                    <button type="button" 
-                            onclick="console.log('Button clicked, checking functions:', { addArrayObjectItem: typeof window.addArrayObjectItem, removeArrayObjectItem: typeof window.removeArrayObjectItem, updateArrayObjectData: typeof window.updateArrayObjectData }); if (typeof window.addArrayObjectItem === 'function') { window.addArrayObjectItem('{{ field_id }}', '{{ full_key }}', {{ max_items }}); } else { console.error('addArrayObjectItem not available. Available window functions:', Object.keys(window).filter(k => k.includes('Array'))); }"
-                            class="mt-3 px-4 py-2 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded-md transition-colors"
-                            {% if array_value|length >= max_items %}disabled style="opacity: 0.5; cursor: not-allowed;"{% endif %}>
-                        <i class="fas fa-plus mr-1"></i> Add Feed
-                    </button>
-                    
-                    <input type="hidden" id="{{ field_id }}_data" name="{{ full_key }}_data" value='{{ array_value|tojson|safe }}'>
-                </div>
-            {% elif prop.get('x-widget') == 'file-upload' or prop.get('x_widget') == 'file-upload' %}
+            {% set x_widget = prop.get('x-widget') or prop.get('x_widget') %}
+            {% if x_widget == 'file-upload' %}
                 {# File upload widget for arrays #}
                 {% set upload_config = prop.get('x-upload-config') or {} %}
                 {% set max_files = upload_config.get('max_files', 10) %}