feat: Schedule, Calendar

asuc-octo · Jun 7, 2024 · b31bfae · b31bfae
1 parent e97c2f0
commit b31bfae
Show file tree

Hide file tree

Showing 18 changed files with 784 additions and 279 deletions.
diff --git a/frontend/src/app/Plan/index.tsx b/frontend/src/app/Plan/index.tsx
@@ -104,8 +104,6 @@ export default function Plan() {
     };
   }, []);
 
-  console.log(terms);
-
   return (
     <div className={styles.root}>
       <div className={styles.sideBar}></div>

diff --git a/frontend/src/app/Schedule/Calendar/Calendar.module.scss b/frontend/src/app/Schedule/Calendar/Calendar.module.scss
@@ -16,19 +16,6 @@
     line-height: 1;
     z-index: 2;
 
-    .timeZone {
-      height: 32px;
-      width: 64px;
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-      padding: 0 12px;
-      border-right: 1px solid var(--border-color);
-      position: sticky;
-      left: 0;
-      background-color: var(--background-color);
-    }
-
     .week {
       display: grid;
       grid-template-columns: repeat(7, 1fr);
@@ -49,77 +36,7 @@
 
   .view {
     display: flex;
+    flex-direction: column;
     z-index: 1;
-
-    .week {
-      flex-grow: 1;
-      display: grid;
-      grid-template-columns: repeat(7, 1fr);
-
-      .day {
-        position: relative;
-
-        &:not(:last-child) {
-          border-right: 1px solid var(--border-color);
-        }
-
-        .line {
-          position: absolute;
-          z-index: 1;
-          left: -1px;
-          width: calc(100% + 1px);
-          height: 1px;
-          background-color: var(--red-500);
-        }
-
-        .hour {
-          height: 60px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-
-          &:not(:first-child) {
-            border-top: 1px solid var(--border-color);
-          }
-        }
-      }
-    }
-
-    .sideBar {
-      flex-shrink: 0;
-      width: 64px;
-      display: flex;
-      flex-direction: column;
-      position: sticky;
-      left: 0;
-      z-index: 2;
-      background-color: var(--background-color);
-      border-right: 1px solid var(--border-color);
-
-      .time {
-        position: absolute;
-        z-index: 1;
-        height: 24px;
-        display: flex;
-        align-items: center;
-        padding: 0 12px;
-        font-size: 12px;
-        color: white;
-        line-height: 1;
-        border-radius: 4px;
-        right: 0;
-        background-color: var(--red-500);
-      }
-
-      .hour {
-        height: 0;
-        margin-top: 60px;
-        padding: 0 12px;
-        font-size: 12px;
-        color: var(--label-color);
-        text-align: right;
-        transform: translateY(-6px);
-      }
-    }
   }
 }
diff --git a/frontend/src/app/Schedule/Calendar/Week/Day/Day.module.scss b/frontend/src/app/Schedule/Calendar/Week/Day/Day.module.scss
@@ -0,0 +1,54 @@
+.root {
+  aspect-ratio: 1;
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  font-size: 12px;
+  line-height: 1;
+  gap: 4px;
+  overflow: hidden;
+
+  &:not(:last-child) {
+    border-right: 1px solid var(--border-color);
+  }
+
+  .event {
+    display: flex;
+    align-items: center;
+    padding: 0 8px;
+    border-radius: 4px;
+    gap: 8px;
+    height: 24px;
+    white-space: nowrap;
+
+    &.active {
+      opacity: 0.5;
+    }
+
+    .time {
+      color: rgb(255 255 255 / 75%);
+      font-size: 8px;
+    }
+
+    .course {
+      color: white;
+      font-weight: 500;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+  }
+
+  .date {
+    display: flex;
+
+    .month {
+      color: var(--heading-color);
+      font-weight: 500;
+    }
+
+    .number {
+      margin-left: auto;
+      color: var(--label-color);
+    }
+  }
+}
diff --git a/frontend/src/app/Schedule/Calendar/Week/Day/index.tsx b/frontend/src/app/Schedule/Calendar/Week/Day/index.tsx
@@ -0,0 +1,55 @@
+import classNames from "classnames";
+
+import { getColor } from "@/lib/section";
+
+import { IDay } from "../../semester";
+import styles from "./Day.module.scss";
+
+const parseTime = (time: string) => {
+  const [hours, minutes] = time.split(":").map(Number);
+
+  let _time = `${hours % 12 || 12}`;
+  if (minutes > 0) _time += `:${minutes.toString().padStart(2, "0")}`;
+  _time += hours < 12 ? " AM" : " PM";
+
+  return _time;
+};
+
+interface DayProps extends IDay {
+  active: boolean;
+}
+
+export default function Day({ date, events, active }: DayProps) {
+  return (
+    <div key={date.format("YYYY-MM-DD")} className={styles.root}>
+      {active && (
+        <div className={styles.date}>
+          {date.format("D") === "1" && (
+            <p className={styles.month}>{date.format("MMMM")}</p>
+          )}
+          <p className={styles.number}>{date.format("D")}</p>
+        </div>
+      )}
+      {events.map((event) => (
+        <div
+          className={classNames(styles.event, {
+            [styles.active]: event.active,
+          })}
+          style={{
+            backgroundColor: getColor(
+              event.course.subject,
+              event.course.number
+            ),
+          }}
+        >
+          <div className={styles.time}>
+            {parseTime(event.meetings[0].startTime)}
+          </div>
+          <div className={styles.course}>
+            {event.course.subject} {event.course.number}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/frontend/src/app/Schedule/Calendar/Week/Week.module.scss b/frontend/src/app/Schedule/Calendar/Week/Week.module.scss
@@ -0,0 +1,34 @@
+.root {
+  display: flex;
+  flex-direction: column;
+
+  &:not(:first-child) {
+    border-top: 1px solid var(--border-color);
+  }
+
+  &.dead {
+    background-color: var(--slate-100);
+  }
+
+  &.finals {
+    background-color: white;
+  }
+
+  .header {
+    font-size: 12px;
+    line-height: 1;
+    height: 32px;
+    color: var(--paragraph-color);
+    padding: 0 12px;
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    border-bottom: 1px solid var(--border-color);
+  }
+
+  .body {
+    flex-grow: 1;
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+  }
+}
diff --git a/frontend/src/app/Schedule/Calendar/Week/index.tsx b/frontend/src/app/Schedule/Calendar/Week/index.tsx
@@ -0,0 +1,43 @@
+import classNames from "classnames";
+import { ArrowDown } from "iconoir-react";
+import moment from "moment";
+
+import { IDay } from "../semester";
+import Day from "./Day";
+import styles from "./Week.module.scss";
+
+interface WeekProps {
+  days: IDay[];
+  finals: boolean;
+  dead: boolean;
+  first: moment.Moment;
+  last: moment.Moment;
+}
+
+export default function Week({ days, finals, dead, first, last }: WeekProps) {
+  return (
+    <div
+      className={classNames(styles.root, {
+        [styles.finals]: finals,
+        [styles.dead]: dead,
+      })}
+    >
+      {(dead || finals) && (
+        <div className={styles.header}>
+          <ArrowDown width={12} height={12} />
+          {dead ? "Reading, Review, and Recitation (RRR)" : "Finals"} week
+        </div>
+      )}
+      <div className={styles.body}>
+        {days.map(({ date, events }) => (
+          <Day
+            key={date.format("YYYY-MM-DD")}
+            date={date}
+            events={events}
+            active={date.isBetween(first, last, "day", "[]")}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}