docs(initial-implementation): add feature plan and 10 phase subplans
This commit is contained in:
@@ -0,0 +1,108 @@
|
||||
# Phase 6: Event Browsing UI
|
||||
|
||||
**Status:** ⬜ Not Started
|
||||
**Parent plan:** [PLAN.md](./PLAN.md)
|
||||
**Domain:** frontend
|
||||
**Implementer:** Opus + frontend-design skill
|
||||
**Depends on:** Phase 4 (use cases) + Phase 5 (UI shell)
|
||||
|
||||
## Objective
|
||||
|
||||
Build the user-facing browsing experience: pre-match list, live list (auto-refreshing),
|
||||
event-detail view with odds-over-time chart, plus an Excel export trigger. Visual
|
||||
quality must match the design system established in Phase 5 — distinctive, accessible,
|
||||
information-dense without being cluttered.
|
||||
|
||||
## Tasks
|
||||
|
||||
- [ ] Create `Marathon.UI/Pages/PreMatch/EventsList.razor`:
|
||||
- Server-paginated table of upcoming `Event`s (use `IEventRepository` via injected
|
||||
use case wrapper)
|
||||
- Filters: sport (multi-select), country (multi-select), date range, free-text
|
||||
search (league/team)
|
||||
- Sort: scheduled time, sport, country, league
|
||||
- Each row shows compact odds preview (Match Win-1 / Draw / Win-2)
|
||||
- Click row → navigate to `Pages/Events/Detail.razor?id=...`
|
||||
- [ ] Create `Marathon.UI/Pages/Live/LiveList.razor`:
|
||||
- Same shell as PreMatch but data source is live snapshots
|
||||
- Auto-refresh every `Scraping:PollingIntervalSeconds` (use a timer + state subscription
|
||||
pattern; do NOT poll the scraper directly — read from snapshot repo)
|
||||
- Visual indicator when odds change since last refresh (subtle pulse / arrow)
|
||||
- [ ] Create `Marathon.UI/Pages/Events/Detail.razor`:
|
||||
- Event header: sport icon, league, scheduled time, sides 1 & 2
|
||||
- Tabs: "Match" | "Period 1" | "Period 2" | ...
|
||||
- For each scope, show all bet types in a tabular layout
|
||||
- Charts panel: odds-over-time using Plotly.Blazor — three traces for Win-1/Draw/Win-2,
|
||||
secondary axis for handicap value
|
||||
- Snapshot history table beneath the chart
|
||||
- Excel export button (single event or full date range)
|
||||
- [ ] Create `Marathon.UI/Components/SportIcon.razor` — small SVG-based component with
|
||||
recognizable icons per sport (basketball, football, hockey, tennis, volleyball, etc.).
|
||||
- [ ] Create `Marathon.UI/Components/OddsCell.razor` — formats `OddsRate` with delta
|
||||
arrow (↑ green, ↓ red) when value changes from previous render.
|
||||
- [ ] Create `Marathon.UI/Components/OddsTimeline.razor` — wraps Plotly.Blazor with
|
||||
consistent theming and tooltip behavior.
|
||||
- [ ] Create `Marathon.UI/Components/ExportDialog.razor` — modal: pick `DateRange`,
|
||||
pick `ExportKind`, click Export → calls `ExportToExcelUseCase`. Show success toast
|
||||
with output file path.
|
||||
- [ ] State management: small `EventBrowsingState` service (singleton scoped to UI)
|
||||
holding active filters per page. Inject via DI in pages. No Redux/Fluxor — keep
|
||||
simple.
|
||||
- [ ] Add packages to `Marathon.UI`:
|
||||
- `Plotly.Blazor`
|
||||
- [ ] Update `Marathon.UI/Resources/SharedResource.{ru,en}.resx` with all new strings.
|
||||
Establish key naming convention from Phase 5 handoff notes.
|
||||
- [ ] Performance:
|
||||
- Virtualized rows for large event lists (`MudVirtualize` or `MudTable` virtual
|
||||
pagination)
|
||||
- Debounce filter inputs (300ms)
|
||||
- Memoize chart data — recompute only when snapshot list changes
|
||||
- [ ] Accessibility:
|
||||
- Table semantics with proper headers + ARIA labels
|
||||
- Keyboard navigation for row selection
|
||||
- Focus visible on all interactive elements
|
||||
- Charts include data table fallback for screen readers
|
||||
|
||||
## Files to Modify/Create
|
||||
|
||||
- `src/Marathon.UI/Pages/PreMatch/EventsList.razor`
|
||||
- `src/Marathon.UI/Pages/Live/LiveList.razor`
|
||||
- `src/Marathon.UI/Pages/Events/Detail.razor`
|
||||
- `src/Marathon.UI/Components/SportIcon.razor`, `OddsCell.razor`,
|
||||
`OddsTimeline.razor`, `ExportDialog.razor`
|
||||
- `src/Marathon.UI/Services/EventBrowsingState.cs`
|
||||
- `src/Marathon.UI/Resources/SharedResource.{ru,en}.resx` — append new keys
|
||||
- `src/Marathon.UI/Components/_Imports.razor` — register Plotly.Blazor
|
||||
- Tests: `tests/Marathon.UI.Tests/Pages/**`, `Components/**`
|
||||
|
||||
## Acceptance Criteria
|
||||
|
||||
- Compiles (Big Bang).
|
||||
- Live list visually conveys odds changes between refreshes.
|
||||
- Detail page chart renders 3 traces (Win-1/Draw/Win-2) with smooth interpolation
|
||||
and clear tooltip showing exact rate at any point in time.
|
||||
- Excel export from the dialog reaches `ExportToExcelUseCase` correctly.
|
||||
- Both RU and EN render correctly across all new UI.
|
||||
- Distinctive visual identity — implementer should follow frontend-design guidance.
|
||||
|
||||
## Notes
|
||||
|
||||
- The frontend-design skill content is provided to the agent in `FRONTEND_DESIGN_SKILL`.
|
||||
Apply its principles — typography, color, motion, spatial composition.
|
||||
- Use Plotly.Blazor for charts (smooth, themable, professional look).
|
||||
- Keep components small (<200 lines) and composable.
|
||||
- Big Bang: compile-only smoke check.
|
||||
|
||||
## Review Checklist
|
||||
|
||||
- [ ] Compiles
|
||||
- [ ] No mutation of domain types in UI components
|
||||
- [ ] Filters/sort persist within page session via `EventBrowsingState`
|
||||
- [ ] Chart accessible (data table fallback)
|
||||
- [ ] All new strings localized in RU + EN
|
||||
- [ ] Visual consistency with Phase 5 theme tokens
|
||||
|
||||
## Handoff to Next Phase
|
||||
|
||||
<!-- Filled by Phase 6 implementer. Phase 7 (anomaly detection UI) needs to know
|
||||
the table/card patterns established here so the anomaly feed is consistent. -->
|
||||
Reference in New Issue
Block a user