ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-04-26 05:49:47 +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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -5,3 +5,11 @@
.context-menu-items { .context-menu-items {
min-height: 0px!important; 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
View File

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

1
src/app/models/port.ts
View File

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