3.2 KiB
3.2 KiB
| id | title | status | assignee | created_date | labels | dependencies | priority | ||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| TASK-4 | Add zoom views, view switcher, demo data, and map transit lines to demo.rcal.online | Done |
|
2026-02-25 23:28 |
|
high |
Description
Implement fluid calendar zoom with dedicated views for each temporal granularity, add a view switcher toolbar, populate the demo app with realistic sample data, and render transit lines between event locations on the map.
Acceptance Criteria
- #1 Zoom in/out cycles through Day → Week → Month → Season → Year → Decade with distinct views for each
- #2 DayView renders 24h time grid with positioned events and now-indicator
- #3 WeekView renders 7-column time grid with events per day
- #4 ViewSwitcher icon bar in header allows direct jump to any view
- #5 All views fit same container form factor (h-full flex-col) with opt-in fullscreen via FullscreenToggle
- #6 YearView defaults to compact grid (not auto-fullscreen portal)
- #7 Demo page seeded with ~40 realistic events across 5 months with real GPS coordinates
- #8 Events span Berlin, Amsterdam, Munich, Paris, Prague, Lisbon, Barcelona, Brussels
- #9 4 demo calendar sources: Work (blue), Travel (orange), Personal (green), Conferences (purple)
- #10 Map draws dashed transit polylines between chronologically ordered events at different locations
- #11 Travel-source transit lines render in orange, others in gray
- #12 EventListItem type extended with latitude/longitude/coordinates fields
- #13 CSS fade transition between view switches
- #14 Code pushed to both dev and main branches
Final Summary
Calendar Zoom Views, Demo Data & Map Transit
New Components
- DayView — 24h time grid with event positioning, all-day section, red now-indicator
- WeekView — 7-day column layout with hourly grid, click-to-zoom-to-day
- ViewSwitcher — Icon toolbar (Day/Week/Month/Season/Year/Decade) in CalendarHeader
- FullscreenToggle — Reusable portal wrapper for opt-in fullscreen on any view
- DemoDataSeeder — Pre-populates React Query cache with demo events
- TransitLines — Draws dashed polylines between event locations on SpatioTemporalMap
Modified Components
- TemporalTab/SpatialTab — Route each granularity to its dedicated view (was falling through to MonthView)
- MonthView/SeasonView — Normalized to h-full flex-col container pattern
- YearView — Default changed from fullscreen portal to inline compact; glance mode now inline too
- SpatioTemporalMap — Added TransitLines component, simplified EventMarkers type casts
- EventListItem — Extended with latitude/longitude/coordinates/location_breadcrumb fields
Demo Data
~40 events across 5 months covering work meetings, train/flight travel, conferences, and personal activities across 8 European cities with real GPS coordinates.
Commit
cd7f4adfeat: add Day/Week views, view switcher, demo data with map transit lines