mkrieger/patchcablemgr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

0.3.12

Browse Source
This commit is contained in:
Garrett K 2021-01-22 16:09:46 +00:00
parent bee4d2ef04
commit bc21dae866
8 changed files with 379 additions and 286 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

580
assets/pages/jquery.drawConnections.js
View File

@ -1,231 +1,5 @@
function getDimensions(elem){ // ### Cabinet Functions ###
function crawlCabinetConnections(selectedPort){
var canvasLeft = $('#canvasBuildSpace').offset().left;
var canvasTop = $('#canvasBuildSpace').offset().top;
var elemLeft = $(elem).offset().left;
var elemTop = $(elem).offset().top;
var elemLeftOrig = elemLeft;
var elemTopOrig = elemTop;
var elemWidth = $(elem).width();
var elemHeight = $(elem).height();
var elemCenterX = elemLeft - canvasLeft + (elemWidth / 2);
var elemCenterY = elemTop - canvasTop + (elemHeight / 2);
var elemLeft = elemLeft - canvasLeft;
var elemRight = elemLeft + elemWidth;
var elemRightOrig = elemLeftOrig + elemWidth;
var elemTop = elemTop - canvasTop;
var elemBottom = elemTop + elemHeight;
var dimensions = {
leftOrig: elemLeftOrig,
topOrig: elemTopOrig,
rightOrig: elemRightOrig,
left: elemLeft,
right: elemRight,
top: elemTop,
bottom: elemBottom,
centerX: elemCenterX,
centerY: elemCenterY,
width: elemWidth,
height: elemHeight
};
return dimensions;
}
function drawCabinetConnections(elementArray){
cabinetCtx.strokeStyle = 'LightSkyBlue';
cabinetCtx.lineWidth = 3;
cabinetCtx.beginPath();
//console.log('Debug (elementArray): '+JSON.stringify(elementArray));
$.each(elementArray, function(index, element){
var elemA = element[0];
var elemB = element[1];
var connectionStyle = $('#connectionStyle').val();
var elemACabinet = $(elemA).closest('.cabinetContainer');
var elemACabinetID = $(elemACabinet).data('cabinetId');
var elemACabinetDimensions = getDimensions(elemACabinet);
var elemADimensions = getDimensions(elemA);
var elemAPartition = $(elemA).closest('.partition');
var elemAPartitionDimensions = getDimensions(elemAPartition);
cabinetCtx.moveTo(elemADimensions.centerX, elemADimensions.centerY);
if(typeof elemB == 'object') {
var elemBCabinet = $(elemB).closest('.cabinetContainer');
var elemBCabinetID = $(elemBCabinet).data('cabinetId');
var elemBCabinetDimensions = getDimensions(elemBCabinet);
var elemBDimensions = getDimensions(elemB);
var elemBPartition = $(elemB).closest('.partition');
var elemBPartitionDimensions = getDimensions(elemBPartition);
if(elemBDimensions.top >= elemADimensions.top) {
var elemAPartHBoundary = elemAPartitionDimensions.bottom;
var elemBPartHBoundary = elemBPartitionDimensions.top;
} else {
var elemAPartHBoundary = elemAPartitionDimensions.top;
var elemBPartHBoundary = elemBPartitionDimensions.bottom;
}
if(connectionStyle == 0) {
cabinetCtx.lineTo(elemADimensions.centerX, elemAPartHBoundary);
cabinetCtx.lineTo(elemACabinetDimensions.left - canvasInset, elemAPartHBoundary);
if(elemACabinetID != elemBCabinetID) {
// Ports are in different cabinets
if(elemACabinetDimensions.top >= elemBCabinetDimensions.top) {
// Connection should be routed up
var elemACabinetHBoundary = elemACabinetDimensions.top - canvasInset;
} else {
// Connection should be routed down
var elemACabinetHBoundary = elemACabinetDimensions.bottom + canvasInset;
}
cabinetCtx.lineTo(elemACabinetDimensions.left - canvasInset, elemACabinetHBoundary);
cabinetCtx.lineTo(elemBCabinetDimensions.left - canvasInset, elemACabinetHBoundary);
}
cabinetCtx.lineTo(elemBCabinetDimensions.left - canvasInset, elemBPartHBoundary);
cabinetCtx.lineTo(elemBDimensions.centerX, elemBPartHBoundary);
cabinetCtx.lineTo(elemBDimensions.centerX, elemBDimensions.centerY);
} else if(connectionStyle == 1) {
cabinetCtx.lineTo(elemBDimensions.centerX, elemBDimensions.centerY);
} else if(connectionStyle == 2) {
var arcSize = 30;
cabinetCtx.bezierCurveTo((elemADimensions.centerX - arcSize), elemADimensions.centerY, (elemBDimensions.centerX - arcSize), elemBDimensions.centerY, elemBDimensions.centerX, elemBDimensions.centerY);
} else {
cabinetCtx.lineTo(elemBDimensions.centerX, elemBDimensions.centerY);
}
} else {
cabinetCtx.lineTo(elemADimensions.centerX, elemAPartitionDimensions.top);
cabinetCtx.lineTo(elemACabinetDimensions.left - canvasInset, elemAPartitionDimensions.top);
cabinetCtx.lineTo(elemACabinetDimensions.left - canvasInset, elemACabinetDimensions.top - canvasInset);
var left = elemACabinetDimensions.leftOrig - canvasInset;
var top = elemACabinetDimensions.topOrig - canvasInset;
addCabButton(left, top, elemB);
}
});
cabinetCtx.stroke();
}
function drawPathConnections(){
var pathConections = $(document).data('pathConections');
pathCtx.strokeStyle = 'LightSkyBlue';
pathCtx.lineWidth = 3;
pathCtx.beginPath();
$.each(pathConections, function(index, element){
var elemA = element[0];
var elemB = element[1];
var elemADimensions = getDimensions(elemA);
var elemBDimensions = getDimensions(elemB);
pathCtx.moveTo(elemADimensions.centerX, elemADimensions.centerY);
pathCtx.lineTo(elemBDimensions.centerX, elemBDimensions.centerY);
});
pathCtx.stroke();
}
function drawTrunk(elementArray){
cabinetCtx.strokeStyle = 'MidnightBlue';
cabinetCtx.lineWidth = 3;
cabinetCtx.beginPath();
$.each(elementArray, function(index, element){
var vertical = canvasInset + (5*index);
var elemA = element[0];
var elemB = element[1];
var canvasDimensions = getDimensions($('#canvasBuildSpace'));
var elemACabinet = $(elemA).closest('.cabinetContainer');
var elemACabinetID = $(elemACabinet).data('cabinetId');
var elemACabinetDimensions = getDimensions($(elemA).closest('.cabinetContainer'));
var elemADimensions = getDimensions(elemA);
cabinetCtx.moveTo(elemADimensions.right, elemADimensions.centerY);
if(typeof elemB == 'object') {
var elemBCabinet = $(elemB).closest('.cabinetContainer');
var elemBCabinetID = $(elemBCabinet).data('cabinetId');
var elemBCabinetDimensions = getDimensions($(elemB).closest('.cabinetContainer'));
var elemBDimensions = getDimensions(elemB);
cabinetCtx.lineTo(elemACabinetDimensions.right + vertical, elemADimensions.centerY);
if(elemACabinetID != elemBCabinetID) {
if(elemACabinetDimensions.top <= elemBCabinetDimensions.top) {
elemBCabinetHBoundary = elemBCabinetDimensions.top - vertical;
} else {
elemBCabinetHBoundary = elemBCabinetDimensions.bottom + vertical;
}
cabinetCtx.lineTo(elemACabinetDimensions.right + vertical, elemBCabinetHBoundary);
cabinetCtx.lineTo(elemBCabinetDimensions.right + vertical, elemBCabinetHBoundary);
}
cabinetCtx.lineTo(elemBCabinetDimensions.right + vertical, elemBDimensions.centerY);
cabinetCtx.lineTo(elemBDimensions.right, elemBDimensions.centerY);
} else {
cabinetCtx.lineTo(elemACabinetDimensions.right + vertical, elemADimensions.centerY);
cabinetCtx.lineTo(elemACabinetDimensions.right + vertical, elemACabinetDimensions.top - vertical);
cabinetCtx.strokeRect(elemADimensions.left, elemADimensions.top, elemADimensions.width, elemADimensions.height);
var left = elemACabinetDimensions.rightOrig + vertical;
var top = elemACabinetDimensions.topOrig - vertical;
addCabButton(left, top, elemB);
}
});
cabinetCtx.stroke();
}
function addCabButton(left, top, globalID){
var addCab = $('<a class="addCabButton" data-global-id="'+globalID+'" href="#"style="z-index:1001; position:absolute;"><i class="fa fa-plus" style="color:#039cfd; background-color:white;"></i></a>');
$('#canvasBuildSpace').after(addCab);
var left = left - ($(addCab).width()/2);
var top = top - ($(addCab).height()/2);
$(addCab).css({'left':left+'px', 'top':top+'px'});
makeAddCabButtonClickable(addCab);
}
function highlightElement(elemArray, color){
$.each(elemArray, function(index, elem){
cabinetCtx.strokeStyle = color;
cabinetCtx.beginPath();
var elemDimensions = getDimensions(elem);
cabinetCtx.strokeRect(elemDimensions.left, elemDimensions.top, elemDimensions.width, elemDimensions.height);
});
}
function clearPaths(){
var canvasHeight = $('#canvasBuildSpace').height();
var canvasWidth = $('#canvasBuildSpace').width();
cabinetCtx.clearRect(0, 0, canvasWidth, canvasHeight);
$('a.addCabButton').remove();
drawPathConnections();
}
function clearPathConnections(){
var canvasHeight = $('#canvasBuildSpace').height();
var canvasWidth = $('#canvasBuildSpace').width();
pathCtx.clearRect(0, 0, canvasWidth, canvasHeight);
}
function crawlPath(selectedPort){
var portArray = []; var portArray = [];
var connectionArray = []; var connectionArray = [];
var trunkArray = []; var trunkArray = [];
@ -322,26 +96,329 @@ function crawlPath(selectedPort){
}; };
} }
function drawCabinetConnections(elementArray){
cabinetCtx.strokeStyle = 'LightSkyBlue';
cabinetCtx.lineWidth = 3;
cabinetCtx.beginPath();
//console.log('Debug (elementArray): '+JSON.stringify(elementArray));
$.each(elementArray, function(index, element){
var elemA = element[0];
var elemB = element[1];
var connectionStyle = $('#connectionStyle').val();
var elemACabinet = $(elemA).closest('.cabinetContainer');
var elemACabinetID = $(elemACabinet).data('cabinetId');
var elemACabinetDimensions = getDimensions(elemACabinet);
var elemADimensions = getDimensions(elemA);
var elemAPartition = $(elemA).closest('.partition');
var elemAPartitionDimensions = getDimensions(elemAPartition);
cabinetCtx.moveTo(elemADimensions.centerX, elemADimensions.centerY);
if(typeof elemB == 'object') {
var elemBCabinet = $(elemB).closest('.cabinetContainer');
var elemBCabinetID = $(elemBCabinet).data('cabinetId');
var elemBCabinetDimensions = getDimensions(elemBCabinet);
var elemBDimensions = getDimensions(elemB);
var elemBPartition = $(elemB).closest('.partition');
var elemBPartitionDimensions = getDimensions(elemBPartition);
if(elemBDimensions.top >= elemADimensions.top) {
var elemAPartHBoundary = elemAPartitionDimensions.bottom;
var elemBPartHBoundary = elemBPartitionDimensions.top;
} else {
var elemAPartHBoundary = elemAPartitionDimensions.top;
var elemBPartHBoundary = elemBPartitionDimensions.bottom;
}
if(connectionStyle == 0) {
cabinetCtx.lineTo(elemADimensions.centerX, elemAPartHBoundary);
cabinetCtx.lineTo(elemACabinetDimensions.left - canvasInset, elemAPartHBoundary);
if(elemACabinetID != elemBCabinetID) {
// Ports are in different cabinets
if(elemACabinetDimensions.top >= elemBCabinetDimensions.top) {
// Connection should be routed up
var elemACabinetHBoundary = elemACabinetDimensions.top - canvasInset;
} else {
// Connection should be routed down
var elemACabinetHBoundary = elemACabinetDimensions.bottom + canvasInset;
}
cabinetCtx.lineTo(elemACabinetDimensions.left - canvasInset, elemACabinetHBoundary);
cabinetCtx.lineTo(elemBCabinetDimensions.left - canvasInset, elemACabinetHBoundary);
}
cabinetCtx.lineTo(elemBCabinetDimensions.left - canvasInset, elemBPartHBoundary);
cabinetCtx.lineTo(elemBDimensions.centerX, elemBPartHBoundary);
cabinetCtx.lineTo(elemBDimensions.centerX, elemBDimensions.centerY);
} else if(connectionStyle == 1) {
cabinetCtx.lineTo(elemBDimensions.centerX, elemBDimensions.centerY);
} else if(connectionStyle == 2) {
var arcSize = 30;
cabinetCtx.bezierCurveTo((elemADimensions.centerX - arcSize), elemADimensions.centerY, (elemBDimensions.centerX - arcSize), elemBDimensions.centerY, elemBDimensions.centerX, elemBDimensions.centerY);
} else {
cabinetCtx.lineTo(elemBDimensions.centerX, elemBDimensions.centerY);
}
} else {
cabinetCtx.lineTo(elemADimensions.centerX, elemAPartitionDimensions.top);
cabinetCtx.lineTo(elemACabinetDimensions.left - canvasInset, elemAPartitionDimensions.top);
cabinetCtx.lineTo(elemACabinetDimensions.left - canvasInset, elemACabinetDimensions.top - canvasInset);
var left = elemACabinetDimensions.leftOrig - canvasInset;
var top = elemACabinetDimensions.topOrig - canvasInset;
addCabButton(left, top, elemB);
}
});
cabinetCtx.stroke();
}
function drawCabinetTrunks(elementArray){
cabinetCtx.strokeStyle = 'MidnightBlue';
cabinetCtx.lineWidth = 3;
cabinetCtx.beginPath();
$.each(elementArray, function(index, element){
var vertical = canvasInset + (5*index);
var elemA = element[0];
var elemB = element[1];
var canvasDimensions = getDimensions($('#canvasCabinet'));
var elemACabinet = $(elemA).closest('.cabinetContainer');
var elemACabinetID = $(elemACabinet).data('cabinetId');
var elemACabinetDimensions = getDimensions($(elemA).closest('.cabinetContainer'));
var elemADimensions = getDimensions(elemA);
cabinetCtx.moveTo(elemADimensions.right, elemADimensions.centerY);
if(typeof elemB == 'object') {
var elemBCabinet = $(elemB).closest('.cabinetContainer');
var elemBCabinetID = $(elemBCabinet).data('cabinetId');
var elemBCabinetDimensions = getDimensions($(elemB).closest('.cabinetContainer'));
var elemBDimensions = getDimensions(elemB);
cabinetCtx.lineTo(elemACabinetDimensions.right + vertical, elemADimensions.centerY);
if(elemACabinetID != elemBCabinetID) {
if(elemACabinetDimensions.top <= elemBCabinetDimensions.top) {
elemBCabinetHBoundary = elemBCabinetDimensions.top - vertical;
} else {
elemBCabinetHBoundary = elemBCabinetDimensions.bottom + vertical;
}
cabinetCtx.lineTo(elemACabinetDimensions.right + vertical, elemBCabinetHBoundary);
cabinetCtx.lineTo(elemBCabinetDimensions.right + vertical, elemBCabinetHBoundary);
}
cabinetCtx.lineTo(elemBCabinetDimensions.right + vertical, elemBDimensions.centerY);
cabinetCtx.lineTo(elemBDimensions.right, elemBDimensions.centerY);
} else {
cabinetCtx.lineTo(elemACabinetDimensions.right + vertical, elemADimensions.centerY);
cabinetCtx.lineTo(elemACabinetDimensions.right + vertical, elemACabinetDimensions.top - vertical);
cabinetCtx.strokeRect(elemADimensions.left, elemADimensions.top, elemADimensions.width, elemADimensions.height);
var left = elemACabinetDimensions.rightOrig + vertical;
var top = elemACabinetDimensions.topOrig - vertical;
addCabButton(left, top, elemB);
}
});
cabinetCtx.stroke();
}
function clearCabinetConnections(){
var canvasHeight = $('#canvasCabinet').height();
var canvasWidth = $('#canvasCabinet').width();
cabinetCtx.clearRect(0, 0, canvasWidth, canvasHeight);
$('a.addCabButton').remove();
drawPathConnections();
drawPathTrunks();
}
// ### Path Functions ###
function drawPath(){
resizeCanvas();
clearPathConnections();
crawlPathConnections();
crawlPathTrunks();
drawPathConnections();
drawPathTrunks();
}
function crawlPathConnections(){ function crawlPathConnections(){
var pathConections = {}; var pathConnections = {};
var connectorElementArray = $('#containerFullPath').find('.port'); var connectorElementArray = $('#containerFullPath').find('.port');
$.each(connectorElementArray, function(index, element){ $.each(connectorElementArray, function(index, element){
if($(element).data('connectionPairId') !== undefined) { if($(element).data('connectionPairId') !== undefined) {
var connectionPairID = $(element).data('connectionPairId'); var connectionPairID = $(element).data('connectionPairId');
if(pathConections[connectionPairID] === undefined) { if(pathConnections[connectionPairID] === undefined) {
console.log('here3'); console.log('here3');
pathConections[connectionPairID] = []; pathConnections[connectionPairID] = [];
} }
pathConections[connectionPairID].push($(element)); pathConnections[connectionPairID].push($(element));
} }
}); });
$(document).data('pathConections', pathConections); $(document).data('pathConnections', pathConnections);
} }
function drawPath(){ function crawlPathTrunks(){
clearPathConnections(); var pathTrunks = {};
crawlPathConnections(); var connectorElementArray = $('#containerFullPath').find('.objectBox');
drawPathConnections();
$.each(connectorElementArray, function(index, element){
if($(element).data('trunkPairId') !== 0) {
var trunkPairID = $(element).data('trunkPairId');
if(pathTrunks[trunkPairID] === undefined) {
pathTrunks[trunkPairID] = [];
}
pathTrunks[trunkPairID].push($(element));
}
});
$(document).data('pathTrunks', pathTrunks);
}
function drawPathConnections(){
var pathConnections = $(document).data('pathConnections');
pathCtx.strokeStyle = 'LightSkyBlue';
pathCtx.lineWidth = 3;
pathCtx.beginPath();
$.each(pathConnections, function(index, element){
var elemA = element[0];
var elemB = element[1];
var canvas = $('#canvasPath');
var elemADimensions = getDimensions(elemA, canvas);
var elemBDimensions = getDimensions(elemB, canvas);
pathCtx.moveTo(elemADimensions.centerX, elemADimensions.bottom);
pathCtx.bezierCurveTo(elemADimensions.centerX + 20, elemADimensions.bottom, elemBDimensions.centerX + 20, elemBDimensions.top, elemBDimensions.centerX, elemBDimensions.top);
//pathCtx.lineTo(elemBDimensions.centerX, elemBDimensions.centerY);
});
pathCtx.stroke();
}
function drawPathTrunks(){
var pathTrunks = $(document).data('pathTrunks');
pathCtx.strokeStyle = 'MidnightBlue';
pathCtx.lineWidth = 3;
pathCtx.beginPath();
$.each(pathTrunks, function(index, element){
var pathOrientation = $('#pathOrientation').val();
var elemA = element[0];
var elemB = element[1];
var canvas = $('#canvasPath');
var elemADimensions = getDimensions(elemA, canvas);
var elemBDimensions = getDimensions(elemB, canvas);
if(elemADimensions.right > elemBDimensions.right) {
var rightBoundary = elemADimensions.right;
} else {
var rightBoundary = elemBDimensions.right;
}
if(pathOrientation == "0") {
// Patch Cable Adjacent
pathCtx.moveTo(elemADimensions.centerX, elemADimensions.bottom);
pathCtx.lineTo(elemADimensions.centerX, elemBDimensions.top);
} else {
// Patch Cable Inline
pathCtx.moveTo(elemADimensions.right, elemADimensions.centerY);
pathCtx.lineTo((rightBoundary + 20), elemADimensions.centerY);
pathCtx.lineTo((rightBoundary + 20), elemBDimensions.centerY);
pathCtx.lineTo(elemBDimensions.right, elemBDimensions.centerY);
}
});
pathCtx.stroke();
}
function clearPathConnections(){
var canvasHeight = $('#canvasPath').height();
var canvasWidth = $('#canvasPath').width();
pathCtx.clearRect(0, 0, canvasWidth, canvasHeight);
}
// ### Common Functions ###
function getDimensions(elem, canvas=false){
if(canvas == false) {
var canvas = $('#canvasCabinet');
}
var canvasLeft = $(canvas).offset().left;
var canvasTop = $(canvas).offset().top;
var elemLeft = $(elem).offset().left;
var elemTop = $(elem).offset().top;
var elemLeftOrig = elemLeft;
var elemTopOrig = elemTop;
var elemWidth = $(elem).width();
var elemHeight = $(elem).height();
var elemCenterX = elemLeft - canvasLeft + (elemWidth / 2);
var elemCenterY = elemTop - canvasTop + (elemHeight / 2);
var elemLeft = elemLeft - canvasLeft;
var elemRight = elemLeft + elemWidth;
var elemRightOrig = elemLeftOrig + elemWidth;
var elemTop = elemTop - canvasTop;
var elemBottom = elemTop + elemHeight;
var dimensions = {
leftOrig: elemLeftOrig,
topOrig: elemTopOrig,
rightOrig: elemRightOrig,
left: elemLeft,
right: elemRight,
top: elemTop,
bottom: elemBottom,
centerX: elemCenterX,
centerY: elemCenterY,
width: elemWidth,
height: elemHeight
};
return dimensions;
}
function addCabButton(left, top, globalID){
var addCab = $('<a class="addCabButton" data-global-id="'+globalID+'" href="#"style="z-index:1001; position:absolute;"><i class="fa fa-plus" style="color:#039cfd; background-color:white;"></i></a>');
$('#canvasCabinet').after(addCab);
var left = left - ($(addCab).width()/2);
var top = top - ($(addCab).height()/2);
$(addCab).css({'left':left+'px', 'top':top+'px'});
makeAddCabButtonClickable(addCab);
}
function highlightElement(elemArray, color){
$.each(elemArray, function(index, elem){
cabinetCtx.strokeStyle = color;
cabinetCtx.beginPath();
var elemDimensions = getDimensions(elem);
cabinetCtx.strokeRect(elemDimensions.left, elemDimensions.top, elemDimensions.width, elemDimensions.height);
});
} }
function makePortsHoverable(){ function makePortsHoverable(){
@ -355,10 +432,10 @@ function makePortsHoverable(){
$('#buildSpaceContent').find('.port').each(function(){ $('#buildSpaceContent').find('.port').each(function(){
$(this).hover(function(){ $(this).hover(function(){
var pathElementArray = crawlPath(this); var pathElementArray = crawlCabinetConnections(this);
highlightElement(pathElementArray['partitionArray'], 'black'); highlightElement(pathElementArray['partitionArray'], 'black');
drawTrunk(pathElementArray['trunkArray']); drawCabinetTrunks(pathElementArray['trunkArray']);
highlightElement(pathElementArray['portArray'], 'LightSkyBlue'); highlightElement(pathElementArray['portArray'], 'LightSkyBlue');
drawCabinetConnections(pathElementArray['connectionArray']); drawCabinetConnections(pathElementArray['connectionArray']);
@ -370,7 +447,7 @@ function makePortsHoverable(){
if(typeof $(this).data('pathID') == 'undefined') { if(typeof $(this).data('pathID') == 'undefined') {
var pathElementArray = crawlPath(this); var pathElementArray = crawlCabinetConnections(this);
// Get pathID // Get pathID
// This allows persistant paths to accumulate // This allows persistant paths to accumulate
@ -420,7 +497,7 @@ function refreshPathData(){
$.each(path['portArray'], function(portIndex, port){ $.each(path['portArray'], function(portIndex, port){
var portID = $(port).attr('id'); var portID = $(port).attr('id');
if($('#'+portID).length) { if($('#'+portID).length) {
var pathElementArray = crawlPath($('#'+portID)); var pathElementArray = crawlCabinetConnections($('#'+portID));
// Associate ports to pathIDs // Associate ports to pathIDs
$.each(pathElementArray['portArray'], function(){ $.each(pathElementArray['portArray'], function(){
@ -482,16 +559,19 @@ function makeCabCloseClickable(){
} }
function resizeCanvas() { function resizeCanvas() {
$('#canvasBuildSpace').attr('width', $(document).width()); $('#canvasCabinet').attr('width', $(document).width());
$('#canvasBuildSpace').attr('height', $(document).height()); $('#canvasCabinet').attr('height', $(document).height());
$('#canvasPath').attr('width', $('#canvasPath').parent().width());
$('#canvasPath').attr('height', $('#canvasPath').parent().height());
} }
function redraw() { function redraw() {
clearPaths(); clearCabinetConnections();
var cabinetConnections = $(document).data('cabinetConnections'); var cabinetConnections = $(document).data('cabinetConnections');
if(typeof cabinetConnections != 'undefined') { if(typeof cabinetConnections != 'undefined') {
$.each(cabinetConnections, function(pathID, path){ $.each(cabinetConnections, function(pathID, path){
drawTrunk(path['trunkArray']); drawCabinetTrunks(path['trunkArray']);
highlightElement(path['partitionArray'], 'MidnightBlue'); highlightElement(path['partitionArray'], 'MidnightBlue');
drawCabinetConnections(path['connectionArray']); drawCabinetConnections(path['connectionArray']);
highlightElement(path['portArray'], 'LightSkyBlue'); highlightElement(path['portArray'], 'LightSkyBlue');
@ -502,19 +582,21 @@ function redraw() {
function initializeCanvas() { function initializeCanvas() {
window.addEventListener('resize', resizeCanvas, false); window.addEventListener('resize', resizeCanvas, false);
htmlCanvas = document.getElementById('canvasBuildSpace'); canvasCabinet = document.getElementById('canvasCabinet');
canvasPath = document.getElementById('canvasPath');
var lineWidth = 10; var lineWidth = 10;
// Cabinet connections // Cabinet connections
cabinetCtx = htmlCanvas.getContext('2d'); cabinetCtx = canvasCabinet.getContext('2d');
cabinetCtx.lineWidth = lineWidth; cabinetCtx.lineWidth = lineWidth;
$(document).data('cabinetConnections', {}); $(document).data('cabinetConnections', {});
canvasInset = 10; canvasInset = 10;
pathID = 0; pathID = 0;
// Path connections // Path connections
pathCtx = htmlCanvas.getContext('2d'); pathCtx = canvasPath.getContext('2d');
pathCtx.lineWidth = lineWidth; pathCtx.lineWidth = lineWidth;
$(document).data('pathConections', {}); $(document).data('pathConnections', {});
$(document).data('pathTrunks', {});
} }

7
assets/pages/jquery.explore.js
View File

@ -54,7 +54,7 @@ function clearSelectionDetails(){
$('#checkboxPopulated').prop("checked", false); $('#checkboxPopulated').prop("checked", false);
$('#selectPort').empty(); $('#selectPort').empty();
clearPaths(); clearCabinetConnections();
} }
function makeRackObjectsClickable(){ function makeRackObjectsClickable(){
@ -712,11 +712,10 @@ $( document ).ready(function() {
$('#printFullPath').on('click', function(event){ $('#printFullPath').on('click', function(event){
event.preventDefault(); event.preventDefault();
$('#containerFullPath').printThis({ $('#containerFullPath').parent().printThis({
canvas: true, canvas: true,
importStyle: true, importStyle: true,
removeInline: true, removeInline: true
removeInlineSelector: "img"
}); });
}); });

1
backend/retrieve_path_full.php
View File

@ -25,6 +25,7 @@ if($_SERVER['REQUEST_METHOD'] == 'POST'){
// Create $path // Create $path
include_once $_SERVER['DOCUMENT_ROOT'].'/includes/content-path.php'; include_once $_SERVER['DOCUMENT_ROOT'].'/includes/content-path.php';
error_log('Debug (path): '.json_encode($path));
$validate->returnData['success'] = $qls->App->buildPathFull($path, $connectorCode39); $validate->returnData['success'] = $qls->App->buildPathFull($path, $connectorCode39);
} }
echo json_encode($validate->returnData); echo json_encode($validate->returnData);

2
explore.php
View File

@ -303,6 +303,8 @@ $qls->Security->check_auth_page('user.php');
<div class="card-block"> <div class="card-block">
<blockquote class="card-blockquote"> <blockquote class="card-blockquote">
<div class="row"> <div class="row">
<!-- Canvas for drawing cabinet connections -->
<canvas id="canvasPath" class="connectionCanvas" style="z-index:1000;position:absolute; pointer-events:none;"></canvas>
<div id="containerFullPath"></div> <div id="containerFullPath"></div>
</div> </div>
</blockquote> </blockquote>

41
includes/App.class.php
View File

@ -1952,8 +1952,6 @@ var $qls;
function buildPathFull($path, $connectorCode39){ function buildPathFull($path, $connectorCode39){
error_log('Debug (buildPathFull $path): '.json_encode($path));
$htmlPathFull = ''; $htmlPathFull = '';
$htmlPathFull .= '<table>'; $htmlPathFull .= '<table>';
@ -1970,16 +1968,15 @@ var $qls;
case 'connector': case 'connector':
error_log('here1');
$addConnector = false; $addConnector = false;
if(isset($path[$objectIndex+1])) { if(isset($path[$objectIndex+1])) {
error_log('here2');
if($path[$objectIndex+1]['type'] != 'object') { if($path[$objectIndex+1]['type'] != 'object') {
error_log('here3');
$addConnector = true; $addConnector = true;
} }
} else { } else {
error_log('here4');
$addConnector = true; $addConnector = true;
} }
@ -2028,6 +2025,7 @@ var $qls;
case 'object': case 'object':
$trunkPairID = $object['trunkPairID'];
$objName = ''; $objName = '';
foreach($object['data'] as $item) { foreach($object['data'] as $item) {
$objID = $item['id']; $objID = $item['id'];
@ -2038,7 +2036,7 @@ var $qls;
$objName .= $this->generateObjectPortName($objID, $objFace, $objDepth, $objPort).'<br>'; $objName .= $this->generateObjectPortName($objID, $objFace, $objDepth, $objPort).'<br>';
} }
$objBox = $this->wrapObject($objID, $objName, $selected); $objBox = $this->wrapObject($objID, $objName, $selected, $trunkPairID);
// Wrap in <td> and add to row array // Wrap in <td> and add to row array
$htmlString = '<td>'.$objBox.'</td>'; $htmlString = '<td>'.$objBox.'</td>';
@ -2099,13 +2097,17 @@ var $qls;
} }
$topTableTag = '<tr><td>'; $topTableTag = '<tr><td>';
$htmlPathFull .= $topTableTag; $htmlPathFull .= $topTableTag;
$objID = $object['data']['id']; $trunkPairID = $object['trunkPairID'];
$objFace = $object['data']['face']; $objName = '';
$objDepth = $object['data']['depth']; foreach($object['data'] as $item) {
$objPort = $object['data']['port']; $objID = $item['id'];
$selected = $object['data']['selected']; $objFace = $item['face'];
$objName = $this->generateObjectPortName($objID, $objFace, $objDepth, $objPort); $objDepth = $item['depth'];
$objBox = $this->wrapObject($objID, $objName, $selected); $objPort = $item['port'];
$selected = $item['selected'];
$objName .= $this->generateObjectPortName($objID, $objFace, $objDepth, $objPort).'<br>';
}
$objBox = $this->wrapObject($objID, $objName, $selected, $trunkPairID);
$htmlPathFull .= $objBox; $htmlPathFull .= $objBox;
$htmlPathFull .= $bottomTableTag; $htmlPathFull .= $bottomTableTag;
@ -2114,20 +2116,19 @@ var $qls;
case 'connector': case 'connector':
$htmlPathFull .= '<tr><td>'; $htmlPathFull .= '<tr><td>';
$connectorTypeID = $object['data']['connectorType']; $connectorTypeID = $object['data']['connectorType'];
$connectionPairID = $object['data']['connectionPairID'];
if($connectorTypeID != 0) { if($connectorTypeID != 0) {
$connectorTypeName = $this->connectorTypeValueArray[$connectorTypeID]['name']; $connectorTypeName = $this->connectorTypeValueArray[$connectorTypeID]['name'];
$code39 = $object['data']['code39']; $code39 = $object['data']['code39'];
$connectorClass = $code39 != 0 ? 'cableConnector cursorPointer' : ''; $connectorClass = $code39 != 0 ? 'cableConnector cursorPointer' : '';
$htmlPathFull .= '<div title="'.$connectorTypeName.'" class="port '.$connectorTypeName.' '.$connectorClass.'" data-code39="'.$code39.'"></div>'; $htmlPathFull .= '<div title="'.$connectorTypeName.'" class="port '.$connectorTypeName.' '.$connectorClass.'" data-code39="'.$code39.'" data-connection-pair-id='.$connectionPairID.'></div>';
//$htmlPathFull .= '</div>';
} else { } else {
$connectorTypeName = 'Unk'; $connectorTypeName = 'Unk';
$htmlPathFull .= '<div title="'.$connectorTypeName.'" class="port '.$connectorTypeName.'">'; $htmlPathFull .= '<div title="'.$connectorTypeName.'" class="port '.$connectorTypeName.'" data-connection-pair-id='.$connectionPairID.'>';
//$htmlPathFull .= '</div>';
} }
$htmlPathFull .= '</td><td></td></tr>'; $htmlPathFull .= '</td><td></td></tr>';
@ -2915,7 +2916,7 @@ var $qls;
return true; return true;
} }
function wrapObject($objID, $objName, $selected=false) { function wrapObject($objID, $objName, $selected=false, $trunkPairID=0) {
$objName = str_replace('-', '&#8209;', $objName); $objName = str_replace('-', '&#8209;', $objName);
$classArray = array('objectBox'); $classArray = array('objectBox');
if($objID) { if($objID) {
@ -2941,7 +2942,7 @@ var $qls;
$selectedIcon = $selected ? '<i class="fa fa-map-marker" title="Selected"></i>&nbsp;' : ''; $selectedIcon = $selected ? '<i class="fa fa-map-marker" title="Selected"></i>&nbsp;' : '';
$html = ''; $html = '';
$html .= ($objID) ? '<a href="/explore.php?parentID='.$parentID.'&objID='.$objID.'">' : ''; $html .= ($objID) ? '<a href="/explore.php?parentID='.$parentID.'&objID='.$objID.'">' : '';
$html .= '<div class="'.$class.'">'; $html .= '<div class="'.$class.'" data-trunk-pair-id="'.$trunkPairID.'">';
$html .= $endpointIcon.$selectedIcon.$objName; $html .= $endpointIcon.$selectedIcon.$objName;
$html .= '</div>'; $html .= '</div>';
$html .= ($objID) ? '</a>' : ''; $html .= ($objID) ? '</a>' : '';

20
includes/content-custom_style.php
View File

@ -146,7 +146,7 @@ for($x=1; $x<MAX_TEMPLATE_RU; $x++) {
} }
.trunk.stacked { .trunk.stacked {
background-image: url("/assets/images/cableIcons/stacked-trunk.png"); /*background-image: url("/assets/images/cableIcons/stacked-trunk.png");*/
height: 50px; height: 50px;
width: 30px; width: 30px;
margin: auto; margin: auto;
@ -157,7 +157,7 @@ for($x=1; $x<MAX_TEMPLATE_RU; $x++) {
} }
.trunk.adjacent { .trunk.adjacent {
background-image: url("/assets/images/cableIcons/adjacent-trunk.png"); /*background-image: url("/assets/images/cableIcons/adjacent-trunk.png");*/
height: 30px; height: 30px;
margin: auto; margin: auto;
background-size: 15px 30px; background-size: 15px 30px;
@ -167,45 +167,45 @@ for($x=1; $x<MAX_TEMPLATE_RU; $x++) {
} }
.cable.Unk.stacked { .cable.Unk.stacked {
background-image: url("/assets/images/cableIcons/stacked-Unk-black.png"); /*background-image: url("/assets/images/cableIcons/stacked-Unk-black.png");*/
background-position: center center; background-position: center center;
} }
.cable.SM-OS1.stacked { .cable.SM-OS1.stacked {
background-image: url("/assets/images/cableIcons/stacked-SM-yellow.png"); /*background-image: url("/assets/images/cableIcons/stacked-SM-yellow.png");*/
background-position: center center; background-position: center center;
} }
.cable.MM-OM3.stacked, .cable.MM-OM4.stacked { .cable.MM-OM3.stacked, .cable.MM-OM4.stacked {
background-image: url("/assets/images/cableIcons/stacked-MM-aqua.png"); /*background-image: url("/assets/images/cableIcons/stacked-MM-aqua.png");*/
background-position: center center; background-position: center center;
} }
.cable.Cat5e.stacked, .cable.Cat6.stacked, .cable.Cat6a.stacked { .cable.Cat5e.stacked, .cable.Cat6.stacked, .cable.Cat6a.stacked {
background-image: url("/assets/images/cableIcons/stacked-Eth-green.png"); /*background-image: url("/assets/images/cableIcons/stacked-Eth-green.png");*/
background-position: center center; background-position: center center;
} }
.cable.Unk.adjacent { .cable.Unk.adjacent {
background-image: url("/assets/images/cableIcons/adjacent-Unk-black.png"); /*background-image: url("/assets/images/cableIcons/adjacent-Unk-black.png");*/
background-position: left; background-position: left;
width: 150px; width: 150px;
} }
.cable.SM-OS1.adjacent { .cable.SM-OS1.adjacent {
background-image: url("/assets/images/cableIcons/adjacent-SM-yellow.png"); /*background-image: url("/assets/images/cableIcons/adjacent-SM-yellow.png");*/
background-position: left; background-position: left;
width: 150px; width: 150px;
} }
.cable.MM-OM3.adjacent, .cable.MM-OM4.adjacent { .cable.MM-OM3.adjacent, .cable.MM-OM4.adjacent {
background-image: url("/assets/images/cableIcons/adjacent-MM-aqua.png"); /*background-image: url("/assets/images/cableIcons/adjacent-MM-aqua.png");*/
background-position: left; background-position: left;
width: 150px; width: 150px;
} }
.cable.Cat5e.adjacent, .cable.Cat6.adjacent, .cable.Cat6a.adjacent { .cable.Cat5e.adjacent, .cable.Cat6.adjacent, .cable.Cat6a.adjacent {
background-image: url("/assets/images/cableIcons/adjacent-Eth-green.png"); /*background-image: url("/assets/images/cableIcons/adjacent-Eth-green.png");*/
background-position: left; background-position: left;
width: 150px; width: 150px;
} }

7
includes/content-path.php
View File

@ -45,6 +45,7 @@ if($isTrunked) {
} }
$connectionPairID = 1; $connectionPairID = 1;
$trunkPairID = 1;
// Discover path elements // Discover path elements
// First look outward from the far end of the cable, // First look outward from the far end of the cable,
@ -55,8 +56,10 @@ for($x=0; $x<2; $x++){
// Object // Object
$selected = ($objID == $selectedObjID and $objFace == $selectedObjFace and $objDepth == $selectedObjDepth and $objPort == $selectedObjPort) ? true : false; $selected = ($objID == $selectedObjID and $objFace == $selectedObjFace and $objDepth == $selectedObjDepth and $objPort == $selectedObjPort) ? true : false;
$trunkPairID = (isset($qls->App->peerArray[$objID][$objFace][$objDepth])) ? $qls->App->peerArray[$objID][$objFace][$objDepth]['id'] : 0;
$workingArray = array( $workingArray = array(
'type' => 'object', 'type' => 'object',
'trunkPairID' => $trunkPairID,
'data' => array( 'data' => array(
array( array(
'id' => $objID, 'id' => $objID,
@ -126,6 +129,9 @@ for($x=0; $x<2; $x++){
$objDepth = $connection[$remoteAttrPrefix.'_object_depth']; $objDepth = $connection[$remoteAttrPrefix.'_object_depth'];
$objPort = $connection[$remoteAttrPrefix.'_port_id']; $objPort = $connection[$remoteAttrPrefix.'_port_id'];
$trunkPairID = (isset($qls->App->peerArray[$objID][$objFace][$objDepth])) ? $qls->App->peerArray[$objID][$objFace][$objDepth]['id'] : 0;
$objectWorkingArray['trunkPairID'] = $trunkPairID;
// Remote Object // Remote Object
$workingArray = array( $workingArray = array(
'id' => $objID, 'id' => $objID,
@ -210,6 +216,7 @@ for($x=0; $x<2; $x++){
} }
$connectionPairID++; $connectionPairID++;
$trunkPairID++;
} }
// Now that we've discovered the far side of the scanned cable, // Now that we've discovered the far side of the scanned cable,

5
includes/header_end.php
View File

@ -17,13 +17,14 @@
<body> <body>
<!-- Canvas for drawing connections --> <!-- Canvas for drawing cabinet connections -->
<canvas id="canvasBuildSpace" style="z-index:1000;position:absolute; pointer-events:none;"></canvas> <canvas id="canvasCabinet" class="connectionCanvas" style="z-index:1000;position:absolute; pointer-events:none;"></canvas>
<?php require 'topbar.php'; ?> <?php require 'topbar.php'; ?>
<!-- User Settings --> <!-- User Settings -->
<input id="connectionStyle" type="hidden" value="<?php echo $qls->user_info['connectionStyle']; ?>"> <input id="connectionStyle" type="hidden" value="<?php echo $qls->user_info['connectionStyle']; ?>">
<input id="pathOrientation" type="hidden" value="<?php echo $qls->user_info['pathOrientation']; ?>">
<!-- Error Messages --> <!-- Error Messages -->
<div class="row"> <div class="row">