mirror of
https://github.com/ChuckBuilds/LEDMatrix.git
synced 2026-04-10 13:02:59 +00:00
81a022dbe8
* fix(web): resolve file upload config lookup for server-rendered forms
The file upload widget's getUploadConfig() function failed to map
server-rendered field IDs (e.g., "static-image-images") back to schema
property keys ("images"), causing upload config (plugin_id, endpoint,
allowed_types) to be lost. This could prevent image uploads from
working correctly in the static-image plugin and others.
Changes:
- Add data-* attributes to the Jinja2 file-upload template so upload
config is embedded directly on the file input element
- Update getUploadConfig() in both file-upload.js and plugins_manager.js
to read config from data attributes first, falling back to schema lookup
- Remove duplicate handleFiles/handleFileDrop/handleFileSelect from
plugins_manager.js that overwrote the more robust file-upload.js versions
- Bump cache-busting version strings so browsers fetch updated JS
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* fix(web): harden file upload functions against CodeRabbit patterns
- Add response.ok guard before response.json() in handleFiles,
deleteUploadedFile, and handleCredentialsUpload to prevent
SyntaxError on non-JSON error responses (PR #271 finding)
- Remove duplicate getUploadConfig() from plugins_manager.js;
file-upload.js now owns this function exclusively
- Replace innerHTML with textContent/DOM methods in
handleCredentialsUpload to prevent XSS (PR #271 finding)
- Fix redundant if-check in getUploadConfig data-attribute reader
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* fix(web): address CodeRabbit findings on file upload widget
- Add data-multiple="true" discriminator on array file inputs so
handleFileDrop routes multi-file drops to handleFiles() not
handleSingleFileUpload()
- Duplicate upload config data attributes onto drop zone wrapper so
getUploadConfig() survives progress-helper DOM re-renders that
remove the file input element
- Clear file input in finally block after credentials upload to allow
re-selecting the same file on retry
- Branch deleteUploadedFile on fileType: JSON deletes remove the DOM
element directly instead of routing through updateImageList() which
renders image-specific cards (thumbnails, scheduling controls)
Addresses CodeRabbit findings on PR #279:
- Major: drag-and-drop hits single-file path for array uploaders
- Major: config lookup fails after first upload (DOM node removed)
- Minor: same-file retry silently no-ops
- Major: JSON deletes re-render list as images
Co-Authored-By: 5ymb01 <5ymb01@users.noreply.github.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* fix(web): address CodeRabbit round-2 findings on file upload widget
- Extract getConfigSourceElement() helper so handleFileDrop,
handleSingleFileUpload, and getUploadConfig all share the same
fallback logic: file input → drop zone wrapper
- Remove pluginId gate from getUploadConfig Strategy 1 — fields with
uploadEndpoint or fileType but no pluginId now return config instead
of falling through to generic defaults
- Fix JSON delete identifier mismatch: use file.id || file.category_name
(matching the renderer at line 3202) instead of f.file_id; remove
regex sanitization on DOM id lookup (renderer doesn't sanitize)
Addresses CodeRabbit round-2 findings on PR #279:
- Major: single-file uploads bypass drop-zone config fallback
- Major: getUploadConfig gated on data-plugin-id only
- Major: JSON delete file identifier mismatch vs renderer
Co-Authored-By: 5ymb01 <5ymb01@users.noreply.github.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* fix(web): align delete handler file identifier with renderer logic
Remove f.file_id from JSON file delete filter to match the renderer's
identifier logic (file.id || file.category_name || idx). Prevents
deleted entries from persisting in the hidden input on next save.
Co-Authored-By: 5ymb01 <noreply@github.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---------
Co-authored-by: 5ymb01 <5ymb01@users.noreply.github.com>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: 5ymb01 <noreply@github.com>
963 lines
63 KiB
HTML
963 lines
63 KiB
HTML
{# Plugin Configuration Partial - Server-side rendered form #}
|
|
{# This template is loaded via HTMX when a plugin tab is clicked #}
|
|
|
|
{# ===== MACROS FOR FORM FIELD GENERATION ===== #}
|
|
|
|
{# Render a single form field based on schema type #}
|
|
{% macro render_field(key, prop, value, prefix='', plugin_id='') %}
|
|
{% set full_key = (prefix ~ '.' ~ key) if prefix else key %}
|
|
{% set field_id = (plugin_id ~ '-' ~ full_key)|replace('.', '-')|replace('_', '-') %}
|
|
{% set label = prop.title if prop.title else key|replace('_', ' ')|title %}
|
|
{% set description = prop.description if prop.description else '' %}
|
|
{% set field_type = prop.type if prop.type is string else (prop.type[0] if prop.type is iterable else 'string') %}
|
|
|
|
{# Handle nested objects - check for widget first #}
|
|
{% if field_type == 'object' %}
|
|
{% set obj_widget = prop.get('x-widget') or prop.get('x_widget') %}
|
|
{% if obj_widget == 'schedule-picker' %}
|
|
{# Schedule picker widget - renders enable/mode/times UI #}
|
|
{% set obj_value = value if value is not none else {} %}
|
|
<div class="form-group mb-4">
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">{{ label }}</label>
|
|
{% if description %}<p class="text-sm text-gray-500 mb-2">{{ description }}</p>{% endif %}
|
|
<div id="{{ field_id }}_container" class="schedule-picker-container mt-1"></div>
|
|
<input type="hidden" id="{{ field_id }}_data" name="{{ full_key }}" value='{{ (obj_value|tojson|safe)|replace("'", "'") }}'>
|
|
</div>
|
|
<script>
|
|
(function() {
|
|
function initWidget() {
|
|
if (!window.LEDMatrixWidgets) { setTimeout(initWidget, 50); return; }
|
|
var widget = window.LEDMatrixWidgets.get('schedule-picker');
|
|
if (!widget) { setTimeout(initWidget, 50); return; }
|
|
var container = document.getElementById('{{ field_id }}_container');
|
|
if (!container) return;
|
|
var value = {{ obj_value|tojson|safe }};
|
|
var config = { 'x-options': {{ (prop.get('x-options') or prop.get('x_options') or {})|tojson|safe }} };
|
|
widget.render(container, config, value, { fieldId: '{{ field_id }}', pluginId: '{{ plugin_id }}' });
|
|
}
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', initWidget);
|
|
} else {
|
|
setTimeout(initWidget, 50);
|
|
}
|
|
})();
|
|
</script>
|
|
{% elif obj_widget == 'time-range' %}
|
|
{# Time range widget - renders start/end time inputs #}
|
|
{% set obj_value = value if value is not none else {} %}
|
|
<div class="form-group mb-4">
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">{{ label }}</label>
|
|
{% if description %}<p class="text-sm text-gray-500 mb-2">{{ description }}</p>{% endif %}
|
|
<div id="{{ field_id }}_container" class="time-range-container mt-1"></div>
|
|
<input type="hidden" id="{{ field_id }}_data" name="{{ full_key }}" value='{{ (obj_value|tojson|safe)|replace("'", "'") }}'>
|
|
</div>
|
|
<script>
|
|
(function() {
|
|
function initWidget() {
|
|
if (!window.LEDMatrixWidgets) { setTimeout(initWidget, 50); return; }
|
|
var widget = window.LEDMatrixWidgets.get('time-range');
|
|
if (!widget) { setTimeout(initWidget, 50); return; }
|
|
var container = document.getElementById('{{ field_id }}_container');
|
|
if (!container) return;
|
|
var value = {{ obj_value|tojson|safe }};
|
|
var config = { 'x-options': {{ (prop.get('x-options') or prop.get('x_options') or {})|tojson|safe }} };
|
|
widget.render(container, config, value, { fieldId: '{{ field_id }}', pluginId: '{{ plugin_id }}' });
|
|
}
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', initWidget);
|
|
} else {
|
|
setTimeout(initWidget, 50);
|
|
}
|
|
})();
|
|
</script>
|
|
{% elif prop.properties %}
|
|
{{ render_nested_section(key, prop, value, prefix, plugin_id) }}
|
|
{% endif %}
|
|
{% else %}
|
|
<div class="form-group mb-4">
|
|
<label for="{{ field_id }}" class="block text-sm font-medium text-gray-700 mb-1">
|
|
{{ label }}
|
|
</label>
|
|
|
|
{% if description %}
|
|
<p class="text-sm text-gray-500 mb-2">{{ description }}</p>
|
|
{% endif %}
|
|
|
|
{# Boolean - check for widget first #}
|
|
{% if field_type == 'boolean' %}
|
|
{% set bool_widget = prop.get('x-widget') or prop.get('x_widget') %}
|
|
{% if bool_widget == 'toggle-switch' %}
|
|
{# Render toggle-switch widget #}
|
|
<div id="{{ field_id }}_container" class="toggle-switch-container"></div>
|
|
<script>
|
|
(function() {
|
|
function initWidget() {
|
|
if (!window.LEDMatrixWidgets) { setTimeout(initWidget, 50); return; }
|
|
var widget = window.LEDMatrixWidgets.get('toggle-switch');
|
|
if (!widget) { setTimeout(initWidget, 50); return; }
|
|
var container = document.getElementById('{{ field_id }}_container');
|
|
if (!container) return;
|
|
var value = {{ value|tojson|safe if value is not none else 'false' }};
|
|
var config = {
|
|
'type': 'boolean',
|
|
'x-options': {{ (prop.get('x-options') or prop.get('x_options') or {})|tojson|safe }}
|
|
};
|
|
widget.render(container, config, value, { fieldId: '{{ field_id }}', name: '{{ full_key }}', pluginId: '{{ plugin_id }}' });
|
|
}
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', initWidget);
|
|
} else {
|
|
setTimeout(initWidget, 50);
|
|
}
|
|
})();
|
|
</script>
|
|
{% else %}
|
|
{# Default checkbox - value="true" ensures checked sends "true" not "on" #}
|
|
<label class="flex items-center cursor-pointer">
|
|
<input type="checkbox"
|
|
id="{{ field_id }}"
|
|
name="{{ full_key }}"
|
|
value="true"
|
|
{% if value %}checked{% endif %}
|
|
class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
|
|
<span class="ml-2 text-sm text-gray-600">Enabled</span>
|
|
</label>
|
|
{% endif %}
|
|
|
|
{# Enum dropdown #}
|
|
{% elif prop.enum %}
|
|
<select id="{{ field_id }}"
|
|
name="{{ full_key }}"
|
|
class="form-select w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 bg-white text-black">
|
|
{% for option in prop.enum %}
|
|
<option value="{{ option }}" {% if value == option %}selected{% endif %}>
|
|
{{ option|replace('_', ' ')|title }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
|
|
{# Number input - check for widget first #}
|
|
{% elif field_type in ['number', 'integer'] %}
|
|
{% set num_widget = prop.get('x-widget') or prop.get('x_widget') %}
|
|
{% if num_widget in ['slider', 'number-input'] %}
|
|
{# Render slider or number-input widget #}
|
|
<div id="{{ field_id }}_container" class="{{ num_widget }}-container"></div>
|
|
<script>
|
|
(function() {
|
|
function initWidget() {
|
|
if (!window.LEDMatrixWidgets) { setTimeout(initWidget, 50); return; }
|
|
var widget = window.LEDMatrixWidgets.get('{{ num_widget }}');
|
|
if (!widget) { setTimeout(initWidget, 50); return; }
|
|
var container = document.getElementById('{{ field_id }}_container');
|
|
if (!container) return;
|
|
var value = {{ value|tojson if value is not none else (prop.default|tojson if prop.default is defined else 'null') }};
|
|
var config = {
|
|
'type': '{{ field_type }}',
|
|
'minimum': {{ prop.minimum|tojson if prop.minimum is defined else 'null' }},
|
|
'maximum': {{ prop.maximum|tojson if prop.maximum is defined else 'null' }},
|
|
'x-options': {{ (prop.get('x-options') or prop.get('x_options') or {})|tojson|safe }}
|
|
};
|
|
widget.render(container, config, value, { fieldId: '{{ field_id }}', name: '{{ full_key }}', pluginId: '{{ plugin_id }}' });
|
|
}
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', initWidget);
|
|
} else {
|
|
setTimeout(initWidget, 50);
|
|
}
|
|
})();
|
|
</script>
|
|
{% else %}
|
|
{# Default number input #}
|
|
<input type="number"
|
|
id="{{ field_id }}"
|
|
name="{{ full_key }}"
|
|
value="{{ value if value is not none else (prop.default if prop.default is defined else '') }}"
|
|
{% if prop.minimum is defined %}min="{{ prop.minimum }}"{% endif %}
|
|
{% if prop.maximum is defined %}max="{{ prop.maximum }}"{% endif %}
|
|
{% 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">
|
|
{% endif %}
|
|
|
|
{# 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' %}
|
|
{# File upload widget for arrays #}
|
|
{% set upload_config = prop.get('x-upload-config') or {} %}
|
|
{% set max_files = upload_config.get('max_files', 10) %}
|
|
{% set allowed_types = upload_config.get('allowed_types', ['image/png', 'image/jpeg', 'image/bmp', 'image/gif']) %}
|
|
{% set max_size_mb = upload_config.get('max_size_mb', 5) %}
|
|
{% set plugin_id_from_config = upload_config.get('plugin_id', plugin_id) %}
|
|
{% 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 id="{{ field_id }}_upload_widget" class="mt-1">
|
|
<!-- File Upload Drop Zone -->
|
|
<div id="{{ field_id }}_drop_zone"
|
|
class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-blue-400 transition-colors cursor-pointer"
|
|
ondrop="window.handleFileDrop(event, this.dataset.fieldId)"
|
|
ondragover="event.preventDefault()"
|
|
data-field-id="{{ field_id }}"
|
|
data-plugin-id="{{ plugin_id_from_config }}"
|
|
data-upload-endpoint="{{ upload_config.get('endpoint', '/api/v3/plugins/assets/upload') }}"
|
|
data-file-type="{{ upload_config.get('file_type', 'image') }}"
|
|
data-max-files="{{ max_files }}"
|
|
data-max-size-mb="{{ max_size_mb }}"
|
|
data-allowed-types="{{ allowed_types|join(',') }}"
|
|
onclick="document.getElementById('{{ field_id }}_file_input').click()">
|
|
<input type="file"
|
|
id="{{ field_id }}_file_input"
|
|
multiple
|
|
accept="{{ allowed_types|join(',') }}"
|
|
style="display: none;"
|
|
data-field-id="{{ field_id }}"
|
|
data-plugin-id="{{ plugin_id_from_config }}"
|
|
data-upload-endpoint="{{ upload_config.get('endpoint', '/api/v3/plugins/assets/upload') }}"
|
|
data-file-type="{{ upload_config.get('file_type', 'image') }}"
|
|
data-multiple="true"
|
|
data-max-files="{{ max_files }}"
|
|
data-max-size-mb="{{ max_size_mb }}"
|
|
data-allowed-types="{{ allowed_types|join(',') }}"
|
|
onchange="window.handleFileSelect(event, this.dataset.fieldId)">
|
|
<i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i>
|
|
<p class="text-sm text-gray-600">Drag and drop images here or click to browse</p>
|
|
<p class="text-xs text-gray-500 mt-1">Max {{ max_files }} files, {{ max_size_mb }}MB each (PNG, JPG, GIF, BMP)</p>
|
|
</div>
|
|
<p class="text-xs text-amber-600 mt-2 flex items-center">
|
|
<i class="fas fa-info-circle mr-1"></i>
|
|
Remember to save configuration after upload
|
|
</p>
|
|
|
|
<!-- Uploaded Images List -->
|
|
<div id="{{ field_id }}_image_list" class="mt-4 space-y-2">
|
|
{% for img in array_value %}
|
|
{% set img_id = img.get('id', loop.index0) %}
|
|
{% set img_schedule = img.get('schedule', {}) %}
|
|
{% set has_schedule = img_schedule.get('enabled', false) and img_schedule.get('mode') and img_schedule.get('mode') != 'always' %}
|
|
<div id="img_{{ img_id|string|replace('.', '_')|replace('-', '_') }}" class="bg-gray-50 p-3 rounded-lg border border-gray-200">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<div class="flex items-center space-x-3 flex-1">
|
|
<img src="/{{ img.get('path', '') }}"
|
|
alt="{{ img.get('filename', '') }}"
|
|
class="w-16 h-16 object-cover rounded"
|
|
onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
|
|
<div style="display:none;" class="w-16 h-16 bg-gray-200 rounded flex items-center justify-center">
|
|
<i class="fas fa-image text-gray-400"></i>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-sm font-medium text-gray-900 truncate">{{ img.get('original_filename') or img.get('filename', 'Image') }}</p>
|
|
<p class="text-xs text-gray-500">
|
|
{% if img.get('size') %}{{ (img.get('size') / 1024)|round }} KB{% endif %}
|
|
{% if img.get('uploaded_at') %} • {{ img.get('uploaded_at') }}{% endif %}
|
|
</p>
|
|
{% if has_schedule %}
|
|
<p class="text-xs text-blue-600 mt-1">
|
|
<i class="fas fa-clock mr-1"></i>Scheduled
|
|
</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center space-x-2 ml-4">
|
|
<button type="button"
|
|
data-field-id="{{ field_id }}"
|
|
data-image-id="{{ img_id }}"
|
|
data-image-idx="{{ loop.index0 }}"
|
|
onclick="window.openImageSchedule(this.dataset.fieldId, this.dataset.imageId || null, parseInt(this.dataset.imageIdx))"
|
|
class="text-blue-600 hover:text-blue-800 p-2"
|
|
title="Schedule this image">
|
|
<i class="fas fa-calendar-alt"></i>
|
|
</button>
|
|
<button type="button"
|
|
data-field-id="{{ field_id }}"
|
|
data-image-id="{{ img_id }}"
|
|
data-plugin-id="{{ plugin_id_from_config }}"
|
|
onclick="window.deleteUploadedImage(this.dataset.fieldId, this.dataset.imageId, this.dataset.pluginId)"
|
|
class="text-red-600 hover:text-red-800 p-2"
|
|
title="Delete image">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div id="schedule_{{ img_id|string|replace('.', '_')|replace('-', '_') }}" class="hidden mt-3 pt-3 border-t border-gray-300"></div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- Hidden input to store image data -->
|
|
<input type="hidden" id="{{ field_id }}_images_data" name="{{ full_key }}" value='{{ (array_value|tojson|safe)|replace("'", "'") }}'>
|
|
</div>
|
|
{% 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 {} %}
|
|
|
|
<div class="mt-1 space-y-2">
|
|
{% 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(' ', '_') %}
|
|
<label class="flex items-center cursor-pointer">
|
|
<input type="checkbox"
|
|
id="{{ checkbox_id }}"
|
|
name="{{ full_key }}[]"
|
|
data-checkbox-group="{{ field_id }}"
|
|
data-option-value="{{ option }}"
|
|
value="{{ option }}"
|
|
{% if is_checked %}checked{% endif %}
|
|
onchange="updateCheckboxGroupData('{{ field_id }}')"
|
|
class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
|
|
<span class="ml-2 text-sm text-gray-700">{{ option_label }}</span>
|
|
</label>
|
|
{% endfor %}
|
|
</div>
|
|
{# Hidden input to store selected values as JSON array (like array-of-objects pattern) #}
|
|
<input type="hidden" id="{{ field_id }}_data" name="{{ full_key }}_data" value='{{ (array_value|tojson|safe)|replace("'", "'") }}'>
|
|
{# Sentinel hidden input with bracket notation to allow clearing array to [] when all unchecked #}
|
|
{# This ensures the field is always submitted, even when all checkboxes are unchecked #}
|
|
<input type="hidden" name="{{ full_key }}[]" value="">
|
|
{% elif x_widget == 'google-calendar-picker' %}
|
|
{# Google Calendar picker — dynamically loads calendars from the API #}
|
|
{# Normalise: if value is a string (legacy comma-separated), split it; otherwise fall back to default or [] #}
|
|
{% if value is not none and value is string and value %}
|
|
{% set array_value = value.split(',') | map('trim') | list %}
|
|
{% elif value is not none and value is iterable and value is not string %}
|
|
{% set array_value = value %}
|
|
{% elif prop.default is defined and prop.default is string and prop.default %}
|
|
{% set array_value = prop.default.split(',') | map('trim') | list %}
|
|
{% elif prop.default is defined and prop.default is iterable and prop.default is not string %}
|
|
{% set array_value = prop.default %}
|
|
{% else %}
|
|
{% set array_value = [] %}
|
|
{% endif %}
|
|
<div id="{{ field_id }}_container" class="google-calendar-picker-container mt-1"></div>
|
|
<script>
|
|
(function() {
|
|
var MAX_RETRIES = 40;
|
|
var retries = 0;
|
|
function initWidget() {
|
|
if (retries >= MAX_RETRIES) { return; }
|
|
retries++;
|
|
if (!window.LEDMatrixWidgets) { setTimeout(initWidget, 50); return; }
|
|
var widget = window.LEDMatrixWidgets.get('google-calendar-picker');
|
|
if (!widget) { setTimeout(initWidget, 50); return; }
|
|
var container = document.getElementById('{{ field_id }}_container');
|
|
if (!container) return;
|
|
var value = {{ array_value|tojson|safe }};
|
|
widget.render(container, {}, value, { fieldId: '{{ field_id }}', pluginId: '{{ plugin_id }}', name: '{{ full_key }}' });
|
|
}
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', initWidget);
|
|
} else {
|
|
setTimeout(initWidget, 50);
|
|
}
|
|
})();
|
|
</script>
|
|
{% elif x_widget == 'day-selector' %}
|
|
{# Day selector widget for selecting days of the week #}
|
|
{% 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 id="{{ field_id }}_container" class="day-selector-container mt-1"></div>
|
|
<script>
|
|
(function() {
|
|
function initWidget() {
|
|
if (!window.LEDMatrixWidgets) { setTimeout(initWidget, 50); return; }
|
|
var widget = window.LEDMatrixWidgets.get('day-selector');
|
|
if (!widget) { setTimeout(initWidget, 50); return; }
|
|
var container = document.getElementById('{{ field_id }}_container');
|
|
if (!container) return;
|
|
var value = {{ array_value|tojson|safe }};
|
|
var config = { 'x-options': {{ (prop.get('x-options') or prop.get('x_options') or {})|tojson|safe }} };
|
|
widget.render(container, config, value, { fieldId: '{{ field_id }}', pluginId: '{{ plugin_id }}', name: '{{ full_key }}' });
|
|
}
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', initWidget);
|
|
} else {
|
|
setTimeout(initWidget, 50);
|
|
}
|
|
})();
|
|
</script>
|
|
{% else %}
|
|
{# 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 #}
|
|
<p class="text-xs text-amber-600 mt-1">
|
|
<i class="fas fa-exclamation-triangle mr-1"></i>
|
|
Custom feeds widget requires 'name' and 'url' properties in items schema.
|
|
</p>
|
|
{% 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 []) %}
|
|
|
|
<div class="custom-feeds-table-container mt-1">
|
|
<table class="min-w-full divide-y divide-gray-200 border border-gray-300 rounded-lg">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">URL</th>
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Logo</th>
|
|
<th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Enabled</th>
|
|
<th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="{{ field_id }}_tbody" class="bg-white divide-y divide-gray-200">
|
|
{% for item in array_value %}
|
|
{% set item_index = loop.index0 %}
|
|
<tr class="custom-feed-row" data-index="{{ item_index }}">
|
|
<td class="px-4 py-3 whitespace-nowrap">
|
|
<input type="text"
|
|
name="{{ full_key }}.{{ item_index }}.name"
|
|
value="{{ item.get('name', '') }}"
|
|
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="{{ full_key }}.{{ item_index }}.url"
|
|
value="{{ item.get('url', '') }}"
|
|
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">
|
|
{% set logo_value = item.get('logo') or {} %}
|
|
{% set logo_path = logo_value.get('path', '') %}
|
|
<div class="flex items-center space-x-2">
|
|
<input type="file"
|
|
id="{{ field_id }}_logo_{{ item_index }}"
|
|
accept="image/png,image/jpeg,image/bmp,image/gif"
|
|
style="display: none;"
|
|
onchange="handleCustomFeedLogoUpload(event, '{{ field_id }}', {{ item_index }}, '{{ plugin_id }}', '{{ full_key }}')">
|
|
<button type="button"
|
|
onclick="document.getElementById('{{ field_id }}_logo_{{ item_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>
|
|
{% if logo_path %}
|
|
<img src="/{{ logo_path }}" alt="Logo" class="w-8 h-8 object-cover rounded border" id="{{ field_id }}_logo_preview_{{ item_index }}">
|
|
<input type="hidden" name="{{ full_key }}.{{ item_index }}.logo.path" value="{{ logo_path }}">
|
|
<input type="hidden" name="{{ full_key }}.{{ item_index }}.logo.id" value="{{ logo_value.get('id', '') }}">
|
|
{% else %}
|
|
<span class="text-xs text-gray-400">No logo</span>
|
|
{% endif %}
|
|
</div>
|
|
</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-center">
|
|
<input type="hidden" name="{{ full_key }}.{{ item_index }}.enabled" value="false">
|
|
<input type="checkbox"
|
|
name="{{ full_key }}.{{ item_index }}.enabled"
|
|
{% if item.get('enabled', true) %}checked{% endif %}
|
|
value="true"
|
|
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>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
<button type="button"
|
|
onclick="addCustomFeedRow('{{ field_id }}', '{{ full_key }}', {{ max_items }}, '{{ plugin_id }}')"
|
|
class="mt-3 px-4 py-2 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded-md"
|
|
{% if array_value|length >= max_items %}disabled style="opacity: 0.5;"{% endif %}>
|
|
<i class="fas fa-plus mr-1"></i> Add Feed
|
|
</button>
|
|
</div>
|
|
{% endif %}
|
|
{% elif x_widget == 'array-table' %}
|
|
{# Generic array-of-objects table widget - reads columns from schema #}
|
|
{% 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 []) %}
|
|
|
|
{# Use x-columns if specified, otherwise auto-detect first 4 simple properties #}
|
|
{% set x_columns = prop.get('x-columns') %}
|
|
{% if x_columns %}
|
|
{% set display_columns = x_columns %}
|
|
{% else %}
|
|
{% set display_columns = [] %}
|
|
{% for col_name in item_properties.keys() %}
|
|
{% set col_def = item_properties[col_name] %}
|
|
{% if col_def.get('type') not in ['object', 'array'] and display_columns|length < 4 %}
|
|
{% set _ = display_columns.append(col_name) %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% endif %}
|
|
|
|
<div class="array-table-container mt-1" data-field-id="{{ field_id }}" data-full-key="{{ full_key }}" data-max-items="{{ max_items }}" data-plugin-id="{{ plugin_id }}">
|
|
<table class="min-w-full divide-y divide-gray-200 border border-gray-300 rounded-lg">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
{% for col_name in display_columns %}
|
|
{% set col_def = item_properties.get(col_name, {}) %}
|
|
{% set col_title = col_def.get('title', col_name|replace('_', ' ')|title) %}
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{{ col_title }}</th>
|
|
{% endfor %}
|
|
<th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider w-20">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="{{ field_id }}_tbody" class="bg-white divide-y divide-gray-200">
|
|
{% for item in array_value %}
|
|
{% set item_index = loop.index0 %}
|
|
<tr class="array-table-row" data-index="{{ item_index }}">
|
|
{% for col_name in display_columns %}
|
|
{% set col_def = item_properties.get(col_name, {}) %}
|
|
{% set col_type = col_def.get('type', 'string') %}
|
|
{% set col_value = item.get(col_name, col_def.get('default', '')) %}
|
|
<td class="px-4 py-3 whitespace-nowrap">
|
|
{% if col_type == 'boolean' %}
|
|
<input type="hidden" name="{{ full_key }}.{{ item_index }}.{{ col_name }}" value="false">
|
|
<input type="checkbox"
|
|
name="{{ full_key }}.{{ item_index }}.{{ col_name }}"
|
|
{% if col_value %}checked{% endif %}
|
|
value="true"
|
|
class="h-4 w-4 text-blue-600">
|
|
{% elif col_type == 'integer' or col_type == 'number' %}
|
|
<input type="number"
|
|
name="{{ full_key }}.{{ item_index }}.{{ col_name }}"
|
|
value="{{ col_value if col_value is not none else '' }}"
|
|
{% if col_def.get('minimum') is not none %}min="{{ col_def.get('minimum') }}"{% endif %}
|
|
{% if col_def.get('maximum') is not none %}max="{{ col_def.get('maximum') }}"{% endif %}
|
|
{% if col_type == 'integer' %}step="1"{% else %}step="any"{% endif %}
|
|
class="block w-20 px-2 py-1 border border-gray-300 rounded text-sm text-center"
|
|
{% if col_def.get('description') %}title="{{ col_def.get('description') }}"{% endif %}>
|
|
{% else %}
|
|
<input type="text"
|
|
name="{{ full_key }}.{{ item_index }}.{{ col_name }}"
|
|
value="{{ col_value if col_value is not none else '' }}"
|
|
class="block w-full px-2 py-1 border border-gray-300 rounded text-sm"
|
|
{% if col_def.get('description') %}placeholder="{{ col_def.get('description') }}"{% endif %}
|
|
{% if col_def.get('pattern') %}pattern="{{ col_def.get('pattern') }}"{% endif %}
|
|
{% if col_def.get('minLength') %}minlength="{{ col_def.get('minLength') }}"{% endif %}
|
|
{% if col_def.get('maxLength') %}maxlength="{{ col_def.get('maxLength') }}"{% endif %}>
|
|
{% endif %}
|
|
</td>
|
|
{% endfor %}
|
|
<td class="px-4 py-3 whitespace-nowrap text-center">
|
|
<button type="button"
|
|
onclick="removeArrayTableRow(this)"
|
|
class="text-red-600 hover:text-red-800 px-2 py-1">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
<button type="button"
|
|
onclick="addArrayTableRow(this)"
|
|
data-field-id="{{ field_id }}"
|
|
data-full-key="{{ full_key }}"
|
|
data-max-items="{{ max_items }}"
|
|
data-plugin-id="{{ plugin_id }}"
|
|
data-item-properties="{{ item_properties|tojson|e }}"
|
|
data-display-columns="{{ display_columns|tojson|e }}"
|
|
class="mt-3 px-4 py-2 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded-md"
|
|
{% if array_value|length >= max_items %}disabled style="opacity: 0.5;"{% endif %}>
|
|
<i class="fas fa-plus mr-1"></i> Add Item
|
|
</button>
|
|
</div>
|
|
{% else %}
|
|
{# Generic array-of-objects would go here if needed in the future #}
|
|
{# For now, fall back to regular array input (comma-separated) #}
|
|
{# Regular array input (comma-separated) #}
|
|
{% set array_value = value if value is not none else (prop.default if prop.default is defined else []) %}
|
|
<input type="text"
|
|
id="{{ field_id }}"
|
|
name="{{ full_key }}"
|
|
value="{{ array_value|join(', ') if array_value is iterable and array_value is not string else '' }}"
|
|
placeholder="Enter values separated by commas"
|
|
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">
|
|
<p class="text-xs text-gray-400 mt-1">Separate multiple values with commas</p>
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
{# String/default field - check for widgets #}
|
|
{% else %}
|
|
{% set str_widget = prop.get('x-widget') or prop.get('x_widget') %}
|
|
{% set str_value = value if value is not none else (prop.default if prop.default is defined else '') %}
|
|
{% if str_widget == 'file-upload' %}
|
|
{# Single-file upload widget for string fields (e.g., credentials.json) #}
|
|
{% set upload_config = prop.get('x-upload-config') or {} %}
|
|
{% set upload_endpoint = upload_config.get('upload_endpoint', '') %}
|
|
{% set target_filename = upload_config.get('target_filename', 'file.json') %}
|
|
{% set max_size_mb = upload_config.get('max_size_mb', 1) %}
|
|
{% set allowed_extensions = upload_config.get('allowed_extensions', ['.json']) %}
|
|
<div id="{{ field_id }}_upload_widget" class="mt-1">
|
|
<div id="{{ field_id }}_drop_zone"
|
|
class="border-2 border-dashed border-gray-300 rounded-lg p-4 text-center hover:border-blue-400 transition-colors cursor-pointer"
|
|
role="button"
|
|
tabindex="0"
|
|
aria-label="Upload {{ target_filename }}"
|
|
ondrop="window.handleFileDrop(event, this.dataset.fieldId)"
|
|
ondragover="event.preventDefault()"
|
|
data-field-id="{{ field_id }}"
|
|
onclick="document.getElementById('{{ field_id }}_file_input').click()"
|
|
onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();document.getElementById('{{ field_id }}_file_input').click();}">
|
|
<input type="file"
|
|
id="{{ field_id }}_file_input"
|
|
accept="{{ allowed_extensions|join(',') }}"
|
|
style="display: none;"
|
|
data-field-id="{{ field_id }}"
|
|
data-upload-endpoint="{{ upload_endpoint }}"
|
|
data-target-filename="{{ target_filename }}"
|
|
data-max-size-mb="{{ max_size_mb }}"
|
|
data-allowed-extensions="{{ allowed_extensions|join(',') }}"
|
|
onchange="window.handleSingleFileSelect(event, this.dataset.fieldId)">
|
|
<i class="fas fa-cloud-upload-alt text-2xl text-gray-400 mb-1"></i>
|
|
<p class="text-sm text-gray-600">Click to upload {{ target_filename }}</p>
|
|
<p class="text-xs text-gray-500 mt-1">Max {{ max_size_mb }}MB ({{ allowed_extensions|join(', ') }})</p>
|
|
</div>
|
|
<div id="{{ field_id }}_upload_status" class="mt-2 text-xs text-gray-500" aria-live="polite"></div>
|
|
<input type="hidden"
|
|
id="{{ field_id }}"
|
|
name="{{ full_key }}"
|
|
value="{{ str_value }}">
|
|
</div>
|
|
{% elif str_widget in ['text-input', 'textarea', 'select-dropdown', 'toggle-switch', 'radio-group', 'date-picker', 'slider', 'color-picker', 'email-input', 'url-input', 'password-input', 'font-selector'] %}
|
|
{# Render widget container #}
|
|
<div id="{{ field_id }}_container" class="{{ str_widget }}-container"></div>
|
|
<script>
|
|
(function() {
|
|
function initWidget() {
|
|
if (!window.LEDMatrixWidgets) { setTimeout(initWidget, 50); return; }
|
|
var widget = window.LEDMatrixWidgets.get('{{ str_widget }}');
|
|
if (!widget) { setTimeout(initWidget, 50); return; }
|
|
var container = document.getElementById('{{ field_id }}_container');
|
|
if (!container) return;
|
|
var value = {{ str_value|tojson|safe }};
|
|
var config = {
|
|
'type': '{{ field_type }}',
|
|
'enum': {{ (prop.enum or [])|tojson|safe }},
|
|
'minimum': {{ prop.minimum|tojson if prop.minimum is defined else 'null' }},
|
|
'maximum': {{ prop.maximum|tojson if prop.maximum is defined else 'null' }},
|
|
'x-options': {{ (prop.get('x-options') or prop.get('x_options') or {})|tojson|safe }}
|
|
};
|
|
widget.render(container, config, value, { fieldId: '{{ field_id }}', name: '{{ full_key }}', pluginId: '{{ plugin_id }}' });
|
|
}
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', initWidget);
|
|
} else {
|
|
setTimeout(initWidget, 50);
|
|
}
|
|
})();
|
|
</script>
|
|
{% else %}
|
|
{# Default text input #}
|
|
<input type="text"
|
|
id="{{ field_id }}"
|
|
name="{{ full_key }}"
|
|
value="{{ str_value }}"
|
|
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">
|
|
{% endif %}
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
{% endmacro %}
|
|
|
|
{# Render a nested/collapsible section for object types #}
|
|
{% macro render_nested_section(key, prop, value, prefix='', plugin_id='') %}
|
|
{% set full_key = (prefix ~ '.' ~ key) if prefix else key %}
|
|
{% set section_id = (plugin_id ~ '-section-' ~ full_key)|replace('.', '-')|replace('_', '-') %}
|
|
{% set label = prop.title if prop.title else key|replace('_', ' ')|title %}
|
|
{% set description = prop.description if prop.description else '' %}
|
|
{% set nested_value = value if value else {} %}
|
|
|
|
<div class="nested-section border border-gray-300 rounded-lg mb-4">
|
|
<button type="button"
|
|
class="w-full bg-gray-100 hover:bg-gray-200 px-4 py-3 flex items-center justify-between text-left transition-colors rounded-t-lg"
|
|
onclick="toggleSection('{{ section_id }}')">
|
|
<div class="flex-1">
|
|
<h4 class="font-semibold text-gray-900">{{ label }}</h4>
|
|
{% if description %}
|
|
<p class="text-sm text-gray-600 mt-1">{{ description }}</p>
|
|
{% endif %}
|
|
</div>
|
|
<i id="{{ section_id }}-icon" class="fas fa-chevron-right text-gray-500 transition-transform"></i>
|
|
</button>
|
|
<div id="{{ section_id }}" class="nested-content bg-gray-50 px-4 py-4 space-y-3 hidden" style="display: none;">
|
|
{% set property_order = prop['x-propertyOrder'] if 'x-propertyOrder' in prop else prop.properties.keys()|list %}
|
|
{% for nested_key in property_order %}
|
|
{% if nested_key in prop.properties %}
|
|
{% set nested_prop = prop.properties[nested_key] %}
|
|
{% set nested_val = nested_value[nested_key] if nested_key in nested_value else none %}
|
|
{{ render_field(nested_key, nested_prop, nested_val, full_key, plugin_id) }}
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
{# ===== MAIN TEMPLATE ===== #}
|
|
|
|
<div class="plugin-config-container"
|
|
data-plugin-id="{{ plugin.id }}"
|
|
x-data="{ saving: false, saveError: null, saveSuccess: false }">
|
|
|
|
<div class="border-b border-gray-200 pb-4 mb-6">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<h2 class="text-lg font-semibold text-gray-900">{{ plugin.name or plugin.id }}</h2>
|
|
<p class="mt-1 text-sm text-gray-600">{{ plugin.description or 'Plugin configuration' }}</p>
|
|
</div>
|
|
<div class="flex items-center space-x-4">
|
|
<label class="flex items-center cursor-pointer">
|
|
<input type="checkbox"
|
|
id="plugin-enabled-{{ plugin.id }}"
|
|
name="enabled"
|
|
value="true"
|
|
{% if plugin.enabled %}checked{% endif %}
|
|
hx-post="/api/v3/plugins/toggle?plugin_id={{ plugin.id }}"
|
|
hx-trigger="change"
|
|
hx-swap="none"
|
|
hx-vals='js:{enabled: document.getElementById("plugin-enabled-{{ plugin.id }}").checked ? "true" : "false"}'
|
|
hx-on::after-request="handleToggleResponse(event, '{{ plugin.id }}')"
|
|
class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
|
|
<span class="ml-2 text-sm {% if plugin.enabled %}text-green-600{% else %}text-gray-500{% endif %}">
|
|
{% if plugin.enabled %}Enabled{% else %}Disabled{% endif %}
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<form id="plugin-config-form-{{ plugin.id }}"
|
|
hx-post="/api/v3/plugins/config?plugin_id={{ plugin.id }}"
|
|
hx-trigger="submit"
|
|
hx-swap="none"
|
|
hx-indicator="#save-indicator-{{ plugin.id }}"
|
|
hx-on::before-request="this.querySelector('[type=submit]').disabled = true"
|
|
hx-on::after-request="handleConfigSave(event, '{{ plugin.id }}')"
|
|
onsubmit="return validatePluginConfigForm(this, '{{ plugin.id }}');">
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
{# Plugin Information Panel #}
|
|
<div class="bg-gray-50 rounded-lg p-4">
|
|
<h3 class="text-md font-medium text-gray-900 mb-3">Plugin Information</h3>
|
|
<dl class="space-y-2">
|
|
<div>
|
|
<dt class="text-sm font-medium text-gray-500">Name</dt>
|
|
<dd class="text-sm text-gray-900">{{ plugin.name or plugin.id }}</dd>
|
|
</div>
|
|
<div>
|
|
<dt class="text-sm font-medium text-gray-500">Author</dt>
|
|
<dd class="text-sm text-gray-900">{{ plugin.author or 'Unknown' }}</dd>
|
|
</div>
|
|
{% if plugin.version %}
|
|
<div>
|
|
<dt class="text-sm font-medium text-gray-500">Version</dt>
|
|
<dd class="text-sm text-gray-900">{{ plugin.version }}</dd>
|
|
</div>
|
|
{% endif %}
|
|
{% if plugin.last_commit %}
|
|
<div>
|
|
<dt class="text-sm font-medium text-gray-500">Commit</dt>
|
|
<dd class="text-sm text-gray-900 font-mono">
|
|
{{ plugin.last_commit[:7] if plugin.last_commit|length > 7 else plugin.last_commit }}
|
|
{% if plugin.branch %}
|
|
<span class="text-gray-500">({{ plugin.branch }})</span>
|
|
{% endif %}
|
|
</dd>
|
|
</div>
|
|
{% endif %}
|
|
{% if plugin.category %}
|
|
<div>
|
|
<dt class="text-sm font-medium text-gray-500">Category</dt>
|
|
<dd class="text-sm text-gray-900">{{ plugin.category }}</dd>
|
|
</div>
|
|
{% endif %}
|
|
{% if plugin.tags %}
|
|
<div>
|
|
<dt class="text-sm font-medium text-gray-500">Tags</dt>
|
|
<dd class="flex flex-wrap gap-1 mt-1">
|
|
{% for tag in plugin.tags %}
|
|
<span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">{{ tag }}</span>
|
|
{% endfor %}
|
|
</dd>
|
|
</div>
|
|
{% endif %}
|
|
</dl>
|
|
|
|
{# On-Demand Controls #}
|
|
<div class="mt-4 pt-4 border-t border-gray-200 space-y-3">
|
|
<div class="flex items-center gap-2">
|
|
<i class="fas fa-bolt text-blue-500"></i>
|
|
<span class="text-sm font-semibold text-gray-900">On-Demand Controls</span>
|
|
</div>
|
|
<div class="flex flex-wrap gap-2">
|
|
<button type="button"
|
|
onclick="runPluginOnDemand('{{ plugin.id }}')"
|
|
class="px-3 py-2 text-sm bg-green-600 hover:bg-green-700 text-white rounded-md flex items-center gap-2 transition-colors">
|
|
<i class="fas fa-play-circle"></i>
|
|
<span>Run On-Demand</span>
|
|
</button>
|
|
<button type="button"
|
|
onclick="stopOnDemand()"
|
|
class="px-3 py-2 text-sm bg-red-600 hover:bg-red-700 text-white rounded-md flex items-center gap-2 transition-colors">
|
|
<i class="fas fa-stop"></i>
|
|
<span>Stop On-Demand</span>
|
|
</button>
|
|
</div>
|
|
{% if not plugin.enabled %}
|
|
<p class="text-xs text-amber-600">Plugin is disabled, but on-demand will temporarily enable it.</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
{# Configuration Form Panel #}
|
|
<div class="bg-gray-50 rounded-lg p-4">
|
|
<h3 class="text-md font-medium text-gray-900 mb-3">Configuration</h3>
|
|
<div class="space-y-4 max-h-96 overflow-y-auto pr-2">
|
|
{% if schema and schema.properties %}
|
|
{# Use property order if defined, otherwise use natural order #}
|
|
{# Skip 'enabled' field - it's handled by the header toggle #}
|
|
{% set property_order = schema['x-propertyOrder'] if 'x-propertyOrder' in schema else schema.properties.keys()|list %}
|
|
{% for key in property_order %}
|
|
{% if key in schema.properties and key != 'enabled' %}
|
|
{% set prop = schema.properties[key] %}
|
|
{% set value = config[key] if key in config else none %}
|
|
{{ render_field(key, prop, value, '', plugin.id) }}
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% else %}
|
|
{# No schema - render simple form from config #}
|
|
{% if config %}
|
|
{% for key, value in config.items() %}
|
|
{% if key not in ['enabled'] %}
|
|
<div class="form-group mb-4">
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">
|
|
{{ key|replace('_', ' ')|title }}
|
|
</label>
|
|
{% if value is sameas true or value is sameas false %}
|
|
<label class="flex items-center cursor-pointer">
|
|
<input type="checkbox" name="{{ key }}" {% if value %}checked{% endif %}
|
|
class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
|
|
<span class="ml-2 text-sm text-gray-600">Enabled</span>
|
|
</label>
|
|
{% elif value is number %}
|
|
<input type="number" name="{{ key }}" value="{{ value }}"
|
|
class="form-input w-full rounded-md border-gray-300 bg-gray-900 text-white placeholder:text-gray-400">
|
|
{% else %}
|
|
<input type="text" name="{{ key }}" value="{{ value }}"
|
|
class="form-input w-full rounded-md border-gray-300 bg-gray-900 text-white placeholder:text-gray-400">
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% else %}
|
|
<p class="text-gray-500 text-sm">No configuration options available for this plugin.</p>
|
|
{% endif %}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{# Web UI Actions (if any) #}
|
|
{% if web_ui_actions %}
|
|
<div class="mt-6 pt-4 border-t border-gray-200">
|
|
<h3 class="text-md font-medium text-gray-900 mb-3">Plugin Actions</h3>
|
|
{% if web_ui_actions[0].section_description %}
|
|
<p class="text-sm text-gray-600 mb-4">{{ web_ui_actions[0].section_description }}</p>
|
|
{% endif %}
|
|
<div class="space-y-3">
|
|
{% for action in web_ui_actions %}
|
|
{% set action_id = "action-" ~ action.id ~ "-" ~ loop.index0 %}
|
|
{% set status_id = "action-status-" ~ action.id ~ "-" ~ loop.index0 %}
|
|
{% set bg_color = action.color or 'blue' %}
|
|
{% if bg_color == 'green' %}
|
|
{% set bg_class = 'bg-green-50' %}
|
|
{% set border_class = 'border-green-200' %}
|
|
{% set text_class = 'text-green-900' %}
|
|
{% set text_light_class = 'text-green-700' %}
|
|
{% set btn_class = 'bg-green-600 hover:bg-green-700' %}
|
|
{% elif bg_color == 'red' %}
|
|
{% set bg_class = 'bg-red-50' %}
|
|
{% set border_class = 'border-red-200' %}
|
|
{% set text_class = 'text-red-900' %}
|
|
{% set text_light_class = 'text-red-700' %}
|
|
{% set btn_class = 'bg-red-600 hover:bg-red-700' %}
|
|
{% elif bg_color == 'yellow' %}
|
|
{% set bg_class = 'bg-yellow-50' %}
|
|
{% set border_class = 'border-yellow-200' %}
|
|
{% set text_class = 'text-yellow-900' %}
|
|
{% set text_light_class = 'text-yellow-700' %}
|
|
{% set btn_class = 'bg-yellow-600 hover:bg-yellow-700' %}
|
|
{% elif bg_color == 'purple' %}
|
|
{% set bg_class = 'bg-purple-50' %}
|
|
{% set border_class = 'border-purple-200' %}
|
|
{% set text_class = 'text-purple-900' %}
|
|
{% set text_light_class = 'text-purple-700' %}
|
|
{% set btn_class = 'bg-purple-600 hover:bg-purple-700' %}
|
|
{% else %}
|
|
{% set bg_class = 'bg-blue-50' %}
|
|
{% set border_class = 'border-blue-200' %}
|
|
{% set text_class = 'text-blue-900' %}
|
|
{% set text_light_class = 'text-blue-700' %}
|
|
{% set btn_class = 'bg-blue-600 hover:bg-blue-700' %}
|
|
{% endif %}
|
|
<div class="{{ bg_class }} border {{ border_class }} rounded-lg p-4">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex-1">
|
|
<h4 class="font-medium {{ text_class }} mb-1">
|
|
{% if action.icon %}<i class="{{ action.icon }} mr-2"></i>{% endif %}{{ action.title or action.id }}
|
|
</h4>
|
|
<p class="text-sm {{ text_light_class }}">{{ action.description or '' }}</p>
|
|
</div>
|
|
<button type="button"
|
|
id="{{ action_id }}"
|
|
onclick="executePluginAction('{{ action.id }}', {{ loop.index0 }}, '{{ plugin.id }}')"
|
|
data-plugin-id="{{ plugin.id }}"
|
|
data-action-id="{{ action.id }}"
|
|
class="btn {{ btn_class }} text-white px-4 py-2 rounded-md whitespace-nowrap">
|
|
{% if action.icon %}<i class="{{ action.icon }} mr-2"></i>{% endif %}{{ action.button_text or action.title or action.id }}
|
|
</button>
|
|
</div>
|
|
<div id="{{ status_id }}" class="mt-3 hidden"></div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{# Action Buttons #}
|
|
<div class="flex justify-end space-x-3 mt-6 pt-6 border-t border-gray-200">
|
|
<button type="button"
|
|
onclick="refreshPluginConfig('{{ plugin.id }}')"
|
|
class="btn bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-md">
|
|
<i class="fas fa-sync-alt mr-2"></i>Refresh
|
|
</button>
|
|
<button type="button"
|
|
hx-post="/api/v3/plugins/update?plugin_id={{ plugin.id }}"
|
|
hx-swap="none"
|
|
hx-on::after-request="handlePluginUpdate(event, '{{ plugin.id }}')"
|
|
class="btn bg-yellow-600 hover:bg-yellow-700 text-white px-4 py-2 rounded-md">
|
|
<i class="fas fa-download mr-2"></i>Update
|
|
</button>
|
|
<button type="button"
|
|
onclick="if(confirm('Are you sure you want to uninstall {{ plugin.name or plugin.id }}?')) uninstallPlugin('{{ plugin.id }}')"
|
|
class="btn bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-md">
|
|
<i class="fas fa-trash mr-2"></i>Uninstall
|
|
</button>
|
|
<button type="submit" class="btn bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md flex items-center">
|
|
<span id="save-indicator-{{ plugin.id }}" class="htmx-indicator mr-2">
|
|
<i class="fas fa-spinner fa-spin"></i>
|
|
</span>
|
|
<i class="fas fa-save mr-2 save-icon"></i>
|
|
<span>Save Configuration</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|