added location to day planner

ctc-uci · May 9, 2024 · 6d58300 · 6d58300
1 parent c52d30d
commit 6d58300
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 12 deletions.
diff --git a/src/components/Planner/PlannerEvents/PlannerEvents.jsx b/src/components/Planner/PlannerEvents/PlannerEvents.jsx
@@ -1,7 +1,8 @@
 import { useState, useEffect, useContext } from 'react';
 import s from '../PlannerLayout.module.css';
 import { Text, Button, Heading, Box, IconButton, HStack, Flex, useDisclosure } from '@chakra-ui/react';
-import { AddIcon, EditIcon } from '@chakra-ui/icons';
+import { AddIcon } from '@chakra-ui/icons';
+import { FiEdit2 } from "react-icons/fi";
 import Catalog from '../../../pages/Catalog/Catalog';
 import PropTypes from 'prop-types';
 import { PlannerContext } from '../PlannerContext';
@@ -34,7 +35,7 @@ const PlannerEvents = ({ onClose }) => {
       const responseData = response.data[0];
       const [datePart] = responseData.eventDate.split('T');
       const dateObj = getUTCDate(responseData.eventDate);
-      setDateHeader(dateObj.toLocaleDateString({ year: 'numeric', month: 'short', day: '2-digit' }));
+      setDateHeader(dateObj.toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric", }));
       setDayData({id: responseData.id, eventDate: datePart, location: responseData.location, details: responseData.notes});
     } catch (error) {
       console.error(error);
@@ -82,17 +83,19 @@ const PlannerEvents = ({ onClose }) => {
         }
 
         <Box hidden={isAddingEvent || isEdit} h={(isAddingEvent || isEdit) && '0px'}>
-            <HStack>
-            <Heading size="md" pb="1rem">{dateHeader}</Heading>
-              <IconButton mb="1rem" icon={<EditIcon />} onClick={onOpenDay}></IconButton>
-              <AddDayModal
-                isOpenDay={isOpenDay}
-                onCloseDay={onCloseDay}
-                isEdit={true}
-                dayData={dayData}
-                setShouldDataRevalidate={setShouldDataRevalidate}
-              />
+          <HStack mb="1.25rem">
+            <Text fontWeight={600}> Date: </Text>
+            <HStack borderBottom="1px" borderBottomColor="gray.300">
+              <Text>{dateHeader}</Text>
+              <IconButton icon={<FiEdit2 />} onClick={onOpenDay} color="gray.600" size="sm" h="24px"></IconButton>
             </HStack>
+
+            <Text fontWeight={600} ml="3rem"> Location: </Text>
+            <HStack borderBottom="1px" borderBottomColor="gray.300">
+              <Text>{dayData.location}</Text>
+              <IconButton icon={<FiEdit2 />} onClick={onOpenDay} color="gray.600" size="sm" h="24px"></IconButton>
+            </HStack>
+          </HStack>
           <Box bgColor="white" p="1rem" borderRadius="5px" mb="1rem">
             <Heading size="md" pb="1rem" color="gray.800" fontWeight={600}>Create New Event</Heading>
             <Button
@@ -128,6 +131,7 @@ const PlannerEvents = ({ onClose }) => {
             </Button>
           </Flex>
         </Box>
+        <AddDayModal isOpenDay={isOpenDay} onCloseDay={onCloseDay} isEdit={true} dayData={dayData} setShouldDataRevalidate={setShouldDataRevalidate} />
         <EmptyDayModal onClose={onCloseEmptyDay} isOpen={isOpenEmptyDay} onClosePlanner={onClose} />
       </div>
     </div>

diff --git a/src/components/Planner/PlannerLayout.module.css b/src/components/Planner/PlannerLayout.module.css
@@ -76,6 +76,7 @@
 /* PLANNER EVENTS */
 #planner-events-container {
   padding: 2rem;
+  padding-top: 1.5rem;
   /* padding-right: max(5%, 2rem); */
   flex-grow: 1;
   background-color: #edf2f7;