HSE-Apps-Team · halfgrayhuman · Apr 10, 2024 · Apr 10, 2024 · Apr 24, 2024 · Apr 24, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,30 +5,33 @@
   "dependencies": {
     "@ant-design/icons": "^4.6.2",
     "@chakra-ui/icons": "^1.0.11",
-    "@chakra-ui/react": "^1.5.2",
-    "@emotion/react": "^11.1.5",
-    "@emotion/styled": "^11.3.0",
+    "@chakra-ui/react": "^2.8.2",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@material-ui/core": "^4.9.10",
     "@material-ui/icons": "^4.11.2",
+    "@material-ui/lab": "^4.0.0-alpha.49",
     "@testing-library/jest-dom": "^5.11.10",
     "@testing-library/react": "^11.2.6",
     "@testing-library/user-event": "^12.8.3",
     "axios": "^0.21.1",
     "chokidar": "^3.5.2",
     "date-fns": "^2.28.0",
     "dayjs": "^1.10.4",
-    "framer-motion": "^4.1.5",
-    "react": "^17.0.2",
+    "framer-motion": "^3.10.6",
+    "material-ui": "^0.20.2",
+    "react": "^18.2.0",
     "react-calendar": "^3.6.0",
     "react-div-100vh": "^0.6.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "react-router-dom": "^6.2.1",
-    "react-scripts": "4.0.3",
+    "react-scripts": "^5.0.1",
     "styled-components": "^5.3.3",
     "web-vitals": "^1.1.1"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "start": "react-scripts --openssl-legacy-provider start",
+    "build": "react-scripts --openssl-legacy-provider build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
@@ -49,5 +52,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "postcss": "^8.4.38"
   }
 }
diff --git a/public/index.html b/public/index.html
@@ -24,6 +24,8 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+    <!-- Option 1: Include in HTML -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
     <title>HSE Schedule</title>
   </head>
   <body>

diff --git a/src/API/api.js b/src/API/api.js
@@ -4,6 +4,8 @@ const url = "https://schedule-client-api.herokuapp.com";
 //const url = "http://localhost:5000";
 const newsUrl = "https://hsenews.com/wp-json/wp/v2/posts/?categories=493";
 
+const debugUrl = "http://localhost:8001";
+
 export const getSchedule = () => {
   return axios.get(`${url}/schedules`);
 };
@@ -17,3 +19,7 @@ export const getLunch = () => {
 export const getNewsCasts = () => {
   return axios.get(newsUrl);
 };
+
+export const getCalendar = (month) => {
+  return axios.get(`${debugUrl}?month=${month}`)
+};
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 
 import BottomNav from "./Components/BottomNav";
+import Calendar from "./Components/Calendar";
 import Clock from "./Components/Clock";
 import Events from "./Components/Events";
 import Food from "./Components/Food";
@@ -68,7 +69,7 @@ const App = () => {
         )}
         {view == "schedule" && <Schedule />}
         {view == "news" && <News />}
-        {view == "events" && <Events />}
+        {view == "events" && <Calendar />}
         {view == "food" && <Food />}
         {view == "schoolend" && <SchoolEnd />}
 

diff --git a/src/Assets/Calendar.jpg b/src/Assets/Calendar.jpg
diff --git a/src/Assets/Calendarimg.jpg b/src/Assets/Calendarimg.jpg
diff --git a/src/Components/BottomNav.jsx b/src/Components/BottomNav.jsx
@@ -8,7 +8,7 @@ import {
   UnorderedListOutlined,
   PlayCircleOutlined,
 } from "@ant-design/icons";
-import { theme, useColorMode, Text } from "@chakra-ui/react";
+import { theme, useColorMode, Text , Center } from "@chakra-ui/react";
 import RestaurantOutlinedIcon from "@material-ui/icons/RestaurantOutlined";
 
 const BottomNav = (props) => {
@@ -22,18 +22,25 @@ const BottomNav = (props) => {
 
   if (colorMode == "dark") {
     colorTheme = {
-      selectedBackground: "#222831",
-      unselectedBackground: "#20252e",
-      boxShadow: "2px 2px 10px rgb(0,118,220,0.32)",
+      selectedBackground: "#54617a",
+      unselectedBackground: "#3a4354",
+      // boxShadow: "2px 2px 10px rgb(0,118,220,0.32)",
     };
   } else if (colorMode == "light") {
     colorTheme = {
       selectedBackground: "white",
       unselectedBackground: "#f8f8f8",
-      boxShadow: "2px 2px 10px rgb(0,118,220,0.32)",
+      // boxShadow: "2px 2px 10px rgb(0,118,220,0.32)",
     };
   }
 
+  const iconStyle = { 
+    fontSize: "20px", 
+    display: "flex", 
+    justifyContent: "center", 
+    alignItems: "center" 
+  };
+
   return (
     <div
       style={{
@@ -51,7 +58,7 @@ const BottomNav = (props) => {
         style={{
           display: "flex",
           zIndex: 4,
-          boxShadow: "2px 2px 10px rgb(0,118,220,0.2)",
+          // boxShadow: "2px 2px 10px rgb(0,118,220,0.2)",
           borderRadius: "10px",
         }}
       >
@@ -94,7 +101,7 @@ const BottomNav = (props) => {
             cursor: "pointer",
           }}
         >
-          <UnorderedListOutlined style={{ fontSize: "20px" }} />
+          <Center><i class="bi bi-list" style={{fontSize: "25px", display: "flex", justifyContent: "center", alignItems: "center"}}></i></Center>
         </div>
         <div
           onClick={() => {
@@ -114,7 +121,7 @@ const BottomNav = (props) => {
             cursor: "pointer",
           }}
         >
-          <ClockCircleOutlined style={{ fontSize: "20px" }} />
+          <Center><i class="bi bi-clock" style={iconStyle}></i></Center>
         </div>
         <div
           onClick={() => {
@@ -135,7 +142,8 @@ const BottomNav = (props) => {
             cursor: "pointer",
           }}
         >
-          <ClockCircleOutlined style={{ fontSize: "20px" }} />
+          {/* <ClockCircleOutlined style={{ fontSize: "20px" }} /> */}
+          <Center><i class="bi bi-hourglass-split" style={iconStyle}></i></Center>
         </div>
         <div
           onClick={() => {
@@ -156,7 +164,7 @@ const BottomNav = (props) => {
             cursor: "pointer",
           }}
         >
-          <CalendarOutlined style={{ fontSize: "20px" }} />
+          <Center><i class="bi bi-calendar" style={iconStyle}></i></Center>
         </div>
       </div>
     </div>

diff --git a/src/Components/Calendar.jsx b/src/Components/Calendar.jsx
@@ -0,0 +1,174 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import { use100vh } from "react-div-100vh";
+import dayjs from "dayjs";
+import "../Styles/Calendar.css";
+import {
+  Box,
+  Button,
+  Text,
+  useColorMode,
+  CircularProgress,
+  VStack,
+  Stack,
+  HStack,
+  Title,
+  Flex,
+  Spacer,
+  Center,
+  Grid,
+  GridItem,
+  SimpleGrid,
+  Card,
+  CardBody,
+  CardHeader, 
+  CardFooter,
+  StackDivider,
+  Heading,
+  Container,
+  transition,
+} from "@chakra-ui/react";
+import { ChevronLeftIcon, ChevronRightIcon } from "@chakra-ui/icons";
+import { setDate } from "date-fns/esm";
+import useMedia from "../Hooks/useMedia";
+import calendarImg from "../Assets/Calendar.jpg";
+import CalendarImageModal from "./Calendar/CalendarImageModal";
+const dateFns = require("date-fns");
+
+const Navbar = (props) => {
+  const dateFormat = "MMM yyyy";
+
+  return (
+    <Flex>
+      <Spacer />
+      <Center><ChevronLeftIcon onClick={props.prev}/></Center>
+      <Center>
+        <span>{dateFns.format(props.month, dateFormat).toUpperCase()}</span>
+      </Center>
+      <Center><ChevronRightIcon onClick={props.next}/></Center>
+      <Spacer />
+      <CalendarImageModal />
+    </Flex>
+  );
+
+}
+
+const Sidebar = (props) => {
+  const style = {
+    transition: "all 0.5s ease",
+    width: props.showSidebar ? "36%" : "0px",
+    borderRadius: "10px 0 0 10px",
+    whiteSpace: "nowrap",
+  }
+
+  return (
+    <Card overflow={"hidden"} style={style} h={"70vh"}>
+      <CardHeader bg={"blue.500"} color={"white"}>
+        <Text fontSize={"2xl"}>Blue Day</Text>
+        {dateFns.format(props.selectedDate, "PPP")}
+      </CardHeader>
+      <CardBody>Hi</CardBody>
+    </Card>
+
+  );
+}
+
+const Cell = ({selected, date, day, disabled, onDateClick, toggleSidebar, type}) => {
+  const style = {
+    background: selected ? "rgba(193, 209, 255, 0.2)" : "",
+  }
+
+  return (
+    <Grid templateRows="repeat(3, 1fr)" templateColumns="repeat(6, 1fr)" style={style} onClick={() => (onDateClick(date), toggleSidebar(date))}>
+      <GridItem rowSpan={1} colSpan={1} bg={type}>
+        <Center><Text>{day}</Text></Center>
+      </GridItem>
+      <GridItem colStart={2} rowSpan={1} colSpan={5} bg={type}/>
+      <GridItem rowStart={2} colStart={2} rowSpan={4} colSpan={5}>
+        Events
+      </GridItem>
+    </Grid>
+  )
+}
+
+const Table = (props) => {
+  let monthStart = dateFns.startOfMonth(props.month); // first day of the month
+  let day = dateFns.startOfWeek(monthStart); // the start of the week that begins the month
+  let dayCount = dateFns.differenceInCalendarDays(dateFns.lastDayOfWeek(dateFns.lastDayOfMonth(monthStart)), dateFns.startOfWeek(monthStart)); // number of days to be shown in the calendar
+
+  let cellDates = [];
+  for (let i = 0; i <= dayCount; i++) {
+    cellDates.push(day);
+    day = dateFns.addDays(day, 1);
+  }
+
+  const cells = cellDates.map((cellDate) => (
+    <Cell day={dateFns.getDate(cellDate)} 
+          date={cellDate} 
+          disabled={!dateFns.isSameMonth(cellDate, monthStart)} 
+          selected={dateFns.isSameDay(cellDate, props.selectedDate)} 
+          onDateClick={props.onDateClick}
+          toggleSidebar={props.toggleSidebar}
+          type={dateFns.isWeekend(cellDate) ? "gray.600" : "blue.600"}/>
+  ));
+
+
+  const weekDays = [];
+  let startDate = dateFns.startOfWeek(props.month);
+  for (let i = 0; i < 7; i++) {
+    weekDays.push(
+      <Center>{dateFns.format(dateFns.addDays(startDate, i), "eee")}</Center>
+    );
+  }
+
+  return (
+    <Flex direction={"column"} borderRadius={"10px"}>
+      <SimpleGrid columns={7} w="100%" bg={"blue.500"} style={{borderRadius: "10px 10px 0 0"}}>
+        {weekDays}
+      </SimpleGrid>
+      <Box borderRadius={"0 0 10px 10px"} overflow={"hidden"}>
+        <SimpleGrid columns={7} w="100%" h={"62vh"} overflowY={"scroll"}>
+          {cells}
+        </SimpleGrid>
+      </Box>
+    </Flex>
+  );
+};
+
+const Calendar = () => {
+  const [currentMonth, setCurrentMonth] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
+  const [showSidebar, setShowSidebar] = useState(true);
+
+  const handleSelect = (day) => {
+    setSelectedDate(day);
+  };
+
+  const nextMonth = () => {
+    setCurrentMonth(dateFns.addMonths(currentMonth, 1));
+  };
+
+  const prevMonth = () => {
+    setCurrentMonth(dateFns.subMonths(currentMonth, 1));
+  };
+
+  const toggleSidebar = (date) => {
+    if (dateFns.isSameDay(date, selectedDate)) { 
+      setShowSidebar(!showSidebar);
+    } else {
+      setShowSidebar(true);
+    }
+  };
+
+  return (
+    <Flex justifyContent={"center"}>
+      <Flex direction="column" paddingLeft={"5"} paddingRight={"5"} flexBasis={"64%"}>
+        <Navbar month={currentMonth} next={nextMonth} prev={prevMonth} />
+        <Table month={currentMonth} selectedDate={selectedDate} onDateClick={handleSelect} toggleSidebar={toggleSidebar}/>
+      </Flex>
+      <Sidebar selectedDate={selectedDate} showSidebar={showSidebar}/>
+    </Flex>
+  );
+};
+
+export default Calendar;
diff --git a/src/Components/Calendar/CalendarImageModal.jsx b/src/Components/Calendar/CalendarImageModal.jsx
@@ -0,0 +1,40 @@
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+  ModalCloseButton,
+  useDisclosure,
+  Button,
+} from '@chakra-ui/react'
+import calendarImg from "../../Assets/Calendar.jpg"
+function CalendarImageModal() {
+  const { isOpen, onOpen, onClose } = useDisclosure()
+  return (
+    <>
+      <Button onClick={onOpen}>Open Modal</Button>
+
+      <Modal isOpen={isOpen} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>Modal Title</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody overflowY={"scroll"}>
+            <img src={calendarImg} alt="calendar" />
+          </ModalBody>
+
+          <ModalFooter>
+            <Button colorScheme='blue' mr={3} onClick={onClose}>
+              Close
+            </Button>
+            <Button variant='ghost'>Secondary Action</Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  )
+}
+
+export default CalendarImageModal;