Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Modify ImpactSummary in PastEvents #158

Merged
merged 2 commits into from
Apr 17, 2024
Merged

Modify ImpactSummary in PastEvents #158

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
78d8d88
Finished implementing impact summary for past events page
MatthewCCChang Apr 10, 2024
40dfe3a
Merge branch 'main' into 152-modify-impactsummary-in-pastevents
Aokijiop Apr 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2,039 changes: 1,038 additions & 1,001 deletions src/components/DummyVolunteerProfile/ProfilePageModals.jsx
View file
Open in desktop

Large diffs are not rendered by default.

24 changes: 18 additions & 6 deletions src/components/Events/EventCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,11 +112,10 @@ const EventCard = ({
</Box>

<Flex
flexDir={sideBySideCard ? "row" : "column"}
mx={sideBySideCard ? "1rem" : undefined}
flexDir={sideBySideCard ? 'row' : 'column'}
mx={sideBySideCard ? '1rem' : undefined}
gap={sideBySideCard ? 6 : undefined}

>
>
<Image
borderRadius={'xl'}
mt={sideBySideCard ? 0 : 5}
Expand All @@ -129,7 +128,15 @@ const EventCard = ({
height="188px"
/>

<Box width={sideBySideCard ? undefined : '100%'} maxW={'88%'} alignSelf={'center'} justifySelf={'center'} gap={'18px'} mt={sideBySideCard ? 0 : 5} mb={sideBySideCard ? 0 : 5}>
<Box
width={sideBySideCard ? undefined : '100%'}
maxW={'88%'}
alignSelf={'center'}
justifySelf={'center'}
gap={'18px'}
mt={sideBySideCard ? 0 : 5}
mb={sideBySideCard ? 0 : 5}
>
<HappeningInChip date={dateObj} mb={5} />

{name.length > 30 ? (
Expand All @@ -155,7 +162,12 @@ const EventCard = ({
{name}
</Text>
)}
<Text fontFamily="Avenir" fontSize={sideBySideCard ? '18px' : '20px'} fontWeight={500} mt={1}>
<Text
fontFamily="Avenir"
fontSize={sideBySideCard ? '18px' : '20px'}
fontWeight={500}
mt={1}
>
{dateStr}
</Text>

Expand Down
11 changes: 4 additions & 7 deletions src/components/Events/EventFilteredGrid.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import {
import { useEffect, useState } from 'react';
import { SearchIcon } from '@chakra-ui/icons';


import EventCard from '../../components/Events/EventCard';
import Backend from '../../utils/utils';
import Fuse from 'fuse.js';
Expand Down Expand Up @@ -183,14 +182,14 @@ const EventFilteredGrid = () => {
size="lg"
maxW="20%"
minW="200px"
// py="22px"
// pl="45px"
// py="22px"
// pl="45px"
>
{getLocationOptions()}
</Select>
<Select
bg={'white'}
// icon={<Icon as={CalendarIcon}/>}
// icon={<Icon as={CalendarIcon}/>}
onChange={handleDateChange}
placeholder="Select Date"
border={'2px solid var(--Secondary-Button-Color, #EFEFEF)'}
Expand All @@ -201,10 +200,8 @@ const EventFilteredGrid = () => {
>
{getDateOptions()}
</Select>

</Flex>
<Flex flex-direction="row" justifyContent={'left'} gap={7}>
</Flex>
<Flex flex-direction="row" justifyContent={'left'} gap={7}></Flex>
</Flex>
</Flex>
</Box>
Expand Down
7 changes: 1 addition & 6 deletions src/components/Events/FeaturedDashboard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,4 @@
import {
Heading,
Flex,
Grid,
GridItem,
} from '@chakra-ui/react';
import { Heading, Flex, Grid, GridItem } from '@chakra-ui/react';
import { useState, useEffect } from 'react';
import Backend from '../../utils/utils';
import EventCard from './EventCard';
Expand Down
82 changes: 82 additions & 0 deletions src/components/Events/PastEventsImpactSummary.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
import { Box, Button, Flex, VStack } from '@chakra-ui/react';
import { useEffect, useState } from 'react';
import { AiOutlineExport } from 'react-icons/ai';
import { FaTrashCan } from 'react-icons/fa6';
import { IoDocumentText } from 'react-icons/io5';
import { MdPeopleAlt } from 'react-icons/md';
import Backend from '../../utils/utils';
import DataCard from './DataCard';

const PastEventsImpactSummary = () => {
const [registered, setRegistered] = useState(0);
const [checkedIn, setCheckedIn] = useState(0);
const [total, setTotal] = useState(0);

useEffect(() => {
getData();
}, []);

const getData = async () => {
try {
let response = await Backend.get('/stats/registered/past');
console.log(response.data);
setRegistered(parseFloat(response.data));
response = await Backend.get('/stats/checkedIn/past');
setCheckedIn(parseFloat(response.data));
response = await Backend.get('/stats/total/past');
setTotal(parseFloat(response.data));
} catch (err) {
console.log(`Error getting events: `, err.message);
}
};

return (
<Box
mb="5"
display="flex"
flexDirection="row"
gap="8"
justifyContent="center"
alignItems={'center'}
backgroundColor={'#F8F8F8'}
borderRadius={'lg'}
py={10}
>
<DataCard
amount={registered}
text={'Total Registered Volunteers'}
icon={
<Flex background={'#96DB53'} p={2.5} borderRadius={'lg'}>
<IoDocumentText color="white" size={20}></IoDocumentText>
</Flex>
}
/>
<DataCard
amount={checkedIn}
text={'Total Checked-In Volunteers'}
icon={
<Flex background={'#915EFF'} p={2.5} borderRadius={'lg'}>
<MdPeopleAlt color="white" size={20}></MdPeopleAlt>
</Flex>
}
/>
<DataCard
amount={total}
text={'Total Trash Weight'}
icon={
<Flex background={'#FF792E'} p={2.5} borderRadius={'lg'}>
<FaTrashCan color="white" size={20} />
</Flex>
}
/>
<VStack gap={120}>
<Box></Box>
<Button colorScheme={'messenger'} leftIcon={<AiOutlineExport></AiOutlineExport>} size="md">
Export Data
</Button>
</VStack>
</Box>
);
};

export default PastEventsImpactSummary;
200 changes: 98 additions & 102 deletions src/components/EventsTable.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,107 +1,103 @@
/* eslint-disable react/prop-types */
import {
Text,
Flex,
Image,
Table,
Thead,
Tbody,
Tr,
Th,
Td,
TableContainer,
Button,
} from '@chakra-ui/react';
import { NavLink } from "react-router-dom";

const RenderEventRow = ({ event }) => {
const { id, name, location, date, image_url } = event;
Text,
Flex,
Image,
Table,
Thead,
Tbody,
Tr,
Th,
Td,
TableContainer,
Button,
} from '@chakra-ui/react';
import { NavLink } from 'react-router-dom';

return (
<>
<Tr key={id} bg="#FFFFFF" fontWeight={'medium'}>
<Td>
<Flex>
<Image src={image_url} boxSize="4rem" borderRadius="full" />
<Flex direction="column" ml={3} mt={4} g={1} overflow="hidden">
<Text color={'#2D3748'} whiteSpace="nowrap" overflow="hidden" textOverflow="ellipsis">
{name}
</Text>
</Flex>
</Flex>
</Td>
<Td>
<Flex>
<Text fontWeight="550" mt={2}>
{location}
</Text>
</Flex>
</Td>
<Flex mt={9}>
<Text fontWeight="550">
{`${date.substring(5, 7)}/${date.substring(8, 10)}/${date.substring(0, 4)}`}
const RenderEventRow = ({ event }) => {
const { id, name, location, date, image_url } = event;

return (
<>
<Tr key={id} bg="#FFFFFF" fontWeight={'medium'}>
<Td>
<Flex>
<Image src={image_url} boxSize="4rem" borderRadius="full" />
<Flex direction="column" ml={3} mt={4} g={1} overflow="hidden">
<Text color={'#2D3748'} whiteSpace="nowrap" overflow="hidden" textOverflow="ellipsis">
{name}
</Text>
</Flex>
<Td>
<NavLink
to={`/past-events/${event.id}`}
>
<Button
color="#0075FF"
variant="outline"
borderWidth="2px"
borderColor="#0075FF"
onClick={() => console.log("sends to new page")}
>
View Event
</Button>
</NavLink>
</Td>
</Tr>
</>
);
};

const EventsTable = ({ events }) => {
return (
<TableContainer border={'2px solid #E2E8F0'} borderRadius={'15px'}>
<Table mb={5} colorScheme="gray">
<Thead bg="#F7FAFC">
<Tr fontWeight={'medium'}>
<Th w="25%">
<Flex gap={2}>
<Text color="#2D3748" fontWeight="650">
Event Name
</Text>
</Flex>
</Th>
<Th w="25%">
<Flex gap={2}>
<Text color="#2D3748" fontWeight="650">
Location
</Text>
</Flex>
</Th>
<Th w="25%">
<Flex gap={2}>
<Text color="#2D3748" fontWeight="650">
Date
</Text>
</Flex>
</Th>
<Th w="100%">
</Th>
</Tr>
</Thead>
<Tbody>
{events.map(event => (
<RenderEventRow key={event.id} event={event} />
))}
</Tbody>
</Table>
</TableContainer>
);
};

export default EventsTable;

</Flex>
</Td>
<Td>
<Flex>
<Text fontWeight="550" mt={2}>
{location}
</Text>
</Flex>
</Td>
<Flex mt={9}>
<Text fontWeight="550">
{`${date.substring(5, 7)}/${date.substring(8, 10)}/${date.substring(0, 4)}`}
</Text>
</Flex>
<Td>
<NavLink to={`/past-events/${event.id}`}>
<Button
color="#0075FF"
variant="outline"
borderWidth="2px"
borderColor="#0075FF"
onClick={() => console.log('sends to new page')}
>
View Event
</Button>
</NavLink>
</Td>
</Tr>
</>
);
};

const EventsTable = ({ events }) => {
return (
<TableContainer border={'2px solid #E2E8F0'} borderRadius={'15px'}>
<Table mb={5} colorScheme="gray">
<Thead bg="#F7FAFC">
<Tr fontWeight={'medium'}>
<Th w="25%">
<Flex gap={2}>
<Text color="#2D3748" fontWeight="650">
Event Name
</Text>
</Flex>
</Th>
<Th w="25%">
<Flex gap={2}>
<Text color="#2D3748" fontWeight="650">
Location
</Text>
</Flex>
</Th>
<Th w="25%">
<Flex gap={2}>
<Text color="#2D3748" fontWeight="650">
Date
</Text>
</Flex>
</Th>
<Th w="100%"></Th>
</Tr>
</Thead>
<Tbody>
{events.map(event => (
<RenderEventRow key={event.id} event={event} />
))}
</Tbody>
</Table>
</TableContainer>
);
};

export default EventsTable;
Loading
Loading