25 Mei 2026
This commit is contained in:
[Valentino Heman Budiarto]
@@ -1,12 +1,39 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
// 1. IMPORT IKON BARU DI SINI
|
||||
// Import ikon yang diperlukan
|
||||
import { Activity, Power, ZapOff, AlertTriangle, Lightbulb, Wind, Projector } from "lucide-react";
|
||||
|
||||
export default function PowerMonitoringPage() {
|
||||
|
||||
const fetchPowerStatus = async () => {
|
||||
try {
|
||||
const response = await fetch("http://localhost:8080/api/hardware/power-status");
|
||||
const data = await response.json();
|
||||
|
||||
// Asumsikan data dari HA berupa string angka, kita update ke room D101
|
||||
setRooms(prev => prev.map(room =>
|
||||
room.name === "Kelas D101" ? { ...room, power: parseFloat(data.power) || 0 } : room
|
||||
));
|
||||
} catch (err) {
|
||||
console.error("Gagal mengambil data daya:", err);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// Ambil data awal
|
||||
fetchPowerStatus();
|
||||
|
||||
// Set interval untuk update setiap 5 detik agar real-time sesuai HA
|
||||
const interval = setInterval(fetchPowerStatus, 5000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
const [rooms, setRooms] = useState<any[]>([]);
|
||||
|
||||
// 1. STATE BARU: Dipisahkan berdasarkan ID Ruangan agar tidak bentrok
|
||||
const [roomDeviceStatus, setRoomDeviceStatus] = useState<{ [roomId: string]: { [deviceName: string]: boolean } }>({});
|
||||
|
||||
useEffect(() => {
|
||||
// Simulasi Data Ruangan dari IoT
|
||||
const dummyRooms = [
|
||||
@@ -16,23 +43,71 @@ export default function PowerMonitoringPage() {
|
||||
{ id: 4, name: "Kelas D104", power: 0, isRelayOn: false, lastUpdate: "10 mnt lalu" },
|
||||
];
|
||||
setRooms(dummyRooms);
|
||||
|
||||
// Inisialisasi status default (semua OFF) untuk setiap ruangan
|
||||
const initialStatus: { [roomId: string]: { [deviceName: string]: boolean } } = {};
|
||||
dummyRooms.forEach(room => {
|
||||
initialStatus[`room_${room.id}`] = {
|
||||
"Lampu 1": false,
|
||||
"Lampu 2": false,
|
||||
"AC 1": false,
|
||||
"Proyektor": false,
|
||||
};
|
||||
});
|
||||
setRoomDeviceStatus(initialStatus);
|
||||
}, []);
|
||||
|
||||
const handleCutOff = (roomName: string) => {
|
||||
if(confirm(`PERINGATAN: Anda yakin ingin mematikan daya secara paksa di ${roomName}?`)) {
|
||||
alert(`Sinyal pemutusan daya dikirim ke Relay Master ${roomName}.`);
|
||||
// Nanti di sini kamu pasang axios.post ke Golang -> MQTT -> ESP32
|
||||
// 2. FUNGSI HANDLE TOGGLE YANG DIPERBAIKI (Menerima roomId)
|
||||
const handleDeviceToggle = async (roomId: number, roomName: string, deviceName: string) => {
|
||||
const roomIdKey = `room_${roomId}`;
|
||||
const currentStatus = roomDeviceStatus[roomIdKey]?.[deviceName] || false;
|
||||
const actionType = currentStatus ? "off" : "on";
|
||||
|
||||
const confirmMsg = `Apakah Anda yakin ingin mematikan ${deviceName} di ${roomName}?`;
|
||||
if (currentStatus && !confirm(confirmMsg)) return;
|
||||
|
||||
let backendDevice = "";
|
||||
if (deviceName === 'AC 1') backendDevice = "ac";
|
||||
else if (deviceName === 'Proyektor') backendDevice = "projector";
|
||||
else if (deviceName === 'Lampu 1') backendDevice = "lampu1";
|
||||
else if (deviceName === 'Lampu 2') backendDevice = "lampu2";
|
||||
|
||||
try {
|
||||
// Tembak API Golang (Ganti dengan endpoint aslimu jika berbeda)
|
||||
const response = await fetch("http://localhost:8080/api/hardware/control", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ device: backendDevice, action: actionType }),
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
// 3. UPDATE STATE HANYA UNTUK RUANGAN YANG DIKLIK
|
||||
setRoomDeviceStatus(prev => ({
|
||||
...prev,
|
||||
[roomIdKey]: {
|
||||
...prev[roomIdKey],
|
||||
[deviceName]: !currentStatus,
|
||||
},
|
||||
}));
|
||||
} else {
|
||||
const errorData = await response.json();
|
||||
alert(`GAGAL: ${errorData.error || response.statusText}`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error API:", error);
|
||||
alert("GAGAL: Tidak dapat terhubung ke Server Golang.");
|
||||
}
|
||||
};
|
||||
|
||||
// 2. FUNGSI BARU UNTUK KONTROL PERANGKAT SPESIFIK
|
||||
const handleDeviceToggle = (roomName: string, deviceName: string) => {
|
||||
alert(`Mengirim sinyal IoT untuk menyalakan/mematikan [${deviceName}] di [${roomName}]...`);
|
||||
// Nanti ganti dengan axios.put(`http://localhost:8080/api/rooms/.../device`, { device: deviceName })
|
||||
const handleCutOff = (roomName: string) => {
|
||||
if (confirm(`PERINGATAN: Anda yakin ingin mematikan daya secara paksa di ${roomName}?`)) {
|
||||
alert(`Sinyal pemutusan daya dikirim ke Relay Master ${roomName}.`);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header section... */}
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="bg-blue-100 p-3 rounded-lg text-blue-600">
|
||||
<Activity size={28} />
|
||||
@@ -44,92 +119,110 @@ export default function PowerMonitoringPage() {
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
|
||||
{/* SUDAH DITAMBAHKAN PENGURUTAN ABJAD AGAR RAPI */}
|
||||
{[...rooms]
|
||||
.sort((a, b) => a.name.localeCompare(b.name))
|
||||
.map((room) => (
|
||||
<div key={room.id} className="bg-white p-6 rounded-xl border border-gray-100 shadow-sm relative overflow-hidden flex flex-col">
|
||||
|
||||
{/* Indikator Status di Pojok Kanan Atas */}
|
||||
<div className={`absolute top-0 right-0 px-4 py-1.5 text-[10px] font-black uppercase tracking-wider rounded-bl-xl
|
||||
${room.isRelayOn ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}
|
||||
>
|
||||
{room.isRelayOn ? 'Sirkuit Aktif' : 'Sirkuit Terputus'}
|
||||
</div>
|
||||
{[...rooms].sort((a, b) => a.name.localeCompare(b.name)).map((room) => {
|
||||
|
||||
// Ambil status spesifik untuk ruangan ini
|
||||
const roomIdKey = `room_${room.id}`;
|
||||
const currentRoomStatus = roomDeviceStatus[roomIdKey] || {};
|
||||
|
||||
<h3 className="text-lg font-bold text-gray-800 mb-4">{room.name}</h3>
|
||||
|
||||
<div className="flex items-end gap-2 mb-6">
|
||||
<span className={`text-5xl font-black tracking-tight ${room.power > 1000 ? 'text-orange-500' : 'text-gray-800'}`}>
|
||||
{room.power}
|
||||
</span>
|
||||
<span className="text-gray-500 font-bold mb-1.5">Watts</span>
|
||||
</div>
|
||||
|
||||
{room.power > 1000 && (
|
||||
<div className="flex items-center gap-2 text-xs font-bold text-orange-600 bg-orange-50 p-2 rounded-lg mb-4">
|
||||
<AlertTriangle size={14} /> Beban Tinggi Terdeteksi!
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 3. PANEL KONTROL IoT BARU */}
|
||||
<div className="mt-2 mb-6 pt-4 border-t border-gray-100">
|
||||
<p className="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-3">IoT Device Control</p>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<button
|
||||
onClick={() => handleDeviceToggle(room.name, 'Lampu 1')}
|
||||
disabled={!room.isRelayOn}
|
||||
className="flex justify-center items-center gap-2 p-2 bg-blue-50 text-blue-600 rounded-lg text-xs font-bold hover:bg-blue-100 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<Lightbulb size={14} /> Lampu 1
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDeviceToggle(room.name, 'Lampu 2')}
|
||||
disabled={!room.isRelayOn}
|
||||
className="flex justify-center items-center gap-2 p-2 bg-gray-50 text-gray-600 rounded-lg text-xs font-bold hover:bg-gray-200 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<Lightbulb size={14} /> Lampu 2
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDeviceToggle(room.name, 'AC 1')}
|
||||
disabled={!room.isRelayOn}
|
||||
className="flex justify-center items-center gap-2 p-2 bg-gray-50 text-gray-600 rounded-lg text-xs font-bold hover:bg-gray-200 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<Wind size={14} /> AC 1
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDeviceToggle(room.name, 'AC 2')}
|
||||
disabled={!room.isRelayOn}
|
||||
className="flex justify-center items-center gap-2 p-2 bg-gray-50 text-gray-600 rounded-lg text-xs font-bold hover:bg-gray-200 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<Wind size={14} /> AC 2
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDeviceToggle(room.name, 'Proyektor')}
|
||||
disabled={!room.isRelayOn}
|
||||
className="col-span-2 flex justify-center items-center gap-2 p-2 bg-purple-50 text-purple-600 rounded-lg text-xs font-bold hover:bg-purple-100 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<Projector size={14} /> Proyektor
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between mt-auto pt-4 border-t border-gray-100">
|
||||
<span className="text-xs text-gray-400 font-medium">Update: {room.lastUpdate}</span>
|
||||
return (
|
||||
<div key={room.id} className="bg-white p-6 rounded-xl border border-gray-100 shadow-sm relative overflow-hidden flex flex-col">
|
||||
|
||||
<button
|
||||
onClick={() => handleCutOff(room.name)}
|
||||
disabled={!room.isRelayOn}
|
||||
className={`flex items-center gap-2 px-4 py-2 rounded-lg text-xs font-bold transition-all
|
||||
${room.isRelayOn
|
||||
? 'bg-red-50 text-red-600 hover:bg-red-600 hover:text-white border border-red-200 hover:border-red-600'
|
||||
: 'bg-gray-100 text-gray-400 cursor-not-allowed'}`}
|
||||
>
|
||||
{room.isRelayOn ? <><Power size={14} /> Cut Off Power</> : <><ZapOff size={14} /> Offline</>}
|
||||
</button>
|
||||
{/* Status Badge */}
|
||||
<div className={`absolute top-0 right-0 px-4 py-1.5 text-[10px] font-black uppercase tracking-wider rounded-bl-xl
|
||||
${room.isRelayOn ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}>
|
||||
{room.isRelayOn ? 'Sirkuit Aktif' : 'Sirkuit Terputus'}
|
||||
</div>
|
||||
|
||||
<h3 className="text-lg font-bold text-gray-800 mb-4">{room.name}</h3>
|
||||
|
||||
{/* Power display... */}
|
||||
<div className="flex items-end gap-2 mb-6">
|
||||
<span className={`text-5xl font-black tracking-tight ${room.power > 1000 ? 'text-orange-500' : 'text-gray-800'}`}>
|
||||
{room.power}
|
||||
</span>
|
||||
<span className="text-gray-500 font-bold mb-1.5">Watts</span>
|
||||
</div>
|
||||
|
||||
{room.power > 1000 && (
|
||||
<div className="flex items-center gap-2 text-xs font-bold text-orange-600 bg-orange-50 p-2 rounded-lg mb-4">
|
||||
<AlertTriangle size={14} /> Beban Tinggi Terdeteksi!
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 3. PANEL KONTROL IoT BARU DENGAN LOGIKA WARNA DIPERBAIKI */}
|
||||
<div className="mt-2 mb-6 pt-4 border-t border-gray-100">
|
||||
<p className="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-3">IoT Device Control</p>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
|
||||
{/* LAMPU 1 */}
|
||||
<button
|
||||
onClick={() => handleDeviceToggle(room.id, room.name, 'Lampu 1')}
|
||||
disabled={!room.isRelayOn}
|
||||
className={`flex justify-center items-center gap-2 p-2 rounded-lg text-xs font-bold transition-all
|
||||
${currentRoomStatus['Lampu 1']
|
||||
? 'bg-yellow-100 text-yellow-600 border border-yellow-200'
|
||||
: 'bg-gray-50 text-gray-400 border border-transparent'}`}
|
||||
>
|
||||
<Lightbulb size={14} className={currentRoomStatus['Lampu 1'] ? "fill-yellow-500" : ""} /> Lampu 1
|
||||
</button>
|
||||
|
||||
{/* LAMPU 2 */}
|
||||
<button
|
||||
onClick={() => handleDeviceToggle(room.id, room.name, 'Lampu 2')}
|
||||
disabled={!room.isRelayOn}
|
||||
className={`flex justify-center items-center gap-2 p-2 rounded-lg text-xs font-bold transition-all
|
||||
${currentRoomStatus['Lampu 2']
|
||||
? 'bg-yellow-100 text-yellow-600 border border-yellow-200'
|
||||
: 'bg-gray-50 text-gray-400 border border-transparent'}`}
|
||||
>
|
||||
<Lightbulb size={14} className={currentRoomStatus['Lampu 2'] ? "fill-yellow-500" : ""} /> Lampu 2
|
||||
</button>
|
||||
|
||||
{/* AC 1 */}
|
||||
<button
|
||||
onClick={() => handleDeviceToggle(room.id, room.name, 'AC 1')}
|
||||
disabled={!room.isRelayOn}
|
||||
className={`flex justify-center items-center gap-2 p-2 rounded-lg text-xs font-bold transition-all
|
||||
${currentRoomStatus['AC 1']
|
||||
? 'bg-blue-100 text-blue-600 border border-blue-200'
|
||||
: 'bg-gray-50 text-gray-400 border border-transparent'}`}
|
||||
>
|
||||
<Wind size={14} className={currentRoomStatus['AC 1'] ? "animate-pulse" : ""} /> AC 1
|
||||
</button>
|
||||
|
||||
{/* PROYEKTOR */}
|
||||
<button
|
||||
onClick={() => handleDeviceToggle(room.id, room.name, 'Proyektor')}
|
||||
disabled={!room.isRelayOn}
|
||||
className={`flex justify-center items-center gap-2 p-2 rounded-lg text-xs font-bold transition-all
|
||||
${currentRoomStatus['Proyektor']
|
||||
? 'bg-purple-100 text-purple-600 border border-purple-200'
|
||||
: 'bg-gray-50 text-gray-400 border border-transparent'}`}
|
||||
>
|
||||
<Projector size={14} /> Proyektor
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer... */}
|
||||
<div className="flex items-center justify-between mt-auto pt-4 border-t border-gray-100">
|
||||
<span className="text-xs text-gray-400 font-medium">Update: {room.lastUpdate}</span>
|
||||
<button
|
||||
onClick={() => handleCutOff(room.name)}
|
||||
disabled={!room.isRelayOn}
|
||||
className={`flex items-center gap-2 px-4 py-2 rounded-lg text-xs font-bold transition-all
|
||||
${room.isRelayOn
|
||||
? 'bg-red-50 text-red-600 hover:bg-red-600 hover:text-white border border-red-200 hover:border-red-600'
|
||||
: 'bg-gray-100 text-gray-400 cursor-not-allowed'}`}
|
||||
>
|
||||
{room.isRelayOn ? <><Power size={14} /> Cut Off Power</> : <><ZapOff size={14} /> Offline</>}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user