diff --git a/frontend/src/components/EventAdmin.tsx b/frontend/src/components/EventAdmin.tsx index 1ea3684..ec42f40 100644 --- a/frontend/src/components/EventAdmin.tsx +++ b/frontend/src/components/EventAdmin.tsx @@ -455,511 +455,516 @@ const EventAdmin: React.FC = () => { sx={{ minHeight: '100vh', width: '100%', + position: 'fixed', + top: 0, + left: 0, + right: 0, + bottom: 0, backgroundImage: event?.wallpaper ? `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(${event.wallpaper})` : 'url(https://www.rydertech.us/backgrounds/space1.jpg)', backgroundSize: 'cover', backgroundPosition: 'center', backgroundRepeat: 'no-repeat', backgroundAttachment: 'fixed', backgroundColor: '#000', - position: 'relative', overflowY: 'auto', - py: 4, }} > - - - - - {event.title} - Admin - - - - - - - - - - - - Info: {event.description || 'None'} - - - Location: {event.location} - - - Date: {new Date(event.date).toLocaleString()} - - {event.rsvp_cutoff_date && ( - - RSVP cut-off date: {new Date(event.rsvp_cutoff_date).toLocaleString()} + + + + + + {event.title} - Admin - )} - - - {/* Add items status section */} - - - Items Status - - - - - Still Needed: - - - {neededItems.map((item: string, index: number) => ( - - ))} - {neededItems.length === 0 && ( - - All items have been claimed - - )} - - - - - Claimed Items: - - - {claimedItems.map((item: string, index: number) => ( - - ))} - {claimedItems.length === 0 && ( - - No items have been claimed yet - - )} - - - - - - - RSVPs ({rsvps.length}) - - - - - - - Name - Attending - Guests - Items Bringing - Actions - - - - {rsvps.map((rsvp: RSVP) => ( - - {rsvp.name} - {rsvp.attending.charAt(0).toUpperCase() + rsvp.attending.slice(1)} - - {rsvp.bringing_guests === 'yes' ? - `${rsvp.guest_count} (${rsvp.guest_names.replace(/\s+/g, ', ')})` : - 'No' - } - - - {(() => { - let items: string[] = []; - try { - if (typeof rsvp.items_bringing === 'string') { - try { - const parsed = JSON.parse(rsvp.items_bringing); - items = Array.isArray(parsed) ? parsed : []; - } catch (e) { - console.error('Error parsing items_bringing JSON in table:', e); - } - } else if (Array.isArray(rsvp.items_bringing)) { - items = rsvp.items_bringing; - } - } catch (e) { - console.error('Error processing items in table:', e); - } - - return ( - - {items.length > 0 ? items.map((item: string, index: number) => ( - - )) : ( - - No items - - )} - - ); - })()} - - - handleEditRsvp(rsvp)} - sx={{ mr: 1 }} - > - - - handleDeleteRsvp(rsvp)} - > - - - - - ))} - -
- - - - setDeleteDialogOpen(false)} - > - Delete RSVP - - - Are you sure you want to delete {rsvpToDelete?.name}'s RSVP? - - - - - - - - - setEditDialogOpen(false)} - maxWidth="sm" - fullWidth - > - Edit RSVP - - - - - Attending - - - - Bringing Guests - - - {editForm.bringing_guests === 'yes' && ( - <> - - - - )} - - What items are you bringing? - - - - - - - - - - - setDeleteEventDialogOpen(false)} - > - Delete Event - - - Are you sure you want to delete "{event.title}"? This action cannot be undone. - - - All RSVPs associated with this event will also be deleted. - - - - - - - - - setManageItemsDialogOpen(false)} - maxWidth="sm" - fullWidth - > - Manage Needed Items - - - - setNewItem(e.target.value)} - fullWidth - /> - - - - Current Items: - - - {event?.needed_items && Array.isArray(event.needed_items) && event.needed_items.map((item, index) => ( - handleRemoveItem(item)} - color={claimedItems.includes(item) ? "success" : "primary"} - /> - ))} - - - - - - - - - setUpdateInfoDialogOpen(false)} - maxWidth="sm" - fullWidth - > - Update Event Information - - - setUpdateForm(prev => ({ ...prev, description: e.target.value }))} - fullWidth - multiline - rows={3} - /> - setUpdateForm(prev => ({ ...prev, location: e.target.value }))} - fullWidth - /> - setUpdateForm(prev => ({ ...prev, date: e.target.value }))} - fullWidth - InputLabelProps={{ - shrink: true, - }} - /> - setUpdateForm(prev => ({ ...prev, rsvp_cutoff_date: e.target.value }))} - fullWidth - InputLabelProps={{ - shrink: true, - }} - /> - - - Wallpaper - - {event.wallpaper && ( - - - Current wallpaper: - - - - )} + + + + - {updateForm.wallpaper && ( - - Selected file: {updateForm.wallpaper.name} - - )} - - - - - - - + + + + Info: {event.description || 'None'} + + + Location: {event.location} + + + Date: {new Date(event.date).toLocaleString()} + + {event.rsvp_cutoff_date && ( + + RSVP cut-off date: {new Date(event.rsvp_cutoff_date).toLocaleString()} + + )} + + + {/* Add items status section */} + + + Items Status + + + + + Still Needed: + + + {neededItems.map((item: string, index: number) => ( + + ))} + {neededItems.length === 0 && ( + + All items have been claimed + + )} + + + + + Claimed Items: + + + {claimedItems.map((item: string, index: number) => ( + + ))} + {claimedItems.length === 0 && ( + + No items have been claimed yet + + )} + + + + + + + RSVPs ({rsvps.length}) + + + + + + + Name + Attending + Guests + Items Bringing + Actions + + + + {rsvps.map((rsvp: RSVP) => ( + + {rsvp.name} + {rsvp.attending.charAt(0).toUpperCase() + rsvp.attending.slice(1)} + + {rsvp.bringing_guests === 'yes' ? + `${rsvp.guest_count} (${rsvp.guest_names.replace(/\s+/g, ', ')})` : + 'No' + } + + + {(() => { + let items: string[] = []; + try { + if (typeof rsvp.items_bringing === 'string') { + try { + const parsed = JSON.parse(rsvp.items_bringing); + items = Array.isArray(parsed) ? parsed : []; + } catch (e) { + console.error('Error parsing items_bringing JSON in table:', e); + } + } else if (Array.isArray(rsvp.items_bringing)) { + items = rsvp.items_bringing; + } + } catch (e) { + console.error('Error processing items in table:', e); + } + + return ( + + {items.length > 0 ? items.map((item: string, index: number) => ( + + )) : ( + + No items + + )} + + ); + })()} + + + handleEditRsvp(rsvp)} + sx={{ mr: 1 }} + > + + + handleDeleteRsvp(rsvp)} + > + + + + + ))} + +
+ + + + setDeleteDialogOpen(false)} + > + Delete RSVP + + + Are you sure you want to delete {rsvpToDelete?.name}'s RSVP? + + + + + + + + + setEditDialogOpen(false)} + maxWidth="sm" + fullWidth + > + Edit RSVP + + + + + Attending + + + + Bringing Guests + + + {editForm.bringing_guests === 'yes' && ( + <> + + + + )} + + What items are you bringing? + + + + + + + + + + + setDeleteEventDialogOpen(false)} + > + Delete Event + + + Are you sure you want to delete "{event.title}"? This action cannot be undone. + + + All RSVPs associated with this event will also be deleted. + + + + + + + + + setManageItemsDialogOpen(false)} + maxWidth="sm" + fullWidth + > + Manage Needed Items + + + + setNewItem(e.target.value)} + fullWidth + /> + + + + Current Items: + + + {event?.needed_items && Array.isArray(event.needed_items) && event.needed_items.map((item, index) => ( + handleRemoveItem(item)} + color={claimedItems.includes(item) ? "success" : "primary"} + /> + ))} + + + + + + + + + setUpdateInfoDialogOpen(false)} + maxWidth="sm" + fullWidth + > + Update Event Information + + + setUpdateForm(prev => ({ ...prev, description: e.target.value }))} + fullWidth + multiline + rows={3} + /> + setUpdateForm(prev => ({ ...prev, location: e.target.value }))} + fullWidth + /> + setUpdateForm(prev => ({ ...prev, date: e.target.value }))} + fullWidth + InputLabelProps={{ + shrink: true, + }} + /> + setUpdateForm(prev => ({ ...prev, rsvp_cutoff_date: e.target.value }))} + fullWidth + InputLabelProps={{ + shrink: true, + }} + /> + + + Wallpaper + + {event.wallpaper && ( + + + Current wallpaper: + + + + )} + + {updateForm.wallpaper && ( + + Selected file: {updateForm.wallpaper.name} + + )} + + + + + + + + + + ); }; diff --git a/frontend/src/components/EventView.tsx b/frontend/src/components/EventView.tsx index 88b0a3d..ade0940 100644 --- a/frontend/src/components/EventView.tsx +++ b/frontend/src/components/EventView.tsx @@ -137,178 +137,183 @@ const EventView: React.FC = () => { sx={{ minHeight: '100vh', width: '100%', + position: 'fixed', + top: 0, + left: 0, + right: 0, + bottom: 0, backgroundImage: event?.wallpaper ? `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(${event.wallpaper})` : 'url(https://www.rydertech.us/backgrounds/space1.jpg)', backgroundSize: 'cover', backgroundPosition: 'center', backgroundRepeat: 'no-repeat', backgroundAttachment: 'fixed', backgroundColor: '#000', - position: 'relative', overflowY: 'auto', - py: 4, }} > - - - - - {event.title} - RSVPs - - - - - - - - - Info: {event.description || 'None'} - - - Location: {event.location} - - - Date: {new Date(event.date).toLocaleString()} - - {event.rsvp_cutoff_date && ( - - RSVP cut-off date: {new Date(event.rsvp_cutoff_date).toLocaleString()} + + + + + + {event.title} - RSVPs - )} - - - - - Items Status - - - - - Still Needed: - - - {neededItems.map((item: string, index: number) => ( - - ))} - {neededItems.length === 0 && ( - - All items have been claimed - - )} - + + - + + + + + Info: {event.description || 'None'} + + + Location: {event.location} + + + Date: {new Date(event.date).toLocaleString()} + + {event.rsvp_cutoff_date && ( - Claimed Items: + RSVP cut-off date: {new Date(event.rsvp_cutoff_date).toLocaleString()} - - {claimedItems.map((item: string, index: number) => ( - - ))} - {claimedItems.length === 0 && ( - - No items have been claimed yet - - )} + )} + + + + + Items Status + + + + + Still Needed: + + + {neededItems.map((item: string, index: number) => ( + + ))} + {neededItems.length === 0 && ( + + All items have been claimed + + )} + + + + + Claimed Items: + + + {claimedItems.map((item: string, index: number) => ( + + ))} + {claimedItems.length === 0 && ( + + No items have been claimed yet + + )} + - - - RSVPs ({rsvps.length}) - + + RSVPs ({rsvps.length}) + - - - - - Name - Attending - Guests - Items Bringing - - - - {rsvps.map((rsvp: RSVP) => ( - - {rsvp.name} - {rsvp.attending.charAt(0).toUpperCase() + rsvp.attending.slice(1)} - - {rsvp.bringing_guests === 'yes' ? - `${rsvp.guest_count} (${rsvp.guest_names.replace(/\s+/g, ', ')})` : - 'No' - } - - - - {(() => { - let items: string[] = []; - try { - if (typeof rsvp.items_bringing === 'string') { - try { - const parsed = JSON.parse(rsvp.items_bringing); - items = Array.isArray(parsed) ? parsed : []; - } catch (e) { - console.error('Error parsing items_bringing JSON in table:', e); - } - } else if (Array.isArray(rsvp.items_bringing)) { - items = rsvp.items_bringing; - } - } catch (e) { - console.error('Error processing items in table:', e); - } - - return items.length > 0 ? items.map((item: string, index: number) => ( - - )) : ( - - No items - - ); - })()} - - + +
+ + + Name + Attending + Guests + Items Bringing - ))} - -
- - - + + + {rsvps.map((rsvp: RSVP) => ( + + {rsvp.name} + {rsvp.attending.charAt(0).toUpperCase() + rsvp.attending.slice(1)} + + {rsvp.bringing_guests === 'yes' ? + `${rsvp.guest_count} (${rsvp.guest_names.replace(/\s+/g, ', ')})` : + 'No' + } + + + + {(() => { + let items: string[] = []; + try { + if (typeof rsvp.items_bringing === 'string') { + try { + const parsed = JSON.parse(rsvp.items_bringing); + items = Array.isArray(parsed) ? parsed : []; + } catch (e) { + console.error('Error parsing items_bringing JSON in table:', e); + } + } else if (Array.isArray(rsvp.items_bringing)) { + items = rsvp.items_bringing; + } + } catch (e) { + console.error('Error processing items in table:', e); + } + + return items.length > 0 ? items.map((item: string, index: number) => ( + + )) : ( + + No items + + ); + })()} + + + + ))} + + + + + + ); };