From dc9c4c349b0cdc20a543a3276ad3a43acb51d7bf Mon Sep 17 00:00:00 2001 From: Nicole Zonnenberg Date: Thu, 13 Jul 2023 17:14:44 -0400 Subject: [PATCH 01/10] refactor --- frontend/assets/interfaces/Component.tsx | 18 +++++++ frontend/assets/interfaces/Page.tsx | 6 +++ frontend/assets/interfaces/index.tsx | 3 +- frontend/components/DrawerFilters.tsx | 62 +++++++++++++++++++++ frontend/pages/_app.tsx | 5 +- frontend/pages/export/index.tsx | 0 frontend/pages/index.tsx | 68 +++++++++--------------- 7 files changed, 116 insertions(+), 46 deletions(-) create mode 100644 frontend/assets/interfaces/Page.tsx create mode 100644 frontend/components/DrawerFilters.tsx create mode 100644 frontend/pages/export/index.tsx diff --git a/frontend/assets/interfaces/Component.tsx b/frontend/assets/interfaces/Component.tsx index 61bd654a..cb77ffa1 100644 --- a/frontend/assets/interfaces/Component.tsx +++ b/frontend/assets/interfaces/Component.tsx @@ -99,3 +99,21 @@ export interface TabPanelProps { index: number; value: number; } + +export interface DrawerFiltersProps { + handleFilter: Function; + ageReqList: string[]; + xpReqList: string[]; + eventTypeList: string[]; + locationList: string[]; + gameSystemList: string[]; + groupsList: string[]; + tournamentFilter: string | null; + setTournamentFilter: Dispatch>; + earliestStartTime: string; + setEarliestStartTime: Dispatch>; + latestStartTime: string; + setLatestStartTime: Dispatch>; + durationFilter: number[]; + setDurationFilter: Dispatch>; +} \ No newline at end of file diff --git a/frontend/assets/interfaces/Page.tsx b/frontend/assets/interfaces/Page.tsx new file mode 100644 index 00000000..c94d9de6 --- /dev/null +++ b/frontend/assets/interfaces/Page.tsx @@ -0,0 +1,6 @@ +import { Dispatch, SetStateAction } from "react"; + +export interface HomePageProps { + faves: number[]; + setFaves: Dispatch>; +} \ No newline at end of file diff --git a/frontend/assets/interfaces/index.tsx b/frontend/assets/interfaces/index.tsx index ade0b39d..bb9e5ed7 100644 --- a/frontend/assets/interfaces/index.tsx +++ b/frontend/assets/interfaces/index.tsx @@ -1,4 +1,5 @@ export * from '@/assets/interfaces/Component'; export * from '@/assets/interfaces/Data'; export * from '@/assets/interfaces/Event'; -export * from '@/assets/interfaces/Filter'; \ No newline at end of file +export * from '@/assets/interfaces/Filter'; +export * from '@/assets/interfaces/Page'; \ No newline at end of file diff --git a/frontend/components/DrawerFilters.tsx b/frontend/components/DrawerFilters.tsx new file mode 100644 index 00000000..53640e06 --- /dev/null +++ b/frontend/components/DrawerFilters.tsx @@ -0,0 +1,62 @@ +import FilterAltIcon from '@mui/icons-material/FilterAlt'; +import AccessTimeFilledIcon from '@mui/icons-material/AccessTimeFilled'; + +import DrawerComponent from '@/components/UI/Drawer'; +import EventCategoryFilters from '@/components/EventCategoryFilters'; +import TimeFilters from '@/components/TimeFilters'; + +import { DrawerFiltersProps } from '@/assets/interfaces'; + +export default function DrawerFilters ({ + handleFilter, + ageReqList, + xpReqList, + eventTypeList, + gameSystemList, + groupsList, + locationList, + tournamentFilter, + setTournamentFilter, + earliestStartTime, + setEarliestStartTime, + latestStartTime, + setLatestStartTime, + durationFilter, + setDurationFilter +}: DrawerFiltersProps) { + return ( + <> +
+ } buttonText='Filter By Event Category'> +
+ +
+ +
+
+ } buttonText='Filter By Time'> +
+ +
+ +
+ + ) +} \ No newline at end of file diff --git a/frontend/pages/_app.tsx b/frontend/pages/_app.tsx index 241fceed..f9ef8e83 100644 --- a/frontend/pages/_app.tsx +++ b/frontend/pages/_app.tsx @@ -28,7 +28,8 @@ type AppPropsWithLayout = AppProps & { } export default function MyApp({ Component, pageProps }: AppPropsWithLayout) { - const [hasMounted, setHasMounted] = useState(false) + const [hasMounted, setHasMounted] = useState(false); + const [faves, setFaves] = useState([]); useEffect(() => { setHasMounted(true) @@ -46,7 +47,7 @@ export default function MyApp({ Component, pageProps }: AppPropsWithLayout) { Loading... ) : ( - + )} diff --git a/frontend/pages/export/index.tsx b/frontend/pages/export/index.tsx new file mode 100644 index 00000000..e69de29b diff --git a/frontend/pages/index.tsx b/frontend/pages/index.tsx index 04e91ffc..a6c287a1 100644 --- a/frontend/pages/index.tsx +++ b/frontend/pages/index.tsx @@ -1,19 +1,16 @@ import { useState } from 'react'; -import FilterAltIcon from '@mui/icons-material/FilterAlt'; -import AccessTimeFilledIcon from '@mui/icons-material/AccessTimeFilled'; - -import DailyTabs from '@/components/DailyTabs'; -import DrawerComponent from '@/components/UI/Drawer'; -import EventCard from '@/components/UI/EventCard'; -import EventCategoryFilters from '@/components/EventCategoryFilters'; -import PopoverButton from '@/components/UI/PopOverButton'; -import ToggleComponent from '@/components/UI/Toggle'; import { filteredEvents } from './_app'; import filterOutHelper from '@/helpers/filterOut'; import filterForHelper from '@/helpers/filterFor'; import findEvent from '@/helpers/findEvent'; -import TimeFilters from '@/components/TimeFilters'; + +import DailyTabs from '@/components/DailyTabs'; +import DrawerFilters from '@/components/DrawerFilters'; +import EventCard from '@/components/UI/EventCard'; +import PopoverButton from '@/components/UI/PopOverButton'; +import ToggleComponent from '@/components/UI/Toggle'; +import { HomePageProps } from '@/assets/interfaces'; const ageReqMasterList = filteredEvents.ageRequirement; const xpReqMasterList = filteredEvents.experienceType; @@ -22,7 +19,7 @@ const gameSystemMasterList = filteredEvents.gameSystems; const groupsMasterList = filteredEvents.groups; const locationMasterList = filteredEvents.locations; -export default function Home () { +export default function Home ({ faves, setFaves }: HomePageProps) { // Lists const [ageReqList, setAgeReqList] = useState([]); const [xpReqList, setXPReqList] = useState([]); @@ -45,7 +42,6 @@ export default function Home () { const [durationFilter, setDurationFilter] = useState([0.5, 10]); // Favorites - const [faves, setFaves] = useState([]); const [numOfFaves, setNumOfFaves] = useState(faves.length); const handleFilter = async ({ @@ -140,37 +136,23 @@ export default function Home () { hide={hideSoldOut} setHide={setHideSoldOut} /> -
- } buttonText='Filter By Event Category'> -
- -
- -
-
- } buttonText='Filter By Time'> -
- -
- -
+
Date: Fri, 14 Jul 2023 09:33:55 -0400 Subject: [PATCH 02/10] finalize favorites in component --- frontend/assets/interfaces/Component.tsx | 5 +++++ frontend/assets/interfaces/Page.tsx | 5 +++++ frontend/components/Favorites.tsx | 21 +++++++++++++++++++++ frontend/components/TimeFilters.tsx | 1 - frontend/pages/export/index.tsx | 7 +++++++ frontend/pages/index.tsx | 12 ++---------- 6 files changed, 40 insertions(+), 11 deletions(-) create mode 100644 frontend/components/Favorites.tsx diff --git a/frontend/assets/interfaces/Component.tsx b/frontend/assets/interfaces/Component.tsx index cb77ffa1..f79c9994 100644 --- a/frontend/assets/interfaces/Component.tsx +++ b/frontend/assets/interfaces/Component.tsx @@ -116,4 +116,9 @@ export interface DrawerFiltersProps { setLatestStartTime: Dispatch>; durationFilter: number[]; setDurationFilter: Dispatch>; +} + +export interface FavoritesProps { + faves: number[]; + handleFaves: Function; } \ No newline at end of file diff --git a/frontend/assets/interfaces/Page.tsx b/frontend/assets/interfaces/Page.tsx index c94d9de6..c371e436 100644 --- a/frontend/assets/interfaces/Page.tsx +++ b/frontend/assets/interfaces/Page.tsx @@ -3,4 +3,9 @@ import { Dispatch, SetStateAction } from "react"; export interface HomePageProps { faves: number[]; setFaves: Dispatch>; +} + +export interface ExportPageProps { + faves: number[]; + setFaves: Dispatch>; } \ No newline at end of file diff --git a/frontend/components/Favorites.tsx b/frontend/components/Favorites.tsx new file mode 100644 index 00000000..5e2364d4 --- /dev/null +++ b/frontend/components/Favorites.tsx @@ -0,0 +1,21 @@ +import { FavoritesProps } from "@/assets/interfaces"; +import EventCard from "@/components/UI/EventCard"; +import PopoverButton from '@/components/UI/PopOverButton'; +import findEvent from "@/helpers/findEvent"; + +export default function Favorites ({ faves, handleFaves }: FavoritesProps) { + const numOfFaves = faves.length; + + return ( +
+ + {faves.map((fave, index) => { + var faveEvent = findEvent(fave); + return ; + })} + +
+ ) +} \ No newline at end of file diff --git a/frontend/components/TimeFilters.tsx b/frontend/components/TimeFilters.tsx index 3c532d7d..c8b4cb9f 100644 --- a/frontend/components/TimeFilters.tsx +++ b/frontend/components/TimeFilters.tsx @@ -1,4 +1,3 @@ -import { Dispatch, SetStateAction } from "react"; import AutocompleteTimeComponent from "@/components/UI/AutoCompleteTime"; import getQuarterHours from "@/helpers/getQuarterHours"; diff --git a/frontend/pages/export/index.tsx b/frontend/pages/export/index.tsx index e69de29b..92f8559c 100644 --- a/frontend/pages/export/index.tsx +++ b/frontend/pages/export/index.tsx @@ -0,0 +1,7 @@ +export default function ExportPage () { + return ( + <> + Export + + ) +} \ No newline at end of file diff --git a/frontend/pages/index.tsx b/frontend/pages/index.tsx index a6c287a1..6117a407 100644 --- a/frontend/pages/index.tsx +++ b/frontend/pages/index.tsx @@ -11,6 +11,7 @@ import EventCard from '@/components/UI/EventCard'; import PopoverButton from '@/components/UI/PopOverButton'; import ToggleComponent from '@/components/UI/Toggle'; import { HomePageProps } from '@/assets/interfaces'; +import Favorites from '@/components/Favorites'; const ageReqMasterList = filteredEvents.ageRequirement; const xpReqMasterList = filteredEvents.experienceType; @@ -153,16 +154,7 @@ export default function Home ({ faves, setFaves }: HomePageProps) { durationFilter={durationFilter} setDurationFilter={setDurationFilter} /> -
- - {faves.map((fave, index) => { - var faveEvent = findEvent(fave); - return ; - })} - -
+
Date: Fri, 14 Jul 2023 09:59:06 -0400 Subject: [PATCH 03/10] refactor --- frontend/assets/interfaces/Component.tsx | 1 - .../assets/styles/components/favorites.scss | 4 ++++ frontend/components/Favorites.tsx | 19 ++++++++++++++++--- .../components/UI/AutoCompleteMultiple.tsx | 1 + frontend/pages/export/index.tsx | 3 +++ frontend/pages/index.tsx | 13 +++---------- 6 files changed, 27 insertions(+), 14 deletions(-) diff --git a/frontend/assets/interfaces/Component.tsx b/frontend/assets/interfaces/Component.tsx index f79c9994..7e89a215 100644 --- a/frontend/assets/interfaces/Component.tsx +++ b/frontend/assets/interfaces/Component.tsx @@ -119,6 +119,5 @@ export interface DrawerFiltersProps { } export interface FavoritesProps { - faves: number[]; handleFaves: Function; } \ No newline at end of file diff --git a/frontend/assets/styles/components/favorites.scss b/frontend/assets/styles/components/favorites.scss index 1b8cf74f..cef35923 100644 --- a/frontend/assets/styles/components/favorites.scss +++ b/frontend/assets/styles/components/favorites.scss @@ -45,4 +45,8 @@ .favorite-actions { display: flex; justify-content: space-between; +} + +.export-btn { + margin-bottom: 10px; } \ No newline at end of file diff --git a/frontend/components/Favorites.tsx b/frontend/components/Favorites.tsx index 5e2364d4..34141bb7 100644 --- a/frontend/components/Favorites.tsx +++ b/frontend/components/Favorites.tsx @@ -1,17 +1,30 @@ +import Button from '@mui/material/Button'; +import OpenInNewIcon from '@mui/icons-material/OpenInNew'; import { FavoritesProps } from "@/assets/interfaces"; import EventCard from "@/components/UI/EventCard"; import PopoverButton from '@/components/UI/PopOverButton'; import findEvent from "@/helpers/findEvent"; -export default function Favorites ({ faves, handleFaves }: FavoritesProps) { - const numOfFaves = faves.length; +export default function Favorites ({ handleFaves }: FavoritesProps) { + const listOfFaves = JSON.parse(localStorage.getItem('faves') || '[]'); + const numOfFaves = listOfFaves.length; return (
- {faves.map((fave, index) => { + + {listOfFaves.map((fave: number, index: number) => { var faveEvent = findEvent(fave); return ; })} diff --git a/frontend/components/UI/AutoCompleteMultiple.tsx b/frontend/components/UI/AutoCompleteMultiple.tsx index b20cefa7..1bf3e656 100644 --- a/frontend/components/UI/AutoCompleteMultiple.tsx +++ b/frontend/components/UI/AutoCompleteMultiple.tsx @@ -13,6 +13,7 @@ export default function AutocompleteMultiComponent({
Export diff --git a/frontend/pages/index.tsx b/frontend/pages/index.tsx index 6117a407..e9fd0052 100644 --- a/frontend/pages/index.tsx +++ b/frontend/pages/index.tsx @@ -3,12 +3,9 @@ import { useState } from 'react'; import { filteredEvents } from './_app'; import filterOutHelper from '@/helpers/filterOut'; import filterForHelper from '@/helpers/filterFor'; -import findEvent from '@/helpers/findEvent'; import DailyTabs from '@/components/DailyTabs'; import DrawerFilters from '@/components/DrawerFilters'; -import EventCard from '@/components/UI/EventCard'; -import PopoverButton from '@/components/UI/PopOverButton'; import ToggleComponent from '@/components/UI/Toggle'; import { HomePageProps } from '@/assets/interfaces'; import Favorites from '@/components/Favorites'; @@ -41,9 +38,6 @@ export default function Home ({ faves, setFaves }: HomePageProps) { const [earliestStartTime, setEarliestStartTime] = useState('00:00'); const [latestStartTime, setLatestStartTime] = useState('23:45'); const [durationFilter, setDurationFilter] = useState([0.5, 10]); - - // Favorites - const [numOfFaves, setNumOfFaves] = useState(faves.length); const handleFilter = async ({ groupLabel, @@ -114,7 +108,7 @@ export default function Home ({ faves, setFaves }: HomePageProps) { } const includesFave = (eventIndex: number) => { - return faves.includes(eventIndex) ? true : false; + return faves.includes(eventIndex); } const handleFaves = async (eventIndex: number) => { @@ -125,8 +119,7 @@ export default function Home ({ faves, setFaves }: HomePageProps) { } else { newFaves.push(eventIndex); } - setFaves(newFaves) - await setNumOfFaves(newFaves.length); + setFaves(newFaves); } return ( @@ -154,7 +147,7 @@ export default function Home ({ faves, setFaves }: HomePageProps) { durationFilter={durationFilter} setDurationFilter={setDurationFilter} /> - +
Date: Fri, 14 Jul 2023 10:07:33 -0400 Subject: [PATCH 04/10] removing unused items --- frontend/assets/interfaces/Component.tsx | 1 + frontend/components/Favorites.tsx | 7 ++--- frontend/helpers/filterFor.tsx | 40 ------------------------ frontend/pages/index.tsx | 8 ++--- 4 files changed, 8 insertions(+), 48 deletions(-) diff --git a/frontend/assets/interfaces/Component.tsx b/frontend/assets/interfaces/Component.tsx index 7e89a215..f79c9994 100644 --- a/frontend/assets/interfaces/Component.tsx +++ b/frontend/assets/interfaces/Component.tsx @@ -119,5 +119,6 @@ export interface DrawerFiltersProps { } export interface FavoritesProps { + faves: number[]; handleFaves: Function; } \ No newline at end of file diff --git a/frontend/components/Favorites.tsx b/frontend/components/Favorites.tsx index 34141bb7..1533b7f3 100644 --- a/frontend/components/Favorites.tsx +++ b/frontend/components/Favorites.tsx @@ -5,9 +5,8 @@ import EventCard from "@/components/UI/EventCard"; import PopoverButton from '@/components/UI/PopOverButton'; import findEvent from "@/helpers/findEvent"; -export default function Favorites ({ handleFaves }: FavoritesProps) { - const listOfFaves = JSON.parse(localStorage.getItem('faves') || '[]'); - const numOfFaves = listOfFaves.length; +export default function Favorites ({ faves, handleFaves }: FavoritesProps) { + const numOfFaves = faves.length; return (
@@ -24,7 +23,7 @@ export default function Favorites ({ handleFaves }: FavoritesProps) { > Export Favorites - {listOfFaves.map((fave: number, index: number) => { + {faves.map((fave: number, index: number) => { var faveEvent = findEvent(fave); return ; })} diff --git a/frontend/helpers/filterFor.tsx b/frontend/helpers/filterFor.tsx index aca37b6a..14e94192 100644 --- a/frontend/helpers/filterFor.tsx +++ b/frontend/helpers/filterFor.tsx @@ -1,45 +1,5 @@ import { UniqueFilter } from "@/assets/interfaces"; import { Dispatch, SetStateAction } from "react"; -// import { filteredEvents } from "@/pages/_app"; -// import { UniqueFilter } from "@/assets/interfaces"; - -// const addEventsToFilter = ( -// eventIds: number[], -// filterList: number[], -// setFilterList: Dispatch> -// ) => { -// var newFilters = [...filterList, ...eventIds]; -// setFilterList(newFilters); -// } - -// const removeEventsFromFilter = ( -// eventIds: number[], -// filterList: number[], -// setFilterList: Dispatch> -// ) => { -// var newFilters = filterList.filter(val => !eventIds.includes(val)); -// setFilterList(newFilters); -// } - -// const addLabel = (label: string, -// hiddenLabeList: string[], -// setHiddenLabelList: Dispatch> -// ) => { -// var newHidden = hiddenLabeList; -// newHidden.push(label); -// setHiddenLabelList([...newHidden]); -// } - -// const removeLabel = ( -// label: string, -// hiddenLabeList: string[], -// setHiddenLabelList: Dispatch> -// ) => { -// var index = hiddenLabeList.indexOf(label), -// newHidden = hiddenLabeList; -// newHidden.splice(index, 1); -// setHiddenLabelList([...newHidden]) -// } const filterForHelper = ( eventList: UniqueFilter, diff --git a/frontend/pages/index.tsx b/frontend/pages/index.tsx index e9fd0052..357939e7 100644 --- a/frontend/pages/index.tsx +++ b/frontend/pages/index.tsx @@ -38,7 +38,7 @@ export default function Home ({ faves, setFaves }: HomePageProps) { const [earliestStartTime, setEarliestStartTime] = useState('00:00'); const [latestStartTime, setLatestStartTime] = useState('23:45'); const [durationFilter, setDurationFilter] = useState([0.5, 10]); - + const handleFilter = async ({ groupLabel, label, @@ -108,7 +108,7 @@ export default function Home ({ faves, setFaves }: HomePageProps) { } const includesFave = (eventIndex: number) => { - return faves.includes(eventIndex); + return faves.includes(eventIndex) ? true : false; } const handleFaves = async (eventIndex: number) => { @@ -119,7 +119,7 @@ export default function Home ({ faves, setFaves }: HomePageProps) { } else { newFaves.push(eventIndex); } - setFaves(newFaves); + setFaves(newFaves) } return ( @@ -147,7 +147,7 @@ export default function Home ({ faves, setFaves }: HomePageProps) { durationFilter={durationFilter} setDurationFilter={setDurationFilter} /> - +
Date: Fri, 14 Jul 2023 10:56:27 -0400 Subject: [PATCH 05/10] list days and times --- .../styles/components/0_components.scss | 1 + .../assets/styles/components/schedule.scss | 11 ++++ frontend/pages/export/index.tsx | 50 ++++++++++++++++++- frontend/pages/index.tsx | 17 ++++--- 4 files changed, 72 insertions(+), 7 deletions(-) create mode 100644 frontend/assets/styles/components/schedule.scss diff --git a/frontend/assets/styles/components/0_components.scss b/frontend/assets/styles/components/0_components.scss index 119f7e7f..f70312da 100644 --- a/frontend/assets/styles/components/0_components.scss +++ b/frontend/assets/styles/components/0_components.scss @@ -1,5 +1,6 @@ @import './content.scss'; @import './favorites.scss'; @import './navigation.scss'; +@import './schedule.scss'; @import './table.scss'; @import './ui.scss'; \ No newline at end of file diff --git a/frontend/assets/styles/components/schedule.scss b/frontend/assets/styles/components/schedule.scss new file mode 100644 index 00000000..721ffd27 --- /dev/null +++ b/frontend/assets/styles/components/schedule.scss @@ -0,0 +1,11 @@ +.schedule-container { + padding: 10px 25px; +} + +.schedule-list-day { + list-style-type: disc; +} + +.schedule-list-time { + list-style-type: circle; +} \ No newline at end of file diff --git a/frontend/pages/export/index.tsx b/frontend/pages/export/index.tsx index b3e4bc4a..b9f14872 100644 --- a/frontend/pages/export/index.tsx +++ b/frontend/pages/export/index.tsx @@ -1,10 +1,58 @@ +import { filteredEvents } from "@/pages/_app"; + +const eventsListByDay = filteredEvents.startDates; +const eventsListByStartTime = filteredEvents.startTimes; +const dayLabels = Object.keys(eventsListByDay).sort(); +const timeLabels = Object.keys(eventsListByStartTime).sort(); + export default function ExportPage () { const faves = JSON.parse(localStorage.getItem('faves') || '[]'); - console.log(faves); + const getFaves = (day: string) => { + const dayFaves = eventsListByDay[day] + var favesForDay = dayFaves; + + favesForDay = favesForDay.filter(val => faves.includes(val)); + + return favesForDay; + } + return ( <> Export +
+ {dayLabels.map((day, index) => { + var favesPerDay = getFaves(day); + + if (favesPerDay.length) { + return ( +
    +
  • + + {day} + +
    + {timeLabels.map((time, index) => { + const favesPerTime = favesPerDay.filter(val => eventsListByStartTime[time].includes(val)); + + if (favesPerTime.length) { + return ( +
      +
    • + {time} +
      • +
    + ) + } + })} +
    +
    • +
+ ) + } + + })} +
) } \ No newline at end of file diff --git a/frontend/pages/index.tsx b/frontend/pages/index.tsx index 357939e7..5c54822b 100644 --- a/frontend/pages/index.tsx +++ b/frontend/pages/index.tsx @@ -10,12 +10,12 @@ import ToggleComponent from '@/components/UI/Toggle'; import { HomePageProps } from '@/assets/interfaces'; import Favorites from '@/components/Favorites'; -const ageReqMasterList = filteredEvents.ageRequirement; -const xpReqMasterList = filteredEvents.experienceType; -const eventTypeMasterList = filteredEvents.eventTypes; -const gameSystemMasterList = filteredEvents.gameSystems; -const groupsMasterList = filteredEvents.groups; -const locationMasterList = filteredEvents.locations; +export const ageReqMasterList = filteredEvents.ageRequirement; +export const xpReqMasterList = filteredEvents.experienceType; +export const eventTypeMasterList = filteredEvents.eventTypes; +export const gameSystemMasterList = filteredEvents.gameSystems; +export const groupsMasterList = filteredEvents.groups; +export const locationMasterList = filteredEvents.locations; export default function Home ({ faves, setFaves }: HomePageProps) { // Lists @@ -39,6 +39,9 @@ export default function Home ({ faves, setFaves }: HomePageProps) { const [latestStartTime, setLatestStartTime] = useState('23:45'); const [durationFilter, setDurationFilter] = useState([0.5, 10]); + // Favorites + const [numOfFaves, setNumOfFaves] = useState(faves.length); + const handleFilter = async ({ groupLabel, label, @@ -120,6 +123,8 @@ export default function Home ({ faves, setFaves }: HomePageProps) { newFaves.push(eventIndex); } setFaves(newFaves) + localStorage.setItem('faves', JSON.stringify(newFaves)) + await setNumOfFaves(newFaves.length); } return ( From fff27f80918d00b4855570a6946119c17ed4bdd7 Mon Sep 17 00:00:00 2001 From: Nicole Zonnenberg Date: Mon, 17 Jul 2023 10:17:31 -0400 Subject: [PATCH 06/10] show conflicts --- frontend/assets/interfaces/Event.tsx | 1 + frontend/helpers/cleanData.tsx | 1 + frontend/pages/export/index.tsx | 95 ++++++++++++++++++++++++++++ 3 files changed, 97 insertions(+) diff --git a/frontend/assets/interfaces/Event.tsx b/frontend/assets/interfaces/Event.tsx index 64b99d02..5fa06dee 100644 --- a/frontend/assets/interfaces/Event.tsx +++ b/frontend/assets/interfaces/Event.tsx @@ -28,6 +28,7 @@ export interface NewEvent { title: string; tournament?: boolean website?: string; + conflicts?: number[]; } export interface RawEvent { diff --git a/frontend/helpers/cleanData.tsx b/frontend/helpers/cleanData.tsx index 0224ef1f..8eab5a39 100644 --- a/frontend/helpers/cleanData.tsx +++ b/frontend/helpers/cleanData.tsx @@ -66,6 +66,7 @@ export const cleanData = ({ keyList, eventList }: { var newEvent: NewEvent = { id: 0, ageRequirement: '', + conflicts: [], contact: '', cost: 0, descriptionShort: '', diff --git a/frontend/pages/export/index.tsx b/frontend/pages/export/index.tsx index b9f14872..b72db494 100644 --- a/frontend/pages/export/index.tsx +++ b/frontend/pages/export/index.tsx @@ -1,10 +1,82 @@ import { filteredEvents } from "@/pages/_app"; +import findEvent from "@/helpers/findEvent"; +import { NewEvent } from "@/assets/interfaces"; 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(); +const findConflicts = (favesList: number[], favesMasterList: number[]) => { + var faveDetails: NewEvent[] = []; + + favesList.map((fave, index) => { + 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); + } + }) + + faveEvent.conflicts = conflictingEvents; + + faveDetails.push(faveEvent) + }) + + return faveDetails; +} + export default function ExportPage () { const faves = JSON.parse(localStorage.getItem('faves') || '[]'); @@ -35,12 +107,35 @@ export default function ExportPage () { {timeLabels.map((time, index) => { const favesPerTime = favesPerDay.filter(val => eventsListByStartTime[time].includes(val)); + const faveEventsList = findConflicts(favesPerTime, faves) + if (favesPerTime.length) { return (
  • {time}
    • +
      + {faveEventsList.map((fave, index) => { + return ( +
    • + {fave.title} +
      +
        + {fave.conflicts?.map((conflict, index) => { + var conflictName = findEvent(conflict); + return ( +
      • + {conflict} - {conflictName.title} +
        • + ) + })} +
      +
      +
      • + ) + })} +
) } From 824c8df92d530eeaccea192523c2b25e383280c8 Mon Sep 17 00:00:00 2001 From: Nicole Zonnenberg Date: Mon, 17 Jul 2023 11:33:19 -0400 Subject: [PATCH 07/10] fave cards --- frontend/assets/styles/base/variables.scss | 9 +- .../assets/styles/components/schedule.scss | 42 ++++++- frontend/components/FaveCard.tsx | 113 ++++++++++++++++++ frontend/pages/export/index.tsx | 54 ++++----- 4 files changed, 186 insertions(+), 32 deletions(-) create mode 100644 frontend/components/FaveCard.tsx diff --git a/frontend/assets/styles/base/variables.scss b/frontend/assets/styles/base/variables.scss index 387049e9..bb4c8f9f 100644 --- a/frontend/assets/styles/base/variables.scss +++ b/frontend/assets/styles/base/variables.scss @@ -58,4 +58,11 @@ $card-even-bg: $lightOrange; $fave-id-color: $french; // Content -$subtext-color: $french; \ No newline at end of file +$subtext-color: $french; + +// Schedule: +$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 diff --git a/frontend/assets/styles/components/schedule.scss b/frontend/assets/styles/components/schedule.scss index 721ffd27..39484bb4 100644 --- a/frontend/assets/styles/components/schedule.scss +++ b/frontend/assets/styles/components/schedule.scss @@ -7,5 +7,45 @@ } .schedule-list-time { - list-style-type: circle; + .time-title { + background-color: $time-label-bg; + color: $time-label-color; + font-weight: 700; + padding: 2px 5px; + } + + .fave-list { + display: flex; + flex-wrap: wrap; + } + + .fave-list-item { + margin: 10px; + } +} + +.conflicts-btn { + border-radius: 5px 5px !important; + color: $conflict-btn-color; + font-size: 16px; +} + +.fave-title { + font-weight: 700; + font-size: 18px; +} + +.fave-detail { + color: $detail-color; + font-size: 14px; +} + +.fave-system { + color: $system-color; + font-size: 15px; +} + +.fave-description { + font-size: 15px; + margin-top: 5px; } \ No newline at end of file diff --git a/frontend/components/FaveCard.tsx b/frontend/components/FaveCard.tsx new file mode 100644 index 00000000..8dca5a47 --- /dev/null +++ b/frontend/components/FaveCard.tsx @@ -0,0 +1,113 @@ +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 { NewEvent } from '@/assets/interfaces'; +import findEvent from '@/helpers/findEvent'; + +interface ExpandMoreProps extends IconButtonProps { + expand: boolean; +} + +const ExpandMore = styled((props: ExpandMoreProps) => { + const { expand, ...other } = props; + return ; +})(({ theme, expand }) => ({ + marginLeft: 'auto', + transition: theme.transitions.create('transform', { + duration: theme.transitions.duration.shortest, + }), +})); + +export default function FaveCard ({ favoriteEvent }: { favoriteEvent: NewEvent }) { + const [expanded, setExpanded] = useState(false); + const { title, + descriptionShort, + startDate, + startTime, + endDate, + endTime, + conflicts, + location, + room, + tableNum, + gameSystem + } = favoriteEvent; + + const handleExpandClick = () => { + setExpanded(!expanded); + }; + + const dateSubTitle = startDate === endDate ? `${startTime} - ${endTime}` : `${startDate} ${startTime} - ${endDate} ${endTime}` + + return ( + + + + {title} + + + {dateSubTitle} + + {location && ( + + {location} {room && ` : ${room}`} {tableNum && tableNum > 0 ? ` : ${tableNum}` : ''} + + )} + {gameSystem && ( + + System: {gameSystem} + + )} + + {descriptionShort} + + + {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 b72db494..8b3d9d8e 100644 --- a/frontend/pages/export/index.tsx +++ b/frontend/pages/export/index.tsx @@ -1,6 +1,13 @@ +import Accordion from '@mui/material/Accordion'; +import AccordionSummary from '@mui/material/AccordionSummary'; +import AccordionDetails from '@mui/material/AccordionDetails'; +import Typography from '@mui/material/Typography'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; + import { filteredEvents } from "@/pages/_app"; import findEvent from "@/helpers/findEvent"; import { NewEvent } from "@/assets/interfaces"; +import FaveCard from '@/components/FaveCard'; const eventsListByDay = filteredEvents.startDates; const eventsListByStartTime = filteredEvents.startTimes; @@ -98,12 +105,16 @@ export default function ExportPage () { if (favesPerDay.length) { return ( -
    -
  • - - {day} - -
    + + } + aria-controls="panel1a-content" + id="panel1a-header" + > + {day} - {favesPerDay.length} Events + + + {timeLabels.map((time, index) => { const favesPerTime = favesPerDay.filter(val => eventsListByStartTime[time].includes(val)); @@ -112,40 +123,23 @@ export default function ExportPage () { if (favesPerTime.length) { return (
      -
    • +
    • {time}
      • -
        +
        {faveEventsList.map((fave, index) => { - return ( -
      • - {fave.title} -
        -
          - {fave.conflicts?.map((conflict, index) => { - var conflictName = findEvent(conflict); - return ( -
        • - {conflict} - {conflictName.title} -
          • - ) - })} -
        -
        -
        • - ) + return })} -
      +
) } })} -
- - + + + ) } - })} From b5b28d556bb5e8e0ffcc76b0c3eb84d5b1d5d600 Mon Sep 17 00:00:00 2001 From: Nicole Zonnenberg Date: Mon, 17 Jul 2023 14:09:20 -0400 Subject: [PATCH 08/10] styling for fave card --- frontend/assets/styles/base/variables.scss | 4 +- .../assets/styles/components/schedule.scss | 66 +++++++---- frontend/components/FaveCard.tsx | 111 ++++++++++-------- frontend/pages/export/index.tsx | 102 ++++++++-------- 4 files changed, 153 insertions(+), 130 deletions(-) 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" From b2de4e3435bcfc36e3850a155399ca48252e6d66 Mon Sep 17 00:00:00 2001 From: Nicole Zonnenberg Date: Mon, 17 Jul 2023 15:04:01 -0400 Subject: [PATCH 09/10] favorite badges --- frontend/assets/styles/base/variables.scss | 7 ++- .../assets/styles/components/schedule.scss | 43 ++++++++++++++ frontend/components/FaveCard.tsx | 59 +++++++++++++------ 3 files changed, 89 insertions(+), 20 deletions(-) diff --git a/frontend/assets/styles/base/variables.scss b/frontend/assets/styles/base/variables.scss index f783eecd..dd683cdd 100644 --- a/frontend/assets/styles/base/variables.scss +++ b/frontend/assets/styles/base/variables.scss @@ -65,4 +65,9 @@ $time-label-bg: $lightOrange-50; $time-label-color: $bittersweet; $conflict-btn-color: $raspberry; $fave-item-color: $outer; -$details-color: $french; \ No newline at end of file +$details-color: $french; +$light-color: $seasalt; +$sold-out-badge-bg: $quinacridone; +$diff-day-badge-bg: $raspberry; +$materials-badge-bg: $xanthous; +$tournament-badge-bg: $verdigris; \ No newline at end of file diff --git a/frontend/assets/styles/components/schedule.scss b/frontend/assets/styles/components/schedule.scss index 41a57e26..eb7f6d93 100644 --- a/frontend/assets/styles/components/schedule.scss +++ b/frontend/assets/styles/components/schedule.scss @@ -20,6 +20,11 @@ margin: 10px; width: 100%; + .badge-container { + display: flex; + padding: 15px 5px 0 5px; + } + .conflicts-btn { border-radius: 5px 5px !important; color: $conflict-btn-color; @@ -44,6 +49,10 @@ justify-content: space-between; } + .fave-game-id { + font-size: 16px; + } + .fave-card-title { font-weight: 700; font-size: 17px; @@ -61,5 +70,39 @@ color: $details-color; font-size: 15px; } + + .fave-badge { + border-radius: 5px 5px; + display: flex; + font-size: 14px; + padding: 5px 10px 5px 7px; + } + + .fave-badge+.fave-badge { + margin-left: 25px; + } + + .badge-icon { + margin-right: 5px; + } + + .sold-out-badge { + background-color: $sold-out-badge-bg; + color: $light-color; + } + + .diff-day-badge { + background-color: $diff-day-badge-bg; + color: $light-color; + } + + .materials-badge { + background-color: $materials-badge-bg; + } + + .tournament-badge { + background-color: $tournament-badge-bg; + color: $light-color; + } } } \ No newline at end of file diff --git a/frontend/components/FaveCard.tsx b/frontend/components/FaveCard.tsx index 96352570..41a62424 100644 --- a/frontend/components/FaveCard.tsx +++ b/frontend/components/FaveCard.tsx @@ -10,6 +10,9 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import ExpandLessIcon from '@mui/icons-material/ExpandLess'; import ReportGmailErrorredIcon from '@mui/icons-material/ReportGmailerrorred'; import EmojiEventsIcon from '@mui/icons-material/EmojiEvents'; +import DoNotDisturbIcon from '@mui/icons-material/DoNotDisturb'; +import CalendarMonthIcon from '@mui/icons-material/CalendarMonth'; +import DesignServicesIcon from '@mui/icons-material/DesignServices'; import { NewEvent } from '@/assets/interfaces'; import findEvent from '@/helpers/findEvent'; @@ -27,20 +30,23 @@ const ExpandMore = styled((props: ExpandMoreProps) => { export default function FaveCard ({ favoriteEvent }: { favoriteEvent: NewEvent }) { const [expanded, setExpanded] = useState(false); - const { title, - descriptionShort, - startDate, - startTime, - endDate, - endTime, - conflicts, - location, - room, - tableNum, - gameSystem, - gameId, - tournament - } = favoriteEvent; + const { + conflicts, + descriptionShort, + endDate, + endTime, + gameId, + gameSystem, + location, + materials, + room, + startDate, + startTime, + tableNum, + ticketsAvailable, + title, + tournament, + } = favoriteEvent; const handleExpandClick = () => { setExpanded(!expanded); @@ -57,7 +63,7 @@ export default function FaveCard ({ favoriteEvent }: { favoriteEvent: NewEvent }
-
+
{gameId}
@@ -113,11 +119,26 @@ export default function FaveCard ({ favoriteEvent }: { favoriteEvent: NewEvent } {descriptionShort} - + + {!ticketsAvailable && ( +
+ Event Sold Out +
+ )} + {endDate != startDate && ( +
+ Ends on a Different Day +
+ )} + {materials && ( +
+ Materials Required +
+ )} {tournament && ( - <> - Tournament - +
+ Tournament +
)} From 105646c469420dc1c4bff8388d61571a877b3480 Mon Sep 17 00:00:00 2001 From: Nicole Zonnenberg Date: Mon, 17 Jul 2023 15:11:48 -0400 Subject: [PATCH 10/10] add event modal --- .../assets/styles/components/schedule.scss | 7 +++ frontend/components/FaveCard.tsx | 49 +++++++++++-------- 2 files changed, 35 insertions(+), 21 deletions(-) diff --git a/frontend/assets/styles/components/schedule.scss b/frontend/assets/styles/components/schedule.scss index eb7f6d93..bcbbb9d8 100644 --- a/frontend/assets/styles/components/schedule.scss +++ b/frontend/assets/styles/components/schedule.scss @@ -22,6 +22,7 @@ .badge-container { display: flex; + flex-wrap: wrap; padding: 15px 5px 0 5px; } @@ -71,6 +72,12 @@ font-size: 15px; } + .badges-and-details { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + } + .fave-badge { border-radius: 5px 5px; display: flex; diff --git a/frontend/components/FaveCard.tsx b/frontend/components/FaveCard.tsx index 41a62424..c40227eb 100644 --- a/frontend/components/FaveCard.tsx +++ b/frontend/components/FaveCard.tsx @@ -14,6 +14,8 @@ import DoNotDisturbIcon from '@mui/icons-material/DoNotDisturb'; import CalendarMonthIcon from '@mui/icons-material/CalendarMonth'; import DesignServicesIcon from '@mui/icons-material/DesignServices'; +import EventModal from '@/components/EventModal'; + import { NewEvent } from '@/assets/interfaces'; import findEvent from '@/helpers/findEvent'; @@ -37,6 +39,7 @@ export default function FaveCard ({ favoriteEvent }: { favoriteEvent: NewEvent } endTime, gameId, gameSystem, + id, location, materials, room, @@ -119,27 +122,31 @@ export default function FaveCard ({ favoriteEvent }: { favoriteEvent: NewEvent } {descriptionShort} - - {!ticketsAvailable && ( -
- Event Sold Out -
- )} - {endDate != startDate && ( -
- Ends on a Different Day -
- )} - {materials && ( -
- Materials Required -
- )} - {tournament && ( -
- Tournament -
- )} + +
+ {!ticketsAvailable && ( +
+ Event Sold Out +
+ )} + {endDate != startDate && ( +
+ Ends on a Different Day +
+ )} + {materials && ( +
+ Materials Required +
+ )} + {tournament && ( +
+ Tournament +
+ )} +
+ +