feat: Phase 1 Foundation & Dashboard implementation
- Core infrastructure: Zustand store, API client with mock fallback - Mode detection: Port 8080 (kiosk) / 9090 (remote) - Dashboard components: RainfallCard, ClockDisplay, CommStatus - Header components: VoltageDisplay, BatteryStatus, LoginIndicator - Data polling with visibility awareness - Bundle size: ~100KB gzipped Also adds README.md and WIKI.md documentation
This commit is contained in:
73
.planning/phases/01-foundation-dashboard/01-01-SUMMARY.md
Normal file
73
.planning/phases/01-foundation-dashboard/01-01-SUMMARY.md
Normal file
@@ -0,0 +1,73 @@
|
||||
# Plan 01 Summary - Core Infrastructure
|
||||
|
||||
**Plan:** 01
|
||||
**Phase:** 01-foundation-dashboard
|
||||
**Completed:** 2026-03-13
|
||||
|
||||
---
|
||||
|
||||
## Tasks Completed
|
||||
|
||||
### Task 1: Test Infrastructure
|
||||
- Created `vitest.config.ts` - Vitest configuration extending Vite
|
||||
- Created `src/test/setup.ts` - Test utilities and mocks
|
||||
- Added test scripts to `package.json`
|
||||
- Installed test dependencies: vitest, @testing-library/react, @testing-library/jest-dom, jsdom
|
||||
|
||||
### Task 2: Zustand Sensor Store
|
||||
- Created `src/app/stores/sensorStore.ts`:
|
||||
- SensorData interface with rainfall, voltage, station, communication types
|
||||
- useSensorStore hook with actions: setSensorData, updatePollingInterval, setIsPolling, setError
|
||||
- Selectors: selectRainfall, selectVoltage, selectStation, selectCommunication, selectTimestamp
|
||||
|
||||
### Task 3: API Client with Mock Fallback
|
||||
- Created `src/app/api/client.ts`:
|
||||
- fetchSensorData function with timeout and AbortController support
|
||||
- generateMockSensorData for realistic mock data
|
||||
- Automatic fallback to mock data on API failure
|
||||
|
||||
### Task 4: Port-based Mode Detection
|
||||
- Created `src/app/hooks/useDisplayMode.ts`:
|
||||
- useDisplayMode hook returning 'kiosk' or 'remote'
|
||||
- Port 8080 → kiosk, Port 9090 → remote
|
||||
- Updated `src/app/App.tsx` to use display mode and initialize polling
|
||||
|
||||
### Task 5: Data Polling with Cleanup
|
||||
- Created `src/app/hooks/useSensorPolling.ts`:
|
||||
- Configurable polling interval (default 5 seconds)
|
||||
- Page Visibility API support (pause when hidden)
|
||||
- Proper cleanup with AbortController
|
||||
- Start/stop/refresh controls
|
||||
|
||||
---
|
||||
|
||||
## Files Created/Modified
|
||||
|
||||
| File | Status |
|
||||
|------|--------|
|
||||
| src/app/stores/sensorStore.ts | Created |
|
||||
| src/app/api/client.ts | Created |
|
||||
| src/app/hooks/useDisplayMode.ts | Created |
|
||||
| src/app/hooks/useSensorPolling.ts | Created |
|
||||
| src/app/App.tsx | Modified |
|
||||
| src/test/setup.ts | Created |
|
||||
| vitest.config.ts | Created |
|
||||
| package.json | Modified |
|
||||
|
||||
---
|
||||
|
||||
## Bundle Size
|
||||
|
||||
- JS: 325KB uncompressed, 99KB gzipped
|
||||
- CSS: 92KB uncompressed, 15KB gzipped
|
||||
|
||||
**Status:** Under 200KB limit (gzipped) ✓
|
||||
|
||||
---
|
||||
|
||||
## Notes
|
||||
|
||||
- Mock data generation creates realistic values for testing
|
||||
- API client gracefully falls back to mock data
|
||||
- Polling pauses when tab is hidden to save resources
|
||||
- Mode detection enables responsive/kiosk layouts
|
||||
Reference in New Issue
Block a user