●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Interactive seat map rendered as a table with rows (A‑E) and columns, showing available/selected/occupied states.
- Seat selection via clickable buttons with visual legend and responsive sizing.
- Reservation form using EditForm with validation and ValidationSummary.
- Time-slot InputSelect, InputDate, InputText, InputTextArea controls and a confirmation overlay dialog implemented via conditional rendering.
- Today’s reservations list with cancel action and seat state update.
## Key components
- EditForm, DataAnnotationsValidator, ValidationSummary, ValidationMessage
- InputText, InputDate, InputSelect, InputTextArea
- HTML table-based seat grid, Bootstrap buttons (btn, btn-*) and badges
- @bind-Value and @onclick handlers, StateHasChanged
- Custom CSS scoped to the component (StudyRoomReservation.razor.css)
## How it works
- Seat models (SeatModel) are initialized in OnInitialized() and stored in a local List<SeatModel>.
- Seat buttons toggle IsSelected and set selectedSeat; reservation model is populated with SeatNumber and Date.
- EditForm performs DataAnnotations validation on submit; ConfirmReservation toggles a conditional confirmation overlay.
- CompleteReservation updates seat.IsAvailable, adds a ReservationModel to the reservations list, resets state and calls StateHasChanged.
- CancelReservation finds the seat by SeatNumber and restores IsAvailable, then removes the reservation.
## Styling
- Uses Bootstrap utility and component classes (container, row, col-*, card, btn, form-control, list-group) for layout and responsiveness.
- Scoped CSS defines seat button sizes, color states (.available, .selected, .occupied), legend blocks and a fixed confirmation overlay.
- Includes media query to reduce seat button size on small screens.
## Reuse steps
1. Add the Razor file and DataModel.cs to a Blazor project (no extra UI library required beyond Bootstrap).
2. Ensure Bootstrap CSS and FontAwesome icons are available (via index.html or layout).
3. Register any app-level services if real-time or persistence is needed (e.g., add a reservation service and inject it).
4. Import component namespace where required and include the scoped CSS file (the .razor.css is automatic in Blazor component model).
5. Replace the in-memory List<SeatModel>/random occupancy with API calls or SignalR to persist and sync seat state.
## Limitations & next steps
- This is a single-page component with in-memory state; persistence, concurrency control and authentication are not implemented.
- Random occupancy is used for demo seat availability; replace with backend data and real-time updates (SignalR) for multi-user scenarios.
- Add server-side validation and error handling when wiring to APIs, and consider booking conflicts and cancellation policies.
- Extend accessibility (aria labels) and keyboard navigation for seat selection and dialog focus management.