Files
MSE-PI-E2EEDA-Plein-de-eeee…/ui/README.md
khalil-bot 3b803da147 fix(ui): address code review feedback
- Fix CI: remove redundant push trigger, keep only pull_request on main
- Fix CI: remove continue-on-error on lint and test steps
- Fix accessibility: wrap h1 routerLink in <a> element in header
- Fix reactivity: use paramMap observable instead of route.snapshot
- Extract CO2 thresholds to co2-levels.config.ts
- Fix environment.template.ts comment to English
- Fix wsUrl in environment.ts to include /ws path
- Fix production URLs: hes-so.ch -> ui.e.kb28.ch
- Fix README: align Models convention with kebab-case .model.ts suffix
- Remove redundant .gitkeep files from directories with README.md
2026-04-15 19:51:44 +02:00

117 lines
2.4 KiB
Markdown

# PI_E2EEDA - Angular Dashboard
Angular 18 dashboard for real-time air quality visualization.
## Quick Start
```bash
# 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
```bash
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.ts` suffix (`room-data.model.ts`)
- Standalone components only
- Signals for state management
## Tests
```bash
# Unit tests
npm test
# Coverage
npm run test:coverage
# coverage/index.html
```
## Build & Deploy
```bash
# 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:**
```bash
# Proxy configured in angular.json for /api
# Or add to package.json:
"start": "ng serve --proxy-config proxy.conf.json"
```
**WebSocket connection failed:**
```typescript
// Check URL in environment.ts
wsUrl: 'ws://localhost:8080/ws' // port can change
```