ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-01-01 18:46:43 +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-13 16:52:33 +02:00
parent 9a974ae72d
commit 4c528bea07
1 changed files with 82 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -33,59 +33,14 @@ export class InterfaceStatusWidget implements Widget {
} }
} }
// start----------------------------------------------
// const status_started = link_group
// .selectAll<SVGGElement, LinkStatus>('g.status_started')
// .data(statuses.filter((link_status: LinkStatus) => link_status.status === 'started'));
// status_started.exit().remove();
// const status_started_enter = status_started.enter()
// .append<SVGGElement>('g')
// .attr('class', 'status_started');
// status_started_enter
// .append<SVGRectElement>('rect')
// .attr('width', 30)
// .attr('height', 20)
// .attr('x', (ls: LinkStatus) => ls.x)
// .attr('y', (ls: LinkStatus) => ls.y)
// .attr('rx', 8)
// .attr('ry', 8)
// .style('fill', 'white')
// .attr('stroke', '#2ecc71')
// .attr('stroke-width', 3);
// status_started_enter
// .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
// .merge(status_started_enter);
// status_started_enter.exit().remove();
// status_started.exit().remove();
// end----------------------------------------------
// start2
const status_started = link_group const status_started = link_group
.selectAll<SVGRectElement, LinkStatus>('rect.status_started') .selectAll<SVGRectElement, LinkStatus>('rect.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<SVGRectElement>('rect'); const status_started_enter = status_started.enter().append<SVGRectElement>('rect');
status_started status_started
.merge(status_started_enter) .merge(status_started_enter)
.attr('class', 'status_started') .attr('class', 'status_started')
.attr('width', 30) .attr('width', 40)
.attr('height', 20) .attr('height', 20)
.attr('x', (ls: LinkStatus) => ls.x - 10) .attr('x', (ls: LinkStatus) => ls.x - 10)
.attr('y', (ls: LinkStatus) => ls.y - 10) .attr('y', (ls: LinkStatus) => ls.y - 10)
@ -94,33 +49,20 @@ export class InterfaceStatusWidget implements Widget {
.style('fill', 'white') .style('fill', 'white')
.attr('stroke', '#2ecc71') .attr('stroke', '#2ecc71')
.attr('stroke-width', 3); .attr('stroke-width', 3);
status_started.exit().remove(); status_started.exit().remove();
const status_started_label = link_group const status_started_label = link_group
.selectAll<SVGTextElement, LinkStatus>('text.status_started_label') .selectAll<SVGTextElement, LinkStatus>('text.status_started_label')
.data(statuses.filter((link_status: LinkStatus) => link_status.status === 'started')); .data(statuses.filter((link_status: LinkStatus) => link_status.status === 'started'));
const status_started_label_enter = status_started_label.enter().append<SVGTextElement>('text'); const status_started_label_enter = status_started_label.enter().append<SVGTextElement>('text');
status_started_label status_started_label
.merge(status_started_label_enter) .merge(status_started_label_enter)
.attr('class', 'status_started_label') .attr('class', 'status_started_label')
.text((ls: LinkStatus) => ls.port) .text((ls: LinkStatus) => ls.port)
// .attr('width', 20)
// .attr('height', 10)
.attr('x', (ls: LinkStatus) => ls.x - 5) .attr('x', (ls: LinkStatus) => ls.x - 5)
.attr('y', (ls: LinkStatus) => ls.y + 5) .attr('y', (ls: LinkStatus) => ls.y + 5)
.attr('fill', `black`); .attr('fill', `black`);
status_started_label.exit().remove(); status_started_label.exit().remove();
// end2
// const status_started = link_group // const status_started = link_group
// .selectAll<SVGCircleElement, LinkStatus>('circle.status_started') // .selectAll<SVGCircleElement, LinkStatus>('circle.status_started')
@ -142,37 +84,99 @@ export class InterfaceStatusWidget implements Widget {
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'));
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;
status_stopped status_stopped
.merge(status_stopped_enter) .merge(status_stopped_enter)
.attr('class', 'status_stopped') .attr('class', 'status_stopped')
.attr('x', (ls: LinkStatus) => ls.x - STOPPED_STATUS_RECT_WIDTH / 2) .attr('width', 40)
.attr('y', (ls: LinkStatus) => ls.y - STOPPED_STATUS_RECT_WIDTH / 2) .attr('height', 20)
.attr('width', STOPPED_STATUS_RECT_WIDTH) .attr('x', (ls: LinkStatus) => ls.x - 10)
.attr('height', STOPPED_STATUS_RECT_WIDTH) .attr('y', (ls: LinkStatus) => ls.y - 10)
.attr('fill', 'red'); .attr('rx', 8)
.attr('ry', 8)
.style('fill', 'white')
.attr('stroke', 'red')
.attr('stroke-width', 3);
status_stopped.exit().remove(); 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_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 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.exit().remove();
const status_suspended = link_group const status_suspended = link_group
.selectAll<SVGCircleElement, LinkStatus>('circle.status_suspended') .selectAll<SVGRectElement, LinkStatus>('rect.status_suspended')
.data(statuses.filter((link_status: LinkStatus) => link_status.status === 'suspended')); .data(statuses.filter((link_status: LinkStatus) => link_status.status === 'suspended'));
const status_suspended_enter = status_suspended.enter().append<SVGRectElement>('rect');
const status_suspended_enter = status_suspended.enter().append<SVGCircleElement>('circle');
status_suspended status_suspended
.merge(status_suspended_enter) .merge(status_suspended_enter)
.attr('class', 'status_suspended') .attr('class', 'status_suspended')
.attr('cx', (ls: LinkStatus) => ls.x) .attr('width', 40)
.attr('cy', (ls: LinkStatus) => ls.y) .attr('height', 20)
.attr('r', 6) .attr('x', (ls: LinkStatus) => ls.x - 10)
.attr('fill', '#FFFF00'); .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(); 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();
// 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();
}); });
} }
} }