Feat: add schedule page framework

uwblueprint · Jul 14, 2024 · 25c6283 · 25c6283
1 parent 6e319fc
commit 25c6283
Show file tree

Hide file tree

Showing 5 changed files with 194 additions and 90 deletions.
diff --git a/frontend/src/components/pages/schedule/SchedulePage.tsx b/frontend/src/components/pages/schedule/SchedulePage.tsx
@@ -7,115 +7,174 @@ import {
   Heading,
   Box,
   Text,
-  Button
+  Button,
+  IconButton,
+  Icon
  } from "@chakra-ui/react";
 
-import { ArrowBackIosNew, ArrowForwardIos } from '@mui/icons-material';
+import { 
+  ArrowBackIosNew,
+  ArrowForwardIos,
+  Edit,
+  Add,
+  FormatListBulleted,
+  CalendarMonth
+} from '@mui/icons-material';
+
 import SideBar from "../../common/SideBar";
 
+import {
+  ScheduleType,
+} from "../../../types/ScheduleTypes";
+
 const SchedulePage = (): React.ReactElement => {
+  const [rooms, setRooms] = useState<number[]>([]);
+  const [scheduleType, setScheduleType] = useState<ScheduleType>("LIST");
+  const [scheduleData, setScheduleData] = useState<string>("");
+  const [active, setActive] = useState<string>("List");
+
+  useEffect(() => {
+    // TODO: Fetch occupied rooms from API?
+    setRooms([1,2,3,4,5,6]);
+  }, []);
+
+  useEffect(() => {
+    if (scheduleType === "LIST") {
+      setScheduleData("List");
+    } else if (scheduleType === "CALENDAR") {
+      setScheduleData("Calendar");
+    }
+  }, [scheduleType]);
+
+  const selectOption = (e: React.MouseEvent<HTMLButtonElement>) => {
+    setActive(e.currentTarget.innerText)
+  };
+
+  const formatTabs = (roomNums: number[]) => {
+    return <Tabs variant="horizontal" h="30px" mb={6}>
+      <TabList pl={6}>
+        { roomNums.map(room => (
+            <Tab key={room} width="10%">
+              Room {room}
+            </Tab>))
+        }
+      </TabList>
+    </Tabs>
+  }
+
   return (
     <Flex>
       <SideBar />
       <Flex flexDir="column" flexGrow={1}>
-      <Tabs variant="horizontal" h="30px" mb={6}>
-          <TabList pl={6}>
-            <Tab width="10%"
-              // onClick={() => {
-              //   setTaskType("REQUIRED");
-              // }}
-            >
-              Room 1
-            </Tab>
-            <Tab width="10%"
-              // onClick={() => {
-              //   setTaskType("OPTIONAL");
-              // }}
-            >
-              Room 2
-            </Tab>
-            <Tab width="10%"
-              // onClick={() => {
-              //   setTaskType("CUSTOM");
-              // }}
-            >
-              Room 3
-            </Tab>
-            <Tab width="10%"
-              // onClick={() => {
-              //   setTaskType("CHORE");
-              // }}
-            >
-              Room 4
-            </Tab>
-            <Tab width="10%"
-              // onClick={() => {
-              //   setTaskType("CHORE");
-              // }}
-            >
-              Room 5
-            </Tab>
-            <Tab width="10%"
-              // onClick={() => {
-              //   setTaskType("CHORE");
-              // }}
-            >
-              Room 6
-            </Tab>
-            <Tab width="10%"
-              // onClick={() => {
-              //   setTaskType("CHORE");
-              // }}
-            >
-              Room 7
-            </Tab>
-            <Tab width="10%"
-              // onClick={() => {
-              //   setTaskType("CHORE");
-              // }}
-            >
-              Room 8
-            </Tab>
-            <Tab width="10%"
-              // onClick={() => {
-              //   setTaskType("CHORE");
-              // }}
-            >
-              Room 9
-            </Tab>
-            <Tab width="10%"
-              // onClick={() => {
-              //   setTaskType("CHORE");
-              // }}
-            >
-              Room 10
-            </Tab>
-          </TabList>
+
+        <Tabs variant="horizontal" h="30px" mb={6}>
+          {formatTabs(rooms)}
         </Tabs>
-        <Flex justifyContent="space-between">
+
+        <Flex justifyContent="space-between" mt={10} ml={8} mr={10}>
           <Flex>
-            <Heading size="lg" fontSize="32px" mt={10} ml={8}>
+            <Heading size="lg" fontSize="36px" w="14vw" color="purple.main">
               January 2025 
               {/* see announcements page for how to determine what text shows */}
             </Heading>
-            <Flex mt={10} w='200px' flexDir="row" height='100px'>
-              <Button borderRightRadius='0'>
-                <ArrowBackIosNew fontSize='small' sx={{color: "#57469D"}} />
-              </Button>
-              <Button alignContent='center' borderRadius='0' sx={{color: "#57469D"}}>
+
+            <Flex w='200px' flexDir="row" height='100px' ml={5}>
+              <IconButton 
+                _hover={{
+                  cursor: "pointer",
+                }}
+                color="purple.main"
+                backgroundColor="grey.50"
+                borderRightRadius='0'
+                aria-label="Previous Week"
+                icon={<ArrowBackIosNew fontSize='small'/>}
+              />
+              <Button alignContent='center' borderRadius='0' color="purple.main" size="md" fontSize="lg">
                 Jan 1 - 7
               </Button>
-              <Button borderLeftRadius='0'>
-                <ArrowForwardIos fontSize='small' sx={{color: "#57469D"}} />
-              </Button>
+              <IconButton 
+                _hover={{
+                  cursor: "pointer",
+                }}
+                color="purple.main"
+                backgroundColor="grey.50"
+                borderLeftRadius='0'
+                aria-label="Previous Week"
+                icon={<ArrowForwardIos fontSize='small'/>}
+              />
             </Flex>
+
+          </Flex>
+
+          <Flex flexDir="row" height='100px' justifyContent="space-between">
+            <Button
+              variant="success"
+              rightIcon={<Icon as={Edit} color="green.main" />}
+              size="sm"
+              onClick={() => {}}
+              mr={5}
+            >
+              200 M-Bucks
+            </Button>
+
+            <Button
+              variant="error"
+              rightIcon={<Icon as={Edit} color="red.main" />}
+              size="sm"
+              onClick={() => {}}
+            >
+              0 Warnings
+            </Button>
           </Flex>
+
+        </Flex>
+
+        <Flex justifyContent="space-between" mt={-5} ml={8} mr={10}>
           <Flex>
-            <Heading>
-              test
-            </Heading>
+            <Button
+              variant={ active === 'List' ? "primary" : "secondary" }
+              w="7vw"
+              borderRightRadius="0"
+              leftIcon={<Icon as={FormatListBulleted} color="white" />}
+              size="sm"
+              onClick={(event) => {
+                selectOption(event);
+                setScheduleType("LIST");
+              }}
+            >
+              List
+            </Button>
+
+            <Button
+              variant={ active === 'Calendar' ? "primary" : "secondary" }
+              w="7vw"
+              borderLeftRadius="0"
+              leftIcon={<Icon as={CalendarMonth} color="white" />}
+              size="sm"
+              onClick={(event) => {
+                selectOption(event);
+                setScheduleType("CALENDAR");
+              }}
+            >
+              Calendar
+            </Button>
           </Flex>
+
+          <Button
+            variant="primary"
+            size="sm"
+            onClick={() => {}}
+          >
+            Update Selected
+          </Button>
         </Flex>
+
+        <Flex justifyContent="space-between" mt={10} ml={8} mr={10}>
+          <Heading>
+            {scheduleData}
+          </Heading>
+        </Flex>
+
       </Flex>
   </Flex>
   );

diff --git a/frontend/src/theme/buttons.ts b/frontend/src/theme/buttons.ts
@@ -39,8 +39,28 @@ const del = defineStyle({
   border: "2px solid #C5C8D8",
 });
 
+const success = defineStyle({
+  height: "34px",
+  borderRadius: "8px",
+  padding: "4px 16px",
+  border: "2px solid #0D8312",
+  bg: "green.100",
+  color: "green.main",
+  _hover: { bg: "green.main", color: "green.100" },
+});
+
+const error = defineStyle({
+  height: "34px",
+  borderRadius: "8px",
+  padding: "4px 16px",
+  border: "2px solid #D34C5C",
+  bg: "red.100",
+  color: "red.main",
+  _hover: { bg: "red.main", color: "red.100" },
+});
+
 const buttonTheme = defineStyleConfig({
-  variants: { primary, secondary, cancel, del },
+  variants: { primary, secondary, cancel, del, success, error },
 });
 
 export default buttonTheme;
diff --git a/frontend/src/theme/colors.ts b/frontend/src/theme/colors.ts
@@ -3,6 +3,7 @@ const colors = {
   white: "#fff",
   gray: {
     main: "#808080",
+    50: "FBFBFB",
     100: "#F5F6F8",
     200: "#E3E4EA",
     300: "#C5C8D8",
@@ -16,8 +17,12 @@ const colors = {
   },
   red: {
     main: "#D34C5C",
-    error: "#E30000",
+    100: "#FFE6E6",
   },
+  green: {
+    main: "#0D8312",
+    100: "#ECFFED",
+  }
 };
 
 export default colors;
diff --git a/frontend/src/types/RoomTypes.ts b/frontend/src/types/RoomTypes.ts
@@ -0,0 +1,5 @@
+export interface Room {
+    author: string;
+    message: string;
+    createdAt: string;
+  }
diff --git a/frontend/src/types/ScheduleTypes.ts b/frontend/src/types/ScheduleTypes.ts
@@ -0,0 +1,15 @@
+export type ScheduleType = "LIST" | "CALENDAR"
+
+export interface Task {
+  title: string;
+  description: string;
+  creditValue: number;
+}
+
+export interface CustomTask extends Task {
+  room: number;
+}
+
+export interface ChoreTask extends Task {
+  location: string;
+}