mirror of
https://github.com/ChuckBuilds/LEDMatrix.git
synced 2026-10-04 14:25:08 +00:00
ChuckandClaude Opus 5
d1e821c625
* fix(web): harden, polish and optimize the web UI per the September 2026 audit Works through docs/archive/WEB_UI_AUDIT_2026-09.md (health 8/20). Implementation integrity (P0) - app.css now defines every utility class the templates and JS use, including .hidden, so the ~145 JS show/hide toggles work. Button reset, and base component rules (.btn, .form-control) wrapped in :where() so utility classes on the same element win. New static-audit test fails when a used utility class has no rule. Accessibility - Focus rings render (the old ring rule referenced undefined variables); one :focus-visible outline everywhere; skip link; labelled nav landmarks. - Shared dialog helper (js/utils/dialog.js): role/aria-modal, focus trap, Escape, focus return, applied to every modal. - Named icon-only buttons and labelled ~70 form fields. - Toasts announced once; errors persist >= 10s; one showNotification. - Captive WiFi page: live region, timeouts, dark mode, 16px inputs. Performance (Pi Zero 2 W) - SSE streams and tab timers pause when hidden or off-tab; the display stream only runs while a preview is visible. app-shell.js deferred. - Widget scripts served as one versioned bundle (/assets/widgets.js): 52 -> 21 script tags, 66 -> 35 requests on first load. - Stdlib gzip fallback when flask-compress is missing: first-load JS/CSS 1358 KB -> 291 KB on the wire. SSE untouched. Theming and responsive - File managers, form fields and Fonts upload on theme tokens; bare inputs themed in dark mode; no more white surfaces. - No horizontal overflow at 375px on any tab; 44px touch targets on coarse pointers; reduced-motion respected; header title truncates. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * fix(web): clear Codacy findings on #568 - json-file-manager: focus-trap releases kept in a Map (no dynamic property access or delete; no value-returning forEach callback) - notification / schedule-picker: style and day-label lookups via Map - app.js: move the pending-queue assignment out of the expression - diff_viewer / error_handler: named function declarations instead of arrow consts No behavior change. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * test: check the OAuth widget ships in the widget bundle base.html no longer tags widget scripts one by one; they load through /assets/widgets.js. Assert the page requests the bundle and the bundle contains google-oauth.js, which is what the test was protecting. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * fix(web): address review feedback on #568 - widget bundle version fingerprints every file (name, mtime_ns, size) - gzip fallback appends Accept-Encoding to an existing Vary header - dialog helper: releasing a non-top dialog no longer moves focus out of the dialog the user is in - labels: file-upload targets its file input; fallback config fields get label for/id pairs; native color input has a fallback name - utility audit also reads class names inside bound :class expressions Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * fix(web): give the native color-picker input an accessible name CodeRabbit flagged this on PR #568 as an outside-diff finding (never posted inline, so it was missed in the round of fixes that addressed the other 6 review comments). The <input type="color"> only carried a title attribute; screen readers don't reliably announce title, and there's no other label naming the control when showHexInput is false. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * fix(web): clear Codacy findings in app-shell.js - drop the unused catch binding on the SSE JSON parse - move the pending-notification queue assignment out of the expression No behavior change. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * fix(web): contain plugin widgets/ dir and bound style-editor retries From CodeRabbit review on #568 (code that arrived with the main merge): - serve_plugin_widget resolves widgets/ with resolve_under before resolving the manifest script under it, so a symlinked widgets directory can't become the containment base (CWE-22). New test. - style-editor init stops polling after ~10s when the widget never registers and leaves the plain fallback fields in place. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
575 lines
26 KiB
JavaScript
575 lines
26 KiB
JavaScript
/**
|
|
* LEDMatrix Schedule Picker Widget
|
|
*
|
|
* Composite widget combining enable toggle, mode switch (global/per-day),
|
|
* and time range configurations. Composes day-selector and time-range widgets.
|
|
*
|
|
* Can be used standalone in schedule.html or by plugins via x-widget: "schedule-picker".
|
|
*
|
|
* Schema example:
|
|
* {
|
|
* "schedule": {
|
|
* "type": "object",
|
|
* "x-widget": "schedule-picker",
|
|
* "x-options": {
|
|
* "showModeToggle": true, // Allow switching global/per-day
|
|
* "showEnableToggle": true, // Show enabled checkbox
|
|
* "compactMode": false, // Compact layout for embedded use
|
|
* "defaultMode": "global" // Default mode: "global" or "per_day"
|
|
* }
|
|
* }
|
|
* }
|
|
*
|
|
* API-compatible output format:
|
|
* {
|
|
* enabled: boolean,
|
|
* mode: "global" | "per_day",
|
|
* start_time: "HH:MM", // if global mode
|
|
* end_time: "HH:MM", // if global mode
|
|
* days: { // if per_day mode
|
|
* monday: { enabled: boolean, start_time: "HH:MM", end_time: "HH:MM" },
|
|
* ...
|
|
* }
|
|
* }
|
|
*
|
|
* @module SchedulePickerWidget
|
|
*/
|
|
|
|
(function() {
|
|
'use strict';
|
|
|
|
const DAYS = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'];
|
|
|
|
const DAY_LABELS = {
|
|
monday: 'Monday',
|
|
tuesday: 'Tuesday',
|
|
wednesday: 'Wednesday',
|
|
thursday: 'Thursday',
|
|
friday: 'Friday',
|
|
saturday: 'Saturday',
|
|
sunday: 'Sunday'
|
|
};
|
|
const DAY_LABEL_MAP = new Map(Object.entries(DAY_LABELS));
|
|
|
|
// Use BaseWidget utilities if available
|
|
const base = window.BaseWidget ? new window.BaseWidget('SchedulePicker', '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 {
|
|
const event = new CustomEvent('widget-change', {
|
|
detail: { fieldId, value },
|
|
bubbles: true,
|
|
cancelable: true
|
|
});
|
|
document.dispatchEvent(event);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Generate default schedule config
|
|
*/
|
|
function getDefaultSchedule() {
|
|
const days = {};
|
|
DAYS.forEach(day => {
|
|
days[day] = {
|
|
enabled: true,
|
|
start_time: '07:00',
|
|
end_time: '23:00'
|
|
};
|
|
});
|
|
return {
|
|
enabled: false,
|
|
mode: 'global',
|
|
start_time: '07:00',
|
|
end_time: '23:00',
|
|
days: days
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Coerce a value to boolean, handling string 'true'/'false' values
|
|
* that may come from config files or form submissions.
|
|
*/
|
|
function coerceToBoolean(value) {
|
|
if (typeof value === 'boolean') {
|
|
return value;
|
|
}
|
|
if (typeof value === 'string') {
|
|
const trimmed = value.trim().toLowerCase();
|
|
return trimmed === 'true' || trimmed === '1' || trimmed === 'on';
|
|
}
|
|
return Boolean(value);
|
|
}
|
|
|
|
/**
|
|
* Normalize mode value to handle both 'per_day' and 'per-day' variants.
|
|
*/
|
|
function normalizeMode(mode) {
|
|
if (!mode || typeof mode !== 'string') {
|
|
return 'global';
|
|
}
|
|
// Normalize: replace hyphens with underscores and check for per_day
|
|
const normalized = mode.trim().toLowerCase().replace(/-/g, '_');
|
|
return normalized === 'per_day' ? 'per_day' : 'global';
|
|
}
|
|
|
|
/**
|
|
* Merge user value with defaults
|
|
*/
|
|
function normalizeSchedule(value) {
|
|
const defaults = getDefaultSchedule();
|
|
if (!value || typeof value !== 'object') {
|
|
return defaults;
|
|
}
|
|
|
|
const schedule = {
|
|
enabled: coerceToBoolean(value.enabled),
|
|
mode: normalizeMode(value.mode),
|
|
start_time: value.start_time || defaults.start_time,
|
|
end_time: value.end_time || defaults.end_time,
|
|
days: {}
|
|
};
|
|
|
|
// Merge days
|
|
DAYS.forEach(day => {
|
|
const dayConfig = (value.days && value.days[day]) || defaults.days[day];
|
|
// Use coerceToBoolean but default to true if enabled is undefined
|
|
const dayEnabled = dayConfig.enabled === undefined ? true : coerceToBoolean(dayConfig.enabled);
|
|
schedule.days[day] = {
|
|
enabled: dayEnabled,
|
|
start_time: dayConfig.start_time || defaults.days[day].start_time,
|
|
end_time: dayConfig.end_time || defaults.days[day].end_time
|
|
};
|
|
});
|
|
|
|
return schedule;
|
|
}
|
|
|
|
window.LEDMatrixWidgets.register('schedule-picker', {
|
|
name: 'Schedule Picker Widget',
|
|
version: '1.0.0',
|
|
|
|
/**
|
|
* Render the schedule picker widget
|
|
* @param {HTMLElement} container - Container element
|
|
* @param {Object} config - Schema configuration
|
|
* @param {Object} value - Schedule configuration object
|
|
* @param {Object} options - Additional options (fieldId, pluginId)
|
|
*/
|
|
render: function(container, config, value, options) {
|
|
const fieldId = sanitizeId(options.fieldId || container.id || 'schedule');
|
|
const xOptions = config['x-options'] || config['x_options'] || {};
|
|
const showModeToggle = xOptions.showModeToggle !== false;
|
|
const showEnableToggle = xOptions.showEnableToggle !== false;
|
|
|
|
const schedule = normalizeSchedule(value);
|
|
|
|
let html = `<div id="${fieldId}_widget" class="schedule-picker-widget" data-field-id="${fieldId}">`;
|
|
|
|
// Hidden inputs for API-compatible form submission
|
|
html += this._renderHiddenInputs(fieldId, schedule);
|
|
|
|
// Enable toggle
|
|
if (showEnableToggle) {
|
|
html += `
|
|
<div class="bg-blue-50 rounded-lg p-4 mb-4">
|
|
<label class="flex items-center cursor-pointer">
|
|
<input type="checkbox"
|
|
id="${fieldId}_enabled"
|
|
${schedule.enabled ? 'checked' : ''}
|
|
onchange="window.LEDMatrixWidgets.getHandlers('schedule-picker').onEnabledChange('${fieldId}', this.checked)"
|
|
class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
|
|
<span class="ml-2 text-sm font-medium text-gray-900">Enable Schedule</span>
|
|
</label>
|
|
<p class="mt-1 text-sm text-gray-600">When enabled, the display will only operate during specified hours.</p>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// Mode selection
|
|
if (showModeToggle) {
|
|
html += `
|
|
<div class="bg-gray-50 rounded-lg p-4 mb-4">
|
|
<h3 class="text-md font-medium text-gray-900 mb-4">Schedule Mode</h3>
|
|
<div class="space-y-3">
|
|
<label class="flex items-center cursor-pointer">
|
|
<input type="radio"
|
|
name="${fieldId}_mode"
|
|
value="global"
|
|
id="${fieldId}_mode_global"
|
|
${schedule.mode === 'global' ? 'checked' : ''}
|
|
onchange="window.LEDMatrixWidgets.getHandlers('schedule-picker').onModeChange('${fieldId}', 'global')"
|
|
class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
|
|
<span class="ml-2 text-sm font-medium text-gray-900">Global Schedule</span>
|
|
</label>
|
|
<p class="ml-6 text-sm text-gray-600">Use the same start and end time for all days of the week</p>
|
|
|
|
<label class="flex items-center cursor-pointer mt-4">
|
|
<input type="radio"
|
|
name="${fieldId}_mode"
|
|
value="per_day"
|
|
id="${fieldId}_mode_per_day"
|
|
${schedule.mode === 'per_day' ? 'checked' : ''}
|
|
onchange="window.LEDMatrixWidgets.getHandlers('schedule-picker').onModeChange('${fieldId}', 'per_day')"
|
|
class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
|
|
<span class="ml-2 text-sm font-medium text-gray-900">Per-Day Schedule</span>
|
|
</label>
|
|
<p class="ml-6 text-sm text-gray-600">Set different times for each day of the week</p>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// Global schedule section
|
|
const globalDisplay = schedule.mode === 'global' ? 'block' : 'none';
|
|
html += `
|
|
<div id="${fieldId}_global_section" class="bg-gray-50 rounded-lg p-4 mb-4" style="display: ${globalDisplay};">
|
|
<h3 class="text-md font-medium text-gray-900 mb-4">Global Times</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div class="form-group">
|
|
<label for="${fieldId}_global_start" class="block text-sm font-medium text-gray-700">Start Time</label>
|
|
<input type="time"
|
|
id="${fieldId}_global_start"
|
|
value="${escapeHtml(schedule.start_time)}"
|
|
onchange="window.LEDMatrixWidgets.getHandlers('schedule-picker').onGlobalTimeChange('${fieldId}')"
|
|
class="form-control mt-1">
|
|
<p class="mt-1 text-sm text-gray-600">When to start displaying content (HH:MM)</p>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="${fieldId}_global_end" class="block text-sm font-medium text-gray-700">End Time</label>
|
|
<input type="time"
|
|
id="${fieldId}_global_end"
|
|
value="${escapeHtml(schedule.end_time)}"
|
|
onchange="window.LEDMatrixWidgets.getHandlers('schedule-picker').onGlobalTimeChange('${fieldId}')"
|
|
class="form-control mt-1">
|
|
<p class="mt-1 text-sm text-gray-600">When to stop displaying content (HH:MM)</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
// Per-day schedule section
|
|
const perDayDisplay = schedule.mode === 'per_day' ? 'block' : 'none';
|
|
html += `
|
|
<div id="${fieldId}_perday_section" style="display: ${perDayDisplay};">
|
|
<h3 class="text-md font-medium text-gray-900 mb-4">Day-Specific Times</h3>
|
|
<div class="bg-gray-50 rounded-lg p-4">
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full divide-y divide-gray-200">
|
|
<thead>
|
|
<tr class="bg-gray-100">
|
|
<th class="px-3 py-2 text-left text-xs font-semibold text-gray-700 uppercase">Day</th>
|
|
<th class="px-3 py-2 text-left text-xs font-semibold text-gray-700 uppercase">Enabled</th>
|
|
<th class="px-3 py-2 text-left text-xs font-semibold text-gray-700 uppercase">Start</th>
|
|
<th class="px-3 py-2 text-left text-xs font-semibold text-gray-700 uppercase">End</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
`;
|
|
|
|
// Render each day row
|
|
DAYS.forEach(day => {
|
|
const dayConfig = schedule.days[day];
|
|
const dayLabel = escapeHtml(DAY_LABEL_MAP.get(day) || day);
|
|
const disabled = !dayConfig.enabled;
|
|
const disabledClass = disabled ? 'bg-gray-100' : '';
|
|
|
|
html += `
|
|
<tr class="hover:bg-gray-50" id="${fieldId}_row_${day}">
|
|
<td class="px-3 py-2 whitespace-nowrap">
|
|
<span class="text-sm font-medium text-gray-900">${dayLabel}</span>
|
|
</td>
|
|
<td class="px-3 py-2 whitespace-nowrap">
|
|
<input type="checkbox"
|
|
id="${fieldId}_${day}_enabled"
|
|
aria-label="${dayLabel} enabled"
|
|
${dayConfig.enabled ? 'checked' : ''}
|
|
onchange="window.LEDMatrixWidgets.getHandlers('schedule-picker').onDayEnabledChange('${fieldId}', '${day}', this.checked)"
|
|
class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
|
|
</td>
|
|
<td class="px-3 py-2 whitespace-nowrap">
|
|
<input type="time"
|
|
id="${fieldId}_${day}_start"
|
|
aria-label="${dayLabel} start time"
|
|
value="${escapeHtml(dayConfig.start_time)}"
|
|
${disabled ? 'disabled' : ''}
|
|
onchange="window.LEDMatrixWidgets.getHandlers('schedule-picker').onDayTimeChange('${fieldId}', '${day}')"
|
|
class="block w-full px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 ${disabledClass}">
|
|
</td>
|
|
<td class="px-3 py-2 whitespace-nowrap">
|
|
<input type="time"
|
|
id="${fieldId}_${day}_end"
|
|
aria-label="${dayLabel} end time"
|
|
value="${escapeHtml(dayConfig.end_time)}"
|
|
${disabled ? 'disabled' : ''}
|
|
onchange="window.LEDMatrixWidgets.getHandlers('schedule-picker').onDayTimeChange('${fieldId}', '${day}')"
|
|
class="block w-full px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 ${disabledClass}">
|
|
</td>
|
|
</tr>
|
|
`;
|
|
});
|
|
|
|
html += `
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
html += '</div>';
|
|
|
|
container.innerHTML = html;
|
|
},
|
|
|
|
/**
|
|
* Render hidden inputs for form submission
|
|
* These match the existing API format
|
|
*/
|
|
_renderHiddenInputs: function(fieldId, schedule) {
|
|
let html = '';
|
|
|
|
// Enabled state (hidden input ensures value is always sent, even when checkbox is unchecked)
|
|
html += `<input type="hidden" id="${fieldId}_enabled_hidden" name="enabled" value="${schedule.enabled}">`;
|
|
|
|
// Mode indicator (for the widget to track internally)
|
|
html += `<input type="hidden" id="${fieldId}_mode_value" name="mode" value="${schedule.mode}">`;
|
|
|
|
// Global times (used when mode is global)
|
|
html += `<input type="hidden" id="${fieldId}_start_time_hidden" name="start_time" value="${escapeHtml(schedule.start_time)}">`;
|
|
html += `<input type="hidden" id="${fieldId}_end_time_hidden" name="end_time" value="${escapeHtml(schedule.end_time)}">`;
|
|
|
|
// Per-day values (used when mode is per_day)
|
|
DAYS.forEach(day => {
|
|
const dayConfig = schedule.days[day];
|
|
html += `<input type="hidden" id="${fieldId}_${day}_enabled_hidden" name="${day}_enabled" value="${dayConfig.enabled}">`;
|
|
html += `<input type="hidden" id="${fieldId}_${day}_start_hidden" name="${day}_start" value="${escapeHtml(dayConfig.start_time)}">`;
|
|
html += `<input type="hidden" id="${fieldId}_${day}_end_hidden" name="${day}_end" value="${escapeHtml(dayConfig.end_time)}">`;
|
|
});
|
|
|
|
return html;
|
|
},
|
|
|
|
/**
|
|
* Get current schedule value
|
|
* @param {string} fieldId - Field ID
|
|
* @returns {Object} Schedule configuration object
|
|
*/
|
|
getValue: function(fieldId) {
|
|
const safeId = sanitizeId(fieldId);
|
|
const widget = document.getElementById(`${safeId}_widget`);
|
|
if (!widget) return getDefaultSchedule();
|
|
|
|
const enabledCheckbox = document.getElementById(`${safeId}_enabled`);
|
|
const modeGlobal = document.getElementById(`${safeId}_mode_global`);
|
|
const globalStart = document.getElementById(`${safeId}_global_start`);
|
|
const globalEnd = document.getElementById(`${safeId}_global_end`);
|
|
|
|
const schedule = {
|
|
enabled: enabledCheckbox ? enabledCheckbox.checked : false,
|
|
mode: (modeGlobal && modeGlobal.checked) ? 'global' : 'per_day',
|
|
start_time: globalStart ? globalStart.value : '07:00',
|
|
end_time: globalEnd ? globalEnd.value : '23:00',
|
|
days: {}
|
|
};
|
|
|
|
DAYS.forEach(day => {
|
|
const dayEnabled = document.getElementById(`${safeId}_${day}_enabled`);
|
|
const dayStart = document.getElementById(`${safeId}_${day}_start`);
|
|
const dayEnd = document.getElementById(`${safeId}_${day}_end`);
|
|
|
|
schedule.days[day] = {
|
|
enabled: dayEnabled ? dayEnabled.checked : true,
|
|
start_time: dayStart ? dayStart.value : '07:00',
|
|
end_time: dayEnd ? dayEnd.value : '23:00'
|
|
};
|
|
});
|
|
|
|
return schedule;
|
|
},
|
|
|
|
/**
|
|
* Set schedule value
|
|
* @param {string} fieldId - Field ID
|
|
* @param {Object} value - Schedule configuration object
|
|
*/
|
|
setValue: function(fieldId, value) {
|
|
const safeId = sanitizeId(fieldId);
|
|
const schedule = normalizeSchedule(value);
|
|
|
|
// Set enabled
|
|
const enabledCheckbox = document.getElementById(`${safeId}_enabled`);
|
|
if (enabledCheckbox) enabledCheckbox.checked = schedule.enabled;
|
|
|
|
// Set mode
|
|
const modeGlobal = document.getElementById(`${safeId}_mode_global`);
|
|
const modePerDay = document.getElementById(`${safeId}_mode_per_day`);
|
|
if (modeGlobal) modeGlobal.checked = schedule.mode === 'global';
|
|
if (modePerDay) modePerDay.checked = schedule.mode === 'per_day';
|
|
|
|
// Set global times
|
|
const globalStart = document.getElementById(`${safeId}_global_start`);
|
|
const globalEnd = document.getElementById(`${safeId}_global_end`);
|
|
if (globalStart) globalStart.value = schedule.start_time;
|
|
if (globalEnd) globalEnd.value = schedule.end_time;
|
|
|
|
// Set per-day values
|
|
DAYS.forEach(day => {
|
|
const dayConfig = schedule.days[day];
|
|
const dayEnabled = document.getElementById(`${safeId}_${day}_enabled`);
|
|
const dayStart = document.getElementById(`${safeId}_${day}_start`);
|
|
const dayEnd = document.getElementById(`${safeId}_${day}_end`);
|
|
|
|
if (dayEnabled) dayEnabled.checked = dayConfig.enabled;
|
|
if (dayStart) {
|
|
dayStart.value = dayConfig.start_time;
|
|
dayStart.disabled = !dayConfig.enabled;
|
|
dayStart.classList.toggle('bg-gray-100', !dayConfig.enabled);
|
|
}
|
|
if (dayEnd) {
|
|
dayEnd.value = dayConfig.end_time;
|
|
dayEnd.disabled = !dayConfig.enabled;
|
|
dayEnd.classList.toggle('bg-gray-100', !dayConfig.enabled);
|
|
}
|
|
});
|
|
|
|
// Update visibility
|
|
this.handlers.onModeChange(fieldId, schedule.mode);
|
|
|
|
// Update hidden inputs
|
|
this._updateHiddenInputs(fieldId);
|
|
},
|
|
|
|
/**
|
|
* Update all hidden inputs to match current state
|
|
*/
|
|
_updateHiddenInputs: function(fieldId) {
|
|
const safeId = sanitizeId(fieldId);
|
|
const schedule = this.getValue(fieldId);
|
|
|
|
// Enabled
|
|
const enabledHidden = document.getElementById(`${safeId}_enabled_hidden`);
|
|
if (enabledHidden) enabledHidden.value = schedule.enabled;
|
|
|
|
// Mode
|
|
const modeHidden = document.getElementById(`${safeId}_mode_value`);
|
|
if (modeHidden) modeHidden.value = schedule.mode;
|
|
|
|
// Global times
|
|
const startHidden = document.getElementById(`${safeId}_start_time_hidden`);
|
|
const endHidden = document.getElementById(`${safeId}_end_time_hidden`);
|
|
if (startHidden) startHidden.value = schedule.start_time;
|
|
if (endHidden) endHidden.value = schedule.end_time;
|
|
|
|
// Per-day values
|
|
DAYS.forEach(day => {
|
|
const dayConfig = schedule.days[day];
|
|
const enabledHidden = document.getElementById(`${safeId}_${day}_enabled_hidden`);
|
|
const startHidden = document.getElementById(`${safeId}_${day}_start_hidden`);
|
|
const endHidden = document.getElementById(`${safeId}_${day}_end_hidden`);
|
|
|
|
if (enabledHidden) enabledHidden.value = dayConfig.enabled;
|
|
if (startHidden) startHidden.value = dayConfig.start_time;
|
|
if (endHidden) endHidden.value = dayConfig.end_time;
|
|
});
|
|
},
|
|
|
|
handlers: {
|
|
/**
|
|
* Handle enabled toggle change
|
|
*/
|
|
onEnabledChange: function(fieldId, enabled) {
|
|
const widget = window.LEDMatrixWidgets.get('schedule-picker');
|
|
widget._updateHiddenInputs(fieldId);
|
|
triggerChange(fieldId, widget.getValue(fieldId));
|
|
},
|
|
|
|
/**
|
|
* Handle mode switch
|
|
*/
|
|
onModeChange: function(fieldId, mode) {
|
|
const safeId = sanitizeId(fieldId);
|
|
const globalSection = document.getElementById(`${safeId}_global_section`);
|
|
const perDaySection = document.getElementById(`${safeId}_perday_section`);
|
|
|
|
if (globalSection) globalSection.style.display = mode === 'global' ? 'block' : 'none';
|
|
if (perDaySection) perDaySection.style.display = mode === 'per_day' ? 'block' : 'none';
|
|
|
|
const widget = window.LEDMatrixWidgets.get('schedule-picker');
|
|
widget._updateHiddenInputs(fieldId);
|
|
triggerChange(fieldId, widget.getValue(fieldId));
|
|
},
|
|
|
|
/**
|
|
* Handle global time change
|
|
*/
|
|
onGlobalTimeChange: function(fieldId) {
|
|
const widget = window.LEDMatrixWidgets.get('schedule-picker');
|
|
widget._updateHiddenInputs(fieldId);
|
|
triggerChange(fieldId, widget.getValue(fieldId));
|
|
},
|
|
|
|
/**
|
|
* Handle day enabled change
|
|
*/
|
|
onDayEnabledChange: function(fieldId, day, enabled) {
|
|
const safeId = sanitizeId(fieldId);
|
|
const dayStart = document.getElementById(`${safeId}_${day}_start`);
|
|
const dayEnd = document.getElementById(`${safeId}_${day}_end`);
|
|
|
|
if (dayStart) {
|
|
dayStart.disabled = !enabled;
|
|
dayStart.classList.toggle('bg-gray-100', !enabled);
|
|
// Set default value only when enabling and input is empty
|
|
if (enabled && !dayStart.value) {
|
|
dayStart.value = '07:00';
|
|
}
|
|
}
|
|
|
|
if (dayEnd) {
|
|
dayEnd.disabled = !enabled;
|
|
dayEnd.classList.toggle('bg-gray-100', !enabled);
|
|
// Set default value only when enabling and input is empty
|
|
if (enabled && !dayEnd.value) {
|
|
dayEnd.value = '23:00';
|
|
}
|
|
}
|
|
|
|
const widget = window.LEDMatrixWidgets.get('schedule-picker');
|
|
widget._updateHiddenInputs(fieldId);
|
|
triggerChange(fieldId, widget.getValue(fieldId));
|
|
},
|
|
|
|
/**
|
|
* Handle day time change
|
|
*/
|
|
onDayTimeChange: function(fieldId, day) {
|
|
const widget = window.LEDMatrixWidgets.get('schedule-picker');
|
|
widget._updateHiddenInputs(fieldId);
|
|
triggerChange(fieldId, widget.getValue(fieldId));
|
|
}
|
|
}
|
|
});
|
|
|
|
// Expose constants for external use
|
|
window.LEDMatrixWidgets.get('schedule-picker').DAYS = DAYS;
|
|
window.LEDMatrixWidgets.get('schedule-picker').DAY_LABELS = DAY_LABELS;
|
|
window.LEDMatrixWidgets.get('schedule-picker').getDefaultSchedule = getDefaultSchedule;
|
|
window.LEDMatrixWidgets.get('schedule-picker').normalizeSchedule = normalizeSchedule;
|
|
|
|
})();
|