Merge pull request #18 from Sun-Mountain/single-event-modal

15 - Single event modal

frontend/components/EventListing.tsx

@@ -0,0 +1,57 @@
+import { useState } from 'react';
+import { eventData } from "@/pages";
+import EventModal from '@/components/EventModal';
+import IconButton from '@mui/material/IconButton';
+// import AddIcon from '@mui/icons-material/Add';
+import ZoomInIcon from '@mui/icons-material/ZoomIn';
+
+export default function EventListing ({ eventIndex }: { eventIndex: number }) {
+  const {
+    title,
+    duration,
+    cost,
+    maxTickets,
+    ticketsAvailable
+  } = eventData[eventIndex];
+  const event = eventData[eventIndex];
+
+  const [open, setOpen] = useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
+  const durationPrefix = duration > 1 ? 'hrs' : 'hr';
+
+  const noTickets = ticketsAvailable === 0;
+
+  return (
+    <div className={`event-listing${noTickets ? ' sold-out' : ''}`}>
+      <div className='flex-row'>
+        {/* <div className="add-button-column">
+          <div>
+            <IconButton aria-label="add icon" color="secondary">
+              <AddIcon />
+            </IconButton>
+          </div>
+        </div> */}
+        <div className='event-title-container'>
+          {title}
+        </div>
+      </div>
+      <EventModal open={open} handleClose={handleClose} event={event} />
+      <div className='event-details'>
+        <IconButton aria-label="zoom in icon" color="secondary" onClick={handleOpen}>
+          <ZoomInIcon />
+        </IconButton>
+        <div className='tickets-column'>
+          {ticketsAvailable}/{maxTickets}
+        </div>
+        <div className='duration-column'>
+          {duration} {durationPrefix}
+        </div>
+        <div className='cost-column'>
+          ${cost}
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/components/EventModal.tsx

@@ -0,0 +1,87 @@
+import { Dispatch, SetStateAction } from 'react';
+import { NewEvent } from '@/helpers/getData';
+import Box from '@mui/material/Box';
+import Modal from '@mui/material/Modal';
+import ConfirmationNumberIcon from '@mui/icons-material/ConfirmationNumber';
+import TableRow from './TableRow';
+import Link from 'next/link';
+
+const style = {
+  width: {
+    xs: 350, // theme.breakpoints.up('xs')
+    sm: 600, // theme.breakpoints.up('sm')
+    md: 600, // theme.breakpoints.up('md')
+    lg: 800, // theme.breakpoints.up('lg')
+    xl: 800, // theme.breakpoints.up('xl')
+  },
+  height: {
+    xs: '75dvh', // theme.breakpoints.up('xs')
+    sm: 500,
+  },
+  position: 'absolute' as 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  bgcolor: 'background.paper',
+  border: '2px solid #000',
+  boxShadow: 24,
+  p: 4,
+  overflow: 'scroll',
+};
+
+export default function BasicModal({
+  open,
+  handleClose,
+  event
+}: {
+  open: boolean;
+  handleClose: Dispatch<SetStateAction<boolean>>;
+  event: NewEvent;
+}) {
+
+  var gameId = event.gameId,
+      eventLinkId = gameId.substring(7);
+
+  return (
+    <div className='modal-layer'>
+      <Modal
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="modal-modal-title"
+        aria-describedby="modal-modal-description"
+      >
+        <Box sx={style}>
+          <table className='modal-table'>
+            <tr className="modal-table-row">
+              <td className="table-label-container">
+                Title
+              </td>
+              <td className="table-value-container">
+                {event.title}<br />
+                <Link
+                  className='ticket-link'
+                  href={`https://www.gencon.com/events/${eventLinkId}`}
+                  target="_blank"
+                >
+                  <ConfirmationNumberIcon /> Wishlist / Purchase Option
+                </Link>
+              </td>
+            </tr>
+            <TableRow label='Game Id' value={gameId} />
+            <TableRow label='Start Date & Time' value={`${event.startDate} ${event.startTime}`} />
+            <TableRow label='End Date & Time' value={`${event.endDate} ${event.endTime}`} />
+            {event.shortDescription && <TableRow label='Short Description' value={event.shortDescription} />}
+            {event.longDescription && <TableRow label='Long Description' value={event.longDescription} />}
+            <TableRow label='Cost' value={`$${event.cost}`} />
+            {event.gameSystem && <TableRow label='Game System' value={event.gameSystem} />}
+            <TableRow label='Age Requirement' value={event.ageRequirement} />
+            <TableRow label='Experience Requirement' value={event.experienceRequirement} />
+            {event.group && <TableRow label='Group' value={event.group} />}
+            {event.location && <TableRow label='Location' value={event.location} />}
+            <TableRow label='Tickets Available' value={`${event.ticketsAvailable}/${event.maxTickets}`} />
+          </table>
+        </Box>
+      </Modal>
+    </div>
+  );
+}

frontend/components/TableRow.tsx

@@ -0,0 +1,20 @@
+import { ReactElement } from "react"
+
+export default function TableRow ({
+  label,
+  value
+}: {
+  label: string,
+  value: string | ReactElement
+}) {
+  return (
+    <tr className="modal-table-row">
+      <td className="table-label-container">
+        {label}
+      </td>
+      <td className="table-value-container">
+        {value}
+      </td>
+    </tr>
+  )
+}

frontend/components/TimeComponent.tsx

@@ -1,8 +1,6 @@
 import dynamic from 'next/dynamic';
-import { NewEvent } from '@/helpers/getData';
-// import EventCard from './EventCard';
 
-const EventCard = dynamic(() => import("./EventCard"), {
+const EventListing = dynamic(() => import("./EventListing"), {
   loading: () => <b>Loading...</b>,
 });
 
@@ -22,8 +20,13 @@ export default function DailyTimeComponent ({
       </h2>
       <div className="event-list">
         <div className='event-listing listing-header'>
-          <div>
-            Title
+          <div className='flex-row'>
+            {/* <div className='add-button-column'>
+              Add Choice
+            </div> */}
+            <div>
+              Title
+            </div>
           </div>
           <div className='event-details'>
             <div className='tickets-column'>
@@ -38,7 +41,7 @@ export default function DailyTimeComponent ({
           </div>
         </div>
         {events.map((eventIndex: number) => {
-          return <EventCard key={eventIndex} eventIndex={eventIndex} />
+          return <EventListing key={eventIndex} eventIndex={eventIndex} />
         })}
       </div>
     </div>