From 46357cb0545eab33de23f27972a820b6abb06fe5 Mon Sep 17 00:00:00 2001 From: Nicole Zonnenberg Date: Wed, 21 Jun 2023 08:34:17 -0400 Subject: [PATCH 1/5] duration filter group --- frontend/helpers/getData.tsx | 51 +++++++++++++++++++-------------- frontend/interfaces/Filters.tsx | 19 ++++++------ 2 files changed, 39 insertions(+), 31 deletions(-) diff --git a/frontend/helpers/getData.tsx b/frontend/helpers/getData.tsx index 66bc82d8..a097e3ac 100644 --- a/frontend/helpers/getData.tsx +++ b/frontend/helpers/getData.tsx @@ -33,20 +33,21 @@ const cleanData = (events: Array) => { const data: Data = { eventData: [], filters: { - groups: {}, - eventTypes: {}, - gameSystems: {}, ageRequirements: {}, + costs: {}, + durationLength: {}, + endDates: {}, + endTimes: {}, + eventTypes: {}, experienceRequirements: {}, + gameSystems: {}, + groups: {}, + locations: {}, + materialsRequired: [], + noTickets: [], startDates: {}, startTimes: {}, - endDates: {}, - endTimes: {}, tournament: [], - materialsRequired: [], - costs: {}, - locations: {}, - noTickets: [] } } @@ -79,29 +80,35 @@ const cleanData = (events: Array) => { const rawStart = new Date(event["Start Date & Time"]); const rawEnd = new Date(event["End Date & Time"]); - const shortDescription = event["Short Description"]; - const longDescription = event["Long Description"]; - const groupName = event["Group"]; - const eventType = event["Event Type"]; - const gameSystem = event["Game System"]; const ageReq = event["Age Required"]; - const exp = event["Experience Required"]; - const eventStartDate = rawStart.toLocaleDateString(); - const eventStartTime = getTime(rawStart); + const eventCost = Number(event["Cost $"]); + const eventDuration = Number(event["Duration"]); const eventEndDate = rawEnd.toLocaleDateString(); const eventEndTime = getTime(rawEnd); - const isTourney = isTournament(event["Tournament?"]); - const materialsRequired = areMaterialsRequired(event["Materials Required"]); - const materials = event["Materials Required Details"]; - const eventCost = Number(event["Cost $"]); const eventLocation = event["Location"]?.toUpperCase(); + const eventStartDate = rawStart.toLocaleDateString(); + const eventStartTime = getTime(rawStart); const eventTickets = Number(event["Tickets Available"]); + const eventType = event["Event Type"]; + const exp = event["Experience Required"]; + const gameSystem = event["Game System"]; + const groupName = event["Group"]; + const isTourney = isTournament(event["Tournament?"]); + const longDescription = event["Long Description"]; + const materials = event["Materials Required Details"]; + const materialsRequired = areMaterialsRequired(event["Materials Required"]); + const shortDescription = event["Short Description"]; newEvent.id = index; newEvent.gameId = event["Game ID"]; - newEvent.duration = Number(event["Duration"]); newEvent.maxTickets = Number(event['Maximum Players']); + if (!data.filters.durationLength[eventDuration]) { + data.filters.durationLength[eventDuration] = [] + } + data.filters.durationLength[eventDuration].push(index) + newEvent.duration = eventDuration + // Group Name if (groupName) { if (!data.filters.groups[groupName]) { diff --git a/frontend/interfaces/Filters.tsx b/frontend/interfaces/Filters.tsx index 9199ce68..80a15ed1 100644 --- a/frontend/interfaces/Filters.tsx +++ b/frontend/interfaces/Filters.tsx @@ -3,18 +3,19 @@ export interface UniqueFilter { } export interface FilterTypes { - groups: UniqueFilter; - eventTypes: UniqueFilter; - gameSystems: UniqueFilter; ageRequirements: UniqueFilter; - experienceRequirements: UniqueFilter; - startDates: UniqueFilter; - startTimes: UniqueFilter; + costs: UniqueFilter; + durationLength: UniqueFilter; endDates: UniqueFilter; endTimes: UniqueFilter; - tournament: Array; - materialsRequired: Array; - costs: UniqueFilter; + eventTypes: UniqueFilter; + experienceRequirements: UniqueFilter; + gameSystems: UniqueFilter; + groups: UniqueFilter; locations: UniqueFilter; + materialsRequired: Array; noTickets: Array; + startDates: UniqueFilter; + startTimes: UniqueFilter; + tournament: Array; } \ No newline at end of file From 4f498d7cfd2faa308ba9b3f95e87759d1e8248a5 Mon Sep 17 00:00:00 2001 From: Nicole Zonnenberg Date: Wed, 21 Jun 2023 09:46:22 -0400 Subject: [PATCH 2/5] double slide filter --- frontend/components/SliderComponent.tsx | 38 +++++++++++++++++++++++++ frontend/interfaces/Filters.tsx | 10 +++++++ frontend/pages/index.tsx | 11 +++++++ 3 files changed, 59 insertions(+) create mode 100644 frontend/components/SliderComponent.tsx diff --git a/frontend/components/SliderComponent.tsx b/frontend/components/SliderComponent.tsx new file mode 100644 index 00000000..2bc06f40 --- /dev/null +++ b/frontend/components/SliderComponent.tsx @@ -0,0 +1,38 @@ +import { useState } from 'react'; +import Box from '@mui/material/Box'; +import Slider from '@mui/material/Slider'; + +import { SlideFilter } from '@/interfaces/Filters'; + +function valuetext(value: number) { + return `${value}`; +} + +export default function SliderComponent({ + filterValues, + setFilter, + step, + min, + max +}: SlideFilter) { + + const handleChange = (event: Event, newValue: number | number[]) => { + setFilter(newValue as number[]); + }; + + return ( + + 'Temperature range'} + value={filterValues} + onChange={handleChange} + valueLabelDisplay="auto" + getAriaValueText={valuetext} + step={step} + marks + min={min} + max={max} + /> + + ); +} \ No newline at end of file diff --git a/frontend/interfaces/Filters.tsx b/frontend/interfaces/Filters.tsx index 80a15ed1..ce52b1e2 100644 --- a/frontend/interfaces/Filters.tsx +++ b/frontend/interfaces/Filters.tsx @@ -1,3 +1,5 @@ +import { Dispatch, SetStateAction } from 'react'; + export interface UniqueFilter { [index: string]: Array; } @@ -18,4 +20,12 @@ export interface FilterTypes { startDates: UniqueFilter; startTimes: UniqueFilter; tournament: Array; +} + +export interface SlideFilter { + filterValues: number[]; + setFilter: Dispatch>; + step: number; + min: number; + max: number; } \ No newline at end of file diff --git a/frontend/pages/index.tsx b/frontend/pages/index.tsx index f46702c4..da9c6f64 100644 --- a/frontend/pages/index.tsx +++ b/frontend/pages/index.tsx @@ -6,6 +6,7 @@ import DailyTabs from "@/components/DailyTabs"; import FilterAutoList from "@/components/FilterAutoList"; import FilterButtons from "@/components/FilterButtons"; import RadioGroup from "@/components/RadioGroup"; +import SliderComponent from "@/components/SliderComponent"; import Switch from "@/components/SwitchComponent"; import TimeRange from "@/components/TimeRange"; @@ -24,6 +25,8 @@ export default function Home() { // Lists const ageRequirements = filterList.ageRequirements; const dateList = filterList.startDates; + const durationLength = filterList.durationLength; + const durationList = Object.keys(durationLength).sort(); const eventTypes = filterList.eventTypes; const experienceRequirements = filterList.experienceRequirements; const gameSystems = filterList.gameSystems; @@ -36,6 +39,7 @@ export default function Home() { // Filters const [ageFilters, setAgeFilters] = useState([]); + const [durationFilter, setDurationFilter] = useState([0.5, 10]); const [experienceFilters, setExperienceFilters] = useState([]); const [eventTypeFilters, setEventTypeFilters] = useState([]); const [groupFilter, setGroupFilter] = useState([]); @@ -110,6 +114,13 @@ export default function Home() { setEarlyStartTime={setEarlyStartTime} setLateStartTime={setLateStartTime} /> + Date: Wed, 21 Jun 2023 10:27:19 -0400 Subject: [PATCH 3/5] style slider --- frontend/components/SliderComponent.tsx | 39 ++++++++++++++++--------- frontend/interfaces/Components.tsx | 1 + frontend/interfaces/Filters.tsx | 1 + frontend/pages/index.tsx | 11 +++++-- frontend/styles/styles.css | 12 ++++++++ 5 files changed, 49 insertions(+), 15 deletions(-) diff --git a/frontend/components/SliderComponent.tsx b/frontend/components/SliderComponent.tsx index 2bc06f40..30b5cea6 100644 --- a/frontend/components/SliderComponent.tsx +++ b/frontend/components/SliderComponent.tsx @@ -9,6 +9,7 @@ function valuetext(value: number) { } export default function SliderComponent({ + label, filterValues, setFilter, step, @@ -21,18 +22,30 @@ export default function SliderComponent({ }; return ( - - 'Temperature range'} - value={filterValues} - onChange={handleChange} - valueLabelDisplay="auto" - getAriaValueText={valuetext} - step={step} - marks - min={min} - max={max} - /> - + <> + {label} +
+
+ {min} Hour +
+ + 'Temperature range'} + value={filterValues} + onChange={handleChange} + valueLabelDisplay="auto" + getAriaValueText={valuetext} + step={step} + marks + min={min} + max={max} + /> + +
+ {max} Hours +
+
+ ); } \ No newline at end of file diff --git a/frontend/interfaces/Components.tsx b/frontend/interfaces/Components.tsx index d912068f..d9b5f775 100644 --- a/frontend/interfaces/Components.tsx +++ b/frontend/interfaces/Components.tsx @@ -5,6 +5,7 @@ export interface DailyTabs { allBaseFilters: number[]; showOnly: Array; dateList: UniqueFilter; + durationLength: UniqueFilter; hideMaterialReq: boolean; hideSoldOut: boolean; materialsRequired: number[]; diff --git a/frontend/interfaces/Filters.tsx b/frontend/interfaces/Filters.tsx index ce52b1e2..ab69fe2f 100644 --- a/frontend/interfaces/Filters.tsx +++ b/frontend/interfaces/Filters.tsx @@ -23,6 +23,7 @@ export interface FilterTypes { } export interface SlideFilter { + label: string; filterValues: number[]; setFilter: Dispatch>; step: number; diff --git a/frontend/pages/index.tsx b/frontend/pages/index.tsx index da9c6f64..b6bc3f41 100644 --- a/frontend/pages/index.tsx +++ b/frontend/pages/index.tsx @@ -20,13 +20,11 @@ export const tournamentFilterOptions = [ export default function Home() { const filterList = filters; - console.log(filterList); // Lists const ageRequirements = filterList.ageRequirements; const dateList = filterList.startDates; const durationLength = filterList.durationLength; - const durationList = Object.keys(durationLength).sort(); const eventTypes = filterList.eventTypes; const experienceRequirements = filterList.experienceRequirements; const gameSystems = filterList.gameSystems; @@ -52,6 +50,7 @@ export default function Home() { const [tournamentFilter, setTournamentFilter] = useState(tournamentFilterOptions[0]); // Switches + const [hideLongestDur, setHideLongestDur] = useState(false); const [hideSoldOut, setHideSoldOut] = useState(false); const [hideMaterialsReq, setHideMaterialsReq] = useState(false); @@ -115,12 +114,18 @@ export default function Home() { setLateStartTime={setLateStartTime} /> + Date: Wed, 21 Jun 2023 11:07:12 -0400 Subject: [PATCH 4/5] some refactoring --- frontend/components/DailyTabs.tsx | 8 +------- frontend/components/SliderComponent.tsx | 8 +++++++- frontend/interfaces/Components.tsx | 9 ++++++++- frontend/interfaces/Events.tsx | 16 ---------------- 4 files changed, 16 insertions(+), 25 deletions(-) diff --git a/frontend/components/DailyTabs.tsx b/frontend/components/DailyTabs.tsx index 85b1fd83..42628eb7 100644 --- a/frontend/components/DailyTabs.tsx +++ b/frontend/components/DailyTabs.tsx @@ -5,16 +5,10 @@ import Box from '@mui/material/Box'; import TimeComponent from './TimeComponent'; -import { DailyTabs } from '@/interfaces/Components'; +import { DailyTabs, TabPanelProps } from '@/interfaces/Components'; import { tournamentFilterOptions } from '@/pages'; -interface TabPanelProps { - children?: ReactNode; - index: number; - value: number; -} - function TabPanel(props: TabPanelProps) { const { children, value, index, ...other } = props; diff --git a/frontend/components/SliderComponent.tsx b/frontend/components/SliderComponent.tsx index 30b5cea6..329f6fcc 100644 --- a/frontend/components/SliderComponent.tsx +++ b/frontend/components/SliderComponent.tsx @@ -21,9 +21,15 @@ export default function SliderComponent({ setFilter(newValue as number[]); }; + const minValue = filterValues[0]; + const maxValue = filterValues[1]; + + const chosenRange = minValue != maxValue ? `Between ${minValue} and ${maxValue} hours.` : `Only with a duration of ${minValue} hour(s).` + return ( <> - {label} + {label}
+ {chosenRange}
{min} Hour diff --git a/frontend/interfaces/Components.tsx b/frontend/interfaces/Components.tsx index d9b5f775..8bf841ba 100644 --- a/frontend/interfaces/Components.tsx +++ b/frontend/interfaces/Components.tsx @@ -1,10 +1,11 @@ -import { Dispatch, SetStateAction } from 'react'; +import { Dispatch, ReactNode, SetStateAction } from 'react'; import { UniqueFilter } from './Filters'; export interface DailyTabs { allBaseFilters: number[]; showOnly: Array; dateList: UniqueFilter; + durationFilter: number[]; durationLength: UniqueFilter; hideMaterialReq: boolean; hideSoldOut: boolean; @@ -30,6 +31,12 @@ export interface SwitchInterface { setHide: Dispatch>; } +export interface TabPanelProps { + children?: ReactNode; + index: number; + value: number; +} + export interface TournamentSwitches { hideTourney: boolean; setHideTourney: Dispatch>; diff --git a/frontend/interfaces/Events.tsx b/frontend/interfaces/Events.tsx index d0b2f4b5..06212d69 100644 --- a/frontend/interfaces/Events.tsx +++ b/frontend/interfaces/Events.tsx @@ -1,19 +1,3 @@ -export interface filterEvents { - groups: number[]; - eventTypes: number[]; - gameSystems: number[]; - ageRequirements: number[]; - experienceRequirements: number[]; - startDates: number[]; - startTimes: number[]; - endDates: number[]; - endTimes: number[]; - ifTournament: number[]; - costs: number[]; - locations: number[]; - ticketsAvailable: number[]; -} - export interface NewEvent { id: number; gameId: string; From 41301f330597a43c8eaea0bf1b32a69dae3ff21b Mon Sep 17 00:00:00 2001 From: Nicole Zonnenberg Date: Thu, 22 Jun 2023 13:53:14 -0400 Subject: [PATCH 5/5] slider styling --- frontend/components/DailyTabs.tsx | 19 +++++++++++++++++++ frontend/components/SliderComponent.tsx | 4 ++-- frontend/pages/index.tsx | 6 ------ frontend/styles/styles.css | 5 +++-- 4 files changed, 24 insertions(+), 10 deletions(-) diff --git a/frontend/components/DailyTabs.tsx b/frontend/components/DailyTabs.tsx index 42628eb7..462da6f7 100644 --- a/frontend/components/DailyTabs.tsx +++ b/frontend/components/DailyTabs.tsx @@ -40,6 +40,8 @@ export default function DailyTabs({ allBaseFilters, showOnly, dateList, + durationFilter, + durationLength, hideMaterialReq, hideSoldOut, materialsRequired, @@ -57,11 +59,28 @@ export default function DailyTabs({ setTab(newValue); }; + const lowestDuration = durationFilter[0]; + const highestDuration = durationFilter[1]; + const durationKeys = Object.keys(durationLength).sort(); + const getEventsList = (date: string) => { const dayEvents = dateList[date] var eventsForDay = dayEvents.filter(val => !allBaseFilters.includes(val)); + if (Number(durationKeys[0]) != lowestDuration || Number(durationKeys[durationKeys.length - 1]) != highestDuration) { + durationKeys.map(key => { + if (Number(key) < lowestDuration){ + var events = durationLength[key] + eventsForDay = eventsForDay.filter(val => !events.includes(val)); + } + if (Number(key) > highestDuration){ + var events = durationLength[key] + eventsForDay = eventsForDay.filter(val => !events.includes(val)); + } + }) + } + if (hideMaterialReq) { eventsForDay = eventsForDay.filter(val => !materialsRequired.includes(val)); } diff --git a/frontend/components/SliderComponent.tsx b/frontend/components/SliderComponent.tsx index 329f6fcc..1f810bb4 100644 --- a/frontend/components/SliderComponent.tsx +++ b/frontend/components/SliderComponent.tsx @@ -27,7 +27,7 @@ export default function SliderComponent({ const chosenRange = minValue != maxValue ? `Between ${minValue} and ${maxValue} hours.` : `Only with a duration of ${minValue} hour(s).` return ( - <> +
{label}
{chosenRange}
@@ -52,6 +52,6 @@ export default function SliderComponent({ {max} Hours
- +
); } \ No newline at end of file diff --git a/frontend/pages/index.tsx b/frontend/pages/index.tsx index b6bc3f41..7ddf939e 100644 --- a/frontend/pages/index.tsx +++ b/frontend/pages/index.tsx @@ -50,7 +50,6 @@ export default function Home() { const [tournamentFilter, setTournamentFilter] = useState(tournamentFilterOptions[0]); // Switches - const [hideLongestDur, setHideLongestDur] = useState(false); const [hideSoldOut, setHideSoldOut] = useState(false); const [hideMaterialsReq, setHideMaterialsReq] = useState(false); @@ -121,11 +120,6 @@ export default function Home() { min={0.5} max={10} /> -