●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Page layout with a persistent drawer and app bar that provides an environment selector (MudSelect) via CascadingValue.
- Dashboard view that renders fleet summaries as responsive cards (MudGrid + MudCard).
- Fleet list view with a MudTable listing and row click selection, plus a details card.
- Simple mock data generator (MockFleets) to simulate server fleets per environment.
- Event-driven selection using EventCallback and cascading parameter updates.
## Key components
- Layout: GameServerLayout (MudDrawer, MudAppBar, MudSelect, CascadingValue).
- Page: GameServerPage (CascadingParameter ServerEnv, OnParametersSet, StateHasChanged).
- Views: DashboardView (MudGrid, MudCard, MudButton), FleetsView (MudTable, MudCard, MudGrid).
- Models: FleetModel, ServerEnv enum.
- Interaction: EventCallback<FleetModel>, TableRowClickEventArgs, @bind-Open on MudDrawer.
## How it works
- The layout exposes a CascadingValue named "CurrentEnv"; changing the MudSelect updates _selectedEnv and re-renders children.
- GameServerPage receives CurrentEnv as a CascadingParameter. OnParametersSet detects env changes, calls LoadFleets and updates _fleets.
- DashboardView consumes Fleets and emits selection via EventCallback<FleetModel>. FleetsView uses MudTable with OnRowClick to set a local selected item and invoke parent callback.
- Data binding uses standard @Parameter and @bind patterns; no server calls are wired — mock data is generated locally.
## Styling
- Uses MudBlazor components and theme-aware classes (MudPaper, MudText, MudCard). Layout relies on MudDrawerContainer/MudMainContent for responsive behavior.
- Grid responsiveness handled by MudGrid / MudItem breakpoints (xs/sm/md/lg) for card layout.
## Reuse steps
1. Add MudBlazor NuGet package and register services in Program.cs (builder.Services.AddMudServices()).
2. Import MudBlazor namespace in _Imports.razor and ensure MudBlazor CSS is included in index.html/_Host.cshtml.
3. Add the DataModel (FleetModel, ServerEnv) and copy GameServerLayout, GameServerPage, DashboardView, FleetsView into a feature folder.
4. Replace MockFleets with real service calls and inject an API or data service; update LoadFleets to be async and call the service.
5. Wire navigation/selection handlers to route to a fleet detail/edit page or open a MudDialog for management actions.
## Limitations & next steps
- This is a single-page module generated by Instruct UI and uses in-memory mock data; authentication, API integration, and persistence are not implemented.
- No paging, sorting, or server-side filtering is implemented on MudTable; add TableServerData or pagination for large datasets.
- Consider adding DataAnnotations+EditForm for fleet edit flows, MudDialog for confirmations, and centralized state (e.g., a store or scoped service) for cross-page selection.
- Accessibility, error handling, and unit tests are not included and should be added when integrating into an application.