Commit 17b1c9bf authored by Léonard Treille's avatar Léonard Treille
Browse files

Start occupancy feature

parent 8fecb5fa
......@@ -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">
......
......@@ -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();
}
......
export interface StopOccupancy {
timeSlots: string[];
currentTimeSlot: number;
occupancy: Occupancy;
}
export interface Occupancy {
routeDirection: { [key: string]: number };
}
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`);
}
}
......@@ -36,4 +36,5 @@ export interface NextStop {
time: Time[];
id: string;
city: string;
stopId?: string;
}
......@@ -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>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment