diff --git a/assets/pages/jquery.drawConnections.js b/assets/pages/jquery.drawConnections.js index 82671aa..ee61816 100755 --- a/assets/pages/jquery.drawConnections.js +++ b/assets/pages/jquery.drawConnections.js @@ -1,231 +1,5 @@ -function getDimensions(elem){ - - 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 = $(''); - $('#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){ +// ### Cabinet Functions ### +function crawlCabinetConnections(selectedPort){ var portArray = []; var connectionArray = []; 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(){ - var pathConections = {}; + var pathConnections = {}; var connectorElementArray = $('#containerFullPath').find('.port'); $.each(connectorElementArray, function(index, element){ if($(element).data('connectionPairId') !== undefined) { var connectionPairID = $(element).data('connectionPairId'); - if(pathConections[connectionPairID] === undefined) { + if(pathConnections[connectionPairID] === undefined) { 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(){ - clearPathConnections(); - crawlPathConnections(); - drawPathConnections(); +function crawlPathTrunks(){ + var pathTrunks = {}; + var connectorElementArray = $('#containerFullPath').find('.objectBox'); + + $.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 = $(''); + $('#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(){ @@ -355,10 +432,10 @@ function makePortsHoverable(){ $('#buildSpaceContent').find('.port').each(function(){ $(this).hover(function(){ - var pathElementArray = crawlPath(this); + var pathElementArray = crawlCabinetConnections(this); highlightElement(pathElementArray['partitionArray'], 'black'); - drawTrunk(pathElementArray['trunkArray']); + drawCabinetTrunks(pathElementArray['trunkArray']); highlightElement(pathElementArray['portArray'], 'LightSkyBlue'); drawCabinetConnections(pathElementArray['connectionArray']); @@ -370,7 +447,7 @@ function makePortsHoverable(){ if(typeof $(this).data('pathID') == 'undefined') { - var pathElementArray = crawlPath(this); + var pathElementArray = crawlCabinetConnections(this); // Get pathID // This allows persistant paths to accumulate @@ -420,7 +497,7 @@ function refreshPathData(){ $.each(path['portArray'], function(portIndex, port){ var portID = $(port).attr('id'); if($('#'+portID).length) { - var pathElementArray = crawlPath($('#'+portID)); + var pathElementArray = crawlCabinetConnections($('#'+portID)); // Associate ports to pathIDs $.each(pathElementArray['portArray'], function(){ @@ -482,16 +559,19 @@ function makeCabCloseClickable(){ } function resizeCanvas() { - $('#canvasBuildSpace').attr('width', $(document).width()); - $('#canvasBuildSpace').attr('height', $(document).height()); + $('#canvasCabinet').attr('width', $(document).width()); + $('#canvasCabinet').attr('height', $(document).height()); + + $('#canvasPath').attr('width', $('#canvasPath').parent().width()); + $('#canvasPath').attr('height', $('#canvasPath').parent().height()); } function redraw() { - clearPaths(); + clearCabinetConnections(); var cabinetConnections = $(document).data('cabinetConnections'); if(typeof cabinetConnections != 'undefined') { $.each(cabinetConnections, function(pathID, path){ - drawTrunk(path['trunkArray']); + drawCabinetTrunks(path['trunkArray']); highlightElement(path['partitionArray'], 'MidnightBlue'); drawCabinetConnections(path['connectionArray']); highlightElement(path['portArray'], 'LightSkyBlue'); @@ -502,19 +582,21 @@ function redraw() { function initializeCanvas() { window.addEventListener('resize', resizeCanvas, false); - htmlCanvas = document.getElementById('canvasBuildSpace'); + canvasCabinet = document.getElementById('canvasCabinet'); + canvasPath = document.getElementById('canvasPath'); var lineWidth = 10; // Cabinet connections - cabinetCtx = htmlCanvas.getContext('2d'); + cabinetCtx = canvasCabinet.getContext('2d'); cabinetCtx.lineWidth = lineWidth; $(document).data('cabinetConnections', {}); canvasInset = 10; pathID = 0; // Path connections - pathCtx = htmlCanvas.getContext('2d'); + pathCtx = canvasPath.getContext('2d'); pathCtx.lineWidth = lineWidth; - $(document).data('pathConections', {}); + $(document).data('pathConnections', {}); + $(document).data('pathTrunks', {}); } diff --git a/assets/pages/jquery.explore.js b/assets/pages/jquery.explore.js index 77c53b3..9ed1dbe 100755 --- a/assets/pages/jquery.explore.js +++ b/assets/pages/jquery.explore.js @@ -54,7 +54,7 @@ function clearSelectionDetails(){ $('#checkboxPopulated').prop("checked", false); $('#selectPort').empty(); - clearPaths(); + clearCabinetConnections(); } function makeRackObjectsClickable(){ @@ -712,11 +712,10 @@ $( document ).ready(function() { $('#printFullPath').on('click', function(event){ event.preventDefault(); - $('#containerFullPath').printThis({ + $('#containerFullPath').parent().printThis({ canvas: true, importStyle: true, - removeInline: true, - removeInlineSelector: "img" + removeInline: true }); }); diff --git a/backend/retrieve_path_full.php b/backend/retrieve_path_full.php index 6ebdcc4..70a4cd7 100755 --- a/backend/retrieve_path_full.php +++ b/backend/retrieve_path_full.php @@ -25,6 +25,7 @@ if($_SERVER['REQUEST_METHOD'] == 'POST'){ // Create $path include_once $_SERVER['DOCUMENT_ROOT'].'/includes/content-path.php'; + error_log('Debug (path): '.json_encode($path)); $validate->returnData['success'] = $qls->App->buildPathFull($path, $connectorCode39); } echo json_encode($validate->returnData); diff --git a/explore.php b/explore.php index 73cc6cc..5d9ff86 100755 --- a/explore.php +++ b/explore.php @@ -302,7 +302,9 @@ $qls->Security->check_auth_page('user.php');
-
+
+ +
diff --git a/includes/App.class.php b/includes/App.class.php index f9ecbde..139d21c 100755 --- a/includes/App.class.php +++ b/includes/App.class.php @@ -1952,8 +1952,6 @@ var $qls; function buildPathFull($path, $connectorCode39){ - error_log('Debug (buildPathFull $path): '.json_encode($path)); - $htmlPathFull = ''; $htmlPathFull .= ''; @@ -1970,16 +1968,15 @@ var $qls; case 'connector': - error_log('here1'); $addConnector = false; if(isset($path[$objectIndex+1])) { - error_log('here2'); + if($path[$objectIndex+1]['type'] != 'object') { - error_log('here3'); + $addConnector = true; } } else { - error_log('here4'); + $addConnector = true; } @@ -2028,6 +2025,7 @@ var $qls; case 'object': + $trunkPairID = $object['trunkPairID']; $objName = ''; foreach($object['data'] as $item) { $objID = $item['id']; @@ -2038,7 +2036,7 @@ var $qls; $objName .= $this->generateObjectPortName($objID, $objFace, $objDepth, $objPort).'
'; } - $objBox = $this->wrapObject($objID, $objName, $selected); + $objBox = $this->wrapObject($objID, $objName, $selected, $trunkPairID); // Wrap in '; @@ -2099,13 +2097,17 @@ var $qls; } $topTableTag = ''; @@ -2915,7 +2916,7 @@ var $qls; return true; } - function wrapObject($objID, $objName, $selected=false) { + function wrapObject($objID, $objName, $selected=false, $trunkPairID=0) { $objName = str_replace('-', '‑', $objName); $classArray = array('objectBox'); if($objID) { @@ -2941,7 +2942,7 @@ var $qls; $selectedIcon = $selected ? ' ' : ''; $html = ''; $html .= ($objID) ? '' : ''; - $html .= '
'; + $html .= '
'; $html .= $endpointIcon.$selectedIcon.$objName; $html .= '
'; $html .= ($objID) ? '' : ''; diff --git a/includes/content-custom_style.php b/includes/content-custom_style.php index fa1067d..42e8be2 100755 --- a/includes/content-custom_style.php +++ b/includes/content-custom_style.php @@ -146,7 +146,7 @@ for($x=1; $xApp->peerArray[$objID][$objFace][$objDepth])) ? $qls->App->peerArray[$objID][$objFace][$objDepth]['id'] : 0; $workingArray = array( 'type' => 'object', + 'trunkPairID' => $trunkPairID, 'data' => array( array( 'id' => $objID, @@ -126,6 +129,9 @@ for($x=0; $x<2; $x++){ $objDepth = $connection[$remoteAttrPrefix.'_object_depth']; $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 $workingArray = array( 'id' => $objID, @@ -210,6 +216,7 @@ for($x=0; $x<2; $x++){ } $connectionPairID++; + $trunkPairID++; } // Now that we've discovered the far side of the scanned cable, diff --git a/includes/header_end.php b/includes/header_end.php index 8289938..22c2e11 100755 --- a/includes/header_end.php +++ b/includes/header_end.php @@ -17,13 +17,14 @@ - - + + +
and add to row array $htmlString = ''.$objBox.'
'; $htmlPathFull .= $topTableTag; - $objID = $object['data']['id']; - $objFace = $object['data']['face']; - $objDepth = $object['data']['depth']; - $objPort = $object['data']['port']; - $selected = $object['data']['selected']; - $objName = $this->generateObjectPortName($objID, $objFace, $objDepth, $objPort); - $objBox = $this->wrapObject($objID, $objName, $selected); + $trunkPairID = $object['trunkPairID']; + $objName = ''; + foreach($object['data'] as $item) { + $objID = $item['id']; + $objFace = $item['face']; + $objDepth = $item['depth']; + $objPort = $item['port']; + $selected = $item['selected']; + $objName .= $this->generateObjectPortName($objID, $objFace, $objDepth, $objPort).'
'; + } + $objBox = $this->wrapObject($objID, $objName, $selected, $trunkPairID); $htmlPathFull .= $objBox; $htmlPathFull .= $bottomTableTag; @@ -2114,20 +2116,19 @@ var $qls; case 'connector': $htmlPathFull .= '
'; $connectorTypeID = $object['data']['connectorType']; + $connectionPairID = $object['data']['connectionPairID']; if($connectorTypeID != 0) { $connectorTypeName = $this->connectorTypeValueArray[$connectorTypeID]['name']; $code39 = $object['data']['code39']; $connectorClass = $code39 != 0 ? 'cableConnector cursorPointer' : ''; - $htmlPathFull .= '
'; - //$htmlPathFull .= ''; + $htmlPathFull .= '
'; } else { $connectorTypeName = 'Unk'; - $htmlPathFull .= '
'; - //$htmlPathFull .= '
'; + $htmlPathFull .= '
'; } $htmlPathFull .= '