ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-02-21 10:01:44 +00:00
Code Issues Actions 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 { LinkStatus } from '../models/link-status';
import { MapLink } from '../models/map/map-link';
import { MapSettingsService } from '../../services/mapsettings.service';
@Injectable()
export class InterfaceStatusWidget implements Widget {
constructor() {}
private mapSettingsService: MapSettingsService
constructor(
private _mapSettingsService: MapSettingsService
) {
this.mapSettingsService = _mapSettingsService;
}
public draw(view: SVGSelection) {
const self = this;
view.each(function(this: SVGGElement, l: MapLink) {
const link_group = select<SVGGElement, MapLink>(this);
const link_path = link_group.select<SVGPathElement>('path');
@ -33,150 +42,169 @@ export class InterfaceStatusWidget implements Widget {
}
}
const status_started = link_group
.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();
link_group
.selectAll<SVGCircleElement, LinkStatus>('circle.status_started').remove();
link_group
.selectAll<SVGCircleElement, LinkStatus>('circle.status_stopped').remove();
link_group
.selectAll<SVGCircleElement, LinkStatus>('circle.status_suspended').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();
link_group
.selectAll<SVGRectElement, LinkStatus>('rect.status_started').remove();
link_group
.selectAll<SVGTextElement, LinkStatus>('text.status_started_label').remove();
link_group
.selectAll<SVGRectElement, LinkStatus>('rect.status_stopped').remove();
link_group
.selectAll<SVGTextElement, LinkStatus>('text.status_stopped_label').remove();
link_group
.selectAll<SVGRectElement, LinkStatus>('rect.status_suspended').remove();
link_group
.selectAll<SVGTextElement, LinkStatus>('text.status_suspended_label').remove();
// const status_started = link_group
// .selectAll<SVGCircleElement, LinkStatus>('circle.status_started')
// .data(statuses.filter((link_status: LinkStatus) => link_status.status === 'started'));
if (self.mapSettingsService.integrateLinkLabelsToLinks) {
const status_started = link_group
.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
// .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_started_enter = status_started.enter().append<SVGCircleElement>('circle');
// 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
.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();
status_started.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_stopped = link_group
.selectAll<SVGRectElement, LinkStatus>('rect.status_stopped')
.data(statuses.filter((link_status: LinkStatus) => link_status.status === 'stopped'));
// 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');
// 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
// .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();
// 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
.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_enter = status_suspended.enter().append<SVGCircleElement>('circle');
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();
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');
// const status_suspended = link_group
// .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();
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">
<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
Show interface labels separately
</mat-checkbox><br/>
<mat-checkbox [ngModel]="isConsoleVisible" (change)="toggleShowConsole($event.checked)">
Show console
@ -130,9 +133,6 @@
<mat-checkbox [ngModel]="project.snap_to_grid" (change)="toggleSnapToGrid($event.checked)">
Snap to grid
</mat-checkbox><br/>
<mat-checkbox [ngModel]="mapSettingsService.integrateLinkLabelsToLinks" (change)="toggleIntegrateLinkLabelsToLinks($event.checked)">
Integrate link labels to links
</mat-checkbox>
</div>
</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.title.setTitle(this.project.name);
if (this.mapSettingsService.interfaceLabels.has(project.project_id)) {
this.isInterfaceLabelVisible = this.mapSettingsService.interfaceLabels.get(project.project_id);
} else {
this.isInterfaceLabelVisible = this.project.show_interface_labels;
}
// old settings
// if (this.mapSettingsService.interfaceLabels.has(project.project_id)) {
// this.isInterfaceLabelVisible = this.mapSettingsService.interfaceLabels.get(project.project_id);
// } else {
// this.isInterfaceLabelVisible = this.project.show_interface_labels;
// }
this.recentlyOpenedProjectService.setServerId(this.server.id.toString());
this.recentlyOpenedProjectService.setProjectId(this.project.project_id);
@ -672,9 +673,20 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
this.toolsService.drawLinkToolActivation(this.tools.draw_link);
}
public toggleShowInterfaceLabels(visible: boolean) {
this.isInterfaceLabelVisible = visible;
public toggleShowInterfaceLabels(enabled: boolean) {
this.isInterfaceLabelVisible = enabled;
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) {
@ -721,10 +733,6 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
this.project.snap_to_grid = enabled;
}
public toggleIntegrateLinkLabelsToLinks(enabled: boolean) {
this.mapSettingsService.integrateLinkLabelsToLinks = enabled;
}
private showMessage(msg) {
if (this.notificationsVisibility) {
if (msg.type === 'error') this.toasterService.error(msg.message);