Start occupancy feature

src/app/components/detail-prochainspassages/detail-prochainspassages.component.html

@@ -67,6 +67,23 @@
 	</span>
 </ng-template>
 
+<ng-template #withOccupancy let-obj="obj" let-logo="logo">
+	<div class="layout align-center full-width">
+		<div [ngStyle]="{'background-color':'#'+obj.ligne?.color}" *ngIf="logo">
+			<app-logo-ligne [ligne]="obj.ligne" [height]="73" width="56"></app-logo-ligne>
+		</div>
+		<div class="flex layout align-center">
+			<mat-icon class="small-icon" *ngIf="logo && obj.ligne.mode === 'TRAM'">tram</mat-icon>
+			<mat-icon class="small-icon" *ngIf="logo && obj.ligne.mode === 'BUS'">directions_bus</mat-icon>
+			<span class="flex">
+				<span class="ellipsis item-name">{{ obj.name }}</span>
+			</span>
+		</div>
+		<ng-container *ngTemplateOutlet="times; context: { obj: obj }"></ng-container>
+	</div>
+	TODO
+</ng-template>
+
 <ng-template #unavailableLabel>
 	Données indisponible
 </ng-template>
@@ -82,7 +99,13 @@
 			</mat-expansion-panel>
 		</mat-accordion>
 	</ng-container>
-
+	<ng-container *ngIf="mode === 'with-occupancy'">
+		<div class="layout column">
+			<ng-container *ngFor="let obj of prochPassages">
+				<ng-container *ngTemplateOutlet="withOccupancy; context: {obj: obj, logo: showLogo}"></ng-container>
+			</ng-container>
+		</div>
+	</ng-container>
 	<ng-container *ngIf="mode === 'list-item'">
 		<mat-list class="no-padding--right">
 			<mat-list-item *ngFor="let obj of prochPassages">

src/app/components/detail-prochainspassages/detail-prochainspassages.component.ts

@@ -3,6 +3,9 @@ import { MatDialog } from '@angular/material/dialog';
 import { AppVisibilityService } from '@services/app-visibility.service';
 import { groupByField } from '@helpers/array.helper';
 import { RealtimeDataService } from '@features/realtime-data/realtime-data.service';
+import { NextStop } from '@features/realtime-data/realtime-data.model';
+import { takeUntil } from 'rxjs/operators';
+import { Subject } from 'rxjs';
 
 @Component({
 	selector: 'app-detail-prochainspassages',
@@ -14,11 +17,11 @@ export class DetailProchainspassagesComponent implements OnInit, OnDestroy {
 	@Input() avecAccordeon: any;
 	@Input() shouldBeUpdated = true;
 	@Input() showLogo = true;
-	@Input() mode: 'default' | 'list-item' | 'compact' | 'compact-unique' = 'default';
+	@Input() mode: 'default' | 'list-item' | 'compact' | 'compact-unique' | 'with-occupancy' = 'default';
 	@Output() nbreLignes: EventEmitter<number> = new EventEmitter<number>();
 	@Input() logoHeight: number;
 	@Input() displayTimes = true;
-	prochPassages = [];
+	prochPassages: NextStop[] = [];
 	prochPassagesCompact = [];
 	displayedColumns: string[] = ['logo', 'desc', 'timeone', 'timetwo'];
 	expandedElement: any;
@@ -28,6 +31,7 @@ export class DetailProchainspassagesComponent implements OnInit, OnDestroy {
 	private paused = false;
 	private _zoneArret: any;
 	intervalId;
+	unsubscriber = new Subject<void>();
 
 
 	@Input() set zoneArret(obj: any) {
@@ -54,7 +58,7 @@ export class DetailProchainspassagesComponent implements OnInit, OnDestroy {
 	) { }
 
 	ngOnInit() {
-		this.appVisibilityService.visibility$.subscribe((visible) => {
+		this.appVisibilityService.visibility$.pipe(takeUntil(this.unsubscriber)).subscribe((visible) => {
 			if (!visible && this.intervalId) {
 				clearInterval(this.intervalId);
 			} else {
@@ -72,10 +76,10 @@ export class DetailProchainspassagesComponent implements OnInit, OnDestroy {
 		this.realtimeDataService.getStoptimes(this.zoneArret.type, this.zoneArret.code, lineIds).subscribe(res => {
 			const nbEltToDisplay = 2;
 			if (this.shouldBeUpdated) {
-				const passages = groupByField(this.realtimeDataService.parseResultPP(res, nbEltToDisplay), 'ligne.id');
+				const passages: NextStop[] = groupByField(this.realtimeDataService.parseResultPP(res, nbEltToDisplay), 'ligne.id');
 				// Add/Update objects instead of replace the entire list.
 				passages.forEach((passage: any) => {
-					const p = this.prochPassages.find((pp: any) => passage.id === pp.id);
+					const p: NextStop = this.prochPassages.find((pp) => passage.id === pp.id);
 					if (!p) {
 						passage.opened = false;
 						this.prochPassages.push(passage);
@@ -93,6 +97,12 @@ export class DetailProchainspassagesComponent implements OnInit, OnDestroy {
 				if (this.prochPassages.length === 0) {
 					this.unavailable = true;
 				}
+
+				// Set the stopId property from the time values.
+				this.prochPassages.forEach(passage => {
+					passage.stopId = passage.time.map(p => p.stopId).reduce((acc, p) => p, '');
+				});
+
 				if (this.mode === 'compact-unique' && this.lines) {
 					this.prochPassages = this.prochPassages.filter(proch => {
 						return proch.ligne.id === this.lines[0].id;
@@ -118,6 +128,8 @@ export class DetailProchainspassagesComponent implements OnInit, OnDestroy {
 		if (this.intervalId) {
 			clearInterval(this.intervalId);
 		}
+		this.unsubscriber.next();
+		this.unsubscriber.complete();
 	}
 
 

src/app/features/occupancy/occupancy.model.ts

+export interface StopOccupancy {
+	timeSlots: string[];
+	currentTimeSlot: number;
+	occupancy: Occupancy;
+}
+
+export interface Occupancy {
+	routeDirection: { [key: string]: number };
+}

src/app/features/occupancy/occupancy.service.ts

+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { domain } from '@helpers/domain.helpers';
+import { StopOccupancy } from './occupancy.model';
+import { Observable } from 'rxjs';
+
+@Injectable({
+	providedIn: 'root'
+})
+export class OccupancyService {
+
+	constructor(private http: HttpClient) { }
+
+	getOccupancy(stopId: string): Observable<StopOccupancy> {
+		return this.http.get<StopOccupancy>(`${domain}/api/stops/${stopId}/occupancy/json`);
+	}
+}

src/app/features/realtime-data/realtime-data.model.ts

@@ -36,4 +36,5 @@ export interface NextStop {
 	time: Time[];
 	id: string;
 	city: string;
+	stopId?: string;
 }

src/app/pages/detail-ligne/detail-ligne.component.html

@@ -51,7 +51,7 @@
 						</mat-panel-title>
 					</mat-expansion-panel-header>
 					<ng-template matExpansionPanelContent>
-						<app-detail-prochainspassages *ngIf="panel.expanded" mode="list-item" [showLogo]="false" [lines]="[ligne]" [zoneArret]="arret">
+						<app-detail-prochainspassages *ngIf="panel.expanded" mode="with-occupancy" [showLogo]="false" [lines]="[ligne]" [zoneArret]="arret">
 						</app-detail-prochainspassages>
 					</ng-template>
 				</mat-expansion-panel>