ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-04-25 13:29:46 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Show interface availability

Browse Source
This commit is contained in:
piotrpekala7 2020-03-18 16:13:14 +01:00
parent 6a21b88a4a
commit 34059da0f6
4 changed files with 25 additions and 7 deletions

12
src/app/components/project-map/node-select-interface/node-select-interface.component.html

@ -1,9 +1,15 @@
<div class="context-menu" [style.left]="leftPosition" [style.top]="topPosition" *ngIf="node">
<span [matMenuTriggerFor]="selectInterfaceMenu"></span>
<mat-menu [style.min-height]="0" #selectInterfaceMenu="matMenu" class="context-menu-items">
<button mat-menu-item *ngFor="let port of availablePorts" (click)="chooseInterface(port)">
<mat-icon>add_circle_outline</mat-icon>
<span>{{ port.name }}</span>
<button mat-menu-item *ngFor="let port of ports" (click)="chooseInterface(port)" [disabled]="!port.available">
<svg *ngIf="port.available" width="10" height="10">
<rect class="status" x="0" y="0" width="10" height="10" fill="green"></rect>
</svg>
<svg *ngIf="!port.available" width="10" height="10">
<rect class="status" x="0" y="0" width="10" height="10" fill="red"></rect>
</svg>
<!-- <mat-icon>add_circle_outline</mat-icon> -->
<span class="port">{{ port.name }}</span>
</button>
</mat-menu>
</div>

8
src/app/components/project-map/node-select-interface/node-select-interface.component.scss

@ -5,3 +5,11 @@
.context-menu-items {
min-height: 0px!important;
}
.status {
margin-right: 10px;
}
.port {
margin-left: 10px;
}

11
src/app/components/project-map/node-select-interface/node-select-interface.component.ts

@ -20,7 +20,7 @@ export class NodeSelectInterfaceComponent implements OnInit {
protected topPosition;
protected leftPosition;
public node: Node;
public availablePorts: Port[];
public ports: Port[];
constructor(
private sanitizer: DomSanitizer,
@ -54,11 +54,14 @@ export class NodeSelectInterfaceComponent implements OnInit {
});
});
this.availablePorts = [];
this.ports = [];
this.node.ports.forEach((port: Port) => {
if(linkNodes.filter((linkNode: LinkNode) => linkNode.port_number === port.port_number).length === 0){
this.availablePorts.push(port);
if (linkNodes.filter((linkNode: LinkNode) => linkNode.port_number === port.port_number).length === 0) {
port.available = true;
} else {
port.available = false;
}
this.ports.push(port);
});
}

1
src/app/models/port.ts

@ -5,4 +5,5 @@ export class Port {
name: string;
port_number: number;
short_name: string;
available?: boolean;
}