Spaces:
Running
Running
File size: 4,105 Bytes
0213045 c7e346b 0213045 c7e346b 0213045 c7e346b 0213045 c7e346b 0213045 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 |
// 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);
|