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

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

@ -8,34 +8,44 @@ export default function AdminDashboard() {
const [pendingBookings, setPendingBookings] = useState<any[]>([]);
const [roomStats, setRoomStats] = useState<any[]>([]);
const [loading, setLoading] = useState(true);
// STATE BARU: Penampung total daya asli khusus Kelas D101
const [d101Power, setD101Power] = useState<number>(0);
// STATE BARU: Khusus menyimpan TOTAL DAYA D101
const [d101TotalPower, setD101TotalPower] = useState<number>(0);
useEffect(() => {
fetchAdminData();
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);
// Refresh data konsumsi daya D101 lebih cepat (tiap 5 detik) agar sangat responsif
const intervalPower = setInterval(fetchD101Power, 5000);
// Refresh data konsumsi daya D101 setiap 3 detik (mengikuti halaman monitoring)
const intervalPower = setInterval(fetchD101Power, 3000);
return () => {
clearInterval(intervalAdmin);
clearInterval(intervalPower);
};
}, []);
// FUNGSI BARU: Mengambil data asli dari Smart Meter via Golang API
// =========================================================================
// FUNGSI BARU: Tarik Data Daya (Power / Watt) KHUSUS D101
// =========================================================================
const fetchD101Power = async () => {
try {
const res = await axios.get("http://172.17.172.17:8080/api/power-status");
// Kalkulasi total seluruh alat (Lampu/Proyektor + AC 1 + AC 2)
const totalWatt = (res.data.umum || 0) + (res.data.ac1 || 0) + (res.data.ac2 || 0);
setD101Power(parseFloat(totalWatt.toFixed(1)));
const response = await fetch("http://172.17.172.17:8080/api/hardware/power-status");
if (response.ok) {
const data = await response.json();
// 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) {
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 {
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", {
headers: { Authorization: `Bearer ${token}` }
});
const allBookings = bookRes.data.data || [];
// Saring hanya yang statusnya "Pending" atau kosong
const pendingOnly = allBookings.filter((b: any) => b.status === "Pending" || !b.status);
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", {
headers: { Authorization: `Bearer ${token}` }
});
const roomsWithDummyPower = (roomRes.data.data || []).map((room: any) => ({
...room,
// Berikan simulasi dummy HANYA untuk ruangan SELAIN D101
power_consumption: room.name === "Kelas D101" ? 0 : Math.floor(Math.random() * 15)
// Simulasi daya acak antara 0 sampai 15 Watt (D101 akan di-override di bagian render)
power_consumption: Math.floor(Math.random() * 15)
}));
setRoomStats(roomsWithDummyPower);
@ -74,12 +85,13 @@ export default function AdminDashboard() {
const handleAction = async (id: string, status: string) => {
try {
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`,
{ status: status },
{ headers: { Authorization: `Bearer ${token}` } }
);
alert(`Permintaan berhasil di-${status}`);
fetchAdminData();
fetchAdminData(); // Refresh data setelah aksi
} catch (err: any) {
console.error(err);
alert("Gagal memproses pendaftaran.");
@ -99,31 +111,33 @@ export default function AdminDashboard() {
{[...roomStats]
.sort((a, b) => a.name.localeCompare(b.name))
.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 displayedPower = isD101 ? d101Power : room.power_consumption;
const displayedPower = isD101 ? d101TotalPower : room.power_consumption;
const isPowerActive = displayedPower > 0;
return (
<div key={room.room_id}
className={`bg-white p-5 rounded-xl border shadow-sm transition-all
<div key={room.room_id} 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'}`}>
<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'}`}>
{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>
<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 className="flex items-end gap-2">
<span className={`text-3xl font-black ${isD101 ? 'text-blue-700' : 'text-gray-800'}`}>
{displayedPower}
{displayedPower.toFixed(1)}
</span>
<span className="text-gray-500 font-bold mb-1">Watts</span>
</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>
);
})}