5103022014/Skripsi_Valentino_5103022014
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

.

Browse Source
This commit is contained in:
[Valentino Heman Budiarto] 2026-06-22 16:26:44 +07:00
parent 9141b48056
commit 427ce3d5b3
1 changed files with 40 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
frontend/app/admin/page.tsx
View File

@ -9,17 +9,17 @@ export default function AdminDashboard() {
const [roomStats, setRoomStats] = useState<any[]>([]); const [roomStats, setRoomStats] = useState<any[]>([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
// STATE BARU: Penampung total daya asli khusus Kelas D101 // STATE BARU: Khusus menyimpan TOTAL DAYA D101
const [d101Power, setD101Power] = useState<number>(0); const [d101TotalPower, setD101TotalPower] = useState<number>(0);
useEffect(() => { useEffect(() => {
fetchAdminData(); fetchAdminData();
fetchD101Power(); // Panggil fungsi daya saat pertama kali render fetchD101Power(); // Panggil fungsi daya saat pertama kali render
// Refresh data ruangan setiap 10 detik // Refresh data admin (ruangan & booking) setiap 10 detik
const intervalAdmin = setInterval(fetchAdminData, 10000); const intervalAdmin = setInterval(fetchAdminData, 10000);
// Refresh data konsumsi daya D101 lebih cepat (tiap 5 detik) agar sangat responsif // Refresh data konsumsi daya D101 setiap 3 detik (mengikuti halaman monitoring)
const intervalPower = setInterval(fetchD101Power, 5000); const intervalPower = setInterval(fetchD101Power, 3000);
return () => { return () => {
clearInterval(intervalAdmin); clearInterval(intervalAdmin);
@ -27,15 +27,25 @@ export default function AdminDashboard() {
}; };
}, []); }, []);
// FUNGSI BARU: Mengambil data asli dari Smart Meter via Golang API // =========================================================================
// FUNGSI BARU: Tarik Data Daya (Power / Watt) KHUSUS D101
// =========================================================================
const fetchD101Power = async () => { const fetchD101Power = async () => {
try { try {
const res = await axios.get("http://172.17.172.17:8080/api/power-status"); const response = await fetch("http://172.17.172.17:8080/api/hardware/power-status");
// Kalkulasi total seluruh alat (Lampu/Proyektor + AC 1 + AC 2) if (response.ok) {
const totalWatt = (res.data.umum || 0) + (res.data.ac1 || 0) + (res.data.ac2 || 0); const data = await response.json();
setD101Power(parseFloat(totalWatt.toFixed(1)));
// Kalkulasi total watt
const umum = parseFloat(data.umum) || 0;
const ac1 = parseFloat(data.ac1) || 0;
const ac2 = parseFloat(data.ac2) || 0;
const totalD101 = umum + ac1 + ac2;
setD101TotalPower(totalD101);
}
} catch (err) { } catch (err) {
console.error("Gagal mengambil data daya aktual D101", err); console.error("Gagal mengambil data daya D101:", err);
} }
}; };
@ -43,24 +53,25 @@ export default function AdminDashboard() {
try { try {
const token = localStorage.getItem("token"); const token = localStorage.getItem("token");
// 1. Ambil SEMUA booking // 1. Ambil SEMUA booking pakai endpoint yang sudah ada, lalu filter di Frontend
const bookRes = await axios.get("http://172.17.172.17:8080/api/bookings", { const bookRes = await axios.get("http://172.17.172.17:8080/api/bookings", {
headers: { Authorization: `Bearer ${token}` } headers: { Authorization: `Bearer ${token}` }
}); });
const allBookings = bookRes.data.data || []; const allBookings = bookRes.data.data || [];
// Saring hanya yang statusnya "Pending" atau kosong
const pendingOnly = allBookings.filter((b: any) => b.status === "Pending" || !b.status); const pendingOnly = allBookings.filter((b: any) => b.status === "Pending" || !b.status);
setPendingBookings(pendingOnly); setPendingBookings(pendingOnly);
// 2. Ambil daftar ruangan // 2. Ambil daftar ruangan biasa, lalu kita sisipkan "Dummy Power" untuk UI
const roomRes = await axios.get("http://172.17.172.17:8080/api/rooms", { const roomRes = await axios.get("http://172.17.172.17:8080/api/rooms", {
headers: { Authorization: `Bearer ${token}` } headers: { Authorization: `Bearer ${token}` }
}); });
const roomsWithDummyPower = (roomRes.data.data || []).map((room: any) => ({ const roomsWithDummyPower = (roomRes.data.data || []).map((room: any) => ({
...room, ...room,
// Berikan simulasi dummy HANYA untuk ruangan SELAIN D101 // Simulasi daya acak antara 0 sampai 15 Watt (D101 akan di-override di bagian render)
power_consumption: room.name === "Kelas D101" ? 0 : Math.floor(Math.random() * 15) power_consumption: Math.floor(Math.random() * 15)
})); }));
setRoomStats(roomsWithDummyPower); setRoomStats(roomsWithDummyPower);
@ -74,12 +85,13 @@ export default function AdminDashboard() {
const handleAction = async (id: string, status: string) => { const handleAction = async (id: string, status: string) => {
try { try {
const token = localStorage.getItem("token"); const token = localStorage.getItem("token");
// Mengirim status 'Approved' atau 'Rejected' ke backend
await axios.put(`http://172.17.172.17:8080/api/bookings/${id}/status`, await axios.put(`http://172.17.172.17:8080/api/bookings/${id}/status`,
{ status: status }, { status: status },
{ headers: { Authorization: `Bearer ${token}` } } { headers: { Authorization: `Bearer ${token}` } }
); );
alert(`Permintaan berhasil di-${status}`); alert(`Permintaan berhasil di-${status}`);
fetchAdminData(); fetchAdminData(); // Refresh data setelah aksi
} catch (err: any) { } catch (err: any) {
console.error(err); console.error(err);
alert("Gagal memproses pendaftaran."); alert("Gagal memproses pendaftaran.");
@ -99,31 +111,33 @@ export default function AdminDashboard() {
{[...roomStats] {[...roomStats]
.sort((a, b) => a.name.localeCompare(b.name)) .sort((a, b) => a.name.localeCompare(b.name))
.map((room) => { .map((room) => {
// LOGIKA INJEKSI DATA ASLI: Cek apakah kelas ini adalah D101
// LOGIKA INJEKSI: Timpa nilai dummy dengan daya asli jika ini Kelas D101
const isD101 = room.name === "Kelas D101"; const isD101 = room.name === "Kelas D101";
const displayedPower = isD101 ? d101Power : room.power_consumption; const displayedPower = isD101 ? d101TotalPower : room.power_consumption;
const isPowerActive = displayedPower > 0; const isPowerActive = displayedPower > 0;
return ( return (
<div key={room.room_id} <div key={room.room_id} className={`bg-white p-5 rounded-xl border shadow-sm transition-all
className={`bg-white p-5 rounded-xl border shadow-sm transition-all
${isD101 ? 'border-blue-200 border-l-4 border-l-blue-500 bg-blue-50/10' : 'border-gray-100'}`}> ${isD101 ? 'border-blue-200 border-l-4 border-l-blue-500 bg-blue-50/10' : 'border-gray-100'}`}>
<div className="flex justify-between items-start mb-3"> <div className="flex justify-between items-start mb-3">
<span className={`text-sm font-bold uppercase tracking-tight ${isD101 ? 'text-blue-700' : 'text-gray-400'}`}> <span className={`text-sm font-bold uppercase tracking-tight ${isD101 ? 'text-blue-700' : 'text-gray-400'}`}>
{room.name} {isD101 && <span className="ml-1 text-[9px] bg-blue-100 text-blue-700 px-2 py-0.5 rounded-full">SENSOR ASLI</span>} {room.name} {isD101 && <span className="ml-2 text-[8px] bg-blue-500 text-white px-2 py-0.5 rounded-full">REAL SENSOR</span>}
</span> </span>
<div className={`h-3 w-3 rounded-full ${isPowerActive ? (isD101 ? 'bg-green-500 animate-pulse' : 'bg-orange-500 animate-pulse') : 'bg-gray-300'}`} /> <div className={`h-3 w-3 rounded-full ${isPowerActive ? (isD101 ? 'bg-green-500 animate-pulse' : 'bg-orange-500 animate-pulse') : 'bg-gray-300'}`} />
</div> </div>
<div className="flex items-end gap-2"> <div className="flex items-end gap-2">
<span className={`text-3xl font-black ${isD101 ? 'text-blue-700' : 'text-gray-800'}`}> <span className={`text-3xl font-black ${isD101 ? 'text-blue-700' : 'text-gray-800'}`}>
{displayedPower} {displayedPower.toFixed(1)}
</span> </span>
<span className="text-gray-500 font-bold mb-1">Watts</span> <span className="text-gray-500 font-bold mb-1">Watts</span>
</div> </div>
<p className="text-[10px] text-gray-400 mt-2 font-medium">Last updated: Just now</p> <p className="text-[10px] text-gray-400 mt-2 font-medium">
{isD101 ? "Live auto-update via IoT" : "Last updated: Just now"}
</p>
</div> </div>
); );
})} })}