From be63783705c149c7a581d6267382615ddd5729c2 Mon Sep 17 00:00:00 2001 From: llloxim Date: Fri, 20 Oct 2023 14:21:09 -0700 Subject: [PATCH 1/4] functionally implemeted calander --- package.json | 3 + src/pages/staff-hours.tsx | 179 +++++++++++++++++++++++++++++++- yarn.lock | 207 +++++++++++++++++++++++++++++++++++++- 3 files changed, 386 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index d904cae..a323c80 100644 --- a/package.json +++ b/package.json @@ -32,8 +32,10 @@ "gatsby-source-filesystem": "^5.12.0", "gatsby-transformer-remark": "^6.12.0", "keycloak-js": "^22.0.3", + "moment": "^2.29.4", "oidc-client-ts": "^2.2.5", "react": "^18.2.0", + "react-big-calendar": "^1.8.4", "react-dom": "^18.2.0", "react-oidc-context": "^2.3.0", "swr": "^2.2.4", @@ -43,6 +45,7 @@ "@types/express": "^4.17.18", "@types/node": "^18.11.9", "@types/react": "^18.2.23", + "@types/react-big-calendar": "^1.8.2", "@types/react-dom": "^18.2.8", "@typescript-eslint/eslint-plugin": "^6.7.3", "@typescript-eslint/parser": "^6.7.3", diff --git a/src/pages/staff-hours.tsx b/src/pages/staff-hours.tsx index f503729..617cc97 100644 --- a/src/pages/staff-hours.tsx +++ b/src/pages/staff-hours.tsx @@ -1,8 +1,185 @@ import { Box } from "@chakra-ui/react" import { SEO } from "~/components/SEO" +import Layout from "~/components/Layout" +import Navbar from "~/components/Navbar" +import FullWidthBox from "~/components/FullWidthBox" +import { useRef, useCallback, useMemo } from "react" +import Footer from "~/components/Footer" +import { Calendar, Views, momentLocalizer, Event } from "react-big-calendar" +import moment from "moment" +import "react-big-calendar/lib/css/react-big-calendar.css" +import { useApiRoute } from "~/utils/api" +const localizer = momentLocalizer(moment) + +function mapDays(weekDay: string) { + switch (weekDay) { + case "Saturday": + return 6 + + case "Monday": + return 1 + + case "Tuesday": + return 2 + + case "Wednesday": + return 3 + + case "Thursday": + return 4 + case "Friday": + return 5 + default: + return 7 + } +} + +function parseTime(time: string) { + const hour = time.match(/\d+/g) + if (hour?.length != 4) { + return [0, 0, 23, 0] + } + let sHour = parseInt(hour[0]) + if (sHour == 12) { + sHour = 0 + } + const sMin = parseInt(hour[1]) + + let eHour = parseInt(hour[2]) + if (eHour == 12) { + eHour = 0 + } + const eMin = parseInt(hour[3]) + + const zones = time.split("-") + if (zones[0].match(/PM/)) { + sHour = sHour + 12 + } + if (zones[1].match(/PM/)) { + eHour = eHour + 12 + } + + return [sHour, sMin, eHour, eMin] +} + +const holidays = [ + { + title: "Holiday", + allDay: false, + start: new Date(2023, 9, 12, 0, 0, 0, 0), + end: new Date(2023, 9, 12, 23, 0, 0, 0), + }, +] const StaffHoursPage = () => { - return page content + const { data: staff } = useApiRoute("/staff_hours") + const staffHours = + staff && + staff.staff_hours.map(function (staff) { + const newDay = moment().startOf("isoWeek").add(mapDays(staff.day), "days") + const times = parseTime(staff.time) + if (!staff.cancelled) { + return { + title: staff.staff[0].real_name, + allDay: false, + start: new Date( + newDay.year(), + newDay.month(), + newDay.date(), + times[0], + parseInt(staff.time.split(":")[1]), + 0, + 0, + ), + end: new Date( + newDay.year(), + newDay.month(), + newDay.date(), + times[2], + 0, + 0, + 0, + ), + } + } else { + return { + title: staff.staff[0].real_name + " CANCELED", + allDay: false, + start: new Date( + newDay.year(), + newDay.month(), + newDay.date(), + times[0], + parseInt(staff.time.split(":")[1]), + 0, + 0, + ), + end: new Date( + newDay.year(), + newDay.month(), + newDay.date(), + times[2], + 0, + 0, + 0, + ), + } + } + }) + const eventPropGetter = useCallback( + (event: Event) => ({ + ...(event.title?.toString().includes("CANCELED") && { + style: { + backgroundColor: "#000", + }, + }), + }), + [], + ) + + const { defaultDate, scrollToTime } = useMemo( + () => ({ + defaultDate: new Date(), + scrollToTime: new Date(1970, 1, 1, 6), + }), + [], + ) + const heroRef = useRef(null) + return ( + + + + + + + +