●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Airport lookup using MudAutocomplete with SearchFunc and ToStringFunc.
- SVG runway visualization with centerline, threshold markings and annotated length/width.
- Wind display panel with a rotated MudIcon showing wind direction, speed text, and color-coded impact.
- Wind-rose SVG petal that scales by wind speed and color-codes strength.
- METAR and TAF text panels shown in MudCard components.
- Client-side calculation of headwind/tailwind and crosswind components.
## Key components
- MudAutocomplete<T> (SearchFunc, @bind-Value, ToStringFunc)
- MudGrid, MudItem, MudPaper, MudCard, MudCardHeader, MudCardContent
- MudText, MudIcon, MudTooltip
- Inline SVG for runway and wind-rose visuals
- View models: AirportViewModel, RunwayViewModel, WindViewModel, MetarViewModel, TafViewModel
- Methods: OnAirportSelected, SearchAirports, CalculateWindImpact
## How it works
- User selects an airport via MudAutocomplete (@bind-Value triggers OnAirportSelected). SearchAirports returns local mock data.
- OnAirportSelected sets runway, wind, METAR, and TAF view models and calls CalculateWindImpact.
- CalculateWindImpact computes angle difference, normalizes it to ±180°, then derives headwind/tailwind and crosswind components using Math.Cos/Math.Sin.
- SVG elements render runway markings and text bound to RunwayViewModel properties (Designator, Heading, Length, Width).
- Wind-rose uses runtime math to compute path coordinates and a color based on wind speed; MudIcon uses inline CSS rotation for direction.
## Styling
- UI uses MudBlazor layout and components (MudGrid for responsive columns, MudCard/MudPaper for grouped content).
- Custom CSS in the component file styles SVG elements (.runway-svg, .wind-rose-svg) and annotations for consistent typography.
- SVGs scale responsively via width:100% and viewBox attributes; MudGrid provides column changes across breakpoints.
## Reuse steps
1. Add the MudBlazor NuGet package and call builder.Services.AddMudServices() in Program.cs; import MudBlazor namespaces in components.
2. Add the component Razor/CSS files and include view models or move models to a shared project/namespace.
3. Replace the mock SearchAirports and switch block with real API calls for airport list, METAR and TAF (async services or HttpClient).
4. Ensure MudBlazor CSS is referenced (e.g., in index.html/_Host) and register any required MudBlazor providers.
5. Adjust models and units (meters/kts) as needed and wire authentication or caching if required by the API.
## Limitations & next steps
- This is a single-page demo generated by Instruct UI and uses mock static data; real data fetching, error handling and caching are not implemented.
- No server-side authentication or authorization is wired; METAR/TAF retrieval and airport search require external APIs and API keys.
- Validation or EditForm patterns are not present because the page is read/display oriented; add forms and DataAnnotations if editable inputs are required.
- Consider extracting SVG rendering into a reusable component for multiple runways, and add unit tests for CalculateWindImpact and angle normalization.