static/js/script.js

// Cập nhật giao diện dựa trên trạng thái đèn
function updateUI(isOn) {
    const bulb = document.getElementById('bulb');
    const statusText = document.getElementById('statusText');
    
    if (isOn) {
        bulb.classList.add('on');
        statusText.classList.add('on');
        statusText.textContent = 'Đèn đang bật';
    } else {
        bulb.classList.remove('on');
        statusText.classList.remove('on');
        statusText.textContent = 'Đèn đang tắt';
    }
}

// Lấy trạng thái đèn hiện tại
async function getStatus() {
    try {
        const response = await fetch('/api/light/status');
        if (!response.ok) throw new Error('Server error');
        const data = await response.json();
        updateUI(data.on);
    } catch (error) {
        console.error('Lỗi khi lấy trạng thái:', error);
        // Không hiện alert, chỉ log lỗi
    }
}

// Bật/tắt đèn
async function toggleLight() {
    try {
        const response = await fetch('/api/light/toggle', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            }
        });
        if (!response.ok) throw new Error('Server error');
        const data = await response.json();
        updateUI(data.on);
        showNotification(data.message);
    } catch (error) {
        console.error('Lỗi khi chuyển đổi đèn:', error);
        showNotification('⚠️ Lỗi kết nối server!');
    }
}

// Bật đèn
async function turnOn() {
    try {
        const response = await fetch('/api/light/on', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            }
        });
        const data = await response.json();
        updateUI(data.on);
        showNotification(data.message);
    } catch (error) {
        console.error('Lỗi khi bật đèn:', error);
        alert('Không thể kết nối với server!');
    }
}

// Tắt đèn
async function turnOff() {
    try {
        const response = await fetch('/api/light/off', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            }
        });
        const data = await response.json();
        updateUI(data.on);
        showNotification(data.message);
    } catch (error) {
        console.error('Lỗi khi tắt đèn:', error);
        alert('Không thể kết nối với server!');
    }
}

// Hiển thị thông báo
function showNotification(message) {
    const notification = document.createElement('div');
    notification.className = 'notification';
    notification.textContent = message;
    notification.style.cssText = `
        position: fixed;
        top: 20px;
        right: 20px;
        background: #333;
        color: white;
        padding: 12px 20px;
        border-radius: 5px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        z-index: 1000;
        font-size: 0.9em;
        animation: slideIn 0.3s ease;
    `;
    
    document.body.appendChild(notification);
    
    setTimeout(() => {
        notification.style.animation = 'slideOut 0.3s ease';
        setTimeout(() => notification.remove(), 300);
    }, 2500);
}

// Thêm CSS cho animation
const style = document.createElement('style');
style.textContent = `
    @keyframes slideIn {
        from {
            transform: translateX(400px);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }
    
    @keyframes slideOut {
        from {
            transform: translateX(0);
            opacity: 1;
        }
        to {
            transform: translateX(400px);
            opacity: 0;
        }
    }
`;
document.head.appendChild(style);

// Lấy trạng thái khi trang load
window.addEventListener('DOMContentLoaded', getStatus);

// Cập nhật trạng thái mỗi 5 giây
setInterval(getStatus, 5000);