Merge: Dcrepublic dev

app/api/getplancourses/route.ts

@@ -16,7 +16,7 @@ export async function GET(request: NextRequest) {
           //@ts-ignore
           uuid: session?.user.id,
         },
-        id: parseInt(planCookie),
+        //id: parseInt(planCookie),
       },
     },
     include: {
@@ -25,3 +25,26 @@ export async function GET(request: NextRequest) {
   });
   return NextResponse.json(courses, { status: 200 });
 }
+
+export async function POST(request: NextRequest) {
+  const data = await request.json();
+
+  const course = data.course;
+  const plan = data.plan;
+  const session = await auth();
+
+  let courses = await prisma.coursePlan.update({
+    where: {
+      id: parseInt(plan),
+    },
+    data: {
+      courses: {
+        disconnect: {
+          id: course.id,
+        },
+      },
+    },
+  });
+
+  return NextResponse.json(courses, { status: 200 });
+}

app/calendar/page.tsx

@@ -1,9 +1,97 @@
 import { title } from "@/components/primitives";
+import FullCalendar from "@fullcalendar/react";
+import timeGridPlugin from "@fullcalendar/timegrid"; // a plugin!
+import CreatePlan from "@/components/CreatePlan";
+import moment from "moment";
+import Calendar from "@/components/Calendar";
+import prisma from "@/lib/prisma";
+import { auth } from "@/lib/auth";
+import { getPlanCookie } from "@/app/actions";
+import { BorderColor } from "@mui/icons-material";
+import { courseColors } from "@/components/primitives";
 
-export default function DocsPage() {
+export default async function CalendarPage() {
+  async function getEvents() {
+    let output: any = [];
+    let planCookie: any = await getPlanCookie();
+
+    function generateColorFromName(name: string) {
+      let hash = 0;
+
+      for (let i = 0; i < name.length; i++) {
+        hash += name.charCodeAt(i);
+      }
+
+      return courseColors[hash % courseColors.length];
+    }
+
+    let courses;
+    if (planCookie) {
+      let plan = await prisma.coursePlan.findUnique({
+        where: {
+          id: parseInt(planCookie),
+        },
+        include: {
+          courses: true,
+        },
+      });
+
+      courses = plan?.courses;
+    }
+
+    if (courses) {
+      for (let i = 0; i < courses.length; i++) {
+        let color = generateColorFromName(courses[i].subject);
+
+        let num: string = courses[i].courseReferenceNumber;
+        let meetingTimes = await prisma.meetingTime.findFirst({
+          where: {
+            courseReferenceNumber: num,
+          },
+        });
+        output.push({
+          classNames: "font-sans",
+          textColor: "white",
+          title: courses[i]?.courseTitle,
+          daColor: color,
+          subject: courses[i]?.subject,
+          color: "rgba(0,0,0,0)",
+
+          borderWidth: "0px",
+          daysOfWeek: [
+            meetingTimes?.sunday && "0",
+            meetingTimes?.monday && "1",
+            meetingTimes?.tuesday && "2",
+            meetingTimes?.wednesday && "3",
+            meetingTimes?.thursday && "4",
+            meetingTimes?.friday && "5",
+            meetingTimes?.saturday && "6",
+          ],
+
+          startTime:
+            meetingTimes?.beginTime.slice(0, 2) +
+            ":" +
+            meetingTimes?.beginTime.slice(2),
+          endTime:
+            meetingTimes?.endTime.slice(0, 2) +
+            ":" +
+            meetingTimes?.endTime.slice(2),
+        });
+      }
+    }
+
+    return output;
+  }
+
+  let events = await getEvents();
   return (
-    <div>
-      <h1 className={title()}>Calendar</h1>
+    <div className="grid grid-cols-3 p-4 -mt-20 w-screen absolute start-0 px-32 gap-20">
+      <div className=" col-start-1 h-[70vh] w-[57vw] col-span-2 font-sans font-normal">
+        <Calendar events={events} />
+      </div>
+      <div className="col-start-3 h-[62vh] ">
+        <CreatePlan />
+      </div>
     </div>
   );
 }

app/page.tsx

@@ -45,7 +45,7 @@ export default async function Page(props: {
 async function Home(props: any) {
   return (
     <>
-      <div className="grid grid-cols-3 p-4 -mt-10">
+      <div className="grid grid-cols-3 p-4 -mt-10 ">
         <div className="col-span-2 col-start-1">
           <div className="grid grid-rows-subgrid grid-cols-1 gap-5 ">
             <div className="row-start-1">
@@ -56,7 +56,7 @@ async function Home(props: any) {
             </div>
           </div>
         </div>
-        <div className="col-start-3 h-[62vh]">
+        <div className="col-start-3">
           <CreatePlan />
         </div>
       </div>

components/Calendar.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import FullCalendar from "@fullcalendar/react";
+import timeGridPlugin from "@fullcalendar/timegrid"; // a plugin!
+import { Card } from "@nextui-org/react";
+import moment from "moment";
+import { generateColorFromName } from "./primitives";
+
+export default function Calendar(props: any) {
+  function dayHeaderContent(args: any) {
+    return moment(args.date).format("ddd");
+  }
+
+  function renderEventContent(eventInfo: any) {
+    console.log(eventInfo);
+    return (
+      <Card
+        className=" fc-event-main-frame w-[100%] rounded-md hover:h-[20vh] hover:transition-all duration-700"
+        style={{ backgroundColor: eventInfo.event.extendedProps.daColor }}
+      >
+        {/*
+
+
+        <div
+          className={`absolute top-0 left-0 h-full w-2 rounded-full`}
+          style={{
+            backgroundColor: generateColorFromName(
+              eventInfo.event.extendedProps.subject
+            ),
+          }}
+        />
+        */}
+
+        <b className="font-sans p-2"> {eventInfo.timeText}</b>
+        <div className="font-sans p-2">{eventInfo.event.title}</div>
+      </Card>
+    );
+  }
+
+  return (
+    <FullCalendar
+      height="100%"
+      plugins={[timeGridPlugin]}
+      initialView="timeGridWeek"
+      allDaySlot={false}
+      expandRows
+      slotDuration="01:00:00"
+      slotMinTime="08:00:00"
+      slotMaxTime="22:00:00"
+      dayHeaderFormat={dayHeaderContent}
+      events={props.events}
+      headerToolbar={false}
+      eventContent={renderEventContent}
+    />
+  );
+}

components/CourseCard.tsx

@@ -11,6 +11,7 @@ import {
   Button,
 } from "@nextui-org/react";
 import { tv } from "tailwind-variants";
+import { courseColors } from "@/components/primitives";
 
 import { InstructorCard } from "./InstructorCard";
 import AddIcon from "@mui/icons-material/Add";
@@ -28,18 +29,6 @@ const {
   role,
 } = card();
 
-const courseColors = [
-  "#D1FAFF",
-  "#9BD1E5",
-  "#6A8EAE",
-  "#57A773",
-  "#157145",
-  "#1E2D2F",
-  "#C57B57",
-  "#9B489B",
-  "#4ECDC4",
-];
-
 function generateColorFromName(name: string) {
   let hash = 0;