7580 lines
306 KiB
JavaScript
7580 lines
306 KiB
JavaScript
/**
|
||
* Main Application Logic
|
||
* Connects the UI components with the Home Assistant API
|
||
*/
|
||
|
||
// Helper function to get the correct document root for DOM queries
|
||
function getDocumentRoot() {
|
||
// If panel is using shadow DOM (LitElement), use shadowRoot
|
||
if (window.climateSchedulerPanelRoot?.shadowRoot) {
|
||
return window.climateSchedulerPanelRoot.shadowRoot;
|
||
}
|
||
// Otherwise use the panel element directly or document
|
||
return window.climateSchedulerPanelRoot || document;
|
||
}
|
||
|
||
function normalizeGroupsPayload(result) {
|
||
let payload = result?.response || result || {};
|
||
|
||
if (payload && typeof payload === 'object' && payload.groups && typeof payload.groups === 'object') {
|
||
payload = payload.groups;
|
||
}
|
||
|
||
return (payload && typeof payload === 'object') ? payload : {};
|
||
}
|
||
|
||
let haAPI;
|
||
let graph;
|
||
let nodeSettingsTimeline = null;
|
||
let climateEntities = [];
|
||
let entitySchedules = new Map(); // Track which entities have schedules locally
|
||
let temperatureUnit = '°C'; // Default to Celsius, updated from HA config
|
||
let storedTemperatureUnit = null; // Unit that schedules were saved in
|
||
|
||
// Temperature conversion functions are now in utils.js
|
||
|
||
function convertScheduleNodes(nodes, fromUnit, toUnit) {
|
||
if (!nodes || nodes.length === 0 || fromUnit === toUnit) return nodes;
|
||
return nodes.map(node => ({
|
||
...node,
|
||
temp: normalizeTemperature(convertTemperature(node.temp, fromUnit, toUnit), graphSnapStep)
|
||
}));
|
||
}
|
||
|
||
function getStepPrecision(step) {
|
||
if (!Number.isFinite(step) || step <= 0) {
|
||
return 3;
|
||
}
|
||
|
||
const stepString = step.toString().toLowerCase();
|
||
if (stepString.includes('e-')) {
|
||
const exponent = Number(stepString.split('e-')[1]);
|
||
return Number.isFinite(exponent) ? exponent : 3;
|
||
}
|
||
|
||
const decimalPart = stepString.split('.')[1];
|
||
return decimalPart ? decimalPart.length : 0;
|
||
}
|
||
|
||
function roundToPrecision(value, precision) {
|
||
const safePrecision = Math.max(0, Math.min(precision, 10));
|
||
const factor = 10 ** safePrecision;
|
||
return Math.round((value + Number.EPSILON) * factor) / factor;
|
||
}
|
||
|
||
function normalizeTemperature(value, step = null) {
|
||
if (!Number.isFinite(value)) {
|
||
return value;
|
||
}
|
||
|
||
if (Number.isFinite(step) && step > 0) {
|
||
const snapped = Math.round(value / step) * step;
|
||
return roundToPrecision(snapped, getStepPrecision(step));
|
||
}
|
||
|
||
return roundToPrecision(value, 4);
|
||
}
|
||
|
||
function resolveNoChangeLockedTemp(nodes, targetNode) {
|
||
if (!Array.isArray(nodes) || nodes.length === 0 || !targetNode) {
|
||
return null;
|
||
}
|
||
|
||
const toNumericTemp = (value) => {
|
||
const parsed = Number(value);
|
||
return Number.isFinite(parsed) ? parsed : null;
|
||
};
|
||
|
||
const ownTemp = toNumericTemp(targetNode.temp);
|
||
|
||
// Single-node schedules lock to the node's own value.
|
||
if (nodes.length === 1) {
|
||
return ownTemp;
|
||
}
|
||
|
||
const sortedNodes = [...nodes].sort((a, b) => {
|
||
const [aHours, aMinutes] = (a.time || '00:00').split(':').map(Number);
|
||
const [bHours, bMinutes] = (b.time || '00:00').split(':').map(Number);
|
||
const aDecimal = aHours + (aMinutes / 60);
|
||
const bDecimal = bHours + (bMinutes / 60);
|
||
return aDecimal - bDecimal;
|
||
});
|
||
|
||
let targetIndex = sortedNodes.findIndex((node) => node === targetNode);
|
||
if (targetIndex === -1 && targetNode.time) {
|
||
targetIndex = sortedNodes.findIndex((node) => node.time === targetNode.time);
|
||
}
|
||
|
||
if (targetIndex === -1) {
|
||
return ownTemp;
|
||
}
|
||
|
||
const previousIndex = (targetIndex - 1 + sortedNodes.length) % sortedNodes.length;
|
||
const previousTemp = toNumericTemp(sortedNodes[previousIndex]?.temp);
|
||
|
||
return previousTemp ?? ownTemp;
|
||
}
|
||
let allGroups = {}; // Store all groups data
|
||
let allEntities = {}; // Store all entities data with their schedules
|
||
let currentGroup = null; // Currently selected group
|
||
let currentEntityId = null; // Currently selected individual entity (legacy path, mostly unused now)
|
||
let editingProfile = null; // Profile being edited (null means editing active profile)
|
||
let tooltipMode = 'history'; // 'history' or 'cursor'
|
||
let keyframeTimelineLoaded = false; // Track if keyframe-timeline.js is loaded
|
||
let debugPanelEnabled = localStorage.getItem('debugPanelEnabled') === 'true'; // Debug panel visibility
|
||
let graphSnapStep = parseFloat(localStorage.getItem('graphSnapStep')) || 0.5; // Temperature snap step for graph dragging
|
||
let inputTempStep = parseFloat(localStorage.getItem('inputTempStep')) || 0.1; // Temperature step for input fields
|
||
let humidityStep = parseFloat(localStorage.getItem('humidityStep')) || 1; // Step for humidity slider in node settings dialog
|
||
const cleanupAutoDownloadReports = localStorage.getItem('cleanupAutoDownloadReports') === 'true'; // Opt-in: auto-download cleanup preview/result JSON files
|
||
let currentDay = null; // Currently selected day for editing (e.g., 'mon', 'weekday')
|
||
let currentScheduleMode = 'all_days'; // Current schedule mode: 'all_days', '5/2', 'individual'
|
||
let currentSchedule = []; // Currently loaded schedule nodes with all properties (time, temp, hvac_mode, etc.)
|
||
let isLoadingSchedule = false; // Flag to prevent auto-save during schedule loading
|
||
let isSaveInProgress = false; // Flag to prevent concurrent saves
|
||
let pendingSaveNeeded = false; // Flag to indicate a save was skipped and needs to be retried
|
||
let saveTimeout = null; // Timeout for debouncing save operations
|
||
const SAVE_DEBOUNCE_MS = 300; // Wait 300ms after last change before saving
|
||
let serverTimeZone = null; // Store the Home Assistant server timezone
|
||
|
||
function flushPendingSaveIfNeeded() {
|
||
if (!isLoadingSchedule && !isSaveInProgress && pendingSaveNeeded) {
|
||
pendingSaveNeeded = false;
|
||
saveSchedule();
|
||
}
|
||
}
|
||
|
||
// Debug logging function
|
||
function debugLog(message, type = 'info') {
|
||
const timestamp = new Date().toLocaleTimeString();
|
||
|
||
const shouldMirrorToConsole = typeof message === 'string' && (message.includes('[Undo]') || message.includes('[Dialog]'));
|
||
if (shouldMirrorToConsole) {
|
||
const consoleMessage = `[Climate Scheduler ${timestamp}] ${message}`;
|
||
if (type === 'error') {
|
||
console.error(consoleMessage);
|
||
} else if (type === 'warning') {
|
||
console.warn(consoleMessage);
|
||
} else {
|
||
console.info(consoleMessage);
|
||
}
|
||
}
|
||
|
||
if (debugPanelEnabled) {
|
||
const debugContent = getDocumentRoot().querySelector('#debug-content');
|
||
if (debugContent) {
|
||
const messageDiv = document.createElement('div');
|
||
messageDiv.className = `debug-message ${type}`;
|
||
messageDiv.innerHTML = `<span class="debug-timestamp">${timestamp}</span>${message}`;
|
||
debugContent.appendChild(messageDiv);
|
||
debugContent.scrollTop = debugContent.scrollHeight;
|
||
}
|
||
}
|
||
}
|
||
|
||
function showToast(message, type = 'info', duration = 4000) {
|
||
const root = getDocumentRoot();
|
||
let container = root.querySelector('.toast-container');
|
||
|
||
// Create container if it doesn't exist
|
||
if (!container) {
|
||
container = document.createElement('div');
|
||
container.className = 'toast-container';
|
||
root.appendChild(container);
|
||
}
|
||
|
||
// Create toast element
|
||
const toast = document.createElement('div');
|
||
toast.className = `toast ${type}`;
|
||
|
||
// Icon based on type
|
||
const icons = {
|
||
success: '✓',
|
||
error: '✕',
|
||
warning: '⚠',
|
||
info: 'ℹ'
|
||
};
|
||
|
||
toast.innerHTML = `
|
||
<span class="toast-icon">${icons[type] || icons.info}</span>
|
||
<span class="toast-message">${message}</span>
|
||
`;
|
||
|
||
container.appendChild(toast);
|
||
|
||
// Auto-remove after duration
|
||
setTimeout(() => {
|
||
toast.classList.add('hiding');
|
||
setTimeout(() => {
|
||
if (toast.parentNode) {
|
||
toast.parentNode.removeChild(toast);
|
||
}
|
||
// Remove container if empty
|
||
if (container.children.length === 0) {
|
||
if (container.parentNode) {
|
||
container.parentNode.removeChild(container);
|
||
}
|
||
}
|
||
}, 300); // Match animation duration
|
||
}, duration);
|
||
}
|
||
|
||
// Initialize application
|
||
async function initApp() {
|
||
try {
|
||
// Detect mobile app environment
|
||
const isMobileApp = /HomeAssistant|Home%20Assistant/.test(navigator.userAgent);
|
||
if (isMobileApp) {
|
||
// Running in Home Assistant mobile app
|
||
}
|
||
|
||
// Initialize Home Assistant API (only if not already initialized)
|
||
if (!haAPI) {
|
||
haAPI = new HomeAssistantAPI();
|
||
}
|
||
await haAPI.connect();
|
||
|
||
// Get Home Assistant configuration for temperature unit and timezone
|
||
const config = await haAPI.getConfig();
|
||
if (config && config.unit_system && config.unit_system.temperature) {
|
||
temperatureUnit = config.unit_system.temperature === '°F' ? '°F' : '°C';
|
||
}
|
||
if (config && config.time_zone) {
|
||
serverTimeZone = config.time_zone;
|
||
debugLog(`Server timezone: ${serverTimeZone}`);
|
||
}
|
||
|
||
// Note: graph is initialized when entity/group is selected for editing
|
||
// No need to initialize it on page load
|
||
|
||
// Load climate entities
|
||
await loadClimateEntities();
|
||
|
||
// Load all schedules from backend
|
||
await loadAllSchedules();
|
||
|
||
// Load groups
|
||
await loadGroups();
|
||
|
||
// Subscribe to state changes
|
||
await haAPI.subscribeToStateChanges();
|
||
haAPI.onStateUpdate(handleStateUpdate);
|
||
|
||
// Subscribe to profile change events
|
||
await haAPI.subscribeToEvents('climate_scheduler_profile_changed', handleProfileChanged);
|
||
|
||
// Set up UI event listeners
|
||
setupEventListeners();
|
||
} catch (error) {
|
||
console.error('Failed to initialize app:', error);
|
||
console.error('Error stack:', error.stack);
|
||
console.error('Error message:', error.message);
|
||
|
||
// Show user-friendly error in the UI
|
||
const container = getDocumentRoot().querySelector('.container');
|
||
if (container) {
|
||
container.innerHTML = `
|
||
<div style="padding: 20px; text-align: center;">
|
||
<h2>❌ Connection Failed</h2>
|
||
<p style="color: #666; margin: 20px 0;">Could not connect to Home Assistant</p>
|
||
<details style="text-align: left; max-width: 600px; margin: 20px auto; padding: 10px; background: #f5f5f5; border-radius: 8px;">
|
||
<summary style="cursor: pointer; font-weight: bold;">Technical Details</summary>
|
||
<pre style="margin-top: 10px; overflow-x: auto;">${error.message}\n\n${error.stack}</pre>
|
||
</details>
|
||
<p style="margin-top: 20px;">
|
||
<strong>Troubleshooting:</strong><br>
|
||
• Try refreshing the page (pull down on mobile)<br>
|
||
• Check if you're logged into Home Assistant<br>
|
||
• Restart the Home Assistant app<br>
|
||
• Check Settings → Companion App → Debugging
|
||
</p>
|
||
</div>
|
||
`;
|
||
}
|
||
}
|
||
}
|
||
|
||
// Load all climate entities
|
||
async function loadClimateEntities() {
|
||
try {
|
||
climateEntities = await haAPI.getClimateEntities();
|
||
await renderEntityList();
|
||
// Entity list rendered
|
||
} catch (error) {
|
||
console.error('Failed to load climate entities:', error);
|
||
alert('Failed to load climate entities');
|
||
}
|
||
}
|
||
|
||
// Load all schedules from backend to populate entitySchedules Map
|
||
async function loadAllSchedules() {
|
||
try {
|
||
// Load schedules for all entities
|
||
for (const entity of climateEntities) {
|
||
const result = await haAPI.getSchedule(entity.entity_id);
|
||
|
||
// Extract schedule from response wrapper
|
||
const schedule = result?.response || result;
|
||
|
||
// Only add to entitySchedules if it has nodes AND is not ignored
|
||
// The enabled state affects visual display, not categorization
|
||
if (schedule && schedule.nodes && schedule.nodes.length > 0 && !schedule.ignored) {
|
||
// Entity has a schedule and is not ignored - add to Map
|
||
entitySchedules.set(entity.entity_id, schedule.nodes);
|
||
}
|
||
}
|
||
|
||
// Re-render entity list with loaded schedules
|
||
await renderEntityList();
|
||
} catch (error) {
|
||
console.error('Failed to load schedules:', error);
|
||
}
|
||
}
|
||
|
||
// Load all groups from backend
|
||
async function loadGroups() {
|
||
try {
|
||
const result = await haAPI.getGroups();
|
||
allGroups = normalizeGroupsPayload(result);
|
||
|
||
// Render groups section
|
||
renderGroups();
|
||
|
||
// Render unmonitored entities section
|
||
renderIgnoredEntities();
|
||
|
||
// Refresh global profile editor section
|
||
await refreshGlobalProfileEditor();
|
||
|
||
// Re-render entity list now that groups are loaded
|
||
// This will hide entities that are in groups
|
||
await renderEntityList();
|
||
} catch (error) {
|
||
console.error('Failed to load groups:', error);
|
||
allGroups = {};
|
||
}
|
||
}
|
||
|
||
// Render groups in the groups section
|
||
function renderGroups() {
|
||
const groupsList = getDocumentRoot().querySelector('#groups-list');
|
||
const groupsCount = getDocumentRoot().querySelector('#groups-count');
|
||
if (!groupsList) return;
|
||
|
||
// Save current expanded/collapsed state and current editing group
|
||
const expandedStates = {};
|
||
const containers = groupsList.querySelectorAll('.group-container');
|
||
containers.forEach(container => {
|
||
const groupName = container.dataset.groupName;
|
||
if (groupName) {
|
||
expandedStates[groupName] = {
|
||
collapsed: container.classList.contains('collapsed'),
|
||
editing: container.classList.contains('expanded')
|
||
};
|
||
}
|
||
});
|
||
|
||
// Clear existing groups
|
||
groupsList.innerHTML = '';
|
||
|
||
// Filter out ignored single-entity groups
|
||
const groupNames = Object.keys(allGroups).filter(groupName => {
|
||
const groupData = allGroups[groupName];
|
||
// Hide single-entity groups that are marked as ignored
|
||
const isSingleEntity = groupData.entities && groupData.entities.length === 1;
|
||
const isIgnored = groupData.ignored === true;
|
||
return !(isSingleEntity && isIgnored);
|
||
});
|
||
|
||
// Update count
|
||
if (groupsCount) {
|
||
groupsCount.textContent = groupNames.length;
|
||
}
|
||
|
||
if (groupNames.length === 0) {
|
||
groupsList.innerHTML = '<p style="color: var(--secondary-text-color); padding: 16px; text-align: center;">No groups created yet</p>';
|
||
return;
|
||
}
|
||
|
||
// Create container for each group
|
||
groupNames.forEach(groupName => {
|
||
const groupContainer = createGroupContainer(groupName, allGroups[groupName]);
|
||
|
||
// Restore previous state if it existed
|
||
const savedState = expandedStates[groupName];
|
||
if (savedState) {
|
||
if (savedState.collapsed) {
|
||
groupContainer.classList.add('collapsed');
|
||
const toggleIcon = groupContainer.querySelector('.group-toggle-icon');
|
||
if (toggleIcon) {
|
||
toggleIcon.style.transform = 'rotate(-90deg)';
|
||
}
|
||
}
|
||
if (savedState.editing) {
|
||
// Re-expand the editor for this group
|
||
setTimeout(() => editGroupSchedule(groupName), 0);
|
||
}
|
||
}
|
||
|
||
groupsList.appendChild(groupContainer);
|
||
});
|
||
}
|
||
|
||
// Render unmonitored entities in the unmonitored section
|
||
function renderIgnoredEntities() {
|
||
const ignoredContainer = getDocumentRoot().querySelector('#ignored-entities-container');
|
||
const ignoredCount = getDocumentRoot().querySelector('#ignored-count');
|
||
if (!ignoredContainer) return;
|
||
|
||
// Find all climate entities that are NOT in a monitored group
|
||
// This includes: 1) entities not in any group, 2) entities in single-entity groups with ignored=true
|
||
const unmonitoredEntities = climateEntities.filter(entity => {
|
||
const entityId = entity.entity_id;
|
||
|
||
// Check if entity is in any group
|
||
let isInMonitoredGroup = false;
|
||
for (const [groupName, groupData] of Object.entries(allGroups)) {
|
||
if (groupData.entities && groupData.entities.includes(entityId)) {
|
||
// Found the entity in a group
|
||
const isSingleEntity = groupData.entities.length === 1;
|
||
const isIgnored = groupData.ignored === true;
|
||
|
||
// If it's in a single-entity group that's ignored, it's unmonitored
|
||
// If it's in any other group (multi-entity or monitored single-entity), it's monitored
|
||
if (!isSingleEntity || !isIgnored) {
|
||
isInMonitoredGroup = true;
|
||
}
|
||
break;
|
||
}
|
||
}
|
||
|
||
// Include if NOT in a monitored group
|
||
return !isInMonitoredGroup;
|
||
});
|
||
|
||
// Sort alphabetically by friendly name
|
||
unmonitoredEntities.sort((a, b) => {
|
||
const nameA = (a.attributes?.friendly_name || a.entity_id).toLowerCase();
|
||
const nameB = (b.attributes?.friendly_name || b.entity_id).toLowerCase();
|
||
return nameA.localeCompare(nameB);
|
||
});
|
||
|
||
// Update count
|
||
if (ignoredCount) {
|
||
ignoredCount.textContent = unmonitoredEntities.length;
|
||
}
|
||
|
||
// Clear existing content
|
||
ignoredContainer.innerHTML = '';
|
||
|
||
if (unmonitoredEntities.length === 0) {
|
||
ignoredContainer.innerHTML = '<p style="color: var(--secondary-text-color); padding: 16px; text-align: center;">No unmonitored entities</p>';
|
||
return;
|
||
}
|
||
|
||
// Render each unmonitored entity
|
||
unmonitoredEntities.forEach(entity => {
|
||
const entityId = entity.entity_id;
|
||
const friendlyName = entity.attributes?.friendly_name || entityId;
|
||
|
||
const item = document.createElement('div');
|
||
item.className = 'ignored-entity-item';
|
||
item.style.cssText = 'display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); cursor: pointer;';
|
||
|
||
const nameSpan = document.createElement('span');
|
||
nameSpan.textContent = friendlyName;
|
||
nameSpan.style.flex = '1';
|
||
|
||
const buttonContainer = document.createElement('div');
|
||
buttonContainer.style.cssText = 'display: flex; gap: 8px;';
|
||
|
||
const unignoreBtn = document.createElement('button');
|
||
unignoreBtn.textContent = 'Monitor';
|
||
unignoreBtn.className = 'btn-secondary-outline';
|
||
unignoreBtn.style.cssText = 'padding: 4px 12px; font-size: 0.85rem;';
|
||
unignoreBtn.onclick = async (e) => {
|
||
e.stopPropagation();
|
||
if (confirm(`Start monitoring ${friendlyName}?\n\nThis entity will be managed by the scheduler again.`)) {
|
||
try {
|
||
await haAPI.setIgnored(entityId, false);
|
||
|
||
// Verify the entity was updated successfully
|
||
const result = await haAPI.getSchedule(entityId);
|
||
const schedule = result?.response || result;
|
||
|
||
if (schedule && schedule.ignored === false) {
|
||
showToast(`${friendlyName} is now monitored.`, 'success');
|
||
} else {
|
||
// Still show success since setIgnored didn't throw
|
||
showToast(`${friendlyName} is now monitored.`, 'success');
|
||
}
|
||
|
||
// Reload groups to update the display
|
||
await loadGroups();
|
||
} catch (error) {
|
||
console.error('Failed to monitor entity:', error);
|
||
showToast('Failed to monitor entity: ' + error.message, 'error');
|
||
}
|
||
}
|
||
};
|
||
|
||
const addToGroupBtn = document.createElement('button');
|
||
addToGroupBtn.textContent = 'Add to Group';
|
||
addToGroupBtn.className = 'btn-primary-outline';
|
||
addToGroupBtn.style.cssText = 'padding: 4px 12px; font-size: 0.85rem;';
|
||
addToGroupBtn.onclick = async (e) => {
|
||
e.stopPropagation();
|
||
|
||
// Show the add to group modal without monitoring yet
|
||
const modal = getDocumentRoot().querySelector('#add-to-group-modal');
|
||
const entityNameEl = getDocumentRoot().querySelector('#add-entity-name');
|
||
|
||
if (modal && entityNameEl) {
|
||
// Store entity info on modal
|
||
modal.dataset.entityId = entityId;
|
||
modal.dataset.isUnmonitoredAdd = 'true';
|
||
entityNameEl.textContent = friendlyName;
|
||
|
||
// Show the modal (will populate groups in existing handler)
|
||
showAddToGroupModal(entityId);
|
||
} else {
|
||
showToast(`Failed to show group selection modal`, 'error');
|
||
}
|
||
};
|
||
|
||
buttonContainer.appendChild(unignoreBtn);
|
||
buttonContainer.appendChild(addToGroupBtn);
|
||
|
||
item.appendChild(nameSpan);
|
||
item.appendChild(buttonContainer);
|
||
ignoredContainer.appendChild(item);
|
||
});
|
||
}
|
||
|
||
// Track last click time per group to prevent duplicate clicks
|
||
const lastClickTime = {};
|
||
const CLICK_DEBOUNCE_MS = 500;
|
||
let isProcessingGroupClick = false;
|
||
|
||
// Create a group container element
|
||
function createGroupContainer(groupName, groupData) {
|
||
const container = document.createElement('div');
|
||
container.className = 'group-container collapsed';
|
||
container.dataset.groupName = groupName;
|
||
|
||
// Create header
|
||
const header = document.createElement('div');
|
||
header.className = 'group-header';
|
||
|
||
const leftSide = document.createElement('div');
|
||
leftSide.style.display = 'flex';
|
||
leftSide.style.alignItems = 'center';
|
||
leftSide.style.gap = '8px';
|
||
|
||
const toggleIcon = document.createElement('span');
|
||
toggleIcon.className = 'group-toggle-icon';
|
||
toggleIcon.textContent = '▼';
|
||
toggleIcon.style.transform = 'rotate(-90deg)';
|
||
|
||
const title = document.createElement('span');
|
||
title.className = 'group-title';
|
||
|
||
// Always display the actual group name for consistency with service calls/actions
|
||
title.textContent = groupName;
|
||
|
||
leftSide.appendChild(toggleIcon);
|
||
leftSide.appendChild(title);
|
||
|
||
header.appendChild(leftSide);
|
||
|
||
// Add rename button for all groups
|
||
const actions = document.createElement('div');
|
||
actions.className = 'group-actions';
|
||
actions.style.cssText = 'display: flex; gap: 12px; align-items: center;';
|
||
|
||
// Add Active Profile selector
|
||
const profileSelector = document.createElement('div');
|
||
profileSelector.className = 'group-profile-selector';
|
||
profileSelector.style.cssText = 'display: flex; align-items: center; gap: 8px;';
|
||
|
||
const profileDropdown = document.createElement('select');
|
||
profileDropdown.className = 'group-profile-dropdown';
|
||
profileDropdown.dataset.groupName = groupName;
|
||
profileDropdown.style.cssText = 'padding: 4px 8px; font-size: 0.9rem; border: 1px solid var(--border); border-radius: 4px; background: var(--background); color: var(--text-primary);';
|
||
|
||
// Get profiles for this group
|
||
const activeProfile = groupData.active_profile || 'Default';
|
||
const profiles = groupData.profiles ? Object.keys(groupData.profiles) : ['Default'];
|
||
|
||
profiles.forEach(profileName => {
|
||
const option = document.createElement('option');
|
||
option.value = profileName;
|
||
option.textContent = profileName;
|
||
if (profileName === activeProfile) {
|
||
option.selected = true;
|
||
}
|
||
profileDropdown.appendChild(option);
|
||
});
|
||
|
||
// Add event listener for profile change
|
||
profileDropdown.addEventListener('click', (e) => e.stopPropagation());
|
||
profileDropdown.addEventListener('change', async (e) => {
|
||
e.stopPropagation();
|
||
const newProfile = e.target.value;
|
||
|
||
try {
|
||
await haAPI.setActiveProfile(groupName, newProfile);
|
||
|
||
// Reload group data from server
|
||
const groupsResult = await haAPI.getGroups();
|
||
allGroups = normalizeGroupsPayload(groupsResult);
|
||
|
||
// If this group is currently being edited, reload it
|
||
if (currentGroup === groupName) {
|
||
await editGroupSchedule(groupName);
|
||
}
|
||
|
||
showToast(`Switched ${groupName} to profile: ${newProfile}`, 'success');
|
||
} catch (error) {
|
||
console.error('Failed to switch profile:', error);
|
||
showToast('Failed to switch profile', 'error');
|
||
// Revert dropdown
|
||
profileDropdown.value = activeProfile;
|
||
}
|
||
});
|
||
|
||
profileSelector.appendChild(profileDropdown);
|
||
actions.appendChild(profileSelector);
|
||
|
||
// Enable/disable toggle - reuse the styled toggle switch from settings
|
||
const toggleLabel = document.createElement('label');
|
||
toggleLabel.className = 'toggle-switch';
|
||
toggleLabel.title = 'Enable schedule';
|
||
|
||
const toggleInput = document.createElement('input');
|
||
toggleInput.type = 'checkbox';
|
||
toggleInput.checked = groupData.enabled !== false;
|
||
|
||
const sliderSpan = document.createElement('span');
|
||
sliderSpan.className = 'slider';
|
||
|
||
// Handle toggle changes
|
||
toggleInput.addEventListener('click', async (e) => {
|
||
e.stopPropagation();
|
||
});
|
||
toggleInput.addEventListener('change', async (e) => {
|
||
e.stopPropagation();
|
||
const newState = toggleInput.checked;
|
||
toggleInput.disabled = true;
|
||
try {
|
||
if (newState) {
|
||
await haAPI.enableGroup(groupName);
|
||
showToast(`Enabled scheduling for ${groupName}`, 'success');
|
||
} else {
|
||
await haAPI.disableGroup(groupName);
|
||
showToast(`Disabled scheduling for ${groupName}`, 'info');
|
||
}
|
||
await loadGroups();
|
||
} catch (error) {
|
||
console.error('Failed to toggle group enabled state:', error);
|
||
showToast('Failed to update enabled state: ' + (error.message || error), 'error');
|
||
// Revert
|
||
toggleInput.checked = !newState;
|
||
} finally {
|
||
toggleInput.disabled = false;
|
||
}
|
||
});
|
||
|
||
toggleLabel.appendChild(toggleInput);
|
||
toggleLabel.appendChild(sliderSpan);
|
||
actions.appendChild(toggleLabel);
|
||
|
||
const renameBtn = document.createElement('button');
|
||
renameBtn.textContent = '✎';
|
||
renameBtn.className = 'btn-icon';
|
||
renameBtn.title = 'Rename group';
|
||
renameBtn.style.cssText = 'padding: 4px 8px; font-size: 1rem; background: none; border: none; cursor: pointer; color: var(--text-secondary); transform: scaleX(-1);';
|
||
renameBtn.onclick = (e) => {
|
||
e.stopPropagation();
|
||
showEditGroupModal(groupName);
|
||
};
|
||
|
||
actions.appendChild(renameBtn);
|
||
header.appendChild(actions);
|
||
|
||
// Toggle collapse/expand and edit schedule on header click
|
||
header.onclick = async (e) => {
|
||
// Don't trigger if clicking on action buttons
|
||
if (e.target.closest('.group-actions')) return;
|
||
|
||
// Prevent event bubbling
|
||
e.stopPropagation();
|
||
e.preventDefault();
|
||
|
||
// Block if there's a save in progress
|
||
if (isSaveInProgress) {
|
||
return;
|
||
}
|
||
|
||
// Global lock: only process one group click at a time
|
||
if (isProcessingGroupClick) {
|
||
return;
|
||
}
|
||
|
||
// Debounce: prevent multiple rapid clicks on the same group
|
||
const now = Date.now();
|
||
const lastClick = lastClickTime[groupName] || 0;
|
||
if (now - lastClick < CLICK_DEBOUNCE_MS) {
|
||
return;
|
||
}
|
||
lastClickTime[groupName] = now;
|
||
|
||
// Set processing flag
|
||
isProcessingGroupClick = true;
|
||
|
||
try {
|
||
// Check if we're currently editing this group
|
||
const isCurrentlyExpanded = currentGroup === groupName && container.classList.contains('expanded');
|
||
|
||
if (isCurrentlyExpanded) {
|
||
// Collapse the editor
|
||
collapseAllEditors();
|
||
currentGroup = null;
|
||
} else {
|
||
// Expand the editor
|
||
await editGroupSchedule(groupName);
|
||
}
|
||
|
||
// Also toggle the entities list visibility
|
||
container.classList.toggle('collapsed');
|
||
toggleIcon.style.transform = container.classList.contains('collapsed') ? 'rotate(-90deg)' : 'rotate(0deg)';
|
||
} finally {
|
||
// Release the lock
|
||
isProcessingGroupClick = false;
|
||
}
|
||
};
|
||
|
||
container.appendChild(header);
|
||
|
||
return container;
|
||
}
|
||
|
||
// Load keyframe-timeline.js dynamically
|
||
async function loadKeyframeTimeline() {
|
||
if (keyframeTimelineLoaded) return true;
|
||
|
||
try {
|
||
// Get the base path from where scripts are loaded (same as graph.js, ha-api.js)
|
||
// We can infer this from the current location or use a known path
|
||
const basePath = '/climate_scheduler/static';
|
||
// Try to get version from graph.js or ha-api.js script tags
|
||
let version = null;
|
||
const scripts = document.querySelectorAll('script[src*="graph.js"], script[src*="ha-api.js"]');
|
||
for (const s of scripts) {
|
||
const url = new URL(s.src, window.location.href);
|
||
version = url.searchParams.get('v');
|
||
if (version) break;
|
||
}
|
||
|
||
const script = document.createElement('script');
|
||
script.type = 'module';
|
||
script.src = `${basePath}/keyframe-timeline.js${version ? `?v=${version}` : ''}`;
|
||
|
||
await new Promise((resolve, reject) => {
|
||
script.onload = resolve;
|
||
script.onerror = reject;
|
||
document.head.appendChild(script);
|
||
});
|
||
|
||
keyframeTimelineLoaded = true;
|
||
return true;
|
||
} catch (error) {
|
||
console.error('Failed to load keyframe-timeline.js:', error);
|
||
showToast('Failed to load canvas graph component', 'error');
|
||
return false;
|
||
}
|
||
}
|
||
|
||
// Convert schedule nodes {time: "HH:MM", temp: number} to keyframes {time: decimal_hours, value: number}
|
||
function scheduleNodesToKeyframes(nodes) {
|
||
const keyframes = nodes
|
||
.filter(node => node.temp !== null && node.temp !== undefined)
|
||
.map(node => {
|
||
const [hours, minutes] = node.time.split(':').map(Number);
|
||
const decimalHours = hours + (minutes / 60);
|
||
return {
|
||
time: decimalHours,
|
||
value: normalizeTemperature(node.temp),
|
||
noChange: Boolean(node.noChange),
|
||
hvac_mode: node.hvac_mode ?? null,
|
||
fan_mode: node.fan_mode ?? null,
|
||
swing_mode: node.swing_mode ?? null,
|
||
swing_horizontal_mode: node.swing_horizontal_mode ?? null,
|
||
preset_mode: node.preset_mode ?? null,
|
||
target_temp_low: Number.isFinite(node.target_temp_low) ? node.target_temp_low : null,
|
||
target_temp_high: Number.isFinite(node.target_temp_high) ? node.target_temp_high : null,
|
||
target_humidity: Number.isFinite(node.target_humidity) ? node.target_humidity : null,
|
||
aux_heat: node.aux_heat ?? null
|
||
};
|
||
})
|
||
.sort((a, b) => a.time - b.time); // Sort by time
|
||
return keyframes;
|
||
}
|
||
|
||
function applyOptionalStringField(target, key, value) {
|
||
if (typeof value === 'string' && value.trim() !== '') {
|
||
target[key] = value;
|
||
return;
|
||
}
|
||
delete target[key];
|
||
}
|
||
|
||
function applyOptionalNumberField(target, key, value) {
|
||
if (Number.isFinite(value)) {
|
||
target[key] = value;
|
||
return;
|
||
}
|
||
delete target[key];
|
||
}
|
||
|
||
// Convert keyframes {time: decimal_hours, value: number} to schedule nodes {time: "HH:MM", temp: number}
|
||
function keyframesToScheduleNodes(keyframes) {
|
||
// Sort keyframes by time to maintain correct order
|
||
const sortedKeyframes = [...keyframes].sort((a, b) => a.time - b.time);
|
||
|
||
return sortedKeyframes.map((kf) => {
|
||
// Clamp time to 23:59 (23.9833 hours) to prevent 24:00 which would clash with 00:00 on next day
|
||
const clampedTime = Math.min(kf.time, 23 + (59/60));
|
||
const hours = Math.floor(clampedTime);
|
||
const minutes = Math.round((clampedTime - hours) * 60);
|
||
const timeStr = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;
|
||
|
||
// Find existing node in currentSchedule to preserve properties
|
||
const existingNode = currentSchedule.find(n => n.time === timeStr);
|
||
const scheduleNode = existingNode
|
||
? { ...existingNode, time: timeStr, temp: normalizeTemperature(kf.value, graphSnapStep) }
|
||
: { time: timeStr, temp: normalizeTemperature(kf.value, graphSnapStep) };
|
||
|
||
// Mirror keyframe metadata back to schedule node so undo restores non-temp fields.
|
||
applyOptionalStringField(scheduleNode, 'hvac_mode', kf.hvac_mode);
|
||
applyOptionalStringField(scheduleNode, 'fan_mode', kf.fan_mode);
|
||
applyOptionalStringField(scheduleNode, 'swing_mode', kf.swing_mode);
|
||
applyOptionalStringField(scheduleNode, 'swing_horizontal_mode', kf.swing_horizontal_mode);
|
||
applyOptionalStringField(scheduleNode, 'preset_mode', kf.preset_mode);
|
||
applyOptionalStringField(scheduleNode, 'aux_heat', kf.aux_heat);
|
||
|
||
applyOptionalNumberField(scheduleNode, 'target_temp_low', kf.target_temp_low);
|
||
applyOptionalNumberField(scheduleNode, 'target_temp_high', kf.target_temp_high);
|
||
applyOptionalNumberField(scheduleNode, 'target_humidity', kf.target_humidity);
|
||
|
||
if (kf.noChange === true) {
|
||
scheduleNode.noChange = true;
|
||
} else {
|
||
delete scheduleNode.noChange;
|
||
}
|
||
|
||
return scheduleNode;
|
||
});
|
||
}
|
||
|
||
// Get nodes from graph (canvas timeline)
|
||
function getGraphNodes() {
|
||
if (!graph) return [];
|
||
// Return currentSchedule which has all properties (hvac_mode, fan_mode, A/B/C, etc.)
|
||
// Don't convert from keyframes as that loses all non-temp properties
|
||
return currentSchedule || [];
|
||
}
|
||
|
||
// Set nodes on graph (canvas timeline)
|
||
function setGraphNodes(nodes) {
|
||
if (!graph) return;
|
||
// Canvas graph - convert nodes to keyframes
|
||
const keyframes = scheduleNodesToKeyframes(nodes);
|
||
// Force reactivity by creating new array reference
|
||
graph.keyframes = [...keyframes];
|
||
}
|
||
|
||
// Set history data on graph (canvas timeline)
|
||
function setGraphHistoryData(historyDataArray) {
|
||
if (!graph) return;
|
||
|
||
// Canvas graph - convert to backgroundGraphs format
|
||
if (!historyDataArray || historyDataArray.length === 0) {
|
||
graph.backgroundGraphs = [];
|
||
return;
|
||
}
|
||
|
||
// Detect format: old format [{time, temp}] or new format [{entityId, data, color}]
|
||
const isNewFormat = historyDataArray[0] && historyDataArray[0].entityId !== undefined;
|
||
|
||
if (isNewFormat) {
|
||
// New format: array of {entityId, entityName, data, color}
|
||
const backgroundGraphs = historyDataArray.map((entity) => {
|
||
const keyframes = entity.data
|
||
.map(node => ({
|
||
time: timeStringToDecimalHours(node.time),
|
||
value: node.temp
|
||
}))
|
||
.sort((a, b) => a.time - b.time); // Sort by time
|
||
return {
|
||
keyframes: keyframes,
|
||
color: entity.color ? entity.color + '80' : undefined, // Add transparency
|
||
label: entity.entityName || entity.entityId
|
||
};
|
||
});
|
||
// Force reactivity by creating new array reference
|
||
graph.backgroundGraphs = [...backgroundGraphs];
|
||
} else {
|
||
// Old format: single array of {time, temp}
|
||
const keyframes = historyDataArray
|
||
.map(node => ({
|
||
time: timeStringToDecimalHours(node.time),
|
||
value: node.temp
|
||
}))
|
||
.sort((a, b) => a.time - b.time); // Sort by time
|
||
graph.backgroundGraphs = [{
|
||
keyframes: keyframes,
|
||
color: '#2196f380',
|
||
label: 'Temperature'
|
||
}];
|
||
}
|
||
}
|
||
|
||
// Helper function to convert time string "HH:MM" to decimal hours
|
||
function timeStringToDecimalHours(timeStr) {
|
||
const [hours, minutes] = timeStr.split(':').map(Number);
|
||
return hours + minutes / 60;
|
||
}
|
||
|
||
function getScheduleNodesForDay(schedules, dayKey) {
|
||
let nodes = schedules?.[dayKey] || [];
|
||
|
||
if ((!nodes || nodes.length === 0) && dayKey === 'weekday' && schedules?.mon) {
|
||
nodes = schedules.mon;
|
||
} else if ((!nodes || nodes.length === 0) && dayKey === 'weekend' && schedules?.sat) {
|
||
nodes = schedules.sat;
|
||
}
|
||
|
||
return nodes || [];
|
||
}
|
||
|
||
function cloneScheduleNodes(nodes) {
|
||
if (!Array.isArray(nodes)) return [];
|
||
return nodes.map(node => ({ ...node }));
|
||
}
|
||
|
||
// Mode-switch seeding: prefer the destination mode/day schedule first,
|
||
// then fall back to current timeline or other populated periods.
|
||
function getModeTransitionSeedNodes({ schedules, previousMode, previousDay, newMode, newDay, currentNodes }) {
|
||
const current = cloneScheduleNodes(currentNodes);
|
||
|
||
const scheduleMap = (schedules && typeof schedules === 'object') ? schedules : {};
|
||
const targetKeys = [];
|
||
|
||
if (newMode === 'all_days') {
|
||
targetKeys.push('all_days');
|
||
} else if (newMode === '5/2') {
|
||
if (newDay === 'weekday' || newDay === 'weekend') {
|
||
targetKeys.push(newDay);
|
||
}
|
||
targetKeys.push('weekday', 'weekend');
|
||
} else {
|
||
if (newDay) {
|
||
targetKeys.push(newDay);
|
||
}
|
||
targetKeys.push('mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun');
|
||
}
|
||
|
||
const seenTargets = new Set();
|
||
for (const key of targetKeys) {
|
||
if (!key || seenTargets.has(key)) continue;
|
||
seenTargets.add(key);
|
||
const nodes = scheduleMap[key];
|
||
if (Array.isArray(nodes) && nodes.length > 0) {
|
||
return cloneScheduleNodes(nodes);
|
||
}
|
||
}
|
||
|
||
if (current.length > 0) {
|
||
return current;
|
||
}
|
||
|
||
const preferredKeys = [];
|
||
if (previousDay) {
|
||
preferredKeys.push(previousDay);
|
||
}
|
||
|
||
if (previousMode === 'individual') {
|
||
preferredKeys.push('mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun');
|
||
} else if (previousMode === '5/2') {
|
||
preferredKeys.push('weekday', 'weekend');
|
||
} else {
|
||
preferredKeys.push('all_days');
|
||
}
|
||
|
||
if (newMode === 'all_days') {
|
||
preferredKeys.push('all_days');
|
||
} else if (newMode === '5/2') {
|
||
preferredKeys.push('weekday', 'weekend');
|
||
} else {
|
||
preferredKeys.push('mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun');
|
||
}
|
||
|
||
const seen = new Set();
|
||
for (const key of preferredKeys) {
|
||
if (!key || seen.has(key)) continue;
|
||
seen.add(key);
|
||
const nodes = scheduleMap[key];
|
||
if (Array.isArray(nodes) && nodes.length > 0) {
|
||
return cloneScheduleNodes(nodes);
|
||
}
|
||
}
|
||
|
||
for (const nodes of Object.values(scheduleMap)) {
|
||
if (Array.isArray(nodes) && nodes.length > 0) {
|
||
return cloneScheduleNodes(nodes);
|
||
}
|
||
}
|
||
|
||
return [];
|
||
}
|
||
|
||
function getMainEditorDisplayedDay(scheduleMode) {
|
||
if (scheduleMode === 'all_days') {
|
||
return 'all_days';
|
||
}
|
||
|
||
const activeDayButton = getDocumentRoot().querySelector('#main-day-period-buttons .day-period-btn.active');
|
||
const dayFromButton = activeDayButton?.dataset?.day;
|
||
if (dayFromButton) {
|
||
return dayFromButton;
|
||
}
|
||
|
||
const now = new Date();
|
||
const weekday = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'][now.getDay()];
|
||
if (scheduleMode === '5/2') {
|
||
return (weekday === 'sat' || weekday === 'sun') ? 'weekend' : 'weekday';
|
||
}
|
||
return weekday;
|
||
}
|
||
|
||
function resolveModeTransitionDay(previousMode, previousDay, newMode) {
|
||
if (newMode === 'all_days') {
|
||
return 'all_days';
|
||
}
|
||
|
||
const now = new Date();
|
||
const todayIndividual = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'][now.getDay()];
|
||
const todayPeriod = (todayIndividual === 'sat' || todayIndividual === 'sun') ? 'weekend' : 'weekday';
|
||
const individualDays = new Set(['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun']);
|
||
|
||
if (newMode === '5/2') {
|
||
if (previousMode === '5/2' && (previousDay === 'weekday' || previousDay === 'weekend')) {
|
||
return previousDay;
|
||
}
|
||
|
||
if (previousMode === 'individual') {
|
||
if (previousDay === 'sat' || previousDay === 'sun') {
|
||
return 'weekend';
|
||
}
|
||
if (individualDays.has(previousDay)) {
|
||
return 'weekday';
|
||
}
|
||
}
|
||
|
||
return todayPeriod;
|
||
}
|
||
|
||
if (previousMode === 'individual' && individualDays.has(previousDay)) {
|
||
return previousDay;
|
||
}
|
||
|
||
if (previousMode === '5/2') {
|
||
if (previousDay === 'weekend') {
|
||
return 'sat';
|
||
}
|
||
if (previousDay === 'weekday') {
|
||
return 'mon';
|
||
}
|
||
}
|
||
|
||
return todayIndividual;
|
||
}
|
||
|
||
function syncMainTimelineForActiveProfileEdit(targetGroup, editedProfileName) {
|
||
if (!targetGroup || currentGroup !== targetGroup) {
|
||
return;
|
||
}
|
||
|
||
const groupData = allGroups[targetGroup];
|
||
if (!groupData) {
|
||
return;
|
||
}
|
||
|
||
const activeProfile = groupData.active_profile || 'Default';
|
||
if (activeProfile !== editedProfileName) {
|
||
return;
|
||
}
|
||
|
||
const mainTimeline = getDocumentRoot().querySelector('#main-timeline');
|
||
if (!mainTimeline || !mainTimeline.isConnected) {
|
||
return;
|
||
}
|
||
|
||
const scheduleMode = groupData.schedule_mode || 'all_days';
|
||
const displayedDay = getMainEditorDisplayedDay(scheduleMode);
|
||
const nodes = getScheduleNodesForDay(groupData.schedules || {}, displayedDay).map(node => ({ ...node }));
|
||
|
||
mainTimeline.keyframes = scheduleNodesToKeyframes(nodes);
|
||
updateScheduledTemp();
|
||
}
|
||
|
||
function setMainEditingContext(editorRoot = null) {
|
||
const wasEditingProfile = editingProfile !== null;
|
||
editingProfile = null;
|
||
|
||
const activeProfile = (currentGroup && allGroups[currentGroup])
|
||
? (allGroups[currentGroup].active_profile || 'Default')
|
||
: 'Default';
|
||
showEditingProfileIndicator(null, activeProfile);
|
||
|
||
const mainTimeline = editorRoot?.querySelector?.('#main-timeline') || getDocumentRoot().querySelector('#main-timeline');
|
||
if (mainTimeline) {
|
||
graph = mainTimeline;
|
||
}
|
||
|
||
// Regression guard:
|
||
// Do NOT reload currentSchedule from group cache during normal node selection.
|
||
// That can overwrite in-memory edits before the debounced save runs, causing
|
||
// "new nodes save, existing-node edits do not" behavior.
|
||
if (wasEditingProfile && currentGroup && allGroups[currentGroup] && allGroups[currentGroup].schedules) {
|
||
const schedules = allGroups[currentGroup].schedules;
|
||
const nodesForDay = getScheduleNodesForDay(schedules, currentDay);
|
||
currentSchedule = nodesForDay.map(n => ({ ...n }));
|
||
}
|
||
}
|
||
|
||
function placeNodeSettingsPanelAfter(anchorElement) {
|
||
if (!anchorElement || !anchorElement.parentNode) return;
|
||
|
||
const panel = getDocumentRoot().querySelector('#node-settings-panel');
|
||
if (!panel) return;
|
||
|
||
if (panel.parentNode === anchorElement.parentNode && panel.previousElementSibling === anchorElement) {
|
||
return;
|
||
}
|
||
|
||
anchorElement.after(panel);
|
||
}
|
||
|
||
function getAddedKeyframeIndex(timeline, event) {
|
||
const keyframes = timeline?.keyframes || [];
|
||
if (keyframes.length === 0) return -1;
|
||
|
||
const addedTime = Number(event?.detail?.time);
|
||
const addedValue = Number(event?.detail?.value);
|
||
|
||
if (Number.isFinite(addedTime)) {
|
||
const timeTolerance = 0.0001;
|
||
const valueTolerance = 0.0001;
|
||
|
||
const byTimeAndValue = keyframes.findIndex(kf =>
|
||
Math.abs(kf.time - addedTime) < timeTolerance &&
|
||
(!Number.isFinite(addedValue) || Math.abs((kf.value || 0) - addedValue) < valueTolerance)
|
||
);
|
||
if (byTimeAndValue !== -1) return byTimeAndValue;
|
||
|
||
const byTime = keyframes.findIndex(kf => Math.abs(kf.time - addedTime) < timeTolerance);
|
||
if (byTime !== -1) return byTime;
|
||
}
|
||
|
||
return keyframes.length - 1;
|
||
}
|
||
|
||
function refreshOpenNodeSettingsForAddedKeyframe({ editor, timeline, event, beforeShow, anchorElement }) {
|
||
if (!editor || !timeline) return;
|
||
|
||
const panel = editor.querySelector('#node-settings-panel');
|
||
if (!panel || panel.style.display === 'none') return;
|
||
|
||
if (nodeSettingsTimeline && nodeSettingsTimeline !== timeline) return;
|
||
|
||
const keyframeIndex = getAddedKeyframeIndex(timeline, event);
|
||
if (keyframeIndex < 0) return;
|
||
|
||
const keyframe = timeline.keyframes?.[keyframeIndex];
|
||
if (!keyframe) return;
|
||
|
||
if (typeof beforeShow === 'function') {
|
||
beforeShow();
|
||
}
|
||
|
||
if (anchorElement) {
|
||
placeNodeSettingsPanelAfter(anchorElement);
|
||
}
|
||
|
||
showNodeSettingsPanel(editor, keyframeIndex, keyframe, timeline);
|
||
}
|
||
|
||
function refreshOpenNodeSettingsAfterUndo({ editor, timeline, beforeShow, anchorElement }) {
|
||
if (!editor || !timeline) return;
|
||
|
||
const panel = editor.querySelector('#node-settings-panel');
|
||
if (!panel || panel.style.display === 'none') return;
|
||
|
||
if (nodeSettingsTimeline && nodeSettingsTimeline !== timeline) return;
|
||
|
||
const keyframes = timeline.keyframes || [];
|
||
if (keyframes.length === 0) {
|
||
panel.style.display = 'none';
|
||
return;
|
||
}
|
||
|
||
const panelIndex = Number.parseInt(panel.dataset.nodeIndex, 10);
|
||
const keyframeIndex = Number.isFinite(panelIndex)
|
||
? Math.max(0, Math.min(panelIndex, keyframes.length - 1))
|
||
: 0;
|
||
const keyframe = keyframes[keyframeIndex];
|
||
if (!keyframe) return;
|
||
|
||
if (typeof beforeShow === 'function') {
|
||
beforeShow();
|
||
}
|
||
|
||
if (anchorElement) {
|
||
placeNodeSettingsPanelAfter(anchorElement);
|
||
}
|
||
|
||
debugLog(`[Dialog][Undo] refreshing panel after restore index=${keyframeIndex}`);
|
||
showNodeSettingsPanel(editor, keyframeIndex, keyframe, timeline);
|
||
}
|
||
|
||
function attachUndoStackDebugLogging(timeline, label) {
|
||
if (!timeline || timeline.__undoDebugLoggingAttached) return;
|
||
|
||
timeline.addEventListener('undo-stack-changed', (event) => {
|
||
const detail = event.detail || {};
|
||
const action = detail.action || 'unknown';
|
||
const size = Number.isFinite(detail.size) ? detail.size : 'n/a';
|
||
const removedCount = Number.isFinite(detail.removedCount) ? detail.removedCount : 0;
|
||
const keyframeCount = Number.isFinite(detail.keyframeCount) ? detail.keyframeCount : 'n/a';
|
||
|
||
debugLog(`[Undo][${label}] action=${action} size=${size} removed=${removedCount} keyframes=${keyframeCount}`);
|
||
});
|
||
|
||
timeline.__undoDebugLoggingAttached = true;
|
||
}
|
||
|
||
// Show node settings panel for a clicked keyframe
|
||
function showNodeSettingsPanel(editor, keyframeIndex, keyframe, sourceTimeline = graph) {
|
||
nodeSettingsTimeline = sourceTimeline || nodeSettingsTimeline;
|
||
|
||
if (!keyframe || typeof keyframe.time !== 'number') {
|
||
console.warn('showNodeSettingsPanel called without a valid keyframe', { keyframeIndex, keyframe });
|
||
return;
|
||
}
|
||
|
||
// Convert keyframe time (decimal hours) to HH:MM format
|
||
const hours = Math.floor(keyframe.time);
|
||
const minutes = Math.round((keyframe.time - hours) * 60);
|
||
const timeStr = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;
|
||
|
||
// Convert keyframe to node format
|
||
const node = {
|
||
time: timeStr, // Use formatted time string
|
||
temp: keyframe.value,
|
||
noChange: false // Keyframes always have a value
|
||
};
|
||
|
||
// Find corresponding node in currentSchedule to get additional properties
|
||
const scheduleNode = currentSchedule.find(n =>
|
||
n.time === timeStr || (
|
||
Math.abs(timeStringToDecimalHours(n.time) - keyframe.time) < 0.01 &&
|
||
Math.abs((n.temp || 0) - keyframe.value) < 0.1
|
||
)
|
||
);
|
||
|
||
if (scheduleNode) {
|
||
// Copy all properties from schedule node
|
||
Object.assign(node, scheduleNode);
|
||
}
|
||
|
||
// Get the panel from the editor (not globally)
|
||
const panel = editor.querySelector('#node-settings-panel');
|
||
if (!panel) {
|
||
console.error('Node settings panel not found in editor');
|
||
return;
|
||
}
|
||
|
||
// Create event detail and call handleNodeSettings
|
||
const event = {
|
||
detail: {
|
||
nodeIndex: keyframeIndex,
|
||
node: node,
|
||
timeline: sourceTimeline
|
||
}
|
||
};
|
||
|
||
handleNodeSettings(event);
|
||
}
|
||
|
||
// Edit group schedule - load group schedule into editor
|
||
async function editGroupSchedule(groupName, day = null) {
|
||
// Fetch fresh group data from server before editing
|
||
try {
|
||
const groupsData = await haAPI.getGroups();
|
||
if (groupsData && groupsData[groupName]) {
|
||
allGroups[groupName] = groupsData[groupName];
|
||
}
|
||
} catch (error) {
|
||
console.error('Failed to fetch fresh group data:', error);
|
||
}
|
||
|
||
const groupData = allGroups[groupName];
|
||
if (!groupData) return;
|
||
|
||
// Set loading flag to prevent auto-saves during editor setup
|
||
isLoadingSchedule = true;
|
||
//
|
||
|
||
// Collapse all other editors first
|
||
collapseAllEditors();
|
||
|
||
// Set current group
|
||
currentGroup = groupName;
|
||
|
||
// Load schedule mode and day
|
||
currentScheduleMode = groupData.schedule_mode || 'all_days';
|
||
|
||
if (!day) {
|
||
// Determine which day to load based on mode
|
||
const now = new Date();
|
||
const weekday = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'][now.getDay()];
|
||
|
||
if (currentScheduleMode === 'all_days') {
|
||
currentDay = 'all_days';
|
||
} else if (currentScheduleMode === '5/2') {
|
||
currentDay = (weekday === 'sat' || weekday === 'sun') ? 'weekend' : 'weekday';
|
||
} else {
|
||
currentDay = weekday;
|
||
}
|
||
} else {
|
||
currentDay = day;
|
||
}
|
||
|
||
// Find the group container
|
||
const groupContainer = getDocumentRoot().querySelector(`.group-container[data-group-name="${groupName}"]`);
|
||
if (!groupContainer) {
|
||
isLoadingSchedule = false;
|
||
flushPendingSaveIfNeeded();
|
||
return;
|
||
}
|
||
|
||
// Mark as expanded
|
||
groupContainer.classList.add('expanded');
|
||
|
||
// Create and insert editor inside the group container (append to the end)
|
||
const editor = createScheduleEditor();
|
||
groupContainer.appendChild(editor);
|
||
|
||
// Hide entity status section (replaced by group table)
|
||
const entityStatus = editor.querySelector('.entity-status');
|
||
if (entityStatus) {
|
||
entityStatus.style.display = 'none';
|
||
}
|
||
|
||
// Use keyframe-timeline component
|
||
const canvasLoaded = await loadKeyframeTimeline();
|
||
if (!canvasLoaded) {
|
||
console.error('Failed to load keyframe-timeline component');
|
||
isLoadingSchedule = false;
|
||
flushPendingSaveIfNeeded();
|
||
return;
|
||
}
|
||
|
||
// Create timeline editor using reusable function
|
||
const graphContainer = editor.querySelector('.graph-container');
|
||
if (graphContainer) {
|
||
const editorInstance = createTimelineEditor({
|
||
idPrefix: 'main',
|
||
buttons: [
|
||
{ id: 'graph-prev-btn', text: '◀', title: 'Previous keyframe' },
|
||
{ id: 'graph-next-btn', text: '▶', title: 'Next keyframe' },
|
||
{ id: 'graph-copy-btn', text: 'Copy', title: 'Copy schedule' },
|
||
{ id: 'graph-paste-btn', text: 'Paste', title: 'Paste schedule', disabled: true },
|
||
{ id: 'graph-undo-btn', text: 'Undo', title: 'Undo last change' },
|
||
{ id: 'advance-schedule-btn', text: 'Advance', title: 'Advance to next scheduled node' },
|
||
{ id: 'save-schedule-btn', text: 'Save', title: 'Save schedule', className: 'btn-quick-action btn-primary' }
|
||
],
|
||
minValue: minTempSetting !== null ? minTempSetting : (temperatureUnit === '°F' ? 41 : 5),
|
||
maxValue: maxTempSetting !== null ? maxTempSetting : (temperatureUnit === '°F' ? 86 : 30),
|
||
snapValue: graphSnapStep,
|
||
title: getScheduleTitle(),
|
||
yAxisLabel: `Temperature (${temperatureUnit})`,
|
||
xAxisLabel: `Time of Day (24hr)`,
|
||
showCurrentTime: true,
|
||
tooltipMode: tooltipMode,
|
||
showHeader: false,
|
||
allowCollapse: false
|
||
});
|
||
|
||
const { container: timelineEditorContainer, timeline, controls } = editorInstance;
|
||
|
||
// Replace the old editor-header with the new one from timelineEditorContainer
|
||
const oldEditorHeader = editor.querySelector('.editor-header-inline');
|
||
const newEditorHeader = timelineEditorContainer.querySelector('.editor-header-inline');
|
||
if (oldEditorHeader && newEditorHeader) {
|
||
oldEditorHeader.replaceWith(newEditorHeader);
|
||
}
|
||
|
||
// Insert timeline into graph-container
|
||
graphContainer.innerHTML = '';
|
||
graphContainer.appendChild(timeline);
|
||
|
||
// Store reference
|
||
graph = timeline;
|
||
attachUndoStackDebugLogging(timeline, 'main');
|
||
|
||
// Attach event listeners for keyframe changes
|
||
timeline.addEventListener('keyframe-moved', handleKeyframeTimelineChange);
|
||
timeline.addEventListener('keyframe-added', handleKeyframeTimelineChange);
|
||
timeline.addEventListener('keyframe-deleted', handleKeyframeTimelineChange);
|
||
timeline.addEventListener('keyframes-cleared', handleKeyframeTimelineChange);
|
||
timeline.addEventListener('keyframe-restored', handleKeyframeTimelineChange);
|
||
|
||
timeline.addEventListener('keyframe-added', (e) => {
|
||
refreshOpenNodeSettingsForAddedKeyframe({
|
||
editor,
|
||
timeline,
|
||
event: e,
|
||
beforeShow: () => setMainEditingContext(editor),
|
||
anchorElement: editor.querySelector('.graph-container')
|
||
});
|
||
});
|
||
|
||
timeline.addEventListener('keyframe-restored', () => {
|
||
refreshOpenNodeSettingsAfterUndo({
|
||
editor,
|
||
timeline,
|
||
beforeShow: () => setMainEditingContext(editor),
|
||
anchorElement: editor.querySelector('.graph-container')
|
||
});
|
||
});
|
||
|
||
// Show node settings panel when keyframe is clicked
|
||
timeline.addEventListener('keyframe-clicked', (e) => {
|
||
graph = timeline;
|
||
setMainEditingContext(editor);
|
||
placeNodeSettingsPanelAfter(editor.querySelector('.graph-container'));
|
||
const { index, keyframe } = e.detail;
|
||
showNodeSettingsPanel(editor, index, keyframe, timeline);
|
||
});
|
||
|
||
// Update node settings panel when selection changes (prev/next navigation)
|
||
timeline.addEventListener('keyframe-selected', (e) => {
|
||
graph = timeline;
|
||
setMainEditingContext(editor);
|
||
placeNodeSettingsPanelAfter(editor.querySelector('.graph-container'));
|
||
const index = e.detail?.index ?? e.detail?.nodeIndex;
|
||
const keyframe = e.detail?.keyframe ?? (Number.isInteger(index) ? graph?.keyframes?.[index] : undefined);
|
||
showNodeSettingsPanel(editor, index, keyframe, timeline);
|
||
});
|
||
|
||
// Link external undo button to timeline's undo system
|
||
const graphUndoBtn = controls.buttons['graph-undo-btn'];
|
||
if (graphUndoBtn && typeof timeline.setUndoButton === 'function') {
|
||
timeline.setUndoButton(graphUndoBtn);
|
||
}
|
||
|
||
// Link previous/next buttons to timeline navigation
|
||
const graphPrevBtn = controls.buttons['graph-prev-btn'];
|
||
if (graphPrevBtn && typeof timeline.setPreviousButton === 'function') {
|
||
timeline.setPreviousButton(graphPrevBtn);
|
||
}
|
||
|
||
const graphNextBtn = controls.buttons['graph-next-btn'];
|
||
if (graphNextBtn && typeof timeline.setNextButton === 'function') {
|
||
timeline.setNextButton(graphNextBtn);
|
||
}
|
||
|
||
// Link other control buttons if they exist
|
||
const graphCopyBtn = controls.buttons['graph-copy-btn'];
|
||
const graphPasteBtn = controls.buttons['graph-paste-btn'];
|
||
const advanceBtn = controls.buttons['advance-schedule-btn'];
|
||
const saveBtn = controls.buttons['save-schedule-btn'];
|
||
|
||
// Attach copy/paste handlers
|
||
if (graphCopyBtn) {
|
||
graphCopyBtn.onclick = () => copySchedule();
|
||
}
|
||
if (graphPasteBtn) {
|
||
graphPasteBtn.onclick = () => pasteSchedule();
|
||
}
|
||
|
||
// Note: Advance and Save buttons have custom handlers in attachEditorEventListeners
|
||
}
|
||
|
||
// Get graph element (canvas timeline)
|
||
const graphElement = editor.querySelector('#main-timeline');
|
||
|
||
if (graphElement) {
|
||
// Create and insert settings panel below timeline controls and node settings panel
|
||
const graphContainer = graphElement.closest('.graph-container') || graphElement.parentElement;
|
||
const nodeSettingsPanel = editor.querySelector('#node-settings-panel');
|
||
const insertionAnchor = nodeSettingsPanel || graphContainer;
|
||
|
||
if (insertionAnchor) {
|
||
let insertAfter = insertionAnchor;
|
||
|
||
const settingsPanel = createSettingsPanel(groupData, editor);
|
||
if (settingsPanel) {
|
||
insertAfter.after(settingsPanel);
|
||
insertAfter = settingsPanel;
|
||
}
|
||
|
||
// Check if any entities in the group are preset-only and show notice if needed
|
||
const presetOnlyNotice = createPresetOnlyNotice(groupData.entities, groupName);
|
||
if (presetOnlyNotice) {
|
||
insertAfter.after(presetOnlyNotice);
|
||
insertAfter = presetOnlyNotice;
|
||
}
|
||
|
||
// Insert group members table beneath settings/notice block
|
||
const groupTable = createGroupMembersTable(groupData.entities);
|
||
if (groupTable) {
|
||
insertAfter.after(groupTable);
|
||
}
|
||
}
|
||
}
|
||
|
||
// Load nodes for the selected day
|
||
let nodes = [];
|
||
if (groupData.schedules && groupData.schedules[currentDay]) {
|
||
nodes = groupData.schedules[currentDay];
|
||
//
|
||
} else if (currentDay === "weekday" && groupData.schedules && groupData.schedules["mon"]) {
|
||
// If weekday key doesn't exist, try loading from Monday
|
||
nodes = groupData.schedules["mon"];
|
||
//
|
||
} else if (currentDay === "weekend" && groupData.schedules && groupData.schedules["sat"]) {
|
||
// If weekend key doesn't exist, try loading from Saturday
|
||
nodes = groupData.schedules["sat"];
|
||
//
|
||
} else if (groupData.nodes) {
|
||
// Backward compatibility
|
||
nodes = groupData.nodes;
|
||
//
|
||
} else {
|
||
//
|
||
}
|
||
|
||
// Migrate old nodes that have temp=null to use noChange property
|
||
nodes = nodes.map(node => {
|
||
if ((node.temp === null || node.temp === undefined) && !node.hasOwnProperty('noChange')) {
|
||
return { ...node, noChange: true, temp: 20 }; // Default position at 20°C
|
||
}
|
||
return node;
|
||
});
|
||
|
||
currentSchedule = nodes.length > 0 ? nodes.map(n => ({...n})) : [];
|
||
|
||
// Canvas graph - set keyframes
|
||
const keyframes = scheduleNodesToKeyframes(currentSchedule);
|
||
// Force reactivity by creating new array reference
|
||
graph.keyframes = [...keyframes];
|
||
|
||
// Set previous day's last temperature
|
||
const prevTemp = getPreviousDayLastTemp(groupData, currentDay);
|
||
graph.previousDayEndValue = prevTemp;
|
||
|
||
// Update schedule mode UI
|
||
updateScheduleModeUI();
|
||
|
||
// Load history data for all entities in the group
|
||
await loadGroupHistoryData(groupData.entities);
|
||
|
||
// Load advance history for the first entity in the group
|
||
if (groupData.entities && groupData.entities.length > 0) {
|
||
await loadAdvanceHistory(groupData.entities[0]);
|
||
}
|
||
|
||
// Set enabled state from saved group data
|
||
const scheduleEnabled = editor.querySelector('#schedule-enabled');
|
||
if (scheduleEnabled) {
|
||
scheduleEnabled.checked = groupData.enabled !== false;
|
||
}
|
||
|
||
updateScheduledTemp();
|
||
|
||
// Reattach event listeners
|
||
attachEditorEventListeners(editor);
|
||
|
||
// Update paste button state
|
||
updatePasteButtonState();
|
||
|
||
// Clear loading flag now that setup is complete
|
||
//
|
||
isLoadingSchedule = false;
|
||
flushPendingSaveIfNeeded();
|
||
}
|
||
|
||
// Create settings panel with controls and mode selector
|
||
function createSettingsPanel(groupData, editor) {
|
||
const container = document.createElement('div');
|
||
container.className = 'schedule-settings-container';
|
||
|
||
// Create toggle header
|
||
const toggleHeader = document.createElement('div');
|
||
toggleHeader.className = 'schedule-settings-toggle';
|
||
toggleHeader.innerHTML = `
|
||
<span class="toggle-icon" style="transform: rotate(-90deg);">▼</span>
|
||
<span class="toggle-text">Schedule Settings</span>
|
||
`;
|
||
toggleHeader.style.cursor = 'pointer';
|
||
toggleHeader.style.userSelect = 'none';
|
||
|
||
// Create settings panel content
|
||
const settingsPanel = document.createElement('div');
|
||
settingsPanel.className = 'schedule-settings-panel collapsed';
|
||
settingsPanel.style.display = 'none';
|
||
|
||
// Check if this is a single-entity group (for ignore button visibility)
|
||
const isSingleEntityGroup = groupData && groupData.entities && groupData.entities.length === 1;
|
||
|
||
// Add editor controls (buttons)
|
||
let controlsHTML = `
|
||
<div class="editor-controls">
|
||
<button id="undo-btn" class="btn-secondary-outline schedule-btn" title="Undo last change (Ctrl+Z)" disabled>Undo</button>
|
||
<button id="copy-schedule-btn" class="btn-secondary-outline schedule-btn" title="Copy current schedule">Copy Schedule</button>
|
||
<button id="paste-schedule-btn" class="btn-secondary-outline schedule-btn" title="Paste copied schedule" disabled>Paste Schedule</button>
|
||
<button id="clear-advance-history-btn" class="btn-secondary-outline schedule-btn" title="Clear advance history markers">Clear Advance History</button>`;
|
||
|
||
// Only show unmonitor button for single-entity groups
|
||
if (isSingleEntityGroup) {
|
||
controlsHTML += `<button id="ignore-entity-btn" class="btn-secondary-outline schedule-btn" title="Stop monitoring this thermostat">Unmonitor</button>`;
|
||
}
|
||
|
||
controlsHTML += `
|
||
<button id="clear-schedule-btn" class="btn-danger-outline schedule-btn" title="Clear entire schedule">Clear Schedule</button>
|
||
<label class="toggle-switch">
|
||
<input type="checkbox" id="schedule-enabled">
|
||
<span class="slider"></span>
|
||
<span class="toggle-label">Enabled</span>
|
||
</label>
|
||
</div>
|
||
`;
|
||
|
||
settingsPanel.innerHTML = controlsHTML;
|
||
|
||
// Toggle functionality
|
||
toggleHeader.onclick = () => {
|
||
const isCollapsed = settingsPanel.classList.contains('collapsed');
|
||
if (isCollapsed) {
|
||
settingsPanel.classList.remove('collapsed');
|
||
settingsPanel.style.display = 'block';
|
||
toggleHeader.querySelector('.toggle-icon').style.transform = 'rotate(0deg)';
|
||
} else {
|
||
settingsPanel.classList.add('collapsed');
|
||
settingsPanel.style.display = 'none';
|
||
toggleHeader.querySelector('.toggle-icon').style.transform = 'rotate(-90deg)';
|
||
}
|
||
};
|
||
|
||
container.appendChild(toggleHeader);
|
||
container.appendChild(settingsPanel);
|
||
|
||
return container;
|
||
}
|
||
|
||
// Show/hide editing profile indicator
|
||
function showEditingProfileIndicator(editingProfile, activeProfile) {
|
||
let indicator = getDocumentRoot().querySelector('#editing-profile-indicator');
|
||
|
||
if (editingProfile && editingProfile !== activeProfile) {
|
||
if (!indicator) {
|
||
// Create indicator if it doesn't exist
|
||
const graphContainer = getDocumentRoot().querySelector('.graph-container');
|
||
if (graphContainer) {
|
||
indicator = document.createElement('div');
|
||
indicator.id = 'editing-profile-indicator';
|
||
indicator.style.cssText = 'font-weight: bold; padding: 8px; margin-bottom: 8px; text-align: center; color: var(--accent-color); border: 1px solid var(--divider-color); border-radius: 4px; display: flex; align-items: center; justify-content: center; gap: 12px;';
|
||
graphContainer.insertBefore(indicator, graphContainer.firstChild);
|
||
}
|
||
}
|
||
if (indicator) {
|
||
indicator.innerHTML = `
|
||
<span>Editing Profile: ${editingProfile}</span>
|
||
<button id="close-editing-profile" style="padding: 4px 12px; cursor: pointer; background: var(--primary-color); color: var(--text-primary-color); border: none; border-radius: 4px; font-weight: normal;">Done</button>
|
||
`;
|
||
indicator.style.display = 'flex';
|
||
|
||
// Add click handler to Close button
|
||
const closeBtn = indicator.querySelector('#close-editing-profile');
|
||
if (closeBtn) {
|
||
closeBtn.onclick = async () => {
|
||
// Clear editing state
|
||
editingProfile = null;
|
||
|
||
// Load the active profile back into the graph
|
||
if (currentGroup && allGroups[currentGroup]) {
|
||
const groupData = allGroups[currentGroup];
|
||
const activeProfile = groupData.active_profile || 'Default';
|
||
const profileData = groupData.profiles && groupData.profiles[activeProfile];
|
||
|
||
if (profileData) {
|
||
currentScheduleMode = profileData.schedule_mode || 'all_days';
|
||
const schedules = profileData.schedules || {};
|
||
const day = currentDay || 'all_days';
|
||
const nodes = schedules[day] || schedules['all_days'] || [];
|
||
|
||
if (graph) {
|
||
setGraphNodes(nodes);
|
||
}
|
||
|
||
// Update UI
|
||
updateScheduleModeUI();
|
||
}
|
||
}
|
||
|
||
// Hide the indicator
|
||
showEditingProfileIndicator(null, activeProfile);
|
||
showToast('Returned to active profile', 'info');
|
||
};
|
||
}
|
||
}
|
||
} else {
|
||
if (indicator) {
|
||
indicator.style.display = 'none';
|
||
}
|
||
}
|
||
}
|
||
|
||
function getProfileEditorTargetGroup(container) {
|
||
if (currentGroup && allGroups[currentGroup]) {
|
||
return currentGroup;
|
||
}
|
||
|
||
const firstMonitored = Object.keys(allGroups).find(groupName => {
|
||
const groupData = allGroups[groupName] || {};
|
||
const isIgnored = groupData.ignored === true;
|
||
return !isIgnored;
|
||
});
|
||
|
||
return firstMonitored || null;
|
||
}
|
||
|
||
async function refreshGlobalProfileEditor() {
|
||
const container = getDocumentRoot().querySelector('#global-profile-list');
|
||
if (!container) return;
|
||
|
||
await setupProfileHandlers(container, null);
|
||
}
|
||
|
||
// Setup profile management event handlers
|
||
async function setupProfileHandlers(container, groupData) {
|
||
const targetGroup = getProfileEditorTargetGroup(container);
|
||
if (!targetGroup || !allGroups[targetGroup]) {
|
||
console.warn('setupProfileHandlers - no target group available, aborting');
|
||
return;
|
||
}
|
||
|
||
const targetGroupData = allGroups[targetGroup];
|
||
|
||
// Load and populate profiles
|
||
await loadProfiles(container, targetGroup);
|
||
|
||
// Profile dropdown change handler - automatically open editor when selection changes
|
||
const profileDropdown = container.querySelector('#profile-dropdown');
|
||
if (profileDropdown) {
|
||
profileDropdown.onchange = async () => {
|
||
const selectedProfile = profileDropdown.value;
|
||
|
||
// Don't load anything if no profile is selected (placeholder option)
|
||
if (!selectedProfile) {
|
||
return;
|
||
}
|
||
|
||
const activeProfile = targetGroupData.active_profile;
|
||
|
||
try {
|
||
// Load group data to get the latest profile schedules
|
||
const groupsResult = await haAPI.getGroups();
|
||
allGroups = groupsResult?.groups || groupsResult?.response?.groups || groupsResult || {};
|
||
|
||
// Load the selected profile's schedule data
|
||
const updatedGroupData = allGroups[targetGroup];
|
||
if (updatedGroupData && updatedGroupData.profiles && updatedGroupData.profiles[selectedProfile]) {
|
||
const profileData = updatedGroupData.profiles[selectedProfile];
|
||
|
||
// Get schedule data (don't modify global state)
|
||
let profileScheduleMode = profileData.schedule_mode || 'all_days';
|
||
const schedules = profileData.schedules || {};
|
||
const day = currentDay || 'all_days';
|
||
const nodes = schedules[day] || schedules['all_days'] || [];
|
||
|
||
// Find the profile editor host container
|
||
const profileEditorHost = container.querySelector('.profile-selector') || container;
|
||
if (profileEditorHost) {
|
||
// Remove any existing profile editor
|
||
const existingEditor = profileEditorHost.querySelector('.timeline-editor-container');
|
||
if (existingEditor) {
|
||
existingEditor.remove();
|
||
}
|
||
|
||
// Get temperature settings from globals (same as main timeline)
|
||
const temperatureUnit = updatedGroupData.temperature_unit || '°C';
|
||
|
||
// Create timeline editor using reusable function
|
||
const editorInstance = createTimelineEditor({
|
||
idPrefix: 'profile',
|
||
buttons: [
|
||
{ id: 'graph-prev-btn', text: '◀', title: 'Previous keyframe' },
|
||
{ id: 'graph-next-btn', text: '▶', title: 'Next keyframe' },
|
||
{ id: 'graph-copy-btn', text: 'Copy', title: 'Copy schedule' },
|
||
{ id: 'graph-paste-btn', text: 'Paste', title: 'Paste schedule', disabled: true },
|
||
{ id: 'graph-undo-btn', text: 'Undo', title: 'Undo last change', disabled: true },
|
||
{ id: 'graph-clear-btn', text: 'Clear', title: 'Clear all nodes' },
|
||
{ id: 'save-schedule-btn', text: 'Save', title: 'Save schedule', className: 'btn-quick-action btn-primary' },
|
||
{ id: 'close-btn', text: 'Close', title: 'Close profile editor' }
|
||
],
|
||
minValue: minTempSetting !== null ? minTempSetting : (temperatureUnit === '°F' ? 41 : 5),
|
||
maxValue: maxTempSetting !== null ? maxTempSetting : (temperatureUnit === '°F' ? 86 : 30),
|
||
snapValue: graphSnapStep,
|
||
title: `Editing Profile: ${selectedProfile}`,
|
||
yAxisLabel: `Temperature (${temperatureUnit})`,
|
||
xAxisLabel: `Time of Day (24hr)`,
|
||
showCurrentTime: false,
|
||
tooltipMode: tooltipMode || 'hover',
|
||
showHeader: false,
|
||
allowCollapse: false
|
||
});
|
||
|
||
const { container: editorContainer, timeline, controls } = editorInstance;
|
||
const { modeDropdown, dayPeriodSelector, dayPeriodButtons, buttons } = controls;
|
||
const prevBtn = buttons['graph-prev-btn'];
|
||
const nextBtn = buttons['graph-next-btn'];
|
||
const copyBtn = buttons['graph-copy-btn'];
|
||
const pasteBtn = buttons['graph-paste-btn'];
|
||
const undoBtn = buttons['graph-undo-btn'];
|
||
const clearBtn = buttons['graph-clear-btn'];
|
||
const saveBtn = buttons['save-schedule-btn'];
|
||
const closeBtn = buttons['close-btn'];
|
||
|
||
// Attach copy/paste handlers for profile timeline
|
||
if (copyBtn) {
|
||
copyBtn.onclick = () => copySchedule();
|
||
}
|
||
if (pasteBtn) {
|
||
pasteBtn.onclick = () => pasteSchedule();
|
||
}
|
||
|
||
// Link undo button to timeline's undo system
|
||
if (undoBtn && typeof timeline.setUndoButton === 'function') {
|
||
timeline.setUndoButton(undoBtn);
|
||
}
|
||
|
||
// Link previous/next buttons to timeline navigation
|
||
if (prevBtn && typeof timeline.setPreviousButton === 'function') {
|
||
timeline.setPreviousButton(prevBtn);
|
||
}
|
||
if (nextBtn && typeof timeline.setNextButton === 'function') {
|
||
timeline.setNextButton(nextBtn);
|
||
}
|
||
|
||
// Link clear button to timeline's clear functionality
|
||
if (clearBtn && typeof timeline.setClearButton === 'function') {
|
||
timeline.setClearButton(clearBtn);
|
||
}
|
||
|
||
// Set initial mode
|
||
modeDropdown.value = profileScheduleMode;
|
||
dayPeriodSelector.style.display = profileScheduleMode === 'all_days' ? 'none' : 'block';
|
||
|
||
// Add to profile selector
|
||
editorContainer.style.marginTop = '16px';
|
||
profileEditorHost.appendChild(editorContainer);
|
||
|
||
// Track current day for profile editor
|
||
let currentProfileDay = day;
|
||
|
||
// Backing schedule state for the profile timeline (preserves node properties beyond temp/time)
|
||
let profileCurrentSchedule = (nodes || []).map(n => ({ ...n }));
|
||
|
||
// Keep global node-settings context aligned to profile timeline while editing profile
|
||
const editorRoot = container.closest('.schedule-editor-inline') || getDocumentRoot();
|
||
const syncProfileScheduleFromTimeline = () => {
|
||
const previousSchedule = (profileCurrentSchedule || []).map(n => ({ ...n }));
|
||
currentSchedule = previousSchedule;
|
||
profileCurrentSchedule = keyframesToScheduleNodes(timeline.keyframes || []);
|
||
currentSchedule = profileCurrentSchedule;
|
||
return profileCurrentSchedule;
|
||
};
|
||
|
||
const setProfileEditingContext = () => {
|
||
editingProfile = selectedProfile;
|
||
showEditingProfileIndicator(editingProfile, activeProfile);
|
||
graph = timeline;
|
||
currentSchedule = (profileCurrentSchedule || []).map(n => ({ ...n }));
|
||
currentScheduleMode = profileScheduleMode;
|
||
currentDay = currentProfileDay;
|
||
};
|
||
|
||
const loadProfileDayIntoTimeline = (dayKey) => {
|
||
currentProfileDay = dayKey;
|
||
const schedules = profileData.schedules || {};
|
||
const nodesForDay = schedules[dayKey] || [];
|
||
profileCurrentSchedule = nodesForDay.map(n => ({ ...n }));
|
||
timeline.keyframes = scheduleNodesToKeyframes(profileCurrentSchedule);
|
||
setProfileEditingContext();
|
||
};
|
||
|
||
const persistProfileSchedule = async (scheduleModeOverride = profileScheduleMode) => {
|
||
setProfileEditingContext();
|
||
const updatedNodes = syncProfileScheduleFromTimeline();
|
||
|
||
if (!profileData.schedules) {
|
||
profileData.schedules = {};
|
||
}
|
||
profileData.schedules[currentProfileDay] = updatedNodes.map(n => ({ ...n }));
|
||
|
||
await haAPI.setGroupSchedule(targetGroup, updatedNodes, currentProfileDay, scheduleModeOverride, selectedProfile);
|
||
|
||
const refreshedGroupData = await haAPI.getGroups();
|
||
allGroups = normalizeGroupsPayload(refreshedGroupData);
|
||
|
||
syncMainTimelineForActiveProfileEdit(targetGroup, selectedProfile);
|
||
|
||
return updatedNodes;
|
||
};
|
||
|
||
// Function to update day/period buttons
|
||
const updateDayPeriodButtons = (mode, activeDay) => {
|
||
dayPeriodButtons.innerHTML = '';
|
||
dayPeriodSelector.style.display = mode === 'all_days' ? 'none' : 'block';
|
||
|
||
if (mode === 'individual') {
|
||
const days = [
|
||
{ value: 'mon', label: 'Mon' },
|
||
{ value: 'tue', label: 'Tue' },
|
||
{ value: 'wed', label: 'Wed' },
|
||
{ value: 'thu', label: 'Thu' },
|
||
{ value: 'fri', label: 'Fri' },
|
||
{ value: 'sat', label: 'Sat' },
|
||
{ value: 'sun', label: 'Sun' }
|
||
];
|
||
|
||
days.forEach(dayInfo => {
|
||
const btn = document.createElement('button');
|
||
btn.className = 'day-period-btn';
|
||
btn.textContent = dayInfo.label;
|
||
btn.dataset.day = dayInfo.value;
|
||
if (activeDay === dayInfo.value) {
|
||
btn.classList.add('active');
|
||
}
|
||
btn.addEventListener('click', async () => {
|
||
loadProfileDayIntoTimeline(dayInfo.value);
|
||
|
||
dayPeriodButtons.querySelectorAll('.day-period-btn').forEach(b => b.classList.remove('active'));
|
||
btn.classList.add('active');
|
||
});
|
||
dayPeriodButtons.appendChild(btn);
|
||
});
|
||
} else if (mode === '5/2') {
|
||
const periods = [
|
||
{ value: 'weekday', label: 'Weekday' },
|
||
{ value: 'weekend', label: 'Weekend' }
|
||
];
|
||
|
||
periods.forEach(period => {
|
||
const btn = document.createElement('button');
|
||
btn.className = 'day-period-btn';
|
||
btn.textContent = period.label;
|
||
btn.dataset.day = period.value;
|
||
if (activeDay === period.value) {
|
||
btn.classList.add('active');
|
||
}
|
||
btn.addEventListener('click', async () => {
|
||
loadProfileDayIntoTimeline(period.value);
|
||
|
||
dayPeriodButtons.querySelectorAll('.day-period-btn').forEach(b => b.classList.remove('active'));
|
||
btn.classList.add('active');
|
||
});
|
||
dayPeriodButtons.appendChild(btn);
|
||
});
|
||
}
|
||
};
|
||
|
||
// Initial day/period buttons
|
||
updateDayPeriodButtons(profileScheduleMode, currentProfileDay);
|
||
|
||
// Mode dropdown change handler
|
||
modeDropdown.addEventListener('change', async (e) => {
|
||
const newMode = e.target.value;
|
||
const previousMode = profileScheduleMode;
|
||
const previousDay = currentProfileDay;
|
||
const previousNodes = syncProfileScheduleFromTimeline().map(n => ({ ...n }));
|
||
|
||
if (!profileData.schedules) {
|
||
profileData.schedules = {};
|
||
}
|
||
profileData.schedules[previousDay] = previousNodes.map(n => ({ ...n }));
|
||
|
||
const profileScheduleSnapshot = JSON.parse(JSON.stringify(profileData.schedules));
|
||
profileScheduleMode = newMode;
|
||
|
||
// Determine destination day preserving current editing context when possible
|
||
const newDay = resolveModeTransitionDay(previousMode, previousDay, newMode);
|
||
|
||
const seedNodes = getModeTransitionSeedNodes({
|
||
schedules: profileScheduleSnapshot,
|
||
previousMode,
|
||
previousDay,
|
||
newMode,
|
||
newDay,
|
||
currentNodes: previousNodes
|
||
});
|
||
|
||
currentProfileDay = newDay;
|
||
profileCurrentSchedule = seedNodes.map(n => ({ ...n }));
|
||
profileData.schedules[currentProfileDay] = profileCurrentSchedule.map(n => ({ ...n }));
|
||
timeline.keyframes = scheduleNodesToKeyframes(profileCurrentSchedule);
|
||
setProfileEditingContext();
|
||
|
||
// Update day/period buttons
|
||
updateDayPeriodButtons(newMode, newDay);
|
||
|
||
// Save mode change to profile
|
||
try {
|
||
await persistProfileSchedule(newMode);
|
||
} catch (error) {
|
||
console.error('Failed to save mode change:', error);
|
||
showToast('Failed to save mode change', 'error');
|
||
}
|
||
});
|
||
|
||
// Update undo button state
|
||
const updateUndoBtn = () => {
|
||
undoBtn.disabled = !timeline.undoStack || timeline.undoStack.length === 0;
|
||
};
|
||
timeline.addEventListener('keyframe-moved', updateUndoBtn);
|
||
timeline.addEventListener('keyframe-added', updateUndoBtn);
|
||
timeline.addEventListener('keyframe-deleted', updateUndoBtn);
|
||
timeline.addEventListener('keyframe-restored', updateUndoBtn);
|
||
timeline.addEventListener('keyframes-cleared', updateUndoBtn);
|
||
|
||
// Show node settings for profile timeline keyframe selection/click
|
||
timeline.addEventListener('keyframe-clicked', (e) => {
|
||
const { index, keyframe } = e.detail;
|
||
setProfileEditingContext();
|
||
placeNodeSettingsPanelAfter(editorContainer);
|
||
showNodeSettingsPanel(editorRoot, index, keyframe, timeline);
|
||
});
|
||
|
||
timeline.addEventListener('keyframe-selected', (e) => {
|
||
const index = e.detail?.index ?? e.detail?.nodeIndex;
|
||
const keyframe = e.detail?.keyframe ?? (Number.isInteger(index) ? graph?.keyframes?.[index] : undefined);
|
||
setProfileEditingContext();
|
||
placeNodeSettingsPanelAfter(editorContainer);
|
||
showNodeSettingsPanel(editorRoot, index, keyframe, timeline);
|
||
});
|
||
|
||
// Undo button handler
|
||
undoBtn.onclick = () => {
|
||
setProfileEditingContext();
|
||
if (timeline && typeof timeline.undo === 'function') {
|
||
timeline.undo();
|
||
}
|
||
};
|
||
|
||
// Copy button handler
|
||
copyBtn.onclick = () => {
|
||
setProfileEditingContext();
|
||
copiedSchedule = [...timeline.keyframes];
|
||
pasteBtn.disabled = false;
|
||
showToast('Schedule copied', 'success');
|
||
};
|
||
|
||
// Paste button handler
|
||
pasteBtn.onclick = () => {
|
||
setProfileEditingContext();
|
||
if (copiedSchedule && copiedSchedule.length > 0) {
|
||
timeline.keyframes = [...copiedSchedule];
|
||
syncProfileScheduleFromTimeline();
|
||
showToast('Schedule pasted', 'success');
|
||
}
|
||
};
|
||
|
||
// Clear button handler
|
||
clearBtn.onclick = () => {
|
||
setProfileEditingContext();
|
||
if (confirm('Clear all nodes for this profile?')) {
|
||
timeline.keyframes = [];
|
||
profileCurrentSchedule = [];
|
||
currentSchedule = [];
|
||
}
|
||
};
|
||
|
||
// Save button handler (manual save)
|
||
saveBtn.onclick = async () => {
|
||
try {
|
||
await persistProfileSchedule();
|
||
|
||
showToast('Profile saved successfully', 'success');
|
||
} catch (error) {
|
||
console.error('Failed to save profile changes:', error);
|
||
showToast('Failed to save profile changes', 'error');
|
||
}
|
||
};
|
||
|
||
// Close button handler
|
||
closeBtn.onclick = () => {
|
||
editorContainer.remove();
|
||
|
||
// Reset dropdown to placeholder
|
||
const profileDropdown = container.querySelector('#profile-dropdown');
|
||
if (profileDropdown) {
|
||
profileDropdown.value = '';
|
||
}
|
||
|
||
setMainEditingContext(editorRoot);
|
||
placeNodeSettingsPanelAfter(editorRoot.querySelector('.graph-container'));
|
||
};
|
||
|
||
// Set the keyframes AFTER appending to DOM
|
||
timeline.keyframes = scheduleNodesToKeyframes(profileCurrentSchedule);
|
||
setProfileEditingContext();
|
||
attachUndoStackDebugLogging(timeline, `profile:${selectedProfile}`);
|
||
|
||
// Add event listeners to save changes directly to the selected profile
|
||
const saveProfileChanges = async () => {
|
||
try {
|
||
await persistProfileSchedule();
|
||
} catch (error) {
|
||
console.error('Failed to save profile changes:', error);
|
||
showToast('Failed to save profile changes', 'error');
|
||
}
|
||
};
|
||
|
||
timeline.addEventListener('keyframe-moved', saveProfileChanges);
|
||
timeline.addEventListener('keyframe-added', saveProfileChanges);
|
||
timeline.addEventListener('keyframe-deleted', saveProfileChanges);
|
||
timeline.addEventListener('keyframes-cleared', saveProfileChanges);
|
||
timeline.addEventListener('keyframe-restored', saveProfileChanges);
|
||
|
||
timeline.addEventListener('keyframe-added', (e) => {
|
||
refreshOpenNodeSettingsForAddedKeyframe({
|
||
editor: editorRoot,
|
||
timeline,
|
||
event: e,
|
||
beforeShow: () => setProfileEditingContext(),
|
||
anchorElement: editorContainer
|
||
});
|
||
});
|
||
|
||
timeline.addEventListener('keyframe-restored', () => {
|
||
refreshOpenNodeSettingsAfterUndo({
|
||
editor: editorRoot,
|
||
timeline,
|
||
beforeShow: () => setProfileEditingContext(),
|
||
anchorElement: editorContainer
|
||
});
|
||
});
|
||
}
|
||
} else {
|
||
showToast('Selected profile is unavailable for the target schedule', 'warning');
|
||
}
|
||
} catch (error) {
|
||
console.error('Failed to load profile:', error);
|
||
showToast('Failed to load profile: ' + error.message, 'error');
|
||
}
|
||
};
|
||
}
|
||
|
||
// New profile button
|
||
const newProfileBtn = container.querySelector('#new-profile-btn');
|
||
if (newProfileBtn) {
|
||
newProfileBtn.onclick = async () => {
|
||
const selectedTargetGroup = getProfileEditorTargetGroup(container);
|
||
if (!selectedTargetGroup) {
|
||
showToast('Select a monitored schedule first', 'warning');
|
||
return;
|
||
}
|
||
|
||
const profileName = prompt('Enter name for new profile:');
|
||
if (!profileName || profileName.trim() === '') return;
|
||
|
||
try {
|
||
await haAPI.createProfile(selectedTargetGroup, profileName.trim());
|
||
showToast(`Created profile: ${profileName}`, 'success');
|
||
|
||
// Reload group data from server to get updated profiles
|
||
const groupsResult = await haAPI.getGroups();
|
||
allGroups = normalizeGroupsPayload(groupsResult);
|
||
|
||
await loadProfiles(container, selectedTargetGroup);
|
||
updateGraphProfileDropdown();
|
||
} catch (error) {
|
||
console.error('Failed to create profile:', error);
|
||
showToast('Failed to create profile: ' + error.message, 'error');
|
||
}
|
||
};
|
||
}
|
||
|
||
// Rename profile button
|
||
const renameProfileBtn = container.querySelector('#rename-profile-btn');
|
||
if (renameProfileBtn) {
|
||
renameProfileBtn.onclick = async () => {
|
||
const selectedTargetGroup = getProfileEditorTargetGroup(container);
|
||
if (!selectedTargetGroup) {
|
||
showToast('Select a monitored schedule first', 'warning');
|
||
return;
|
||
}
|
||
|
||
const dropdown = container.querySelector('#profile-dropdown');
|
||
const currentProfile = dropdown?.value;
|
||
if (!currentProfile) return;
|
||
|
||
const newName = prompt(`Rename profile "${currentProfile}" to:`, currentProfile);
|
||
if (!newName || newName.trim() === '' || newName === currentProfile) return;
|
||
|
||
try {
|
||
await haAPI.renameProfile(selectedTargetGroup, currentProfile, newName.trim());
|
||
showToast(`Renamed profile to: ${newName}`, 'success');
|
||
|
||
// Reload group data from server to get updated profiles
|
||
const groupsResult = await haAPI.getGroups();
|
||
allGroups = normalizeGroupsPayload(groupsResult);
|
||
|
||
await loadProfiles(container, selectedTargetGroup);
|
||
updateGraphProfileDropdown();
|
||
} catch (error) {
|
||
console.error('Failed to rename profile:', error);
|
||
showToast('Failed to rename profile: ' + error.message, 'error');
|
||
}
|
||
};
|
||
}
|
||
|
||
// Delete profile button
|
||
const deleteProfileBtn = container.querySelector('#delete-profile-btn');
|
||
if (deleteProfileBtn) {
|
||
deleteProfileBtn.onclick = async () => {
|
||
const selectedTargetGroup = getProfileEditorTargetGroup(container);
|
||
if (!selectedTargetGroup) {
|
||
showToast('Select a monitored schedule first', 'warning');
|
||
return;
|
||
}
|
||
|
||
const dropdown = container.querySelector('#profile-dropdown');
|
||
const currentProfile = dropdown?.value;
|
||
if (!currentProfile) return;
|
||
|
||
if (!confirm(`Delete profile "${currentProfile}"?`)) return;
|
||
|
||
try {
|
||
await haAPI.deleteProfile(selectedTargetGroup, currentProfile);
|
||
showToast(`Deleted profile: ${currentProfile}`, 'success');
|
||
|
||
// Reload group data from server to get updated profiles
|
||
const groupsResult = await haAPI.getGroups();
|
||
allGroups = normalizeGroupsPayload(groupsResult);
|
||
|
||
await loadProfiles(container, selectedTargetGroup);
|
||
updateGraphProfileDropdown();
|
||
} catch (error) {
|
||
console.error('Failed to delete profile:', error);
|
||
showToast('Failed to delete profile: ' + error.message, 'error');
|
||
}
|
||
};
|
||
}
|
||
}
|
||
|
||
// Load and populate profiles dropdown
|
||
async function loadProfiles(container, targetId) {
|
||
try {
|
||
const result = await haAPI.getProfiles(targetId);
|
||
const profiles = result.profiles || {};
|
||
const activeProfile = result.active_profile || 'Default';
|
||
|
||
const dropdown = container.querySelector('#profile-dropdown');
|
||
if (!dropdown) {
|
||
console.warn('loadProfiles - dropdown not found');
|
||
return;
|
||
}
|
||
|
||
// Clear and repopulate dropdown
|
||
dropdown.innerHTML = '';
|
||
|
||
// Add placeholder option
|
||
const placeholderOption = document.createElement('option');
|
||
placeholderOption.value = '';
|
||
placeholderOption.textContent = 'Choose Profile to Edit';
|
||
placeholderOption.disabled = true;
|
||
placeholderOption.selected = true;
|
||
dropdown.appendChild(placeholderOption);
|
||
|
||
Object.keys(profiles).forEach(profileName => {
|
||
const option = document.createElement('option');
|
||
option.value = profileName;
|
||
option.textContent = profileName;
|
||
dropdown.appendChild(option);
|
||
});
|
||
|
||
// Update button states
|
||
const renameBtn = container.querySelector('#rename-profile-btn');
|
||
const deleteBtn = container.querySelector('#delete-profile-btn');
|
||
const profileCount = Object.keys(profiles).length;
|
||
|
||
if (renameBtn) renameBtn.disabled = profileCount === 0;
|
||
if (deleteBtn) deleteBtn.disabled = profileCount <= 1;
|
||
|
||
} catch (error) {
|
||
console.error('Failed to load profiles:', error);
|
||
}
|
||
}
|
||
|
||
// Create preset-only notice for groups with entities that don't support temperature
|
||
function createPresetOnlyNotice(entityIds, groupName) {
|
||
if (!entityIds || entityIds.length === 0) {
|
||
return null; // Virtual groups don't need this notice
|
||
}
|
||
|
||
// Check if any entities are preset-only (null current_temperature)
|
||
const presetOnlyEntities = entityIds.filter(entityId => {
|
||
const entity = climateEntities.find(e => e.entity_id === entityId);
|
||
return entity && entity.attributes && entity.attributes.current_temperature === null;
|
||
});
|
||
|
||
if (presetOnlyEntities.length === 0) {
|
||
return null; // No preset-only entities
|
||
}
|
||
|
||
// Check if this notice has been dismissed for this group (session storage)
|
||
const dismissKey = `preset-notice-dismissed-${groupName}`;
|
||
if (sessionStorage.getItem(dismissKey) === 'true') {
|
||
return null;
|
||
}
|
||
|
||
// Create notice banner
|
||
const notice = document.createElement('div');
|
||
notice.className = 'preset-only-notice';
|
||
notice.style.cssText = `
|
||
background: var(--warning-color, #ff9800);
|
||
color: white;
|
||
padding: 12px 16px;
|
||
margin: 8px 0;
|
||
border-radius: 4px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-size: 14px;
|
||
line-height: 1.4;
|
||
`;
|
||
|
||
const message = document.createElement('div');
|
||
message.style.flex = '1';
|
||
|
||
const count = presetOnlyEntities.length;
|
||
const entityWord = count === 1 ? 'entity' : 'entities';
|
||
const hasWord = count === 1 ? 'has' : 'have';
|
||
|
||
message.innerHTML = `
|
||
<strong>⚠️ Preset-Only ${count === 1 ? 'Entity' : 'Entities'} Detected</strong><br>
|
||
${count} ${entityWord} in this group ${hasWord} no temperature sensor and will only receive mode changes (HVAC, fan, swing, preset).
|
||
`;
|
||
|
||
const dismissBtn = document.createElement('button');
|
||
dismissBtn.textContent = '✕';
|
||
dismissBtn.style.cssText = `
|
||
background: transparent;
|
||
border: none;
|
||
color: white;
|
||
font-size: 20px;
|
||
cursor: pointer;
|
||
padding: 0 8px;
|
||
margin-left: 16px;
|
||
opacity: 0.8;
|
||
transition: opacity 0.2s;
|
||
`;
|
||
dismissBtn.title = 'Dismiss this notice';
|
||
|
||
dismissBtn.addEventListener('mouseenter', () => {
|
||
dismissBtn.style.opacity = '1';
|
||
});
|
||
dismissBtn.addEventListener('mouseleave', () => {
|
||
dismissBtn.style.opacity = '0.8';
|
||
});
|
||
|
||
dismissBtn.addEventListener('click', () => {
|
||
sessionStorage.setItem(dismissKey, 'true');
|
||
notice.style.transition = 'opacity 0.3s, max-height 0.3s';
|
||
notice.style.opacity = '0';
|
||
notice.style.maxHeight = '0';
|
||
notice.style.padding = '0 16px';
|
||
notice.style.margin = '0';
|
||
setTimeout(() => {
|
||
notice.remove();
|
||
}, 300);
|
||
});
|
||
|
||
notice.appendChild(message);
|
||
notice.appendChild(dismissBtn);
|
||
|
||
return notice;
|
||
}
|
||
|
||
// Create group members table element
|
||
function createGroupMembersTable(entityIds) {
|
||
if (!entityIds || entityIds.length === 0) {
|
||
// Return a message for virtual groups (no entities)
|
||
const container = document.createElement('div');
|
||
container.className = 'group-members-container';
|
||
container.innerHTML = `
|
||
<div style="padding: 16px; text-align: center; color: var(--secondary-text-color); font-style: italic;">
|
||
Virtual Schedule (No Entities) - Events Only
|
||
</div>
|
||
`;
|
||
return container;
|
||
}
|
||
|
||
// Create container wrapper
|
||
const container = document.createElement('div');
|
||
container.className = 'group-members-container';
|
||
|
||
// Create toggle header
|
||
const toggleHeader = document.createElement('div');
|
||
toggleHeader.className = 'group-members-toggle';
|
||
toggleHeader.innerHTML = `
|
||
<span class="toggle-icon">▶</span>
|
||
<span class="toggle-text">Member Entities (${entityIds.length})</span>
|
||
`;
|
||
|
||
// Create table
|
||
const table = document.createElement('div');
|
||
table.className = 'group-members-table collapsed';
|
||
table.style.display = 'none';
|
||
|
||
// Toggle functionality
|
||
toggleHeader.onclick = async () => {
|
||
const isCollapsed = table.classList.contains('collapsed');
|
||
if (isCollapsed) {
|
||
// Fetch fresh entity states before expanding
|
||
await loadClimateEntities();
|
||
|
||
// Refresh table data
|
||
const now = getServerNow(serverTimeZone);
|
||
const currentTime = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`;
|
||
const groupSchedule = getGraphNodes();
|
||
|
||
// Update each row with fresh data
|
||
entityIds.forEach(entityId => {
|
||
const row = table.querySelector(`.group-members-row[data-entity-id="${entityId}"]`);
|
||
if (!row) return;
|
||
|
||
const entity = climateEntities.find(e => e.entity_id === entityId);
|
||
if (!entity) return;
|
||
|
||
// Update current temp
|
||
const currentCell = row.children[1];
|
||
const currentTemp = entity.attributes?.current_temperature;
|
||
currentCell.textContent = (Number.isFinite(currentTemp)) ? `${currentTemp.toFixed(1)}${temperatureUnit}` : '--';
|
||
|
||
// Update target temp
|
||
const targetCell = row.children[2];
|
||
const targetTemp = entity.attributes?.temperature;
|
||
targetCell.textContent = (Number.isFinite(targetTemp)) ? `${targetTemp.toFixed(1)}${temperatureUnit}` : '--';
|
||
|
||
// Update scheduled temp
|
||
const scheduledCell = row.children[3];
|
||
if (groupSchedule.length > 0) {
|
||
const scheduledTemp = interpolateTemperature(groupSchedule, currentTime);
|
||
scheduledCell.textContent = (Number.isFinite(scheduledTemp)) ? `${scheduledTemp.toFixed(1)}${temperatureUnit}` : 'No Change';
|
||
} else {
|
||
scheduledCell.textContent = '--';
|
||
}
|
||
});
|
||
|
||
table.classList.remove('collapsed');
|
||
table.style.display = 'block';
|
||
toggleHeader.querySelector('.toggle-icon').style.transform = 'rotate(90deg)';
|
||
} else {
|
||
table.classList.add('collapsed');
|
||
table.style.display = 'none';
|
||
toggleHeader.querySelector('.toggle-icon').style.transform = 'rotate(0deg)';
|
||
}
|
||
};
|
||
|
||
// Create header
|
||
const header = document.createElement('div');
|
||
header.className = 'group-members-header';
|
||
header.innerHTML = '<span>Name</span><span>Current</span><span>Target</span><span>Scheduled</span><span style="text-align: center;">Actions</span>';
|
||
table.appendChild(header);
|
||
|
||
// Get current time for scheduled temp calculation
|
||
const now = getServerNow(serverTimeZone);
|
||
const currentTime = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`;
|
||
|
||
// Get the group's schedule if it exists
|
||
const groupSchedule = getGraphNodes();
|
||
|
||
// Create rows for each entity
|
||
entityIds.forEach(entityId => {
|
||
const entity = climateEntities.find(e => e.entity_id === entityId);
|
||
if (!entity) return;
|
||
|
||
const row = document.createElement('div');
|
||
row.className = 'group-members-row';
|
||
row.dataset.entityId = entityId;
|
||
|
||
const nameCell = document.createElement('span');
|
||
nameCell.textContent = entity.attributes?.friendly_name || entityId;
|
||
|
||
const currentCell = document.createElement('span');
|
||
const currentTemp = entity.attributes?.current_temperature;
|
||
currentCell.textContent = (Number.isFinite(currentTemp)) ? `${currentTemp.toFixed(1)}${temperatureUnit}` : '--';
|
||
|
||
const targetCell = document.createElement('span');
|
||
const targetTemp = entity.attributes?.temperature;
|
||
targetCell.textContent = (Number.isFinite(targetTemp)) ? `${targetTemp.toFixed(1)}${temperatureUnit}` : '--';
|
||
|
||
const scheduledCell = document.createElement('span');
|
||
if (groupSchedule.length > 0) {
|
||
const scheduledTemp = interpolateTemperature(groupSchedule, currentTime);
|
||
scheduledCell.textContent = (Number.isFinite(scheduledTemp)) ? `${scheduledTemp.toFixed(1)}${temperatureUnit}` : 'No Change';
|
||
} else {
|
||
scheduledCell.textContent = '--';
|
||
}
|
||
|
||
// Add action buttons cell
|
||
const actionCell = document.createElement('span');
|
||
actionCell.style.textAlign = 'center';
|
||
actionCell.style.display = 'flex';
|
||
actionCell.style.gap = '4px';
|
||
actionCell.style.justifyContent = 'center';
|
||
|
||
const moveBtn = document.createElement('button');
|
||
moveBtn.className = 'btn-icon-small move-entity-btn';
|
||
moveBtn.innerHTML = '⇄';
|
||
moveBtn.title = 'Move to another group';
|
||
moveBtn.onclick = (e) => {
|
||
e.stopPropagation();
|
||
const groupName = currentGroup;
|
||
if (groupName) {
|
||
showMoveToGroupModal(groupName, entityId);
|
||
}
|
||
};
|
||
|
||
const removeBtn = document.createElement('button');
|
||
removeBtn.className = 'btn-icon-small remove-entity-btn';
|
||
removeBtn.innerHTML = '🗑';
|
||
removeBtn.title = 'Remove from group';
|
||
removeBtn.onclick = (e) => {
|
||
e.stopPropagation();
|
||
// Get the group name from the current context
|
||
const groupName = currentGroup;
|
||
if (groupName) {
|
||
removeEntityFromGroup(groupName, entityId);
|
||
}
|
||
};
|
||
|
||
actionCell.appendChild(moveBtn);
|
||
actionCell.appendChild(removeBtn);
|
||
|
||
row.appendChild(nameCell);
|
||
row.appendChild(currentCell);
|
||
row.appendChild(targetCell);
|
||
row.appendChild(scheduledCell);
|
||
row.appendChild(actionCell);
|
||
table.appendChild(row);
|
||
});
|
||
|
||
container.appendChild(toggleHeader);
|
||
container.appendChild(table);
|
||
|
||
return container;
|
||
}
|
||
|
||
// Display group members table above graph (deprecated - use createGroupMembersTable instead)
|
||
function displayGroupMembersTable(entityIds) {
|
||
// Remove existing table if present
|
||
const existingTable = getDocumentRoot().querySelector('.group-members-table');
|
||
if (existingTable) {
|
||
existingTable.remove();
|
||
}
|
||
|
||
const table = createGroupMembersTable(entityIds);
|
||
if (!table) return;
|
||
|
||
// Insert table before graph container
|
||
const graphContainer = getDocumentRoot().querySelector('.graph-container');
|
||
if (graphContainer) {
|
||
graphContainer.parentNode.insertBefore(table, graphContainer);
|
||
}
|
||
}
|
||
|
||
// Toggle entity inclusion (enable/disable entity)
|
||
async function toggleEntityInclusion(entityId, enable = true) {
|
||
try {
|
||
if (enable) {
|
||
// Check if entity already has a schedule
|
||
const existingSchedule = await haAPI.getSchedule(entityId);
|
||
const schedule = existingSchedule?.response || existingSchedule;
|
||
|
||
if (!schedule || !schedule.nodes || schedule.nodes.length === 0) {
|
||
// Entity has no schedule, initialize with default
|
||
const defaultSchedule = defaultScheduleSettings.map(node => ({...node}));
|
||
|
||
await haAPI.setSchedule(entityId, defaultSchedule, 'all_days', 'all_days');
|
||
|
||
// Add to local Map
|
||
entitySchedules.set(entityId, defaultSchedule);
|
||
} else {
|
||
// Entity has a schedule, un-ignore it and enable it
|
||
await haAPI.setIgnored(entityId, false);
|
||
await haAPI.enableSchedule(entityId);
|
||
|
||
// Add to local Map
|
||
entitySchedules.set(entityId, schedule.nodes);
|
||
}
|
||
|
||
showToast('Entity enabled', 'success');
|
||
} else {
|
||
// Disable entity - mark as ignored instead of deleting
|
||
try {
|
||
await haAPI.setIgnored(entityId, true);
|
||
|
||
// Remove from local Map only after successfully marked as ignored
|
||
entitySchedules.delete(entityId);
|
||
|
||
showToast('Entity ignored', 'success');
|
||
} catch (ignoreError) {
|
||
throw ignoreError; // Re-throw to be caught by outer catch
|
||
}
|
||
}
|
||
|
||
// Re-render entity list to update UI
|
||
await renderEntityList();
|
||
|
||
// If enabling, optionally expand the editor for this entity
|
||
if (enable) {
|
||
selectEntity(entityId);
|
||
}
|
||
} catch (error) {
|
||
showToast(`Failed to ${enable ? 'enable' : 'disable'} entity`, 'error');
|
||
|
||
// On error, reload schedules from backend to sync state
|
||
await loadAllSchedules();
|
||
}
|
||
}
|
||
|
||
// Remove entity from group
|
||
async function removeEntityFromGroup(groupName, entityId) {
|
||
// Get entity name for confirmation
|
||
const entity = climateEntities.find(e => e.entity_id === entityId);
|
||
const entityName = entity?.attributes?.friendly_name || entityId;
|
||
|
||
if (!confirm(`Remove "${entityName}" from group "${groupName}"?\n\nThe entity will return to your active entities list.`)) {
|
||
return;
|
||
}
|
||
|
||
try {
|
||
await haAPI.removeFromGroup(groupName, entityId);
|
||
|
||
// Close any open editors to prevent stale data
|
||
collapseAllEditors();
|
||
|
||
// Reload groups
|
||
await loadGroups();
|
||
|
||
// Reload entity list (entity should reappear in active/disabled)
|
||
await renderEntityList();
|
||
|
||
showToast(`Removed ${entityName} from ${groupName}`, 'success');
|
||
} catch (error) {
|
||
console.error('Failed to remove entity from group:', error);
|
||
showToast('Failed to remove entity from group: ' + error.message, 'error');
|
||
}
|
||
}
|
||
|
||
// Show move to group modal
|
||
function showMoveToGroupModal(currentGroupName, entityId) {
|
||
const modal = getDocumentRoot().querySelector('#add-to-group-modal');
|
||
const select = getDocumentRoot().querySelector('#add-to-group-select');
|
||
const newGroupInput = getDocumentRoot().querySelector('#new-group-name-inline');
|
||
|
||
if (!modal || !select) return;
|
||
|
||
// Store entity ID and current group on modal
|
||
modal.dataset.entityId = entityId;
|
||
modal.dataset.currentGroup = currentGroupName;
|
||
modal.dataset.isMove = 'true';
|
||
|
||
// Populate group select (excluding current group)
|
||
select.innerHTML = '<option value="">Select a group...</option>';
|
||
Object.keys(allGroups).forEach(groupName => {
|
||
if (groupName === currentGroupName) {
|
||
return; // Skip current group
|
||
}
|
||
|
||
const groupData = allGroups[groupName];
|
||
|
||
// Skip ignored/unmonitored groups
|
||
const isIgnored = groupData.ignored === true;
|
||
if (isIgnored) {
|
||
return;
|
||
}
|
||
|
||
// For single-entity groups, use the entity's friendly name only if group name matches entity ID
|
||
const isSingleEntity = groupData.entities && groupData.entities.length === 1;
|
||
let displayName = groupName;
|
||
if (isSingleEntity) {
|
||
const targetEntityId = groupData.entities[0];
|
||
// Only show friendly name if group name matches entity ID (auto-created)
|
||
if (groupName === targetEntityId) {
|
||
const entity = climateEntities.find(e => e.entity_id === targetEntityId);
|
||
if (entity && entity.attributes?.friendly_name) {
|
||
displayName = entity.attributes.friendly_name;
|
||
} else {
|
||
// Fallback to entity_id without the domain prefix
|
||
displayName = targetEntityId.split('.')[1]?.replace(/_/g, ' ') || targetEntityId;
|
||
}
|
||
}
|
||
// Otherwise keep displayName as groupName (user-created group)
|
||
}
|
||
|
||
const option = document.createElement('option');
|
||
option.value = groupName;
|
||
option.textContent = displayName;
|
||
select.appendChild(option);
|
||
});
|
||
|
||
// Clear new group input
|
||
if (newGroupInput) {
|
||
newGroupInput.value = '';
|
||
}
|
||
|
||
modal.style.display = 'flex';
|
||
}
|
||
|
||
// Show add to group modal
|
||
function showAddToGroupModal(entityId) {
|
||
const modal = getDocumentRoot().querySelector('#add-to-group-modal');
|
||
const select = getDocumentRoot().querySelector('#add-to-group-select');
|
||
const newGroupInput = getDocumentRoot().querySelector('#new-group-name-inline');
|
||
|
||
if (!modal || !select) return;
|
||
|
||
// Store entity ID on modal
|
||
modal.dataset.entityId = entityId;
|
||
|
||
// Populate group select
|
||
select.innerHTML = '<option value="">Select a group...</option>';
|
||
Object.keys(allGroups).forEach(groupName => {
|
||
const groupData = allGroups[groupName];
|
||
|
||
// Skip ignored/unmonitored groups
|
||
const isIgnored = groupData.ignored === true;
|
||
if (isIgnored) {
|
||
return; // Skip this group
|
||
}
|
||
|
||
// Skip disabled groups
|
||
const isEnabled = groupData.enabled !== false;
|
||
if (!isEnabled) {
|
||
return; // Skip this group
|
||
}
|
||
|
||
// For single-entity groups, use the entity's friendly name only if group name matches entity ID
|
||
const isSingleEntity = groupData.entities && groupData.entities.length === 1;
|
||
let displayName = groupName;
|
||
if (isSingleEntity) {
|
||
const entityId = groupData.entities[0];
|
||
// Only show friendly name if group name matches entity ID (auto-created)
|
||
if (groupName === entityId) {
|
||
const entity = climateEntities.find(e => e.entity_id === entityId);
|
||
if (entity && entity.attributes?.friendly_name) {
|
||
displayName = entity.attributes.friendly_name;
|
||
} else {
|
||
// Fallback to entity_id without the domain prefix
|
||
displayName = entityId.split('.')[1]?.replace(/_/g, ' ') || entityId;
|
||
}
|
||
}
|
||
// Otherwise keep displayName as groupName (user-created group)
|
||
}
|
||
|
||
const option = document.createElement('option');
|
||
option.value = groupName;
|
||
option.textContent = displayName;
|
||
select.appendChild(option);
|
||
});
|
||
|
||
// Clear new group input
|
||
if (newGroupInput) {
|
||
newGroupInput.value = '';
|
||
}
|
||
|
||
modal.style.display = 'flex';
|
||
}
|
||
|
||
// Show edit group modal
|
||
function showEditGroupModal(groupName) {
|
||
const modal = getDocumentRoot().querySelector('#edit-group-modal');
|
||
const input = getDocumentRoot().querySelector('#edit-group-name');
|
||
|
||
if (!modal || !input) return;
|
||
|
||
// Store group name on modal dataset
|
||
modal.dataset.groupName = groupName;
|
||
input.value = groupName;
|
||
|
||
modal.style.display = 'flex';
|
||
|
||
// Focus the input and select the text
|
||
setTimeout(() => {
|
||
input.focus();
|
||
input.select();
|
||
}, 100);
|
||
}
|
||
|
||
// Confirm delete group
|
||
function confirmDeleteGroup(groupName) {
|
||
if (!confirm(`Delete group "${groupName}"? All entities will be moved back to the entity list.`)) return;
|
||
|
||
deleteGroup(groupName);
|
||
}
|
||
|
||
// Delete group
|
||
async function deleteGroup(groupName) {
|
||
try {
|
||
await haAPI.deleteGroup(groupName);
|
||
|
||
// Reload groups
|
||
await loadGroups();
|
||
|
||
// Reload entity list (entities should reappear)
|
||
await renderEntityList();
|
||
} catch (error) {
|
||
console.error('Failed to delete group:', error);
|
||
alert('Failed to delete group');
|
||
}
|
||
}
|
||
|
||
// Toggle group enabled/disabled
|
||
async function toggleGroupEnabled(groupName, enabled) {
|
||
try {
|
||
if (enabled) {
|
||
await haAPI.enableGroup(groupName);
|
||
} else {
|
||
await haAPI.disableGroup(groupName);
|
||
}
|
||
|
||
// Update local state
|
||
if (allGroups[groupName]) {
|
||
allGroups[groupName].enabled = enabled;
|
||
}
|
||
|
||
// Group toggled
|
||
} catch (error) {
|
||
console.error(`Failed to ${enabled ? 'enable' : 'disable'} group:`, error);
|
||
// Reload to sync state
|
||
await loadGroups();
|
||
}
|
||
}
|
||
|
||
// Render entity list (deprecated - all entities are now in groups)
|
||
async function renderEntityList() {
|
||
// All entities should be in groups now (either multi-entity or single-entity groups)
|
||
// This function is kept for backward compatibility but does nothing
|
||
return;
|
||
}
|
||
|
||
/**
|
||
* Creates a timeline editor instance with controls
|
||
* @param {Object} config - Configuration object
|
||
* @param {string} config.idPrefix - Prefix for element IDs (e.g., 'main', 'profile')
|
||
* @param {Array} config.buttons - Array of button configs: [{id, text, title, className?, onClick?}]
|
||
* @param {number} config.minValue - Min temperature value
|
||
* @param {number} config.maxValue - Max temperature value
|
||
* @param {number} config.snapValue - Snap step value
|
||
* @param {string} config.title - Timeline title
|
||
* @param {string} config.yAxisLabel - Y-axis label
|
||
* @param {string} config.xAxisLabel - X-axis label
|
||
* @param {boolean} config.showCurrentTime - Show current time indicator
|
||
* @param {string} config.tooltipMode - Tooltip mode
|
||
* @param {boolean} config.showHeader - Show timeline header
|
||
* @param {boolean} config.allowCollapse - Allow timeline collapse
|
||
* @returns {Object} - {container, timeline, controls: {modeDropdown, dayPeriodSelector, dayPeriodButtons, buttons: {}}}
|
||
*/
|
||
function createTimelineEditor(config) {
|
||
const {
|
||
idPrefix = 'timeline',
|
||
buttons = [],
|
||
minValue = 5,
|
||
maxValue = 30,
|
||
snapValue = 0.5,
|
||
title = 'Schedule',
|
||
yAxisLabel = 'Temperature (°C)',
|
||
xAxisLabel = 'Time of Day (24hr)',
|
||
showCurrentTime = true,
|
||
tooltipMode = 'hover',
|
||
showHeader = false,
|
||
allowCollapse = false,
|
||
showModeDropdown = true
|
||
} = config;
|
||
|
||
// Create main container
|
||
const container = document.createElement('div');
|
||
container.className = 'timeline-editor-container';
|
||
|
||
// Create editor header with controls
|
||
const editorHeader = document.createElement('div');
|
||
editorHeader.className = 'editor-header-inline';
|
||
|
||
const graphTopControls = document.createElement('div');
|
||
graphTopControls.className = 'graph-top-controls';
|
||
|
||
// Day/period selector
|
||
const dayPeriodSelector = document.createElement('div');
|
||
dayPeriodSelector.className = 'day-period-selector';
|
||
dayPeriodSelector.id = `${idPrefix}-day-period-selector`;
|
||
dayPeriodSelector.style.display = 'none';
|
||
|
||
const dayPeriodButtons = document.createElement('div');
|
||
dayPeriodButtons.className = 'day-period-buttons';
|
||
dayPeriodButtons.id = `${idPrefix}-day-period-buttons`;
|
||
dayPeriodSelector.appendChild(dayPeriodButtons);
|
||
|
||
// Quick actions container
|
||
const graphQuickActions = document.createElement('div');
|
||
graphQuickActions.className = 'graph-quick-actions';
|
||
|
||
// Mode dropdown
|
||
const modeDropdown = document.createElement('select');
|
||
modeDropdown.id = `${idPrefix}-schedule-mode-dropdown`;
|
||
modeDropdown.className = 'mode-dropdown';
|
||
modeDropdown.title = 'Schedule mode';
|
||
modeDropdown.innerHTML = `
|
||
<option value="all_days">24hr</option>
|
||
<option value="5/2">Weekday</option>
|
||
<option value="individual">7 Day</option>
|
||
`;
|
||
if (showModeDropdown) {
|
||
graphQuickActions.appendChild(modeDropdown);
|
||
}
|
||
|
||
// Create action buttons
|
||
const buttonElements = {};
|
||
buttons.forEach(btnConfig => {
|
||
const btn = document.createElement('button');
|
||
btn.id = `${idPrefix}-${btnConfig.id}`;
|
||
btn.className = btnConfig.className || 'btn-quick-action';
|
||
btn.textContent = btnConfig.text;
|
||
btn.title = btnConfig.title || '';
|
||
if (btnConfig.disabled) btn.disabled = true;
|
||
if (btnConfig.onClick) btn.onclick = btnConfig.onClick;
|
||
buttonElements[btnConfig.id] = btn;
|
||
graphQuickActions.appendChild(btn);
|
||
});
|
||
|
||
graphTopControls.appendChild(dayPeriodSelector);
|
||
graphTopControls.appendChild(graphQuickActions);
|
||
editorHeader.appendChild(graphTopControls);
|
||
container.appendChild(editorHeader);
|
||
|
||
// Create timeline instance
|
||
const timeline = document.createElement('keyframe-timeline');
|
||
timeline.id = `${idPrefix}-timeline`;
|
||
timeline.style.width = '100%';
|
||
timeline.style.setProperty('--timeline-height', '260px');
|
||
timeline.duration = 24;
|
||
timeline.slots = 96;
|
||
timeline.minValue = minValue;
|
||
timeline.maxValue = maxValue;
|
||
timeline.snapValue = snapValue;
|
||
timeline.title = title;
|
||
timeline.yAxisLabel = yAxisLabel;
|
||
timeline.xAxisLabel = xAxisLabel;
|
||
timeline.showCurrentTime = showCurrentTime;
|
||
timeline.tooltipMode = tooltipMode;
|
||
timeline.showHeader = showHeader;
|
||
timeline.allowCollapse = allowCollapse;
|
||
|
||
container.appendChild(timeline);
|
||
|
||
return {
|
||
container,
|
||
timeline,
|
||
controls: {
|
||
modeDropdown,
|
||
dayPeriodSelector,
|
||
dayPeriodButtons,
|
||
buttons: buttonElements
|
||
}
|
||
};
|
||
}
|
||
|
||
// Create the schedule editor element
|
||
function createScheduleEditor() {
|
||
const editor = document.createElement('div');
|
||
editor.className = 'schedule-editor-inline';
|
||
editor.innerHTML = `
|
||
<div class="editor-header-inline">
|
||
<div class="graph-top-controls">
|
||
<div class="day-period-selector" id="day-period-selector" style="display: none;">
|
||
<div class="day-period-buttons" id="day-period-buttons">
|
||
<!-- Buttons will be populated based on schedule mode -->
|
||
</div>
|
||
</div>
|
||
<div class="graph-quick-actions">
|
||
<select id="schedule-mode-dropdown" class="mode-dropdown" title="Schedule mode">
|
||
<option value="all_days">24hr</option>
|
||
<option value="5/2">Weekday</option>
|
||
<option value="individual">7 Day</option>
|
||
</select>
|
||
<button id="graph-copy-btn" class="btn-quick-action" title="Copy schedule">Copy</button>
|
||
<button id="graph-paste-btn" class="btn-quick-action" title="Paste schedule">Paste</button>
|
||
<button id="graph-undo-btn" class="btn-quick-action" title="Undo last change">Undo</button>
|
||
<button id="advance-schedule-btn" class="btn-quick-action" title="Advance to next scheduled node">Advance</button>
|
||
<button id="save-schedule-btn" class="btn-quick-action btn-primary" title="Save schedule">Save</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="entity-status">
|
||
<div class="status-item">
|
||
<span class="status-label">Current Temp:</span>
|
||
<span id="current-temp" class="status-value">--°C</span>
|
||
</div>
|
||
<div class="status-item">
|
||
<span class="status-label">Target Temp:</span>
|
||
<span id="target-temp" class="status-value">--°C</span>
|
||
</div>
|
||
<div class="status-item">
|
||
<span class="status-label">Scheduled Temp:</span>
|
||
<span id="scheduled-temp" class="status-value">--°C</span>
|
||
</div>
|
||
<div class="status-item" id="current-hvac-mode-item" style="display: none;">
|
||
<span class="status-label">HVAC Mode:</span>
|
||
<span id="current-hvac-mode" class="status-value">--</span>
|
||
</div>
|
||
<div class="status-item" id="current-fan-mode-item" style="display: none;">
|
||
<span class="status-label">Fan Mode:</span>
|
||
<span id="current-fan-mode" class="status-value">--</span>
|
||
</div>
|
||
<div class="status-item" id="current-swing-mode-item" style="display: none;">
|
||
<span class="status-label">Swing Mode:</span>
|
||
<span id="current-swing-mode" class="status-value">--</span>
|
||
</div>
|
||
<div class="status-item" id="current-preset-mode-item" style="display: none;">
|
||
<span class="status-label">Preset Mode:</span>
|
||
<span id="current-preset-mode" class="status-value">--</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="graph-container">
|
||
<!-- Canvas timeline will be inserted here -->
|
||
</div>
|
||
|
||
<!-- Node Settings Panel (below timeline) -->
|
||
<div id="node-settings-panel" class="node-settings-panel" style="display: none;">
|
||
<div class="settings-header">
|
||
<div style="display: flex; gap: 8px; align-items: center;">
|
||
<button id="prev-node" class="btn-nav-node" title="Previous node">◀</button>
|
||
<div class="setting-item" style="margin: 0;">
|
||
<select id="node-time-input" class="mode-select" style="min-width: 100px;">
|
||
</select>
|
||
</div>
|
||
<button id="next-node" class="btn-nav-node" title="Next node">▶</button>
|
||
</div>
|
||
<div style="display: flex; gap: 8px; align-items: center;">
|
||
<button id="test-fire-event-btn" class="btn-secondary-outline" title="Test fire event with current active node" style="padding: 4px 10px; font-size: 0.8rem;">Test Event</button>
|
||
<button id="delete-node" class="btn-danger-outline" title="Delete selected node" style="padding: 4px 10px; font-size: 0.8rem;">Delete Node</button>
|
||
<button id="close-settings" class="btn-close-settings">✕</button>
|
||
</div>
|
||
</div>
|
||
<div id="climate-dialog-container"></div>
|
||
</div>
|
||
|
||
`;
|
||
return editor;
|
||
}
|
||
|
||
let climateDialogLoaded = false;
|
||
|
||
async function loadClimateDialog() {
|
||
if (climateDialogLoaded) return;
|
||
|
||
try {
|
||
const basePath = '/climate_scheduler/static';
|
||
const version = window.climateSchedulerVersion || Date.now();
|
||
const script = document.createElement('script');
|
||
script.type = 'module';
|
||
script.src = `${basePath}/climate-dialog.js?v=${version}`;
|
||
|
||
await new Promise((resolve, reject) => {
|
||
script.onload = resolve;
|
||
script.onerror = reject;
|
||
document.head.appendChild(script);
|
||
});
|
||
|
||
climateDialogLoaded = true;
|
||
} catch (error) {
|
||
console.error('Failed to load climate dialog:', error);
|
||
}
|
||
}
|
||
|
||
// Collapse all editors
|
||
function collapseAllEditors() {
|
||
const allEditors = getDocumentRoot().querySelectorAll('.schedule-editor-inline');
|
||
allEditors.forEach(editor => editor.remove());
|
||
|
||
// Remove all close buttons
|
||
const allCloseButtons = getDocumentRoot().querySelectorAll('.close-entity-btn');
|
||
allCloseButtons.forEach(btn => btn.remove());
|
||
|
||
const allCards = getDocumentRoot().querySelectorAll('.entity-card');
|
||
allCards.forEach(card => {
|
||
card.classList.remove('selected', 'expanded');
|
||
|
||
// Reset add to group button text to "+"
|
||
const addToGroupBtn = card.querySelector('.add-to-group-btn');
|
||
if (addToGroupBtn) {
|
||
addToGroupBtn.textContent = '+';
|
||
addToGroupBtn.style.padding = '4px 8px';
|
||
}
|
||
});
|
||
|
||
const allGroupContainers = getDocumentRoot().querySelectorAll('.group-container');
|
||
allGroupContainers.forEach(container => container.classList.remove('expanded'));
|
||
}
|
||
|
||
// Attach event listeners to editor elements (for dynamically created editors)
|
||
function attachEditorEventListeners(editorElement) {
|
||
|
||
|
||
// Note: Undo buttons are now linked via timeline.setUndoButton() in editGroupSchedule
|
||
|
||
// Ignore button (Unmonitor button for single-entity groups)
|
||
const ignoreBtn = editorElement.querySelector('#ignore-entity-btn');
|
||
if (ignoreBtn) {
|
||
ignoreBtn.onclick = async (event) => {
|
||
// For single-entity groups, get entity from the group
|
||
let entityIdToUnmonitor = null;
|
||
if (currentGroup) {
|
||
const groupData = allGroups[currentGroup];
|
||
if (groupData && groupData.entities && groupData.entities.length === 1) {
|
||
entityIdToUnmonitor = groupData.entities[0];
|
||
}
|
||
}
|
||
|
||
if (!entityIdToUnmonitor) {
|
||
console.error('No entity ID found to unmonitor');
|
||
return;
|
||
}
|
||
|
||
if (confirm(`Stop monitoring ${entityIdToUnmonitor}?\n\nUnmonitored entities will not be managed by the scheduler.`)) {
|
||
try {
|
||
await haAPI.setIgnored(entityIdToUnmonitor, true);
|
||
showToast(`${entityIdToUnmonitor} is now unmonitored`, 'success');
|
||
// Reload groups to update the display
|
||
await loadGroups();
|
||
// Close the editor
|
||
collapseAllEditors();
|
||
currentGroup = null;
|
||
} catch (error) {
|
||
console.error('Failed to unmonitor entity:', error);
|
||
showToast('Failed to unmonitor entity: ' + error.message, 'error');
|
||
}
|
||
}
|
||
};
|
||
}
|
||
|
||
// Copy schedule button
|
||
const copyBtn = editorElement.querySelector('#copy-schedule-btn');
|
||
if (copyBtn) {
|
||
copyBtn.onclick = () => {
|
||
copySchedule();
|
||
};
|
||
}
|
||
|
||
// Paste schedule button
|
||
const pasteBtn = editorElement.querySelector('#paste-schedule-btn');
|
||
if (pasteBtn) {
|
||
pasteBtn.onclick = () => {
|
||
pasteSchedule();
|
||
};
|
||
}
|
||
|
||
// Advance schedule button
|
||
const advanceBtn = editorElement.querySelector('#main-advance-schedule-btn, #advance-schedule-btn');
|
||
if (advanceBtn) {
|
||
// Function to update button state
|
||
const updateAdvanceButton = async () => {
|
||
if (currentGroup) {
|
||
// For groups, check if any entity has an active advance
|
||
const groupData = allGroups[currentGroup];
|
||
if (groupData && groupData.entities) {
|
||
let anyActive = false;
|
||
for (const entityId of groupData.entities) {
|
||
const status = await haAPI.getAdvanceStatus(entityId);
|
||
if (status && status.is_active) {
|
||
anyActive = true;
|
||
break;
|
||
}
|
||
}
|
||
if (anyActive) {
|
||
advanceBtn.textContent = 'Cancel Advance';
|
||
advanceBtn.title = 'Cancel advance override for all entities in group';
|
||
advanceBtn.dataset.isOverride = 'true';
|
||
} else {
|
||
advanceBtn.textContent = 'Advance';
|
||
advanceBtn.title = 'Advance all entities in group to next scheduled node';
|
||
advanceBtn.dataset.isOverride = 'false';
|
||
}
|
||
}
|
||
}
|
||
};
|
||
|
||
// Check initial state
|
||
updateAdvanceButton();
|
||
|
||
advanceBtn.onclick = async () => {
|
||
advanceBtn.disabled = true;
|
||
try {
|
||
const isOverride = advanceBtn.dataset.isOverride === 'true';
|
||
|
||
if (isOverride) {
|
||
// Cancel advance
|
||
if (currentGroup) {
|
||
// Cancel advance for all entities in group
|
||
const groupData = allGroups[currentGroup];
|
||
if (groupData && groupData.entities) {
|
||
for (const entityId of groupData.entities) {
|
||
await haAPI.cancelAdvance(entityId);
|
||
}
|
||
showToast('Advance canceled for all entities in group', 'success');
|
||
|
||
// Optimistically update button state immediately
|
||
advanceBtn.textContent = 'Advance';
|
||
advanceBtn.title = 'Advance all entities in group to next scheduled node';
|
||
advanceBtn.dataset.isOverride = 'false';
|
||
}
|
||
}
|
||
} else {
|
||
// Advance to next
|
||
if (currentGroup) {
|
||
await haAPI.advanceGroup(currentGroup);
|
||
showToast(`Advanced all entities in group to next scheduled node`, 'success');
|
||
|
||
// Optimistically update button state immediately
|
||
advanceBtn.textContent = 'Cancel Advance';
|
||
advanceBtn.title = 'Cancel advance override for all entities in group';
|
||
advanceBtn.dataset.isOverride = 'true';
|
||
}
|
||
}
|
||
|
||
// Update button state after action
|
||
await updateAdvanceButton();
|
||
|
||
// Small delay to ensure backend has updated
|
||
await new Promise(resolve => setTimeout(resolve, 500));
|
||
|
||
// Re-check after backend settles (important if updateAdvanceButton ran too early)
|
||
await updateAdvanceButton();
|
||
|
||
// Reload advance history to update graph
|
||
if (currentGroup) {
|
||
// For groups, reload history for first entity (since they share same schedule)
|
||
const groupData = allGroups[currentGroup];
|
||
if (groupData && groupData.entities && groupData.entities.length > 0) {
|
||
await loadAdvanceHistory(groupData.entities[0]);
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error('Failed to advance/cancel schedule:', error);
|
||
showToast('Failed: ' + error.message, 'error');
|
||
} finally {
|
||
advanceBtn.disabled = false;
|
||
}
|
||
};
|
||
}
|
||
|
||
// Clear advance history button
|
||
const clearHistoryBtn = editorElement.querySelector('#clear-advance-history-btn');
|
||
if (clearHistoryBtn) {
|
||
clearHistoryBtn.onclick = async () => {
|
||
clearHistoryBtn.disabled = true;
|
||
try {
|
||
if (currentGroup) {
|
||
// Clear history for all entities in group
|
||
const groupData = allGroups[currentGroup];
|
||
if (groupData && groupData.entities) {
|
||
for (const entityId of groupData.entities) {
|
||
await haAPI.clearAdvanceHistory(entityId);
|
||
}
|
||
// Reload graph with first entity
|
||
if (groupData.entities.length > 0) {
|
||
await loadAdvanceHistory(groupData.entities[0]);
|
||
}
|
||
showToast('Advance history cleared for all entities in group', 'success');
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error('Failed to clear advance history:', error);
|
||
showToast('Failed: ' + error.message, 'error');
|
||
} finally {
|
||
clearHistoryBtn.disabled = false;
|
||
}
|
||
};
|
||
}
|
||
|
||
// Clear schedule button
|
||
const clearBtn = editorElement.querySelector('#clear-schedule-btn');
|
||
if (clearBtn) {
|
||
clearBtn.onclick = async () => {
|
||
if (currentGroup) {
|
||
if (confirm(`Clear schedule for group "${currentGroup}"?`)) {
|
||
await clearScheduleForGroup(currentGroup);
|
||
}
|
||
}
|
||
};
|
||
}
|
||
|
||
// Schedule enabled toggle
|
||
const enabledToggle = editorElement.querySelector('#schedule-enabled');
|
||
if (enabledToggle) {
|
||
enabledToggle.onchange = () => saveSchedule();
|
||
}
|
||
|
||
// Save button
|
||
const saveBtn = editorElement.querySelector('#main-save-schedule-btn, #save-schedule-btn');
|
||
if (saveBtn) {
|
||
saveBtn.onclick = async () => {
|
||
saveBtn.disabled = true;
|
||
await saveSchedule();
|
||
// Visual feedback
|
||
const originalText = saveBtn.textContent;
|
||
saveBtn.textContent = 'Saved!';
|
||
setTimeout(() => {
|
||
saveBtn.textContent = originalText;
|
||
saveBtn.disabled = false;
|
||
}, 1000);
|
||
};
|
||
}
|
||
|
||
// Node settings panel close
|
||
const closeSettings = editorElement.querySelector('#close-settings');
|
||
if (closeSettings) {
|
||
closeSettings.onclick = () => {
|
||
const panel = editorElement.querySelector('#node-settings-panel');
|
||
if (panel) {
|
||
panel.style.display = 'none';
|
||
// Clear selected node highlight
|
||
const timeline = nodeSettingsTimeline || graph;
|
||
if (timeline) {
|
||
timeline.selectedNodeIndex = null;
|
||
timeline.render();
|
||
}
|
||
}
|
||
};
|
||
}
|
||
|
||
// Node navigation buttons
|
||
const prevNodeBtn = editorElement.querySelector('#prev-node');
|
||
const nextNodeBtn = editorElement.querySelector('#next-node');
|
||
|
||
if (prevNodeBtn) {
|
||
prevNodeBtn.onclick = () => {
|
||
const timeline = nodeSettingsTimeline || graph;
|
||
if (timeline && timeline.selectPrevious) {
|
||
timeline.selectPrevious();
|
||
}
|
||
};
|
||
}
|
||
|
||
if (nextNodeBtn) {
|
||
nextNodeBtn.onclick = () => {
|
||
const timeline = nodeSettingsTimeline || graph;
|
||
if (timeline && timeline.selectNext) {
|
||
timeline.selectNext();
|
||
}
|
||
};
|
||
}
|
||
|
||
// Time and temperature adjustment controls
|
||
const timeInput = editorElement.querySelector('#node-time-input');
|
||
const tempInput = editorElement.querySelector('#node-temp-input');
|
||
const timeUpBtn = editorElement.querySelector('#time-up');
|
||
const timeDownBtn = editorElement.querySelector('#time-down');
|
||
const tempUpBtn = editorElement.querySelector('#temp-up');
|
||
const tempDownBtn = editorElement.querySelector('#temp-down');
|
||
|
||
const getNodeSettingsState = () => {
|
||
const panel = editorElement.querySelector('#node-settings-panel');
|
||
if (!panel) return null;
|
||
|
||
const nodeIndex = parseInt(panel.dataset.nodeIndex);
|
||
const timeline = nodeSettingsTimeline || graph;
|
||
if (isNaN(nodeIndex) || !timeline) return null;
|
||
|
||
const keyframe = timeline.keyframes?.[nodeIndex];
|
||
if (!keyframe) return null;
|
||
|
||
return { panel, nodeIndex, timeline, keyframe };
|
||
};
|
||
|
||
const saveNodeSettingsUndoState = (timeline) => {
|
||
if (timeline && typeof timeline.saveUndoState === 'function') {
|
||
timeline.saveUndoState();
|
||
}
|
||
};
|
||
|
||
const updateNodeFromInputs = (captureUndo = false) => {
|
||
const state = getNodeSettingsState();
|
||
if (!state) return;
|
||
const { panel, nodeIndex, timeline, keyframe } = state;
|
||
|
||
if (captureUndo) {
|
||
saveNodeSettingsUndoState(timeline);
|
||
}
|
||
|
||
// Find the corresponding node in currentSchedule
|
||
const oldHours = Math.floor(keyframe.time);
|
||
const oldMinutes = Math.round((keyframe.time - oldHours) * 60);
|
||
const oldTimeStr = `${String(oldHours).padStart(2, '0')}:${String(oldMinutes).padStart(2, '0')}`;
|
||
|
||
const scheduleNode = currentSchedule.find(n => n.time === oldTimeStr);
|
||
|
||
// Update time
|
||
if (timeInput && timeInput.value) {
|
||
const [hours, minutes] = timeInput.value.split(':').map(Number);
|
||
const decimalTime = hours + (minutes / 60);
|
||
keyframe.time = decimalTime;
|
||
|
||
// Update schedule node time
|
||
if (scheduleNode) {
|
||
scheduleNode.time = timeInput.value;
|
||
}
|
||
}
|
||
|
||
// Update temperature
|
||
const tempNoChange = editorElement.querySelector('#temp-no-change');
|
||
if (tempNoChange && tempNoChange.checked) {
|
||
// Set noChange flag in schedule node
|
||
if (scheduleNode) {
|
||
scheduleNode.noChange = true;
|
||
const lockedTemp = resolveNoChangeLockedTemp(currentSchedule, scheduleNode);
|
||
if (lockedTemp !== null) {
|
||
scheduleNode.temp = lockedTemp;
|
||
keyframe.value = lockedTemp;
|
||
if (tempInput) {
|
||
tempInput.value = String(lockedTemp);
|
||
}
|
||
}
|
||
}
|
||
} else {
|
||
if (scheduleNode) {
|
||
scheduleNode.noChange = false;
|
||
}
|
||
if (tempInput && tempInput.value) {
|
||
const temp = parseFloat(tempInput.value);
|
||
if (!isNaN(temp)) {
|
||
const normalizedTemp = normalizeTemperature(temp, inputTempStep);
|
||
keyframe.value = normalizedTemp;
|
||
tempInput.value = String(normalizedTemp);
|
||
if (scheduleNode) {
|
||
scheduleNode.temp = normalizedTemp;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// Sort the schedule by time to maintain correct order
|
||
currentSchedule.sort((a, b) => {
|
||
const [aHours, aMinutes] = a.time.split(':').map(Number);
|
||
const [bHours, bMinutes] = b.time.split(':').map(Number);
|
||
const aDecimal = aHours + aMinutes / 60;
|
||
const bDecimal = bHours + bMinutes / 60;
|
||
return aDecimal - bDecimal;
|
||
});
|
||
|
||
// Rebuild keyframes from sorted schedule
|
||
const keyframes = scheduleNodesToKeyframes(currentSchedule);
|
||
timeline.keyframes = keyframes;
|
||
|
||
// Find the new index of the node we're editing (by time)
|
||
const newNodeIndex = currentSchedule.findIndex(n => n.time === timeInput.value);
|
||
if (newNodeIndex !== -1 && newNodeIndex !== nodeIndex) {
|
||
// Update the panel's nodeIndex to the new position
|
||
panel.dataset.nodeIndex = newNodeIndex;
|
||
|
||
// Close and reopen the panel to refresh the time dropdown
|
||
panel.style.display = 'none';
|
||
setTimeout(() => {
|
||
// Trigger a node selection event to reopen with updated dropdown
|
||
timeline.dispatchEvent(new CustomEvent('keyframe-selected', {
|
||
detail: {
|
||
index: newNodeIndex,
|
||
keyframe: timeline.keyframes[newNodeIndex]
|
||
},
|
||
bubbles: true
|
||
}));
|
||
}, 10);
|
||
}
|
||
|
||
saveSchedule();
|
||
};
|
||
|
||
if (timeInput) {
|
||
timeInput.addEventListener('change', () => updateNodeFromInputs(true));
|
||
}
|
||
|
||
if (tempInput) {
|
||
tempInput.addEventListener('input', () => updateNodeFromInputs(false)); // Immediate update while typing
|
||
tempInput.addEventListener('change', () => updateNodeFromInputs(true));
|
||
tempInput.addEventListener('blur', () => updateNodeFromInputs(false));
|
||
}
|
||
|
||
if (timeUpBtn) {
|
||
timeUpBtn.onclick = () => {
|
||
const state = getNodeSettingsState();
|
||
if (!state) return;
|
||
const { timeline, keyframe } = state;
|
||
|
||
saveNodeSettingsUndoState(timeline);
|
||
|
||
// Get old time string for finding scheduleNode
|
||
const oldHours = Math.floor(keyframe.time);
|
||
const oldMinutes = Math.round((keyframe.time - oldHours) * 60);
|
||
const oldTimeStr = `${String(oldHours).padStart(2, '0')}:${String(oldMinutes).padStart(2, '0')}`;
|
||
|
||
// Add 15 minutes to decimal time
|
||
let newDecimalTime = keyframe.time + 0.25; // 15 minutes = 0.25 hours
|
||
if (newDecimalTime >= 24) newDecimalTime -= 24; // Wrap at 24h
|
||
|
||
// Update keyframe time (decimal)
|
||
keyframe.time = newDecimalTime;
|
||
|
||
// Update corresponding scheduleNode time (string)
|
||
const newHours = Math.floor(newDecimalTime);
|
||
const newMinutes = Math.round((newDecimalTime - newHours) * 60);
|
||
const newTimeStr = `${String(newHours).padStart(2, '0')}:${String(newMinutes).padStart(2, '0')}`;
|
||
|
||
const scheduleNode = currentSchedule.find(n => n.time === oldTimeStr);
|
||
if (scheduleNode) {
|
||
scheduleNode.time = newTimeStr;
|
||
}
|
||
|
||
timeInput.value = newTimeStr;
|
||
|
||
// Update UI immediately
|
||
timeline.render();
|
||
|
||
// Save in background (deferred to next event loop tick)
|
||
setTimeout(() => {
|
||
timeline.keyframes = [...timeline.keyframes]; // Trigger reactivity
|
||
saveSchedule();
|
||
}, 0);
|
||
};
|
||
}
|
||
|
||
if (timeDownBtn) {
|
||
timeDownBtn.onclick = () => {
|
||
const state = getNodeSettingsState();
|
||
if (!state) return;
|
||
const { timeline, keyframe } = state;
|
||
|
||
saveNodeSettingsUndoState(timeline);
|
||
|
||
// Get old time string for finding scheduleNode
|
||
const oldHours = Math.floor(keyframe.time);
|
||
const oldMinutes = Math.round((keyframe.time - oldHours) * 60);
|
||
const oldTimeStr = `${String(oldHours).padStart(2, '0')}:${String(oldMinutes).padStart(2, '0')}`;
|
||
|
||
// Subtract 15 minutes from decimal time
|
||
let newDecimalTime = keyframe.time - 0.25; // 15 minutes = 0.25 hours
|
||
if (newDecimalTime < 0) newDecimalTime += 24; // Wrap at 0
|
||
|
||
// Update keyframe time (decimal)
|
||
keyframe.time = newDecimalTime;
|
||
|
||
// Update corresponding scheduleNode time (string)
|
||
const newHours = Math.floor(newDecimalTime);
|
||
const newMinutes = Math.round((newDecimalTime - newHours) * 60);
|
||
const newTimeStr = `${String(newHours).padStart(2, '0')}:${String(newMinutes).padStart(2, '0')}`;
|
||
|
||
const scheduleNode = currentSchedule.find(n => n.time === oldTimeStr);
|
||
if (scheduleNode) {
|
||
scheduleNode.time = newTimeStr;
|
||
}
|
||
|
||
timeInput.value = newTimeStr;
|
||
|
||
// Update UI immediately
|
||
timeline.render();
|
||
|
||
// Save in background (deferred to next event loop tick)
|
||
setTimeout(() => {
|
||
timeline.keyframes = [...timeline.keyframes]; // Trigger reactivity
|
||
saveSchedule();
|
||
}, 0);
|
||
};
|
||
}
|
||
|
||
if (tempUpBtn) {
|
||
tempUpBtn.onclick = () => {
|
||
const state = getNodeSettingsState();
|
||
if (!state) return;
|
||
const { timeline, keyframe } = state;
|
||
|
||
saveNodeSettingsUndoState(timeline);
|
||
|
||
// Check if no-change is enabled
|
||
const tempNoChange = editorElement.querySelector('#temp-no-change');
|
||
if (tempNoChange && tempNoChange.checked) return;
|
||
|
||
// Increment based on inputTempStep setting
|
||
keyframe.value = normalizeTemperature(keyframe.value + inputTempStep, inputTempStep);
|
||
|
||
// Update corresponding scheduleNode.temp
|
||
const hours = Math.floor(keyframe.time);
|
||
const minutes = Math.round((keyframe.time - hours) * 60);
|
||
const timeStr = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;
|
||
const scheduleNode = currentSchedule.find(n => n.time === timeStr);
|
||
if (scheduleNode) {
|
||
scheduleNode.temp = keyframe.value;
|
||
}
|
||
|
||
tempInput.value = String(keyframe.value);
|
||
|
||
// Update UI immediately
|
||
timeline.render();
|
||
|
||
// Save in background (deferred to next event loop tick)
|
||
setTimeout(() => {
|
||
timeline.keyframes = [...timeline.keyframes]; // Trigger reactivity
|
||
saveSchedule();
|
||
}, 0);
|
||
};
|
||
}
|
||
|
||
if (tempDownBtn) {
|
||
tempDownBtn.onclick = () => {
|
||
const state = getNodeSettingsState();
|
||
if (!state) return;
|
||
const { timeline, keyframe } = state;
|
||
|
||
saveNodeSettingsUndoState(timeline);
|
||
|
||
// Check if no-change is enabled
|
||
const tempNoChange = editorElement.querySelector('#temp-no-change');
|
||
if (tempNoChange && tempNoChange.checked) return;
|
||
|
||
// Decrement based on inputTempStep setting
|
||
keyframe.value = normalizeTemperature(keyframe.value - inputTempStep, inputTempStep);
|
||
|
||
// Update corresponding scheduleNode.temp
|
||
const hours = Math.floor(keyframe.time);
|
||
const minutes = Math.round((keyframe.time - hours) * 60);
|
||
const timeStr = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;
|
||
const scheduleNode = currentSchedule.find(n => n.time === timeStr);
|
||
if (scheduleNode) {
|
||
scheduleNode.temp = keyframe.value;
|
||
}
|
||
|
||
tempInput.value = String(keyframe.value);
|
||
|
||
// Update UI immediately
|
||
timeline.render();
|
||
|
||
// Save in background (deferred to next event loop tick)
|
||
setTimeout(() => {
|
||
timeline.keyframes = [...timeline.keyframes]; // Trigger reactivity
|
||
saveSchedule();
|
||
}, 0);
|
||
};
|
||
};
|
||
|
||
// Test fire event button (in node settings)
|
||
const testFireBtn = editorElement.querySelector('#test-fire-event-btn');
|
||
if (testFireBtn) {
|
||
testFireBtn.onclick = async () => {
|
||
const state = getNodeSettingsState();
|
||
if (!state || !currentGroup) return;
|
||
const { keyframe } = state;
|
||
|
||
const hours = Math.floor(keyframe.time);
|
||
const minutes = Math.round((keyframe.time - hours) * 60);
|
||
const timeStr = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;
|
||
|
||
const scheduleNode = currentSchedule.find(n =>
|
||
n.time === timeStr ||
|
||
Math.abs(timeStringToDecimalHours(n.time) - keyframe.time) < 0.01
|
||
) || {
|
||
time: timeStr,
|
||
temp: keyframe.value
|
||
};
|
||
|
||
const targetDay = currentDay || 'all_days';
|
||
|
||
testFireBtn.disabled = true;
|
||
try {
|
||
await haAPI.testFireEvent(currentGroup, scheduleNode, targetDay);
|
||
showToast(`Test event fired for node at ${scheduleNode.time}`, 'success');
|
||
} catch (error) {
|
||
console.error('Failed to test fire event:', error);
|
||
showToast('Failed to fire test event: ' + error.message, 'error');
|
||
} finally {
|
||
testFireBtn.disabled = false;
|
||
}
|
||
};
|
||
}
|
||
|
||
// Delete node button
|
||
const deleteNode = editorElement.querySelector('#delete-node');
|
||
if (deleteNode) {
|
||
deleteNode.onclick = () => {
|
||
const state = getNodeSettingsState();
|
||
if (state) {
|
||
const { panel, nodeIndex, timeline } = state;
|
||
|
||
if (timeline.keyframes.length <= 1) {
|
||
alert('Cannot delete the last node. A schedule must have at least one node.');
|
||
return;
|
||
}
|
||
|
||
if (!confirm('Delete this node?')) return;
|
||
|
||
saveNodeSettingsUndoState(timeline);
|
||
|
||
// Remove keyframe at index
|
||
timeline.keyframes = timeline.keyframes.filter((_, i) => i !== nodeIndex);
|
||
panel.style.display = 'none';
|
||
|
||
// Trigger keyframe-deleted event (canvas redraws automatically)
|
||
timeline.dispatchEvent(new CustomEvent('keyframe-deleted'));
|
||
|
||
saveSchedule();
|
||
}
|
||
};
|
||
}
|
||
|
||
// Handle no-change checkbox
|
||
const tempNoChange = editorElement.querySelector('#temp-no-change');
|
||
if (tempNoChange) {
|
||
tempNoChange.onchange = () => {
|
||
const state = getNodeSettingsState();
|
||
if (!state) return;
|
||
const { timeline, keyframe: node } = state;
|
||
|
||
saveNodeSettingsUndoState(timeline);
|
||
|
||
if (tempNoChange.checked) {
|
||
// Set to no change
|
||
node.noChange = true;
|
||
tempInput.disabled = true;
|
||
tempUpBtn.disabled = true;
|
||
tempDownBtn.disabled = true;
|
||
} else {
|
||
// Restore to normal temperature node
|
||
node.noChange = false;
|
||
if (node.temp === null || node.temp === undefined) {
|
||
node.temp = 20; // Default temp
|
||
}
|
||
tempInput.value = node.temp;
|
||
tempInput.disabled = false;
|
||
tempUpBtn.disabled = false;
|
||
tempDownBtn.disabled = false;
|
||
}
|
||
|
||
timeline.render();
|
||
saveSchedule();
|
||
};
|
||
}
|
||
|
||
// Auto-save node settings when dropdowns change
|
||
const hvacModeSelect = editorElement.querySelector('#node-hvac-mode');
|
||
const fanModeSelect = editorElement.querySelector('#node-fan-mode');
|
||
const swingModeSelect = editorElement.querySelector('#node-swing-mode');
|
||
const presetModeSelect = editorElement.querySelector('#node-preset-mode');
|
||
|
||
const autoSaveNodeSettings = async () => {
|
||
const state = getNodeSettingsState();
|
||
if (!state) return;
|
||
const { timeline, keyframe } = state;
|
||
|
||
// Find the corresponding node in currentSchedule by time
|
||
const hours = Math.floor(keyframe.time);
|
||
const minutes = Math.round((keyframe.time - hours) * 60);
|
||
const timeStr = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;
|
||
|
||
const scheduleNode = currentSchedule.find(n => n.time === timeStr);
|
||
if (!scheduleNode) return;
|
||
|
||
saveNodeSettingsUndoState(timeline);
|
||
|
||
// Update or delete properties based on dropdown values
|
||
if (hvacModeSelect && hvacModeSelect.closest('.setting-item').style.display !== 'none') {
|
||
const hvacMode = hvacModeSelect.value;
|
||
if (hvacMode) {
|
||
scheduleNode.hvac_mode = hvacMode;
|
||
} else {
|
||
delete scheduleNode.hvac_mode;
|
||
}
|
||
}
|
||
|
||
if (fanModeSelect && fanModeSelect.closest('.setting-item').style.display !== 'none') {
|
||
const fanMode = fanModeSelect.value;
|
||
if (fanMode) {
|
||
scheduleNode.fan_mode = fanMode;
|
||
} else {
|
||
delete scheduleNode.fan_mode;
|
||
}
|
||
}
|
||
|
||
if (swingModeSelect && swingModeSelect.closest('.setting-item').style.display !== 'none') {
|
||
const swingMode = swingModeSelect.value;
|
||
if (swingMode) {
|
||
scheduleNode.swing_mode = swingMode;
|
||
} else {
|
||
delete scheduleNode.swing_mode;
|
||
}
|
||
}
|
||
|
||
if (presetModeSelect && presetModeSelect.closest('.setting-item').style.display !== 'none') {
|
||
const presetMode = presetModeSelect.value;
|
||
if (presetMode) {
|
||
scheduleNode.preset_mode = presetMode;
|
||
} else {
|
||
delete scheduleNode.preset_mode;
|
||
}
|
||
}
|
||
|
||
// Update value fields
|
||
const valueAInput = editorElement.querySelector('#node-value-A');
|
||
const valueBInput = editorElement.querySelector('#node-value-B');
|
||
const valueCInput = editorElement.querySelector('#node-value-C');
|
||
|
||
if (valueAInput) {
|
||
const val = valueAInput.value.trim();
|
||
scheduleNode['A'] = val !== '' ? parseFloat(val) : null;
|
||
}
|
||
if (valueBInput) {
|
||
const val = valueBInput.value.trim();
|
||
scheduleNode['B'] = val !== '' ? parseFloat(val) : null;
|
||
}
|
||
if (valueCInput) {
|
||
const val = valueCInput.value.trim();
|
||
scheduleNode['C'] = val !== '' ? parseFloat(val) : null;
|
||
}
|
||
|
||
// Trigger save - check if using canvas timeline or old graph
|
||
if (timeline.notifyChange) {
|
||
// Old SVG graph has notifyChange method
|
||
timeline.render();
|
||
timeline.notifyChange(true);
|
||
} else {
|
||
// Canvas timeline - save directly
|
||
graph = timeline;
|
||
handleGraphChange({ detail: { force: true } }, true);
|
||
}
|
||
};
|
||
|
||
// Immediate UI update on input (no save)
|
||
const updateUIOnly = () => {
|
||
const state = getNodeSettingsState();
|
||
if (!state) return;
|
||
const { timeline, keyframe: node } = state;
|
||
|
||
// Update value fields for immediate visual feedback
|
||
const valueAInput = editorElement.querySelector('#node-value-A');
|
||
const valueBInput = editorElement.querySelector('#node-value-B');
|
||
const valueCInput = editorElement.querySelector('#node-value-C');
|
||
|
||
if (valueAInput) {
|
||
const val = valueAInput.value.trim();
|
||
const parsed = parseFloat(val);
|
||
if (!isNaN(parsed)) {
|
||
node['A'] = parsed;
|
||
}
|
||
}
|
||
if (valueBInput) {
|
||
const val = valueBInput.value.trim();
|
||
const parsed = parseFloat(val);
|
||
if (!isNaN(parsed)) {
|
||
node['B'] = parsed;
|
||
}
|
||
}
|
||
if (valueCInput) {
|
||
const val = valueCInput.value.trim();
|
||
const parsed = parseFloat(val);
|
||
if (!isNaN(parsed)) {
|
||
node['C'] = parsed;
|
||
}
|
||
}
|
||
|
||
// Only update UI, don't trigger save
|
||
timeline.render();
|
||
};
|
||
|
||
// Attach change listeners to all dropdowns and value inputs
|
||
if (hvacModeSelect) hvacModeSelect.addEventListener('change', autoSaveNodeSettings);
|
||
if (fanModeSelect) fanModeSelect.addEventListener('change', autoSaveNodeSettings);
|
||
if (swingModeSelect) swingModeSelect.addEventListener('change', autoSaveNodeSettings);
|
||
if (presetModeSelect) presetModeSelect.addEventListener('change', autoSaveNodeSettings);
|
||
|
||
const valueAInput = editorElement.querySelector('#node-value-A');
|
||
const valueBInput = editorElement.querySelector('#node-value-B');
|
||
const valueCInput = editorElement.querySelector('#node-value-C');
|
||
if (valueAInput) {
|
||
valueAInput.addEventListener('input', updateUIOnly); // Immediate UI update while typing
|
||
valueAInput.addEventListener('change', autoSaveNodeSettings); // Save when done
|
||
}
|
||
if (valueBInput) {
|
||
valueBInput.addEventListener('input', updateUIOnly); // Immediate UI update while typing
|
||
valueBInput.addEventListener('change', autoSaveNodeSettings); // Save when done
|
||
}
|
||
if (valueCInput) {
|
||
valueCInput.addEventListener('input', updateUIOnly); // Immediate UI update while typing
|
||
valueCInput.addEventListener('change', autoSaveNodeSettings); // Save when done
|
||
}
|
||
|
||
// Schedule mode dropdown
|
||
const modeDropdown = editorElement.querySelector('#main-schedule-mode-dropdown');
|
||
if (modeDropdown) {
|
||
modeDropdown.addEventListener('change', async (e) => {
|
||
const newMode = e.target.value;
|
||
await switchScheduleMode(newMode);
|
||
});
|
||
}
|
||
|
||
// Graph quick action buttons
|
||
const graphCopyBtn = editorElement.querySelector('#main-graph-copy-btn, #graph-copy-btn');
|
||
if (graphCopyBtn) {
|
||
graphCopyBtn.onclick = () => {
|
||
copySchedule();
|
||
};
|
||
}
|
||
|
||
const graphPasteBtn = editorElement.querySelector('#main-graph-paste-btn, #graph-paste-btn');
|
||
if (graphPasteBtn) {
|
||
graphPasteBtn.onclick = () => {
|
||
pasteSchedule();
|
||
};
|
||
}
|
||
}
|
||
|
||
// Clipboard for schedule copy/paste
|
||
let scheduleClipboard = null;
|
||
|
||
// Update paste button state based on clipboard
|
||
function updatePasteButtonState() {
|
||
const hasClipboard = scheduleClipboard && scheduleClipboard.length > 0;
|
||
|
||
// Update all paste buttons (handles both old IDs and new prefixed IDs)
|
||
const pasteButtons = [
|
||
'#paste-schedule-btn',
|
||
'#graph-paste-btn',
|
||
'#main-graph-paste-btn',
|
||
'#profile-graph-paste-btn',
|
||
'#default-graph-paste-btn'
|
||
];
|
||
|
||
pasteButtons.forEach(selector => {
|
||
const btn = getDocumentRoot().querySelector(selector);
|
||
if (btn) {
|
||
btn.disabled = !hasClipboard;
|
||
}
|
||
});
|
||
}
|
||
|
||
// Copy current schedule to clipboard
|
||
function copySchedule() {
|
||
const nodes = getGraphNodes();
|
||
if (nodes && nodes.length > 0) {
|
||
// Deep copy the nodes
|
||
scheduleClipboard = nodes.map(n => ({...n}));
|
||
|
||
// Enable paste buttons
|
||
updatePasteButtonState();
|
||
|
||
// Visual feedback
|
||
const copyBtn = getDocumentRoot().querySelector('#main-graph-copy-btn, #profile-graph-copy-btn, #default-graph-copy-btn, #copy-schedule-btn, #graph-copy-btn');
|
||
if (copyBtn) {
|
||
const originalText = copyBtn.textContent;
|
||
copyBtn.textContent = 'Copied!';
|
||
setTimeout(() => {
|
||
copyBtn.textContent = originalText;
|
||
}, 1000);
|
||
}
|
||
}
|
||
}
|
||
|
||
// Paste schedule from clipboard
|
||
async function pasteSchedule() {
|
||
if (!scheduleClipboard || scheduleClipboard.length === 0) {
|
||
return;
|
||
}
|
||
|
||
// Deep copy from clipboard
|
||
const nodes = scheduleClipboard.map(n => ({...n}));
|
||
|
||
// Update currentSchedule with pasted data
|
||
currentSchedule = nodes;
|
||
|
||
// Update graph
|
||
setGraphNodes(nodes);
|
||
|
||
// Save the pasted schedule
|
||
await saveSchedule();
|
||
|
||
// Visual feedback
|
||
const pasteBtn = getDocumentRoot().querySelector('#main-graph-paste-btn, #profile-graph-paste-btn, #default-graph-paste-btn, #paste-schedule-btn, #graph-paste-btn');
|
||
if (pasteBtn) {
|
||
const originalText = pasteBtn.textContent;
|
||
pasteBtn.textContent = 'Pasted!';
|
||
setTimeout(() => {
|
||
pasteBtn.textContent = originalText;
|
||
}, 1000);
|
||
}
|
||
}
|
||
|
||
// Clear schedule for an entity
|
||
async function clearScheduleForEntity(entityId) {
|
||
try {
|
||
// Reset to user-configured default schedule
|
||
const defaultSchedule = defaultScheduleSettings.map(node => ({...node}));
|
||
|
||
// Save default schedule to HA with current day and mode
|
||
await haAPI.setSchedule(entityId, defaultSchedule, currentDay, currentScheduleMode);
|
||
|
||
// Update local state
|
||
entitySchedules.set(entityId, defaultSchedule);
|
||
|
||
// Update graph with default schedule
|
||
if (graph) {
|
||
setGraphNodes(defaultSchedule);
|
||
}
|
||
|
||
// Update current schedule reference
|
||
currentSchedule = defaultSchedule;
|
||
|
||
showToast('Schedule cleared', 'success');
|
||
} catch (error) {
|
||
console.error('Failed to clear schedule:', error);
|
||
showToast('Failed to clear schedule. Please try again.', 'error');
|
||
}
|
||
}
|
||
|
||
// Clear schedule for a group
|
||
async function clearScheduleForGroup(groupName) {
|
||
try {
|
||
const groupData = allGroups[groupName];
|
||
if (!groupData) return;
|
||
|
||
// Reset to user-configured default schedule
|
||
const defaultSchedule = defaultScheduleSettings.map(node => ({...node}));
|
||
|
||
// Update group schedules based on schedule mode
|
||
const scheduleMode = groupData.schedule_mode || 'all_days';
|
||
|
||
// Save default schedule for each day based on schedule mode
|
||
if (scheduleMode === 'all_days') {
|
||
await haAPI.setGroupSchedule(groupName, defaultSchedule, 'all_days', scheduleMode);
|
||
groupData.schedules = { all_days: defaultSchedule };
|
||
} else if (scheduleMode === '5/2') {
|
||
await haAPI.setGroupSchedule(groupName, defaultSchedule.map(node => ({...node})), 'weekday', scheduleMode);
|
||
await haAPI.setGroupSchedule(groupName, defaultSchedule.map(node => ({...node})), 'weekend', scheduleMode);
|
||
groupData.schedules = {
|
||
weekday: defaultSchedule.map(node => ({...node})),
|
||
weekend: defaultSchedule.map(node => ({...node}))
|
||
};
|
||
} else if (scheduleMode === 'individual') {
|
||
const days = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];
|
||
for (const day of days) {
|
||
await haAPI.setGroupSchedule(groupName, defaultSchedule.map(node => ({...node})), day, scheduleMode);
|
||
}
|
||
groupData.schedules = {
|
||
mon: defaultSchedule.map(node => ({...node})),
|
||
tue: defaultSchedule.map(node => ({...node})),
|
||
wed: defaultSchedule.map(node => ({...node})),
|
||
thu: defaultSchedule.map(node => ({...node})),
|
||
fri: defaultSchedule.map(node => ({...node})),
|
||
sat: defaultSchedule.map(node => ({...node})),
|
||
sun: defaultSchedule.map(node => ({...node}))
|
||
};
|
||
}
|
||
|
||
// Update graph with default schedule for current day
|
||
if (graph) {
|
||
setGraphNodes(defaultSchedule);
|
||
}
|
||
|
||
// Update current schedule reference
|
||
currentSchedule = defaultSchedule;
|
||
|
||
showToast(`Cleared schedule for group "${groupName}"`, 'success');
|
||
} catch (error) {
|
||
console.error('Failed to clear group schedule:', error);
|
||
showToast('Failed to clear group schedule. Please try again.', 'error');
|
||
}
|
||
}
|
||
|
||
// Get schedule title with mode
|
||
function getScheduleTitle() {
|
||
if (currentScheduleMode === 'all_days') {
|
||
return 'Schedule (All Days)';
|
||
} else if (currentScheduleMode === '5/2') {
|
||
const dayName = currentDay === 'weekday' ? 'Weekdays' : 'Weekend';
|
||
return `Schedule (${dayName})`;
|
||
} else {
|
||
const dayNames = {
|
||
'mon': 'Monday',
|
||
'tue': 'Tuesday',
|
||
'wed': 'Wednesday',
|
||
'thu': 'Thursday',
|
||
'fri': 'Friday',
|
||
'sat': 'Saturday',
|
||
'sun': 'Sunday'
|
||
};
|
||
return `Schedule (${dayNames[currentDay] || currentDay})`;
|
||
}
|
||
}
|
||
|
||
// Update schedule mode UI to reflect current mode and day
|
||
function updateScheduleModeUI() {
|
||
// Update mode dropdown
|
||
const modeDropdown = getDocumentRoot().querySelector('#main-schedule-mode-dropdown');
|
||
if (modeDropdown) {
|
||
modeDropdown.value = currentScheduleMode;
|
||
}
|
||
|
||
// Update day/period selector above graph
|
||
updateGraphDaySelector();
|
||
|
||
// Update graph title to show current day
|
||
updateGraphTitle();
|
||
}
|
||
|
||
// Update the day/period selector above the graph
|
||
function updateGraphDaySelector() {
|
||
const dayPeriodSelector = getDocumentRoot().querySelector('#main-day-period-selector');
|
||
const dayPeriodButtons = getDocumentRoot().querySelector('#main-day-period-buttons');
|
||
|
||
if (!dayPeriodSelector || !dayPeriodButtons) return;
|
||
|
||
// Update profile dropdown
|
||
updateGraphProfileDropdown();
|
||
|
||
// Hide selector if in all_days mode
|
||
if (currentScheduleMode === 'all_days') {
|
||
dayPeriodSelector.style.display = 'none';
|
||
return;
|
||
}
|
||
|
||
// Show selector
|
||
dayPeriodSelector.style.display = 'block';
|
||
|
||
// Clear existing buttons
|
||
dayPeriodButtons.innerHTML = '';
|
||
|
||
// Create buttons based on mode
|
||
if (currentScheduleMode === 'individual') {
|
||
const days = [
|
||
{ value: 'mon', label: 'Mon' },
|
||
{ value: 'tue', label: 'Tue' },
|
||
{ value: 'wed', label: 'Wed' },
|
||
{ value: 'thu', label: 'Thu' },
|
||
{ value: 'fri', label: 'Fri' },
|
||
{ value: 'sat', label: 'Sat' },
|
||
{ value: 'sun', label: 'Sun' }
|
||
];
|
||
|
||
days.forEach(day => {
|
||
const btn = document.createElement('button');
|
||
btn.className = 'day-period-btn';
|
||
btn.textContent = day.label;
|
||
btn.dataset.day = day.value;
|
||
if (currentDay === day.value) {
|
||
btn.classList.add('active');
|
||
}
|
||
btn.addEventListener('click', async () => {
|
||
await switchDay(day.value);
|
||
});
|
||
dayPeriodButtons.appendChild(btn);
|
||
});
|
||
} else if (currentScheduleMode === '5/2') {
|
||
const periods = [
|
||
{ value: 'weekday', label: 'Weekday' },
|
||
{ value: 'weekend', label: 'Weekend' }
|
||
];
|
||
|
||
periods.forEach(period => {
|
||
const btn = document.createElement('button');
|
||
btn.className = 'day-period-btn';
|
||
btn.textContent = period.label;
|
||
btn.dataset.day = period.value;
|
||
if (currentDay === period.value) {
|
||
btn.classList.add('active');
|
||
}
|
||
btn.addEventListener('click', async () => {
|
||
await switchDay(period.value);
|
||
});
|
||
dayPeriodButtons.appendChild(btn);
|
||
});
|
||
}
|
||
}
|
||
|
||
// Update the profile dropdown above the graph
|
||
function updateGraphProfileDropdown() {
|
||
if (!currentGroup) return;
|
||
|
||
// Find the group header's profile dropdown
|
||
const groupContainer = getDocumentRoot().querySelector(`.group-container[data-group-name="${currentGroup}"]`);
|
||
if (!groupContainer) return;
|
||
|
||
const profileDropdown = groupContainer.querySelector('.group-profile-dropdown');
|
||
if (!profileDropdown) return;
|
||
|
||
// Get current active profile
|
||
const activeProfile = (allGroups[currentGroup]?.active_profile) || 'Default';
|
||
|
||
// Get all profiles
|
||
const profiles = (allGroups[currentGroup]?.profiles ? Object.keys(allGroups[currentGroup].profiles) : ['Default']);
|
||
|
||
// Update dropdown options
|
||
profileDropdown.innerHTML = '';
|
||
|
||
// Add placeholder option for profile editor dropdown
|
||
if (profileDropdown.id === 'profile-dropdown') {
|
||
const placeholderOption = document.createElement('option');
|
||
placeholderOption.value = '';
|
||
placeholderOption.textContent = 'Choose Profile to Edit';
|
||
placeholderOption.disabled = true;
|
||
placeholderOption.selected = true;
|
||
profileDropdown.appendChild(placeholderOption);
|
||
}
|
||
|
||
profiles.forEach(profileName => {
|
||
const option = document.createElement('option');
|
||
option.value = profileName;
|
||
option.textContent = profileName;
|
||
if (profileName === activeProfile) {
|
||
option.selected = true;
|
||
}
|
||
profileDropdown.appendChild(option);
|
||
});
|
||
|
||
// Don't set value for profile editor dropdown (keep placeholder selected)
|
||
if (profileDropdown.id !== 'profile-dropdown') {
|
||
// Ensure the active profile is selected for group selector
|
||
profileDropdown.value = activeProfile;
|
||
}
|
||
}
|
||
|
||
// Set previous day's last temperature for graph rendering
|
||
function setPreviousDayLastTempForGraph(groupData, currentDayParam) {
|
||
if (!graph || !groupData || !groupData.schedules) return;
|
||
|
||
const scheduleMode = groupData.schedule_mode || 'all_days';
|
||
|
||
// In all_days mode, previous day is same as current day
|
||
if (scheduleMode === 'all_days') {
|
||
graph.previousDayEndValue = null;
|
||
return;
|
||
}
|
||
|
||
// Determine previous day based on schedule mode
|
||
let previousDayKey = null;
|
||
|
||
if (scheduleMode === '5/2') {
|
||
// In weekday/weekend mode
|
||
if (currentDayParam === 'weekday') {
|
||
// Previous period is weekend
|
||
previousDayKey = 'weekend';
|
||
} else if (currentDayParam === 'weekend') {
|
||
// Previous period is weekday (Friday)
|
||
previousDayKey = 'weekday';
|
||
}
|
||
} else if (scheduleMode === 'individual') {
|
||
// In 7-day mode, get actual previous day
|
||
const days = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];
|
||
const currentIndex = days.indexOf(currentDayParam);
|
||
if (currentIndex !== -1) {
|
||
previousDayKey = days[(currentIndex - 1 + 7) % 7];
|
||
}
|
||
}
|
||
|
||
// Get previous day's schedule
|
||
if (previousDayKey && groupData.schedules[previousDayKey]) {
|
||
const previousDayNodes = groupData.schedules[previousDayKey];
|
||
if (previousDayNodes && previousDayNodes.length > 0) {
|
||
// Find the last node with a temperature (not noChange)
|
||
const nodesWithTemp = previousDayNodes.filter(n => !n.noChange && n.temp !== null && n.temp !== undefined);
|
||
if (nodesWithTemp.length > 0) {
|
||
const lastNode = nodesWithTemp[nodesWithTemp.length - 1];
|
||
// Set previous day end value for canvas timeline
|
||
graph.previousDayEndValue = lastNode.temp || lastNode.value;
|
||
return;
|
||
}
|
||
}
|
||
}
|
||
|
||
// If no previous day data found, clear it
|
||
graph.previousDayEndValue = null;
|
||
}
|
||
|
||
// Get previous day's last temperature value (for canvas graph)
|
||
function getPreviousDayLastTemp(groupData, currentDayParam) {
|
||
if (!groupData || !groupData.schedules) return null;
|
||
|
||
const scheduleMode = groupData.schedule_mode || 'all_days';
|
||
|
||
// In all_days mode, previous day is same as current day
|
||
if (scheduleMode === 'all_days') {
|
||
return null;
|
||
}
|
||
|
||
// Determine previous day based on schedule mode
|
||
let previousDayKey = null;
|
||
|
||
if (scheduleMode === '5/2') {
|
||
// In weekday/weekend mode
|
||
if (currentDayParam === 'weekday') {
|
||
previousDayKey = 'weekend';
|
||
} else if (currentDayParam === 'weekend') {
|
||
previousDayKey = 'weekday';
|
||
}
|
||
} else if (scheduleMode === 'individual') {
|
||
// In 7-day mode, get actual previous day
|
||
const days = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];
|
||
const currentIndex = days.indexOf(currentDayParam);
|
||
if (currentIndex !== -1) {
|
||
previousDayKey = days[(currentIndex - 1 + 7) % 7];
|
||
}
|
||
}
|
||
|
||
// Get previous day's schedule
|
||
if (previousDayKey && groupData.schedules[previousDayKey]) {
|
||
const previousDayNodes = groupData.schedules[previousDayKey];
|
||
if (previousDayNodes && previousDayNodes.length > 0) {
|
||
// Find the last node with a temperature (not noChange)
|
||
const nodesWithTemp = previousDayNodes.filter(n => !n.noChange && n.temp !== null && n.temp !== undefined);
|
||
if (nodesWithTemp.length > 0) {
|
||
const lastNode = nodesWithTemp[nodesWithTemp.length - 1];
|
||
return lastNode.temp;
|
||
}
|
||
}
|
||
}
|
||
|
||
return null;
|
||
}
|
||
|
||
// Update graph title to show which day is being edited
|
||
function updateGraphTitle() {
|
||
// Update timeline title
|
||
if (graph && graph.title !== undefined) {
|
||
graph.title = getScheduleTitle();
|
||
}
|
||
}
|
||
|
||
// Switch to a different schedule mode
|
||
async function switchScheduleMode(newMode) {
|
||
if (!currentGroup) return;
|
||
|
||
const previousMode = currentScheduleMode;
|
||
const previousDay = currentDay;
|
||
const previousNodes = cloneScheduleNodes(currentSchedule);
|
||
const scheduleSnapshot = allGroups[currentGroup]?.schedules
|
||
? JSON.parse(JSON.stringify(allGroups[currentGroup].schedules))
|
||
: {};
|
||
|
||
currentScheduleMode = newMode;
|
||
|
||
// Determine destination day preserving current editing context when possible
|
||
currentDay = resolveModeTransitionDay(previousMode, previousDay, newMode);
|
||
|
||
// Save the mode change to the active profile in backend
|
||
if (currentGroup) {
|
||
const nodes = getModeTransitionSeedNodes({
|
||
schedules: scheduleSnapshot,
|
||
previousMode,
|
||
previousDay,
|
||
newMode,
|
||
newDay: currentDay,
|
||
currentNodes: previousNodes
|
||
});
|
||
|
||
// Save without explicit profile_name so backend resolves active global profile authoritatively
|
||
await haAPI.setGroupSchedule(currentGroup, nodes, currentDay, currentScheduleMode);
|
||
|
||
// Update local group data
|
||
if (allGroups[currentGroup]) {
|
||
allGroups[currentGroup].schedule_mode = currentScheduleMode;
|
||
}
|
||
}
|
||
|
||
// Update UI
|
||
updateScheduleModeUI();
|
||
|
||
// Reload group data from backend to get latest saved state
|
||
if (currentGroup) {
|
||
const result = await haAPI.getGroups();
|
||
allGroups = normalizeGroupsPayload(result);
|
||
|
||
const groupData = allGroups[currentGroup];
|
||
if (!groupData) return;
|
||
|
||
// Load nodes for the selected day
|
||
let nodes = [];
|
||
if (groupData.schedules && groupData.schedules[currentDay]) {
|
||
nodes = groupData.schedules[currentDay];
|
||
} else if (currentDay === "weekday" && groupData.schedules && groupData.schedules["mon"]) {
|
||
// If weekday key doesn't exist, try loading from Monday
|
||
nodes = groupData.schedules["mon"];
|
||
} else if (currentDay === "weekend" && groupData.schedules && groupData.schedules["sat"]) {
|
||
// If weekend key doesn't exist, try loading from Saturday
|
||
nodes = groupData.schedules["sat"];
|
||
} else if (groupData.nodes) {
|
||
// Backward compatibility
|
||
nodes = groupData.nodes;
|
||
}
|
||
|
||
currentSchedule = nodes.length > 0 ? nodes.map(n => ({...n})) : [];
|
||
|
||
// Set loading flag to prevent auto-save during graph update
|
||
isLoadingSchedule = true;
|
||
//
|
||
|
||
// Update graph with new nodes
|
||
setGraphNodes(currentSchedule);
|
||
|
||
// Set previous day's last temperature for graph rendering
|
||
setPreviousDayLastTempForGraph(groupData, currentDay);
|
||
|
||
// Clear loading flag after a delay
|
||
setTimeout(() => {
|
||
isLoadingSchedule = false;
|
||
flushPendingSaveIfNeeded();
|
||
//
|
||
}, 100);
|
||
|
||
// Clear editing profile and hide indicator when returning to active profile
|
||
editingProfile = null;
|
||
showEditingProfileIndicator(null, groupData.active_profile);
|
||
|
||
// Update scheduled temp display
|
||
updateScheduledTemp();
|
||
}
|
||
}
|
||
|
||
// Switch to a different day
|
||
async function switchDay(day) {
|
||
if (!currentGroup) return;
|
||
|
||
// Switching day - no need to save since auto-save already persisted changes
|
||
currentDay = day;
|
||
|
||
// Update UI first
|
||
updateScheduleModeUI();
|
||
|
||
// Reload schedule for selected day - update in place without recreating editor
|
||
if (currentGroup) {
|
||
// Use cached group data - no need to fetch from backend since auto-save keeps it in sync
|
||
const groupData = allGroups[currentGroup];
|
||
if (!groupData) return;
|
||
|
||
// Load nodes for the selected day
|
||
let nodes = [];
|
||
if (groupData.schedules && groupData.schedules[currentDay]) {
|
||
nodes = groupData.schedules[currentDay];
|
||
} else if (currentDay === "weekday" && groupData.schedules && groupData.schedules["mon"]) {
|
||
// If weekday key doesn't exist, try loading from Monday
|
||
nodes = groupData.schedules["mon"];
|
||
} else if (currentDay === "weekend" && groupData.schedules && groupData.schedules["sat"]) {
|
||
// If weekend key doesn't exist, try loading from Saturday
|
||
nodes = groupData.schedules["sat"];
|
||
} else if (groupData.nodes) {
|
||
// Backward compatibility
|
||
nodes = groupData.nodes;
|
||
}
|
||
|
||
currentSchedule = nodes.length > 0 ? nodes.map(n => ({...n})) : [];
|
||
|
||
// Set loading flag to prevent auto-save during graph update
|
||
isLoadingSchedule = true;
|
||
|
||
// Update graph with new nodes
|
||
setGraphNodes(currentSchedule);
|
||
|
||
// Set previous day's last temperature for graph rendering
|
||
setPreviousDayLastTempForGraph(groupData, currentDay);
|
||
|
||
// Clear loading flag after a delay
|
||
setTimeout(() => {
|
||
isLoadingSchedule = false;
|
||
flushPendingSaveIfNeeded();
|
||
}, 100);
|
||
|
||
// Clear editing profile and hide indicator when returning to active profile
|
||
editingProfile = null;
|
||
showEditingProfileIndicator(null, groupData.active_profile);
|
||
|
||
// Update scheduled temp display
|
||
updateScheduledTemp();
|
||
}
|
||
}
|
||
|
||
// Load history data for current day
|
||
async function loadHistoryData(entityId) {
|
||
try {
|
||
// Get start of today in server timezone
|
||
const nowServer = getServerNow(serverTimeZone);
|
||
const today = new Date(Date.UTC(nowServer.getFullYear(), nowServer.getMonth(), nowServer.getDate(), 0, 0, 0, 0));
|
||
|
||
// Get current time
|
||
const now = new Date();
|
||
|
||
// Fetch history from Home Assistant
|
||
const historyResult = await haAPI.getHistory(entityId, today, now);
|
||
|
||
if (!historyResult || !historyResult[entityId]) {
|
||
setGraphHistoryData([]);
|
||
return;
|
||
}
|
||
|
||
// Process history data - extract current_temperature
|
||
const historyData = [];
|
||
const stateHistory = historyResult[entityId] || [];
|
||
|
||
for (const state of stateHistory) {
|
||
// Handle both abbreviated format (a, lu) and full format (attributes, last_updated)
|
||
const attributes = state.a || state.attributes;
|
||
const lastUpdated = state.lu || state.last_updated;
|
||
|
||
if (!attributes) continue;
|
||
|
||
const temp = parseFloat(attributes.current_temperature);
|
||
if (!isNaN(temp)) {
|
||
// Parse last_updated - could be ISO string, Unix timestamp, or Unix timestamp in milliseconds
|
||
let stateTime;
|
||
if (typeof lastUpdated === 'string') {
|
||
stateTime = new Date(lastUpdated);
|
||
} else if (typeof lastUpdated === 'number') {
|
||
// Check if it's in seconds or milliseconds
|
||
stateTime = lastUpdated > 10000000000
|
||
? new Date(lastUpdated)
|
||
: new Date(lastUpdated * 1000);
|
||
} else {
|
||
continue; // Skip if we can't parse the time
|
||
}
|
||
|
||
const hours = stateTime.getHours().toString().padStart(2, '0');
|
||
const minutes = stateTime.getMinutes().toString().padStart(2, '0');
|
||
const timeStr = `${hours}:${minutes}`;
|
||
|
||
historyData.push({
|
||
time: timeStr,
|
||
temp: temp
|
||
});
|
||
}
|
||
}
|
||
|
||
setGraphHistoryData([historyData]);
|
||
} catch (error) {
|
||
console.error('Failed to load history data:', error);
|
||
setGraphHistoryData([]);
|
||
}
|
||
}
|
||
|
||
// Load history data for multiple entities (used for groups)
|
||
async function loadGroupHistoryData(entityIds) {
|
||
if (!entityIds || entityIds.length === 0) {
|
||
setGraphHistoryData([]);
|
||
return;
|
||
}
|
||
|
||
try {
|
||
// Get start of today in server timezone
|
||
const nowServer = getServerNow(serverTimeZone);
|
||
const today = new Date(Date.UTC(nowServer.getFullYear(), nowServer.getMonth(), nowServer.getDate(), 0, 0, 0, 0));
|
||
|
||
// Get current time
|
||
const now = new Date();
|
||
|
||
const allHistoryData = [];
|
||
const defaultColors = ['#2196f3', '#4caf50', '#ff9800', '#e91e63', '#9c27b0', '#00bcd4', '#ffeb3b', '#795548'];
|
||
|
||
// Load history for each entity
|
||
for (let i = 0; i < entityIds.length; i++) {
|
||
const entityId = entityIds[i];
|
||
const entity = climateEntities.find(e => e.entity_id === entityId);
|
||
|
||
try {
|
||
const historyResult = await haAPI.getHistory(entityId, today, now);
|
||
|
||
if (historyResult && historyResult[entityId]) {
|
||
const historyData = [];
|
||
const stateHistory = historyResult[entityId] || [];
|
||
|
||
for (const state of stateHistory) {
|
||
// Handle both abbreviated format (a, lu) and full format (attributes, last_updated)
|
||
const attributes = state.a || state.attributes;
|
||
const lastUpdated = state.lu || state.last_updated;
|
||
|
||
if (!attributes) continue;
|
||
|
||
const temp = parseFloat(attributes.current_temperature);
|
||
if (!isNaN(temp)) {
|
||
// Parse last_updated - could be ISO string, Unix timestamp, or Unix timestamp in milliseconds
|
||
let utcTime;
|
||
if (typeof lastUpdated === 'string') {
|
||
utcTime = new Date(lastUpdated);
|
||
} else if (typeof lastUpdated === 'number') {
|
||
// Check if it's in seconds or milliseconds
|
||
utcTime = lastUpdated > 10000000000
|
||
? new Date(lastUpdated)
|
||
: new Date(lastUpdated * 1000);
|
||
} else {
|
||
continue; // Skip if we can't parse the time
|
||
}
|
||
|
||
// Convert to server timezone
|
||
const stateTime = utcToServerDate(utcTime, serverTimeZone);
|
||
const hours = stateTime.getHours().toString().padStart(2, '0');
|
||
const minutes = stateTime.getMinutes().toString().padStart(2, '0');
|
||
const timeStr = `${hours}:${minutes}`;
|
||
|
||
historyData.push({
|
||
time: timeStr,
|
||
temp: temp
|
||
});
|
||
}
|
||
}
|
||
|
||
if (historyData.length > 0) {
|
||
allHistoryData.push({
|
||
entityId: entityId,
|
||
entityName: entity?.attributes?.friendly_name || entityId,
|
||
data: historyData,
|
||
color: defaultColors[i % defaultColors.length]
|
||
});
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error(`Failed to load history for ${entityId}:`, error);
|
||
}
|
||
}
|
||
|
||
setGraphHistoryData(allHistoryData);
|
||
} catch (error) {
|
||
console.error('Failed to load group history data:', error);
|
||
setGraphHistoryData([]);
|
||
}
|
||
}
|
||
|
||
// Save schedule (auto-save, no alerts)
|
||
async function saveSchedule() {
|
||
// Don't save if we're in the middle of loading a schedule
|
||
if (isLoadingSchedule) {
|
||
pendingSaveNeeded = true;
|
||
return;
|
||
}
|
||
|
||
// If a save is already in progress, mark pending and return
|
||
if (isSaveInProgress) {
|
||
console.warn('[SAVE] Save in progress, marking pending save needed.');
|
||
pendingSaveNeeded = true;
|
||
return;
|
||
}
|
||
|
||
// Clear any existing debounce timeout
|
||
if (saveTimeout) {
|
||
clearTimeout(saveTimeout);
|
||
saveTimeout = null;
|
||
}
|
||
|
||
// Debounce: wait for changes to settle before saving
|
||
saveTimeout = setTimeout(() => {
|
||
saveTimeout = null;
|
||
performSave();
|
||
}, SAVE_DEBOUNCE_MS);
|
||
}
|
||
|
||
// Perform the actual save operation (called after debounce delay)
|
||
async function performSave() {
|
||
const saveStartTime = performance.now();
|
||
|
||
// Set save in progress flag
|
||
isSaveInProgress = true;
|
||
|
||
// Check if we're editing a group schedule
|
||
if (currentGroup) {
|
||
try {
|
||
const nodes = getGraphNodes();
|
||
const enabledToggle = getDocumentRoot().querySelector('#schedule-enabled');
|
||
const enabled = enabledToggle
|
||
? enabledToggle.checked
|
||
: (allGroups[currentGroup]?.enabled !== false);
|
||
|
||
// Check if we're editing a non-active profile
|
||
const groupData = allGroups[currentGroup];
|
||
const activeProfile = groupData ? groupData.active_profile : null;
|
||
const targetProfile = editingProfile && editingProfile !== activeProfile ? editingProfile : null;
|
||
|
||
// Save to group schedule with day and mode
|
||
const setGroupScheduleStart = performance.now();
|
||
await haAPI.setGroupSchedule(currentGroup, nodes, currentDay, currentScheduleMode, targetProfile || undefined);
|
||
|
||
// Update local cache immediately with the saved data
|
||
if (allGroups[currentGroup]) {
|
||
if (!allGroups[currentGroup].schedules) {
|
||
allGroups[currentGroup].schedules = {};
|
||
}
|
||
allGroups[currentGroup].schedules[currentDay] = JSON.parse(JSON.stringify(nodes));
|
||
}
|
||
|
||
// Update enabled state (do not fail schedule save if this secondary call fails)
|
||
try {
|
||
if (enabled) {
|
||
await haAPI.enableGroup(currentGroup);
|
||
} else {
|
||
await haAPI.disableGroup(currentGroup);
|
||
}
|
||
} catch (enableError) {
|
||
console.error('[SAVE] Schedule saved but failed to update enabled state:', {
|
||
error: enableError,
|
||
groupName: currentGroup,
|
||
enabled
|
||
});
|
||
showToast('Schedule saved, but failed to update enabled state.', 'warning');
|
||
}
|
||
|
||
// Update local state
|
||
if (allGroups[currentGroup]) {
|
||
allGroups[currentGroup].enabled = enabled;
|
||
}
|
||
} catch (error) {
|
||
console.error('[SAVE] Failed to auto-save group schedule:', {
|
||
error,
|
||
errorCode: error?.code,
|
||
errorMessage: error?.message,
|
||
translationKey: error?.translation_key,
|
||
groupName: currentGroup,
|
||
timeSinceSaveStart: (performance.now() - saveStartTime).toFixed(2) + 'ms'
|
||
});
|
||
showToast('Failed to save schedule. Check browser console for details.', 'error');
|
||
} finally {
|
||
isSaveInProgress = false;
|
||
|
||
// If another save was requested while this one was in progress, trigger it now
|
||
if (pendingSaveNeeded) {
|
||
pendingSaveNeeded = false;
|
||
// Call saveSchedule (not performSave) to go through debouncing again
|
||
saveSchedule();
|
||
}
|
||
}
|
||
return;
|
||
}
|
||
|
||
// Note: Entity-only save path removed - all schedules (including single entities)
|
||
// are now saved as groups via set_group_schedule above.
|
||
isSaveInProgress = false;
|
||
}
|
||
|
||
// Handle graph changes - auto-save and sync if needed
|
||
async function handleGraphChange(event, force = false) {
|
||
// If event has detail.force, use that
|
||
if (event && event.detail && event.detail.force !== undefined) {
|
||
force = event.detail.force;
|
||
}
|
||
|
||
updateScheduledTemp();
|
||
const savePromise = saveSchedule();
|
||
await savePromise;
|
||
return savePromise;
|
||
|
||
// Check if we need to update thermostats immediately
|
||
const now = new Date();
|
||
const currentTime = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`;
|
||
const nodes = getGraphNodes();
|
||
|
||
// Find active node
|
||
const sorted = [...nodes].sort((a, b) => timeToMinutes(a.time) - timeToMinutes(b.time));
|
||
const currentMinutes = timeToMinutes(currentTime);
|
||
|
||
let activeNode = null;
|
||
for (const node of sorted) {
|
||
if (timeToMinutes(node.time) <= currentMinutes) {
|
||
activeNode = node;
|
||
} else {
|
||
break;
|
||
}
|
||
}
|
||
if (!activeNode && sorted.length > 0) {
|
||
activeNode = sorted[sorted.length - 1];
|
||
}
|
||
|
||
if (!activeNode) return;
|
||
|
||
const scheduledTemp = activeNode.temp;
|
||
|
||
// Handle group schedule updates
|
||
if (currentGroup) {
|
||
updateAllGroupMemberScheduledTemps();
|
||
|
||
// Update all thermostats in the group
|
||
const groupData = allGroups[currentGroup];
|
||
if (groupData && groupData.entities) {
|
||
for (const entityId of groupData.entities) {
|
||
const entity = climateEntities.find(e => e.entity_id === entityId);
|
||
if (!entity) continue;
|
||
|
||
const currentTarget = entity.attributes.temperature;
|
||
|
||
// If scheduled temp is different from current target, update immediately
|
||
if (Math.abs(scheduledTemp - currentTarget) > 0.1) {
|
||
try {
|
||
await haAPI.callService('climate', 'set_temperature', {
|
||
entity_id: entityId,
|
||
temperature: scheduledTemp
|
||
});
|
||
// Temperature updated
|
||
} catch (error) {
|
||
console.error(`Failed to update ${entityId}:`, error);
|
||
}
|
||
}
|
||
|
||
// Apply HVAC mode if specified and entity supports it
|
||
if (activeNode.hvac_mode && entity.attributes.hvac_modes &&
|
||
entity.attributes.hvac_modes.includes(activeNode.hvac_mode)) {
|
||
const currentHvacMode = entity.state || entity.attributes.hvac_mode;
|
||
if (force || currentHvacMode !== activeNode.hvac_mode) {
|
||
// HVAC mode updated
|
||
try {
|
||
await haAPI.callService('climate', 'set_hvac_mode', {
|
||
entity_id: entityId,
|
||
hvac_mode: activeNode.hvac_mode
|
||
});
|
||
} catch (error) {
|
||
console.error(`Failed to set HVAC mode for ${entityId}:`, error);
|
||
}
|
||
}
|
||
}
|
||
|
||
// Apply fan mode if specified and entity supports it
|
||
if (activeNode.fan_mode && entity.attributes.fan_modes &&
|
||
entity.attributes.fan_modes.includes(activeNode.fan_mode)) {
|
||
if (force || entity.attributes.fan_mode !== activeNode.fan_mode) {
|
||
// Fan mode updated
|
||
try {
|
||
await haAPI.callService('climate', 'set_fan_mode', {
|
||
entity_id: entityId,
|
||
fan_mode: activeNode.fan_mode
|
||
});
|
||
} catch (error) {
|
||
console.error(`Failed to set fan mode for ${entityId}:`, error);
|
||
}
|
||
}
|
||
}
|
||
|
||
// Apply swing mode if specified and entity supports it
|
||
if (activeNode.swing_mode && entity.attributes.swing_modes &&
|
||
entity.attributes.swing_modes.includes(activeNode.swing_mode)) {
|
||
if (force || entity.attributes.swing_mode !== activeNode.swing_mode) {
|
||
// Swing mode updated
|
||
try {
|
||
await haAPI.callService('climate', 'set_swing_mode', {
|
||
entity_id: entityId,
|
||
swing_mode: activeNode.swing_mode
|
||
});
|
||
} catch (error) {
|
||
console.error(`Failed to set swing mode for ${entityId}:`, error);
|
||
}
|
||
}
|
||
}
|
||
|
||
// Apply preset mode if specified and entity supports it
|
||
if (activeNode.preset_mode && entity.attributes.preset_modes &&
|
||
entity.attributes.preset_modes.includes(activeNode.preset_mode)) {
|
||
if (force || entity.attributes.preset_mode !== activeNode.preset_mode) {
|
||
// Preset mode updated
|
||
try {
|
||
await haAPI.callService('climate', 'set_preset_mode', {
|
||
entity_id: entityId,
|
||
preset_mode: activeNode.preset_mode
|
||
});
|
||
} catch (error) {
|
||
console.error(`Failed to set preset mode for ${entityId}:`, error);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
return;
|
||
}
|
||
|
||
// Handle individual entity schedule updates
|
||
// Get current entity
|
||
const entity = climateEntities.find(e => e.entity_id === currentEntityId);
|
||
if (!entity) return;
|
||
|
||
const currentTarget = entity.attributes.temperature;
|
||
|
||
// If scheduled temp is different from current target, update immediately
|
||
if (Math.abs(scheduledTemp - currentTarget) > 0.1) {
|
||
try {
|
||
await haAPI.callService('climate', 'set_temperature', {
|
||
entity_id: currentEntityId,
|
||
temperature: scheduledTemp
|
||
});
|
||
} catch (error) {
|
||
console.error('Failed to update thermostat:', error);
|
||
}
|
||
}
|
||
|
||
// Apply HVAC mode if specified
|
||
if (activeNode.hvac_mode) {
|
||
const currentHvacMode = entity.state || entity.attributes.hvac_mode;
|
||
if (force || currentHvacMode !== activeNode.hvac_mode) {
|
||
try {
|
||
await haAPI.callService('climate', 'set_hvac_mode', {
|
||
entity_id: currentEntityId,
|
||
hvac_mode: activeNode.hvac_mode
|
||
});
|
||
} catch (error) {
|
||
console.error('Failed to set HVAC mode:', error);
|
||
}
|
||
}
|
||
}
|
||
|
||
// Apply fan mode if specified
|
||
if (activeNode.fan_mode && (force || entity.attributes.fan_mode !== activeNode.fan_mode)) {
|
||
try {
|
||
await haAPI.callService('climate', 'set_fan_mode', {
|
||
entity_id: currentEntityId,
|
||
fan_mode: activeNode.fan_mode
|
||
});
|
||
} catch (error) {
|
||
console.error('Failed to set fan mode:', error);
|
||
}
|
||
}
|
||
|
||
// Apply swing mode if specified
|
||
if (activeNode.swing_mode && (force || entity.attributes.swing_mode !== activeNode.swing_mode)) {
|
||
try {
|
||
await haAPI.callService('climate', 'set_swing_mode', {
|
||
entity_id: currentEntityId,
|
||
swing_mode: activeNode.swing_mode
|
||
});
|
||
} catch (error) {
|
||
console.error('Failed to set swing mode:', error);
|
||
}
|
||
}
|
||
|
||
// Apply preset mode if specified
|
||
if (activeNode.preset_mode && (force || entity.attributes.preset_mode !== activeNode.preset_mode)) {
|
||
try {
|
||
await haAPI.callService('climate', 'set_preset_mode', {
|
||
entity_id: currentEntityId,
|
||
preset_mode: activeNode.preset_mode
|
||
});
|
||
} catch (error) {
|
||
console.error('Failed to set preset mode:', error);
|
||
}
|
||
}
|
||
}
|
||
|
||
// Handle keyframe-timeline changes (canvas graph)
|
||
function handleKeyframeTimelineChange(event) {
|
||
if (isLoadingSchedule) return;
|
||
|
||
const timeline = event.currentTarget;
|
||
const keyframes = timeline.keyframes || [];
|
||
|
||
// Convert keyframes to schedule nodes
|
||
const nodes = keyframesToScheduleNodes(keyframes);
|
||
currentSchedule = nodes;
|
||
|
||
// Trigger auto-save with debouncing
|
||
if (saveTimeout) {
|
||
clearTimeout(saveTimeout);
|
||
}
|
||
|
||
saveTimeout = setTimeout(() => {
|
||
saveSchedule();
|
||
}, SAVE_DEBOUNCE_MS);
|
||
}
|
||
|
||
// Update scheduled temperature display
|
||
function updateScheduledTemp() {
|
||
const scheduledTempEl = getDocumentRoot().querySelector('#scheduled-temp');
|
||
|
||
// Element may not exist if entity card is collapsed
|
||
if (!scheduledTempEl) return;
|
||
|
||
const now = new Date();
|
||
const currentTime = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`;
|
||
const nodes = getGraphNodes();
|
||
|
||
if (nodes.length > 0) {
|
||
const temp = interpolateTemperature(nodes, currentTime);
|
||
scheduledTempEl.textContent = (Number.isFinite(temp)) ? `${temp.toFixed(1)}${temperatureUnit}` : 'No Change';
|
||
} else {
|
||
scheduledTempEl.textContent = '--';
|
||
}
|
||
}
|
||
|
||
// Time and temperature interpolation functions are now in utils.js
|
||
|
||
// Update entity status display
|
||
function updateEntityStatus(entity) {
|
||
if (!entity) return;
|
||
|
||
const currentTempEl = getDocumentRoot().querySelector('#current-temp');
|
||
const targetTempEl = getDocumentRoot().querySelector('#target-temp');
|
||
|
||
// Elements may not exist if entity card is collapsed
|
||
if (!currentTempEl || !targetTempEl) return;
|
||
|
||
const currentTemp = entity.attributes.current_temperature;
|
||
const targetTemp = entity.attributes.temperature;
|
||
|
||
currentTempEl.textContent = (Number.isFinite(currentTemp)) ? `${currentTemp.toFixed(1)}${temperatureUnit}` : '--';
|
||
targetTempEl.textContent = (Number.isFinite(targetTemp)) ? `${targetTemp.toFixed(1)}${temperatureUnit}` : '--';
|
||
|
||
// Update HVAC mode if available
|
||
const hvacModeEl = getDocumentRoot().querySelector('#current-hvac-mode');
|
||
const hvacModeItem = getDocumentRoot().querySelector('#current-hvac-mode-item');
|
||
if (hvacModeEl && hvacModeItem) {
|
||
// HVAC mode is in entity.state for climate entities, not attributes
|
||
const hvacMode = entity.state || entity.attributes.hvac_mode;
|
||
if (hvacMode && hvacMode !== 'unknown' && hvacMode !== 'unavailable') {
|
||
hvacModeEl.textContent = hvacMode.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase());
|
||
hvacModeItem.style.display = '';
|
||
} else {
|
||
hvacModeItem.style.display = 'none';
|
||
}
|
||
}
|
||
|
||
// Update fan mode if available
|
||
const fanModeEl = getDocumentRoot().querySelector('#current-fan-mode');
|
||
const fanModeItem = getDocumentRoot().querySelector('#current-fan-mode-item');
|
||
if (fanModeEl && fanModeItem) {
|
||
if (entity.attributes.fan_mode) {
|
||
fanModeEl.textContent = entity.attributes.fan_mode.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase());
|
||
fanModeItem.style.display = '';
|
||
} else {
|
||
fanModeItem.style.display = 'none';
|
||
}
|
||
}
|
||
|
||
// Update swing mode if available
|
||
const swingModeEl = getDocumentRoot().querySelector('#current-swing-mode');
|
||
const swingModeItem = getDocumentRoot().querySelector('#current-swing-mode-item');
|
||
if (swingModeEl && swingModeItem) {
|
||
if (entity.attributes.swing_mode) {
|
||
swingModeEl.textContent = entity.attributes.swing_mode.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase());
|
||
swingModeItem.style.display = '';
|
||
} else {
|
||
swingModeItem.style.display = 'none';
|
||
}
|
||
}
|
||
|
||
// Update preset mode if available
|
||
const presetModeEl = getDocumentRoot().querySelector('#current-preset-mode');
|
||
const presetModeItem = getDocumentRoot().querySelector('#current-preset-mode-item');
|
||
if (presetModeEl && presetModeItem) {
|
||
if (entity.attributes.preset_mode) {
|
||
presetModeEl.textContent = entity.attributes.preset_mode.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase());
|
||
presetModeItem.style.display = '';
|
||
} else {
|
||
presetModeItem.style.display = 'none';
|
||
}
|
||
}
|
||
}
|
||
|
||
// Handle state updates from Home Assistant
|
||
function handleStateUpdate(data) {
|
||
const entityId = data.entity_id;
|
||
const newState = data.new_state;
|
||
|
||
if (!entityId || !newState || !entityId.startsWith('climate.')) return;
|
||
|
||
// Update entity in list
|
||
const entityIndex = climateEntities.findIndex(e => e.entity_id === entityId);
|
||
if (entityIndex !== -1) {
|
||
climateEntities[entityIndex] = newState;
|
||
// Don't re-render entire list, just update the card if visible
|
||
updateEntityCard(entityId, newState);
|
||
}
|
||
|
||
// Update current entity status if selected
|
||
if (entityId === currentEntityId) {
|
||
updateEntityStatus(newState);
|
||
}
|
||
|
||
// Update group members table if showing group and entity is in the group
|
||
if (currentGroup) {
|
||
const groupData = allGroups[currentGroup];
|
||
if (groupData && groupData.entities && groupData.entities.includes(entityId)) {
|
||
updateGroupMemberRow(entityId, newState);
|
||
}
|
||
}
|
||
}
|
||
|
||
// Handle log entries from backend
|
||
// Update a single entity card without re-rendering the entire list
|
||
function updateEntityCard(entityId, entityState) {
|
||
// Find the card in either the active or ignored entities list
|
||
const card = getDocumentRoot().querySelector(`.entity-card[data-entity-id="${entityId}"]`);
|
||
if (!card) return;
|
||
|
||
// Update current temperature
|
||
const currentTempEl = card.querySelector('.current-temp');
|
||
if (currentTempEl) {
|
||
const ct = entityState.attributes.current_temperature;
|
||
currentTempEl.textContent = Number.isFinite(ct) ? `${ct.toFixed(1)}${temperatureUnit}` : '--';
|
||
}
|
||
|
||
// Update target temperature
|
||
const targetTempEl = card.querySelector('.target-temp');
|
||
if (targetTempEl) {
|
||
const tt = entityState.attributes.temperature;
|
||
targetTempEl.textContent = Number.isFinite(tt) ? `${tt.toFixed(1)}${temperatureUnit}` : '--';
|
||
}
|
||
}
|
||
|
||
// Update a single row in the group members table
|
||
function updateGroupMemberRow(entityId, entityState) {
|
||
const row = getDocumentRoot().querySelector(`.group-members-row[data-entity-id="${entityId}"]`);
|
||
if (!row) return;
|
||
|
||
const currentCell = row.children[1];
|
||
const targetCell = row.children[2];
|
||
const scheduledCell = row.children[3];
|
||
|
||
if (currentCell) {
|
||
const currentTemp = entityState.attributes?.current_temperature;
|
||
currentCell.textContent = (Number.isFinite(currentTemp)) ? `${currentTemp.toFixed(1)}${temperatureUnit}` : '--';
|
||
}
|
||
|
||
if (targetCell) {
|
||
const targetTemp = entityState.attributes?.temperature;
|
||
targetCell.textContent = (Number.isFinite(targetTemp)) ? `${targetTemp.toFixed(1)}${temperatureUnit}` : '--';
|
||
}
|
||
|
||
// Update scheduled temp if we're viewing a group
|
||
if (scheduledCell && currentGroup && graph) {
|
||
const now = new Date();
|
||
const currentTime = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`;
|
||
const nodes = getGraphNodes();
|
||
|
||
if (nodes.length > 0) {
|
||
const scheduledTemp = interpolateTemperature(nodes, currentTime);
|
||
scheduledCell.textContent = (Number.isFinite(scheduledTemp)) ? `${scheduledTemp.toFixed(1)}${temperatureUnit}` : 'No Change';
|
||
} else {
|
||
scheduledCell.textContent = '--';
|
||
}
|
||
}
|
||
}
|
||
|
||
// Update all rows in the group members table with current scheduled temperature
|
||
function updateAllGroupMemberScheduledTemps() {
|
||
if (!currentGroup || !graph) return;
|
||
|
||
const rows = getDocumentRoot().querySelectorAll('.group-members-row');
|
||
if (rows.length === 0) return;
|
||
|
||
const now = new Date();
|
||
const currentTime = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`;
|
||
const nodes = getGraphNodes();
|
||
|
||
rows.forEach(row => {
|
||
const scheduledCell = row.children[3];
|
||
if (scheduledCell) {
|
||
if (nodes.length > 0) {
|
||
const scheduledTemp = interpolateTemperature(nodes, currentTime);
|
||
scheduledCell.textContent = (Number.isFinite(scheduledTemp)) ? `${scheduledTemp.toFixed(1)}${temperatureUnit}` : 'No Change';
|
||
} else {
|
||
scheduledCell.textContent = '--';
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// Toggle entity inclusion in scheduler
|
||
async function toggleEntityInclusion(entityId, include) {
|
||
try {
|
||
if (include) {
|
||
// Check if entity already has a schedule in backend
|
||
let existingSchedule = null;
|
||
try {
|
||
const result = await haAPI.getSchedule(entityId);
|
||
const schedule = result?.response || result;
|
||
if (schedule && schedule.nodes && schedule.nodes.length > 0) {
|
||
existingSchedule = schedule.nodes;
|
||
}
|
||
} catch (err) {
|
||
}
|
||
|
||
// Use existing schedule or create default
|
||
const scheduleToUse = existingSchedule || [];
|
||
|
||
// Add to local state immediately with a unique copy for each entity
|
||
entitySchedules.set(entityId, JSON.parse(JSON.stringify(scheduleToUse)));
|
||
|
||
// If no existing schedule, persist the default to HA with current day
|
||
if (!existingSchedule) {
|
||
const now = new Date();
|
||
const weekday = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'][now.getDay()];
|
||
haAPI.setSchedule(entityId, scheduleToUse, 'all_days', 'all_days').catch(err => {
|
||
console.error('Failed to persist schedule to HA:', err);
|
||
});
|
||
}
|
||
|
||
// Always enable the schedule (whether it existed or not)
|
||
haAPI.enableSchedule(entityId).catch(err => {
|
||
console.error('Failed to enable schedule in HA:', err);
|
||
});
|
||
|
||
// Re-render to move to active list
|
||
await renderEntityList();
|
||
} else {
|
||
// When disabling, just disable it but keep the schedule data
|
||
entitySchedules.delete(entityId);
|
||
|
||
// Disable the schedule in HA (but don't clear the data)
|
||
haAPI.disableSchedule(entityId).catch(err => {
|
||
console.error('Failed to disable schedule in HA:', err);
|
||
});
|
||
|
||
// If it was selected, deselect it
|
||
if (currentEntityId === entityId) {
|
||
currentEntityId = null;
|
||
const editorEl = getDocumentRoot().querySelector('#schedule-editor');
|
||
if (editorEl) {
|
||
editorEl.style.display = 'none';
|
||
}
|
||
}
|
||
|
||
// Re-render to move to disabled list
|
||
await renderEntityList();
|
||
}
|
||
} catch (error) {
|
||
console.error('Failed to toggle entity inclusion:', error);
|
||
}
|
||
}
|
||
|
||
// Set up event listeners
|
||
function setupEventListeners() {
|
||
// Schedule mode radio buttons
|
||
const modeRadios = getDocumentRoot().querySelectorAll('input[name="schedule-mode"]');
|
||
modeRadios.forEach(radio => {
|
||
radio.addEventListener('change', async (e) => {
|
||
if (e.target.checked) {
|
||
const newMode = e.target.value;
|
||
await switchScheduleMode(newMode);
|
||
}
|
||
});
|
||
});
|
||
|
||
// Day selector buttons (for individual mode)
|
||
const dayButtons = getDocumentRoot().querySelectorAll('.day-btn');
|
||
dayButtons.forEach(btn => {
|
||
btn.addEventListener('click', async () => {
|
||
const day = btn.dataset.day;
|
||
await switchDay(day);
|
||
});
|
||
});
|
||
|
||
// Weekday selector buttons (for 5/2 mode)
|
||
const weekdayButtons = getDocumentRoot().querySelectorAll('.weekday-btn');
|
||
weekdayButtons.forEach(btn => {
|
||
btn.addEventListener('click', async () => {
|
||
const day = btn.dataset.day;
|
||
await switchDay(day);
|
||
});
|
||
});
|
||
|
||
// Menu button and dropdown
|
||
const menuButton = getDocumentRoot().querySelector('#menu-button');
|
||
const dropdownMenu = getDocumentRoot().querySelector('#dropdown-menu');
|
||
|
||
if (menuButton && dropdownMenu) {
|
||
menuButton.addEventListener('click', (e) => {
|
||
e.stopPropagation();
|
||
dropdownMenu.style.display = dropdownMenu.style.display === 'none' ? 'block' : 'none';
|
||
});
|
||
|
||
// Close menu when clicking outside
|
||
document.addEventListener('click', (e) => {
|
||
if (!menuButton.contains(e.target) && !dropdownMenu.contains(e.target)) {
|
||
dropdownMenu.style.display = 'none';
|
||
}
|
||
});
|
||
}
|
||
|
||
// Menu items
|
||
const refreshEntitiesMenu = getDocumentRoot().querySelector('#refresh-entities-menu');
|
||
if (refreshEntitiesMenu) {
|
||
refreshEntitiesMenu.addEventListener('click', () => {
|
||
if (dropdownMenu) dropdownMenu.style.display = 'none';
|
||
loadClimateEntities();
|
||
});
|
||
}
|
||
|
||
const syncAllMenu = getDocumentRoot().querySelector('#sync-all-menu');
|
||
if (syncAllMenu) {
|
||
syncAllMenu.addEventListener('click', () => {
|
||
if (dropdownMenu) dropdownMenu.style.display = 'none';
|
||
syncAllTemperatures();
|
||
});
|
||
}
|
||
|
||
const reloadIntegrationMenu = getDocumentRoot().querySelector('#reload-integration-menu');
|
||
if (reloadIntegrationMenu) {
|
||
reloadIntegrationMenu.addEventListener('click', async () => {
|
||
if (dropdownMenu) dropdownMenu.style.display = 'none';
|
||
try {
|
||
await haAPI.callService('climate_scheduler', 'reload_integration', {});
|
||
showToast('Integration reloaded successfully', 'success');
|
||
} catch (error) {
|
||
console.error('Failed to reload integration:', error);
|
||
showToast('Failed to reload integration: ' + error.message, 'error');
|
||
}
|
||
});
|
||
}
|
||
|
||
// Toggle ignored entities section
|
||
const toggleIgnored = getDocumentRoot().querySelector('#toggle-ignored');
|
||
const ignoredList = getDocumentRoot().querySelector('#ignored-entity-list');
|
||
const ignoredContainer = getDocumentRoot().querySelector('#ignored-container');
|
||
if (toggleIgnored && ignoredList && ignoredContainer) {
|
||
toggleIgnored.addEventListener('click', () => {
|
||
const toggleIcon = toggleIgnored.querySelector('.group-toggle-icon');
|
||
|
||
if (ignoredList.style.display === 'none') {
|
||
ignoredList.style.display = 'flex';
|
||
ignoredContainer.classList.remove('collapsed');
|
||
ignoredContainer.classList.add('expanded');
|
||
if (toggleIcon) toggleIcon.style.transform = 'rotate(0deg)';
|
||
} else {
|
||
ignoredList.style.display = 'none';
|
||
ignoredContainer.classList.remove('expanded');
|
||
ignoredContainer.classList.add('collapsed');
|
||
if (toggleIcon) toggleIcon.style.transform = 'rotate(-90deg)';
|
||
}
|
||
});
|
||
}
|
||
|
||
// Toggle global profile editor section
|
||
const toggleGlobalProfiles = getDocumentRoot().querySelector('#toggle-global-profiles');
|
||
const globalProfileList = getDocumentRoot().querySelector('#global-profile-list');
|
||
const globalProfileContainer = getDocumentRoot().querySelector('#global-profile-container');
|
||
if (toggleGlobalProfiles && globalProfileList && globalProfileContainer) {
|
||
toggleGlobalProfiles.addEventListener('click', async () => {
|
||
const toggleIcon = toggleGlobalProfiles.querySelector('.group-toggle-icon');
|
||
|
||
if (globalProfileList.style.display === 'none') {
|
||
globalProfileList.style.display = 'block';
|
||
globalProfileContainer.classList.remove('collapsed');
|
||
globalProfileContainer.classList.add('expanded');
|
||
if (toggleIcon) toggleIcon.style.transform = 'rotate(0deg)';
|
||
await refreshGlobalProfileEditor();
|
||
} else {
|
||
globalProfileList.style.display = 'none';
|
||
globalProfileContainer.classList.remove('expanded');
|
||
globalProfileContainer.classList.add('collapsed');
|
||
if (toggleIcon) toggleIcon.style.transform = 'rotate(-90deg)';
|
||
}
|
||
});
|
||
}
|
||
|
||
// Filter ignored entities
|
||
const ignoredFilter = getDocumentRoot().querySelector('#ignored-filter');
|
||
if (ignoredFilter) {
|
||
ignoredFilter.addEventListener('input', () => {
|
||
renderEntityList();
|
||
});
|
||
}
|
||
|
||
// NOTE: The following elements are now dynamically created in inline editors
|
||
// and have their event listeners attached in attachEditorEventListeners():
|
||
// - #clear-schedule-btn
|
||
// - #schedule-enabled
|
||
// - #close-settings
|
||
// - #delete-node
|
||
// - #save-node-settings
|
||
|
||
// Group management event listeners
|
||
|
||
// Create group button
|
||
const createGroupBtn = getDocumentRoot().querySelector('#create-group-btn');
|
||
if (createGroupBtn) {
|
||
createGroupBtn.addEventListener('click', () => {
|
||
const modal = getDocumentRoot().querySelector('#create-group-modal');
|
||
if (modal) {
|
||
modal.style.display = 'flex';
|
||
}
|
||
const nameInput = getDocumentRoot().querySelector('#new-group-name');
|
||
if (nameInput) {
|
||
nameInput.value = '';
|
||
}
|
||
});
|
||
}
|
||
|
||
// Create group modal - cancel
|
||
const createGroupCancel = getDocumentRoot().querySelector('#create-group-cancel');
|
||
if (createGroupCancel) {
|
||
createGroupCancel.addEventListener('click', () => {
|
||
const modal = getDocumentRoot().querySelector('#create-group-modal');
|
||
if (modal) modal.style.display = 'none';
|
||
});
|
||
}
|
||
|
||
// Create group modal - confirm
|
||
const createGroupConfirm = getDocumentRoot().querySelector('#create-group-confirm');
|
||
if (createGroupConfirm) {
|
||
createGroupConfirm.addEventListener('click', async () => {
|
||
const groupName = getDocumentRoot().querySelector('#new-group-name').value.trim();
|
||
if (!groupName) {
|
||
alert('Please enter a group name');
|
||
return;
|
||
}
|
||
|
||
if (allGroups[groupName]) {
|
||
alert('A group with this name already exists');
|
||
return;
|
||
}
|
||
|
||
try {
|
||
await haAPI.createGroup(groupName);
|
||
|
||
// Close modal
|
||
const modal = getDocumentRoot().querySelector('#create-group-modal');
|
||
if (modal) modal.style.display = 'none';
|
||
|
||
// Reload groups
|
||
await loadGroups();
|
||
} catch (error) {
|
||
console.error('Failed to create group:', error);
|
||
alert('Failed to create group');
|
||
}
|
||
});
|
||
}
|
||
|
||
// Add to group modal - cancel
|
||
const addToGroupCancel = getDocumentRoot().querySelector('#add-to-group-cancel');
|
||
if (addToGroupCancel) {
|
||
addToGroupCancel.addEventListener('click', () => {
|
||
const modal = getDocumentRoot().querySelector('#add-to-group-modal');
|
||
if (modal) {
|
||
modal.style.display = 'none';
|
||
delete modal.dataset.currentGroup;
|
||
delete modal.dataset.isMove;
|
||
}
|
||
});
|
||
}
|
||
|
||
// Add to group modal - confirm
|
||
const addToGroupConfirm = getDocumentRoot().querySelector('#add-to-group-confirm');
|
||
if (addToGroupConfirm) {
|
||
addToGroupConfirm.addEventListener('click', async () => {
|
||
const modal = getDocumentRoot().querySelector('#add-to-group-modal');
|
||
const entityId = modal ? modal.dataset.entityId : null;
|
||
const currentGroupName = modal ? modal.dataset.currentGroup : null;
|
||
const isMove = modal ? modal.dataset.isMove === 'true' : false;
|
||
const isUnmonitoredAdd = modal ? modal.dataset.isUnmonitoredAdd === 'true' : false;
|
||
const selectElement = getDocumentRoot().querySelector('#add-to-group-select');
|
||
const newGroupInput = getDocumentRoot().querySelector('#new-group-name-inline');
|
||
|
||
let groupName = selectElement ? selectElement.value : null;
|
||
const newGroupName = newGroupInput ? newGroupInput.value.trim() : '';
|
||
|
||
// Check if user wants to create a new group
|
||
if (newGroupName) {
|
||
if (allGroups[newGroupName]) {
|
||
alert('A group with this name already exists. Please select it from the dropdown or use a different name.');
|
||
return;
|
||
}
|
||
groupName = newGroupName;
|
||
|
||
try {
|
||
// Create the new group first
|
||
await haAPI.createGroup(groupName);
|
||
} catch (error) {
|
||
console.error('Failed to create group:', error);
|
||
alert('Failed to create group');
|
||
return;
|
||
}
|
||
}
|
||
|
||
if (!groupName) {
|
||
alert('Please select or create a group');
|
||
return;
|
||
}
|
||
|
||
try {
|
||
// If moving, remove from current group first
|
||
if (isMove && currentGroupName) {
|
||
await haAPI.removeFromGroup(currentGroupName, entityId);
|
||
}
|
||
|
||
// Add to new group
|
||
// Note: This works for both monitored and unmonitored entities
|
||
// - For unmonitored entities, it adds them directly to the group
|
||
// - For monitored entities in other groups, it moves them
|
||
await haAPI.addToGroup(groupName, entityId);
|
||
|
||
// Close modal and clear move state
|
||
if (modal) {
|
||
modal.style.display = 'none';
|
||
delete modal.dataset.currentGroup;
|
||
delete modal.dataset.isMove;
|
||
delete modal.dataset.isUnmonitoredAdd;
|
||
}
|
||
|
||
// Close any open editors to prevent stale data
|
||
collapseAllEditors();
|
||
|
||
// Reload groups
|
||
await loadGroups();
|
||
|
||
// Reload entity list (entity should disappear from active/disabled)
|
||
await renderEntityList();
|
||
|
||
// Show appropriate message
|
||
if (isMove && currentGroupName) {
|
||
showToast(`Moved entity from ${currentGroupName} to ${groupName}`, 'success');
|
||
} else if (isUnmonitoredAdd) {
|
||
showToast(`Added entity to ${groupName}`, 'success');
|
||
} else {
|
||
showToast(`Added entity to ${groupName}`, 'success');
|
||
}
|
||
} catch (error) {
|
||
console.error('Failed to add entity to group:', error);
|
||
alert('Failed to add entity to group');
|
||
}
|
||
});
|
||
}
|
||
|
||
// Close modals when clicking outside
|
||
const createGroupModal = getDocumentRoot().querySelector('#create-group-modal');
|
||
if (createGroupModal) {
|
||
createGroupModal.addEventListener('click', (e) => {
|
||
if (e.target.id === 'create-group-modal') {
|
||
createGroupModal.style.display = 'none';
|
||
}
|
||
});
|
||
}
|
||
|
||
const addToGroupModal = getDocumentRoot().querySelector('#add-to-group-modal');
|
||
if (addToGroupModal) {
|
||
addToGroupModal.addEventListener('click', (e) => {
|
||
if (e.target.id === 'add-to-group-modal') {
|
||
addToGroupModal.style.display = 'none';
|
||
}
|
||
});
|
||
}
|
||
|
||
// Convert temperature button
|
||
const convertTempBtn = getDocumentRoot().querySelector('#convert-temperature-btn');
|
||
if (convertTempBtn) {
|
||
convertTempBtn.addEventListener('click', () => {
|
||
const modal = getDocumentRoot().querySelector('#convert-temperature-modal');
|
||
if (modal) {
|
||
// Determine the likely current unit from stored settings
|
||
const likelyCurrentUnit = storedTemperatureUnit || temperatureUnit || '°C';
|
||
|
||
// Pre-select FROM unit (current)
|
||
const fromCelsiusRadio = getDocumentRoot().querySelector('#convert-from-celsius');
|
||
const fromFahrenheitRadio = getDocumentRoot().querySelector('#convert-from-fahrenheit');
|
||
|
||
if (likelyCurrentUnit === '°C' && fromCelsiusRadio) {
|
||
fromCelsiusRadio.checked = true;
|
||
} else if (likelyCurrentUnit === '°F' && fromFahrenheitRadio) {
|
||
fromFahrenheitRadio.checked = true;
|
||
} else if (fromCelsiusRadio) {
|
||
fromCelsiusRadio.checked = true;
|
||
}
|
||
|
||
// Pre-select TO unit (opposite of current)
|
||
const toCelsiusRadio = getDocumentRoot().querySelector('#convert-to-celsius');
|
||
const toFahrenheitRadio = getDocumentRoot().querySelector('#convert-to-fahrenheit');
|
||
|
||
if (likelyCurrentUnit === '°C' && toFahrenheitRadio) {
|
||
toFahrenheitRadio.checked = true;
|
||
} else if (likelyCurrentUnit === '°F' && toCelsiusRadio) {
|
||
toCelsiusRadio.checked = true;
|
||
} else if (toCelsiusRadio) {
|
||
toCelsiusRadio.checked = true;
|
||
}
|
||
|
||
modal.style.display = 'flex';
|
||
}
|
||
});
|
||
}
|
||
|
||
// Convert temperature modal - cancel
|
||
const convertTempCancel = getDocumentRoot().querySelector('#convert-temperature-cancel');
|
||
if (convertTempCancel) {
|
||
convertTempCancel.addEventListener('click', () => {
|
||
const modal = getDocumentRoot().querySelector('#convert-temperature-modal');
|
||
if (modal) modal.style.display = 'none';
|
||
});
|
||
}
|
||
|
||
// Convert temperature modal - confirm
|
||
const convertTempConfirm = getDocumentRoot().querySelector('#convert-temperature-confirm');
|
||
if (convertTempConfirm) {
|
||
convertTempConfirm.addEventListener('click', async () => {
|
||
const modal = getDocumentRoot().querySelector('#convert-temperature-modal');
|
||
|
||
// Get FROM unit
|
||
const fromCelsiusRadio = getDocumentRoot().querySelector('#convert-from-celsius');
|
||
const fromFahrenheitRadio = getDocumentRoot().querySelector('#convert-from-fahrenheit');
|
||
|
||
let fromUnit = null;
|
||
if (fromCelsiusRadio && fromCelsiusRadio.checked) {
|
||
fromUnit = '°C';
|
||
} else if (fromFahrenheitRadio && fromFahrenheitRadio.checked) {
|
||
fromUnit = '°F';
|
||
}
|
||
|
||
// Get TO unit
|
||
const toCelsiusRadio = getDocumentRoot().querySelector('#convert-to-celsius');
|
||
const toFahrenheitRadio = getDocumentRoot().querySelector('#convert-to-fahrenheit');
|
||
|
||
let targetUnit = null;
|
||
if (toCelsiusRadio && toCelsiusRadio.checked) {
|
||
targetUnit = '°C';
|
||
} else if (toFahrenheitRadio && toFahrenheitRadio.checked) {
|
||
targetUnit = '°F';
|
||
}
|
||
|
||
if (!fromUnit) {
|
||
showToast('Please select the current temperature unit (FROM)', 'warning');
|
||
return;
|
||
}
|
||
|
||
if (!targetUnit) {
|
||
showToast('Please select the target temperature unit (TO)', 'warning');
|
||
return;
|
||
}
|
||
|
||
if (fromUnit === targetUnit) {
|
||
showToast(`Cannot convert from ${fromUnit} to ${targetUnit} - they are the same unit`, 'warning');
|
||
return;
|
||
}
|
||
|
||
try {
|
||
// Show loading indicator
|
||
if (convertTempConfirm) {
|
||
convertTempConfirm.disabled = true;
|
||
convertTempConfirm.textContent = 'Converting...';
|
||
}
|
||
|
||
// Get current settings
|
||
const settings = await haAPI.getSettings();
|
||
|
||
// Convert all schedules using user-selected units
|
||
await convertAllSchedules(fromUnit, targetUnit);
|
||
|
||
// Convert min/max settings
|
||
if (settings.min_temp !== undefined) {
|
||
settings.min_temp = convertTemperature(settings.min_temp, fromUnit, targetUnit);
|
||
}
|
||
if (settings.max_temp !== undefined) {
|
||
settings.max_temp = convertTemperature(settings.max_temp, fromUnit, targetUnit);
|
||
}
|
||
|
||
// Convert default schedule
|
||
if (settings.defaultSchedule) {
|
||
settings.defaultSchedule = convertScheduleNodes(settings.defaultSchedule, fromUnit, targetUnit);
|
||
}
|
||
|
||
// Update temperature unit
|
||
settings.temperature_unit = targetUnit;
|
||
temperatureUnit = targetUnit;
|
||
storedTemperatureUnit = targetUnit;
|
||
|
||
// Save settings
|
||
await haAPI.saveSettings(settings);
|
||
|
||
// Close modal before reload
|
||
if (modal) modal.style.display = 'none';
|
||
|
||
// Show success toast briefly before reload
|
||
showToast(`Successfully converted all schedules to ${targetUnit}. Reloading...`, 'success', 2000);
|
||
|
||
// Reload the page after a brief delay to show the toast
|
||
setTimeout(() => {
|
||
window.location.reload();
|
||
}, 2000);
|
||
} catch (error) {
|
||
console.error('Failed to convert schedules:', error);
|
||
showToast('Failed to convert schedules: ' + error.message, 'error');
|
||
} finally {
|
||
// Restore button state
|
||
if (convertTempConfirm) {
|
||
convertTempConfirm.disabled = false;
|
||
convertTempConfirm.textContent = 'Convert Schedules';
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// Close convert temperature modal when clicking outside
|
||
const convertTempModal = getDocumentRoot().querySelector('#convert-temperature-modal');
|
||
if (convertTempModal) {
|
||
convertTempModal.addEventListener('click', (e) => {
|
||
if (e.target.id === 'convert-temperature-modal') {
|
||
convertTempModal.style.display = 'none';
|
||
}
|
||
});
|
||
}
|
||
|
||
// Edit group modal handlers
|
||
|
||
// Edit group - cancel
|
||
const editGroupCancel = getDocumentRoot().querySelector('#edit-group-cancel');
|
||
if (editGroupCancel) {
|
||
editGroupCancel.addEventListener('click', () => {
|
||
const modal = getDocumentRoot().querySelector('#edit-group-modal');
|
||
if (modal) {
|
||
modal.style.display = 'none';
|
||
delete modal.dataset.groupName;
|
||
}
|
||
});
|
||
}
|
||
|
||
// Edit group - save (rename)
|
||
const editGroupSave = getDocumentRoot().querySelector('#edit-group-save');
|
||
if (editGroupSave) {
|
||
editGroupSave.addEventListener('click', async () => {
|
||
const modal = getDocumentRoot().querySelector('#edit-group-modal');
|
||
const input = getDocumentRoot().querySelector('#edit-group-name');
|
||
const currentGroupName = modal?.dataset.groupName;
|
||
const newName = input?.value.trim();
|
||
|
||
if (newName && newName !== '' && newName !== currentGroupName) {
|
||
try {
|
||
await haAPI.renameGroup(currentGroupName, newName);
|
||
showToast(`Renamed group to: ${newName}`, 'success');
|
||
await loadGroups();
|
||
|
||
if (modal) {
|
||
modal.style.display = 'none';
|
||
delete modal.dataset.groupName;
|
||
}
|
||
} catch (error) {
|
||
console.error('Failed to rename group:', error);
|
||
showToast('Failed to rename group: ' + error.message, 'error');
|
||
}
|
||
} else if (newName === currentGroupName) {
|
||
// Name unchanged, just close
|
||
if (modal) {
|
||
modal.style.display = 'none';
|
||
delete modal.dataset.groupName;
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// Edit group - delete
|
||
const editGroupDelete = getDocumentRoot().querySelector('#edit-group-delete');
|
||
if (editGroupDelete) {
|
||
editGroupDelete.addEventListener('click', async () => {
|
||
const modal = getDocumentRoot().querySelector('#edit-group-modal');
|
||
const groupName = modal?.dataset.groupName;
|
||
|
||
if (!groupName) {
|
||
console.error('No group name found in modal');
|
||
return;
|
||
}
|
||
|
||
if (confirm(`Delete group "${groupName}"? All entities will be moved back to the entity list.`)) {
|
||
try {
|
||
await haAPI.deleteGroup(groupName);
|
||
showToast(`Deleted group: ${groupName}`, 'success');
|
||
await loadGroups();
|
||
await renderEntityList();
|
||
|
||
if (modal) {
|
||
modal.style.display = 'none';
|
||
delete modal.dataset.groupName;
|
||
}
|
||
} catch (error) {
|
||
console.error('Failed to delete group:', error);
|
||
showToast('Failed to delete group: ' + error.message, 'error');
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// Close edit group modal when clicking outside
|
||
const editGroupModal = getDocumentRoot().querySelector('#edit-group-modal');
|
||
if (editGroupModal) {
|
||
editGroupModal.addEventListener('click', (e) => {
|
||
if (e.target.id === 'edit-group-modal') {
|
||
editGroupModal.style.display = 'none';
|
||
delete editGroupModal.dataset.groupName;
|
||
}
|
||
});
|
||
}
|
||
|
||
// Edit group input - handle Enter key
|
||
const editGroupInput = getDocumentRoot().querySelector('#edit-group-name');
|
||
if (editGroupInput) {
|
||
editGroupInput.addEventListener('keydown', (e) => {
|
||
if (e.key === 'Enter') {
|
||
e.preventDefault();
|
||
const saveBtn = getDocumentRoot().querySelector('#edit-group-save');
|
||
if (saveBtn) saveBtn.click();
|
||
} else if (e.key === 'Escape') {
|
||
const modal = getDocumentRoot().querySelector('#edit-group-modal');
|
||
if (modal) {
|
||
modal.style.display = 'none';
|
||
delete modal.dataset.groupName;
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// Initialize settings panel
|
||
setupSettingsPanel();
|
||
}
|
||
|
||
// Handle node settings panel
|
||
async function handleNodeSettings(event) {
|
||
const { nodeIndex, node, timeline } = event.detail;
|
||
const timelineRef = timeline || graph;
|
||
if (!timelineRef) return;
|
||
graph = timelineRef;
|
||
nodeSettingsTimeline = timelineRef;
|
||
|
||
// Load the climate dialog component if not already loaded
|
||
await loadClimateDialog();
|
||
|
||
const keyframe = timelineRef.keyframes[nodeIndex];
|
||
if (!keyframe) return;
|
||
|
||
// Find the schedule node
|
||
const scheduleNode = currentSchedule.find(n => n.time === node.time);
|
||
if (!scheduleNode) return;
|
||
|
||
// Get the first entity to determine available features
|
||
const entityIds = currentGroup ? allGroups[currentGroup].entities : [currentEntityId];
|
||
const firstEntityId = entityIds[0];
|
||
const entity = climateEntities.find(e => e.entity_id === firstEntityId);
|
||
if (!entity) return;
|
||
|
||
// Create friendly display name
|
||
let displayName;
|
||
if (currentGroup) {
|
||
displayName = currentGroup;
|
||
} else {
|
||
displayName = entity.attributes.friendly_name || entity.entity_id;
|
||
}
|
||
|
||
// Create climate state object
|
||
const climateState = {
|
||
entity_id: displayName,
|
||
state: scheduleNode.hvac_mode ?? '',
|
||
attributes: {
|
||
supported_features: entity.attributes.supported_features,
|
||
hvac_modes: entity.attributes.hvac_modes || ['heat', 'cool', 'heat_cool', 'off'],
|
||
temperature: scheduleNode.temp,
|
||
target_temp_low: scheduleNode.target_temp_low,
|
||
target_temp_high: scheduleNode.target_temp_high,
|
||
min_temp: entity.attributes.min_temp,
|
||
max_temp: entity.attributes.max_temp,
|
||
temperature_step: inputTempStep,
|
||
humidity_step: humidityStep,
|
||
noChange: Boolean(scheduleNode.noChange),
|
||
fan_mode: scheduleNode.fan_mode ?? '',
|
||
fan_modes: entity.attributes.fan_modes,
|
||
preset_mode: scheduleNode.preset_mode ?? '',
|
||
preset_modes: entity.attributes.preset_modes,
|
||
swing_mode: scheduleNode.swing_mode ?? '',
|
||
swing_modes: entity.attributes.swing_modes,
|
||
swing_horizontal_mode: scheduleNode.swing_horizontal_mode ?? '',
|
||
swing_horizontal_modes: entity.attributes.swing_horizontal_modes,
|
||
target_humidity: scheduleNode.target_humidity,
|
||
min_humidity: entity.attributes.min_humidity,
|
||
max_humidity: entity.attributes.max_humidity,
|
||
aux_heat: scheduleNode.aux_heat
|
||
}
|
||
};
|
||
|
||
// Get or create the dialog element in the panel
|
||
const container = getDocumentRoot().querySelector('#climate-dialog-container');
|
||
if (!container) return;
|
||
|
||
container.innerHTML = '';
|
||
|
||
const dialogEl = document.createElement('climate-control-dialog');
|
||
dialogEl.stateObj = climateState;
|
||
dialogEl.dataset.nodeIndex = nodeIndex;
|
||
|
||
let dialogUndoCaptured = false;
|
||
const dialogNodeLabel = `${node.time} (index ${nodeIndex})`;
|
||
debugLog(`[Dialog][State] open node=${dialogNodeLabel} undoCaptured=${dialogUndoCaptured} rev=undo-debug-v2`);
|
||
const logDialogChange = (name, payload) => {
|
||
try {
|
||
debugLog(`[Dialog][Change] ${name} node=${dialogNodeLabel} payload=${JSON.stringify(payload)}`);
|
||
} catch (error) {
|
||
debugLog(`[Dialog][Change] ${name} node=${dialogNodeLabel} payload=<unserializable>`, 'warning');
|
||
}
|
||
};
|
||
|
||
const captureDialogUndoState = ({ force = false, source = 'unknown' } = {}) => {
|
||
if (dialogUndoCaptured && !force) {
|
||
debugLog(`[Dialog][Undo] skip node=${dialogNodeLabel} reason=already-captured source=${source}`);
|
||
return;
|
||
}
|
||
if (dialogUndoCaptured && force) {
|
||
debugLog(`[Dialog][Undo] reset-before-capture node=${dialogNodeLabel} source=${source}`);
|
||
dialogUndoCaptured = false;
|
||
}
|
||
const undoSizeBefore = Array.isArray(timelineRef.undoStack) ? timelineRef.undoStack.length : 'n/a';
|
||
if (typeof timelineRef.saveUndoState === 'function') {
|
||
timelineRef.saveUndoState();
|
||
const undoSizeAfter = Array.isArray(timelineRef.undoStack) ? timelineRef.undoStack.length : 'n/a';
|
||
debugLog(`[Dialog][Undo] captured node=${dialogNodeLabel} stack=${undoSizeBefore}->${undoSizeAfter} source=${source}`);
|
||
} else {
|
||
debugLog(`[Dialog][Undo] saveUndoState unavailable for node=${dialogNodeLabel}`, 'warning');
|
||
}
|
||
dialogUndoCaptured = true;
|
||
};
|
||
const markDialogInteractionCommitted = () => {
|
||
debugLog(`[Dialog][Commit] node=${dialogNodeLabel}`);
|
||
dialogUndoCaptured = false;
|
||
};
|
||
|
||
// Add event listeners for all the custom events
|
||
dialogEl.addEventListener('hvac-mode-changed', (e) => {
|
||
logDialogChange('hvac-mode-changed', e.detail);
|
||
captureDialogUndoState({ force: true, source: 'hvac-mode-changed' });
|
||
if (e.detail.mode) {
|
||
scheduleNode.hvac_mode = e.detail.mode;
|
||
keyframe.hvac_mode = e.detail.mode;
|
||
} else {
|
||
delete scheduleNode.hvac_mode;
|
||
keyframe.hvac_mode = null;
|
||
}
|
||
// Trigger Lit reactivity by reassigning the array
|
||
timelineRef.keyframes = [...timelineRef.keyframes];
|
||
saveSchedule();
|
||
markDialogInteractionCommitted();
|
||
});
|
||
|
||
dialogEl.addEventListener('temperature-changed', (e) => {
|
||
logDialogChange('temperature-changed', e.detail);
|
||
captureDialogUndoState({ source: 'temperature-changed' });
|
||
const normalizedTemp = normalizeTemperature(e.detail.temperature);
|
||
scheduleNode.temp = normalizedTemp;
|
||
scheduleNode.noChange = false;
|
||
keyframe.value = normalizedTemp;
|
||
keyframe.noChange = false;
|
||
// Trigger Lit reactivity by reassigning the array
|
||
timelineRef.keyframes = [...timelineRef.keyframes];
|
||
});
|
||
|
||
dialogEl.addEventListener('target-temp-low-changed', (e) => {
|
||
logDialogChange('target-temp-low-changed', e.detail);
|
||
captureDialogUndoState({ source: 'target-temp-low-changed' });
|
||
const value = normalizeTemperature(e.detail.temperature);
|
||
scheduleNode.target_temp_low = value;
|
||
keyframe.target_temp_low = value;
|
||
scheduleNode.noChange = false;
|
||
keyframe.noChange = false;
|
||
});
|
||
|
||
dialogEl.addEventListener('target-temp-high-changed', (e) => {
|
||
logDialogChange('target-temp-high-changed', e.detail);
|
||
captureDialogUndoState({ source: 'target-temp-high-changed' });
|
||
const value = normalizeTemperature(e.detail.temperature);
|
||
scheduleNode.target_temp_high = value;
|
||
keyframe.target_temp_high = value;
|
||
scheduleNode.noChange = false;
|
||
keyframe.noChange = false;
|
||
});
|
||
|
||
dialogEl.addEventListener('no-temp-change-changed', (e) => {
|
||
logDialogChange('no-temp-change-changed', e.detail);
|
||
captureDialogUndoState({ force: true, source: 'no-temp-change-changed' });
|
||
const noTempChangeEnabled = Boolean(e.detail.enabled);
|
||
scheduleNode.noChange = noTempChangeEnabled;
|
||
keyframe.noChange = noTempChangeEnabled;
|
||
|
||
if (noTempChangeEnabled) {
|
||
const lockedTemp = resolveNoChangeLockedTemp(currentSchedule, scheduleNode);
|
||
if (lockedTemp !== null) {
|
||
scheduleNode.temp = lockedTemp;
|
||
keyframe.value = lockedTemp;
|
||
}
|
||
}
|
||
|
||
timelineRef.keyframes = [...timelineRef.keyframes];
|
||
saveSchedule();
|
||
markDialogInteractionCommitted();
|
||
});
|
||
|
||
dialogEl.addEventListener('humidity-changed', (e) => {
|
||
logDialogChange('humidity-changed', e.detail);
|
||
captureDialogUndoState({ source: 'humidity-changed' });
|
||
scheduleNode.target_humidity = e.detail.humidity;
|
||
keyframe.target_humidity = e.detail.humidity;
|
||
});
|
||
|
||
dialogEl.addEventListener('fan-mode-changed', (e) => {
|
||
logDialogChange('fan-mode-changed', e.detail);
|
||
captureDialogUndoState({ force: true, source: 'fan-mode-changed' });
|
||
if (e.detail.mode) {
|
||
scheduleNode.fan_mode = e.detail.mode;
|
||
keyframe.fan_mode = e.detail.mode;
|
||
} else {
|
||
delete scheduleNode.fan_mode;
|
||
keyframe.fan_mode = null;
|
||
}
|
||
saveSchedule();
|
||
markDialogInteractionCommitted();
|
||
});
|
||
|
||
dialogEl.addEventListener('preset-mode-changed', (e) => {
|
||
logDialogChange('preset-mode-changed', e.detail);
|
||
captureDialogUndoState({ force: true, source: 'preset-mode-changed' });
|
||
if (e.detail.mode) {
|
||
scheduleNode.preset_mode = e.detail.mode;
|
||
keyframe.preset_mode = e.detail.mode;
|
||
} else {
|
||
delete scheduleNode.preset_mode;
|
||
keyframe.preset_mode = null;
|
||
}
|
||
saveSchedule();
|
||
markDialogInteractionCommitted();
|
||
});
|
||
|
||
dialogEl.addEventListener('swing-mode-changed', (e) => {
|
||
logDialogChange('swing-mode-changed', e.detail);
|
||
captureDialogUndoState({ force: true, source: 'swing-mode-changed' });
|
||
if (e.detail.mode) {
|
||
scheduleNode.swing_mode = e.detail.mode;
|
||
keyframe.swing_mode = e.detail.mode;
|
||
} else {
|
||
delete scheduleNode.swing_mode;
|
||
keyframe.swing_mode = null;
|
||
}
|
||
saveSchedule();
|
||
markDialogInteractionCommitted();
|
||
});
|
||
|
||
dialogEl.addEventListener('swing-horizontal-mode-changed', (e) => {
|
||
logDialogChange('swing-horizontal-mode-changed', e.detail);
|
||
captureDialogUndoState({ force: true, source: 'swing-horizontal-mode-changed' });
|
||
if (e.detail.mode) {
|
||
scheduleNode.swing_horizontal_mode = e.detail.mode;
|
||
keyframe.swing_horizontal_mode = e.detail.mode;
|
||
} else {
|
||
delete scheduleNode.swing_horizontal_mode;
|
||
keyframe.swing_horizontal_mode = null;
|
||
}
|
||
saveSchedule();
|
||
markDialogInteractionCommitted();
|
||
});
|
||
|
||
dialogEl.addEventListener('aux-heat-changed', (e) => {
|
||
logDialogChange('aux-heat-changed', e.detail);
|
||
captureDialogUndoState({ force: true, source: 'aux-heat-changed' });
|
||
const value = e.detail.enabled ? 'on' : 'off';
|
||
scheduleNode.aux_heat = value;
|
||
keyframe.aux_heat = value;
|
||
saveSchedule();
|
||
markDialogInteractionCommitted();
|
||
});
|
||
|
||
const handleDialogSliderCommit = () => {
|
||
saveSchedule();
|
||
markDialogInteractionCommitted();
|
||
};
|
||
|
||
dialogEl.addEventListener('temperature-change-committed', (e) => logDialogChange('temperature-change-committed', e.detail));
|
||
dialogEl.addEventListener('target-temp-low-committed', (e) => logDialogChange('target-temp-low-committed', e.detail));
|
||
dialogEl.addEventListener('target-temp-high-committed', (e) => logDialogChange('target-temp-high-committed', e.detail));
|
||
dialogEl.addEventListener('humidity-committed', (e) => logDialogChange('humidity-committed', e.detail));
|
||
|
||
dialogEl.addEventListener('temperature-change-committed', handleDialogSliderCommit);
|
||
dialogEl.addEventListener('target-temp-low-committed', handleDialogSliderCommit);
|
||
dialogEl.addEventListener('target-temp-high-committed', handleDialogSliderCommit);
|
||
dialogEl.addEventListener('humidity-committed', handleDialogSliderCommit);
|
||
|
||
container.appendChild(dialogEl);
|
||
|
||
// Populate and update time dropdown with 15-minute increments
|
||
const timeInput = getDocumentRoot().querySelector('#node-time-input');
|
||
if (timeInput) {
|
||
// Clear existing options
|
||
timeInput.innerHTML = '';
|
||
|
||
// Get all existing times in the schedule (excluding current node)
|
||
const existingTimes = new Set(currentSchedule.map(n => n.time));
|
||
|
||
// Generate all 15-minute increment times (00:00, 00:15, 00:30, etc.)
|
||
for (let hour = 0; hour < 24; hour++) {
|
||
for (let minute = 0; minute < 60; minute += 15) {
|
||
const timeStr = `${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}`;
|
||
const option = document.createElement('option');
|
||
option.value = timeStr;
|
||
option.textContent = timeStr;
|
||
|
||
// Check if this time is already used by a different node
|
||
const isCurrentNodeTime = timeStr === node.time;
|
||
const isAlreadyUsed = existingTimes.has(timeStr) && !isCurrentNodeTime;
|
||
|
||
if (isAlreadyUsed) {
|
||
option.disabled = true;
|
||
option.textContent = `${timeStr} (in use)`;
|
||
}
|
||
|
||
if (timeStr === node.time) {
|
||
option.selected = true;
|
||
}
|
||
timeInput.appendChild(option);
|
||
}
|
||
}
|
||
|
||
// Add 23:59 as final option
|
||
const lastOption = document.createElement('option');
|
||
lastOption.value = '23:59';
|
||
const isCurrentNodeTime = node.time === '23:59';
|
||
const isAlreadyUsed = existingTimes.has('23:59') && !isCurrentNodeTime;
|
||
|
||
if (isAlreadyUsed) {
|
||
lastOption.disabled = true;
|
||
lastOption.textContent = '23:59 (in use)';
|
||
} else {
|
||
lastOption.textContent = '23:59';
|
||
}
|
||
|
||
if (node.time === '23:59') {
|
||
lastOption.selected = true;
|
||
}
|
||
timeInput.appendChild(lastOption);
|
||
}
|
||
|
||
// Show panel
|
||
const panel = getDocumentRoot().querySelector('#node-settings-panel');
|
||
panel.style.display = 'block';
|
||
panel.dataset.nodeIndex = nodeIndex;
|
||
|
||
// Scroll to panel
|
||
panel.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
||
}
|
||
|
||
// Sync all thermostats to scheduled temperatures
|
||
async function syncAllTemperatures() {
|
||
try {
|
||
const button = getDocumentRoot().querySelector('#sync-all-menu');
|
||
button.disabled = true;
|
||
button.textContent = '⟲ Syncing...';
|
||
|
||
await haAPI.callService('climate_scheduler', 'sync_all', {});
|
||
|
||
button.textContent = '✓ Synced!';
|
||
setTimeout(() => {
|
||
button.textContent = '⟲ Sync All Thermostats';
|
||
button.disabled = false;
|
||
}, 2000);
|
||
} catch (error) {
|
||
console.error('Failed to sync temperatures:', error);
|
||
alert('Failed to sync temperatures: ' + error.message);
|
||
const button = getDocumentRoot().querySelector('#sync-all-menu');
|
||
if (button) {
|
||
button.textContent = '⟲ Sync All Thermostats';
|
||
button.disabled = false;
|
||
}
|
||
}
|
||
}
|
||
|
||
// Update scheduled temp every minute
|
||
setInterval(() => {
|
||
updateScheduledTemp();
|
||
updateAllGroupMemberScheduledTemps();
|
||
}, 60000);
|
||
|
||
// Handle profile change events from backend
|
||
async function handleProfileChanged(event) {
|
||
const { schedule_id: groupName, profile_name: newProfile } = event.data;
|
||
|
||
if (!groupName || !newProfile) return;
|
||
|
||
// Reload group data from server to get the new profile's schedules
|
||
const groupsResult = await haAPI.getGroups();
|
||
allGroups = normalizeGroupsPayload(groupsResult);
|
||
|
||
// Update the dropdown in the group header
|
||
const groupContainer = getDocumentRoot().querySelector(`.group-container[data-group-name="${groupName}"]`);
|
||
if (groupContainer) {
|
||
const profileDropdown = groupContainer.querySelector('.group-profile-dropdown');
|
||
if (profileDropdown) {
|
||
profileDropdown.value = newProfile;
|
||
}
|
||
}
|
||
|
||
// If this group is currently being edited, reload it to show the new profile's schedule
|
||
if (currentGroup === groupName) {
|
||
await editGroupSchedule(groupName);
|
||
}
|
||
|
||
await refreshGlobalProfileEditor();
|
||
}
|
||
|
||
// ===== Settings Panel =====
|
||
|
||
// Default schedule settings
|
||
let defaultScheduleSettings = [];
|
||
|
||
let defaultScheduleGraph = null;
|
||
|
||
// Initialize default schedule graph (called when settings panel is expanded)
|
||
async function initializeDefaultScheduleGraph() {
|
||
// Load keyframe-timeline component
|
||
const canvasLoaded = await loadKeyframeTimeline();
|
||
if (!canvasLoaded) {
|
||
console.error('Failed to load keyframe-timeline component for default schedule');
|
||
return;
|
||
}
|
||
|
||
// Initialize the default schedule graph (canvas timeline)
|
||
const container = getDocumentRoot().querySelector('#default-schedule-graph')?.parentElement;
|
||
if (container) {
|
||
// Remove existing element if present
|
||
const existingGraph = getDocumentRoot().querySelector('#default-schedule-graph');
|
||
if (existingGraph) {
|
||
existingGraph.remove();
|
||
}
|
||
|
||
// Create timeline editor using reusable function
|
||
const editorInstance = createTimelineEditor({
|
||
idPrefix: 'default',
|
||
buttons: [
|
||
{ id: 'graph-prev-btn', text: '◀', title: 'Previous keyframe' },
|
||
{ id: 'graph-next-btn', text: '▶', title: 'Next keyframe' },
|
||
{ id: 'graph-copy-btn', text: 'Copy', title: 'Copy schedule' },
|
||
{ id: 'graph-paste-btn', text: 'Paste', title: 'Paste schedule', disabled: true },
|
||
{ id: 'graph-undo-btn', text: 'Undo', title: 'Undo last change' },
|
||
{ id: 'graph-clear-btn', text: 'Clear', title: 'Clear all nodes' }
|
||
],
|
||
minValue: minTempSetting !== null ? minTempSetting : (temperatureUnit === '°F' ? 41 : 5),
|
||
maxValue: maxTempSetting !== null ? maxTempSetting : (temperatureUnit === '°F' ? 86 : 30),
|
||
snapValue: graphSnapStep,
|
||
title: '',
|
||
yAxisLabel: `Temperature (${temperatureUnit})`,
|
||
xAxisLabel: `Time of Day (24hr)`,
|
||
showCurrentTime: false,
|
||
tooltipMode: tooltipMode,
|
||
showHeader: false,
|
||
allowCollapse: false,
|
||
showModeDropdown: false
|
||
});
|
||
|
||
const { container: timelineEditorContainer, timeline, controls } = editorInstance;
|
||
timeline.id = 'default-schedule-graph';
|
||
timeline.className = 'temperature-graph';
|
||
|
||
container.appendChild(timelineEditorContainer);
|
||
|
||
defaultScheduleGraph = timeline;
|
||
attachUndoStackDebugLogging(timeline, 'default');
|
||
|
||
// Get button references
|
||
const undoBtn = controls.buttons['graph-undo-btn'];
|
||
const prevBtn = controls.buttons['graph-prev-btn'];
|
||
const nextBtn = controls.buttons['graph-next-btn'];
|
||
const copyBtn = controls.buttons['graph-copy-btn'];
|
||
const pasteBtn = controls.buttons['graph-paste-btn'];
|
||
const clearBtn = controls.buttons['graph-clear-btn'];
|
||
|
||
// Attach copy/paste handlers for default timeline
|
||
if (copyBtn) {
|
||
copyBtn.onclick = () => copySchedule();
|
||
}
|
||
if (pasteBtn) {
|
||
pasteBtn.onclick = () => pasteSchedule();
|
||
}
|
||
|
||
// Link external undo button to timeline's undo system
|
||
if (undoBtn && typeof timeline.setUndoButton === 'function') {
|
||
timeline.setUndoButton(undoBtn);
|
||
}
|
||
|
||
// Link previous/next buttons to timeline navigation
|
||
if (prevBtn && typeof timeline.setPreviousButton === 'function') {
|
||
timeline.setPreviousButton(prevBtn);
|
||
}
|
||
|
||
if (nextBtn && typeof timeline.setNextButton === 'function') {
|
||
timeline.setNextButton(nextBtn);
|
||
}
|
||
|
||
// Link clear button to timeline's clear functionality
|
||
if (clearBtn && typeof timeline.setClearButton === 'function') {
|
||
timeline.setClearButton(clearBtn);
|
||
}
|
||
|
||
// Link external undo button to timeline's undo system\n const undoBtn = controls.buttons['graph-undo-btn'];\n if (undoBtn && typeof timeline.setUndoButton === 'function') {\n timeline.setUndoButton(undoBtn);\n }\n \n // Convert defaultScheduleSettings nodes to keyframes and set them
|
||
// Always set keyframes, even if empty, to ensure timeline renders
|
||
if (defaultScheduleSettings && defaultScheduleSettings.length > 0) {
|
||
const keyframes = scheduleNodesToKeyframes(defaultScheduleSettings);
|
||
// Force reactivity by creating new array reference
|
||
defaultScheduleGraph.keyframes = [...keyframes];
|
||
|
||
// Set previousDayEndValue to last temperature from default schedule (wraparound)
|
||
const nodesWithTemp = defaultScheduleSettings.filter(n => !n.noChange && n.temp !== null && n.temp !== undefined);
|
||
if (nodesWithTemp.length > 0) {
|
||
const lastNode = nodesWithTemp[nodesWithTemp.length - 1];
|
||
defaultScheduleGraph.previousDayEndValue = lastNode.temp;
|
||
} else {
|
||
// Use middle of range if no temperature nodes exist
|
||
const midValue = (timeline.minValue + timeline.maxValue) / 2;
|
||
defaultScheduleGraph.previousDayEndValue = midValue;
|
||
}
|
||
} else {
|
||
// Set empty keyframes array to ensure timeline renders
|
||
defaultScheduleGraph.keyframes = [];
|
||
// Use middle of range as default when no schedule exists
|
||
const midValue = (timeline.minValue + timeline.maxValue) / 2;
|
||
defaultScheduleGraph.previousDayEndValue = midValue;
|
||
}
|
||
|
||
// Attach event listener for changes (canvas uses 'keyframe-moved' and 'keyframe-deleted')
|
||
timeline.addEventListener('keyframe-moved', handleDefaultScheduleChange);
|
||
timeline.addEventListener('keyframe-added', handleDefaultScheduleChange);
|
||
timeline.addEventListener('keyframe-deleted', handleDefaultScheduleChange);
|
||
timeline.addEventListener('keyframe-restored', handleDefaultScheduleChange);
|
||
timeline.addEventListener('keyframes-cleared', handleDefaultScheduleChange);
|
||
|
||
// Real-time updates during dragging
|
||
timeline.addEventListener('nodeSettingsUpdate', handleDefaultScheduleUpdate);
|
||
|
||
// Attach node settings listener (canvas uses 'keyframe-selected')
|
||
timeline.addEventListener('keyframe-selected', handleDefaultNodeSettings);
|
||
}
|
||
}
|
||
|
||
// Global min/max settings (populated from loadSettings)
|
||
let minTempSetting = null;
|
||
let maxTempSetting = null;
|
||
|
||
// Convert all schedules from one unit to another
|
||
async function convertAllSchedules(fromUnit, toUnit) {
|
||
if (fromUnit === toUnit) return;
|
||
|
||
try {
|
||
// Convert entity schedules
|
||
for (const entityId of entitySchedules.keys()) {
|
||
const result = await haAPI.getSchedule(entityId);
|
||
const schedule = result?.response || result;
|
||
|
||
if (schedule && schedule.schedules) {
|
||
const convertedSchedules = {};
|
||
for (const [day, nodes] of Object.entries(schedule.schedules)) {
|
||
convertedSchedules[day] = convertScheduleNodes(nodes, fromUnit, toUnit);
|
||
}
|
||
|
||
// Save converted schedules
|
||
for (const [day, nodes] of Object.entries(convertedSchedules)) {
|
||
await haAPI.setSchedule(entityId, nodes, day, schedule.schedule_mode || 'all_days');
|
||
}
|
||
}
|
||
}
|
||
|
||
// Convert group schedules
|
||
const result = await haAPI.getGroups();
|
||
const groups = normalizeGroupsPayload(result);
|
||
|
||
for (const [groupName, groupData] of Object.entries(groups)) {
|
||
if (groupData.schedules) {
|
||
const convertedSchedules = {};
|
||
for (const [day, nodes] of Object.entries(groupData.schedules)) {
|
||
convertedSchedules[day] = convertScheduleNodes(nodes, fromUnit, toUnit);
|
||
}
|
||
|
||
// Save converted group schedules
|
||
for (const [day, nodes] of Object.entries(convertedSchedules)) {
|
||
await haAPI.setGroupSchedule(groupName, nodes, day, groupData.schedule_mode || 'all_days');
|
||
}
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error('Failed to convert schedules:', error);
|
||
}
|
||
}
|
||
|
||
// Check if Workday integration is available
|
||
async function checkWorkdayIntegration(settings) {
|
||
const checkbox = getDocumentRoot().querySelector('#use-workday-integration');
|
||
const helpText = getDocumentRoot().querySelector('#workday-help-text');
|
||
const label = getDocumentRoot().querySelector('#use-workday-label');
|
||
const workdaySelector = getDocumentRoot().querySelector('#workday-selector');
|
||
|
||
if (!checkbox || !helpText) {
|
||
console.warn('Workday UI elements not found');
|
||
return;
|
||
}
|
||
|
||
try {
|
||
// Wait for haAPI to be connected
|
||
let hassObj = haAPI?.hass;
|
||
|
||
// If hass not ready yet, wait a bit and retry
|
||
if (!hassObj || !hassObj.states) {
|
||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||
hassObj = haAPI?.hass;
|
||
}
|
||
|
||
const hasWorkday = hassObj?.states?.['binary_sensor.workday_sensor'] !== undefined;
|
||
|
||
if (hasWorkday) {
|
||
// Workday is available - enable the checkbox
|
||
checkbox.disabled = false;
|
||
helpText.textContent = 'When enabled, uses the Workday integration for accurate 5/2 scheduling (respects holidays and custom workdays). When disabled, uses the selected workdays below.';
|
||
if (label) label.style.cursor = 'pointer';
|
||
|
||
// Load saved setting
|
||
if (settings && typeof settings.use_workday_integration !== 'undefined') {
|
||
checkbox.checked = settings.use_workday_integration;
|
||
}
|
||
|
||
// Show/hide workday selector based on checkbox state
|
||
updateWorkdaySelectorVisibility(checkbox.checked);
|
||
} else {
|
||
// Workday not available - disable and show message
|
||
checkbox.disabled = true;
|
||
checkbox.checked = false;
|
||
helpText.innerHTML = 'Workday integration not detected. Configure workdays manually below. <a href="https://www.home-assistant.io/integrations/workday/" target="_blank" style="color: var(--primary);">Install Workday integration</a>';
|
||
if (label) {
|
||
label.style.cursor = 'not-allowed';
|
||
label.style.opacity = '0.6';
|
||
}
|
||
|
||
// Always show workday selector when Workday integration is not available
|
||
if (workdaySelector) workdaySelector.style.display = 'block';
|
||
}
|
||
|
||
// Load workdays setting
|
||
loadWorkdaysSetting(settings);
|
||
|
||
} catch (error) {
|
||
console.error('Failed to check Workday integration:', error);
|
||
helpText.textContent = 'Could not determine if Workday integration is installed.';
|
||
}
|
||
}
|
||
|
||
// Update visibility of workday selector based on use_workday_integration setting
|
||
function updateWorkdaySelectorVisibility(useWorkdayIntegration) {
|
||
const workdaySelector = getDocumentRoot().querySelector('#workday-selector');
|
||
if (workdaySelector) {
|
||
// Show selector when NOT using Workday integration
|
||
workdaySelector.style.display = useWorkdayIntegration ? 'none' : 'block';
|
||
}
|
||
}
|
||
|
||
// Load workdays setting from settings
|
||
function loadWorkdaysSetting(settings) {
|
||
const defaultWorkdays = ['mon', 'tue', 'wed', 'thu', 'fri'];
|
||
const workdays = settings?.workdays || defaultWorkdays;
|
||
|
||
const checkboxes = getDocumentRoot().querySelectorAll('.workday-checkbox');
|
||
checkboxes.forEach(checkbox => {
|
||
checkbox.checked = workdays.includes(checkbox.value);
|
||
});
|
||
}
|
||
|
||
// Get selected workdays from checkboxes
|
||
function getSelectedWorkdays() {
|
||
const checkboxes = getDocumentRoot().querySelectorAll('.workday-checkbox:checked');
|
||
return Array.from(checkboxes).map(cb => cb.value);
|
||
}
|
||
|
||
// Load settings from server
|
||
async function loadSettings() {
|
||
try {
|
||
const settings = await haAPI.getSettings();
|
||
|
||
// Check if temperature unit changed and convert schedules if needed
|
||
const savedUnit = settings?.temperature_unit;
|
||
|
||
// Always set storedTemperatureUnit to track what's in storage
|
||
storedTemperatureUnit = savedUnit || temperatureUnit;
|
||
|
||
if (savedUnit && savedUnit !== temperatureUnit) {
|
||
await convertAllSchedules(savedUnit, temperatureUnit);
|
||
// Update stored unit
|
||
settings.temperature_unit = temperatureUnit;
|
||
storedTemperatureUnit = temperatureUnit;
|
||
await haAPI.saveSettings(settings);
|
||
} else if (!savedUnit) {
|
||
// First time - check if default schedule needs conversion from Celsius to Fahrenheit
|
||
if (temperatureUnit === '°F' && settings.defaultSchedule) {
|
||
// Check if default schedule looks like it's in Celsius (temps < 40)
|
||
const maxTemp = Math.max(...settings.defaultSchedule.map(n => n.temp));
|
||
if (maxTemp < 40) {
|
||
settings.defaultSchedule = convertScheduleNodes(settings.defaultSchedule, '°C', '°F');
|
||
// Also convert min/max if they look like Celsius
|
||
if (settings.min_temp && settings.min_temp < 40) {
|
||
settings.min_temp = convertTemperature(settings.min_temp, '°C', '°F');
|
||
}
|
||
if (settings.max_temp && settings.max_temp < 40) {
|
||
settings.max_temp = convertTemperature(settings.max_temp, '°C', '°F');
|
||
}
|
||
}
|
||
}
|
||
// Save current unit for future detection
|
||
settings.temperature_unit = temperatureUnit;
|
||
storedTemperatureUnit = temperatureUnit;
|
||
await haAPI.saveSettings(settings);
|
||
}
|
||
|
||
if (settings && settings.defaultSchedule) {
|
||
// Convert default schedule if needed
|
||
if (storedTemperatureUnit && storedTemperatureUnit !== temperatureUnit) {
|
||
defaultScheduleSettings = convertScheduleNodes(settings.defaultSchedule, storedTemperatureUnit, temperatureUnit);
|
||
} else {
|
||
defaultScheduleSettings = settings.defaultSchedule;
|
||
}
|
||
}
|
||
if (settings && settings.tooltipMode) {
|
||
tooltipMode = settings.tooltipMode;
|
||
const tooltipSelect = getDocumentRoot().querySelector('#tooltip-mode');
|
||
if (tooltipSelect) {
|
||
tooltipSelect.value = tooltipMode;
|
||
}
|
||
}
|
||
// Graph type setting is no longer used - canvas timeline is the only option
|
||
// Legacy code removed
|
||
// Load derivative sensor setting
|
||
if (settings && typeof settings.create_derivative_sensors !== 'undefined') {
|
||
const checkbox = getDocumentRoot().querySelector('#create-derivative-sensors');
|
||
if (checkbox) {
|
||
checkbox.checked = settings.create_derivative_sensors;
|
||
}
|
||
}
|
||
|
||
// Check for Workday integration and load setting
|
||
await checkWorkdayIntegration(settings);
|
||
|
||
// Load min/max temps if present (convert if unit changed)
|
||
if (settings && typeof settings.min_temp !== 'undefined') {
|
||
let minTemp = parseFloat(settings.min_temp);
|
||
if (storedTemperatureUnit && storedTemperatureUnit !== temperatureUnit) {
|
||
minTemp = convertTemperature(minTemp, storedTemperatureUnit, temperatureUnit);
|
||
}
|
||
minTempSetting = minTemp;
|
||
const minInput = getDocumentRoot().querySelector('#min-temp');
|
||
if (minInput) {
|
||
minInput.value = minTemp;
|
||
} else {
|
||
console.warn('min-temp input not found in DOM during loadSettings');
|
||
}
|
||
}
|
||
if (settings && typeof settings.max_temp !== 'undefined') {
|
||
let maxTemp = parseFloat(settings.max_temp);
|
||
if (storedTemperatureUnit && storedTemperatureUnit !== temperatureUnit) {
|
||
maxTemp = convertTemperature(maxTemp, storedTemperatureUnit, temperatureUnit);
|
||
}
|
||
maxTempSetting = maxTemp;
|
||
const maxInput = getDocumentRoot().querySelector('#max-temp');
|
||
if (maxInput) {
|
||
maxInput.value = maxTemp;
|
||
} else {
|
||
console.warn('max-temp input not found in DOM during loadSettings');
|
||
}
|
||
}
|
||
// Update unit labels (if present)
|
||
try {
|
||
const minUnitEl = getDocumentRoot().querySelector('#min-unit');
|
||
const maxUnitEl = getDocumentRoot().querySelector('#max-unit');
|
||
if (minUnitEl) minUnitEl.textContent = temperatureUnit;
|
||
if (maxUnitEl) maxUnitEl.textContent = temperatureUnit;
|
||
} catch (err) {
|
||
// ignore
|
||
}
|
||
// If graphs already exist, update their ranges
|
||
try {
|
||
if (defaultScheduleGraph && minTempSetting !== null && maxTempSetting !== null) {
|
||
defaultScheduleGraph.minValue = minTempSetting;
|
||
defaultScheduleGraph.maxValue = maxTempSetting;
|
||
}
|
||
if (graph && minTempSetting !== null && maxTempSetting !== null) {
|
||
graph.minValue = minTempSetting;
|
||
graph.maxValue = maxTempSetting;
|
||
}
|
||
} catch (err) {
|
||
console.warn('Failed to apply min/max to graphs:', err);
|
||
}
|
||
} catch (error) {
|
||
console.error('Failed to load settings:', error);
|
||
}
|
||
}
|
||
|
||
// Save settings to server
|
||
async function saveSettings() {
|
||
try {
|
||
const settings = {
|
||
defaultSchedule: defaultScheduleSettings,
|
||
tooltipMode: tooltipMode
|
||
};
|
||
// Read min/max inputs
|
||
const minInput = getDocumentRoot().querySelector('#min-temp');
|
||
const maxInput = getDocumentRoot().querySelector('#max-temp');
|
||
if (minInput && minInput.value !== '') settings.min_temp = parseFloat(minInput.value);
|
||
if (maxInput && maxInput.value !== '') settings.max_temp = parseFloat(maxInput.value);
|
||
|
||
// Read derivative sensor checkbox
|
||
const derivativeCheckbox = getDocumentRoot().querySelector('#create-derivative-sensors');
|
||
if (derivativeCheckbox) {
|
||
settings.create_derivative_sensors = derivativeCheckbox.checked;
|
||
}
|
||
|
||
// Read workday integration checkbox
|
||
const workdayCheckbox = getDocumentRoot().querySelector('#use-workday-integration');
|
||
if (workdayCheckbox) {
|
||
settings.use_workday_integration = workdayCheckbox.checked;
|
||
}
|
||
|
||
// Read selected workdays
|
||
const selectedWorkdays = getSelectedWorkdays();
|
||
if (selectedWorkdays.length > 0) {
|
||
settings.workdays = selectedWorkdays;
|
||
}
|
||
|
||
await haAPI.saveSettings(settings);
|
||
// Update runtime globals and graphs
|
||
if (typeof settings.min_temp !== 'undefined') {
|
||
minTempSetting = parseFloat(settings.min_temp);
|
||
}
|
||
if (typeof settings.max_temp !== 'undefined') {
|
||
maxTempSetting = parseFloat(settings.max_temp);
|
||
}
|
||
try {
|
||
if (defaultScheduleGraph && minTempSetting !== null && maxTempSetting !== null) {
|
||
defaultScheduleGraph.minValue = minTempSetting;
|
||
defaultScheduleGraph.maxValue = maxTempSetting;
|
||
}
|
||
if (graph && minTempSetting !== null && maxTempSetting !== null) {
|
||
graph.minValue = minTempSetting;
|
||
graph.maxValue = maxTempSetting;
|
||
}
|
||
} catch (err) {
|
||
console.warn('Failed to apply min/max to graphs after save:', err);
|
||
}
|
||
// Settings saved
|
||
return true;
|
||
} catch (error) {
|
||
console.error('Failed to save settings:', error);
|
||
return false;
|
||
}
|
||
}
|
||
|
||
// Handle default schedule graph changes
|
||
function handleDefaultScheduleChange(event) {
|
||
const timeline = event.currentTarget;
|
||
const keyframes = timeline.keyframes || [];
|
||
|
||
// Convert keyframes to schedule nodes
|
||
defaultScheduleSettings = keyframesToScheduleNodes(keyframes);
|
||
|
||
// Update previousDayEndValue to reflect the last temperature (wraparound)
|
||
if (keyframes.length > 0) {
|
||
const lastKeyframe = keyframes[keyframes.length - 1];
|
||
timeline.previousDayEndValue = lastKeyframe.value;
|
||
}
|
||
|
||
// Auto-save when default schedule is modified
|
||
saveSettings();
|
||
}
|
||
|
||
// Handle real-time updates during dragging (no save)
|
||
function handleDefaultScheduleUpdate(event) {
|
||
const timeline = event.currentTarget;
|
||
const keyframes = timeline.keyframes || [];
|
||
|
||
// Update previousDayEndValue in real-time to reflect the last temperature (wraparound)
|
||
if (keyframes.length > 0) {
|
||
const lastKeyframe = keyframes[keyframes.length - 1];
|
||
timeline.previousDayEndValue = lastKeyframe.value;
|
||
}
|
||
}
|
||
|
||
// Setup settings panel event listeners
|
||
async function setupSettingsPanel() {
|
||
await loadSettings();
|
||
|
||
// Toggle collapse
|
||
const toggle = getDocumentRoot().querySelector('#settings-toggle');
|
||
if (toggle) {
|
||
toggle.addEventListener('click', async () => {
|
||
const panel = getDocumentRoot().querySelector('#settings-panel');
|
||
const indicator = toggle.querySelector('.collapse-indicator');
|
||
|
||
if (panel.classList.contains('collapsed')) {
|
||
panel.classList.remove('collapsed');
|
||
panel.classList.add('expanded');
|
||
if (indicator) indicator.style.transform = 'rotate(0deg)';
|
||
|
||
// Initialize the default schedule graph when expanding
|
||
// Check if graph variable points to an element that's still in the DOM
|
||
const graphStillValid = defaultScheduleGraph && getDocumentRoot().contains(defaultScheduleGraph);
|
||
if (!graphStillValid) {
|
||
await initializeDefaultScheduleGraph();
|
||
}
|
||
} else {
|
||
panel.classList.remove('expanded');
|
||
panel.classList.add('collapsed');
|
||
if (indicator) indicator.style.transform = 'rotate(-90deg)';
|
||
}
|
||
});
|
||
}
|
||
|
||
// Global instructions toggle
|
||
const instructionsToggle = getDocumentRoot().querySelector('#global-instructions-toggle');
|
||
const instructionsContent = getDocumentRoot().querySelector('#global-graph-instructions');
|
||
if (instructionsToggle && instructionsContent) {
|
||
instructionsToggle.onclick = () => {
|
||
const isCollapsed = instructionsContent.classList.contains('collapsed');
|
||
const icon = instructionsToggle.querySelector('.toggle-icon');
|
||
|
||
if (isCollapsed) {
|
||
instructionsContent.classList.remove('collapsed');
|
||
instructionsContent.style.display = 'block';
|
||
if (icon) icon.style.transform = 'rotate(90deg)';
|
||
} else {
|
||
instructionsContent.classList.add('collapsed');
|
||
instructionsContent.style.display = 'none';
|
||
if (icon) icon.style.transform = 'rotate(0deg)';
|
||
}
|
||
};
|
||
}
|
||
|
||
// Tooltip mode selector
|
||
const tooltipModeSelect = getDocumentRoot().querySelector('#tooltip-mode');
|
||
if (tooltipModeSelect) {
|
||
tooltipModeSelect.addEventListener('change', (e) => {
|
||
tooltipMode = e.target.value;
|
||
|
||
// Update all canvas timeline instances
|
||
if (defaultScheduleGraph) {
|
||
defaultScheduleGraph.tooltipMode = tooltipMode;
|
||
}
|
||
if (graph) {
|
||
graph.tooltipMode = tooltipMode;
|
||
}
|
||
|
||
// Auto-save the setting
|
||
saveSettings();
|
||
});
|
||
}
|
||
|
||
// Graph type selector removed - canvas timeline is now the only option
|
||
const graphTypeSelect = getDocumentRoot().querySelector('#graph-type');
|
||
if (graphTypeSelect) {
|
||
// Hide the selector since we only support canvas now
|
||
const graphTypeContainer = graphTypeSelect.closest('.setting-row, .setting-item, .config-row');
|
||
if (graphTypeContainer) {
|
||
graphTypeContainer.style.display = 'none';
|
||
}
|
||
}
|
||
|
||
// Debug panel toggle
|
||
const debugToggle = getDocumentRoot().querySelector('#debug-panel-toggle');
|
||
const debugPanel = getDocumentRoot().querySelector('#debug-panel');
|
||
if (debugToggle && debugPanel) {
|
||
// Restore saved state
|
||
debugToggle.checked = debugPanelEnabled;
|
||
debugPanel.style.display = debugPanelEnabled ? 'block' : 'none';
|
||
|
||
// Subscribe to logs if debug was previously enabled
|
||
if (debugPanelEnabled) {
|
||
debugLog('Debug panel restored from saved state');
|
||
// Set log level to debug
|
||
haAPI.setLogLevel('debug').then(() => {
|
||
debugLog('Log level set to debug (check Home Assistant logs)', 'info');
|
||
}).catch(error => {
|
||
debugLog('Failed to set log level: ' + error.message, 'error');
|
||
});
|
||
}
|
||
|
||
debugToggle.addEventListener('change', async (e) => {
|
||
debugPanelEnabled = e.target.checked;
|
||
localStorage.setItem('debugPanelEnabled', debugPanelEnabled);
|
||
debugPanel.style.display = debugPanelEnabled ? 'block' : 'none';
|
||
|
||
if (debugPanelEnabled) {
|
||
debugLog('Debug panel enabled');
|
||
// Set log level to debug
|
||
try {
|
||
await haAPI.setLogLevel('debug');
|
||
debugLog('Log level set to debug (check Home Assistant logs)', 'info');
|
||
debugLog('Frontend operations will be logged here. Backend logs are in Home Assistant system log.', 'info');
|
||
} catch (error) {
|
||
debugLog('Failed to set log level: ' + error.message, 'error');
|
||
}
|
||
} else {
|
||
debugLog('Debug panel disabled');
|
||
// Reset log level to info when disabling
|
||
try {
|
||
await haAPI.setLogLevel('info');
|
||
debugLog('Log level reset to info', 'info');
|
||
} catch (error) {
|
||
debugLog('Failed to reset log level: ' + error.message, 'error');
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// Clear debug button
|
||
const clearDebugBtn = getDocumentRoot().querySelector('#clear-debug');
|
||
if (clearDebugBtn) {
|
||
clearDebugBtn.addEventListener('click', () => {
|
||
const debugContent = getDocumentRoot().querySelector('#debug-content');
|
||
if (debugContent) {
|
||
debugContent.innerHTML = '';
|
||
debugLog('Debug console cleared');
|
||
}
|
||
});
|
||
}
|
||
|
||
// Graph snap step setting
|
||
const graphSnapStepSelect = getDocumentRoot().querySelector('#graph-snap-step');
|
||
if (graphSnapStepSelect) {
|
||
graphSnapStepSelect.value = graphSnapStep.toString();
|
||
graphSnapStepSelect.addEventListener('change', (e) => {
|
||
graphSnapStep = parseFloat(e.target.value);
|
||
localStorage.setItem('graphSnapStep', graphSnapStep);
|
||
showToast(`Graph snap step set to ${graphSnapStep}°`, 'success');
|
||
|
||
// Update graph instance if it exists
|
||
if (graph) {
|
||
graph.graphSnapStep = graphSnapStep;
|
||
}
|
||
});
|
||
}
|
||
|
||
// Input temperature step setting
|
||
const inputTempStepSelect = getDocumentRoot().querySelector('#input-temp-step');
|
||
if (inputTempStepSelect) {
|
||
inputTempStepSelect.value = inputTempStep.toString();
|
||
inputTempStepSelect.addEventListener('change', (e) => {
|
||
inputTempStep = parseFloat(e.target.value);
|
||
localStorage.setItem('inputTempStep', inputTempStep);
|
||
showToast(`Input field step set to ${inputTempStep}°`, 'success');
|
||
|
||
// Update the temperature input field if it exists
|
||
const tempInput = getDocumentRoot().querySelector('#node-temp-input');
|
||
if (tempInput) {
|
||
tempInput.step = inputTempStep.toString();
|
||
}
|
||
|
||
// Update button titles
|
||
const tempUpBtn = getDocumentRoot().querySelector('#temp-up');
|
||
const tempDownBtn = getDocumentRoot().querySelector('#temp-down');
|
||
if (tempUpBtn) tempUpBtn.title = `+${inputTempStep}°`;
|
||
if (tempDownBtn) tempDownBtn.title = `-${inputTempStep}°`;
|
||
});
|
||
}
|
||
|
||
// Humidity slider step setting
|
||
const humidityStepSelect = getDocumentRoot().querySelector('#humidity-step');
|
||
if (humidityStepSelect) {
|
||
humidityStepSelect.value = humidityStep.toString();
|
||
humidityStepSelect.addEventListener('change', (e) => {
|
||
humidityStep = parseFloat(e.target.value);
|
||
localStorage.setItem('humidityStep', humidityStep);
|
||
showToast(`Humidity slider step set to ${humidityStep}%`, 'success');
|
||
});
|
||
}
|
||
|
||
// Min/Max temperature inputs - auto-save on change
|
||
const minTempInput = getDocumentRoot().querySelector('#min-temp');
|
||
const maxTempInput = getDocumentRoot().querySelector('#max-temp');
|
||
if (minTempInput) {
|
||
minTempInput.addEventListener('change', async (e) => {
|
||
// Simple client-side validation: ensure numeric
|
||
if (e.target.value !== '') {
|
||
const v = parseFloat(e.target.value);
|
||
if (Number.isNaN(v)) {
|
||
alert('Minimum temperature must be a number');
|
||
return;
|
||
}
|
||
}
|
||
await saveSettings();
|
||
});
|
||
}
|
||
if (maxTempInput) {
|
||
maxTempInput.addEventListener('change', async (e) => {
|
||
if (e.target.value !== '') {
|
||
const v = parseFloat(e.target.value);
|
||
if (Number.isNaN(v)) {
|
||
alert('Maximum temperature must be a number');
|
||
return;
|
||
}
|
||
}
|
||
await saveSettings();
|
||
});
|
||
}
|
||
|
||
// Reset button
|
||
const resetBtn = getDocumentRoot().querySelector('#reset-defaults');
|
||
if (resetBtn) {
|
||
resetBtn.addEventListener('click', async () => {
|
||
if (confirm('Reset to default schedule settings?')) {
|
||
defaultScheduleSettings = [];
|
||
|
||
if (defaultScheduleGraph) {
|
||
defaultScheduleGraph.keyframes = [];
|
||
}
|
||
|
||
const success = await saveSettings();
|
||
if (success) {
|
||
resetBtn.textContent = '✓ Reset!';
|
||
setTimeout(() => {
|
||
resetBtn.textContent = 'Reset to Defaults';
|
||
}, 2000);
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// Workday integration checkbox
|
||
const workdayCheckbox = getDocumentRoot().querySelector('#use-workday-integration');
|
||
if (workdayCheckbox) {
|
||
workdayCheckbox.addEventListener('change', async () => {
|
||
// Update visibility of workday selector
|
||
updateWorkdaySelectorVisibility(workdayCheckbox.checked);
|
||
await saveSettings();
|
||
});
|
||
}
|
||
|
||
// Workday day checkboxes
|
||
const workdayDayCheckboxes = getDocumentRoot().querySelectorAll('.workday-checkbox');
|
||
workdayDayCheckboxes.forEach(checkbox => {
|
||
checkbox.addEventListener('change', async () => {
|
||
await saveSettings();
|
||
});
|
||
});
|
||
|
||
// Clear default schedule button
|
||
const clearDefaultScheduleBtn = getDocumentRoot().querySelector('#clear-default-schedule-btn');
|
||
if (clearDefaultScheduleBtn) {
|
||
clearDefaultScheduleBtn.addEventListener('click', async () => {
|
||
if (confirm('Clear the default schedule? All nodes will be removed.')) {
|
||
defaultScheduleSettings = [];
|
||
|
||
if (defaultScheduleGraph) {
|
||
defaultScheduleGraph.keyframes = [];
|
||
}
|
||
|
||
const success = await saveSettings();
|
||
if (success) {
|
||
clearDefaultScheduleBtn.textContent = '✓ Cleared!';
|
||
setTimeout(() => {
|
||
clearDefaultScheduleBtn.textContent = 'Clear Schedule';
|
||
}, 2000);
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// Derivative sensor checkbox - auto-save on change
|
||
const derivativeCheckbox = getDocumentRoot().querySelector('#create-derivative-sensors');
|
||
if (derivativeCheckbox) {
|
||
derivativeCheckbox.addEventListener('change', async () => {
|
||
await saveSettings();
|
||
});
|
||
}
|
||
|
||
// Cleanup derivative sensors button
|
||
// Run diagnostics button
|
||
const runDiagnosticsBtn = getDocumentRoot().querySelector('#run-diagnostics-btn');
|
||
if (runDiagnosticsBtn) {
|
||
runDiagnosticsBtn.addEventListener('click', async () => {
|
||
try {
|
||
runDiagnosticsBtn.textContent = '🔍 Running diagnostics...';
|
||
runDiagnosticsBtn.disabled = true;
|
||
|
||
const result = await haAPI.runDiagnostics();
|
||
|
||
// Create a downloadable JSON file
|
||
const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
|
||
const filename = `climate-scheduler-diagnostics-${timestamp}.json`;
|
||
const jsonString = JSON.stringify(result, null, 2);
|
||
const blob = new Blob([jsonString], { type: 'application/json' });
|
||
const url = URL.createObjectURL(blob);
|
||
|
||
// Create a temporary download link and trigger it
|
||
const downloadLink = document.createElement('a');
|
||
downloadLink.href = url;
|
||
downloadLink.download = filename;
|
||
downloadLink.style.display = 'none';
|
||
document.body.appendChild(downloadLink);
|
||
downloadLink.click();
|
||
document.body.removeChild(downloadLink);
|
||
|
||
// Clean up the URL object
|
||
setTimeout(() => URL.revokeObjectURL(url), 100);
|
||
|
||
showToast(`Diagnostics saved to ${filename}`, 'success', 4000);
|
||
|
||
runDiagnosticsBtn.textContent = '✓ Diagnostics Complete!';
|
||
setTimeout(() => {
|
||
runDiagnosticsBtn.textContent = 'Run Diagnostics';
|
||
runDiagnosticsBtn.disabled = false;
|
||
}, 3000);
|
||
} catch (error) {
|
||
console.error('Failed to run diagnostics:', error);
|
||
showToast('Failed to run diagnostics: ' + error.message, 'error');
|
||
runDiagnosticsBtn.textContent = 'Run Diagnostics';
|
||
runDiagnosticsBtn.disabled = false;
|
||
}
|
||
});
|
||
}
|
||
|
||
const cleanupBtn = getDocumentRoot().querySelector('#cleanup-derivative-sensors-btn');
|
||
if (cleanupBtn) {
|
||
cleanupBtn.addEventListener('click', async () => {
|
||
try {
|
||
// First check if auto-creation is disabled
|
||
const settings = await haAPI.getSettings();
|
||
const autoCreationEnabled = settings?.create_derivative_sensors !== false;
|
||
|
||
let confirmDeleteAll = false;
|
||
if (!autoCreationEnabled) {
|
||
// Ask for confirmation to delete all
|
||
const confirmed = confirm(
|
||
'Auto-creation of derivative sensors is disabled.\\n\\n' +
|
||
'This will DELETE ALL climate_scheduler derivative sensors.\\n\\n' +
|
||
'Are you sure you want to continue?'
|
||
);
|
||
if (!confirmed) return;
|
||
confirmDeleteAll = true;
|
||
} else {
|
||
// Just cleanup orphaned sensors
|
||
const confirmed = confirm(
|
||
'This will remove derivative sensors for thermostats that no longer exist.\\n\\n' +
|
||
'Continue?'
|
||
);
|
||
if (!confirmed) return;
|
||
}
|
||
|
||
cleanupBtn.textContent = '🧹 Cleaning up...';
|
||
cleanupBtn.disabled = true;
|
||
|
||
const result = await haAPI.cleanupDerivativeSensors(confirmDeleteAll);
|
||
|
||
if (result.requires_confirmation) {
|
||
showToast(result.message, 'warning', 6000);
|
||
} else {
|
||
showToast(result.message, 'success', 4000);
|
||
}
|
||
|
||
if (result.errors && result.errors.length > 0) {
|
||
console.error('Cleanup errors:', result.errors);
|
||
showToast(`Deleted ${result.deleted_count} sensors with ${result.errors.length} errors`, 'warning', 5000);
|
||
}
|
||
|
||
cleanupBtn.textContent = '✓ Cleanup Complete!';
|
||
setTimeout(() => {
|
||
cleanupBtn.textContent = '🧹 Cleanup Derivative Sensors';
|
||
cleanupBtn.disabled = false;
|
||
}, 3000);
|
||
} catch (error) {
|
||
console.error('Failed to cleanup derivative sensors:', error);
|
||
showToast('Failed to cleanup derivative sensors', 'error');
|
||
cleanupBtn.textContent = '🧹 Cleanup Derivative Sensors';
|
||
cleanupBtn.disabled = false;
|
||
}
|
||
});
|
||
}
|
||
|
||
const cleanupClimateBtn = getDocumentRoot().querySelector('#cleanup-orphaned-climate-btn');
|
||
if (cleanupClimateBtn) {
|
||
cleanupClimateBtn.addEventListener('click', async () => {
|
||
try {
|
||
// First do a dry run to see what would be deleted
|
||
cleanupClimateBtn.textContent = '🔍 Scanning...';
|
||
cleanupClimateBtn.disabled = true;
|
||
|
||
const dryRunResult = await haAPI.cleanupOrphanedClimateEntities(false);
|
||
|
||
if (!dryRunResult.orphaned_entities || dryRunResult.orphaned_entities.length === 0) {
|
||
showToast('No orphaned entities found', 'success');
|
||
cleanupClimateBtn.textContent = 'Cleanup Orphaned Entities';
|
||
cleanupClimateBtn.disabled = false;
|
||
return;
|
||
}
|
||
|
||
// Ask for confirmation with list of entities
|
||
const entityList = dryRunResult.orphaned_entities.join('\n• ');
|
||
const confirmed = confirm(
|
||
`Found ${dryRunResult.orphaned_entities.length} orphaned entities:\n\n` +
|
||
`• ${entityList}\n\n` +
|
||
'These entities no longer have matching groups or climate entities in storage.\n\n' +
|
||
'Delete these entities?'
|
||
);
|
||
|
||
if (!confirmed) {
|
||
cleanupClimateBtn.textContent = 'Cleanup Orphaned Entities';
|
||
cleanupClimateBtn.disabled = false;
|
||
return;
|
||
}
|
||
|
||
cleanupClimateBtn.textContent = '🗑️ Deleting...';
|
||
|
||
const deleteResult = await haAPI.cleanupOrphanedClimateEntities(true);
|
||
|
||
if (deleteResult.removed && deleteResult.removed.length > 0) {
|
||
showToast(`Removed ${deleteResult.removed.length} orphaned entities`, 'success', 4000);
|
||
} else {
|
||
showToast('No entities were removed', 'warning');
|
||
}
|
||
|
||
cleanupClimateBtn.textContent = '✓ Cleanup Complete!';
|
||
setTimeout(() => {
|
||
cleanupClimateBtn.textContent = 'Cleanup Orphaned Entities';
|
||
cleanupClimateBtn.disabled = false;
|
||
}, 3000);
|
||
} catch (error) {
|
||
console.error('Failed to cleanup orphaned entities:', error);
|
||
showToast('Failed to cleanup orphaned entities', 'error');
|
||
cleanupClimateBtn.textContent = 'Cleanup Orphaned Entities';
|
||
cleanupClimateBtn.disabled = false;
|
||
}
|
||
});
|
||
}
|
||
|
||
const cleanupStorageBtn = getDocumentRoot().querySelector('#cleanup-storage-btn');
|
||
if (cleanupStorageBtn) {
|
||
cleanupStorageBtn.addEventListener('click', async () => {
|
||
try {
|
||
cleanupStorageBtn.textContent = '🔍 Dry run...';
|
||
cleanupStorageBtn.disabled = true;
|
||
|
||
const preview = await haAPI.cleanupUnmonitoredStorage(true);
|
||
const wouldRemoveGroups = preview?.would_remove_groups || [];
|
||
const wouldRemoveEntityRefs = preview?.would_remove_entity_references || [];
|
||
const wouldRemoveProfiles = preview?.would_remove_profiles || [];
|
||
const wouldRemoveAdvanceHistory = preview?.would_remove_advance_history || [];
|
||
|
||
const totalPlanned =
|
||
wouldRemoveGroups.length +
|
||
wouldRemoveEntityRefs.length +
|
||
wouldRemoveProfiles.length +
|
||
wouldRemoveAdvanceHistory.length;
|
||
|
||
if (!preview?.would_change || totalPlanned === 0) {
|
||
showToast('Dry run complete: no stale storage entries to remove.', 'success', 5000);
|
||
cleanupStorageBtn.textContent = 'Cleanup Unmonitored Storage';
|
||
cleanupStorageBtn.disabled = false;
|
||
return;
|
||
}
|
||
|
||
if (cleanupAutoDownloadReports) {
|
||
const previewTimestamp = new Date().toISOString().replace(/[:.]/g, '-');
|
||
const previewFilename = `climate-scheduler-cleanup-preview-${previewTimestamp}.json`;
|
||
const previewBlob = new Blob([JSON.stringify(preview, null, 2)], { type: 'application/json' });
|
||
const previewUrl = URL.createObjectURL(previewBlob);
|
||
const previewDownloadLink = document.createElement('a');
|
||
previewDownloadLink.href = previewUrl;
|
||
previewDownloadLink.download = previewFilename;
|
||
previewDownloadLink.style.display = 'none';
|
||
document.body.appendChild(previewDownloadLink);
|
||
previewDownloadLink.click();
|
||
document.body.removeChild(previewDownloadLink);
|
||
setTimeout(() => URL.revokeObjectURL(previewUrl), 100);
|
||
showToast(`Dry-run preview saved to ${previewFilename}`, 'info', 5000);
|
||
}
|
||
|
||
const summaryParts = [];
|
||
if (wouldRemoveGroups.length > 0) summaryParts.push(`${wouldRemoveGroups.length} groups`);
|
||
if (wouldRemoveEntityRefs.length > 0) summaryParts.push(`${wouldRemoveEntityRefs.length} entity references`);
|
||
if (wouldRemoveProfiles.length > 0) summaryParts.push(`${wouldRemoveProfiles.length} profiles`);
|
||
if (wouldRemoveAdvanceHistory.length > 0) summaryParts.push(`${wouldRemoveAdvanceHistory.length} advance-history entries`);
|
||
|
||
const groupPreview = wouldRemoveGroups
|
||
.slice(0, 5)
|
||
.map(item => item?.group)
|
||
.filter(Boolean)
|
||
.join(', ');
|
||
|
||
const confirmMessage =
|
||
`Dry run found changes:\n\n` +
|
||
`Will remove: ${summaryParts.join(', ')}.\n` +
|
||
(groupPreview ? `\nGroups: ${groupPreview}${wouldRemoveGroups.length > 5 ? ', ...' : ''}\n` : '\n') +
|
||
`\nProceed with cleanup?`;
|
||
|
||
const confirmed = confirm(confirmMessage);
|
||
if (!confirmed) {
|
||
cleanupStorageBtn.textContent = 'Cleanup Unmonitored Storage';
|
||
cleanupStorageBtn.disabled = false;
|
||
return;
|
||
}
|
||
|
||
cleanupStorageBtn.textContent = '🧹 Cleaning storage...';
|
||
const result = await haAPI.cleanupUnmonitoredStorage(false);
|
||
|
||
if (cleanupAutoDownloadReports) {
|
||
const resultTimestamp = new Date().toISOString().replace(/[:.]/g, '-');
|
||
const resultFilename = `climate-scheduler-cleanup-result-${resultTimestamp}.json`;
|
||
const resultBlob = new Blob([JSON.stringify(result, null, 2)], { type: 'application/json' });
|
||
const resultUrl = URL.createObjectURL(resultBlob);
|
||
const resultDownloadLink = document.createElement('a');
|
||
resultDownloadLink.href = resultUrl;
|
||
resultDownloadLink.download = resultFilename;
|
||
resultDownloadLink.style.display = 'none';
|
||
document.body.appendChild(resultDownloadLink);
|
||
resultDownloadLink.click();
|
||
document.body.removeChild(resultDownloadLink);
|
||
setTimeout(() => URL.revokeObjectURL(resultUrl), 100);
|
||
showToast(`Cleanup result saved to ${resultFilename}`, 'info', 5000);
|
||
}
|
||
|
||
if (result?.message) {
|
||
showToast(result.message, 'success', 5000);
|
||
} else {
|
||
showToast('Storage cleanup complete', 'success');
|
||
}
|
||
|
||
await loadGroups();
|
||
await renderEntityList();
|
||
|
||
cleanupStorageBtn.textContent = '✓ Cleanup Complete!';
|
||
setTimeout(() => {
|
||
cleanupStorageBtn.textContent = 'Cleanup Unmonitored Storage';
|
||
cleanupStorageBtn.disabled = false;
|
||
}, 3000);
|
||
} catch (error) {
|
||
console.error('Failed to cleanup storage:', error);
|
||
showToast('Failed to cleanup storage', 'error');
|
||
cleanupStorageBtn.textContent = 'Cleanup Unmonitored Storage';
|
||
cleanupStorageBtn.disabled = false;
|
||
}
|
||
});
|
||
}
|
||
|
||
}
|
||
|
||
// Handle node settings for default schedule
|
||
function handleDefaultNodeSettings(event) {
|
||
const { nodeIndex, node } = event.detail;
|
||
|
||
// Node clicked
|
||
|
||
// Check if default node settings panel exists
|
||
const panel = getDocumentRoot().querySelector('#default-node-settings-panel');
|
||
if (!panel) {
|
||
// Node settings panel not available
|
||
return;
|
||
}
|
||
|
||
// Updating panel
|
||
|
||
// Aggregate all possible modes from all climate entities
|
||
const hvacModesSet = new Set();
|
||
const fanModesSet = new Set();
|
||
const swingModesSet = new Set();
|
||
const presetModesSet = new Set();
|
||
|
||
climateEntities.forEach(entity => {
|
||
if (entity.attributes.hvac_modes) {
|
||
entity.attributes.hvac_modes.forEach(mode => hvacModesSet.add(mode));
|
||
}
|
||
if (entity.attributes.fan_modes) {
|
||
entity.attributes.fan_modes.forEach(mode => fanModesSet.add(mode));
|
||
}
|
||
if (entity.attributes.swing_modes) {
|
||
entity.attributes.swing_modes.forEach(mode => swingModesSet.add(mode));
|
||
}
|
||
if (entity.attributes.preset_modes) {
|
||
entity.attributes.preset_modes.forEach(mode => presetModesSet.add(mode));
|
||
}
|
||
});
|
||
|
||
const allHvacModes = Array.from(hvacModesSet);
|
||
const allFanModes = Array.from(fanModesSet);
|
||
const allSwingModes = Array.from(swingModesSet);
|
||
const allPresetModes = Array.from(presetModesSet);
|
||
|
||
// Update panel content - get fresh references
|
||
const nodeTimeEl = getDocumentRoot().querySelector('#default-node-time');
|
||
const nodeTempEl = getDocumentRoot().querySelector('#default-node-temp');
|
||
if (!nodeTimeEl || !nodeTempEl) return;
|
||
|
||
nodeTimeEl.textContent = node.time;
|
||
nodeTempEl.textContent = `${node.temp}${temperatureUnit}`;
|
||
|
||
// Displays updated
|
||
|
||
// Get fresh references to all elements
|
||
const hvacModeSelect = getDocumentRoot().querySelector('#default-node-hvac-mode');
|
||
const hvacModeItem = getDocumentRoot().querySelector('#default-hvac-mode-item');
|
||
const fanModeSelect = getDocumentRoot().querySelector('#default-node-fan-mode');
|
||
const fanModeItem = getDocumentRoot().querySelector('#default-fan-mode-item');
|
||
const swingModeSelect = getDocumentRoot().querySelector('#default-node-swing-mode');
|
||
const swingModeItem = getDocumentRoot().querySelector('#default-swing-mode-item');
|
||
const presetModeSelect = getDocumentRoot().querySelector('#default-node-preset-mode');
|
||
const presetModeItem = getDocumentRoot().querySelector('#default-preset-mode-item');
|
||
|
||
// Populate HVAC mode dropdown
|
||
if (hvacModeSelect && hvacModeItem) {
|
||
if (allHvacModes.length > 0) {
|
||
hvacModeSelect.innerHTML = '<option value="">-- No Change --</option>';
|
||
allHvacModes.forEach(mode => {
|
||
const option = document.createElement('option');
|
||
option.value = mode;
|
||
option.textContent = mode.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase());
|
||
if (node.hvac_mode === mode) option.selected = true;
|
||
hvacModeSelect.appendChild(option);
|
||
});
|
||
hvacModeItem.style.display = '';
|
||
} else {
|
||
hvacModeItem.style.display = 'none';
|
||
}
|
||
}
|
||
|
||
// Populate fan mode dropdown
|
||
if (fanModeSelect && fanModeItem) {
|
||
if (allFanModes.length > 0) {
|
||
fanModeSelect.innerHTML = '<option value="">-- No Change --</option>';
|
||
allFanModes.forEach(mode => {
|
||
const option = document.createElement('option');
|
||
option.value = mode;
|
||
option.textContent = mode.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase());
|
||
if (node.fan_mode === mode) option.selected = true;
|
||
fanModeSelect.appendChild(option);
|
||
});
|
||
fanModeItem.style.display = '';
|
||
} else {
|
||
fanModeItem.style.display = 'none';
|
||
}
|
||
}
|
||
|
||
// Populate swing mode dropdown
|
||
if (swingModeSelect && swingModeItem) {
|
||
if (allSwingModes.length > 0) {
|
||
swingModeSelect.innerHTML = '<option value="">-- No Change --</option>';
|
||
allSwingModes.forEach(mode => {
|
||
const option = document.createElement('option');
|
||
option.value = mode;
|
||
option.textContent = mode.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase());
|
||
if (node.swing_mode === mode) option.selected = true;
|
||
swingModeSelect.appendChild(option);
|
||
});
|
||
swingModeItem.style.display = '';
|
||
} else {
|
||
swingModeItem.style.display = 'none';
|
||
}
|
||
}
|
||
|
||
// Populate preset mode dropdown
|
||
if (presetModeSelect && presetModeItem) {
|
||
if (allPresetModes.length > 0) {
|
||
presetModeSelect.innerHTML = '<option value="">-- No Change --</option>';
|
||
allPresetModes.forEach(mode => {
|
||
const option = document.createElement('option');
|
||
option.value = mode;
|
||
option.textContent = mode.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase());
|
||
if (node.preset_mode === mode) option.selected = true;
|
||
presetModeSelect.appendChild(option);
|
||
});
|
||
presetModeItem.style.display = '';
|
||
} else {
|
||
presetModeItem.style.display = 'none';
|
||
}
|
||
}
|
||
|
||
// Setup auto-save for default schedule
|
||
const autoSaveDefaultNodeSettings = async () => {
|
||
if (!panel) return;
|
||
|
||
const nodeIdx = parseInt(panel.dataset.nodeIndex);
|
||
if (isNaN(nodeIdx) || !defaultScheduleGraph) return;
|
||
|
||
// Get the actual node from the graph
|
||
const targetNode = defaultScheduleGraph.keyframes[nodeIdx];
|
||
if (!targetNode) return;
|
||
|
||
// Get fresh references
|
||
const hvacSelect = getDocumentRoot().querySelector('#default-node-hvac-mode');
|
||
const hvacItem = getDocumentRoot().querySelector('#default-hvac-mode-item');
|
||
const fanSelect = getDocumentRoot().querySelector('#default-node-fan-mode');
|
||
const fanItem = getDocumentRoot().querySelector('#default-fan-mode-item');
|
||
const swingSelect = getDocumentRoot().querySelector('#default-node-swing-mode');
|
||
const swingItem = getDocumentRoot().querySelector('#default-swing-mode-item');
|
||
const presetSelect = getDocumentRoot().querySelector('#default-node-preset-mode');
|
||
const presetItem = getDocumentRoot().querySelector('#default-preset-mode-item');
|
||
|
||
// Update or delete properties based on dropdown values
|
||
if (hvacSelect && hvacItem && hvacItem.style.display !== 'none') {
|
||
const hvacMode = hvacSelect.value;
|
||
if (hvacMode) {
|
||
targetNode.hvac_mode = hvacMode;
|
||
} else {
|
||
delete targetNode.hvac_mode;
|
||
}
|
||
}
|
||
|
||
if (fanSelect && fanItem && fanItem.style.display !== 'none') {
|
||
const fanMode = fanSelect.value;
|
||
if (fanMode) {
|
||
targetNode.fan_mode = fanMode;
|
||
} else {
|
||
delete targetNode.fan_mode;
|
||
}
|
||
}
|
||
|
||
if (swingSelect && swingItem && swingItem.style.display !== 'none') {
|
||
const swingMode = swingSelect.value;
|
||
if (swingMode) {
|
||
targetNode.swing_mode = swingMode;
|
||
} else {
|
||
delete targetNode.swing_mode;
|
||
}
|
||
}
|
||
|
||
if (presetSelect && presetItem && presetItem.style.display !== 'none') {
|
||
const presetMode = presetSelect.value;
|
||
if (presetMode) {
|
||
targetNode.preset_mode = presetMode;
|
||
} else {
|
||
delete targetNode.preset_mode;
|
||
}
|
||
}
|
||
|
||
// Update the settings array (convert keyframes back to nodes)
|
||
defaultScheduleSettings = keyframesToScheduleNodes(defaultScheduleGraph.keyframes);
|
||
|
||
// Auto-save to server
|
||
await saveSettings();
|
||
};
|
||
|
||
// Attach change listeners to the freshly populated dropdowns
|
||
const finalHvacSelect = getDocumentRoot().querySelector('#default-node-hvac-mode');
|
||
const finalFanSelect = getDocumentRoot().querySelector('#default-node-fan-mode');
|
||
const finalSwingSelect = getDocumentRoot().querySelector('#default-node-swing-mode');
|
||
const finalPresetSelect = getDocumentRoot().querySelector('#default-node-preset-mode');
|
||
|
||
if (finalHvacSelect) {
|
||
finalHvacSelect.addEventListener('change', autoSaveDefaultNodeSettings);
|
||
}
|
||
if (finalFanSelect) {
|
||
finalFanSelect.addEventListener('change', autoSaveDefaultNodeSettings);
|
||
}
|
||
if (finalSwingSelect) {
|
||
finalSwingSelect.addEventListener('change', autoSaveDefaultNodeSettings);
|
||
}
|
||
if (finalPresetSelect) {
|
||
finalPresetSelect.addEventListener('change', autoSaveDefaultNodeSettings);
|
||
}
|
||
|
||
// Panel ready
|
||
|
||
// Setup delete button
|
||
const deleteBtn = getDocumentRoot().querySelector('#default-delete-node-btn');
|
||
if (deleteBtn) {
|
||
const newDeleteBtn = deleteBtn.cloneNode(true);
|
||
deleteBtn.parentNode.replaceChild(newDeleteBtn, deleteBtn);
|
||
|
||
newDeleteBtn.addEventListener('click', () => {
|
||
if (defaultScheduleGraph.keyframes.length <= 1) {
|
||
alert('Cannot delete the last node. A schedule must have at least one node.');
|
||
return;
|
||
}
|
||
|
||
if (confirm('Delete this node?')) {
|
||
// Remove keyframe at index
|
||
defaultScheduleGraph.keyframes = defaultScheduleGraph.keyframes.filter((_, i) => i !== nodeIndex);
|
||
defaultScheduleSettings = keyframesToScheduleNodes(defaultScheduleGraph.keyframes);
|
||
panel.style.display = 'none';
|
||
}
|
||
});
|
||
}
|
||
|
||
// Show panel
|
||
panel.style.display = 'block';
|
||
panel.dataset.nodeIndex = nodeIndex;
|
||
|
||
// Scroll to panel
|
||
panel.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
||
}
|
||
|
||
// Load advance history for an entity
|
||
async function loadAdvanceHistory(entityId) {
|
||
try {
|
||
const status = await haAPI.getAdvanceStatus(entityId);
|
||
if (status && status.history && graph) {
|
||
graph.advanceHistory = status.history;
|
||
}
|
||
} catch (error) {
|
||
console.error('Failed to load advance history:', error);
|
||
}
|
||
}
|
||
|
||
// Export initialization function for custom panel
|
||
window.initClimateSchedulerApp = function(hass) {
|
||
// Create API instance first if needed
|
||
if (!haAPI) {
|
||
haAPI = new HomeAssistantAPI();
|
||
}
|
||
|
||
// Set hass object FIRST if provided (custom panel mode)
|
||
if (hass) {
|
||
haAPI.setHassObject(hass);
|
||
}
|
||
|
||
// Initialize app - connect() will use hass object if available
|
||
if (document.readyState === 'loading') {
|
||
document.addEventListener('DOMContentLoaded', initApp);
|
||
} else {
|
||
initApp();
|
||
}
|
||
};
|
||
|
||
// Export function to update hass connection (when panel receives new hass object)
|
||
window.updateHassConnection = function(hass) {
|
||
if (hass && haAPI) {
|
||
haAPI.setHassObject(hass);
|
||
}
|
||
};
|
||
|
||
// Auto-initialize for backward compatibility (iframe/standalone mode)
|
||
// Guard initialization so we only run in documents that contain the expected
|
||
// UI container (prevents errors when `index.html` is removed and app.js is
|
||
// loaded in a different context).
|
||
const _shouldAutoInit = () => {
|
||
// If the panel custom element is present, let panel.js call init explicitly
|
||
try {
|
||
if (customElements && customElements.get && customElements.get('climate-scheduler-panel')) {
|
||
return false;
|
||
}
|
||
} catch (e) {
|
||
// ignore
|
||
}
|
||
|
||
// Check for an existing container or entity list; only auto-init if present
|
||
if (document.querySelector('#entity-list') || document.querySelector('.container')) {
|
||
return true;
|
||
}
|
||
return false;
|
||
};
|
||
|
||
if (document.readyState === 'loading') {
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
if (_shouldAutoInit()) initApp();
|
||
});
|
||
} else {
|
||
if (_shouldAutoInit()) initApp();
|
||
}
|
||
|
||
|