Skip to content

Commit

Permalink
Calendar: hover and styling of events
Browse files Browse the repository at this point in the history
  • Loading branch information
@DCRepublic
DCRepublic committed Nov 3, 2024
1 parent f749dcd commit 0d02421
Show file tree
Hide file tree
Showing 10 changed files with 119 additions and 143 deletions.
23 changes: 23 additions & 0 deletions app/api/getplancourses/route.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 });
}
26 changes: 8 additions & 18 deletions app/calendar/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,10 @@ 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 async function DocsPage() {
export default async function CalendarPage() {
async function getEvents() {
const session = await auth();
let output: any = [];
let planCookie: any = await getPlanCookie();

Expand All @@ -24,19 +24,7 @@ export default async function DocsPage() {

return courseColors[hash % courseColors.length];
}
const courseColors = [
"#E8E288",
"#7DCE82",
"#3CDBD3",
"#A491D3",
"#1E2D2F",
"#7CC6FE",
"#5DFDCB",
"#C3423F",

"#9067C6",
"#E6AF2E",
];
let courses;
if (planCookie) {
let plan = await prisma.coursePlan.findUnique({
Expand All @@ -62,12 +50,13 @@ export default async function DocsPage() {
},
});
output.push({
classNames: "font-sans ",
classNames: "font-sans",
textColor: "white",
title: courses[i]?.courseTitle,
daColor: color,
subject: courses[i]?.subject,
color: "rgba(0,0,0,0)",
borderColor: "rgba(0,0,0,0)",

borderWidth: "0px",
daysOfWeek: [
meetingTimes?.sunday && "0",
Expand All @@ -78,6 +67,7 @@ export default async function DocsPage() {
meetingTimes?.friday && "5",
meetingTimes?.saturday && "6",
],

startTime:
meetingTimes?.beginTime.slice(0, 2) +
":" +
Expand All @@ -89,7 +79,7 @@ export default async function DocsPage() {
});
}
}
console.log(output);

return output;
}

Expand All @@ -99,7 +89,7 @@ export default async function DocsPage() {
<div className=" col-start-1 h-[70vh] w-[57vw] col-span-2 font-sans font-normal">
<Calendar events={events} />
</div>
<div className="">
<div className="col-start-3 h-[62vh] ">
<CreatePlan />
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>
Expand Down
23 changes: 18 additions & 5 deletions components/Calendar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ 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) {
Expand All @@ -14,11 +15,24 @@ export default function Calendar(props: any) {
console.log(eventInfo);
return (
<Card
className="absolute top-0 left-0 h-full w-[100%] rounded-none "
className=" fc-event-main-frame w-[100%] rounded-md hover:h-[20vh] hover:transition-all duration-700"
style={{ backgroundColor: eventInfo.event.extendedProps.daColor }}
>
<b className="font-sans"> {eventInfo.timeText}</b>
<div className="font-sans">{eventInfo.event.title}</div>
{/*
<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>
);
}
Expand All @@ -28,11 +42,10 @@ export default function Calendar(props: any) {
height="100%"
plugins={[timeGridPlugin]}
initialView="timeGridWeek"
eventMinHeight={70}
allDaySlot={false}
expandRows
slotDuration="01:00:00"
slotMinTime="08:30:00"
slotMinTime="08:00:00"
slotMaxTime="22:00:00"
dayHeaderFormat={dayHeaderContent}
events={props.events}
Expand Down
17 changes: 1 addition & 16 deletions components/CourseCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -28,22 +29,6 @@ const {
role,
} = card();

const courseColors = [
"#FF8360",
"#E8E288",
"#7DCE82",
"#3CDBD3",
"#A491D3",
"#1E2D2F",
"#7CC6FE",
"#5DFDCB",
"#C3423F",
"#05668D",
"#037171",
"#9067C6",
"#E6AF2E",
];

function generateColorFromName(name: string) {
let hash = 0;

Expand Down
62 changes: 38 additions & 24 deletions components/CreatePlan.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
Input,
Button,
Skeleton,
CardHeader,
} from "@nextui-org/react";
import {
Dropdown,
Expand All @@ -27,6 +28,7 @@ import IosShareIcon from "@mui/icons-material/IosShare";
import { tv } from "tailwind-variants";
import axios from "axios";
import { Select, SelectItem } from "@nextui-org/react";
import { useRouter } from "next/navigation";

import { InstructorCard } from "./InstructorCard";
import { usePathname } from "next/navigation";
Expand All @@ -35,9 +37,10 @@ import { useEffect, useState } from "react";
import useSWR from "swr";
import { setPlanCookie } from "@/app/actions";
import { useCookies } from "next-client-cookies";

import { courseColors } from "@/components/primitives";
export default function CreatePlan(props: any) {
const cookies = useCookies();
const router = useRouter();

const pathname = usePathname();
const { data: session, status } = useSession();
Expand Down Expand Up @@ -75,6 +78,20 @@ export default function CreatePlan(props: any) {
});
}
}
async function removeCourseFromPlan(plan: any, course: any) {
await axios
.post("/api/getplancourses", {
plan: plan,
course: course,
})
.then(function (response: any) {
//console.log(response);
router.refresh();
})
.catch(function (error) {
console.log(error);
});
}
async function deletePlan() {
if (cookies.get("plan")) {
axios
Expand All @@ -100,21 +117,6 @@ export default function CreatePlan(props: any) {
setPlanCookie(e.target.value);
};

const courseColors = [
"#FF8360",
"#E8E288",
"#7DCE82",
"#3CDBD3",
"#A491D3",
"#1E2D2F",
"#7CC6FE",
"#5DFDCB",
"#C3423F",
"#05668D",
"#037171",
"#9067C6",
"#E6AF2E",
];
function generateColorFromName(name: string) {
let hash = 0;

Expand Down Expand Up @@ -147,10 +149,11 @@ export default function CreatePlan(props: any) {
<Card
key={course.id}
className={
"bg-light_foreground h-10 rounded-sm scroll-none drop-shadow-lg transition-colors mb-3"
"bg-light_foreground min-h-14 max-h-14 rounded-sm scroll-none drop-shadow-lg transition-colors mb-3"
}
shadow="sm"
isHoverable

// onClick={() => removeCourseFromPlan(selectedCoursePlan, course)}
>
<div
className={`absolute top-0 left-0 h-full w-2 rounded-full`}
Expand All @@ -159,9 +162,21 @@ export default function CreatePlan(props: any) {
}}
/>

<CardBody className="ml-4 overflow-clip ">
{course.courseTitle}
</CardBody>
<CardHeader className="justify-between ">
<div className="ml-4">
{course.courseTitle.replace(/&amp;/g, "&")}
</div>
<Button
size={"sm"}
className=""
isIconOnly
onClick={() =>
removeCourseFromPlan(selectedCoursePlan[0], course)
}
>
X
</Button>
</CardHeader>
</Card>
)
);
Expand All @@ -173,7 +188,7 @@ export default function CreatePlan(props: any) {

return (
<>
<Divider className="h-4/6 absolute mt-10" orientation="vertical" />
<Divider className="h-[60vh] absolute mt-20" orientation="vertical" />

<div className="grid grid-cols-1 grid-rows-10 ml-10 gap-5 h-[66vh] mt-10 overflow-clip">
<div className="font-bold text-primary h1">Create a Plan</div>
Expand All @@ -190,11 +205,10 @@ export default function CreatePlan(props: any) {
/>
<Button
size="lg"
className=""
startContent={<AddIcon></AddIcon>}
onClick={() => createPlan()}
>
Create
<div>Create</div>
</Button>
</div>

Expand Down
37 changes: 0 additions & 37 deletions components/PlanCard.tsx
View file

This file was deleted.

Loading

0 comments on commit 0d02421

Please sign in to comment.