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
74 lines
2.2 KiB
Markdown
74 lines
2.2 KiB
Markdown
# 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
|