UserJadwal.vue

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useKeycloakStore } from '@/@core/stores/keycloakStore'

const keycloakStore = useKeycloakStore()
const schedule = ref<any[]>([])
const loading = ref(false)

const daysOfWeek = ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat']
const startHour = 7
const endHour = 21

async function getData() {
  loading.value = true
  schedule.value = []

  try {
    const response = await fetch('https://api.ui.ac.id/my/ac', {
      headers: { Authorization: `Bearer ${keycloakStore.accessToken}` },
    })

    if (!response.ok)
      throw new Error(`Error: ${response.statusText}`)

    const data = await response.json()

    if (keycloakStore.civitas === 'mahasiswa') {
      // Get the latest semester
      const latestSemesterData = data.reduce((latest, current) => {
        return Number.parseInt(current.SEMESTER) > Number.parseInt(latest.SEMESTER) ? current : latest
      }, data[0])

      // Map schedule for mahasiswa
      schedule.value = Object.values(latestSemesterData.IRS).flatMap(course =>
        Object.values(course.JADWAL).map(jadwal => ({
          day: jadwal.NM_HARI,
          start: jadwal.JAM_MULAI,
          end: jadwal.JAM_SELESAI,
          course: course.NM_KLS_MK,
          lecturer: Object.values(course.PENGAJAR).join(', '), // Join multiple lecturers if exist
          room: jadwal.NM_RUANG,
          building: jadwal.NM_GED,
        })),
      )
    }
    else if (keycloakStore.civitas === 'dosen') {
      // Map schedule for dosen
      schedule.value = data.map(item => ({
        day: item.NM_HARI,
        start: item.JAM_MULAI,
        end: item.JAM_SELESAI,
        course: item.NM_KLS_MK,
        lecturer: item.NAMA_DOSEN,
        room: item.NM_RUANG,
        building: item.NM_GED,
      }))
    }
    else if (keycloakStore.civitas === 'staf') {
      // Do nothing (empty schedule)
      schedule.value = []
    }
  }
  catch (err) {
    console.error('Failed to fetch schedule:', err.message)
  }
  finally {
    loading.value = false
  }
}

onMounted(() => {
  keycloakStore.refresh()
  getData()
})

function parseTime(time: string) {
  console.log(`Parsing time: ${time}`)

  const formattedTime = time.replace('.', ':')
  const [hour, minute] = formattedTime.split(':').map(Number)

  if (isNaN(hour) || isNaN(minute)) {
    console.error(`Invalid time format: ${time}`)

    return Number.NaN
  }

  console.log((hour - startHour) * 60 + minute)

  return (hour - startHour) * 60 + minute
}

function calculateRowSpan(start: string, end: string) {
  const rowSpan = (parseTime(end) - parseTime(start))

  console.log(`RowSpan for ${start} - ${end}:`, rowSpan)

  return rowSpan
}
</script>

<template>
  <VCard
    title="Jadwal Kuliah"
    class="timetable-card"
  >
    <VCard class="timetable">
      <!-- Header Row -->
      <div class="grid-header">
        <div class="time-label">
          Jam
        </div>
        <div
          v-for="day in daysOfWeek"
          :key="day"
          class="day-header"
        >
          {{ day }}
        </div>
      </div>

      <!-- Grid Body -->
      <div class="grid-body">
        <!-- Time Labels -->
        <div class="time-column">
          <div
            v-for="hour in Array.from({ length: endHour - startHour + 1 }, (_, i) => startHour + i)"
            :key="hour"
            class="time-slot"
            :style="{
              gridRowStart: (hour - startHour) * 60 + 1, // Now each row is a single minute
              gridRowEnd: `span 60`, // Each hour label spans 60 rows
              gridColumn: 1, // Stays in the first column
            }"
          >
            {{ hour }}:00
          </div>
        </div>

        <!-- Schedule Grid -->
        <div class="schedule-grid">
          <div
            v-for="item in schedule"
            :key="item.course + item.start"
            class="schedule-item"
            :style="{
              gridRowStart: parseTime(item.start) + 1, // Ensure it starts correctly
              gridRowEnd: `span ${calculateRowSpan(item.start, item.end)}`,
              gridColumn: daysOfWeek.indexOf(item.day) + 1, //its already right because monday starts at 0 so time column +1
            }"
          >
            <div class="course-header">
              <span class="time">
                <i class="ri-time-line" /> {{ item.start }} - {{ item.end }}
              </span>
              <span class="room">{{ item.room }}</span>
            </div>
            <div class="course-title">
              <span
                v-if="item.course.includes('-')"
                class="course-prefix"
              >
                {{ item.course.split(' - ')[0] }}
              </span>
              <span class="course-name">
                {{ item.course.includes('-') ? item.course.split(' - ')[1] : item.course }}
              </span>
            </div>
            <div class="building">
              {{ item.building }}
            </div>
          </div>
        </div>
      </div>
    </VCard>
  </VCard>
</template>

<style scoped>
.timetable {
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  margin-block: 0;
  margin-block-end: 20px;
  margin-inline: 20px; /* Only applies margin to left and right */
  max-inline-size: calc(100% - 40px); /* Adjusts width accordingly */
  overflow-x: auto;
}

.grid-header {
  display: grid;
  background-color: rgba(var(--v-global-theme-primary));
  color: white;
  font-weight: bold;
  grid-template-columns: 80px repeat(5, 1fr);
  padding-inline: 5px;
  text-align: center;
}

.time-label,
.day-header {
  padding: 10px;
  font-size: 14px;
  text-align: center;
}

.course-title {
  display: flex;
  flex-wrap: wrap;
  border-block-end: 1px solid;
  font-size: 12px;
  font-weight: bold;
  gap: 4px;
  inline-size: 100%; /* Ensures the border spans the entire container */
  margin-block-end: 5px;
  padding-block-end: 5px;
}

.course-prefix {
  color: color-mix(in srgb, rgba(var(--v-global-theme-primary)) 70%, black 30%);
}

.grid-body {
  display: grid;
  grid-template-columns: 80px auto; /* Time column + Schedule grid */
  padding-block: 30px;
  padding-inline: 5px;
}

.time-column {
  display: grid;
  font-weight: bold;
  grid-template-rows: repeat(840, 1px); /* Assuming 07:00 - 21:00, 30-min per row */
  text-align: center;
}

.time-slot {
  position: relative;
  display: flex;
  flex-direction: column; /* Stack content vertically */
  align-items: center; /* Center horizontally */
  justify-content: flex-start; /* Align content to the top */
  block-size: 60px; /* 30 min per row */
  margin-block-start: -15px;
  padding-block-start: 5px; /* Optional: Add some spacing from the top */
}

.schedule-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Keeps text left-aligned */
  justify-content: flex-start; /* Aligns content to the top */
  padding: 4px;
  border-radius: 6px;
  margin: 2px;
  background-color: color-mix(in srgb, rgba(var(--v-global-theme-primary)) 70%, white 30%);
  color: white;
  font-size: 12px;
  outline: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
  text-align: start; /* Ensures text is left-aligned */
}

.schedule-grid {
  position: relative;
  display: grid;
  flex: 1;
  background-image: repeating-linear-gradient(to bottom, #ccc 0, #ccc 1px, transparent 1px, transparent 60px);
  background-size: 100%; /* Ensures lines every 60px */
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(840, 1px); /* 1px per minute */
}

.course-header {
  display: flex;
  justify-content: space-between; /* Pushes elements to the left & right */
  inline-size: 100%; /* Ensures full width */
}

.time {
  font-weight: normal;
  text-align: start; /* Aligns time to the left */
}

.room {
  font-weight: normal;
  text-align: end; /* Aligns room to the right */
}

.building {
  font-weight: normal;
  opacity: 0.8;
  text-align: end; /* Aligns room to the right */
}
</style>