admin
9e3cc99bed
- 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
2.2 KiB
2.2 KiB
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.tsxto 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