a465cba225
- Poll only rooms returned by /api/v1/rooms so calls are never wasted on sensor-less rooms; new rooms are picked up automatically after deploy - Replace timer(0, interval) with concat() for synchronous initial emission - Remove mock fallback from getLatestReadingForRoom / getHistoryForRoom so the UI reflects real API state instead of hiding errors with fake data - Add Basic-Auth interceptor and dev proxy (proxy.conf.json) for local dev - Replace hardcoded API credentials with __API_USERNAME__ / __API_PASSWORD__ placeholders for CI-time injection from GitHub Secrets - Add "Very Poor" CO2 level (1500-2000 ppm) to the 6-level scale - Update "No sensor installed" copy to "No data available currently" - Handle empty history state in room-details-panel Closes #30
PI_E2EEDA - Angular Dashboard
Angular 18 dashboard for real-time air quality visualization.
Quick Start
# Install dependencies
npm install
# Start dev server
npm start
# http://localhost:4200
# Build for production
npm run build
# dist/dashboard/
Structure
src/
├── app/
│ ├── components/ # UI Components
│ │ ├── room-map/ # Interactive 2D map
│ │ ├── room-details-panel/
│ │ ├── header/
│ │ └── legend/
│ ├── services/ # Angular services
│ │ ├── analytics.service.ts
│ │ └── websocket.service.ts
│ ├── models/ # TypeScript interfaces
│ ├── guards/ # Route guards
│ └── interceptors/ # HTTP interceptors
├── environments/ # Environment configs
└── assets/ # Images, fonts, etc.
Available Scripts
npm start # Dev server (port 4200)
npm run build # Production build
npm run lint # ESLint
npm run format # Prettier
npm test # Unit tests (Karma)
npm run e2e # E2E tests (Cypress)
Technologies
- Angular: 18.2.x
- TypeScript: 5.4.x
- RxJS: 7.8.x
- Chart.js: 4.4.x
- Angular Material: 18.2.x
Environments
Development
- API:
http://localhost:8080 - WebSocket:
ws://localhost:8080/ws
Production
- API:
https://ui.e.kb28.ch/api - WebSocket:
wss://ui.e.kb28.ch/ws
Conventions
- Components: kebab-case (
room-map) - Services: camelCase with suffix (
analytics.service.ts) - Models: kebab-case with
.model.tssuffix (room-data.model.ts) - Standalone components only
- Signals for state management
Tests
# Unit tests
npm test
# Coverage
npm run test:coverage
# coverage/index.html
Build & Deploy
# Production build
npm run build
# Output
dist/dashboard/
├── index.html
├── main.*.js
├── polyfills.*.js
└── styles.*.css
# Deploy (Docker)
docker build -t e2eeda/ui:latest .
docker run -p 80:80 e2eeda/ui:latest
Debugging
Common Issues
CORS errors:
# Proxy configured in angular.json for /api
# Or add to package.json:
"start": "ng serve --proxy-config proxy.conf.json"
WebSocket connection failed:
// Check URL in environment.ts
wsUrl: 'ws://localhost:8080/ws' // port can change