GUI2 Display of mastership for devices
Change-Id: I13ed95d1a58d055aa913c69402541b87855c28c8
diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.ts b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.ts
index d40f413..9c246d9 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.ts
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.ts
@@ -19,7 +19,7 @@
Component,
EventEmitter,
Input,
- OnChanges, Output,
+ OnChanges, OnInit, Output,
SimpleChanges,
} from '@angular/core';
import {Device, LabelToggle, UiElement} from '../../models';
@@ -27,6 +27,7 @@
import {NodeVisual, SelectedEvent} from '../nodevisual';
import {animate, state, style, transition, trigger} from '@angular/animations';
import {LocationType} from '../../../backgroundsvg/backgroundsvg.component';
+import {TopologyService} from '../../../../topology.service';
/**
* The Device node in the force graph
@@ -64,21 +65,30 @@
])
]
})
-export class DeviceNodeSvgComponent extends NodeVisual implements OnChanges {
+export class DeviceNodeSvgComponent extends NodeVisual implements OnInit, OnChanges {
@Input() device: Device;
@Input() scale: number = 1.0;
@Input() labelToggle: LabelToggle.Enum = LabelToggle.Enum.NONE;
+ @Input() colorMuted: boolean = false;
+ @Input() colorTheme: string = 'light';
@Output() selectedEvent = new EventEmitter<SelectedEvent>();
textWidth: number = 36;
+ panelColor: string = '#9ebedf';
+
constructor(
protected log: LogService,
private is: IconService,
protected sus: SvgUtilService,
+ protected ts: TopologyService,
private ref: ChangeDetectorRef
) {
super();
}
+ ngOnInit(): void {
+ this.panelColor = this.panelColour();
+ }
+
/**
* Called by parent (forcesvg) when a change happens
*
@@ -92,6 +102,13 @@
this.device.x = 0;
this.device.y = 0;
}
+ // The master might have changed - recalculate color
+ this.panelColor = this.panelColour();
+ }
+
+ if (changes['colorMuted']) {
+ this.colorMuted = changes['colorMuted'].currentValue;
+ this.panelColor = this.panelColour();
}
this.ref.markForCheck();
}
@@ -137,7 +154,8 @@
* Get a colour for the banner of the nth panel
* @param idx The index of the panel (0-6)
*/
- panelColour(idx: number): string {
- return this.sus.cat7().getColor(idx, false, '');
+ panelColour(): string {
+ const idx = this.ts.instancesIndex.get(this.device.master);
+ return this.sus.cat7().getColor(idx, this.colorMuted, this.colorTheme);
}
}