update 17 mei
This commit is contained in:
[Valentino Heman Budiarto]
@@ -7,6 +7,7 @@ import { CalendarDays, MapPin, Clock, ChevronLeft, ChevronRight, Calendar as Cal
|
||||
export default function CalendarViewPage() {
|
||||
const [bookings, setBookings] = useState<any[]>([]);
|
||||
const [rooms, setRooms] = useState<any[]>([]);
|
||||
const [schedules, setSchedules] = useState<any[]>([]); // 1. STATE BARU UNTUK JADWAL KULIAH
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
// --- STATE UNTUK NAVIGASI MINGGU ---
|
||||
@@ -50,19 +51,21 @@ export default function CalendarViewPage() {
|
||||
d.setHours(0, 0, 0, 0);
|
||||
setStartDate(d);
|
||||
};
|
||||
// ------------------------------------------
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const token = localStorage.getItem("token");
|
||||
const [roomsRes, bookingsRes] = await Promise.all([
|
||||
// 2. FETCH DATA SCHEDULES BERSAMAAN DENGAN ROOMS & BOOKINGS
|
||||
const [roomsRes, bookingsRes, schedulesRes] = await Promise.all([
|
||||
axios.get("http://localhost:8080/api/rooms", { headers: { Authorization: `Bearer ${token}` } }),
|
||||
axios.get("http://localhost:8080/api/bookings", { headers: { Authorization: `Bearer ${token}` } })
|
||||
axios.get("http://localhost:8080/api/bookings", { headers: { Authorization: `Bearer ${token}` } }),
|
||||
axios.get("http://localhost:8080/api/schedules", { headers: { Authorization: `Bearer ${token}` } })
|
||||
]);
|
||||
|
||||
setRooms(roomsRes.data.data || []);
|
||||
setBookings(bookingsRes.data.data || []);
|
||||
setSchedules(schedulesRes.data.data || []);
|
||||
} catch (error) {
|
||||
console.error("Gagal memuat data", error);
|
||||
} finally {
|
||||
@@ -72,7 +75,7 @@ export default function CalendarViewPage() {
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
// Fungsi memfilter booking
|
||||
// Fungsi memfilter booking dinamis
|
||||
const getBookingsForCell = (roomId: number, dateObj: Date) => {
|
||||
return bookings.filter(b => {
|
||||
if (b.room_id !== roomId) return false;
|
||||
@@ -85,6 +88,14 @@ export default function CalendarViewPage() {
|
||||
});
|
||||
};
|
||||
|
||||
// 3. FUNGSI BARU: Memfilter jadwal statis berdasarkan hari
|
||||
const getSchedulesForCell = (roomId: number, dateObj: Date) => {
|
||||
const namaHari = ["Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu"];
|
||||
const hariIni = namaHari[dateObj.getDay()];
|
||||
|
||||
return schedules.filter(s => s.room_id === roomId && s.hari === hariIni);
|
||||
};
|
||||
|
||||
// Format Jam
|
||||
const formatTime = (isoString: string) => {
|
||||
return new Date(isoString).toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' });
|
||||
@@ -119,7 +130,6 @@ export default function CalendarViewPage() {
|
||||
|
||||
<div className="w-px h-6 bg-gray-200 mx-1"></div>
|
||||
|
||||
{/* TULISAN RENTANG TANGGAL DINAMIS (Lebar Fix w-44 untuk menghilangkan warning Tailwind) */}
|
||||
<button
|
||||
onClick={goToToday}
|
||||
title="Kembali ke minggu ini"
|
||||
@@ -144,7 +154,6 @@ export default function CalendarViewPage() {
|
||||
{/* Pembungkus Tabel */}
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden relative">
|
||||
<div className="overflow-x-auto">
|
||||
{/* Lebar tabel dipertahankan menggunakan min-w-[1000px] karena ini ukuran presisi khusus */}
|
||||
<table className="w-full min-w-250 text-left border-collapse">
|
||||
|
||||
{/* HEADER TABEL: Sumbu X (Tanggal) */}
|
||||
@@ -171,7 +180,6 @@ export default function CalendarViewPage() {
|
||||
|
||||
{/* BODY TABEL: Sumbu Y (Ruangan) */}
|
||||
<tbody>
|
||||
{/* --- DAFTAR RUANGAN YANG SUDAH DIURUTKAN --- */}
|
||||
{[...rooms]
|
||||
.sort((a, b) => a.name.localeCompare(b.name))
|
||||
.map((room) => (
|
||||
@@ -181,41 +189,61 @@ export default function CalendarViewPage() {
|
||||
<div className="text-xs text-gray-500">{room.category}</div>
|
||||
</td>
|
||||
|
||||
{/* (Kodingan untuk kolom hari dan jadwal peminjamanmu biarkan tetap berada di bawah sini) */}
|
||||
|
||||
{weekDates.map((date, idx) => {
|
||||
const dailyBookings = getBookingsForCell(room.room_id, date);
|
||||
const dailySchedules = getSchedulesForCell(room.room_id, date); // Ambil jadwal kuliah hari ini
|
||||
|
||||
return (
|
||||
<td key={idx} className="border-b border-gray-100 border-r border-r-gray-50 p-2 align-top">
|
||||
{dailyBookings.length > 0 ? (
|
||||
{(dailyBookings.length > 0 || dailySchedules.length > 0) ? (
|
||||
<div className="space-y-2">
|
||||
|
||||
{/* 4. RENDER JADWAL KULIAH STATIS (Tampil Paling Atas, Warna Abu-abu) */}
|
||||
{dailySchedules
|
||||
.sort((a, b) => a.jam_mulai.localeCompare(b.jam_mulai))
|
||||
.map((s, i) => (
|
||||
<div
|
||||
key={`sched-${i}`}
|
||||
className="border rounded-md p-2 shadow-sm border-l-4 bg-gray-100 border-gray-300 border-l-gray-500 opacity-90"
|
||||
>
|
||||
<p className="text-xs font-bold text-gray-700 truncate" title={s.nama_mk}>
|
||||
[KULIAH] {s.nama_mk}
|
||||
</p>
|
||||
<div className="flex flex-wrap items-center gap-1 text-[10px] text-gray-600 font-semibold mt-1">
|
||||
<Clock size={10} />
|
||||
{s.jam_mulai.substring(0, 5)} - {s.jam_selesai.substring(0, 5)}
|
||||
<span className="ml-auto text-[9px] uppercase bg-gray-200 px-1 rounded border border-gray-300">
|
||||
{s.kode_mk}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
|
||||
{/* 5. RENDER BOOKING DINAMIS MAHASISWA */}
|
||||
{dailyBookings
|
||||
// 1. FILTER: Hanya tampilkan yang Pending atau Approved
|
||||
.filter((b) => b.status === "Pending" || b.status === "Approved")
|
||||
// 2. SORT: Urutkan berdasarkan waktu mulai (dari pagi ke malam)
|
||||
.sort((a, b) => new Date(a.start_time).getTime() - new Date(b.start_time).getTime())
|
||||
// 3. MAP: Render ke layar
|
||||
.map((b) => (
|
||||
<div
|
||||
key={b.booking_id}
|
||||
className={`border rounded-md p-2 shadow-sm border-l-4
|
||||
${b.status === 'Approved' ? 'bg-green-50 border-green-200 border-l-green-500' :
|
||||
b.status === 'Pending' ? 'bg-yellow-50 border-yellow-200 border-l-yellow-500' :
|
||||
'bg-blue-50 border-blue-200 border-l-blue-500'}`}
|
||||
>
|
||||
<p className="text-xs font-bold text-gray-800 truncate" title={b.purpose}>
|
||||
{b.purpose}
|
||||
</p>
|
||||
<div className="flex flex-wrap items-center gap-1 text-[10px] text-gray-600 font-semibold mt-1">
|
||||
<Clock size={10} />
|
||||
{formatTime(b.start_time)} - {formatTime(b.end_time)}
|
||||
<span className="ml-auto text-[9px] uppercase bg-white/60 px-1 rounded border border-gray-100">
|
||||
{b.status || 'Pending'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
.filter((b) => b.status === "Pending" || b.status === "Approved")
|
||||
.sort((a, b) => new Date(a.start_time).getTime() - new Date(b.start_time).getTime())
|
||||
.map((b) => (
|
||||
<div
|
||||
key={b.booking_id}
|
||||
className={`border rounded-md p-2 shadow-sm border-l-4
|
||||
${b.status === 'Approved' ? 'bg-green-50 border-green-200 border-l-green-500' :
|
||||
b.status === 'Pending' ? 'bg-yellow-50 border-yellow-200 border-l-yellow-500' :
|
||||
'bg-blue-50 border-blue-200 border-l-blue-500'}`}
|
||||
>
|
||||
<p className="text-xs font-bold text-gray-800 truncate" title={b.purpose}>
|
||||
{b.purpose}
|
||||
</p>
|
||||
<div className="flex flex-wrap items-center gap-1 text-[10px] text-gray-600 font-semibold mt-1">
|
||||
<Clock size={10} />
|
||||
{formatTime(b.start_time)} - {formatTime(b.end_time)}
|
||||
<span className="ml-auto text-[9px] uppercase bg-white/60 px-1 rounded border border-gray-100">
|
||||
{b.status || 'Pending'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="h-full w-full min-h-10 flex items-center justify-center text-gray-300 text-xs">
|
||||
|
||||
Reference in New Issue
Block a user