Merge pull request #45 from Sun-Mountain/export-to-sched

Export to sched

frontend/assets/interfaces/Component.tsx

@@ -99,3 +99,26 @@ 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<SetStateAction<'' | 'hide' | 'show'>>;
+  earliestStartTime: string;
+  setEarliestStartTime: Dispatch<SetStateAction<string>>;
+  latestStartTime: string;
+  setLatestStartTime: Dispatch<SetStateAction<string>>;
+  durationFilter: number[];
+  setDurationFilter: Dispatch<SetStateAction<number[]>>;
+}
+
+export interface FavoritesProps {
+  faves: number[];
+  handleFaves: Function;
+}

frontend/assets/interfaces/Event.tsx

@@ -28,6 +28,7 @@ export interface NewEvent {
   title: string;
   tournament?: boolean
   website?: string;
+  conflicts?: number[];
 }
 
 export interface RawEvent {

frontend/assets/interfaces/Page.tsx

@@ -0,0 +1,11 @@
+import { Dispatch, SetStateAction } from "react";
+
+export interface HomePageProps {
+  faves: number[];
+  setFaves: Dispatch<SetStateAction<number[]>>;
+}
+
+export interface ExportPageProps {
+  faves: number[];
+  setFaves: Dispatch<SetStateAction<number[]>>;
+}

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';
+export * from '@/assets/interfaces/Filter';
+export * from '@/assets/interfaces/Page';

frontend/assets/styles/base/variables.scss

@@ -58,4 +58,16 @@ $card-even-bg: $lightOrange;
 $fave-id-color: $french;
 
 // Content
-$subtext-color: $french;
+$subtext-color: $french;
+
+// Schedule:
+$time-label-bg: $lightOrange-50;
+$time-label-color: $bittersweet;
+$conflict-btn-color: $raspberry;
+$fave-item-color: $outer;
+$details-color: $french;
+$light-color: $seasalt;
+$sold-out-badge-bg: $quinacridone;
+$diff-day-badge-bg: $raspberry;
+$materials-badge-bg: $xanthous;
+$tournament-badge-bg: $verdigris;

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';

frontend/assets/styles/components/favorites.scss

@@ -45,4 +45,8 @@
 .favorite-actions {
   display: flex;
   justify-content: space-between;
+}
+
+.export-btn {
+  margin-bottom: 10px;
 }

frontend/assets/styles/components/schedule.scss

@@ -0,0 +1,115 @@
+.schedule-container {
+  padding: 10px 25px;
+}
+
+.schedule-list-time {
+  .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 {
+    color: $fave-item-color;
+    margin: 10px;
+    width: 100%;
+
+    .badge-container {
+      display: flex;
+      flex-wrap: wrap;
+      padding: 15px 5px 0 5px;
+    }
+
+    .conflicts-btn {
+      border-radius: 5px 5px !important;
+      color: $conflict-btn-color;
+      font-size: 14px;
+      float: right;
+    }
+
+    .conflicts-list {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .conflicts-text {
+      font-size: 14px;
+      color: $french;
+      text-align: right;
+    }
+
+    .fave-header {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+    }
+
+    .fave-game-id {
+      font-size: 16px;
+    }
+
+    .fave-card-title {
+      font-weight: 700;
+      font-size: 17px;
+    }
+
+    .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;
+    }
+
+    .badges-and-details {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+    }
+
+    .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;
+    }
+  }
+}

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 (
+    <>
+      <div className='drawer-container'>
+        <DrawerComponent icon={<FilterAltIcon />} buttonText='Filter By Event Category'>
+          <div id='filter-drawer-content-wrapper'>
+            <EventCategoryFilters
+              handleFilter={handleFilter}
+              ageReqList={ageReqList}
+              xpReqList={xpReqList}
+              eventTypeList={eventTypeList}
+              gameSystemList={gameSystemList}
+              groupsList={groupsList}
+              locationList={locationList}
+              tournamentFilter={tournamentFilter}
+              setTournamentFilter={setTournamentFilter}
+            />
+          </div>
+        </DrawerComponent>
+      </div>
+      <div className='drawer-container'>
+      <DrawerComponent icon={<AccessTimeFilledIcon />} buttonText='Filter By Time'>
+        <div id='filter-drawer-content-wrapper'>
+          <TimeFilters
+            earliestStartTime={earliestStartTime}
+            setEarliestStartTime={setEarliestStartTime}
+            latestStartTime={latestStartTime}
+            setLatestStartTime={setLatestStartTime}
+            durationFilter={durationFilter}
+            setDurationFilter={setDurationFilter}
+          />
+        </div>
+      </DrawerComponent>
+      </div>
+    </>
+  )
+}