Feat: started implementing feature calendar and such

emil-webkom · Aug 30, 2024 · e5cd3c8 · e5cd3c8
1 parent ad1c31f
commit e5cd3c8
Show file tree

Hide file tree

Showing 8 changed files with 116 additions and 38 deletions.
diff --git a/frontend/prisma/schema.prisma b/frontend/prisma/schema.prisma
@@ -132,18 +132,20 @@ model ArrangementPaamelding {
 }
 
 model LavterskelArrangement {
-  id           String                  @id @default(cuid())
-  navn         String
-  sted         String?
-  dato         DateTime
-  type         String
-  beskrivelse  String?
-  createdAt    DateTime                @default(now())
-  updatedAt    DateTime                @updatedAt
-  userId       String
-  user         User                    @relation(fields: [userId], references: [id])
+  id          String   @id @default(cuid())
+  navn        String
+  sted        String?
+  dato        DateTime
+  type        String
+  beskrivelse String?
+  createdAt   DateTime @default(now())
+  updatedAt   DateTime @updatedAt
+  userId      String
+  user        User     @relation(fields: [userId], references: [id])
+
   @@index([userId])
 }
+
 enum BookedItem {
   KONTOR
   ONE_SOUNDBOX

diff --git a/frontend/src/app/for_studenten/booking/layout.tsx b/frontend/src/app/for_studenten/booking/layout.tsx
@@ -0,0 +1,26 @@
+import Banner from "@/components/hero/for_studenten_banner";
+import Hero2 from "@/components/hero/hero2";
+import SmallTransissionPCSPC from "@/components/hero/transissions/smallTransissionPCSPC";
+import TransissionIn from "@/components/hero/transissions/transissionIn";
+
+export default function Layout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <div className="text-white w-full">
+        <div className="flex flex-col justify-center items-center text-2xl font-bold gap-y-4 py-4 px-4">
+        <p>Booking</p>
+        <p className="flex flex-col max-w-[512px] space-y-3 text-sm lg:text-l ">
+          På Emil kan du som student booke en rekke ting til diverse
+          anledninger. Vi har blant annet 2 Soundboxer til disposisjon,
+          Emil-kontoret og nå en hytte som deles med Smørekoppen! Komiteer kan
+          også booke ting til arrangementer eller liknende.{" "}
+        </p>
+      </div>
+      <SmallTransissionPCSPC/>
+        {children}
+    </div>
+  );
+}
diff --git a/frontend/src/app/for_studenten/booking/page.tsx b/frontend/src/app/for_studenten/booking/page.tsx
@@ -4,7 +4,11 @@ import MenuCard, {
   MenuCardProps,
 } from "@/components/ForStudenten/ui/menu-card";
 import MenuCardView from "@/components/ForStudenten/ui/menu-card-view";
+import { Booking } from "@/schemas/booking";
+import SmallTransissionPCSPC from "@/components/hero/transissions/smallTransissionPCSPC";
 import { Speaker, Coffee, Home, FileQuestion, ListChecks } from "lucide-react";
+import { useState } from "react";
+import Calendar from "react-calendar";
 
 const BookingPage = () => {
   const cards: MenuCardProps[] = [
@@ -43,29 +47,12 @@ const BookingPage = () => {
   ];
 
   return (
-    <div className="flex flex-col items-center justify-center p-12 gap-y-6">
-      <div className="flex flex-col space-y-4">
-        <h1 className=" text-white text-center font-semibold text-4xl w-full">
-          Booking
-        </h1>
-        <p className="text-white text-md text-center">
-          På Emil kan du som student booke en rekke ting til diverse
-          anledninger. Vi har blant annet 2 Soundboxer til disposisjon,
-          Emil-kontoret og nå en hytte som deles med Smørekoppen! Komiteer kan
-          også booke ting til arrangementer eller liknende.{" "}
-        </p>
+    <div className="flex flex-col items-center justify-center text-white">
+      <div className="p-12 bg-[#225654] rounded-b-md h-full">
+        <MenuCardView cards={cards}></MenuCardView>
       </div>
-      <MenuCardView cards={cards}></MenuCardView>
     </div>
   );
 };
 
 export default BookingPage;
-
-// <MenuCard
-//           href="https://youtube.com"
-//           logo={<Speaker />}
-//           title="Soundbox"
-//           description="Emil har hele 2 soundboxer som studenter kan låne! Book en soundbox til en valgt dato eller tid. Ventetiden kan være lang så vær obs på å booke i god tid!"
-//           buttonLabel="Book Soundbox"
-//         ></MenuCard>
diff --git a/frontend/src/app/for_studenten/booking/soundbox/page.tsx b/frontend/src/app/for_studenten/booking/soundbox/page.tsx
@@ -2,20 +2,73 @@
 
 import BookingForm from "@/components/ForStudenten/booking/booking-form";
 import BookingWindow from "@/components/ForStudenten/booking/booking-window";
+import { Booking } from "@/schemas/booking";
+import { useEffect, useState } from "react";
+import Calendar from "react-calendar";
+import { getBookingList } from "@/utils/booking/booking";
 
 const SoundboxPage = () => {
+  const [bookings, setBookings] = useState<Booking[]>();
+
+  useEffect(() => {
+    fetchBookings();
+    console.log(bookings);
+  }, [])
+
+  const fetchBookings = async () => {
+    try {
+      const bookings = await getBookingList();
+      console.log(bookings);
+      if (bookings){
+        // setBookings(bookings);
+      }
+    } catch (err) {
+      console.error("Could not fetch bookings:", err);
+    }
+  };
   return (
-    <div className="flex flex-col items-center justify-center p-12 gap-y-6">
-      <div className="flex flex-col space-y-4">
-        <h1 className=" text-white text-center font-semibold text-4xl w-full">
+    <div className="flex flex-col items-center justify-center bg-[#225654] rounded-b-md gap-y-4 px-4">
+      <div className="max-w-[512px]">
+        <h1 className=" text-white text-center font-semibold text-2xl w-full">
           Soundbox
         </h1>
-        <p className="text-white text-md text-center">
+        <p className="text-white text-sm text-center">
           Emil har 2 soundboxer som kan bookes. Se oversikten nedenfor og finn
           en dato.{" "}
         </p>
       </div>
-      <BookingWindow />
+      <div className="flex flex-col lg:flex-row justify-center items-center gap-y-4 py-4">
+        <div className="flex justify-start items-start">
+          <BookingWindow />
+        </div>
+        <div className="w-full max-w-[800px]">
+          <div className="text-2xl font-bold flex h-[500px] flex-col justify- items-start ">
+            <p className="w-full flex justify-center">Bookinger</p>
+            {/* RENDER COLOURS FOR BOOKED INSTANCES */}
+          <Calendar
+            locale="nb"
+            className="text-white p-4 font-normal text-sm rounded-md flex items-center justify-center flex-col gap-y-4 lg:px-12"
+            tileClassName={({ date, view }) => {
+              const dateString = date.toDateString();
+              const isToday = dateString === new Date().toDateString();
+
+              return view === "month" && isToday
+              ? "bg-[#579783] text-white font-bold border border-white lg:h-[4rem] p-2 flex flex-col justify-center items-center relative"
+              : "p-2 border border-white h-[4rem] flex flex-col justify-center items-center relative";
+            }}
+            navigationLabel={({ date, label, locale, view }) => (
+              <div className="text-md w-[150px] flex justify-center flex-shrink-0 font-semibold text-white icon-hover">
+                {label.charAt(0).toUpperCase() + label.slice(1)}
+              </div>
+            )}
+            next2Label={null}
+            prev2Label={null}
+            nextLabel={<span className="text-white font-bold text-xl">›</span>}
+            prevLabel={<span className="text-white font-bold text-xl">‹</span>}
+            />
+            </div>
+        </div>
+      </div>
     </div>
   );
 };

diff --git a/frontend/src/components/ForStudenten/booking/booking-window.tsx b/frontend/src/components/ForStudenten/booking/booking-window.tsx
@@ -8,7 +8,7 @@ import { BookingCard } from "./booking-card";
 
 const BookingWindow = () => {
   return (
-    <div className="sm:p-0 text-white min-h-[560px] w-full rounded-md flex flex-col gap-y-2 items-center justify-center">
+    <div className="sm:p-0 text-white min-h-[320px] w-full rounded-md flex flex-col gap-y-2 items-center justify-center">
       {/* <BookingForm /> */}
       <BookingCard />
     </div>

diff --git a/frontend/src/components/auth/card-wrapper.tsx b/frontend/src/components/auth/card-wrapper.tsx
@@ -23,7 +23,7 @@ export const CardWrapper = ({
   showSocial,
 }: CardWrapperProps) => {
   return (
-    <Card className="w-[400px] shadow-md">
+    <Card className="w-full max-w-[512px] shadow-md ">
       <CardHeader className="pb-0">
         <Header title={headerTitle} label={headerLabel}></Header>
       </CardHeader>

diff --git a/frontend/src/utils/actions/checkBooking.ts b/frontend/src/utils/actions/checkBooking.ts
@@ -2,7 +2,7 @@
 
 import * as z from "zod";
 import { bookingFormSchema } from "@/schemas/booking";
-import { getBookingsByDate } from "@/data/booking";
+import { getBookingsByDate } from "@/utils/booking/booking";
 import { db } from "@/lib/db";
 import { BookedItem } from "@prisma/client";
 

diff --git a/frontend/src/data/booking.ts → frontend/src/utils/booking/booking.ts b/frontend/src/data/booking.ts → frontend/src/utils/booking/booking.ts
@@ -23,6 +23,16 @@ export const getBookingsByDate = async (bookingDate: Date) => {
   }
 };
 
+export const getBookingList = async () =>{
+  try {
+    const bookings = await db.booking.findMany();
+    return bookings
+  }catch (error){
+    console.error("Error fetching bookings by date:", error);
+    throw new Error("Could not fetch bookings");
+  }
+}
+
 export const getBookingsByUserID = async (userID: string) => {
   try {
     const user = db.user.findUnique({