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
76 lines
1.9 KiB
Markdown
76 lines
1.9 KiB
Markdown
# Plan 02 Summary - Header & Voltage Components
|
|
|
|
**Plan:** 02
|
|
**Phase:** 01-foundation-dashboard
|
|
**Completed:** 2026-03-13
|
|
|
|
---
|
|
|
|
## Tasks Completed
|
|
|
|
### Task 1: VoltageDisplay Component
|
|
- Created `src/app/components/VoltageDisplay.tsx`:
|
|
- Props: label, voltage, className
|
|
- Displays voltage with one decimal place
|
|
- Uses Zap icon from Lucide
|
|
- Min-height 44px for touch targets
|
|
|
|
### Task 2: BatteryStatus Component
|
|
- Created `src/app/components/BatteryStatus.tsx`:
|
|
- Props: voltage, threshold (default 12.0V), className
|
|
- Shows color-coded status badge (HIGH/LOW)
|
|
- Green for >= 12V, Red for < 12V
|
|
- Touch-friendly (44px min)
|
|
|
|
### Task 3: Modernize Header Component
|
|
- Updated `src/app/components/Header.tsx`:
|
|
- Imports and uses sensor store
|
|
- Shows: logo, station ID, version, time, date
|
|
- Shows: solar voltage, battery voltage with status
|
|
- Shows: communication status (ASU/dBm/percentage)
|
|
- Shows: login status
|
|
- Clock updates every second with cleanup
|
|
|
|
### Task 4: Touch Target Verification
|
|
- All interactive elements have min-height 44px
|
|
- Verified in VoltageDisplay, BatteryStatus, Header
|
|
|
|
### Task 5: DashboardLayout Integration
|
|
- DashboardLayout already uses Header component
|
|
- Layout works correctly with sidebar
|
|
|
|
---
|
|
|
|
## Files Created/Modified
|
|
|
|
| File | Status |
|
|
|------|--------|
|
|
| src/app/components/VoltageDisplay.tsx | Created |
|
|
| src/app/components/BatteryStatus.tsx | Created |
|
|
| src/app/components/Header.tsx | Modified |
|
|
|
|
---
|
|
|
|
## Component Usage
|
|
|
|
```tsx
|
|
// VoltageDisplay
|
|
<VoltageDisplay label="Solar" voltage={12.5} />
|
|
|
|
// BatteryStatus
|
|
<BatteryStatus voltage={12.5} threshold={12.0} />
|
|
|
|
// In Header
|
|
<VoltageDisplay label="Solar" voltage={data.voltage.solar} />
|
|
<BatteryStatus voltage={data.voltage.battery} />
|
|
```
|
|
|
|
---
|
|
|
|
## Notes
|
|
|
|
- Components use Tailwind CSS classes
|
|
- Icons from Lucide React
|
|
- Touch targets meet 44px minimum requirement
|
|
- Status colors follow design guidelines (green/yellow/red)
|