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

fetch

Browse Source
This commit is contained in:
[Valentino Heman Budiarto] 2026-05-29 20:26:41 +07:00
parent 1fb6a2004d
commit c821d9795d
1 changed files with 19 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
frontend/app/dashboard/page.tsx
View File

@ -20,6 +20,7 @@ export default function Dashboard() {
const [user, setUser] = useState<any>(null); const [user, setUser] = useState<any>(null);
const [rooms, setRooms] = useState<Room[]>([]); const [rooms, setRooms] = useState<Room[]>([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [apiError, setApiError] = useState(""); // State baru untuk menangkap pesan error API
// --- STATE UNTUK MODAL BOOKING --- // --- STATE UNTUK MODAL BOOKING ---
const [isModalOpen, setIsModalOpen] = useState(false); const [isModalOpen, setIsModalOpen] = useState(false);
@ -45,13 +46,15 @@ export default function Dashboard() {
const fetchRooms = async (token: string) => { const fetchRooms = async (token: string) => {
try { try {
const response = await axios.get("http://172.17.110.6:8080/api/rooms", { // UBAH IP KE SERVER KAMPUS (172.17.172.17)
const response = await axios.get("http://172.17.172.17:8080/api/rooms", {
headers: { Authorization: `Bearer ${token}` }, headers: { Authorization: `Bearer ${token}` },
}); });
setRooms(response.data.data); setRooms(response.data.data);
} catch (error) { } catch (error: any) {
console.error("Error:", error); console.error("Error fetching rooms:", error);
router.push("/login"); // Jangan langsung tendang ke login, tampilkan pesan errornya di layar
setApiError(error.response?.data?.error || "Gagal memuat data ruangan dari server.");
} finally { } finally {
setLoading(false); setLoading(false);
} }
@ -61,7 +64,6 @@ export default function Dashboard() {
const openBookingModal = (room: Room) => { const openBookingModal = (room: Room) => {
setSelectedRoom(room); setSelectedRoom(room);
setIsModalOpen(true); setIsModalOpen(true);
// Reset form
setStartTime(""); setStartTime("");
setEndTime(""); setEndTime("");
setPurpose(""); setPurpose("");
@ -78,8 +80,9 @@ export default function Dashboard() {
const startISO = new Date(startTime).toISOString(); const startISO = new Date(startTime).toISOString();
const endISO = new Date(endTime).toISOString(); const endISO = new Date(endTime).toISOString();
// UBAH IP KE SERVER KAMPUS (172.17.172.17)
await axios.post( await axios.post(
"http://172.17.110.6:8080/api/bookings", "http://172.17.172.17:8080/api/bookings",
{ {
room_id: selectedRoom?.room_id, room_id: selectedRoom?.room_id,
start_time: startISO, start_time: startISO,
@ -92,7 +95,8 @@ export default function Dashboard() {
); );
alert("Booking Berhasil Diajukan! Menunggu persetujuan."); alert("Booking Berhasil Diajukan! Menunggu persetujuan.");
setIsModalOpen(false); // Tutup modal setIsModalOpen(false);
fetchRooms(token!); // Refresh data ruangan setelah booking
} catch (error: any) { } catch (error: any) {
const errorMsg = error.response?.data?.error || "Gagal melakukan booking."; const errorMsg = error.response?.data?.error || "Gagal melakukan booking.";
@ -102,7 +106,7 @@ export default function Dashboard() {
} }
}; };
if (loading) return <div className="p-10 text-center">Memuat data...</div>; if (loading) return <div className="p-10 text-center text-blue-600 font-semibold text-lg animate-pulse">Memuat data kelas S-CLASS...</div>;
return ( return (
<div className="w-full"> <div className="w-full">
@ -119,9 +123,15 @@ export default function Dashboard() {
</button> </button>
</div> </div>
{/* Jika terjadi error koneksi ke Backend */}
{apiError && (
<div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-6">
<strong>Terjadi Kesalahan:</strong> {apiError}
</div>
)}
{/* Grid Daftar Kelas */} {/* Grid Daftar Kelas */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{/* TAMBAHKAN PENGURUTAN ABJAD DI SINI */}
{[...rooms] {[...rooms]
.sort((a, b) => a.name.localeCompare(b.name)) .sort((a, b) => a.name.localeCompare(b.name))
.map((room) => ( .map((room) => (
@ -161,7 +171,6 @@ export default function Dashboard() {
<div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4 backdrop-blur-sm"> <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4 backdrop-blur-sm">
<div className="bg-white rounded-2xl w-full max-w-md shadow-xl overflow-hidden border border-gray-100"> <div className="bg-white rounded-2xl w-full max-w-md shadow-xl overflow-hidden border border-gray-100">
{/* Header Modal */}
<div className="bg-blue-600 p-4 flex justify-between items-center text-white"> <div className="bg-blue-600 p-4 flex justify-between items-center text-white">
<h3 className="font-semibold text-lg">Form Peminjaman</h3> <h3 className="font-semibold text-lg">Form Peminjaman</h3>
<button onClick={() => setIsModalOpen(false)} className="hover:bg-blue-700 p-1 rounded-lg transition-colors"> <button onClick={() => setIsModalOpen(false)} className="hover:bg-blue-700 p-1 rounded-lg transition-colors">
@ -169,7 +178,6 @@ export default function Dashboard() {
</button> </button>
</div> </div>
{/* Body Form */}
<form onSubmit={handleBookingSubmit} className="p-6 space-y-4"> <form onSubmit={handleBookingSubmit} className="p-6 space-y-4">
<div className="bg-blue-50 p-3 rounded-lg border border-blue-100 mb-2"> <div className="bg-blue-50 p-3 rounded-lg border border-blue-100 mb-2">
<p className="text-sm text-blue-800 font-semibold">Ruangan: {selectedRoom.name}</p> <p className="text-sm text-blue-800 font-semibold">Ruangan: {selectedRoom.name}</p>