diff --git a/ui/README.md b/ui/README.md index 144b84c..654d9d2 100644 --- a/ui/README.md +++ b/ui/README.md @@ -1,27 +1,116 @@ -# Dashboard +# PI_E2EEDA - Angular Dashboard -This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.0.2. +Angular 18 dashboard for real-time air quality visualization. -## Development server +## Quick Start +```bash +# Install dependencies +npm install -Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. +# Start dev server +npm start +# http://localhost:4200 -## Code scaffolding +# Build for production +npm run build +# dist/dashboard/ +``` -Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. +## 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. +``` -## Build +## 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) +``` -Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. +## Technologies -## Running unit tests +- **Angular**: 18.2.x +- **TypeScript**: 5.4.x +- **RxJS**: 7.8.x +- **Chart.js**: 4.4.x +- **Angular Material**: 18.2.x -Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). +## Environments -## Running end-to-end tests +### Development +- API: `http://localhost:8080` +- WebSocket: `ws://localhost:8080` -Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. +### Production +- API: `https://e2eeda.hes-so.ch/api` +- WebSocket: `wss://e2eeda.hes-so.ch/ws` -## Further help +## Conventions -To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page. +- 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 +``` diff --git a/ui/src/app/components/README.md b/ui/src/app/components/README.md new file mode 100644 index 0000000..aac3176 --- /dev/null +++ b/ui/src/app/components/README.md @@ -0,0 +1,17 @@ +# Components + +Angular components for the user interface. + +## Structure + +- **room-map/** : Interactive 2D SVG map displaying rooms +- **room-details-panel/** : Side panel with detailed room information +- **header/** : Application header (title, navigation) +- **legend/** : CO2 color legend +- **footer/** : Footer (optional) + +## Conventions + +- All components are **standalone** +- Change detection: **OnPush** by default +- Naming: kebab-case (e.g., `room-map`) diff --git a/ui/src/app/directives/.gitkeep b/ui/src/app/directives/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/ui/src/app/directives/README.md b/ui/src/app/directives/README.md new file mode 100644 index 0000000..807995c --- /dev/null +++ b/ui/src/app/directives/README.md @@ -0,0 +1,12 @@ +# Directives + +Custom directives for reusable DOM behaviors. + +## Planned Directives + +- (To be defined based on needs) + +## Conventions + +- Naming: kebab-case with `.directive.ts` suffix +- Standalone: true diff --git a/ui/src/app/guards/.gitkeep b/ui/src/app/guards/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/ui/src/app/guards/README.md b/ui/src/app/guards/README.md new file mode 100644 index 0000000..62e2062 --- /dev/null +++ b/ui/src/app/guards/README.md @@ -0,0 +1,12 @@ +# Guards + +Route guards for route protection (if auth needed in the future). + +## Planned Guards + +- **auth.guard.ts** : Check authentication (future) + +## Conventions + +- Naming: kebab-case with `.guard.ts` suffix +- Type: Functional guards (Angular 18 style) diff --git a/ui/src/app/interceptors/.gitkeep b/ui/src/app/interceptors/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/ui/src/app/interceptors/README.md b/ui/src/app/interceptors/README.md new file mode 100644 index 0000000..d3f16b8 --- /dev/null +++ b/ui/src/app/interceptors/README.md @@ -0,0 +1,14 @@ +# Interceptors + +HTTP interceptors for request/response transformation. + +## Planned Interceptors + +- **auth.interceptor.ts** : Add JWT token (future) +- **error.interceptor.ts** : Global HTTP error handling +- **logging.interceptor.ts** : Log requests (dev only) + +## Conventions + +- Naming: kebab-case with `.interceptor.ts` suffix +- Type: Functional interceptors (Angular 18 style) diff --git a/ui/src/app/models/.gitkeep b/ui/src/app/models/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/ui/src/app/models/README.md b/ui/src/app/models/README.md new file mode 100644 index 0000000..19a0d4d --- /dev/null +++ b/ui/src/app/models/README.md @@ -0,0 +1,16 @@ +# Models + +TypeScript interfaces for data typing. + +## Planned Models + +- **room.model.ts** : Room interface (id, name, coordinates) +- **room-data.model.ts** : RoomData interface (co2, temp, humidity) +- **sensor.model.ts** : Sensor interface +- **notification.model.ts** : Notification interface + +## Conventions + +- Naming: kebab-case with `.model.ts` suffix +- Export: `export interface RoomData { ... }` +- Documentation: JSDoc for each property diff --git a/ui/src/app/pipes/.gitkeep b/ui/src/app/pipes/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/ui/src/app/pipes/README.md b/ui/src/app/pipes/README.md new file mode 100644 index 0000000..c7f67b6 --- /dev/null +++ b/ui/src/app/pipes/README.md @@ -0,0 +1,13 @@ +# Pipes + +Custom pipes for data transformation in templates. + +## Planned Pipes + +- **co2-level.pipe.ts** : Transform CO2 ppm → level (excellent/good/poor) +- **relative-time.pipe.ts** : Transform timestamp → "5 minutes ago" + +## Conventions + +- Naming: kebab-case with `.pipe.ts` suffix +- Standalone: true diff --git a/ui/src/app/services/.gitkeep b/ui/src/app/services/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/ui/src/app/services/README.md b/ui/src/app/services/README.md new file mode 100644 index 0000000..58ffa67 --- /dev/null +++ b/ui/src/app/services/README.md @@ -0,0 +1,16 @@ +# Services + +Angular services for business logic and API communication. + +## Planned Services + +- **analytics.service.ts** : Backend communication (REST API) +- **websocket.service.ts** : Real-time communication (WebSocket) +- **room-data.service.ts** : Room state management +- **notification.service.ts** : Toast/snackbar display + +## Conventions + +- Naming: camelCase with `.service.ts` suffix +- Injectable: `providedIn: 'root'` +- RxJS: Use Observables for data streams diff --git a/ui/src/app/utils/.gitkeep b/ui/src/app/utils/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/ui/src/app/utils/README.md b/ui/src/app/utils/README.md new file mode 100644 index 0000000..09edce1 --- /dev/null +++ b/ui/src/app/utils/README.md @@ -0,0 +1,15 @@ +# Utils + +Pure utility functions (helpers). + +## Planned Utils + +- **co2-helpers.ts** : CO2 level calculation functions +- **color-helpers.ts** : Color generation functions +- **date-helpers.ts** : Date manipulation functions + +## Conventions + +- Naming: kebab-case with `.ts` suffix +- Export: Named exports of pure functions +- Tests: Each util must have a .spec.ts file