Merge branch 'master' of gitlab.com:kranklyboy/webapptemplate
This commit is contained in:
commit
4fcadeec62
@ -1,26 +1,29 @@
|
|||||||
<agm-map disableDefaultUI="true" id="map" #map [zoom]="zoom" [latitude]="center.lat" [longitude]="center.lng">
|
<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"
|
<agm-marker (markerClick)="openInfoWindow(m.value.carEntity.vin)" [openInfoWindow]="true"
|
||||||
[latitude]="m.value.lat" [longitude]="m.value.lng" [animation]="(m.value.near_crash_event)?'BOUNCE':''">
|
*ngFor="let m of car_markers | keyvalue" [iconUrl]="getIconUrlCar(m.value.carEvent.near_crash_event)"
|
||||||
<agm-info-window style="opacity: 0.5!important;" (infoWindowClose)="closeInfoWindow(m.value.vin)"
|
[latitude]="m.value.carEvent.gps_location.latitude" [longitude]="m.value.carEvent.gps_location.longitude" [animation]="(m.value.carEvent.near_crash_event)?'BOUNCE':''">
|
||||||
[isOpen]="isInfoWindowOpen(m.value.vin)" [latitude]="m.value.lat"
|
<agm-info-window style="opacity: 0.5!important;" (infoWindowClose)="closeInfoWindow(m.value.carEntity.vin)"
|
||||||
[longitude]="m.value.lng">
|
[isOpen]="isInfoWindowOpen(m.value.carEntity.vin)" [latitude]="m.value.carEvent.gps_location.latitude"
|
||||||
<p>VIN: {{m.value.vin}}</p>
|
[longitude]="m.value.carEvent.gps_location.longitude">
|
||||||
<p>OEM: {{m.value.oem}}</p>
|
<p>VIN: {{m.value.carEntity.vin}}</p>
|
||||||
<p>Model Type: {{m.value.modelType}}</p>
|
<p>OEM: {{m.value.carEntity.oem}}</p>
|
||||||
<p>Velocity: {{m.value.velocity}}</p>
|
<p>Model Type: {{m.value.carEntity.modelType}}</p>
|
||||||
<p>Timestamp: {{m.value.timestamp}}</p>
|
<p>Velocity: {{m.value.carEvent.velocity}}</p>
|
||||||
<p>NCE: {{m.value.near_crash_event}}</p>
|
<p>Timestamp: {{m.value.carEvent.timestamp}}</p>
|
||||||
|
<p>NCE: {{m.value.carEvent.near_crash_event}}</p>
|
||||||
</agm-info-window>
|
</agm-info-window>
|
||||||
</agm-marker>
|
</agm-marker>
|
||||||
<agm-marker *ngFor="let m of traffic_light_markers | keyvalue" [iconUrl]="m.value.iconUrl"
|
|
||||||
[latitude]="m.value.lat" [longitude]="m.value.lng">
|
<agm-marker *ngFor="let m of traffic_light_markers | keyvalue" [iconUrl]="trafficLightToImage(m.value.trafficLightEvent.color)"
|
||||||
|
[latitude]="m.value.trafficLightEntity.location[1]" [longitude]="m.value.trafficLightEntity.location[0]">
|
||||||
<agm-info-window>
|
<agm-info-window>
|
||||||
<p>Id: {{m.value.id}}</p>
|
<p>Id: {{m.value.trafficLightEntity.id}}</p>
|
||||||
<p>Switching Time: {{m.value.switchingTime}}</p>
|
<p>Switching Time: {{m.value.trafficLightEntity.switchingTime}}</p>
|
||||||
<p>Range: {{m.value.range}}</p>
|
<p>Range: {{m.value.trafficLightEntity.range}}</p>
|
||||||
<p>Color: {{m.value.color}}</p>
|
<p>Color: {{m.value.trafficLightEvent.color}}</p>
|
||||||
<p>Last Switch: {{m.value.last_switch}}</p>
|
<p>Last Switch: {{m.value.trafficLightEvent.last_switch}}</p>
|
||||||
</agm-info-window>
|
</agm-info-window>
|
||||||
</agm-marker>
|
</agm-marker>
|
||||||
|
|
||||||
</agm-map>
|
</agm-map>
|
||||||
|
|||||||
@ -4,6 +4,13 @@ import {RestService} from '../../services/rest.service';
|
|||||||
import {NGXLogger} from 'ngx-logger';
|
import {NGXLogger} from 'ngx-logger';
|
||||||
import {interval, Subscription} from 'rxjs';
|
import {interval, Subscription} from 'rxjs';
|
||||||
import {startWith, switchMap} from 'rxjs/operators';
|
import {startWith, switchMap} from 'rxjs/operators';
|
||||||
|
import {
|
||||||
|
Car,
|
||||||
|
CarEntity,
|
||||||
|
CarEvent,
|
||||||
|
GeoCoordinates, TrafficLight,
|
||||||
|
TrafficLightEntity, TrafficLightEvent
|
||||||
|
} from '../../interfaces/interface';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-landing',
|
selector: 'app-landing',
|
||||||
@ -24,7 +31,6 @@ export class LandingComponent implements OnInit {
|
|||||||
zoom = 14;
|
zoom = 14;
|
||||||
center = {lat: 47.90620, lng: 16.20785};
|
center = {lat: 47.90620, lng: 16.20785};
|
||||||
|
|
||||||
|
|
||||||
traffic_light_markers = new Map();
|
traffic_light_markers = new Map();
|
||||||
car_markers = new Map();
|
car_markers = new Map();
|
||||||
infoWindows = new Map();
|
infoWindows = new Map();
|
||||||
@ -49,25 +55,15 @@ export class LandingComponent implements OnInit {
|
|||||||
startWith(0),
|
startWith(0),
|
||||||
switchMap(() => this.restService.getCarEvents(vin))
|
switchMap(() => this.restService.getCarEvents(vin))
|
||||||
).subscribe((data: any) => {
|
).subscribe((data: any) => {
|
||||||
const carEvent = data.body['cursor'];
|
const carEvent = data.body as CarEvent;
|
||||||
const car = this.car_markers.get(vin);
|
const car = this.car_markers.get(vin) as Car;
|
||||||
car['velocity'] = carEvent['velocity'];
|
car.carEvent = carEvent;
|
||||||
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'];
|
|
||||||
this.car_markers.set(car['vin'], car);
|
this.car_markers.set(car['vin'], car);
|
||||||
|
|
||||||
},
|
},
|
||||||
err => this.logger.error(err),
|
err => this.logger.error(err),
|
||||||
() => {
|
() => {
|
||||||
this.logger.debug('loaded traffic light events');
|
this.logger.debug('loaded car events');
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -80,13 +76,10 @@ export class LandingComponent implements OnInit {
|
|||||||
switchMap(() => this.restService.getTrafficLightEvents(tlid))
|
switchMap(() => this.restService.getTrafficLightEvents(tlid))
|
||||||
).subscribe(
|
).subscribe(
|
||||||
(data: any) => {
|
(data: any) => {
|
||||||
const traffic_light_event = data.body['cursor'];
|
const trafficLightEvent = data.body as TrafficLightEvent;
|
||||||
const traffic_light = this.traffic_light_markers.get(traffic_light_event['tlid']);
|
const trafficLight = this.traffic_light_markers.get(tlid) as TrafficLight;
|
||||||
traffic_light['color'] = traffic_light_event['color'];
|
trafficLight.trafficLightEvent = trafficLightEvent;
|
||||||
traffic_light['last_switch'] = traffic_light_event['last_switch'];
|
this.traffic_light_markers.set(tlid, trafficLight);
|
||||||
traffic_light['iconUrl'] = this.trafficLightToImage(traffic_light['color']);
|
|
||||||
|
|
||||||
this.traffic_light_markers.set(traffic_light_event['tlid'], traffic_light);
|
|
||||||
},
|
},
|
||||||
err => this.logger.error(err),
|
err => this.logger.error(err),
|
||||||
() => {
|
() => {
|
||||||
@ -97,19 +90,21 @@ export class LandingComponent implements OnInit {
|
|||||||
|
|
||||||
getTrafficLights() {
|
getTrafficLights() {
|
||||||
this.restService.getTrafficLights().subscribe(
|
this.restService.getTrafficLights().subscribe(
|
||||||
(data: any) => {
|
(data: TrafficLightEntity[]) => {
|
||||||
for (const traffic_light of data['cursor']) {
|
for (const trafficLightEntity of data) {
|
||||||
traffic_light['iconUrl'] = this.trafficLightToImage(traffic_light['color']);
|
|
||||||
traffic_light['lat'] = traffic_light['location'][1];
|
const trafficLight: TrafficLight = {
|
||||||
traffic_light['lng'] = traffic_light['location'][0];
|
trafficLightEntity: trafficLightEntity,
|
||||||
this.traffic_light_markers.set(traffic_light['id'], traffic_light);
|
trafficLightEvent: this.getEmptyTrafficLightEvent()
|
||||||
|
};
|
||||||
|
this.traffic_light_markers.set(trafficLightEntity['id'], trafficLight);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
err => this.logger.error(err),
|
err => this.logger.error(err),
|
||||||
() => {
|
() => {
|
||||||
this.logger.debug('loaded traffic lights');
|
this.logger.debug('loaded traffic lights');
|
||||||
for (const value of this.traffic_light_markers.values()) {
|
for (const value of this.traffic_light_markers.values()) {
|
||||||
this.getTrafficLightEvents(value['id']);
|
this.getTrafficLightEvents(value.trafficLightEntity['id']);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
@ -117,28 +112,39 @@ export class LandingComponent implements OnInit {
|
|||||||
|
|
||||||
getCars() {
|
getCars() {
|
||||||
this.restService.getCars().subscribe(
|
this.restService.getCars().subscribe(
|
||||||
(data: any) => {
|
(data: CarEntity[]) => {
|
||||||
for (const car of data['cursor']) {
|
for (const carEntity of data) {
|
||||||
car['iconUrl'] = 'assets/pictures/car.png';
|
const car: Car = {
|
||||||
this.car_markers.set(car['vin'], car);
|
carEntity: carEntity,
|
||||||
|
carEvent: this.getEmptyCarEvent()
|
||||||
|
};
|
||||||
|
this.car_markers.set(carEntity['vin'], car);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
err => this.logger.error(err),
|
err => this.logger.error(err),
|
||||||
() => {
|
() => {
|
||||||
this.logger.debug('loaded cars');
|
this.logger.debug('loaded cars');
|
||||||
console.log(this.car_markers);
|
|
||||||
for (const value of this.car_markers.values()) {
|
for (const value of this.car_markers.values()) {
|
||||||
this.getCarEvents(value['vin']);
|
this.getCarEvents(value.carEntity['vin']);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
private trafficLightToImage(trafficLight) {
|
trafficLightToImage(trafficLight) {
|
||||||
return (trafficLight === 'RED') ? this.TL_RED_IMAGE : this.TL_GREEN_IMAGE;
|
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) {
|
openInfoWindow(id) {
|
||||||
this.infoWindows.set(id, true);
|
this.infoWindows.set(id, true);
|
||||||
}
|
}
|
||||||
@ -157,4 +163,28 @@ export class LandingComponent implements OnInit {
|
|||||||
audio.load();
|
audio.load();
|
||||||
audio.play();
|
audio.play();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private getEmptyGeoCoordinates(): GeoCoordinates {
|
||||||
|
return {
|
||||||
|
latitude: 0,
|
||||||
|
longitude: 0
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
private getEmptyCarEvent(): CarEvent {
|
||||||
|
return {
|
||||||
|
near_crash_event: false,
|
||||||
|
gps_location: this.getEmptyGeoCoordinates(),
|
||||||
|
timestamp: '',
|
||||||
|
velocity: 0
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
private getEmptyTrafficLightEvent(): TrafficLightEvent {
|
||||||
|
return {
|
||||||
|
last_switch: 0,
|
||||||
|
color: '',
|
||||||
|
tlid: 0
|
||||||
|
};
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -5,3 +5,45 @@ export interface WSEvents {
|
|||||||
error: Observable<Event>;
|
error: Observable<Event>;
|
||||||
close: 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;
|
||||||
|
velocity: Number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Car {
|
||||||
|
carEntity: CarEntity;
|
||||||
|
carEvent: CarEvent;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface TrafficLightEntity {
|
||||||
|
id: Number;
|
||||||
|
location: Number[];
|
||||||
|
range: Number;
|
||||||
|
switchingTime: Number;
|
||||||
|
color: String;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface TrafficLightEvent {
|
||||||
|
last_switch: Number;
|
||||||
|
color: String;
|
||||||
|
tlid: Number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface TrafficLight {
|
||||||
|
trafficLightEntity: TrafficLightEntity;
|
||||||
|
trafficLightEvent: TrafficLightEvent;
|
||||||
|
}
|
||||||
|
|||||||
@ -24,7 +24,7 @@ def get_cars_events():
|
|||||||
print("Is the EVENT_STORE_URL running and reachable?")
|
print("Is the EVENT_STORE_URL running and reachable?")
|
||||||
raise e
|
raise e
|
||||||
|
|
||||||
return json_util.dumps({'cursor': cars})
|
return json_util.dumps(cars)
|
||||||
|
|
||||||
|
|
||||||
@app.route('/api/v1/resources/traffic_light_events', methods=['GET'])
|
@app.route('/api/v1/resources/traffic_light_events', methods=['GET'])
|
||||||
@ -39,7 +39,7 @@ def get_traffic_light_events():
|
|||||||
print("Is the EVENT_STORE_URL running and reachable?")
|
print("Is the EVENT_STORE_URL running and reachable?")
|
||||||
raise e
|
raise e
|
||||||
|
|
||||||
return json_util.dumps({'cursor': traffic_lights})
|
return json_util.dumps(traffic_lights)
|
||||||
|
|
||||||
|
|
||||||
@app.route('/api/v1/resources/cars', methods=['GET'])
|
@app.route('/api/v1/resources/cars', methods=['GET'])
|
||||||
@ -52,7 +52,7 @@ def get_cars():
|
|||||||
print("Is the entity_ident_server running and reachable?")
|
print("Is the entity_ident_server running and reachable?")
|
||||||
raise e
|
raise e
|
||||||
|
|
||||||
return json_util.dumps({'cursor': cars})
|
return json_util.dumps(cars)
|
||||||
|
|
||||||
|
|
||||||
@app.route('/api/v1/resources/traffic_lights', methods=['GET'])
|
@app.route('/api/v1/resources/traffic_lights', methods=['GET'])
|
||||||
@ -65,7 +65,7 @@ def get_traffic_lights():
|
|||||||
print("Is the entity_ident_server running and reachable?")
|
print("Is the entity_ident_server running and reachable?")
|
||||||
raise e
|
raise e
|
||||||
|
|
||||||
return json_util.dumps({'cursor': traffic_lights})
|
return json_util.dumps(traffic_lights)
|
||||||
|
|
||||||
|
|
||||||
if __name__ == '__main__':
|
if __name__ == '__main__':
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user