zenon/dse-assignment
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add info window to control center

Browse Source
This commit is contained in:
David Eder 2021-06-12 11:53:03 +02:00
parent fade4c3af3
commit 99f0ef30fe
5 changed files with 50 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/control_center/src/app/component/landing/landing.component.css
View File

@ -1,5 +1,3 @@
html, body {
height: 100%;
padding: 0;
margin: 0;
#map{
height : 100vh; width: 100%; padding:0px; margin: 0px;
}

25
components/control_center/src/app/component/landing/landing.component.html
View File

@ -1,6 +1,25 @@
<agm-map id="map" #map [zoom]="zoom" [latitude]="center.lat" [longitude]="center.lng" style="height: 900px; width: 1200px">
<agm-marker *ngFor="let m of car_markers | keyvalue" [iconUrl]="m.value.iconUrl" [latitude]="m.value.lat" [longitude]="m.value.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"
[latitude]="m.value.lat" [longitude]="m.value.lng">
<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>
</agm-info-window>
</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]="m.value.iconUrl"
[latitude]="m.value.lat" [longitude]="m.value.lng">
<agm-info-window>
<p>Id: {{m.value.id}}</p>
<p>Switching Time: {{m.value.switchingTime}}</p>
<p>Range: {{m.value.range}}</p>
<p>Color: {{m.value.color}}</p>
<p>Last Switch: {{m.value.last_switch}}</p>
</agm-info-window>
</agm-marker>
</agm-map>

22
components/control_center/src/app/component/landing/landing.component.ts
View File

@ -27,6 +27,7 @@ export class LandingComponent implements OnInit {
traffic_light_markers = new Map();
car_markers = new Map();
infoWindows = new Map();
timeInterval: Subscription;
@ -46,13 +47,16 @@ export class LandingComponent implements OnInit {
startWith(0),
switchMap(() => this.restService.getCarEvents(vin))
).subscribe((data: any) => {
const car = data.body['cursor'];
car['vin'] = car['vehicle_identification_number'];
const carEvent = data.body['cursor'];
const car = this.car_markers.get(vin);
car['velocity'] = carEvent['velocity'];
car['timestamp'] = carEvent['timestamp'];
//TODO: if (car['near_crash_event']) {
car['iconUrl'] = this.CAR_IMAGE;
car['lat'] = car['gps_location']['latitude'];
car['lng'] = car['gps_location']['longitude'];
car['lat'] = carEvent['gps_location']['latitude'];
car['lng'] = carEvent['gps_location']['longitude'];
this.car_markers.set(car['vin'], car);
},
@ -130,5 +134,15 @@ export class LandingComponent implements OnInit {
return (trafficLight === 'RED') ? this.TL_RED_IMAGE : this.TL_GREEN_IMAGE;
}
openInfoWindow(id) {
this.infoWindows.set(id, true);
}
closeInfoWindow(id) {
this.infoWindows.delete(id);
}
isInfoWindowOpen(id) {
return this.infoWindows.has(id);
}
}

2
components/control_center/src/app/services/interceptor.service.ts
View File

@ -32,7 +32,7 @@ export class InterceptorService implements HttpInterceptor {
}
});
this.logger.debug('Interceptor works');
//this.logger.debug('Interceptor works');
// pipe the response observable
return next.handle(req).pipe(

9
components/control_center/src/styles.css
View File

@ -4,6 +4,11 @@
@import '~bootstrap/dist/css/bootstrap.min.css';
body {
width: 95%;
margin: auto;
width: 100%;
margin: 0;
padding: 0;
}
.gm-style-iw-a {
opacity: 0.8 !important;
}