lifx-emulator 3.0.1__py3-none-any.whl → 4.0.0__py3-none-any.whl

lifx_emulator_app/api/templates/dashboard.html

@@ -352,548 +352,6 @@
         </div>
     </div>
 
-    <script>
-        let updateInterval;
-
-        // Convert HSBK to RGB for display
-        function hsbkToRgb(hsbk) {
-            const h = hsbk.hue / 65535;
-            const s = hsbk.saturation / 65535;
-            const v = hsbk.brightness / 65535;
-
-            let r, g, b;
-            const i = Math.floor(h * 6);
-            const f = h * 6 - i;
-            const p = v * (1 - s);
-            const q = v * (1 - f * s);
-            const t = v * (1 - (1 - f) * s);
-
-            switch (i % 6) {
-                case 0: r = v; g = t; b = p; break;
-                case 1: r = q; g = v; b = p; break;
-                case 2: r = p; g = v; b = t; break;
-                case 3: r = p; g = q; b = v; break;
-                case 4: r = t; g = p; b = v; break;
-                case 5: r = v; g = p; b = q; break;
-            }
-
-            const red = Math.round(r * 255);
-            const green = Math.round(g * 255);
-            const blue = Math.round(b * 255);
-            return `rgb(${red}, ${green}, ${blue})`;
-        }
-
-        function toggleZones(serial) {
-            const element = document.getElementById(`zones-${serial}`);
-            const toggle = document.getElementById(`zones-toggle-${serial}`);
-            if (element && toggle) {
-                const isShown = element.classList.toggle('show');
-                // Update toggle icon
-                toggle.textContent = isShown
-                    ? toggle.textContent.replace('▸', '▾')
-                    : toggle.textContent.replace('▾', '▸');
-                // Save state to localStorage
-                localStorage.setItem(`zones-${serial}`, isShown ? 'show' : 'hide');
-            }
-        }
-
-        function toggleMetadata(serial) {
-            const element = document.getElementById(`metadata-${serial}`);
-            const toggle = document.getElementById(`metadata-toggle-${serial}`);
-            if (element && toggle) {
-                const isShown = element.classList.toggle('show');
-                // Update toggle icon
-                toggle.textContent = isShown
-                    ? toggle.textContent.replace('▸', '▾')
-                    : toggle.textContent.replace('▾', '▸');
-                // Save state to localStorage
-                localStorage.setItem(`metadata-${serial}`, isShown ? 'show' : 'hide');
-            }
-        }
-
-        function restoreToggleStates(serial) {
-            // Restore zones toggle state
-            const zonesState = localStorage.getItem(`zones-${serial}`);
-            if (zonesState === 'show') {
-                const element = document.getElementById(`zones-${serial}`);
-                const toggle = document.getElementById(`zones-toggle-${serial}`);
-                if (element && toggle) {
-                    element.classList.add('show');
-                    toggle.textContent = toggle.textContent.replace('▸', '▾');
-                }
-            }
-
-            // Restore metadata toggle state
-            const metadataState = localStorage.getItem(`metadata-${serial}`);
-            if (metadataState === 'show') {
-                const element = document.getElementById(`metadata-${serial}`);
-                const toggle = document.getElementById(`metadata-toggle-${serial}`);
-                if (element && toggle) {
-                    element.classList.add('show');
-                    toggle.textContent = toggle.textContent.replace('▸', '▾');
-                }
-            }
-        }
-
-        async function fetchStats() {
-            try {
-                const response = await fetch('/api/stats');
-                if (!response.ok) {
-                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-                }
-                const stats = await response.json();
-
-                const uptimeValue = Math.floor(stats.uptime_seconds);
-                const statsHtml = `
-                    <div class="stat">
-                        <span class="stat-label">Uptime</span>
-                        <span class="stat-value">${uptimeValue}s</span>
-                    </div>
-                    <div class="stat">
-                        <span class="stat-label">Devices</span>
-                        <span class="stat-value">${stats.device_count}</span>
-                    </div>
-                    <div class="stat">
-                        <span class="stat-label">Packets RX</span>
-                        <span class="stat-value">${stats.packets_received}</span>
-                    </div>
-                    <div class="stat">
-                        <span class="stat-label">Packets TX</span>
-                        <span class="stat-value">${stats.packets_sent}</span>
-                    </div>
-                    <div class="stat">
-                        <span class="stat-label">Errors</span>
-                        <span class="stat-value">${stats.error_count}</span>
-                    </div>
-                `;
-                document.getElementById('stats').innerHTML = statsHtml;
-
-                // Show/hide activity log based on server configuration
-                const activityCard = document.getElementById('activity-card');
-                if (activityCard) {
-                    const displayValue = (
-                        stats.activity_enabled ? 'block' : 'none'
-                    );
-                    activityCard.style.display = displayValue;
-                }
-
-                return stats.activity_enabled;
-            } catch (error) {
-                console.error('Failed to fetch stats:', error);
-                const errorLabelStyle = 'color: #d32f2f;';
-                const errorHtml = `
-                    <div class="stat">
-                        <span class="stat-label" style="${errorLabelStyle}">
-                            Error loading stats
-                        </span>
-                        <span class="stat-value">${error.message}</span>
-                    </div>
-                `;
-                document.getElementById('stats').innerHTML = errorHtml;
-                return false;
-            }
-        }
-
-        async function fetchDevices() {
-            try {
-                const response = await fetch('/api/devices');
-                if (!response.ok) {
-                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-                }
-                const devices = await response.json();
-
-                document.getElementById('device-count').textContent = devices.length;
-
-                if (devices.length === 0) {
-                    const noDevicesHtml = (
-                        '<div class="no-devices">No devices emulated</div>'
-                    );
-                    document.getElementById('devices').innerHTML = noDevicesHtml;
-                    return;
-                }
-
-                const devicesHtml = devices.map(dev => {
-                const capabilities = [];
-                const capabilityBadges = [];
-
-                if (dev.has_color) capabilities.push('color');
-                if (dev.has_infrared) capabilities.push('IR');
-
-                // Show extended-mz badge instead of multizone when both are present
-                if (dev.has_extended_multizone) {
-                    const badgeHtml = (
-                        '<span class="badge badge-extended-mz">' +
-                        `extended-mz×${dev.zone_count}</span>`
-                    );
-                    capabilityBadges.push(badgeHtml);
-                } else if (dev.has_multizone) {
-                    capabilities.push(`multizone×${dev.zone_count}`);
-                }
-
-                if (dev.has_matrix) capabilities.push(`matrix×${dev.tile_count}`);
-                if (dev.has_hev) capabilities.push('HEV');
-
-                const powerBadge = dev.power_level > 0
-                    ? '<span class="badge badge-power-on">ON</span>'
-                    : '<span class="badge badge-power-off">OFF</span>';
-
-                // Generate capabilities list for metadata
-                const capabilitiesMetadata = [];
-                if (dev.has_color) capabilitiesMetadata.push('Color');
-                if (dev.has_infrared) {
-                    capabilitiesMetadata.push('Infrared');
-                }
-                if (dev.has_multizone) {
-                    capabilitiesMetadata.push(
-                        `Multizone (${dev.zone_count} zones)`
-                    );
-                }
-                if (dev.has_extended_multizone) {
-                    capabilitiesMetadata.push('Extended Multizone');
-                }
-                if (dev.has_matrix) {
-                    capabilitiesMetadata.push(
-                        `Matrix (${dev.tile_count} tiles)`
-                    );
-                }
-                if (dev.has_hev) capabilitiesMetadata.push('HEV/Clean');
-                const capabilitiesText = (
-                    capabilitiesMetadata.join(', ') || 'None'
-                );
-
-                // Generate metadata display
-                const uptimeSeconds = Math.floor(dev.uptime_ns / 1e9);
-                const metaToggleId = `metadata-toggle-${dev.serial}`;
-                const metaToggleClick = `toggleMetadata('${dev.serial}')`;
-                const metadataHtml = `
-                    <div
-                        class="metadata-toggle"
-                        id="${metaToggleId}"
-                        onclick="${metaToggleClick}"
-                    >
-                        ▸ Show metadata
-                    </div>
-                    <div id="metadata-${dev.serial}" class="metadata-display">
-                        <div class="metadata-row">
-                            <span class="metadata-label">Firmware:</span>
-                            <span class="metadata-value">
-                                ${dev.version_major}.${dev.version_minor}
-                            </span>
-                        </div>
-                        <div class="metadata-row">
-                            <span class="metadata-label">Vendor:</span>
-                            <span class="metadata-value">${dev.vendor}</span>
-                        </div>
-                        <div class="metadata-row">
-                            <span class="metadata-label">Product:</span>
-                            <span class="metadata-value">${dev.product}</span>
-                        </div>
-                        <div class="metadata-row">
-                            <span class="metadata-label">Capabilities:</span>
-                            <span
-                                class="metadata-value"
-                                style="color: #4a9eff;"
-                            >${capabilitiesText}</span>
-                        </div>
-                        <div class="metadata-row">
-                            <span class="metadata-label">Group:</span>
-                            <span class="metadata-value">${dev.group_label}</span>
-                        </div>
-                        <div class="metadata-row">
-                            <span class="metadata-label">Location:</span>
-                            <span class="metadata-value">${dev.location_label}</span>
-                        </div>
-                        <div class="metadata-row">
-                            <span class="metadata-label">Uptime:</span>
-                            <span class="metadata-value">${uptimeSeconds}s</span>
-                        </div>
-                        <div class="metadata-row">
-                            <span class="metadata-label">WiFi Signal:</span>
-                            <span class="metadata-value">
-                                ${dev.wifi_signal.toFixed(1)} dBm
-                            </span>
-                        </div>
-                    </div>
-                `;
-
-                // Generate zones display
-                let zonesHtml = '';
-                if (dev.has_multizone && dev.zone_colors &&
-                    dev.zone_colors.length > 0
-                ) {
-                    const zoneSegments = dev.zone_colors.map(color => {
-                        const rgb = hsbkToRgb(color);
-                        const bgStyle = `background: ${rgb};`;
-                        return `<div class="zone-segment" style="${bgStyle}"></div>`;
-                    }).join('');
-
-                    const zoneCount = dev.zone_colors.length;
-                    const toggleId = `zones-toggle-${dev.serial}`;
-                    const toggleClick = `toggleZones('${dev.serial}')`;
-                    zonesHtml = `
-                        <div
-                            class="zones-toggle"
-                            id="${toggleId}"
-                            onclick="${toggleClick}"
-                        >
-                            ▸ Show zones (${zoneCount})
-                        </div>
-                        <div id="zones-${dev.serial}" class="zones-display">
-                            <div class="zone-strip">${zoneSegments}</div>
-                        </div>
-                    `;
-                } else if (dev.has_matrix && dev.tile_devices &&
-                           dev.tile_devices.length > 0) {
-                    // Render actual tile zones
-                    const tilesHtml = dev.tile_devices.map((tile, tileIndex) => {
-                        if (!tile.colors || tile.colors.length === 0) {
-                            return '<div style="color: #666;">No color data</div>';
-                        }
-
-                        const width = tile.width || 8;
-                        const height = tile.height || 8;
-                        const totalzones = width * height;
-
-                        // Create grid of zones
-                        const slicedColors = tile.colors.slice(0, totalzones);
-                        const zonesHtml = slicedColors.map(color => {
-                            const rgb = hsbkToRgb(color);
-                            const bgStyle = `background: ${rgb};`;
-                            return `<div class="tile-zone" style="${bgStyle}"></div>`;
-                        }).join('');
-
-                        const labelStyle = (
-                            'font-size: 0.7em; color: #666; ' +
-                            'margin-bottom: 2px; text-align: center;'
-                        );
-                        const gridStyle = (
-                            `grid-template-columns: repeat(${width}, 8px);`
-                        );
-                        return `
-                            <div class="tile-item">
-                                <div style="${labelStyle}">
-                                    T${tileIndex + 1}
-                                </div>
-                                <div class="tile-grid" style="${gridStyle}">
-                                    ${zonesHtml}
-                                </div>
-                            </div>
-                        `;
-                    }).join('');
-
-                    const tileCount = dev.tile_devices.length;
-                    const toggleId = `zones-toggle-${dev.serial}`;
-                    const toggleClick = `toggleZones('${dev.serial}')`;
-                    zonesHtml = `
-                        <div
-                            class="zones-toggle"
-                            id="${toggleId}"
-                            onclick="${toggleClick}"
-                        >
-                            ▸ Show tiles (${tileCount})
-                        </div>
-                        <div id="zones-${dev.serial}" class="zones-display">
-                            <div class="tiles-container">
-                                ${tilesHtml}
-                            </div>
-                        </div>
-                    `;
-                } else if (dev.has_color && dev.color) {
-                    const rgb = hsbkToRgb(dev.color);
-                    const swatchStyle = `background: ${rgb};`;
-                    const textStyle = 'color: #888; font-size: 0.75em;';
-                    zonesHtml = `
-                        <div style="margin-top: 4px;">
-                            <span class="color-swatch" style="${swatchStyle}"></span>
-                            <span style="${textStyle}">Current color</span>
-                        </div>
-                    `;
-                }
-
-                return `
-                    <div class="device">
-                        <div class="device-header">
-                            <div>
-                                <div class="device-serial">${dev.serial}</div>
-                                <div class="device-label">${dev.label}</div>
-                            </div>
-                            <button
-                                class="btn btn-delete"
-                                onclick="deleteDevice('${dev.serial}')"
-                            >Del</button>
-                        </div>
-                        <div>
-                            ${powerBadge}
-                            <span class="badge badge-capability">P${dev.product}</span>
-                            ${capabilities.map(c => (
-                                `<span class="badge badge-capability">${c}</span>`
-                            )).join('')}
-                            ${capabilityBadges.join('')}
-                        </div>
-                        ${metadataHtml}
-                        ${zonesHtml}
-                    </div>
-                `;
-                }).join('');
-
-                document.getElementById('devices').innerHTML = devicesHtml;
-
-                // Restore toggle states for all devices
-                devices.forEach(dev => restoreToggleStates(dev.serial));
-            } catch (error) {
-                console.error('Failed to fetch devices:', error);
-                const errorStyle = 'color: #d32f2f;';
-                const errorHtml = (
-                    `<div class="no-devices" style="${errorStyle}">` +
-                    `Error loading devices: ${error.message}</div>`
-                );
-                document.getElementById('devices').innerHTML = errorHtml;
-            }
-        }
-
-        async function fetchActivity() {
-            try {
-                const response = await fetch('/api/activity');
-                if (!response.ok) {
-                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-                }
-                const activities = await response.json();
-
-                const activityHtml = activities.slice().reverse().map(act => {
-                    const timestamp = act.timestamp * 1000;
-                    const time = new Date(timestamp).toLocaleTimeString();
-                    const isRx = act.direction === 'rx';
-                    const dirClass = isRx ? 'activity-rx' : 'activity-tx';
-                    const dirLabel = isRx ? 'RX' : 'TX';
-                    const device = act.device || act.target || 'N/A';
-
-                    return `
-                        <div class="activity-item">
-                            <span class="activity-time">${time}</span>
-                            <span class="${dirClass}">${dirLabel}</span>
-                            <span class="activity-packet">${act.packet_name}</span>
-                            <span class="device-serial">${device}</span>
-                            <span style="color: #666">${act.addr}</span>
-                        </div>
-                    `;
-                }).join('');
-
-                const noActivity = '<div style="color: #666">No activity yet</div>';
-                const logElement = document.getElementById('activity-log');
-                logElement.innerHTML = activityHtml || noActivity;
-            } catch (error) {
-                console.error('Failed to fetch activity:', error);
-                const errorStyle = 'color: #d32f2f;';
-                const errorHtml = (
-                    `<div style="${errorStyle}">` +
-                    `Error loading activity: ${error.message}</div>`
-                );
-                document.getElementById('activity-log').innerHTML = errorHtml;
-            }
-        }
-
-        async function deleteDevice(serial) {
-            if (!confirm(`Delete device ${serial}?`)) return;
-
-            const response = await fetch(`/api/devices/${serial}`, {
-                method: 'DELETE'
-            });
-
-            if (response.ok) {
-                await updateAll();
-            } else {
-                alert('Failed to delete device');
-            }
-        }
-
-        async function removeAllDevices() {
-            const deviceCount = document.getElementById('device-count').textContent;
-            if (deviceCount === '0') {
-                alert('No devices to remove');
-                return;
-            }
-
-            const line1 = (
-                `Remove all ${deviceCount} device(s) from the server?\\n\\n`
-            );
-            const line2 = (
-                'This will stop all devices from ' +
-                'responding to LIFX protocol packets, '
-            );
-            const line3 = 'but will not delete persistent storage.';
-            const confirmMsg = line1 + line2 + line3;
-            if (!confirm(confirmMsg)) return;
-
-            const response = await fetch('/api/devices', {
-                method: 'DELETE'
-            });
-
-            if (response.ok) {
-                const result = await response.json();
-                alert(result.message);
-                await updateAll();
-            } else {
-                alert('Failed to remove all devices');
-            }
-        }
-
-        async function clearStorage() {
-            const confirmMsg = `Clear all persistent device state from storage?\\n\\n` +
-                `This will permanently delete all saved device state files. ` +
-                `Currently running devices will not be affected.\\n\\n` +
-                `This action cannot be undone.`;
-            if (!confirm(confirmMsg)) return;
-
-            const response = await fetch('/api/storage', {
-                method: 'DELETE'
-            });
-
-            if (response.ok) {
-                const result = await response.json();
-                alert(result.message);
-            } else if (response.status === 503) {
-                alert('Persistent storage is not enabled on this server');
-            } else {
-                alert('Failed to clear storage');
-            }
-        }
-
-        const addDeviceForm = document.getElementById('add-device-form');
-        addDeviceForm.addEventListener('submit', async (e) => {
-            e.preventDefault();
-
-            const productId = parseInt(document.getElementById('product-id').value);
-
-            const response = await fetch('/api/devices', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify({ product_id: productId })
-            });
-
-            if (response.ok) {
-                await updateAll();
-            } else {
-                const error = await response.json();
-                alert(`Failed to create device: ${error.detail}`);
-            }
-        });
-
-        async function updateAll() {
-            const activityEnabled = await fetchStats();
-            const tasks = [fetchDevices()];
-            if (activityEnabled) {
-                tasks.push(fetchActivity());
-            }
-            await Promise.all(tasks);
-        }
-
-        // Initial load
-        updateAll();
-
-        // Auto-refresh every 2 seconds
-        updateInterval = setInterval(updateAll, 2000);
-    </script>
+    <script src="/static/dashboard.js"></script>
 </body>
 </html>