Finalize project
This commit is contained in:
@@ -0,0 +1,10 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
const routes: Routes = [];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forRoot(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class AppRoutingModule { }
|
||||
@@ -0,0 +1,49 @@
|
||||
import {BrowserModule} from '@angular/platform-browser';
|
||||
import {NgModule} from '@angular/core';
|
||||
|
||||
import {AppRoutingModule} from './app-routing.module';
|
||||
import {LandingComponent} from './component/landing/landing.component';
|
||||
import {RestService} from './services/rest.service';
|
||||
import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http';
|
||||
import {InterceptorService} from './services/interceptor.service';
|
||||
import {LoggerModule, NgxLoggerLevel} from 'ngx-logger';
|
||||
import {environment} from '../environments/environment';
|
||||
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
|
||||
import {MatFormFieldModule} from '@angular/material/form-field';
|
||||
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
|
||||
import {MatButtonModule} from '@angular/material/button';
|
||||
import {MatInputModule} from '@angular/material/input';
|
||||
import {MatSlideToggleModule} from '@angular/material/slide-toggle';
|
||||
import {AgmCoreModule, GoogleMapsAPIWrapper} from '@agm/core';
|
||||
|
||||
@NgModule({
|
||||
declarations: [LandingComponent],
|
||||
imports: [
|
||||
ReactiveFormsModule,
|
||||
BrowserModule,
|
||||
BrowserAnimationsModule,
|
||||
AppRoutingModule,
|
||||
LoggerModule.forRoot({level: environment.log_level, serverLogLevel: NgxLoggerLevel.ERROR}),
|
||||
HttpClientModule,
|
||||
MatFormFieldModule,
|
||||
FormsModule,
|
||||
MatButtonModule,
|
||||
MatInputModule,
|
||||
MatSlideToggleModule,
|
||||
AgmCoreModule.forRoot({
|
||||
apiKey: 'AIzaSyCXF-INAlIkG9uPBofGLUCyHthaLxN-3PY',
|
||||
})
|
||||
],
|
||||
// enables injecting
|
||||
providers: [
|
||||
GoogleMapsAPIWrapper,
|
||||
RestService,
|
||||
{
|
||||
provide: HTTP_INTERCEPTORS, useClass: InterceptorService, multi: true
|
||||
},
|
||||
|
||||
],
|
||||
bootstrap: [LandingComponent]
|
||||
})
|
||||
export class AppModule {
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
#map{
|
||||
height : 100vh; width: 100%; padding:0px; margin: 0px;
|
||||
}
|
||||
+29
@@ -0,0 +1,29 @@
|
||||
<agm-map disableDefaultUI="true" id="map" #map [zoom]="zoom" [latitude]="center.lat" [longitude]="center.lng">
|
||||
|
||||
<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.gps_location.latitude"
|
||||
[longitude]="m.value.carEvent.gps_location.longitude">
|
||||
<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]="trafficLightToImage(m.value.trafficLightEvent.color)"
|
||||
[latitude]="m.value.trafficLightEntity.location[1]" [longitude]="m.value.trafficLightEntity.location[0]">
|
||||
<agm-info-window>
|
||||
<p>Id: {{m.value.trafficLightEntity.id}}</p>
|
||||
<p>Switching Time: {{m.value.trafficLightEntity.switchingTime}}</p>
|
||||
<p>Range: {{m.value.trafficLightEntity.range}}</p>
|
||||
<p>Color: {{m.value.trafficLightEvent.color}}</p>
|
||||
<p>Last Switch: {{m.value.trafficLightEvent.last_switch}}</p>
|
||||
</agm-info-window>
|
||||
</agm-marker>
|
||||
|
||||
</agm-map>
|
||||
+193
@@ -0,0 +1,193 @@
|
||||
import {Component, OnInit, ViewChild} from '@angular/core';
|
||||
import {AgmMap} from '@agm/core';
|
||||
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, TrafficLight,
|
||||
TrafficLightEntity, TrafficLightEvent
|
||||
} from '../../interfaces/interface';
|
||||
|
||||
@Component({
|
||||
selector: 'app-landing',
|
||||
templateUrl: './landing.component.html',
|
||||
styleUrls: ['./landing.component.css']
|
||||
})
|
||||
export class LandingComponent implements OnInit {
|
||||
|
||||
constructor(
|
||||
private restService: RestService,
|
||||
private logger: NGXLogger
|
||||
) {
|
||||
}
|
||||
|
||||
@ViewChild('map') map: AgmMap;
|
||||
|
||||
|
||||
zoom = 14;
|
||||
center = {lat: 47.90620, lng: 16.20785};
|
||||
|
||||
traffic_light_markers = new Map();
|
||||
car_markers = new Map();
|
||||
infoWindows = new Map();
|
||||
|
||||
timeInterval: Subscription;
|
||||
|
||||
TL_RED_IMAGE = 'assets/pictures/traffic_light_red.png';
|
||||
TL_GREEN_IMAGE = 'assets/pictures/traffic_light_green.png';
|
||||
CAR_IMAGE = 'assets/pictures/car.png';
|
||||
CAR_IMAGE_NCE = 'assets/pictures/car_orange.png';
|
||||
NCE_SOUND = 'assets/sound/crash.mp3';
|
||||
|
||||
ngOnInit() {
|
||||
this.getTrafficLights();
|
||||
this.getCars();
|
||||
}
|
||||
|
||||
|
||||
getCarEvents(vin) {
|
||||
this.timeInterval = interval(1000)
|
||||
.pipe(
|
||||
startWith(0),
|
||||
switchMap(() => this.restService.getCarEvents(vin))
|
||||
).subscribe((data: any) => {
|
||||
if (data.body === '') {
|
||||
return;
|
||||
}
|
||||
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 car events');
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
getTrafficLightEvents(tlid) {
|
||||
|
||||
this.timeInterval = interval(1000)
|
||||
.pipe(
|
||||
startWith(0),
|
||||
switchMap(() => this.restService.getTrafficLightEvents(tlid))
|
||||
).subscribe(
|
||||
(data: any) => {
|
||||
const trafficLightEvent = data.body as TrafficLightEvent;
|
||||
const trafficLight = this.traffic_light_markers.get(tlid) as TrafficLight;
|
||||
trafficLight.trafficLightEvent = trafficLightEvent;
|
||||
this.traffic_light_markers.set(tlid, trafficLight);
|
||||
},
|
||||
err => this.logger.error(err),
|
||||
() => {
|
||||
this.logger.debug('loaded traffic light events');
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
getTrafficLights() {
|
||||
this.restService.getTrafficLights().subscribe(
|
||||
(data: TrafficLightEntity[]) => {
|
||||
for (const trafficLightEntity of data) {
|
||||
|
||||
const trafficLight: TrafficLight = {
|
||||
trafficLightEntity: trafficLightEntity,
|
||||
trafficLightEvent: this.getEmptyTrafficLightEvent()
|
||||
};
|
||||
this.traffic_light_markers.set(trafficLightEntity['id'], trafficLight);
|
||||
}
|
||||
},
|
||||
err => this.logger.error(err),
|
||||
() => {
|
||||
this.logger.debug('loaded traffic lights');
|
||||
for (const value of this.traffic_light_markers.values()) {
|
||||
this.getTrafficLightEvents(value.trafficLightEntity['id']);
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
getCars() {
|
||||
this.restService.getCars().subscribe(
|
||||
(data: CarEntity[]) => {
|
||||
for (const carEntity of data) {
|
||||
const car: Car = {
|
||||
carEntity: carEntity,
|
||||
carEvent: this.getEmptyCarEvent()
|
||||
};
|
||||
this.car_markers.set(carEntity['vin'], car);
|
||||
}
|
||||
},
|
||||
err => this.logger.error(err),
|
||||
() => {
|
||||
this.logger.debug('loaded cars');
|
||||
for (const value of this.car_markers.values()) {
|
||||
this.getCarEvents(value.carEntity['vin']);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
trafficLightToImage(trafficLight) {
|
||||
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);
|
||||
}
|
||||
|
||||
closeInfoWindow(id) {
|
||||
this.infoWindows.delete(id);
|
||||
}
|
||||
|
||||
isInfoWindowOpen(id) {
|
||||
return this.infoWindows.has(id);
|
||||
}
|
||||
|
||||
playCrashSound() {
|
||||
const audio = new Audio();
|
||||
audio.src = this.NCE_SOUND;
|
||||
audio.load();
|
||||
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
|
||||
};
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
import {Observable} from 'rxjs';
|
||||
|
||||
export interface WSEvents {
|
||||
message: Observable<Event>;
|
||||
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;
|
||||
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;
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
import {HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse} from '@angular/common/http';
|
||||
import {Injectable} from '@angular/core';
|
||||
import {Observable} from 'rxjs';
|
||||
import {tap} from 'rxjs/operators';
|
||||
import {NGXLogger} from 'ngx-logger';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
/**
|
||||
* The InterceptorService intercepts EVERY http event.
|
||||
*/
|
||||
export class InterceptorService implements HttpInterceptor {
|
||||
|
||||
constructor(private logger: NGXLogger) {
|
||||
}
|
||||
|
||||
/**
|
||||
* Intercepts every HTTP request and for example adds a token
|
||||
* @param req http request
|
||||
* @param next http response handler
|
||||
*/
|
||||
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
|
||||
// TODO get the real token
|
||||
const token = 'A_TOKEN';
|
||||
|
||||
// the original request is immutable, so we need to clone it
|
||||
req = req.clone({
|
||||
setHeaders: {
|
||||
// FIXME e.g. if Bearer is used
|
||||
Authorization: `Bearer ${token}`
|
||||
}
|
||||
});
|
||||
|
||||
//this.logger.debug('Interceptor works');
|
||||
|
||||
// pipe the response observable
|
||||
return next.handle(req).pipe(
|
||||
// perform a side effect for every emission on the source Observable
|
||||
// return an Observable that is identical to the source
|
||||
tap(event => {
|
||||
// check if it is the response message
|
||||
if (event instanceof HttpResponse) {
|
||||
// TODO so something if necessary
|
||||
}
|
||||
}, error => {
|
||||
// TODO handle error here
|
||||
this.logger.error('HTTP Response interception error', error);
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
import {HttpClient} from '@angular/common/http';
|
||||
import {Injectable} from '@angular/core';
|
||||
import {NGXLogger} from 'ngx-logger';
|
||||
import {environment} from '../../environments/environment';
|
||||
|
||||
@Injectable()
|
||||
export class RestService {
|
||||
private currentLocation = environment.location + '/api/v1/resources/';
|
||||
|
||||
constructor(
|
||||
private logger: NGXLogger,
|
||||
private http: HttpClient
|
||||
) {
|
||||
}
|
||||
|
||||
getTrafficLightEvents(tlid) {
|
||||
return this.http.get(this.currentLocation + 'traffic_light_events?id=' + tlid, {observe: 'response'});
|
||||
}
|
||||
|
||||
getCarEvents(vin) {
|
||||
return this.http.get(this.currentLocation + 'car_events?vin=' + vin, {observe: 'response'});
|
||||
}
|
||||
|
||||
getTrafficLights() {
|
||||
return this.http.get(this.currentLocation + 'traffic_lights');
|
||||
}
|
||||
|
||||
getCars() {
|
||||
return this.http.get(this.currentLocation + 'cars');
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user