ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2024-12-20 21:43:06 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Update interface-status.ts

Browse Source
This commit is contained in:
piotrpekala7 2020-07-09 13:19:03 +02:00
parent 1b05924070
commit f185f97ad5
1 changed files with 56 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -18,35 +18,81 @@ export class InterfaceStatusWidget implements Widget {
let statuses = []; let statuses = [];
if (link_path.node()) { if (link_path.node()) {
const start_point: SVGPoint = link_path.node().getPointAtLength(45); const start_point: SVGPoint = link_path.node().getPointAtLength(100);
const end_point: SVGPoint = link_path.node().getPointAtLength(link_path.node().getTotalLength() - 45); const end_point: SVGPoint = link_path.node().getPointAtLength(link_path.node().getTotalLength() - 100);
if (link_path.node().getTotalLength() > 2 * 45 + 10) { if (link_path.node().getTotalLength() > 2 * 45 + 10) {
if (l.source && l.target) { if (l.source && l.target) {
let sourcePort = l.nodes.find(node => node.nodeId === l.source.id).label.text;
let destinationPort = l.nodes.find(node => node.nodeId === l.target.id).label.text;
statuses = [ statuses = [
new LinkStatus(start_point.x, start_point.y, (l.capturing && l.suspend) ? 'suspended' : l.source.status), new LinkStatus(start_point.x, start_point.y, (l.capturing && l.suspend) ? 'suspended' : l.source.status, sourcePort),
new LinkStatus(end_point.x, end_point.y, (l.capturing && l.suspend) ? 'suspended' : l.target.status) new LinkStatus(end_point.x, end_point.y, (l.capturing && l.suspend) ? 'suspended' : l.target.status, destinationPort)
]; ];
} }
} }
} }
// start----------------------------------------------
const status_started = link_group const status_started = link_group
.selectAll<SVGCircleElement, LinkStatus>('circle.status_started') .selectAll<SVGGElement, LinkStatus>('g.status_started')
.data(statuses.filter((link_status: LinkStatus) => link_status.status === 'started')); .data(statuses.filter((link_status: LinkStatus) => link_status.status === 'started'));
const status_started_enter = status_started.enter().append<SVGCircleElement>('circle'); const status_started_enter = status_started.enter().append<SVGGElement>('g');
status_started_enter.exit().remove();
status_started.exit().remove();
status_started status_started
.append<SVGGElement>('g')
.merge(status_started_enter) .merge(status_started_enter)
.attr('class', 'status_started') .attr('class', 'status_started')
.attr('cx', (ls: LinkStatus) => ls.x) .append<SVGRectElement>('rect')
.attr('cy', (ls: LinkStatus) => ls.y) .attr('width', 30)
.attr('r', 6) .attr('height', 20)
.attr('fill', '#2ecc71'); .attr('x', (ls: LinkStatus) => ls.x)
.attr('y', (ls: LinkStatus) => ls.y)
.attr('cx', 5)
.attr('cy', 5)
.style('fill', 'white')
.attr('stroke', '#2ecc71');
status_started_enter.exit().remove();
status_started.exit().remove(); status_started.exit().remove();
status_started
.append<SVGGElement>('g')
.merge(status_started_enter)
.attr('class', 'status_started')
.append<SVGTextElement>('text')
.text((ls: LinkStatus) => ls.port)
// .attr('width', 20)
// .attr('height', 10)
.attr('x', (ls: LinkStatus) => ls.x)
.attr('y', (ls: LinkStatus) => ls.y - 5)
.attr('fill', `black`);
status_started_enter.exit().remove();
status_started.exit().remove();
// end----------------------------------------------
// const status_started = link_group
// .selectAll<SVGCircleElement, LinkStatus>('circle.status_started')
// .data(statuses.filter((link_status: LinkStatus) => link_status.status === 'started'));
// const status_started_enter = status_started.enter().append<SVGCircleElement>('circle');
// 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');
// status_started.exit().remove();
const status_stopped = link_group const status_stopped = link_group
.selectAll<SVGRectElement, LinkStatus>('rect.status_stopped') .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'));