Merge pull request #26 from Sun-Mountain/23-duration-filter

23 duration filter

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;
 
@@ -46,6 +40,8 @@ export default function DailyTabs({
   allBaseFilters,
   showOnly,
   dateList,
+  durationFilter,
+  durationLength,
   hideMaterialReq,
   hideSoldOut,
   materialsRequired,
@@ -63,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));
     }

frontend/components/SliderComponent.tsx

@@ -0,0 +1,57 @@
+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({
+  label,
+  filterValues,
+  setFilter,
+  step,
+  min,
+  max
+}: SlideFilter) {
+
+  const handleChange = (event: Event, newValue: number | number[]) => {
+    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 (
+    <div className='filter-component-container'>
+      <strong>{label}</strong><br />
+      {chosenRange}
+      <div className='flex-row slider-container'>
+        <div className='slider-end-label'>
+          {min} Hour
+        </div>
+          <Box className='slider-box' sx={{ width: 350 }}
+          >
+            <Slider
+              getAriaLabel={() => 'Temperature range'}
+              value={filterValues}
+              onChange={handleChange}
+              valueLabelDisplay="auto"
+              getAriaValueText={valuetext}
+              step={step}
+              marks
+              min={min}
+              max={max}
+            />
+          </Box>
+        <div className='slider-end-label'>
+          {max} Hours
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/helpers/getData.tsx

@@ -33,20 +33,21 @@ const cleanData = (events: Array<RawEvent>) => {
   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<RawEvent>) => {
     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]) {

frontend/interfaces/Components.tsx

@@ -1,10 +1,12 @@
-import { Dispatch, SetStateAction } from 'react';
+import { Dispatch, ReactNode, SetStateAction } from 'react';
 import { UniqueFilter } from './Filters';
 
 export interface DailyTabs {
   allBaseFilters: number[];
   showOnly: Array<number[]>;
   dateList: UniqueFilter;
+  durationFilter: number[];
+  durationLength: UniqueFilter;
   hideMaterialReq: boolean;
   hideSoldOut: boolean;
   materialsRequired: number[];
@@ -29,6 +31,12 @@ export interface SwitchInterface {
   setHide: Dispatch<SetStateAction<boolean>>;
 }
 
+export interface TabPanelProps {
+  children?: ReactNode;
+  index: number;
+  value: number;
+}
+
 export interface TournamentSwitches {
   hideTourney: boolean;
   setHideTourney: Dispatch<SetStateAction<boolean>>;

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;

frontend/interfaces/Filters.tsx

@@ -1,20 +1,32 @@
+import { Dispatch, SetStateAction } from 'react';
+
 export interface UniqueFilter {
   [index: string]: Array<number>;
 }
 
 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<number>;
-  materialsRequired: Array<number>;
-  costs: UniqueFilter;
+  eventTypes: UniqueFilter;
+  experienceRequirements: UniqueFilter;
+  gameSystems: UniqueFilter;
+  groups: UniqueFilter;
   locations: UniqueFilter;
+  materialsRequired: Array<number>;
   noTickets: Array<number>;
+  startDates: UniqueFilter;
+  startTimes: UniqueFilter;
+  tournament: Array<number>;
+}
+
+export interface SlideFilter {
+  label: string;
+  filterValues: number[];
+  setFilter: Dispatch<SetStateAction<number[]>>;
+  step: number;
+  min: number;
+  max: number;
 }

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";
 
@@ -19,11 +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 eventTypes = filterList.eventTypes;
   const experienceRequirements = filterList.experienceRequirements;
   const gameSystems = filterList.gameSystems;
@@ -36,6 +37,7 @@ export default function Home() {
 
   // Filters
   const [ageFilters, setAgeFilters] = useState<number[]>([]);
+  const [durationFilter, setDurationFilter] = useState<number[]>([0.5, 10]);
   const [experienceFilters, setExperienceFilters] = useState<number[]>([]);
   const [eventTypeFilters, setEventTypeFilters] = useState<number[]>([]);
   const [groupFilter, setGroupFilter] = useState<number[]>([]);
@@ -110,6 +112,14 @@ export default function Home() {
           setEarlyStartTime={setEarlyStartTime}
           setLateStartTime={setLateStartTime}
         />
+        <SliderComponent
+          label={'Event Duration (in Hours)'}
+          filterValues={durationFilter}
+          setFilter={setDurationFilter}
+          step={0.5}
+          min={0.5}
+          max={10}
+        />
       </div>
       <DailyTabs
         allBaseFilters={[
@@ -123,6 +133,8 @@ export default function Home() {
           locationFilter
         ]}
         dateList={dateList}
+        durationFilter={durationFilter}
+        durationLength={durationLength}
         hideMaterialReq={hideMaterialsReq}
         hideSoldOut={hideSoldOut}
         materialsRequired={materialsRequired}

frontend/styles/styles.css

@@ -133,15 +133,28 @@ a:hover {
   margin-top: 19px;
 }
 
-.filter-component-container+.filter-component-container {
-  margin-top: 25px;
+.filter-component-container {
+  margin-top: 10px;
+  padding-top: 10px;
 }
 
 .filter-list {
   margin-right: 24px;
   margin-top: 12px;
 }
 
+.slider-box {
+  padding-right: 17px;
+}
+
+.slider-container {
+  width: 400px;
+}
+
+.slider-end-label {
+  min-width: 50px;
+}
+
 .radio-group-container {
   padding: 5px 0 18px 0;
 }