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
90 lines
2.1 KiB
Markdown
90 lines
2.1 KiB
Markdown
# Plan 03 Summary - Dashboard View
|
|
|
|
**Plan:** 03
|
|
**Phase:** 01-foundation-dashboard
|
|
**Completed:** 2026-03-13
|
|
|
|
---
|
|
|
|
## Tasks Completed
|
|
|
|
### Task 1: RainfallCard Component
|
|
- Created `src/app/components/RainfallCard.tsx`:
|
|
- Props: label, value, variant (today/hourly/monthly/yearly)
|
|
- Color-coded: Today (blue), Hourly (cyan), MAR (green), Yearly (purple)
|
|
- Large value display with unit
|
|
- CloudRain icon from Lucide
|
|
|
|
### Task 2: ClockDisplay Component
|
|
- Created `src/app/components/ClockDisplay.tsx`:
|
|
- Real-time clock (HH:MM:SS) updating every second
|
|
- Date display (YYYY-MM-DD)
|
|
- Proper cleanup on unmount
|
|
|
|
### Task 3: CommStatus Component
|
|
- Created `src/app/components/CommStatus.tsx`:
|
|
- Props: asu, dBm, percentage
|
|
- Color-coded signal quality indicator
|
|
- Shows: good (green), fair (yellow), poor (red)
|
|
|
|
### Task 4: RainfallView Dashboard
|
|
- Updated `src/app/components/views/RainfallView.tsx`:
|
|
- Uses sensor store for real-time data
|
|
- 4 rainfall cards in responsive grid
|
|
- ClockDisplay and CommStatus integrated
|
|
- Last update timestamp
|
|
|
|
### Task 5: Dual-Mode Responsive Layout
|
|
- Implemented port-based mode detection
|
|
- Kiosk (1024x600): 2-column grid, compact padding
|
|
- Remote (Full HD): 4-column grid, more spacing
|
|
|
|
---
|
|
|
|
## Files Created/Modified
|
|
|
|
| File | Status |
|
|
|------|--------|
|
|
| src/app/components/RainfallCard.tsx | Created |
|
|
| src/app/components/ClockDisplay.tsx | Created |
|
|
| src/app/components/CommStatus.tsx | Created |
|
|
| src/app/components/views/RainfallView.tsx | Modified |
|
|
|
|
---
|
|
|
|
## Component Usage
|
|
|
|
```tsx
|
|
// RainfallCard
|
|
<RainfallCard label="Today" value={12.5} variant="today" />
|
|
|
|
// ClockDisplay
|
|
<ClockDisplay />
|
|
|
|
// CommStatus
|
|
<CommStatus asu={15} dBm={-75} percentage={50} />
|
|
|
|
// In RainfallView
|
|
<RainfallCard
|
|
label={item.label}
|
|
value={item.value}
|
|
variant={item.variant}
|
|
/>
|
|
```
|
|
|
|
---
|
|
|
|
## Responsive Behavior
|
|
|
|
- **Kiosk (port 8080)**: 2-column grid, smaller padding
|
|
- **Remote (port 9090)**: 4-column grid, expanded layout
|
|
|
|
---
|
|
|
|
## Notes
|
|
|
|
- Dashboard updates in real-time from sensor store
|
|
- All components connect to Zustand store
|
|
- Dual-mode display responds to port number
|
|
- Touch-friendly with adequate hit areas
|