mirror of
https://github.com/GNS3/gns3-web-ui.git
synced 2025-05-24 03:03:56 +00:00
127 lines
4.3 KiB
HTML
127 lines
4.3 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"
|
|
[readonly]="inReadOnlyMode"
|
|
(nodeDragged)="onNodeDragged($event)"
|
|
(drawingDragged)="onDrawingDragged($event)"
|
|
(onLinkCreated)="onLinkCreated($event)"
|
|
(onDrawingResized)="onDrawingResized($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>
|
|
|
|
<div class="draw-menu">
|
|
<mat-drawer-container class="drawer-container">
|
|
<mat-drawer #drawer class="drawer">
|
|
<div class="drawer-buttons">
|
|
<button mat-icon-button class="drawer-button">
|
|
<mat-icon>picture_in_picture</mat-icon>
|
|
</button>
|
|
<button mat-icon-button class="drawer-button" [color]="drawTools.isRectangleChosen ? 'primary': 'basic'" (click)="addDrawing('rectangle')">
|
|
<mat-icon>crop_3_2</mat-icon>
|
|
</button>
|
|
<button mat-icon-button class="drawer-button" [color]="drawTools.isEllipseChosen ? 'primary': 'basic'" (click)="addDrawing('ellipse')">
|
|
<mat-icon>panorama_fish_eye</mat-icon>
|
|
</button>
|
|
<button mat-icon-button class="drawer-button" (click)="addDrawing('line')">
|
|
<svg height="40" width="40">
|
|
<line [ngClass]="{active: drawTools.isLineChosen}" x1="30" y1="10" x2="10" y2="30" style="stroke:white;stroke-width:2" />
|
|
</svg>
|
|
</button>
|
|
<button mat-icon-button class="drawer-arrow-button" (click)="drawer.toggle()">
|
|
<mat-icon>keyboard_arrow_left</mat-icon>
|
|
</button>
|
|
</div>
|
|
</mat-drawer>
|
|
<mat-drawer-content class="drawer-content">
|
|
<div class="drawer-arrow-button">
|
|
<button mat-icon-button (click)="drawer.toggle()">
|
|
<mat-icon>keyboard_arrow_right</mat-icon>
|
|
</button>
|
|
</div>
|
|
</mat-drawer-content>
|
|
</mat-drawer-container>
|
|
</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">
|
|
</app-project-map-shortcuts>
|