809ba438e2
Folder Structure: - components/ : UI components (room-map, details-panel, header, legend, footer) - services/ : Business logic and API communication - models/ : TypeScript interfaces for data typing - guards/ : Route guards for authentication (future) - interceptors/ : HTTP interceptors for request/response handling - pipes/ : Custom pipes for data transformation - directives/ : Custom directives for DOM behaviors - utils/ : Pure utility functions and helpers Documentation: - Added README.md in each folder documenting: - Folder purpose and planned contents - Naming conventions - Usage examples This structure follows Angular best practices and supports: - Standalone components (Angular 18) - Clean separation of concerns - Scalable architecture - Easy navigation with path aliases (@models, @services, etc.) Closes #25
117 lines
2.4 KiB
Markdown
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`
|
|
|
|
### Production
|
|
- API: `https://e2eeda.hes-so.ch/api`
|
|
- WebSocket: `wss://e2eeda.hes-so.ch/ws`
|
|
|
|
## Conventions
|
|
|
|
- Components: kebab-case (`room-map`)
|
|
- Services: camelCase with suffix (`analytics.service.ts`)
|
|
- Models: PascalCase (`RoomData.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
|
|
```
|