diff --git a/frontend/assets/styles/base/variables.scss b/frontend/assets/styles/base/variables.scss index bb4c8f9f..f783eecd 100644 --- a/frontend/assets/styles/base/variables.scss +++ b/frontend/assets/styles/base/variables.scss @@ -64,5 +64,5 @@ $subtext-color: $french; $time-label-bg: $lightOrange-50; $time-label-color: $bittersweet; $conflict-btn-color: $raspberry; -$detail-color: $french; -$system-color: $outer; \ No newline at end of file +$fave-item-color: $outer; +$details-color: $french; \ No newline at end of file diff --git a/frontend/assets/styles/components/schedule.scss b/frontend/assets/styles/components/schedule.scss index 39484bb4..41a57e26 100644 --- a/frontend/assets/styles/components/schedule.scss +++ b/frontend/assets/styles/components/schedule.scss @@ -2,10 +2,6 @@ padding: 10px 25px; } -.schedule-list-day { - list-style-type: disc; -} - .schedule-list-time { .time-title { background-color: $time-label-bg; @@ -20,32 +16,50 @@ } .fave-list-item { + color: $fave-item-color; margin: 10px; - } -} + width: 100%; -.conflicts-btn { - border-radius: 5px 5px !important; - color: $conflict-btn-color; - font-size: 16px; -} + .conflicts-btn { + border-radius: 5px 5px !important; + color: $conflict-btn-color; + font-size: 14px; + float: right; + } -.fave-title { - font-weight: 700; - font-size: 18px; -} + .conflicts-list { + display: flex; + flex-direction: column; + } -.fave-detail { - color: $detail-color; - font-size: 14px; -} + .conflicts-text { + font-size: 14px; + color: $french; + text-align: right; + } -.fave-system { - color: $system-color; - font-size: 15px; -} + .fave-header { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + } + + .fave-card-title { + font-weight: 700; + font-size: 17px; + } -.fave-description { - font-size: 15px; - margin-top: 5px; + .fave-details { + color: $details-color; + display: flex; + flex-wrap: wrap; + font-size: 15px; + justify-content: space-between; + } + + .fave-system { + color: $details-color; + font-size: 15px; + } + } } \ No newline at end of file diff --git a/frontend/components/FaveCard.tsx b/frontend/components/FaveCard.tsx index 8dca5a47..96352570 100644 --- a/frontend/components/FaveCard.tsx +++ b/frontend/components/FaveCard.tsx @@ -1,20 +1,15 @@ import { useState } from 'react'; import { styled } from '@mui/material/styles'; import Card from '@mui/material/Card'; -import CardHeader from '@mui/material/CardHeader'; -import CardMedia from '@mui/material/CardMedia'; import CardContent from '@mui/material/CardContent'; -import CardActions from '@mui/material/CardActions'; import Collapse from '@mui/material/Collapse'; -import Avatar from '@mui/material/Avatar'; import IconButton, { IconButtonProps } from '@mui/material/IconButton'; import Typography from '@mui/material/Typography'; -import { red } from '@mui/material/colors'; -import FavoriteIcon from '@mui/icons-material/Favorite'; -import ShareIcon from '@mui/icons-material/Share'; + import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import ExpandLessIcon from '@mui/icons-material/ExpandLess'; -import MoreVertIcon from '@mui/icons-material/MoreVert'; +import ReportGmailErrorredIcon from '@mui/icons-material/ReportGmailerrorred'; +import EmojiEventsIcon from '@mui/icons-material/EmojiEvents'; import { NewEvent } from '@/assets/interfaces'; import findEvent from '@/helpers/findEvent'; @@ -28,9 +23,6 @@ const ExpandMore = styled((props: ExpandMoreProps) => { return ; })(({ theme, expand }) => ({ marginLeft: 'auto', - transition: theme.transitions.create('transform', { - duration: theme.transitions.duration.shortest, - }), })); export default function FaveCard ({ favoriteEvent }: { favoriteEvent: NewEvent }) { @@ -45,7 +37,9 @@ export default function FaveCard ({ favoriteEvent }: { favoriteEvent: NewEvent } location, room, tableNum, - gameSystem + gameSystem, + gameId, + tournament } = favoriteEvent; const handleExpandClick = () => { @@ -56,22 +50,61 @@ export default function FaveCard ({ favoriteEvent }: { favoriteEvent: NewEvent } return ( - - {title} + +
+
+ {gameId} +
+
+ {title} +
+
+ + {conflicts && conflicts.length > 0 ? ( +
+ + Conflicts with {conflicts.length} Events {expanded ? : } + + + + {conflicts.map((conflict, index) => { + var conflictEvent = findEvent(conflict) + return ( +
+ {conflictEvent.title} - {conflictEvent.gameId} +
+ ) + })} + + +
+ ) : ( +
+ No conflicting events +
+ )} - - {dateSubTitle} + + + {dateSubTitle} + + {location && ( + + {location} {room && ` : ${room}`} {tableNum && tableNum > 0 ? ` : ${tableNum}` : ''} + + )} - {location && ( - - {location} {room && ` : ${room}`} {tableNum && tableNum > 0 ? ` : ${tableNum}` : ''} - - )} {gameSystem && ( System: {gameSystem} @@ -80,34 +113,14 @@ export default function FaveCard ({ favoriteEvent }: { favoriteEvent: NewEvent } {descriptionShort} + + {tournament && ( + <> + Tournament + + )} + - {conflicts && conflicts.length > 0 && ( - <> - - - Conflicts with {conflicts.length} Events {expanded ? : } - - - - - {conflicts.map((conflict, index) => { - var conflictEvent = findEvent(conflict) - return ( -
- {conflictEvent.title} -
- ) - })} - - - - )} ); } \ No newline at end of file diff --git a/frontend/pages/export/index.tsx b/frontend/pages/export/index.tsx index 8b3d9d8e..561b9d01 100644 --- a/frontend/pages/export/index.tsx +++ b/frontend/pages/export/index.tsx @@ -11,8 +11,6 @@ import FaveCard from '@/components/FaveCard'; const eventsListByDay = filteredEvents.startDates; const eventsListByStartTime = filteredEvents.startTimes; -const eventsListByEndDate = filteredEvents.endDates; -const eventsListByEndTime = filteredEvents.endTimes; const dayLabels = Object.keys(eventsListByDay).sort(); const timeLabels = Object.keys(eventsListByStartTime).sort(); @@ -23,56 +21,52 @@ const findConflicts = (favesList: number[], favesMasterList: number[]) => { var faveEvent = findEvent(fave), conflictingEvents: number[] = []; - // Find events that start at same time; - favesMasterList.filter(val => { - if (eventsListByStartTime[faveEvent.startTime].includes(val) - && eventsListByDay[faveEvent.startDate].includes(val) - && val != faveEvent.id - && !conflictingEvents.includes(val)) { - conflictingEvents.push(val); - } - }) - - // Find events that end at same time; - favesMasterList.filter(val => { - if (eventsListByEndTime[faveEvent.endTime].includes(val) - && eventsListByDay[faveEvent.endDate].includes(val) - && val != faveEvent.id - && !conflictingEvents.includes(val)) { - conflictingEvents.push(val); - } - }) - - // Find events that starts during the duration - favesMasterList.filter(val => { - var valueEvent = findEvent(val) - if ((eventsListByDay[faveEvent.startDate].includes(val) || eventsListByDay[faveEvent.endDate].includes(val)) - && (valueEvent.startTime > faveEvent.startTime && valueEvent.startTime < faveEvent.endTime) - && !conflictingEvents.includes(val)) { - conflictingEvents.push(val); - } - }) - - // Find events that ends during the duration - favesMasterList.filter(val => { - var valueEvent = findEvent(val) - if ((eventsListByDay[faveEvent.startDate].includes(val) - || eventsListByDay[faveEvent.endDate].includes(val)) - && (valueEvent.endTime > faveEvent.startTime - && valueEvent.endTime < faveEvent.endTime) - && !conflictingEvents.includes(val)) { - conflictingEvents.push(val); - } - }) - - // Find events that are too long - favesMasterList.filter(val => { - var valueEvent = findEvent(val) - if ((eventsListByDay[faveEvent.startDate].includes(val) - && eventsListByDay[faveEvent.endDate].includes(val)) - && (valueEvent.startTime < faveEvent.startTime && valueEvent.endTime > faveEvent.endTime) - && !conflictingEvents.includes(val)) { - conflictingEvents.push(val); + favesMasterList.map(val => { + var valueEvent: NewEvent = findEvent(val); + + if (val != faveEvent.id) { + // if val starts or ends at same time as fave + if ((valueEvent.startTime === faveEvent.startTime + && valueEvent.startDate === faveEvent.startDate) || + (valueEvent.endTime === faveEvent.endTime + && valueEvent.endDate === faveEvent.endDate)) { + conflictingEvents.push(val) + } + + // if val starts during fave + if (valueEvent.startDate === faveEvent.startDate && + (valueEvent.startTime >= faveEvent.startTime + && valueEvent.startTime < faveEvent.endTime) && + !conflictingEvents.includes(val)) { + conflictingEvents.push(val) + } + + // if val ends during fave + if (valueEvent.endDate === faveEvent.endDate && + (valueEvent.endTime < faveEvent.endTime + && valueEvent.endTime >= faveEvent.startTime) && + !conflictingEvents.includes(val)) { + conflictingEvents.push(val) + } + + // if value starts before fave and ends after + if (valueEvent.startTime < faveEvent.startTime && + valueEvent.endTime > faveEvent.endTime && + valueEvent.startDate < faveEvent.startDate && + valueEvent.endDate >= faveEvent.endDate && + !conflictingEvents.includes(val)) { + conflictingEvents.push(val) + } + + // if fave ends on next day + if (faveEvent.startDate != faveEvent.endDate) { + // if val ends after fave start but before midnight + if (valueEvent.startDate === faveEvent.startDate && + valueEvent.endTime >= faveEvent.startTime && + !conflictingEvents.includes(val)) { + conflictingEvents.push(val) + } + } } }) @@ -105,7 +99,9 @@ export default function ExportPage () { if (favesPerDay.length) { return ( - + } aria-controls="panel1a-content"