←
TRCKR-242
Created: 2025-12-10
•
Updated: 2025-12-16
Relationships
Loading...
Attachments
Loading...
Comments (1)
agent
·
2025-12-10
Implemented LED-style status indicator to replace 'Connected' text.
Changes made:
1. **CSS Updates** (server/templates/base.html:115-147):
- Replaced text-based status indicator with LED dot + text layout
- Added three states: connected (green), connecting (yellow), disconnected (red)
- Each state has a subtle glow effect using box-shadow
- Smooth transitions between states (0.3s ease)
2. **HTML Structure** (server/templates/base.html:1136-1139):
- Changed from simple text div to structured indicator with LED dot and status text
- LED is an 8px circular span with state-based styling
- Status text is smaller (11px) and muted color
- Tooltip shows state on hover
3. **JavaScript Updates** (server/templates/base.html:1205-1223, 1285):
- Enhanced updateStatus() function to handle three states (connected, connecting, disconnected)
- Updates both LED visual state and tooltip text
- Shows 'connecting' state during WebSocket connection attempts
- Updates status text element dynamically
Verification:
- Deployed to https://trckr.roboalch.com via ./scripts/deploy.sh
- Verified LED indicator displays in header with green dot and 'connected' text
- Visual glow effect confirmed in production
- Real-time state updates working via WebSocket connection manager