Merge pull request #10 from codersforcauses/fix-schedule-page-bugs

Fix schedule page bugs

Author: TobbleCobble

client/src/components/time_indicator.tsx

@@ -3,50 +3,68 @@ import {
   getVisibleTimetableRect,
 } from "@/components/timetable";
 
+/*
+Resizes the time indicator to the correct width and positions it at the 
+y-position corresponding to the current time.
+*/
 export function resizeAndPositionTimeIndicator() {
   const time_indicator = document.getElementById("time-indicator");
   if (time_indicator == null) return;
 
   const now_label = document.getElementById("time-indicator-label");
   if (now_label == null) return;
 
+  const separator_rect = document
+    .getElementById("timetable-separator")
+    ?.getBoundingClientRect();
+  if (separator_rect == undefined) return;
+
+  const content_rect = document
+    .getElementById("timetable-content")
+    ?.getBoundingClientRect();
+  if (content_rect == undefined) return;
+
   const visible = getVisibleTimetableRect();
   if (visible == undefined) return;
 
-  time_indicator.style.width = visible.width + "px";
-  time_indicator.style.left = visible.left + "px";
-
   const now = new Date(Date.now());
   const hour = now.getHours();
   const mins = now.getMinutes();
 
-  const top = getTimeTopPosition(hour, mins);
-  if (top == undefined) return;
-  time_indicator.style.top = top + "px";
+  const time_top = getTimeTopPosition(hour, mins);
+  if (time_top == undefined) return;
+
+  time_indicator.style.left =
+    visible.left - separator_rect.width - content_rect.left + "px";
+  time_indicator.style.top = time_top - content_rect.top + "px";
+  time_indicator.style.width = visible.width + separator_rect.width + "px";
 
   const now_label_rect = now_label.getBoundingClientRect();
   if (now_label_rect == undefined) return;
 
-  const now_label_left = visible.left - now_label_rect.width;
-  const now_label_top = top - now_label_rect.height / 2;
-  now_label.style.left = now_label_left + "px";
-  now_label.style.top = now_label_top + "px";
-
-  if (top < visible.top || top > visible.bottom) {
-    time_indicator.style.display = "none";
-    now_label.style.display = "none";
-  } else {
-    time_indicator.style.display = "inline";
-    now_label.style.display = "inline";
-  }
+  const now_label_left =
+    visible.left - now_label_rect.width - separator_rect.width;
+  const now_label_top = time_top - now_label_rect.height / 2;
+
+  const parent_rect = time_indicator.parentElement?.getBoundingClientRect();
+  if (parent_rect == undefined) return;
+
+  now_label.style.left = now_label_left - parent_rect.left + "px";
+  now_label.style.top = now_label_top - parent_rect.top + "px";
 }
 
+/*
+Component consisting of a rounded label containing the text "Now" and a 2px
+thick line stretching across the visible area of the timetable.
+
+There should only be one TimeIndicator per page.
+*/
 function TimeIndicator() {
   return (
     <>
       <div
         id="time-indicator-label"
-        className="absolute z-[1000] h-fit w-fit rounded-full bg-slate-400 p-1 pl-2 pr-2"
+        className="absolute z-[100] h-fit w-fit rounded-full bg-slate-400 p-1 pl-2 pr-2"
       >
         <p className="text-slate-100">Now</p>
       </div>

client/src/components/time_tag.tsx

@@ -1,11 +1,22 @@
 import { getDurationMinutes } from "@/components/timetable";
 
+/*
+@prop start_time: string of form HH:MM:SS containing the start time to display
+@prop end_time: string of form HH:MM:SS containing the end time to display
+@prop display: (optional) string describing what to display in the tag,
+defaults to displaying the start and end times, "duration" to display duration,
+or "both" to display start and end times with duration in brackets.
+*/
 interface TimeTagProps {
   start_time: string;
   end_time: string;
   display?: string;
 }
 
+/*
+A small round tag containing a clock icon and either the start and end times,
+the duration, or both, specified by the display prop.
+*/
 function TimeTag({ start_time, end_time, display }: TimeTagProps) {
   const time_string =
     start_time.substring(0, 5) + "-" + end_time.substring(0, 5);