From c79bebb3ed7f0009d384bc5e31bdcc4280777241 Mon Sep 17 00:00:00 2001
From: Oleksandr Husak <oleksandr.husak@mailbox.tu-dresden.de>
Date: Mon, 11 Apr 2022 13:31:29 +0200
Subject: [PATCH] iterative marker color
---
.../chart-timeline.component.ts | 14 +++++----
src/app/components/map/map.component.ts | 23 ++++++++-------
src/app/components/table/table.component.html | 29 ++++++++++++++++++-
src/app/components/table/table.component.ts | 4 +--
src/app/model/base-model.ts | 3 +-
src/environments/environment.ts | 24 ++++++++++-----
6 files changed, 67 insertions(+), 30 deletions(-)
diff --git a/src/app/components/chart-timeline/chart-timeline.component.ts b/src/app/components/chart-timeline/chart-timeline.component.ts
index 57cab72..3f56f04 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 01c3e68..bf19265 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 4cfcaf8..f10305d 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 b0b4844..0bebc46 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 681dbd7..475efd8 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 c12e511..373238d 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
--
GitLab