gns3-web-ui/src/app/components/project-map/project-map.component.html
2018-11-06 08:23:39 +01:00

92 lines
2.8 KiB
HTML

<div *ngIf="project" class="project-map">
<app-map
[symbols]="symbols"
[nodes]="nodes"
[links]="links"
[drawings]="drawings"
[width]="project.scene_width"
[height]="project.scene_height"
[show-interface-labels]="project.show_interface_labels"
[selection-tool]="tools.selection"
[moving-tool]="tools.moving"
[draw-link-tool]="tools.draw_link"
(onNodeDragged)="onNodeDragged($event)"
(onLinkCreated)="onLinkCreated($event)"
></app-map>
<div class="project-toolbar">
<mat-toolbar color="primary" class="project-toolbar">
<mat-toolbar-row>
<button mat-icon-button [matMenuTriggerFor]="mainMenu">
<mat-icon svgIcon="gns3"></mat-icon>
</button>
</mat-toolbar-row>
<mat-menu #mainMenu="matMenu" [overlapTrigger]="false">
<button mat-menu-item [routerLink]="['/server', server.id, 'projects']">
<mat-icon>work</mat-icon>
<span>Projects</span>
</button>
<button mat-menu-item [routerLink]="['/servers']">
<mat-icon>developer_board</mat-icon>
<span>Servers</span>
</button>
</mat-menu>
<mat-toolbar-row>
<button mat-icon-button [matMenuTriggerFor]="viewMenu">
<mat-icon>view_module</mat-icon>
</button>
</mat-toolbar-row>
<mat-menu #viewMenu="matMenu" [overlapTrigger]="false">
<div class="options-item">
<mat-checkbox
[ngModel]="project.show_interface_labels"
(change)="toggleShowInterfaceLabels($event.checked)">
Show interface labels
</mat-checkbox>
</div>
</mat-menu>
<mat-toolbar-row *ngIf="!readonly">
<button mat-icon-button [color]="tools.draw_link ? 'primary': 'basic'" (click)="toggleDrawLineMode()">
<mat-icon>timeline</mat-icon>
</button>
</mat-toolbar-row>
<mat-toolbar-row>
<button mat-icon-button [color]="tools.moving ? 'primary': 'basic'" (click)="toggleMovingMode()">
<mat-icon>zoom_out_map</mat-icon>
</button>
</mat-toolbar-row>
<mat-toolbar-row *ngIf="!readonly" >
<app-snapshot-menu-item
[server]="server"
[project]="project">
</app-snapshot-menu-item>
</mat-toolbar-row>
<mat-toolbar-row *ngIf="!readonly" >
<app-appliance
[server]="server"
(onNodeCreation)="onNodeCreation($event)"
></app-appliance>
</mat-toolbar-row>
</mat-toolbar>
</div>
<app-node-context-menu [project]="project" [server]="server"></app-node-context-menu>
</div>
<app-progress></app-progress>
<app-project-map-shortcuts
*ngIf="project"
[project]="project"
[server]="server"
[selectionManager]="selectionManager">
</app-project-map-shortcuts>