ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-02-22 10:20:48 +00:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Option enabled

Browse Source
This commit is contained in:
piotrpekala7 2020-07-13 18:40:32 +02:00
parent a3142c6fb1
commit 62587fbdcd
3 changed files with 181 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

288
src/app/cartography/widgets/interface-status.ts
View File

@ -6,12 +6,21 @@ import { Widget } from './widget';
import { SVGSelection } from '../models/types'; import { SVGSelection } from '../models/types';
import { LinkStatus } from '../models/link-status'; import { LinkStatus } from '../models/link-status';
import { MapLink } from '../models/map/map-link'; import { MapLink } from '../models/map/map-link';
import { MapSettingsService } from '../../services/mapsettings.service';
@Injectable() @Injectable()
export class InterfaceStatusWidget implements Widget { export class InterfaceStatusWidget implements Widget {
constructor() {} private mapSettingsService: MapSettingsService
constructor(
private _mapSettingsService: MapSettingsService
) {
this.mapSettingsService = _mapSettingsService;
}
public draw(view: SVGSelection) { public draw(view: SVGSelection) {
const self = this;
view.each(function(this: SVGGElement, l: MapLink) { view.each(function(this: SVGGElement, l: MapLink) {
const link_group = select<SVGGElement, MapLink>(this); const link_group = select<SVGGElement, MapLink>(this);
const link_path = link_group.select<SVGPathElement>('path'); const link_path = link_group.select<SVGPathElement>('path');
@ -33,150 +42,169 @@ export class InterfaceStatusWidget implements Widget {
} }
} }
const status_started = link_group link_group
.selectAll<SVGRectElement, LinkStatus>('rect.status_started') .selectAll<SVGCircleElement, LinkStatus>('circle.status_started').remove();
.data(statuses.filter((link_status: LinkStatus) => link_status.status === 'started')); link_group
const status_started_enter = status_started.enter().append<SVGRectElement>('rect'); .selectAll<SVGCircleElement, LinkStatus>('circle.status_stopped').remove();
status_started link_group
.merge(status_started_enter) .selectAll<SVGCircleElement, LinkStatus>('circle.status_suspended').remove();
.attr('class', 'status_started')
.attr('width', 40)
.attr('height', 20)
.attr('x', (ls: LinkStatus) => ls.x - 10)
.attr('y', (ls: LinkStatus) => ls.y - 10)
.attr('rx', 8)
.attr('ry', 8)
.style('fill', 'white')
.attr('stroke', '#2ecc71')
.attr('stroke-width', 3);
status_started.exit().remove();
const status_started_label = link_group link_group
.selectAll<SVGTextElement, LinkStatus>('text.status_started_label') .selectAll<SVGRectElement, LinkStatus>('rect.status_started').remove();
.data(statuses.filter((link_status: LinkStatus) => link_status.status === 'started')); link_group
const status_started_label_enter = status_started_label.enter().append<SVGTextElement>('text'); .selectAll<SVGTextElement, LinkStatus>('text.status_started_label').remove();
status_started_label link_group
.merge(status_started_label_enter) .selectAll<SVGRectElement, LinkStatus>('rect.status_stopped').remove();
.attr('class', 'status_started_label') link_group
.text((ls: LinkStatus) => ls.port) .selectAll<SVGTextElement, LinkStatus>('text.status_stopped_label').remove();
.attr('x', (ls: LinkStatus) => ls.x - 5) link_group
.attr('y', (ls: LinkStatus) => ls.y + 5) .selectAll<SVGRectElement, LinkStatus>('rect.status_suspended').remove();
.attr('fill', `black`); link_group
status_started_label.exit().remove(); .selectAll<SVGTextElement, LinkStatus>('text.status_suspended_label').remove();
// const status_started = link_group if (self.mapSettingsService.integrateLinkLabelsToLinks) {
// .selectAll<SVGCircleElement, LinkStatus>('circle.status_started') const status_started = link_group
// .data(statuses.filter((link_status: LinkStatus) => link_status.status === 'started')); .selectAll<SVGRectElement, LinkStatus>('rect.status_started')
.data(statuses.filter((link_status: LinkStatus) => link_status.status === 'started'));
const status_started_enter = status_started.enter().append<SVGRectElement>('rect');
status_started
.merge(status_started_enter)
.attr('class', 'status_started')
.attr('width', 40)
.attr('height', 20)
.attr('x', (ls: LinkStatus) => ls.x - 10)
.attr('y', (ls: LinkStatus) => ls.y - 10)
.attr('rx', 8)
.attr('ry', 8)
.style('fill', 'white')
.attr('stroke', '#2ecc71')
.attr('stroke-width', 3);
status_started.exit().remove();
const status_started_label = link_group
.selectAll<SVGTextElement, LinkStatus>('text.status_started_label')
.data(statuses.filter((link_status: LinkStatus) => link_status.status === 'started'));
const status_started_label_enter = status_started_label.enter().append<SVGTextElement>('text');
status_started_label
.merge(status_started_label_enter)
.attr('class', 'status_started_label')
.text((ls: LinkStatus) => ls.port)
.attr('x', (ls: LinkStatus) => ls.x - 5)
.attr('y', (ls: LinkStatus) => ls.y + 5)
.attr('fill', `black`);
status_started_label.exit().remove();
const status_stopped = link_group
.selectAll<SVGRectElement, LinkStatus>('rect.status_stopped')
.data(statuses.filter((link_status: LinkStatus) => link_status.status === 'stopped'));
const status_stopped_enter = status_stopped.enter().append<SVGRectElement>('rect');
status_stopped
.merge(status_stopped_enter)
.attr('class', 'status_stopped')
.attr('width', 40)
.attr('height', 20)
.attr('x', (ls: LinkStatus) => ls.x - 10)
.attr('y', (ls: LinkStatus) => ls.y - 10)
.attr('rx', 8)
.attr('ry', 8)
.style('fill', 'white')
.attr('stroke', 'red')
.attr('stroke-width', 3);
status_stopped.exit().remove();
const status_stopped_label = link_group
.selectAll<SVGTextElement, LinkStatus>('text.status_stopped_label')
.data(statuses.filter((link_status: LinkStatus) => link_status.status === 'stopped'));
const status_stopped_label_enter = status_stopped_label.enter().append<SVGTextElement>('text');
status_stopped_label
.merge(status_stopped_label_enter)
.attr('class', 'status_stopped_label')
.text((ls: LinkStatus) => ls.port)
.attr('x', (ls: LinkStatus) => ls.x - 5)
.attr('y', (ls: LinkStatus) => ls.y + 5)
.attr('fill', `black`);
status_stopped_label.exit().remove();
// const status_started_enter = status_started.enter().append<SVGCircleElement>('circle'); const status_suspended = link_group
.selectAll<SVGRectElement, LinkStatus>('rect.status_suspended')
.data(statuses.filter((link_status: LinkStatus) => link_status.status === 'suspended'));
const status_suspended_enter = status_suspended.enter().append<SVGRectElement>('rect');
status_suspended
.merge(status_suspended_enter)
.attr('class', 'status_suspended')
.attr('width', 40)
.attr('height', 20)
.attr('x', (ls: LinkStatus) => ls.x - 10)
.attr('y', (ls: LinkStatus) => ls.y - 10)
.attr('rx', 8)
.attr('ry', 8)
.style('fill', 'white')
.attr('stroke', '#FFFF00')
.attr('stroke-width', 3);
status_suspended.exit().remove();
const status_suspended_label = link_group
.selectAll<SVGTextElement, LinkStatus>('text.status_suspended_label')
.data(statuses.filter((link_status: LinkStatus) => link_status.status === 'suspended'));
const status_suspended_label_enter = status_suspended_label.enter().append<SVGTextElement>('text');
status_suspended_label
.merge(status_suspended_label_enter)
.attr('class', 'status_suspended_label')
.text((ls: LinkStatus) => ls.port)
.attr('x', (ls: LinkStatus) => ls.x - 5)
.attr('y', (ls: LinkStatus) => ls.y + 5)
.attr('fill', `black`);
status_suspended_label.exit().remove();
} else {
const status_started = link_group
.selectAll<SVGCircleElement, LinkStatus>('circle.status_started')
.data(statuses.filter((link_status: LinkStatus) => link_status.status === 'started'));
// status_started const status_started_enter = status_started.enter().append<SVGCircleElement>('circle');
// .merge(status_started_enter)
// .attr('class', 'status_started')
// .attr('cx', (ls: LinkStatus) => ls.x)
// .attr('cy', (ls: LinkStatus) => ls.y)
// .attr('r', 6)
// .attr('text', (ls: LinkStatus) => ls.port)
// .attr('fill', '#2ecc71');
// status_started.exit().remove(); status_started
.merge(status_started_enter)
.attr('class', 'status_started')
.attr('cx', (ls: LinkStatus) => ls.x)
.attr('cy', (ls: LinkStatus) => ls.y)
.attr('r', 6)
.attr('text', (ls: LinkStatus) => ls.port)
.attr('fill', '#2ecc71');
const status_stopped = link_group status_started.exit().remove();
.selectAll<SVGRectElement, LinkStatus>('rect.status_stopped')
.data(statuses.filter((link_status: LinkStatus) => link_status.status === 'stopped'));
const status_stopped_enter = status_stopped.enter().append<SVGRectElement>('rect');
status_stopped
.merge(status_stopped_enter)
.attr('class', 'status_stopped')
.attr('width', 40)
.attr('height', 20)
.attr('x', (ls: LinkStatus) => ls.x - 10)
.attr('y', (ls: LinkStatus) => ls.y - 10)
.attr('rx', 8)
.attr('ry', 8)
.style('fill', 'white')
.attr('stroke', 'red')
.attr('stroke-width', 3);
status_stopped.exit().remove();
const status_stopped_label = link_group const status_stopped = link_group
.selectAll<SVGTextElement, LinkStatus>('text.status_stopped_label') .selectAll<SVGRectElement, LinkStatus>('rect.status_stopped')
.data(statuses.filter((link_status: LinkStatus) => link_status.status === 'stopped')); .data(statuses.filter((link_status: LinkStatus) => link_status.status === 'stopped'));
const status_stopped_label_enter = status_stopped_label.enter().append<SVGTextElement>('text');
status_stopped_label
.merge(status_stopped_label_enter)
.attr('class', 'status_stopped_label')
.text((ls: LinkStatus) => ls.port)
.attr('x', (ls: LinkStatus) => ls.x - 5)
.attr('y', (ls: LinkStatus) => ls.y + 5)
.attr('fill', `black`);
status_stopped_label.exit().remove();
// const status_stopped = link_group const status_stopped_enter = status_stopped.enter().append<SVGRectElement>('rect');
// .selectAll<SVGRectElement, LinkStatus>('rect.status_stopped')
// .data(statuses.filter((link_status: LinkStatus) => link_status.status === 'stopped'));
// const status_stopped_enter = status_stopped.enter().append<SVGRectElement>('rect'); const STOPPED_STATUS_RECT_WIDTH = 10;
// const STOPPED_STATUS_RECT_WIDTH = 10; status_stopped
.merge(status_stopped_enter)
.attr('class', 'status_stopped')
.attr('x', (ls: LinkStatus) => ls.x - STOPPED_STATUS_RECT_WIDTH / 2)
.attr('y', (ls: LinkStatus) => ls.y - STOPPED_STATUS_RECT_WIDTH / 2)
.attr('width', STOPPED_STATUS_RECT_WIDTH)
.attr('height', STOPPED_STATUS_RECT_WIDTH)
.attr('fill', 'red');
// status_stopped status_stopped.exit().remove();
// .merge(status_stopped_enter)
// .attr('class', 'status_stopped')
// .attr('x', (ls: LinkStatus) => ls.x - STOPPED_STATUS_RECT_WIDTH / 2)
// .attr('y', (ls: LinkStatus) => ls.y - STOPPED_STATUS_RECT_WIDTH / 2)
// .attr('width', STOPPED_STATUS_RECT_WIDTH)
// .attr('height', STOPPED_STATUS_RECT_WIDTH)
// .attr('fill', 'red');
// status_stopped.exit().remove(); const status_suspended = link_group
.selectAll<SVGCircleElement, LinkStatus>('circle.status_suspended')
.data(statuses.filter((link_status: LinkStatus) => link_status.status === 'suspended'));
const status_suspended = link_group const status_suspended_enter = status_suspended.enter().append<SVGCircleElement>('circle');
.selectAll<SVGRectElement, LinkStatus>('rect.status_suspended')
.data(statuses.filter((link_status: LinkStatus) => link_status.status === 'suspended'));
const status_suspended_enter = status_suspended.enter().append<SVGRectElement>('rect');
status_suspended
.merge(status_suspended_enter)
.attr('class', 'status_suspended')
.attr('width', 40)
.attr('height', 20)
.attr('x', (ls: LinkStatus) => ls.x - 10)
.attr('y', (ls: LinkStatus) => ls.y - 10)
.attr('rx', 8)
.attr('ry', 8)
.style('fill', 'white')
.attr('stroke', '#FFFF00')
.attr('stroke-width', 3);
status_suspended.exit().remove();
const status_suspended_label = link_group status_suspended
.selectAll<SVGTextElement, LinkStatus>('text.status_suspended_label') .merge(status_suspended_enter)
.data(statuses.filter((link_status: LinkStatus) => link_status.status === 'suspended')); .attr('class', 'status_suspended')
const status_suspended_label_enter = status_suspended_label.enter().append<SVGTextElement>('text'); .attr('cx', (ls: LinkStatus) => ls.x)
status_suspended_label .attr('cy', (ls: LinkStatus) => ls.y)
.merge(status_suspended_label_enter) .attr('r', 6)
.attr('class', 'status_suspended_label') .attr('fill', '#FFFF00');
.text((ls: LinkStatus) => ls.port)
.attr('x', (ls: LinkStatus) => ls.x - 5)
.attr('y', (ls: LinkStatus) => ls.y + 5)
.attr('fill', `black`);
status_suspended_label.exit().remove();
// const status_suspended = link_group status_suspended.exit().remove();
// .selectAll<SVGCircleElement, LinkStatus>('circle.status_suspended') }
// .data(statuses.filter((link_status: LinkStatus) => link_status.status === 'suspended'));
// const status_suspended_enter = status_suspended.enter().append<SVGCircleElement>('circle');
// status_suspended
// .merge(status_suspended_enter)
// .attr('class', 'status_suspended')
// .attr('cx', (ls: LinkStatus) => ls.x)
// .attr('cy', (ls: LinkStatus) => ls.y)
// .attr('r', 6)
// .attr('fill', '#FFFF00');
// status_suspended.exit().remove();
}); });
} }
} }

8
src/app/components/project-map/project-map.component.html
View File

@ -109,8 +109,11 @@
<mat-menu #viewMenu="matMenu" [overlapTrigger]="false"> <mat-menu #viewMenu="matMenu" [overlapTrigger]="false">
<div class="options-item"> <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)"> <mat-checkbox [ngModel]="isInterfaceLabelVisible" (change)="toggleShowInterfaceLabels($event.checked)">
Show interface labels Show interface labels separately
</mat-checkbox><br/> </mat-checkbox><br/>
<mat-checkbox [ngModel]="isConsoleVisible" (change)="toggleShowConsole($event.checked)"> <mat-checkbox [ngModel]="isConsoleVisible" (change)="toggleShowConsole($event.checked)">
Show console Show console
@ -130,9 +133,6 @@
<mat-checkbox [ngModel]="project.snap_to_grid" (change)="toggleSnapToGrid($event.checked)"> <mat-checkbox [ngModel]="project.snap_to_grid" (change)="toggleSnapToGrid($event.checked)">
Snap to grid Snap to grid
</mat-checkbox><br/> </mat-checkbox><br/>
<mat-checkbox [ngModel]="mapSettingsService.integrateLinkLabelsToLinks" (change)="toggleIntegrateLinkLabelsToLinks($event.checked)">
Integrate link labels to links
</mat-checkbox>
</div> </div>
</mat-menu> </mat-menu>

30
src/app/components/project-map/project-map.component.ts
View File

@ -258,11 +258,12 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
this.projectService.open(this.server, this.project.project_id); this.projectService.open(this.server, this.project.project_id);
this.title.setTitle(this.project.name); this.title.setTitle(this.project.name);
if (this.mapSettingsService.interfaceLabels.has(project.project_id)) { // old settings
this.isInterfaceLabelVisible = this.mapSettingsService.interfaceLabels.get(project.project_id); // if (this.mapSettingsService.interfaceLabels.has(project.project_id)) {
} else { // this.isInterfaceLabelVisible = this.mapSettingsService.interfaceLabels.get(project.project_id);
this.isInterfaceLabelVisible = this.project.show_interface_labels; // } else {
} // this.isInterfaceLabelVisible = this.project.show_interface_labels;
// }
this.recentlyOpenedProjectService.setServerId(this.server.id.toString()); this.recentlyOpenedProjectService.setServerId(this.server.id.toString());
this.recentlyOpenedProjectService.setProjectId(this.project.project_id); this.recentlyOpenedProjectService.setProjectId(this.project.project_id);
@ -672,9 +673,20 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
this.toolsService.drawLinkToolActivation(this.tools.draw_link); this.toolsService.drawLinkToolActivation(this.tools.draw_link);
} }
public toggleShowInterfaceLabels(visible: boolean) { public toggleShowInterfaceLabels(enabled: boolean) {
this.isInterfaceLabelVisible = visible; this.isInterfaceLabelVisible = enabled;
this.mapSettingsService.toggleShowInterfaceLabels(this.project.project_id, this.isInterfaceLabelVisible); this.mapSettingsService.toggleShowInterfaceLabels(this.project.project_id, this.isInterfaceLabelVisible);
this.mapSettingsService.integrateLinkLabelsToLinks = false;
this.mapSettingsService.mapRenderedEmitter.emit(true);
}
public toggleIntegrateLinkLabelsToLinks(enabled: boolean) {
this.isInterfaceLabelVisible = false;
this.mapSettingsService.toggleShowInterfaceLabels(this.project.project_id, this.isInterfaceLabelVisible);
this.mapSettingsService.integrateLinkLabelsToLinks = enabled;
this.mapSettingsService.mapRenderedEmitter.emit(true);
} }
public toggleShowConsole(visible: boolean) { public toggleShowConsole(visible: boolean) {
@ -721,10 +733,6 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
this.project.snap_to_grid = enabled; this.project.snap_to_grid = enabled;
} }
public toggleIntegrateLinkLabelsToLinks(enabled: boolean) {
this.mapSettingsService.integrateLinkLabelsToLinks = enabled;
}
private showMessage(msg) { private showMessage(msg) {
if (this.notificationsVisibility) { if (this.notificationsVisibility) {
if (msg.type === 'error') this.toasterService.error(msg.message); if (msg.type === 'error') this.toasterService.error(msg.message);