mirror of
https://github.com/GNS3/gns3-web-ui.git
synced 2025-05-11 04:52:59 +00:00
211 lines
9.6 KiB
HTML
211 lines
9.6 KiB
HTML
<div *ngIf="project" class="project-map">
|
|
<app-d3-map
|
|
*ngIf="!settings.angular_map"
|
|
[server]="server"
|
|
[project]="project"
|
|
[symbols]="symbols"
|
|
[nodes]="nodes"
|
|
[links]="links"
|
|
[drawings]="drawings"
|
|
[width]="project.scene_width"
|
|
[height]="project.scene_height"
|
|
[show-interface-labels]="isInterfaceLabelVisible"
|
|
[readonly]="inReadOnlyMode"
|
|
(nodeDragged)="onNodeDragged($event)"
|
|
(drawingDragged)="onDrawingDragged($event)"
|
|
(onLinkCreated)="onLinkCreated($event)"
|
|
(onDrawingResized)="onDrawingResized($event)"
|
|
></app-d3-map>
|
|
|
|
<app-experimental-map
|
|
*ngIf="settings.angular_map"
|
|
[symbols]="symbols"
|
|
[nodes]="nodes"
|
|
[links]="links"
|
|
[drawings]="drawings"
|
|
[width]="project.scene_width"
|
|
[height]="project.scene_height"
|
|
[show-interface-labels]="isInterfaceLabelVisible"
|
|
[selection-tool]="tools.selection"
|
|
[moving-tool]="tools.moving"
|
|
[draw-link-tool]="tools.draw_link"
|
|
[readonly]="inReadOnlyMode"
|
|
></app-experimental-map>
|
|
|
|
<div *ngIf="toolbarVisibility" class="project-toolbar">
|
|
<mat-toolbar color="primary" class="project-toolbar" [ngClass]="{lightTheme: isLightThemeEnabled}">
|
|
<mat-toolbar-row *ngIf="!isLightThemeEnabled">
|
|
<button matTooltip="Open menu" mat-icon-button [matMenuTriggerFor]="mainMenu"><mat-icon svgIcon="gns3"></mat-icon></button>
|
|
</mat-toolbar-row>
|
|
|
|
<mat-toolbar-row *ngIf="isLightThemeEnabled">
|
|
<button matTooltip="Open menu" mat-icon-button [matMenuTriggerFor]="mainMenu"><mat-icon svgIcon="gns3black"></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>Go to projects</span>
|
|
</button>
|
|
<button mat-menu-item [routerLink]="['/servers']">
|
|
<mat-icon>developer_board</mat-icon>
|
|
<span>Go to servers</span>
|
|
</button>
|
|
<button mat-menu-item routerLink="/server/{{server.id}}/preferences">
|
|
<mat-icon>settings_applications</mat-icon>
|
|
<span>Go to preferences</span>
|
|
</button>
|
|
<button mat-menu-item routerLink="/server/{{server.id}}/systemstatus">
|
|
<mat-icon>info</mat-icon>
|
|
<span>Go to system status</span>
|
|
</button>
|
|
<button mat-menu-item (click)="addNewTemplate()">
|
|
<mat-icon>control_point</mat-icon>
|
|
<span>New template</span>
|
|
</button>
|
|
<app-import-appliance [server]="server" [project]="project"></app-import-appliance>
|
|
<button mat-menu-item [matMenuTriggerFor]="projectMenu">
|
|
<mat-icon>settings</mat-icon>
|
|
<span>Project settings</span>
|
|
</button>
|
|
<button mat-menu-item [matMenuTriggerFor]="viewMenu">
|
|
<mat-icon>view_module</mat-icon>
|
|
<span>Map settings</span>
|
|
</button>
|
|
</mat-menu>
|
|
|
|
<mat-menu #projectMenu="matMenu" [overlapTrigger]="false">
|
|
<div>
|
|
<button mat-menu-item (click)="addNewProject()">
|
|
<mat-icon>add</mat-icon>
|
|
<span>Add new blank project</span>
|
|
</button>
|
|
<button mat-menu-item (click)="saveProject()">
|
|
<mat-icon>save</mat-icon>
|
|
<span>Save project as</span>
|
|
</button>
|
|
<button mat-menu-item (click)="editProject()">
|
|
<mat-icon>edit</mat-icon>
|
|
<span>Edit project</span>
|
|
</button>
|
|
<button mat-menu-item (click)="exportProject()">
|
|
<mat-icon>call_made</mat-icon>
|
|
<span>Export portable project</span>
|
|
</button>
|
|
<button mat-menu-item (click)="importProject()">
|
|
<mat-icon>call_received</mat-icon>
|
|
<span>Import portable project</span>
|
|
</button>
|
|
<button mat-menu-item (click)="closeProject()">
|
|
<mat-icon>close</mat-icon>
|
|
<span>Close project</span>
|
|
</button>
|
|
<button mat-menu-item (click)="deleteProject()">
|
|
<mat-icon>delete</mat-icon>
|
|
<span>Delete project</span>
|
|
</button>
|
|
</div>
|
|
</mat-menu>
|
|
|
|
<mat-menu #viewMenu="matMenu" [overlapTrigger]="false">
|
|
<div class="options-item">
|
|
<mat-checkbox [ngModel]="mapSettingsService.integrateLinkLabelsToLinks" (change)="toggleIntegrateLinkLabelsToLinks($event.checked)">
|
|
Integrate link labels to links
|
|
</mat-checkbox>
|
|
<mat-checkbox [ngModel]="isInterfaceLabelVisible" (change)="toggleShowInterfaceLabels($event.checked)">
|
|
Show interface labels separately
|
|
</mat-checkbox><br/>
|
|
<mat-checkbox [ngModel]="isConsoleVisible" (change)="toggleShowConsole($event.checked)">
|
|
Show console
|
|
</mat-checkbox><br/>
|
|
<mat-checkbox [ngModel]="isTopologySummaryVisible" (change)="toggleShowTopologySummary($event.checked)">
|
|
Show topology/servers summary
|
|
</mat-checkbox><br/>
|
|
<mat-checkbox [ngModel]="notificationsVisibility" (change)="toggleNotifications($event.checked)">
|
|
Show notifications
|
|
</mat-checkbox><br/>
|
|
<mat-checkbox [ngModel]="layersVisibility" (change)="toggleLayers($event.checked)">
|
|
Show layers
|
|
</mat-checkbox><br/>
|
|
<mat-checkbox [ngModel]="gridVisibility" (change)="toggleGrid($event.checked)">
|
|
Show grid
|
|
</mat-checkbox><br/>
|
|
<mat-checkbox [ngModel]="project.snap_to_grid" (change)="toggleSnapToGrid($event.checked)">
|
|
Snap to grid
|
|
</mat-checkbox><br/>
|
|
</div>
|
|
</mat-menu>
|
|
|
|
<mat-toolbar-row *ngIf="!readonly">
|
|
<app-template [server]="server" [project]="project" (onNodeCreation)="onNodeCreation($event)"></app-template>
|
|
</mat-toolbar-row>
|
|
|
|
<mat-toolbar-row *ngIf="!readonly">
|
|
<button matTooltip="Add a link" mat-icon-button [color]="tools.draw_link ? 'primary' : 'basic'" (click)="toggleDrawLineMode()">
|
|
<mat-icon>timeline</mat-icon>
|
|
</button>
|
|
</mat-toolbar-row>
|
|
|
|
<mat-toolbar-row>
|
|
<button matTooltip="Enable/disable moving mode" 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">
|
|
<button matTooltip="Fit in view" mat-icon-button (click)="fitInView()">
|
|
<mat-icon>fullscreen</mat-icon>
|
|
</button>
|
|
</mat-toolbar-row>
|
|
|
|
<mat-toolbar-row *ngIf="!readonly">
|
|
<button matTooltip="Center view" mat-icon-button (click)="centerView()">
|
|
<mat-icon>center_focus_strong</mat-icon>
|
|
</button>
|
|
</mat-toolbar-row>
|
|
</mat-toolbar>
|
|
</div>
|
|
|
|
<div *ngIf="toolbarVisibility" id="show-menu-wrapper" [ngClass]="{lightTheme: isLightThemeEnabled, shadowed: !isProjectMapMenuVisible }">
|
|
<button [ngClass]="{lightTheme: isLightThemeEnabled}" class="arrow-button" mat-icon-button (click)="showMenu()"><mat-icon class="unmarked">keyboard_arrow_right</mat-icon></button>
|
|
</div>
|
|
|
|
<div *ngIf="toolbarVisibility" id="menu-wrapper" [ngClass]="{lightTheme: isLightThemeEnabled, extended: isProjectMapMenuVisible }">
|
|
<app-nodes-menu [server]="server" [project]="project"></app-nodes-menu>
|
|
<mat-divider class="divider" [vertical]="true"></mat-divider>
|
|
<app-project-map-menu [server]="server" [project]="project"></app-project-map-menu>
|
|
<button [ngClass]="{lightTheme: isLightThemeEnabled}" class="arrow-button" mat-icon-button (click)="hideMenu()"><mat-icon class="unmarked">keyboard_arrow_left</mat-icon></button>
|
|
</div>
|
|
|
|
<app-context-menu [project]="project" [server]="server"></app-context-menu>
|
|
</div>
|
|
|
|
<div [ngClass]="{lightTheme: isLightThemeEnabled}" class="zoom-buttons">
|
|
<button matTooltip="Zoom in" [ngClass]="{lightTheme: isLightThemeEnabled}" class="zoom-button" (click)="zoomIn()"><mat-icon>zoom_in</mat-icon></button>
|
|
<button matTooltip="Reset zoom" [ngClass]="{lightTheme: isLightThemeEnabled}" class="zoom-button" (click)="resetZoom()"><mat-icon>adjust</mat-icon></button>
|
|
<button matTooltip="Zoom out" [ngClass]="{lightTheme: isLightThemeEnabled}" class="zoom-button" (click)="zoomOut()"><mat-icon>zoom_out</mat-icon></button>
|
|
</div>
|
|
|
|
<app-progress></app-progress>
|
|
<app-project-map-shortcuts *ngIf="project" [project]="project" [server]="server"></app-project-map-shortcuts>
|
|
<app-draw-link-tool [links]="links" *ngIf="tools.draw_link"></app-draw-link-tool>
|
|
|
|
<app-drawing-dragged [server]="server" [project]="project"></app-drawing-dragged>
|
|
<app-drawing-resized [server]="server"></app-drawing-resized>
|
|
<app-interface-label-dragged [server]="server"></app-interface-label-dragged>
|
|
<app-link-created [server]="server" [project]="project"></app-link-created>
|
|
<app-node-dragged [server]="server" [project]="project"></app-node-dragged>
|
|
<app-node-label-dragged [server]="server"></app-node-label-dragged>
|
|
<app-text-added [server]="server" [project]="project" (drawingSaved)="onDrawingSaved()"> </app-text-added>
|
|
<app-text-edited [server]="server"></app-text-edited>
|
|
<div [ngClass]="{ visible: !isConsoleVisible }">
|
|
<app-console-wrapper *ngIf="project" [server]="server" [project]="project" (closeConsole)='toggleShowConsole($event)'></app-console-wrapper>
|
|
</div>
|
|
<div [ngClass]="{ visible: !isTopologySummaryVisible }">
|
|
<app-topology-summary *ngIf="project" [server]="server" [project]="project" (closeTopologySummary)='toggleShowTopologySummary($event)'></app-topology-summary>
|
|
</div>
|