LEDMatrix/web_interface/templates/v3/partials/schedule.html

<div class="bg-white rounded-lg shadow p-6">
    <div class="border-b border-gray-200 pb-4 mb-6">
        <h2 class="text-lg font-semibold text-gray-900">Schedule Settings</h2>
        <p class="mt-1 text-sm text-gray-600">Configure when the LED matrix display should be active. You can set global hours or customize times for each day of the week.</p>
    </div>

    <form id="schedule_form"
          hx-post="/api/v3/config/schedule"
          hx-ext="json-enc"
          hx-headers='{"Content-Type": "application/json"}'
          hx-swap="none"
          hx-on:htmx:after-request="handleScheduleResponse(event)"
          class="space-y-6">

        <!-- Schedule Picker Widget Container -->
        <div id="schedule_picker_container"></div>

        <!-- Submit Button -->
        <div class="flex justify-end">
            <button type="submit"
                    class="btn bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md">
                <i class="fas fa-save mr-2"></i>
                Save Schedule Settings
            </button>
        </div>
    </form>
</div>

<script>
(function() {
    'use strict';

    // Initialize schedule picker widget when DOM is ready
    function initSchedulePicker() {
        const container = document.getElementById('schedule_picker_container');
        if (!container) {
            console.error('[Schedule] Container not found');
            return;
        }

        // Check if widget registry is available
        if (typeof window.LEDMatrixWidgets === 'undefined') {
            console.error('[Schedule] LEDMatrixWidgets registry not available');
            return;
        }

        const widget = window.LEDMatrixWidgets.get('schedule-picker');
        if (!widget) {
            console.error('[Schedule] schedule-picker widget not registered');
            return;
        }

        // Get schedule config from template data (injected by Jinja2)
        // Default to empty object if null/undefined
        const scheduleConfig = {{ schedule_config | tojson | safe }} || {};

        // Determine mode: prefer explicit mode, then infer from days, then default to global
        let mode = 'global';
        if (scheduleConfig.mode) {
            // Normalize mode value (handle both 'per_day' and 'per-day')
            mode = scheduleConfig.mode.replace('-', '_');
        } else if (scheduleConfig.days) {
            mode = 'per_day';
        }

        // Convert flat config to nested format expected by widget
        const widgetValue = {
            enabled: scheduleConfig.enabled || false,
            mode: mode,
            start_time: scheduleConfig.start_time || '07:00',
            end_time: scheduleConfig.end_time || '23:00',
            days: scheduleConfig.days || {}
        };

        // If we have per-day data in the old flat format, convert it
        if (!scheduleConfig.days) {
            widgetValue.days = {};
            const days = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'];
            days.forEach(function(day) {
                widgetValue.days[day] = {
                    enabled: true,
                    start_time: '07:00',
                    end_time: '23:00'
                };
            });
        }

        // Render the widget
        widget.render(container, {
            'x-options': {
                showModeToggle: true,
                showEnableToggle: true,
                compactMode: false
            }
        }, widgetValue, {
            fieldId: 'schedule'
        });

        console.log('[Schedule] Schedule picker widget initialized');
    }

    // Handle form submission response
    window.handleScheduleResponse = function(event) {
        const xhr = event.detail.xhr;
        let response;
        try {
            response = JSON.parse(xhr.responseText);
        } catch (e) {
            response = { status: 'error', message: 'Invalid response from server' };
        }

        const message = response.message || (response.status === 'success' ? 'Schedule settings saved' : 'Error saving schedule');
        const type = response.status || 'info';

        // Use global notification function if available
        if (typeof window.showNotification === 'function') {
            window.showNotification(message, type);
        } else {
            // Fallback notification
            const colors = {
                success: 'bg-green-500',
                error: 'bg-red-500',
                warning: 'bg-yellow-500',
                info: 'bg-blue-500'
            };

            const notification = document.createElement('div');
            notification.className = 'fixed top-4 right-4 px-6 py-3 rounded-lg shadow-lg z-50 ' + (colors[type] || colors.info) + ' text-white';
            notification.textContent = message;
            document.body.appendChild(notification);

            setTimeout(function() {
                notification.style.transition = 'opacity 0.5s';
                notification.style.opacity = '0';
                setTimeout(function() { notification.remove(); }, 500);
            }, 3000);
        }
    };

    // Initialize when DOM is ready or if already loaded
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initSchedulePicker);
    } else {
        // Small delay to ensure widget scripts are loaded
        setTimeout(initSchedulePicker, 50);
    }
})();
</script>