Refactors control center for cars

This commit is contained in:
David Eder 2021-06-13 16:21:23 +02:00
parent 9d4727d681
commit 67b74e93c5
4 changed files with 75 additions and 35 deletions

View File

@ -1,16 +1,16 @@
<agm-map disableDefaultUI="true" id="map" #map [zoom]="zoom" [latitude]="center.lat" [longitude]="center.lng">
<agm-marker (markerClick)="openInfoWindow(m.value.vin)" [openInfoWindow]="true"
*ngFor="let m of car_markers | keyvalue" [iconUrl]="m.value.iconUrl"
[latitude]="m.value.lat" [longitude]="m.value.lng" [animation]="(m.value.near_crash_event)?'BOUNCE':''">
<agm-info-window style="opacity: 0.5!important;" (infoWindowClose)="closeInfoWindow(m.value.vin)"
[isOpen]="isInfoWindowOpen(m.value.vin)" [latitude]="m.value.lat"
[longitude]="m.value.lng">
<p>VIN: {{m.value.vin}}</p>
<p>OEM: {{m.value.oem}}</p>
<p>Model Type: {{m.value.modelType}}</p>
<p>Velocity: {{m.value.velocity}}</p>
<p>Timestamp: {{m.value.timestamp}}</p>
<p>NCE: {{m.value.near_crash_event}}</p>
<agm-marker (markerClick)="openInfoWindow(m.value.carEntity.vin)" [openInfoWindow]="true"
*ngFor="let m of car_markers | keyvalue" [iconUrl]="getIconUrlCar(m.value.carEvent.near_crash_event)"
[latitude]="m.value.carEvent.gps_location.latitude" [longitude]="m.value.carEvent.gps_location.longitude" [animation]="(m.value.carEvent.near_crash_event)?'BOUNCE':''">
<agm-info-window style="opacity: 0.5!important;" (infoWindowClose)="closeInfoWindow(m.value.carEntity.vin)"
[isOpen]="isInfoWindowOpen(m.value.carEntity.vin)" [latitude]="m.value.carEvent.lat"
[longitude]="m.value.carEvent.lng">
<p>VIN: {{m.value.carEntity.vin}}</p>
<p>OEM: {{m.value.carEntity.oem}}</p>
<p>Model Type: {{m.value.carEntity.modelType}}</p>
<p>Velocity: {{m.value.carEvent.velocity}}</p>
<p>Timestamp: {{m.value.carEvent.timestamp}}</p>
<p>NCE: {{m.value.carEvent.near_crash_event}}</p>
</agm-info-window>
</agm-marker>
<agm-marker *ngFor="let m of traffic_light_markers | keyvalue" [iconUrl]="m.value.iconUrl"

View File

@ -4,6 +4,7 @@ import {RestService} from '../../services/rest.service';
import {NGXLogger} from 'ngx-logger';
import {interval, Subscription} from 'rxjs';
import {startWith, switchMap} from 'rxjs/operators';
import {Car, CarEntity, CarEvent, GeoCoordinates} from '../../interfaces/interface';
@Component({
selector: 'app-landing',
@ -24,7 +25,6 @@ export class LandingComponent implements OnInit {
zoom = 14;
center = {lat: 47.90620, lng: 16.20785};
traffic_light_markers = new Map();
car_markers = new Map();
infoWindows = new Map();
@ -49,25 +49,15 @@ export class LandingComponent implements OnInit {
startWith(0),
switchMap(() => this.restService.getCarEvents(vin))
).subscribe((data: any) => {
const carEvent = data.body['cursor'];
const car = this.car_markers.get(vin);
car['velocity'] = carEvent['velocity'];
car['timestamp'] = carEvent['timestamp'];
car['near_crash_event'] = carEvent['near_crash_event'];
if (car['near_crash_event']) {
car['iconUrl'] = this.CAR_IMAGE_NCE;
this.playCrashSound();
} else {
car['iconUrl'] = this.CAR_IMAGE;
}
car['lat'] = carEvent['gps_location']['latitude'];
car['lng'] = carEvent['gps_location']['longitude'];
const carEvent = data.body as CarEvent;
const car = this.car_markers.get(vin) as Car;
car.carEvent = carEvent;
this.car_markers.set(car['vin'], car);
},
err => this.logger.error(err),
() => {
this.logger.debug('loaded traffic light events');
this.logger.debug('loaded car events');
}
);
}
@ -117,18 +107,22 @@ export class LandingComponent implements OnInit {
getCars() {
this.restService.getCars().subscribe(
(data: any) => {
for (const car of data['cursor']) {
car['iconUrl'] = 'assets/pictures/car.png';
this.car_markers.set(car['vin'], car);
(data: CarEntity[]) => {
for (const carEntity of data) {
const car: Car = {
carEntity: carEntity,
carEvent: this.getEmptyCarEvent()
};
car.carEntity = carEntity;
this.car_markers.set(carEntity['vin'], car);
}
},
err => this.logger.error(err),
() => {
this.logger.debug('loaded cars');
console.log(this.car_markers);
for (const value of this.car_markers.values()) {
this.getCarEvents(value['vin']);
this.getCarEvents(value.carEntity['vin']);
}
}
);
@ -139,6 +133,15 @@ export class LandingComponent implements OnInit {
return (trafficLight === 'RED') ? this.TL_RED_IMAGE : this.TL_GREEN_IMAGE;
}
getIconUrlCar(near_crash_event) {
if (near_crash_event === true) {
this.playCrashSound();
return this.CAR_IMAGE_NCE;
} else {
return this.CAR_IMAGE;
}
}
openInfoWindow(id) {
this.infoWindows.set(id, true);
}
@ -157,4 +160,19 @@ export class LandingComponent implements OnInit {
audio.load();
audio.play();
}
private getEmptyCarEvent() {
const geoCoordinates = {
latitude: 0,
longitude: 0
};
const carEvent = {
near_crash_event: false,
gps_location: geoCoordinates,
timestamp: ''
};
return carEvent;
}
}

View File

@ -5,3 +5,25 @@ export interface WSEvents {
error: Observable<Event>;
close: Observable<Event>;
}
export interface GeoCoordinates {
latitude: Number;
longitude: Number;
}
export interface CarEntity {
oem: String;
modelType: String;
vin: String;
}
export interface CarEvent {
near_crash_event: Boolean;
gps_location: GeoCoordinates;
timestamp: String;
}
export interface Car {
carEntity: CarEntity;
carEvent: CarEvent;
}

View File

@ -24,7 +24,7 @@ def get_cars_events():
print("Is the EVENT_STORE_URL running and reachable?")
raise e
return json_util.dumps({'cursor': cars})
return json_util.dumps(cars)
@app.route('/api/v1/resources/traffic_light_events', methods=['GET'])
@ -52,7 +52,7 @@ def get_cars():
print("Is the entity_ident_server running and reachable?")
raise e
return json_util.dumps({'cursor': cars})
return json_util.dumps(cars)
@app.route('/api/v1/resources/traffic_lights', methods=['GET'])