80 published schedule refinements (#90)

* page adjustments

* added cohort tags and updated confirm button color to match design

* made stat button bigger to match add day button

---------

Co-authored-by: Kristen Yee <[email protected]>
Co-authored-by: ThatMegamind <[email protected]>
Co-authored-by: ThatMegamind <[email protected]>

Author: 3 people

src/components/Events/DailyEvent.jsx

@@ -1,13 +1,18 @@
 import PropTypes from 'prop-types';
-import { Box, Flex, Text, Grid, Button, Spacer } from '@chakra-ui/react';
+import { Box, Flex, Text, Grid, Button, Spacer, Badge, VStack } from '@chakra-ui/react';
 import { useState } from 'react';
 import { NPOBackend } from '../../utils/auth_utils.js';
 import AUTH_ROLES from '../../utils/auth_config.js';
 import { useAuthContext } from '../../common/AuthContext.jsx';
 const { USER_ROLE } = AUTH_ROLES.AUTH_ROLES;
 
-const DailyEvent = ({ id, startTime, endTime, eventTitle, confirmed, description }) => {
+const DailyEvent = ({ id, startTime, endTime, eventTitle, confirmed, description, eventId }) => {
   const [confirmEvent, setConfirmEvent] = useState(confirmed);
+  const [cohort, setCohort] = useState(undefined);
+  const [cohortBadgeColor, setCohortBadgeColor] = useState(undefined);
+  const [cohortTextColor, setCohortTextColor] = useState(undefined);
+  const [cohortBorderColor, setCohortBorderColor] = useState(undefined);
+  const [cohortBorder, setCohortBorder] = useState(undefined);
   const {currentUser} = useAuthContext();
 
   let border_color = '#2B93D1';
@@ -17,6 +22,42 @@ const DailyEvent = ({ id, startTime, endTime, eventTitle, confirmed, description
     background_color = '#FEF1DC';
   }
 
+  const getCohort = async () => {
+    if (eventId) {
+      try {
+        const { data } = await NPOBackend.get(`/catalog/${eventId}`);
+        let year = data[0].year;
+        if( year.length == 2)
+        {
+          setCohort('Both');
+          setCohortBadgeColor("#FFFFFF");
+          setCohortTextColor("#4A5568");
+          setCohortBorderColor("#4A5568");
+          setCohortBorder("outline");
+        }
+        else if(year[0] == 'junior')
+        {
+          setCohort('Junior');
+          setCohortBadgeColor("#CBD5E0");
+          setCohortTextColor("#171923");
+          setCohortBorderColor("#CBD5E0");
+          setCohortBorder("simple");
+        }
+        else {
+          setCohort('Senior');
+          setCohortBadgeColor("#4A5568");
+          setCohortTextColor("#FFFFFF");
+          setCohortBorderColor("#4A5568");
+          setCohortBorder("simple");
+        }
+      } catch (error) {
+        console.error('Error fetching data:', error);
+      }
+    }
+  }
+
+  getCohort();
+
   const handleConfirm = async () => {
     const date = new Date();
     try {
@@ -54,17 +95,43 @@ const DailyEvent = ({ id, startTime, endTime, eventTitle, confirmed, description
 
         <Spacer />
 
+        <VStack align="flex-end">
+        <Badge
+            key={eventId}
+            variant={cohortBorder}
+            backgroundColor={cohortBadgeColor}
+            color={cohortTextColor}
+            textTransform="capitalize"
+            borderRadius="10rem"
+            borderColor={cohortBorderColor}
+            fontWeight="normal"
+            px="0.5rem"
+            mr="0.125rem"
+          >
+            {cohort}
+          </Badge>
+
         {!confirmEvent && (
-          <Box w="15vh" alignItems="top">
+          <Box w="4rem" alignItems="top">
             <Grid gap={2}>
               <div></div>
               <div></div>
-              <Button bg="#FBD38D" textColor="#2D3748" size="sm" onClick={handleConfirm} visibility={currentUser.type == USER_ROLE ? 'hidden' : 'visible'}>
+              <Button
+                variant="outline"
+                bg="#FEF1DC"
+                textColor="#F69052"
+                borderColor="#F69052"
+                _hover={{ bg: "#F6AD55", color: "#2D3748" }}
+                size="xs"
+                onClick={handleConfirm}
+                visibility={currentUser.type == USER_ROLE ? 'hidden' : 'visible'}
+              >
                 Confirm
               </Button>
-            </Grid>
-          </Box>
+          </Grid>
+        </Box>
         )}
+        </VStack>
       </Flex>
     </Box>
   );
@@ -77,6 +144,7 @@ DailyEvent.propTypes = {
   eventTitle: PropTypes.string.isRequired,
   description: PropTypes.string,
   confirmed: PropTypes.bool.isRequired,
+  eventId: PropTypes.number.isRequired,
 };
 
 export default DailyEvent;

src/components/Events/EventInfo.jsx

@@ -47,9 +47,10 @@ const EventInfo = ({ dayId, eventDate, day, startTime, endTime, location, notes,
         {day} {startTime} - {endTime}
       </Text>
 
-      <Text mb="1.5rem">{location}</Text>
+      <Text as="b" mb="0.5rem">Location: </Text>
+      <Text whiteSpace="pre-wrap" mb="2rem">{location}</Text>
 
-      <Text mb="0.5rem">Details:</Text>
+      <Text as="b" mb="0.5rem">Details:</Text>
       <Text whiteSpace="pre-wrap" mb="2rem">{notes ? notes : 'No notes.'}</Text>
 
       <HStack mt="auto">

src/components/Events/Events.jsx

@@ -5,6 +5,8 @@ import { Grid } from '@chakra-ui/react';
 
 const Events = ({ eventData }) => {
 
+  // console.log("Event Data", eventData);
+
   const formatDate = (date) => {
     let time = date.split(":");
     let hours = time[0];
@@ -73,6 +75,7 @@ const Events = ({ eventData }) => {
           eventTitle={item.title}
           description={item.description}
           confirmed={item.confirmed}
+          eventId={item.eventId}
         />
       ))}
     </Grid>

src/components/Events/PublishedScheduleTable.jsx

@@ -69,8 +69,8 @@ const PublishedScheduleTable = ({ season, allSeasons }) => {
           bottom="6rem"
           right={{ base: '1rem', lg: '2rem', xl: '3rem' }}
           fontSize="1.25rem"
-          w="3rem"
-          h="3rem"
+          w="3.25rem"
+          h="3.25rem"
           _hover={{ bgColor: 'blue.500' }}
           onClick={onOpenStats}
           icon={<IoStatsChart />}
@@ -86,8 +86,8 @@ const PublishedScheduleTable = ({ season, allSeasons }) => {
           bottom="2rem"
           right={{ base: '1rem', lg: '2rem', xl: '3rem' }}
           fontSize="0.75rem"
-          w="3rem"
-          h="3rem"
+          w="3.25rem"
+          h="3.25rem"
           _hover={{ bgColor: 'blue.500' }}
           onClick={onOpenDay}
           icon={<AddIcon />}
@@ -102,7 +102,7 @@ const PublishedScheduleTable = ({ season, allSeasons }) => {
         <StatModal isOpen={isOpenStats} onClose={onCloseStats} season={season} allSeasons={allSeasons}/>
       }
 
-      <TableContainer borderWidth={1} borderRadius="10px">
+      <TableContainer borderWidth={1} borderRadius="10px" mr="2rem">
         <Table variant="simple">
           <Thead>
             <Tr>