`;
// Add event listeners for this slot
const startTimeInput = slotDiv.querySelector('.start-time');
const endTimeInput = slotDiv.querySelector('.end-time');
const daysSelect = slotDiv.querySelector('.days-select');
const customDaysContainer = slotDiv.querySelector('.custom-days-container');
const removeButton = slotDiv.querySelector('.remove-slot-btn');
// Show/hide custom days based on selection
daysSelect.addEventListener('change', () => {
customDaysContainer.style.display = daysSelect.value === 'custom' ? 'block' : 'none';
updateTimeSlot(slot.id);
});
// Update slot data when inputs change
startTimeInput.addEventListener('change', () => updateTimeSlot(slot.id));
endTimeInput.addEventListener('change', () => updateTimeSlot(slot.id));
// Handle custom day checkboxes
customDaysContainer.addEventListener('change', () => updateTimeSlot(slot.id));
// Remove slot button
removeButton.addEventListener('click', () => {
removeTimeSlot(slot.id);
});
return slotDiv;
}
// Function to render all time slots
function renderTimeSlots() {
timeSlotsContainer.innerHTML = '';
if (timeSlots.length === 0) {
timeSlotsContainer.innerHTML = `
schedule
No time slots configured
Click "Add Time Slot" to create a pause schedule
`;
return;
}
timeSlots.forEach(slot => {
const slotElement = createTimeSlotElement(slot);
timeSlotsContainer.appendChild(slotElement);
});
}
// Function to add a new time slot
function addTimeSlot() {
const newSlot = {
id: ++slotIdCounter,
start_time: '22:00',
end_time: '08:00',
days: 'daily',
custom_days: []
};
timeSlots.push(newSlot);
renderTimeSlots();
}
// Function to remove a time slot
function removeTimeSlot(slotId) {
timeSlots = timeSlots.filter(slot => slot.id !== slotId);
renderTimeSlots();
}
// Function to update a time slot's data
function updateTimeSlot(slotId) {
const slotElement = timeSlotsContainer.querySelector(`[data-slot-id="${slotId}"]`);
if (!slotElement) return;
const slot = timeSlots.find(s => s.id === slotId);
if (!slot) return;
// Update slot data from inputs
slot.start_time = slotElement.querySelector('.start-time').value;
slot.end_time = slotElement.querySelector('.end-time').value;
slot.days = slotElement.querySelector('.days-select').value;
// Update custom days if applicable
if (slot.days === 'custom') {
const checkedDays = Array.from(slotElement.querySelectorAll(`input[name="custom-days-${slotId}"]:checked`))
.map(cb => cb.value);
slot.custom_days = checkedDays;
} else {
slot.custom_days = [];
}
}
// Function to validate all time slots
function validateTimeSlots() {
const errors = [];
timeSlots.forEach((slot, index) => {
if (!slot.start_time || !isValidTime(slot.start_time)) {
errors.push(`Time slot ${index + 1}: Invalid start time`);
}
if (!slot.end_time || !isValidTime(slot.end_time)) {
errors.push(`Time slot ${index + 1}: Invalid end time`);
}
if (slot.days === 'custom' && (!slot.custom_days || slot.custom_days.length === 0)) {
errors.push(`Time slot ${index + 1}: Please select at least one day for custom schedule`);
}
});
return errors;
}
// Function to save settings
async function saveStillSandsSettings() {
// Update all slots from current form values
timeSlots.forEach(slot => updateTimeSlot(slot.id));
// Validate time slots
const validationErrors = validateTimeSlots();
if (validationErrors.length > 0) {
showStatusMessage(`Validation errors: ${validationErrors.join(', ')}`, 'error');
return;
}
// Update button UI to show loading state
const originalButtonHTML = saveStillSandsButton.innerHTML;
saveStillSandsButton.disabled = true;
saveStillSandsButton.innerHTML = 'Loading logs...
';
try {
const response = await fetch('/api/logs?limit=500');
const data = await response.json();
logsEntries = data.logs || [];
renderLogs();
updateLogsCount();
// Scroll to bottom
const container = document.getElementById('logsContainer');
container.scrollTop = container.scrollHeight;
} catch (error) {
console.error('Failed to load logs:', error);
logsContent.innerHTML = '