402 lines
19 KiB
TypeScript
402 lines
19 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { Activity, Power, ZapOff, Zap, AlertTriangle, Lightbulb, Wind, Projector, Clock } from "lucide-react";
|
|
|
|
export default function PowerMonitoringPage() {
|
|
// =========================================================================
|
|
// 1. DEKLARASI STATE
|
|
// =========================================================================
|
|
const [rooms, setRooms] = useState<any[]>([]);
|
|
const [roomDeviceStatus, setRoomDeviceStatus] = useState<{ [roomId: string]: { [deviceName: string]: boolean } }>({});
|
|
|
|
// State khusus untuk menampung rincian 3 MCB di D101
|
|
const [powerDataD101, setPowerDataD101] = useState({ umum: 0, ac1: 0, ac2: 0 });
|
|
|
|
// 🌟 TAMBAHAN STATE UNTUK TIMER AUTO-CUTOFF
|
|
const [timer, setTimer] = useState({ is_active: false, off_time: "22:00", on_time: "05:00" });
|
|
const [isSavingTimer, setIsSavingTimer] = useState(false);
|
|
|
|
// =========================================================================
|
|
// 2. FUNGSI FETCH DATA DARI BACKEND
|
|
// =========================================================================
|
|
|
|
// A. Tarik Data Daya (Power / Watt)
|
|
const fetchPowerStatus = async () => {
|
|
try {
|
|
const response = await fetch("http://172.17.172.17:8080/api/hardware/power-status");
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
|
|
const umum = parseFloat(data.umum) || 0;
|
|
const ac1 = parseFloat(data.ac1) || 0;
|
|
const ac2 = parseFloat(data.ac2) || 0;
|
|
const totalD101 = umum + ac1 + ac2;
|
|
|
|
setPowerDataD101({ umum, ac1, ac2 });
|
|
|
|
// Update nilai power D101 di dalam array rooms
|
|
setRooms(prev => prev.map(room =>
|
|
room.name === "Kelas D101" ? { ...room, power: totalD101, lastUpdate: "Real-time" } : room
|
|
));
|
|
}
|
|
} catch (err) {
|
|
console.error("Gagal mengambil data daya:", err);
|
|
}
|
|
};
|
|
|
|
// B. Tarik Data Status Perangkat (Sinkronisasi Real-time)
|
|
const fetchDeviceStatus = async () => {
|
|
try {
|
|
const response = await fetch("http://172.17.172.17:8080/api/hardware/status");
|
|
const result = await response.json();
|
|
|
|
if (result.status === "success") {
|
|
const backendData = result.data;
|
|
|
|
setRoomDeviceStatus(prev => ({
|
|
...prev,
|
|
"room_1": { // room_1 diasumsikan sebagai D101
|
|
...prev["room_1"],
|
|
"Lampu 1": backendData.lampu1 === "on",
|
|
"Lampu 2": backendData.lampu2 === "on",
|
|
"AC": backendData.ac === "on",
|
|
"Proyektor": backendData.projector === "on",
|
|
}
|
|
}));
|
|
}
|
|
} catch (err) {
|
|
console.error("Gagal sinkronisasi status perangkat:", err);
|
|
}
|
|
};
|
|
|
|
// 🌟 C. Tarik Data Timer dari Golang
|
|
const fetchTimer = async () => {
|
|
try {
|
|
const res = await fetch("http://172.17.172.17:8080/api/power/timer");
|
|
const data = await res.json();
|
|
setTimer(data);
|
|
} catch (e) {
|
|
console.error("Gagal mengambil data timer:", e);
|
|
}
|
|
};
|
|
|
|
// =========================================================================
|
|
// 3. INISIALISASI & POLLING (AUTO-REFRESH)
|
|
// =========================================================================
|
|
useEffect(() => {
|
|
// Simulasi Data Ruangan
|
|
const dummyRooms = [
|
|
{ id: 1, name: "Kelas D101", power: 0, isRelayOn: true, lastUpdate: "Menunggu..." },
|
|
{ id: 2, name: "Kelas D102", power: 0, isRelayOn: false, lastUpdate: "2 mnt lalu" },
|
|
{ id: 3, name: "Kelas D103", power: 45, isRelayOn: true, lastUpdate: "Baru saja" },
|
|
{ id: 4, name: "Kelas D104", power: 0, isRelayOn: false, lastUpdate: "10 mnt lalu" },
|
|
];
|
|
setRooms(dummyRooms);
|
|
|
|
// Inisialisasi status default semua device OFF
|
|
const initialStatus: { [roomId: string]: { [deviceName: string]: boolean } } = {};
|
|
dummyRooms.forEach(room => {
|
|
initialStatus[`room_${room.id}`] = {
|
|
"Lampu 1": false,
|
|
"Lampu 2": false,
|
|
"AC": false,
|
|
"Proyektor": false,
|
|
};
|
|
});
|
|
setRoomDeviceStatus(initialStatus);
|
|
|
|
// Panggil fungsi awal
|
|
fetchTimer();
|
|
fetchPowerStatus();
|
|
fetchDeviceStatus();
|
|
|
|
const interval = setInterval(() => {
|
|
fetchPowerStatus();
|
|
fetchDeviceStatus();
|
|
}, 3000); // Polling 3 detik
|
|
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
|
|
// =========================================================================
|
|
// 4. FUNGSI KONTROL DEVICE, GLOBAL POWER & SIMPAN TIMER
|
|
// =========================================================================
|
|
|
|
// 🌟 D. Simpan Jadwal Timer ke Golang
|
|
const saveTimer = async () => {
|
|
setIsSavingTimer(true);
|
|
try {
|
|
const res = await fetch("http://172.17.172.17:8080/api/power/timer", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(timer)
|
|
});
|
|
if (res.ok) alert("Jadwal Auto-Cutoff Berhasil Disimpan!");
|
|
} catch (e) {
|
|
alert("Gagal menyimpan jadwal timer.");
|
|
} finally {
|
|
setIsSavingTimer(false);
|
|
}
|
|
};
|
|
|
|
const handleDeviceToggle = async (roomId: number, roomName: string, deviceName: string) => {
|
|
const roomIdKey = `room_${roomId}`;
|
|
const currentStatus = roomDeviceStatus[roomIdKey]?.[deviceName] || false;
|
|
const actionType = currentStatus ? "off" : "on";
|
|
|
|
if (currentStatus) {
|
|
const confirmMsg = `Apakah Anda yakin ingin mematikan ${deviceName} di ${roomName}?`;
|
|
if (!window.confirm(confirmMsg)) return;
|
|
}
|
|
|
|
if (roomName !== "Kelas D101") {
|
|
setRoomDeviceStatus(prev => ({ ...prev, [roomIdKey]: { ...prev[roomIdKey], [deviceName]: !currentStatus } }));
|
|
return;
|
|
}
|
|
|
|
let backendDevice = "";
|
|
if (deviceName === 'AC') backendDevice = "ac";
|
|
else if (deviceName === 'Proyektor') backendDevice = "projector";
|
|
else if (deviceName === 'Lampu 1') backendDevice = "lampu1";
|
|
else if (deviceName === 'Lampu 2') backendDevice = "lampu2";
|
|
|
|
setRoomDeviceStatus(prev => ({ ...prev, [roomIdKey]: { ...prev[roomIdKey], [deviceName]: !currentStatus } }));
|
|
|
|
try {
|
|
const response = await fetch("http://172.17.172.17:8080/api/hardware/control", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ device: backendDevice, action: actionType }),
|
|
});
|
|
|
|
if (!response.ok) {
|
|
setRoomDeviceStatus(prev => ({ ...prev, [roomIdKey]: { ...prev[roomIdKey], [deviceName]: currentStatus } }));
|
|
alert("Gagal mengontrol perangkat.");
|
|
}
|
|
} catch (error) {
|
|
setRoomDeviceStatus(prev => ({ ...prev, [roomIdKey]: { ...prev[roomIdKey], [deviceName]: currentStatus } }));
|
|
alert("GAGAL: Tidak dapat terhubung ke Server Golang.");
|
|
}
|
|
};
|
|
|
|
const handleGlobalPower = async (roomName: string, roomId: number, currentRelayStatus: boolean) => {
|
|
if (roomName === "Kelas D101") {
|
|
const actionType = currentRelayStatus ? "off" : "on";
|
|
const confirmMessage = currentRelayStatus
|
|
? `PERINGATAN FATAL: Anda yakin ingin MEMUTUS 3 MCB Daya di ${roomName}? (Proses berurutan ~3 detik)`
|
|
: `RESTORE POWER: Anda yakin ingin MENYALAKAN KEMBALI 3 MCB Daya di ${roomName}? (Proses berurutan ~3 detik)`;
|
|
|
|
if (!window.confirm(confirmMessage)) return;
|
|
|
|
setRooms(prev => prev.map(r => r.name === roomName ? { ...r, isRelayOn: !currentRelayStatus } : r));
|
|
|
|
try {
|
|
const response = await fetch("http://172.17.172.17:8080/api/power/global", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ action: actionType }),
|
|
});
|
|
|
|
if (response.ok) {
|
|
alert(`Daya di ${roomName} berhasil di-${actionType.toUpperCase()}!`);
|
|
fetchPowerStatus();
|
|
fetchDeviceStatus();
|
|
} else {
|
|
setRooms(prev => prev.map(r => r.name === roomName ? { ...r, isRelayOn: currentRelayStatus } : r));
|
|
alert("Gagal mengontrol MCB utama. Cek koneksi server.");
|
|
}
|
|
} catch (error) {
|
|
setRooms(prev => prev.map(r => r.name === roomName ? { ...r, isRelayOn: currentRelayStatus } : r));
|
|
alert("Terjadi kesalahan jaringan saat menghubungi server.");
|
|
}
|
|
} else {
|
|
const actionType = currentRelayStatus ? "Mematikan" : "Menyalakan";
|
|
if (window.confirm(`Simulasi ${actionType} daya di ${roomName}?`)) {
|
|
setRooms(prev => prev.map(r => r.name === roomName ? { ...r, isRelayOn: !currentRelayStatus, power: 0 } : r));
|
|
}
|
|
}
|
|
};
|
|
|
|
// =========================================================================
|
|
// 5. TAMPILAN UI (RENDER)
|
|
// =========================================================================
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex items-center gap-3 mb-6">
|
|
<div className="bg-blue-100 p-3 rounded-lg text-blue-600">
|
|
<Activity size={28} />
|
|
</div>
|
|
<div>
|
|
<h2 className="text-2xl font-bold text-gray-800">Power Monitoring & Control</h2>
|
|
<p className="text-gray-500 text-sm mt-1">Pantau konsumsi daya kWh meter dan kendalikan relay sirkuit ruangan.</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 🌟 PANEL BARU: NIGHT MODE (AUTO-CUTOFF TIMER) */}
|
|
<div className="bg-slate-900 rounded-xl p-5 shadow-lg border border-slate-800 flex flex-col lg:flex-row items-center justify-between gap-6 text-white mb-8">
|
|
|
|
<div className="flex items-center gap-4 w-full lg:w-auto">
|
|
<div className={`p-3 rounded-full transition-colors ${timer.is_active ? 'bg-blue-500' : 'bg-slate-700'}`}>
|
|
<Clock size={24} className="text-white" />
|
|
</div>
|
|
<div>
|
|
<h3 className="font-bold text-lg">Global Night Mode <span className="text-xs font-normal text-slate-400 bg-slate-800 px-2 py-0.5 rounded-full ml-2">Auto-Cutoff</span></h3>
|
|
<p className="text-xs text-slate-400 mt-1">Otomatis putus daya listrik (MCB) seluruh kelas pada jam malam.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col sm:flex-row items-center gap-4 w-full lg:w-auto">
|
|
{/* Input Jam */}
|
|
<div className="flex items-center gap-3 bg-slate-800 p-3 rounded-lg border border-slate-700 w-full sm:w-auto justify-center">
|
|
<div className="flex items-center gap-2">
|
|
<label className="text-xs font-bold text-slate-400">MATI:</label>
|
|
<input
|
|
type="time"
|
|
value={timer.off_time}
|
|
onChange={(e) => setTimer({...timer, off_time: e.target.value})}
|
|
className="bg-slate-900 border border-slate-600 rounded px-2 py-1 text-sm outline-none focus:border-blue-500 transition-colors"
|
|
disabled={timer.is_active}
|
|
/>
|
|
</div>
|
|
<span className="text-slate-600 font-bold">-</span>
|
|
<div className="flex items-center gap-2">
|
|
<label className="text-xs font-bold text-slate-400">NYALA:</label>
|
|
<input
|
|
type="time"
|
|
value={timer.on_time}
|
|
onChange={(e) => setTimer({...timer, on_time: e.target.value})}
|
|
className="bg-slate-900 border border-slate-600 rounded px-2 py-1 text-sm outline-none focus:border-blue-500 transition-colors"
|
|
disabled={timer.is_active}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Tombol Aksi */}
|
|
<div className="flex items-center gap-3 w-full sm:w-auto">
|
|
<button
|
|
onClick={() => setTimer({...timer, is_active: !timer.is_active})}
|
|
className={`px-4 py-2.5 text-sm font-bold rounded-lg border transition-all flex-1 sm:flex-none
|
|
${timer.is_active
|
|
? 'bg-red-500/10 text-red-500 border-red-500 hover:bg-red-500 hover:text-white shadow-[0_0_15px_rgba(239,68,68,0.2)]'
|
|
: 'bg-slate-800 text-slate-300 border-slate-600 hover:bg-slate-700'}`}
|
|
>
|
|
{timer.is_active ? 'NONAKTIFKAN' : 'AKTIFKAN'}
|
|
</button>
|
|
|
|
<button
|
|
onClick={saveTimer}
|
|
disabled={isSavingTimer}
|
|
className="px-6 py-2.5 text-sm font-bold bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-all flex-1 sm:flex-none shadow-lg shadow-blue-900/30 disabled:opacity-50 disabled:cursor-not-allowed flex justify-center"
|
|
>
|
|
{isSavingTimer ? 'Menyimpan...' : 'Simpan Jadwal'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* 🌟 AKHIR PANEL NIGHT MODE */}
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
|
|
{[...rooms].sort((a, b) => a.name.localeCompare(b.name)).map((room) => {
|
|
|
|
const roomIdKey = `room_${room.id}`;
|
|
const currentRoomStatus = roomDeviceStatus[roomIdKey] || {};
|
|
|
|
return (
|
|
<div key={room.id} className={`bg-white p-6 rounded-xl border-2 shadow-sm relative overflow-hidden flex flex-col transition-all
|
|
${room.name === "Kelas D101" ? "border-blue-300" : "border-gray-100"}`}>
|
|
|
|
<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-1">{room.name}</h3>
|
|
{room.name === "Kelas D101" && <p className="text-[10px] text-blue-500 font-bold mb-3">(Live Connected API)</p>}
|
|
{room.name !== "Kelas D101" && <p className="text-[10px] text-gray-400 font-bold mb-3">(Simulasi / Offline)</p>}
|
|
|
|
<div className="flex items-end gap-2 mb-2">
|
|
<span className={`text-5xl font-black tracking-tight ${room.power > 3000 ? 'text-red-500' : room.power > 1000 ? 'text-orange-500' : 'text-gray-800'}`}>
|
|
{typeof room.power === 'number' ? room.power.toFixed(1) : room.power}
|
|
</span>
|
|
<span className="text-gray-500 font-bold mb-1.5">Watts</span>
|
|
</div>
|
|
|
|
{/* RINCIAN KHUSUS D101 */}
|
|
{room.name === "Kelas D101" && (
|
|
<div className="bg-gray-50 p-2 rounded-lg flex justify-between text-[10px] text-gray-600 font-medium mb-4 border border-gray-100">
|
|
<span>Umum: <b className="text-gray-800">{powerDataD101.umum.toFixed(0)}W</b></span>
|
|
<span>AC1: <b className="text-gray-800">{powerDataD101.ac1.toFixed(0)}W</b></span>
|
|
<span>AC2: <b className="text-gray-800">{powerDataD101.ac2.toFixed(0)}W</b></span>
|
|
</div>
|
|
)}
|
|
{room.name !== "Kelas D101" && <div className="mb-4 h-8"></div>}
|
|
|
|
{room.power > 3000 && (
|
|
<div className="flex items-center gap-2 text-xs font-bold text-red-600 bg-red-50 p-2 rounded-lg mb-4">
|
|
<AlertTriangle size={14} /> Batas Daya Terlampaui!
|
|
</div>
|
|
)}
|
|
|
|
<div className="mt-auto 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.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>
|
|
|
|
<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>
|
|
|
|
<button
|
|
onClick={() => handleDeviceToggle(room.id, room.name, 'AC')}
|
|
disabled={!room.isRelayOn}
|
|
className={`flex justify-center items-center gap-2 p-2 rounded-lg text-xs font-bold transition-all
|
|
${currentRoomStatus['AC'] ? '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'] ? "animate-pulse" : ""} /> AC
|
|
</button>
|
|
|
|
<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} className={currentRoomStatus['Proyektor'] ? "fill-purple-500" : ""} /> Proyektor
|
|
</button>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between mt-6 pt-4 border-t border-gray-100">
|
|
<span className="text-xs text-gray-400 font-medium">Update: {room.lastUpdate}</span>
|
|
<button
|
|
onClick={() => handleGlobalPower(room.name, room.id, 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-green-50 text-green-600 hover:bg-green-600 hover:text-white border border-green-200 hover:border-green-600'}`}
|
|
>
|
|
{room.isRelayOn ? <><Power size={14} /> Cut Off Power</> : <><Zap size={14} /> Restore Power</>}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |