Merge branch 'use_uv' into issue-7-Allow_CRUD_Operations_on_Tasks

Author: Precipicee

client/src/components/task_form.tsx

@@ -1,4 +1,4 @@
-import { useEffect,useState } from "react";
+import { useEffect, useState } from "react";
 
 import { TimeInput } from "@/components/time_input";
 import { TopicInput } from "@/components/topic_input";

client/src/components/time_indicator.tsx

@@ -0,0 +1,79 @@
+import {
+  getTimeTopPosition,
+  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;
+
+  const now = new Date(Date.now());
+  const hour = now.getHours();
+  const mins = now.getMinutes();
+
+  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 - 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-[100] h-fit w-fit rounded-full bg-slate-400 p-1 pl-2 pr-2"
+      >
+        <p className="text-slate-100">Now</p>
+      </div>
+      <div
+        id="time-indicator"
+        className="absolute z-[100] min-h-[2px] bg-slate-200 opacity-75"
+      ></div>
+    </>
+  );
+}
+
+export default TimeIndicator;

client/src/components/time_tag.tsx

@@ -0,0 +1,48 @@
+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);
+
+  const duration_minutes = getDurationMinutes(start_time, end_time);
+  const hours = Math.floor(duration_minutes / 60);
+  const minutes = duration_minutes % 60;
+  const duration_string = hours + "h " + minutes + "m";
+
+  let display_string = time_string; // Default to time string
+  if (display != undefined) {
+    display = display.toLowerCase();
+    if (display == "duration") display_string = duration_string;
+    else if (display == "both") display_string += " (" + duration_string + ")";
+  }
+
+  return (
+    <div
+      className={
+        "flex h-fit w-fit flex-row items-center justify-center rounded-full text-lg font-medium"
+      }
+    >
+      <div className="placeholder-clock aspect-1/1 h-5 w-5 rounded-[50] bg-slate-200"></div>
+      <p className="ml-1">{display_string}</p>
+    </div>
+  );
+}
+
+export default TimeTag;