/**
* 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'
};
// 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);
}
/**
* 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: value.mode === 'per_day' ? 'per_day' : 'global',
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 compactMode = xOptions.compactMode === true;
const schedule = normalizeSchedule(value);
let html = `
`;
// Hidden inputs for API-compatible form submission
html += this._renderHiddenInputs(fieldId, schedule);
// Enable toggle
if (showEnableToggle) {
html += `
When enabled, the display will only operate during specified hours.
`;
}
// Mode selection
if (showModeToggle) {
html += `
Schedule Mode
Use the same start and end time for all days of the week
Set different times for each day of the week
`;
}
// Global schedule section
const globalDisplay = schedule.mode === 'global' ? 'block' : 'none';
html += `