Add wallpaper background to all event views
This commit is contained in:
@@ -52,6 +52,7 @@ interface Event {
|
||||
location: string;
|
||||
slug: string;
|
||||
needed_items?: string[] | string;
|
||||
wallpaper?: string;
|
||||
}
|
||||
|
||||
const EventAdmin: React.FC = () => {
|
||||
@@ -121,9 +122,8 @@ const EventAdmin: React.FC = () => {
|
||||
itemsBringing = rsvp.items_bringing;
|
||||
}
|
||||
|
||||
if (itemsBringing.length > 0) {
|
||||
itemsBringing.forEach(item => claimed.add(item));
|
||||
}
|
||||
// Add items to claimed set
|
||||
itemsBringing.forEach(item => claimed.add(item));
|
||||
} catch (e) {
|
||||
console.error('Error processing items for RSVP:', e);
|
||||
}
|
||||
@@ -134,12 +134,11 @@ const EventAdmin: React.FC = () => {
|
||||
};
|
||||
});
|
||||
|
||||
// Filter out claimed items from needed items
|
||||
const availableItems = items.filter(item => !claimed.has(item));
|
||||
|
||||
setNeededItems(availableItems);
|
||||
setClaimedItems(Array.from(claimed));
|
||||
// Update state with processed data
|
||||
setRsvps(processedRsvps);
|
||||
setClaimedItems(Array.from(claimed));
|
||||
// Filter needed items to only show unclaimed ones
|
||||
setNeededItems(items.filter(item => !claimed.has(item)));
|
||||
setLoading(false);
|
||||
} catch (error) {
|
||||
setError('Failed to load event data');
|
||||
@@ -300,302 +299,312 @@ const EventAdmin: React.FC = () => {
|
||||
}
|
||||
|
||||
return (
|
||||
<Container maxWidth="lg">
|
||||
<Paper elevation={3} sx={{ p: 4, mt: 4 }}>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 4 }}>
|
||||
<Typography variant="h4" component="h2" color="primary">
|
||||
{event.title} - Admin
|
||||
</Typography>
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={() => navigate('/')}
|
||||
>
|
||||
Back to Events
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
{/* Add items status section */}
|
||||
<Box sx={{ mb: 4 }}>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
Items Status
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', gap: 4 }}>
|
||||
<Box>
|
||||
<Typography variant="subtitle1" gutterBottom>
|
||||
Still Needed:
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
|
||||
{neededItems.map((item: string, index: number) => (
|
||||
<Chip
|
||||
key={`${item}-${index}`}
|
||||
label={item}
|
||||
color="primary"
|
||||
variant="outlined"
|
||||
/>
|
||||
))}
|
||||
{neededItems.length === 0 && (
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
All items have been claimed
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography variant="subtitle1" gutterBottom>
|
||||
Claimed Items:
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
|
||||
{claimedItems.map((item: string, index: number) => (
|
||||
<Chip
|
||||
key={`${item}-${index}`}
|
||||
label={item}
|
||||
color="success"
|
||||
/>
|
||||
))}
|
||||
{claimedItems.length === 0 && (
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
No items have been claimed yet
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
minHeight: '100vh',
|
||||
backgroundImage: event?.wallpaper ? `url(${event.wallpaper})` : 'url(https://www.rydertech.us/backgrounds/space1.jpg)',
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
py: 4,
|
||||
}}
|
||||
>
|
||||
<Container maxWidth="lg">
|
||||
<Paper elevation={3} sx={{ p: 4, mt: 4 }}>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 4 }}>
|
||||
<Typography variant="h4" component="h2" color="primary">
|
||||
{event.title} - Admin
|
||||
</Typography>
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={() => navigate('/')}
|
||||
>
|
||||
Back to Events
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Typography variant="h6" gutterBottom>
|
||||
RSVPs ({rsvps.length})
|
||||
</Typography>
|
||||
|
||||
<TableContainer>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell>Name</TableCell>
|
||||
<TableCell>Attending</TableCell>
|
||||
<TableCell>Guests</TableCell>
|
||||
<TableCell>Items Bringing</TableCell>
|
||||
<TableCell>Actions</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{rsvps.map((rsvp: RSVP) => (
|
||||
<TableRow key={rsvp.id}>
|
||||
<TableCell>{rsvp.name}</TableCell>
|
||||
<TableCell>{rsvp.attending.charAt(0).toUpperCase() + rsvp.attending.slice(1)}</TableCell>
|
||||
<TableCell>
|
||||
{rsvp.bringing_guests === 'yes' ?
|
||||
`${rsvp.guest_count} (${rsvp.guest_names.replace(/\s+/g, ', ')})` :
|
||||
'No'
|
||||
}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{(() => {
|
||||
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 (
|
||||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
|
||||
{items.length > 0 ? items.map((item: string, index: number) => (
|
||||
<Chip
|
||||
key={`${item}-${index}`}
|
||||
label={item}
|
||||
color="success"
|
||||
size="small"
|
||||
variant={claimedItems.includes(item) ? "filled" : "outlined"}
|
||||
/>
|
||||
)) : (
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
No items
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
})()}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<IconButton
|
||||
{/* Add items status section */}
|
||||
<Box sx={{ mb: 4 }}>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
Items Status
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', gap: 4 }}>
|
||||
<Box>
|
||||
<Typography variant="subtitle1" gutterBottom>
|
||||
Still Needed:
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
|
||||
{neededItems.map((item: string, index: number) => (
|
||||
<Chip
|
||||
key={`${item}-${index}`}
|
||||
label={item}
|
||||
color="primary"
|
||||
onClick={() => handleEditRsvp(rsvp)}
|
||||
sx={{ mr: 1 }}
|
||||
>
|
||||
<EditIcon />
|
||||
</IconButton>
|
||||
<IconButton
|
||||
color="error"
|
||||
onClick={() => handleDeleteRsvp(rsvp)}
|
||||
>
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
|
||||
<Box sx={{ display: 'flex', justifyContent: 'flex-end', mt: 4 }}>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="error"
|
||||
startIcon={<DeleteIcon />}
|
||||
onClick={() => setDeleteEventDialogOpen(true)}
|
||||
>
|
||||
Delete Event
|
||||
</Button>
|
||||
</Box>
|
||||
</Paper>
|
||||
|
||||
<Dialog
|
||||
open={deleteDialogOpen}
|
||||
onClose={() => setDeleteDialogOpen(false)}
|
||||
>
|
||||
<DialogTitle>Delete RSVP</DialogTitle>
|
||||
<DialogContent>
|
||||
<Typography>
|
||||
Are you sure you want to delete {rsvpToDelete?.name}'s RSVP?
|
||||
</Typography>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setDeleteDialogOpen(false)}>Cancel</Button>
|
||||
<Button onClick={confirmDelete} color="error">Delete</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
|
||||
<Dialog
|
||||
open={editDialogOpen}
|
||||
onClose={() => setEditDialogOpen(false)}
|
||||
maxWidth="sm"
|
||||
fullWidth
|
||||
>
|
||||
<DialogTitle>Edit RSVP</DialogTitle>
|
||||
<DialogContent>
|
||||
<Box sx={{ mt: 2, display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
<TextField
|
||||
label="Name"
|
||||
name="name"
|
||||
value={editForm.name}
|
||||
onChange={handleTextInputChange}
|
||||
fullWidth
|
||||
/>
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>Attending</InputLabel>
|
||||
<Select
|
||||
name="attending"
|
||||
value={editForm.attending}
|
||||
onChange={handleSelectChange}
|
||||
label="Attending"
|
||||
>
|
||||
<MenuItem value="yes">Yes</MenuItem>
|
||||
<MenuItem value="no">No</MenuItem>
|
||||
<MenuItem value="maybe">Maybe</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>Bringing Guests</InputLabel>
|
||||
<Select
|
||||
name="bringing_guests"
|
||||
value={editForm.bringing_guests}
|
||||
onChange={handleSelectChange}
|
||||
label="Bringing Guests"
|
||||
>
|
||||
<MenuItem value="yes">Yes</MenuItem>
|
||||
<MenuItem value="no">No</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
{editForm.bringing_guests === 'yes' && (
|
||||
<>
|
||||
<TextField
|
||||
label="Number of Guests"
|
||||
name="guest_count"
|
||||
type="number"
|
||||
value={editForm.guest_count}
|
||||
onChange={handleTextInputChange}
|
||||
fullWidth
|
||||
/>
|
||||
<TextField
|
||||
label="Guest Names"
|
||||
name="guest_names"
|
||||
value={editForm.guest_names}
|
||||
onChange={handleTextInputChange}
|
||||
fullWidth
|
||||
multiline
|
||||
rows={2}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>What items are you bringing?</InputLabel>
|
||||
<Select
|
||||
multiple
|
||||
name="items_bringing"
|
||||
value={editForm.items_bringing}
|
||||
onChange={handleItemsChange}
|
||||
input={<OutlinedInput label="What items are you bringing?" />}
|
||||
renderValue={(selected) => (
|
||||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
|
||||
{Array.isArray(selected) ? selected.map((value: string) => (
|
||||
<Chip
|
||||
key={value}
|
||||
label={value}
|
||||
color="primary"
|
||||
/>
|
||||
)) : null}
|
||||
</Box>
|
||||
)}
|
||||
>
|
||||
{Array.from(new Set([...neededItems, ...editForm.items_bringing])).map((item: string) => (
|
||||
<MenuItem key={item} value={item}>
|
||||
<Checkbox checked={editForm.items_bringing.includes(item)} />
|
||||
<ListItemText
|
||||
primary={item}
|
||||
secondary={neededItems.includes(item) ? 'Available' : 'Currently assigned'}
|
||||
variant="outlined"
|
||||
/>
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
))}
|
||||
{neededItems.length === 0 && (
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
All items have been claimed
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography variant="subtitle1" gutterBottom>
|
||||
Claimed Items:
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
|
||||
{claimedItems.map((item: string, index: number) => (
|
||||
<Chip
|
||||
key={`${item}-${index}`}
|
||||
label={item}
|
||||
color="success"
|
||||
/>
|
||||
))}
|
||||
{claimedItems.length === 0 && (
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
No items have been claimed yet
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setEditDialogOpen(false)}>Cancel</Button>
|
||||
<Button onClick={handleEditSubmit} color="primary">Save Changes</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
|
||||
<Dialog
|
||||
open={deleteEventDialogOpen}
|
||||
onClose={() => setDeleteEventDialogOpen(false)}
|
||||
>
|
||||
<DialogTitle>Delete Event</DialogTitle>
|
||||
<DialogContent>
|
||||
<Typography>
|
||||
Are you sure you want to delete "{event.title}"? This action cannot be undone.
|
||||
<Typography variant="h6" gutterBottom>
|
||||
RSVPs ({rsvps.length})
|
||||
</Typography>
|
||||
<Typography color="error" sx={{ mt: 2 }}>
|
||||
All RSVPs associated with this event will also be deleted.
|
||||
</Typography>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setDeleteEventDialogOpen(false)}>Cancel</Button>
|
||||
<Button onClick={handleDeleteEvent} color="error" variant="contained">
|
||||
Delete Event
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</Container>
|
||||
|
||||
<TableContainer>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell>Name</TableCell>
|
||||
<TableCell>Attending</TableCell>
|
||||
<TableCell>Guests</TableCell>
|
||||
<TableCell>Items Bringing</TableCell>
|
||||
<TableCell>Actions</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{rsvps.map((rsvp: RSVP) => (
|
||||
<TableRow key={rsvp.id}>
|
||||
<TableCell>{rsvp.name}</TableCell>
|
||||
<TableCell>{rsvp.attending.charAt(0).toUpperCase() + rsvp.attending.slice(1)}</TableCell>
|
||||
<TableCell>
|
||||
{rsvp.bringing_guests === 'yes' ?
|
||||
`${rsvp.guest_count} (${rsvp.guest_names.replace(/\s+/g, ', ')})` :
|
||||
'No'
|
||||
}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{(() => {
|
||||
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 (
|
||||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
|
||||
{items.length > 0 ? items.map((item: string, index: number) => (
|
||||
<Chip
|
||||
key={`${item}-${index}`}
|
||||
label={item}
|
||||
color="success"
|
||||
size="small"
|
||||
variant={claimedItems.includes(item) ? "filled" : "outlined"}
|
||||
/>
|
||||
)) : (
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
No items
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
})()}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<IconButton
|
||||
color="primary"
|
||||
onClick={() => handleEditRsvp(rsvp)}
|
||||
sx={{ mr: 1 }}
|
||||
>
|
||||
<EditIcon />
|
||||
</IconButton>
|
||||
<IconButton
|
||||
color="error"
|
||||
onClick={() => handleDeleteRsvp(rsvp)}
|
||||
>
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
|
||||
<Box sx={{ display: 'flex', justifyContent: 'flex-end', mt: 4 }}>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="error"
|
||||
startIcon={<DeleteIcon />}
|
||||
onClick={() => setDeleteEventDialogOpen(true)}
|
||||
>
|
||||
Delete Event
|
||||
</Button>
|
||||
</Box>
|
||||
</Paper>
|
||||
|
||||
<Dialog
|
||||
open={deleteDialogOpen}
|
||||
onClose={() => setDeleteDialogOpen(false)}
|
||||
>
|
||||
<DialogTitle>Delete RSVP</DialogTitle>
|
||||
<DialogContent>
|
||||
<Typography>
|
||||
Are you sure you want to delete {rsvpToDelete?.name}'s RSVP?
|
||||
</Typography>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setDeleteDialogOpen(false)}>Cancel</Button>
|
||||
<Button onClick={confirmDelete} color="error">Delete</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
|
||||
<Dialog
|
||||
open={editDialogOpen}
|
||||
onClose={() => setEditDialogOpen(false)}
|
||||
maxWidth="sm"
|
||||
fullWidth
|
||||
>
|
||||
<DialogTitle>Edit RSVP</DialogTitle>
|
||||
<DialogContent>
|
||||
<Box sx={{ mt: 2, display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
<TextField
|
||||
label="Name"
|
||||
name="name"
|
||||
value={editForm.name}
|
||||
onChange={handleTextInputChange}
|
||||
fullWidth
|
||||
/>
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>Attending</InputLabel>
|
||||
<Select
|
||||
name="attending"
|
||||
value={editForm.attending}
|
||||
onChange={handleSelectChange}
|
||||
label="Attending"
|
||||
>
|
||||
<MenuItem value="yes">Yes</MenuItem>
|
||||
<MenuItem value="no">No</MenuItem>
|
||||
<MenuItem value="maybe">Maybe</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>Bringing Guests</InputLabel>
|
||||
<Select
|
||||
name="bringing_guests"
|
||||
value={editForm.bringing_guests}
|
||||
onChange={handleSelectChange}
|
||||
label="Bringing Guests"
|
||||
>
|
||||
<MenuItem value="yes">Yes</MenuItem>
|
||||
<MenuItem value="no">No</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
{editForm.bringing_guests === 'yes' && (
|
||||
<>
|
||||
<TextField
|
||||
label="Number of Guests"
|
||||
name="guest_count"
|
||||
type="number"
|
||||
value={editForm.guest_count}
|
||||
onChange={handleTextInputChange}
|
||||
fullWidth
|
||||
/>
|
||||
<TextField
|
||||
label="Guest Names"
|
||||
name="guest_names"
|
||||
value={editForm.guest_names}
|
||||
onChange={handleTextInputChange}
|
||||
fullWidth
|
||||
multiline
|
||||
rows={2}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>What items are you bringing?</InputLabel>
|
||||
<Select
|
||||
multiple
|
||||
name="items_bringing"
|
||||
value={editForm.items_bringing}
|
||||
onChange={handleItemsChange}
|
||||
input={<OutlinedInput label="What items are you bringing?" />}
|
||||
renderValue={(selected) => (
|
||||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
|
||||
{Array.isArray(selected) ? selected.map((value: string) => (
|
||||
<Chip
|
||||
key={value}
|
||||
label={value}
|
||||
color="primary"
|
||||
/>
|
||||
)) : null}
|
||||
</Box>
|
||||
)}
|
||||
>
|
||||
{Array.from(new Set([...neededItems, ...editForm.items_bringing])).map((item: string) => (
|
||||
<MenuItem key={item} value={item}>
|
||||
<Checkbox checked={editForm.items_bringing.includes(item)} />
|
||||
<ListItemText
|
||||
primary={item}
|
||||
secondary={neededItems.includes(item) ? 'Available' : 'Currently assigned'}
|
||||
/>
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Box>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setEditDialogOpen(false)}>Cancel</Button>
|
||||
<Button onClick={handleEditSubmit} color="primary">Save Changes</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
|
||||
<Dialog
|
||||
open={deleteEventDialogOpen}
|
||||
onClose={() => setDeleteEventDialogOpen(false)}
|
||||
>
|
||||
<DialogTitle>Delete Event</DialogTitle>
|
||||
<DialogContent>
|
||||
<Typography>
|
||||
Are you sure you want to delete "{event.title}"? This action cannot be undone.
|
||||
</Typography>
|
||||
<Typography color="error" sx={{ mt: 2 }}>
|
||||
All RSVPs associated with this event will also be deleted.
|
||||
</Typography>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setDeleteEventDialogOpen(false)}>Cancel</Button>
|
||||
<Button onClick={handleDeleteEvent} color="error" variant="contained">
|
||||
Delete Event
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -34,6 +34,7 @@ interface Event {
|
||||
location: string;
|
||||
slug: string;
|
||||
needed_items?: string[] | string;
|
||||
wallpaper?: string;
|
||||
}
|
||||
|
||||
const EventView: React.FC = () => {
|
||||
@@ -131,134 +132,144 @@ const EventView: React.FC = () => {
|
||||
}
|
||||
|
||||
return (
|
||||
<Container maxWidth="lg">
|
||||
<Paper elevation={3} sx={{ p: 4, mt: 4 }}>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 4 }}>
|
||||
<Typography variant="h4" component="h2" color="primary">
|
||||
{event.title} - RSVPs
|
||||
</Typography>
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={() => navigate('/')}
|
||||
>
|
||||
Back to Events
|
||||
</Button>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
minHeight: '100vh',
|
||||
backgroundImage: event?.wallpaper ? `url(${event.wallpaper})` : 'url(https://www.rydertech.us/backgrounds/space1.jpg)',
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
py: 4,
|
||||
}}
|
||||
>
|
||||
<Container maxWidth="lg">
|
||||
<Paper elevation={3} sx={{ p: 4, mt: 4 }}>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 4 }}>
|
||||
<Typography variant="h4" component="h2" color="primary">
|
||||
{event.title} - RSVPs
|
||||
</Typography>
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={() => navigate('/')}
|
||||
>
|
||||
Back to Events
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ mb: 4 }}>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
Items Status
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', gap: 4 }}>
|
||||
<Box>
|
||||
<Typography variant="subtitle1" gutterBottom>
|
||||
Still Needed:
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
|
||||
{neededItems.map((item: string, index: number) => (
|
||||
<Chip
|
||||
key={`${item}-${index}`}
|
||||
label={item}
|
||||
color="primary"
|
||||
variant="outlined"
|
||||
/>
|
||||
))}
|
||||
{neededItems.length === 0 && (
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
All items have been claimed
|
||||
</Typography>
|
||||
)}
|
||||
<Box sx={{ mb: 4 }}>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
Items Status
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', gap: 4 }}>
|
||||
<Box>
|
||||
<Typography variant="subtitle1" gutterBottom>
|
||||
Still Needed:
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
|
||||
{neededItems.map((item: string, index: number) => (
|
||||
<Chip
|
||||
key={`${item}-${index}`}
|
||||
label={item}
|
||||
color="primary"
|
||||
variant="outlined"
|
||||
/>
|
||||
))}
|
||||
{neededItems.length === 0 && (
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
All items have been claimed
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography variant="subtitle1" gutterBottom>
|
||||
Claimed Items:
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
|
||||
{claimedItems.map((item: string, index: number) => (
|
||||
<Chip
|
||||
key={`${item}-${index}`}
|
||||
label={item}
|
||||
color="success"
|
||||
/>
|
||||
))}
|
||||
{claimedItems.length === 0 && (
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
No items have been claimed yet
|
||||
</Typography>
|
||||
)}
|
||||
<Box>
|
||||
<Typography variant="subtitle1" gutterBottom>
|
||||
Claimed Items:
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
|
||||
{claimedItems.map((item: string, index: number) => (
|
||||
<Chip
|
||||
key={`${item}-${index}`}
|
||||
label={item}
|
||||
color="success"
|
||||
/>
|
||||
))}
|
||||
{claimedItems.length === 0 && (
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
No items have been claimed yet
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Typography variant="h6" gutterBottom>
|
||||
RSVPs ({rsvps.length})
|
||||
</Typography>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
RSVPs ({rsvps.length})
|
||||
</Typography>
|
||||
|
||||
<TableContainer>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell>Name</TableCell>
|
||||
<TableCell>Attending</TableCell>
|
||||
<TableCell>Guests</TableCell>
|
||||
<TableCell>Items Bringing</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{rsvps.map((rsvp: RSVP) => (
|
||||
<TableRow key={rsvp.id}>
|
||||
<TableCell>{rsvp.name}</TableCell>
|
||||
<TableCell>{rsvp.attending.charAt(0).toUpperCase() + rsvp.attending.slice(1)}</TableCell>
|
||||
<TableCell>
|
||||
{rsvp.bringing_guests === 'yes' ?
|
||||
`${rsvp.guest_count} (${rsvp.guest_names.replace(/\s+/g, ', ')})` :
|
||||
'No'
|
||||
}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
|
||||
{(() => {
|
||||
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) => (
|
||||
<Chip
|
||||
key={`${item}-${index}`}
|
||||
label={item}
|
||||
color="success"
|
||||
size="small"
|
||||
variant={claimedItems.includes(item) ? "filled" : "outlined"}
|
||||
/>
|
||||
)) : (
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
No items
|
||||
</Typography>
|
||||
);
|
||||
})()}
|
||||
</Box>
|
||||
</TableCell>
|
||||
<TableContainer>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell>Name</TableCell>
|
||||
<TableCell>Attending</TableCell>
|
||||
<TableCell>Guests</TableCell>
|
||||
<TableCell>Items Bringing</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</Paper>
|
||||
</Container>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{rsvps.map((rsvp: RSVP) => (
|
||||
<TableRow key={rsvp.id}>
|
||||
<TableCell>{rsvp.name}</TableCell>
|
||||
<TableCell>{rsvp.attending.charAt(0).toUpperCase() + rsvp.attending.slice(1)}</TableCell>
|
||||
<TableCell>
|
||||
{rsvp.bringing_guests === 'yes' ?
|
||||
`${rsvp.guest_count} (${rsvp.guest_names.replace(/\s+/g, ', ')})` :
|
||||
'No'
|
||||
}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
|
||||
{(() => {
|
||||
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) => (
|
||||
<Chip
|
||||
key={`${item}-${index}`}
|
||||
label={item}
|
||||
color="success"
|
||||
size="small"
|
||||
variant={claimedItems.includes(item) ? "filled" : "outlined"}
|
||||
/>
|
||||
)) : (
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
No items
|
||||
</Typography>
|
||||
);
|
||||
})()}
|
||||
</Box>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</Paper>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -45,6 +45,7 @@ const RSVPForm: React.FC = () => {
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [success, setSuccess] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
const [event, setEvent] = useState<Event | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchEventDetails = async () => {
|
||||
@@ -86,6 +87,7 @@ const RSVPForm: React.FC = () => {
|
||||
|
||||
setNeededItems(availableItems);
|
||||
setClaimedItems(Array.from(claimed));
|
||||
setEvent(eventResponse.data);
|
||||
} catch (error) {
|
||||
console.error('Error fetching event details:', error);
|
||||
setError('Failed to load event details');
|
||||
@@ -211,127 +213,137 @@ const RSVPForm: React.FC = () => {
|
||||
}
|
||||
|
||||
return (
|
||||
<Container maxWidth="sm">
|
||||
<Paper elevation={3} sx={{ p: 4, mt: 4 }}>
|
||||
<Typography variant="h4" component="h2" gutterBottom color="primary" align="center">
|
||||
RSVP Form
|
||||
</Typography>
|
||||
|
||||
{error && (
|
||||
<Typography color="error" align="center" sx={{ mb: 2 }}>
|
||||
{error}
|
||||
<Box
|
||||
sx={{
|
||||
minHeight: '100vh',
|
||||
backgroundImage: event?.wallpaper ? `url(${event.wallpaper})` : 'url(https://www.rydertech.us/backgrounds/space1.jpg)',
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
py: 4,
|
||||
}}
|
||||
>
|
||||
<Container maxWidth="sm">
|
||||
<Paper elevation={3} sx={{ p: 4, mt: 4 }}>
|
||||
<Typography variant="h4" component="h2" gutterBottom color="primary" align="center">
|
||||
RSVP Form
|
||||
</Typography>
|
||||
)}
|
||||
|
||||
<Box component="form" onSubmit={handleSubmit} sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
<TextField
|
||||
label="Name"
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
required
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
/>
|
||||
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>Are you attending?</InputLabel>
|
||||
<Select
|
||||
name="attending"
|
||||
value={formData.attending}
|
||||
onChange={handleSelectChange}
|
||||
label="Are you attending?"
|
||||
required
|
||||
>
|
||||
<MenuItem value="yes">Yes</MenuItem>
|
||||
<MenuItem value="no">No</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
{formData.attending === 'yes' && (
|
||||
<>
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>Are you bringing any guests?</InputLabel>
|
||||
<Select
|
||||
name="bringing_guests"
|
||||
value={formData.bringing_guests}
|
||||
onChange={handleSelectChange}
|
||||
label="Are you bringing any guests?"
|
||||
>
|
||||
<MenuItem value="yes">Yes</MenuItem>
|
||||
<MenuItem value="no">No</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
{formData.bringing_guests === 'yes' && (
|
||||
<>
|
||||
<TextField
|
||||
label="Number of Guests"
|
||||
name="guest_count"
|
||||
type="number"
|
||||
value={formData.guest_count}
|
||||
onChange={handleChange}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
inputProps={{ min: 1 }}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
label="Guest Names"
|
||||
name="guest_names"
|
||||
value={formData.guest_names}
|
||||
onChange={handleChange}
|
||||
multiline
|
||||
rows={3}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
placeholder="Please list the names of your guests"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{neededItems.length > 0 && (
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>What items are you bringing?</InputLabel>
|
||||
<Select
|
||||
multiple
|
||||
name="items_bringing"
|
||||
value={formData.items_bringing}
|
||||
onChange={handleItemsChange}
|
||||
input={<OutlinedInput label="What items are you bringing?" />}
|
||||
renderValue={(selected) => (
|
||||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
|
||||
{selected.map((value) => (
|
||||
<Chip key={value} label={value} />
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
>
|
||||
{neededItems.map((item) => (
|
||||
<MenuItem key={item} value={item}>
|
||||
<Checkbox checked={formData.items_bringing.includes(item)} />
|
||||
<ListItemText primary={item} />
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
)}
|
||||
</>
|
||||
|
||||
{error && (
|
||||
<Typography color="error" align="center" sx={{ mb: 2 }}>
|
||||
{error}
|
||||
</Typography>
|
||||
)}
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
variant="contained"
|
||||
color="primary"
|
||||
size="large"
|
||||
disabled={isSubmitting}
|
||||
sx={{ mt: 2 }}
|
||||
>
|
||||
{isSubmitting ? 'Submitting...' : 'Submit RSVP'}
|
||||
</Button>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Container>
|
||||
<Box component="form" onSubmit={handleSubmit} sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
<TextField
|
||||
label="Name"
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
required
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
/>
|
||||
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>Are you attending?</InputLabel>
|
||||
<Select
|
||||
name="attending"
|
||||
value={formData.attending}
|
||||
onChange={handleSelectChange}
|
||||
label="Are you attending?"
|
||||
required
|
||||
>
|
||||
<MenuItem value="yes">Yes</MenuItem>
|
||||
<MenuItem value="no">No</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
{formData.attending === 'yes' && (
|
||||
<>
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>Are you bringing any guests?</InputLabel>
|
||||
<Select
|
||||
name="bringing_guests"
|
||||
value={formData.bringing_guests}
|
||||
onChange={handleSelectChange}
|
||||
label="Are you bringing any guests?"
|
||||
>
|
||||
<MenuItem value="yes">Yes</MenuItem>
|
||||
<MenuItem value="no">No</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
{formData.bringing_guests === 'yes' && (
|
||||
<>
|
||||
<TextField
|
||||
label="Number of Guests"
|
||||
name="guest_count"
|
||||
type="number"
|
||||
value={formData.guest_count}
|
||||
onChange={handleChange}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
inputProps={{ min: 1 }}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
label="Guest Names"
|
||||
name="guest_names"
|
||||
value={formData.guest_names}
|
||||
onChange={handleChange}
|
||||
multiline
|
||||
rows={3}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
placeholder="Please list the names of your guests"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{neededItems.length > 0 && (
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>What items are you bringing?</InputLabel>
|
||||
<Select
|
||||
multiple
|
||||
name="items_bringing"
|
||||
value={formData.items_bringing}
|
||||
onChange={handleItemsChange}
|
||||
input={<OutlinedInput label="What items are you bringing?" />}
|
||||
renderValue={(selected) => (
|
||||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
|
||||
{selected.map((value) => (
|
||||
<Chip key={value} label={value} />
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
>
|
||||
{neededItems.map((item) => (
|
||||
<MenuItem key={item} value={item}>
|
||||
<Checkbox checked={formData.items_bringing.includes(item)} />
|
||||
<ListItemText primary={item} />
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
variant="contained"
|
||||
color="primary"
|
||||
size="large"
|
||||
disabled={isSubmitting}
|
||||
sx={{ mt: 2 }}
|
||||
>
|
||||
{isSubmitting ? 'Submitting...' : 'Submit RSVP'}
|
||||
</Button>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user