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 viewMode = ref<'vertical' | 'horizontal'>('vertical') // ← track the mode

const daysOfWeek = ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat']
const startHour = 7
const endHour = 21
const currentTime = ref(new Date())

// Function to check if the current time is within a schedule item range
function isCurrentScheduleItem(item: any) {
  const now = currentTime.value
  const startTime = parseTime(item.start)
  const endTime = parseTime(item.end)
  const currentMinutes = (now.getHours() - startHour) * 60 + now.getMinutes()

  // Check if the current time is within the range (startTime < currentMinutes < endTime)
  return currentMinutes >= startTime && currentMinutes <= endTime
}

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,
          tgl_mulai: jadwal.TGL_MULAI,
          tgl_selesai: jadwal.TGL_SELESAI,
        })),
      )
    }
    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,
        tgl_mulai: item.TGL_MULAI,
        tgl_selesai: item.TGL_SELESAI,
      }))
    }
    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
}

// Group schedule by day
function getScheduleByDay(day: string) {
  return schedule.value.filter(item => item.day === day)
}

// Get alternating color classes
function getColorClass(index: number) {
  const colors = ['red', 'blue', 'green']

  return `schedule-color-${colors[index % 3]}`
}
</script>

<template>
  <VCard class="timetable-card">
    <template #title>
      <div class="d-flex align-center header-container">
        <!-- Title -->
        <span class="me-auto">Jadwal Kuliah</span>

        <!-- Date Range Box (desktop version) -->
        <div class="me-auto date-range-box">
          <span v-if="schedule.length > 0">
            {{ schedule[0].tgl_mulai }} / {{ schedule[0].tgl_selesai }}
          </span>
        </div>

        <!-- Icons -->
        <div class="d-flex gap-2">
          <VBtn
            icon
            variant="text"
            :color="viewMode === 'vertical' ? 'primary' : 'default'"
            @click="viewMode = 'vertical'"
          >
            <VIcon icon="ri-layout-vertical-line" />
          </VBtn>
          <VBtn
            icon
            variant="text"
            :color="viewMode === 'horizontal' ? 'primary' : 'default'"
            @click="viewMode = 'horizontal'"
          >
            <VIcon icon="ri-layout-horizontal-line" />
          </VBtn>
          <!--
            <VBtn
            icon
            variant="text"
            color="black"
            title="Download horizontal schedule as image"
            @click="downloadHorizontalSchedule"
            >
            <VIcon icon="ri-download-2-line" />
            </VBtn>
          -->
        </div>
      </div>

      <!-- Date Range Box (mobile version) -->
      <div class="date-range-box2">
        <span v-if="schedule.length > 0">
          {{ schedule[0].tgl_mulai }} / {{ schedule[0].tgl_selesai }}
        </span>
      </div>
    </template>

    <VCard
      v-if="viewMode === 'vertical'"
      class="timetable"
    >
      <!-- Header Row -->
      <div class="scrollable">
        <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>
      </div>
    </VCard>
    <VCard
      v-else
      class="timetable"
    >
      <div class="scrollable">
        <table class="w-100 text-left table-schedule fixed-table">
          <thead>
            <tr>
              <th
                v-for="day in daysOfWeek"
                :key="day"
                class="px-2 py-2"
              >
                {{ day }}
              </th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="rowIndex in 10"
              :key="`row-${rowIndex}`"
            >
              <td
                v-for="(day, dayIndex) in daysOfWeek"
                :key="day + rowIndex"
                class="align-top px-2 py-3"
              >
                <div
                  v-if="getScheduleByDay(day)[rowIndex - 1]"
                  class="schedule-box"
                  :class="[getColorClass(rowIndex - 1)]"
                >
                  <div class="course-header mb-1">
                    <span class="time text-sm">
                      <i class="ri-time-line" /> {{
                        getScheduleByDay(day)[rowIndex - 1].start
                      }} - {{
                        getScheduleByDay(day)[rowIndex - 1].end
                      }}
                    </span>
                    <span class="room text-xs">{{ getScheduleByDay(day)[rowIndex - 1].room }}</span>
                  </div>
                  <div class="course-title font-semibold text-sm mb-1">
                    <span
                      v-if="getScheduleByDay(day)[rowIndex - 1].course.includes('-')"
                      style="text-decoration: underline;"
                    >
                      {{ getScheduleByDay(day)[rowIndex - 1].course.split(' - ')[0] }}
                    </span>
                    <span class="text-sm">
                      {{
                        getScheduleByDay(day)[rowIndex - 1].course.includes('-')
                          ? getScheduleByDay(day)[rowIndex - 1].course.split(' - ')[1]
                          : getScheduleByDay(day)[rowIndex - 1].course
                      }}
                    </span>
                  </div>
                  <div class="building text-xs">
                    {{ getScheduleByDay(day)[rowIndex - 1].building }}
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </VCard>
  </VCard>
</template>

<style scoped>
.scrollable {
  overflow: auto hidden; /* Optional: you can allow vertical scroll if needed */
  box-sizing: border-box;
  inline-size: 100%;
  min-inline-size: 500px;
}

/* Optional: make inner content grow past 700px if needed */
.scrollable > * {
  min-inline-size: 500px;
}

.date-range-box,
.date-range-box2 {
  border-radius: 5px;
  background-color: rgba(var(--v-global-theme-primary), 0.1);
  font-size: 14px;
  font-weight: bold;
  padding-block: 5px;
  padding-inline: 10px;
}

/* Default: show inline box, hide full-width box */
.date-range-box {
  display: inline-block;
  margin-inline-start: 10px;
}

.date-range-box2 {
  display: none;
}

/* Wrapped layout or small screens */
@media (max-width: 600px) {
  .date-range-box {
    display: none;
  }

  .date-range-box2 {
    display: flex;
    justify-content: center;
    inline-size: 100%;
    margin-block-start: 8px;
  }
}

.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: -webkit-box;
  overflow: hidden;
  border-block-end: 1px solid;
  -webkit-box-orient: vertical;
  font-size: 12px;
  font-weight: bold;
  inline-size: 100%;
  -webkit-line-clamp: 2;        /* Number of lines before cutting */
  margin-block-end: 5px;
  padding-block-end: 5px;
  text-overflow: ellipsis;
}

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

.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;
  overflow: hidden;
  flex-direction: column;
  align-items: flex-start; /* Keeps text left-aligned */
  justify-content: flex-start; /* Aligns content to the top */
  padding: 6px;
  border-radius: 6px;
  margin: 2px;
  background-color: color-mix(in srgb, rgba(var(--v-global-theme-primary)) 80%, white 20%);
  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;
  gap: 8px; /* optional spacing */
  inline-size: 100%;
}

.time {
  flex-shrink: 0; /* Don't shrink */
  font-weight: normal;
  text-align: start;
  white-space: nowrap;
}

.room {
  overflow: hidden;
  flex-grow: 1;
  flex-shrink: 1;
  font-weight: normal;
  text-align: end;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.fixed-table {
  border-collapse: collapse;
  inline-size: 100%;
  table-layout: fixed;
}

.fixed-table thead th {
  background-color: rgba(var(--v-global-theme-primary));
  color: white;
  font-weight: bold;
  text-align: center;
}

.fixed-table th,
.fixed-table td {
  padding: 0;
  margin: 0;
}

.schedule-box {
  padding: 6px;
  border-radius: 8px;
  color: white;
  font-size: 0.85rem;
  min-block-size: 90px;
}

/* Color themes for items */
.schedule-color-red {
  background-color: #6aa1fa;
}

.schedule-color-blue {
  background-color: #46c298;
}

.schedule-color-green {
  background-color: #eda36b;
}

@media screen and (max-width: 1200px) {
  .course-title {
    border-block-end: 0 solid;
  }

  .course-header {
    overflow-x: hidden; /* Hides horizontal overflow */
    text-overflow: ellipsis; /* Adds "..." when text is too long */
    word-break: break-word; /* Allows text to wrap naturally */
  }

  .building,
  .time {
    display: none;
  }

  .room {
    text-align: start;
  }
}

@media screen and (max-width: 900px) {
  .course-title {
    border-block-end: 0 solid;
  }

  .room {
    text-align: start;
  }
}

@media screen and (max-width: 600px) {
  .room {
    display: none;
  }
}
</style>