style: initial styling completed

Informatik-Projekt-Kurs · May 10, 2024 · b55ea26 · b55ea26
1 parent cc3a375
commit b55ea26
Show file tree

Hide file tree

Showing 5 changed files with 4,676 additions and 245 deletions.
diff --git a/src/app/dashboard/bookings/page.tsx b/src/app/dashboard/bookings/page.tsx
@@ -16,7 +16,9 @@ import { Button } from "@/components/ui/button";
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import { extractNameInitials } from "@/lib/utils";
 import { useRouter } from "next/navigation";
-import Overview from "@/components/dashboard/scheduler/Scheduler";
+import Scheduler from "@/components/dashboard/scheduler/Scheduler";
+import { FaPlus } from "react-icons/fa6";
+import { CiFilter } from "react-icons/ci";
 
 function Bookings() {
   const [user, setUser] = useState<User | null>();
@@ -94,7 +96,22 @@ function Bookings() {
             </DropdownMenu>
           </div>
         </header>
-        <Overview />
+        <div className={"mt-2 flex w-full items-center justify-between pl-4 text-foreground"}>
+          Your Appointments at a glance. Book a new appointment now!
+          <div className={"flex w-fit items-center justify-center gap-x-4 text-foreground"}>
+            <Button variant={"secondary"}>
+              <CiFilter className={"mr-1"} />
+              Filter
+            </Button>
+            <Button className={"text-foreground"}>
+              <FaPlus className={"mr-1"} />
+              New Appointment
+            </Button>
+          </div>
+        </div>
+        <div className="mt-4 flex h-fit w-full rounded-[20px] bg-subtle p-6">
+          <Scheduler />
+        </div>
       </div>
     );
 }

diff --git a/src/app/dashboard/settings/page.tsx b/src/app/dashboard/settings/page.tsx
@@ -47,6 +47,7 @@ function Settings() {
         const accessToken = await getAccessToken();
         const fetchedUser = await getUser(accessToken);
         setUser(fetchedUser);
+        console.log(user);
         setLoading(false);
 
         if (fetchedUser !== null)
@@ -104,9 +105,6 @@ function Settings() {
                 </FormItem>
               )}
             />
-            <pre>
-              Your user ID is: <strong>{user?.id}</strong>
-            </pre>
             <Button type="submit" className={"w-1/4 self-end"}>
               Submit
             </Button>

diff --git a/src/assets/globals.scss b/src/assets/globals.scss
@@ -2,8 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-@import "node_modules/locomotive-scroll/dist/locomotive-scroll";
-
 @layer base {
   :root {
     --background: 240 10% 4%;
@@ -520,13 +518,4 @@ canvas {
   background: linear-gradient(213deg, $background 50%, $secondary 200%);
 }
 
-@import "../../node_modules/@syncfusion/ej2-base/styles/bootstrap5-dark.css";
-@import "../../node_modules/@syncfusion/ej2-buttons/styles/bootstrap5-dark.css";
-@import "../../node_modules/@syncfusion/ej2-calendars/styles/bootstrap5-dark.css";
-@import "../../node_modules/@syncfusion/ej2-dropdowns/styles/bootstrap5-dark.css";
-@import "../../node_modules/@syncfusion/ej2-inputs/styles/bootstrap5-dark.css";
-@import "../../node_modules/@syncfusion/ej2-lists/styles/bootstrap5-dark.css";
-@import "../../node_modules/@syncfusion/ej2-navigations/styles/bootstrap5-dark.css";
-@import "../../node_modules/@syncfusion/ej2-popups/styles/bootstrap5-dark.css";
-@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/bootstrap5-dark.css";
-@import "../../node_modules/@syncfusion/ej2-react-schedule/styles/bootstrap5-dark.css";
+@import "../../node_modules/@syncfusion/ej2-popups/styles/bootstrap5-dark.css";
diff --git a/src/components/dashboard/scheduler/Scheduler.tsx b/src/components/dashboard/scheduler/Scheduler.tsx
@@ -1,30 +1,70 @@
-import React from "react";
+import React, { useState } from "react";
 import { ScheduleComponent, ViewsDirective, ViewDirective, Inject, WorkWeek } from "@syncfusion/ej2-react-schedule";
 import "./scheduler.css";
 import { registerLicense } from "@syncfusion/ej2-base";
+import { Button } from "@/components/ui/button";
 
 function Scheduler() {
   const data = [
     {
       Id: 1,
       Subject: "Scrum Meeting",
       Location: "Office",
-      StartTime: new Date(2024, 4, 6, 9, 30),
-      EndTime: new Date(2024, 4, 6, 10, 30),
+      StartTime: new Date(2024, 4, 6, 14, 30),
+      EndTime: new Date(2024, 4, 6, 15, 30),
       RecurrenceRule: "FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR;INTERVAL=1"
     }
   ];
   const eventSettings = { dataSource: data };
 
+  const [currentDate, setCurrentDate] = useState(new Date());
+
+  const handleNextWeek = () => {
+    const nextWeek = new Date(currentDate);
+    nextWeek.setDate(nextWeek.getDate() + 7);
+    setCurrentDate(nextWeek);
+  };
+
+  const handlePreviousWeek = () => {
+    const previousWeek = new Date(currentDate);
+    previousWeek.setDate(previousWeek.getDate() - 7);
+    setCurrentDate(previousWeek);
+  };
+
   registerLicense("Ngo9BigBOggjHTQxAR8/V1NBaF5cXmZCf1FpRmJGdld5fUVHYVZUTXxaS00DNHVRdkdnWXpfcHRSR2BdVUVxW0E=");
 
+  const onEventClick = (args: { cancel: boolean }) => {
+    args.cancel = true;
+  };
+
   return (
-    <ScheduleComponent height="650px" eventSettings={eventSettings} showHeaderBar={false}>
-      <ViewsDirective>
-        <ViewDirective option="WorkWeek" />
-      </ViewsDirective>
-      <Inject services={[WorkWeek]} />
-    </ScheduleComponent>
+    <React.Fragment>
+      <div className="absolute z-10 ml-2 mt-3">
+        <Button size={"sm"} variant={"outline"} className={"rounded-full text-foreground"} onClick={handlePreviousWeek}>
+          -
+        </Button>
+        <Button size={"sm"} variant={"outline"} className={"rounded-full text-foreground"} onClick={handleNextWeek}>
+          +
+        </Button>
+      </div>
+      <ScheduleComponent
+        selectedDate={currentDate}
+        height={"500px"}
+        eventSettings={eventSettings}
+        showHeaderBar={false}
+        readonly={true}
+        eventClick={onEventClick}>
+        <ViewsDirective>
+          <ViewDirective
+            option="WorkWeek"
+            startHour="13:00"
+            endHour="19:00"
+            timeScale={{ interval: 60, slotCount: 2 }}
+          />
+        </ViewsDirective>
+        <Inject services={[WorkWeek]} />
+      </ScheduleComponent>
+    </React.Fragment>
   );
 }