diff --git a/src/app/components/chart-timeline/chart-timeline.component.ts b/src/app/components/chart-timeline/chart-timeline.component.ts index 57cab727fe5128ad8e9d2027456def7d49bf4c52..3f56f04e71367a17c3b62085912fba670373e9ae 100644 --- a/src/app/components/chart-timeline/chart-timeline.component.ts +++ b/src/app/components/chart-timeline/chart-timeline.component.ts @@ -16,8 +16,8 @@ import { ChartComponent } from 'ng-apexcharts'; -import { MarkerColorMap } from 'src/environments/environment'; -import {NotificationType, Object, PositionUpdate, validateTypeObject} from 'src/app/model/base-model'; +import { getMarkerConfig } from 'src/environments/environment'; +import { Object, PositionUpdate, validateTypeObject} from 'src/app/model/base-model'; export type ChartOptions = { series: ApexAxisChartSeries; @@ -99,10 +99,12 @@ export class ChartTimelineComponent implements OnInit { } // --- Marker - if (name in MarkerColorMap) { - var markerConf = MarkerColorMap[name] - this.chartOptions.series[idx]["color"] = markerConf?.circle - } + // if (name in MarkerColorMap) { + // var markerConf = MarkerColorMap[name] + // this.chartOptions.series[idx]["color"] = markerConf?.circle + // } + var markerConf = getMarkerConfig(idx+1) // 0 is root + this.chartOptions.series[idx]["color"] = markerConf?.circle // --- Add new data obj.zoneDescriptors.forEach(zone => { diff --git a/src/app/components/map/map.component.ts b/src/app/components/map/map.component.ts index 01c3e68474b4a1fd584c420c7f3cc0b1eef68d5b..bf19265e44ad7d3af6d60cfab601afaae705f072 100644 --- a/src/app/components/map/map.component.ts +++ b/src/app/components/map/map.component.ts @@ -5,7 +5,7 @@ import * as L from "leaflet"; import 'leaflet-arrowheads'; import { IMqttMessage, MqttService } from 'ngx-mqtt'; -import { environment, MarkerColorMap } from 'src/environments/environment'; +import { environment, getMarkerConfig} from 'src/environments/environment'; import {Position, PositionUpdate, RelativePos, WGS84, validateTypePosition, validateTypeObject} from 'src/app/model/base-model'; @@ -94,10 +94,6 @@ export class MapComponent implements OnInit { props = `<p><h3>${key}</h3></p>` } - // Rotaion - let quter = desc.orientation - - this.addMarker(key, pos, props, desc.extractedAttributes?.theta) } @@ -122,13 +118,18 @@ export class MapComponent implements OnInit { } else { var globPos = L.latLng([point.latitude, point.longitude]); } - + // --- Marker - if (key in MarkerColorMap) { - var markerConf = MarkerColorMap[key] - } else { - var markerConf = MarkerColorMap['Default'] - } + let serialNum = Object.keys(this.markOverlays).length - 1 // because this point already exists + console.log(this.markOverlays) + console.log("serialNum ", serialNum) + var markerConf = getMarkerConfig(serialNum) + + // if (key in MarkerColorMap) { + // var markerConf = MarkerColorMap[key] + // } else { + // var markerConf = MarkerColorMap['Default'] + // } let marker = L.marker(globPos, { icon: L.icon({ diff --git a/src/app/components/table/table.component.html b/src/app/components/table/table.component.html index 4cfcaf8c5ef355274f4fe5d856528ae5c4d06ece..f10305d874d02f96aedda91c916138fded2f7b10 100644 --- a/src/app/components/table/table.component.html +++ b/src/app/components/table/table.component.html @@ -44,11 +44,38 @@ </th> <td mat-cell *matCellDef="let element"> <span *ngFor="let dim of (element.position.point | keyvalue)"> - {{dim.key}}: {{dim.value}} + {{dim.key}}: {{dim.value}} <br> + </span> + <span *ngIf="element?.extractedAttributes"> + theta: {{element?.extractedAttributes?.theta}} </span> </td> </ng-container> + <!-- Battery --> + <ng-container matColumnDef="battery"> + <th mat-header-cell *matHeaderCellDef> + <mat-icon aria-hidden="false" aria-label="battery">battery_5_bar</mat-icon> <br> Battery + </th> + <td mat-cell *matCellDef="let element"> {{element?.extractedAttributes?.batteryChargeLevel}}%</td> + </ng-container> + + <!-- Items --> + <ng-container matColumnDef="loadedItems"> + <th mat-header-cell *matHeaderCellDef> + <mat-icon aria-hidden="false" aria-label="items">feed</mat-icon> Items + </th> + <td mat-cell *matCellDef="let element"> {{element?.extractedAttributes?.loadedItems}}</td> + </ng-container> + + <!-- Errors --> + <ng-container matColumnDef="errors"> + <th mat-header-cell *matHeaderCellDef> + <mat-icon aria-hidden="false" aria-label="errors">error</mat-icon> Errors + </th> + <td mat-cell *matCellDef="let element"> {{element?.extractedAttributes?.errors}}</td> + </ng-container> + <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> diff --git a/src/app/components/table/table.component.ts b/src/app/components/table/table.component.ts index b0b48449d226fc09eb862a217ecfada5827a5208..0bebc46f88b523dbfc52eab4faec99bd21b6337d 100644 --- a/src/app/components/table/table.component.ts +++ b/src/app/components/table/table.component.ts @@ -18,7 +18,7 @@ export class TableComponent implements OnInit { private subsPosition: Subscription; - displayedColumns: string[] = ['agent', 'type', 'time', 'zone', 'position']; + displayedColumns: string[] = ['agent', 'type', 'time', 'zone', 'position', 'battery', 'loadedItems', 'errors']; // testMessages: PositionUpdate[] = [ @@ -37,7 +37,7 @@ export class TableComponent implements OnInit { this.subsPosition = this._mqttService.observe('ipos/client/position').subscribe((message: IMqttMessage) => { try { let upd: PositionUpdate = JSON.parse(message.payload.toString()) - upd.objects.forEach(obj => validateTypeObject(obj)); + // upd.objects.forEach(obj => validateTypeObject(obj)); this.dataSource.push(...upd.objects); this.table?.renderRows(); } catch(e) { diff --git a/src/app/model/base-model.ts b/src/app/model/base-model.ts index 681dbd7c95fc5098931087ceb376ba75bd009cc7..475efd81c4e2196a7fc3ae78bd67f11111020894 100644 --- a/src/app/model/base-model.ts +++ b/src/app/model/base-model.ts @@ -73,13 +73,12 @@ interface ExtAttribute { export function validateTypePosition(obj: any) { if (!isPosition(obj)) { - throw new TypeError("Object is not Position") + throw new TypeError("Unvalid Position") } } export function validateTypeObject(obj: any) { if (!isObject(obj)) { - console.log(obj) throw new TypeError("Unvalid Object: " + Object.keys(obj)) } } diff --git a/src/environments/environment.ts b/src/environments/environment.ts index c12e5111512571cd93d0fcccb0594c8a9e20bac8..373238d981e51c79a2b42b974c2f4c4c6f7bc2f7 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -35,20 +35,28 @@ export const MQTTconfig: IMqttServiceOptions = { // path: '/mqtt' // }; -export const MarkerColorMap: { [key: string]: MarkerColor } = { - "ROOT": {"marker": "red", "circle": "#d32f2f"}, - "Employee1": {"marker": "green", "circle": "#008632"}, - "Employee2": {"marker": "blue", "circle": "#0076EE"}, - "Employee3": {"marker": "violet", "circle": "#9700ee"}, - "Employee4": {"marker": "yellow", "circle": "#eee600"}, - "Default": {"marker": "grey", "circle": "#606060"}, -} +export const MarkerColorList: MarkerColor[] = [ + {"marker": "red", "circle": "#d32f2f"}, + {"marker": "green", "circle": "#008632"}, + {"marker": "blue", "circle": "#0076EE"}, + {"marker": "violet", "circle": "#9700ee"}, + {"marker": "yellow", "circle": "#eee600"}, + {"marker": "grey", "circle": "#606060"}, +] interface MarkerColor { marker: string circle: string } +export function getMarkerConfig(counter: number) { + let idx = counter + + if (MarkerColorList.length <= counter) { + idx = counter - MarkerColorList.length + } + return MarkerColorList[idx] +} /* * For easier debugging in development mode, you can import the following file