diff options
Diffstat (limited to 'ransim/ransimctrlr/RANSIM-GUI/src/main/webapp/ransim.html')
| -rw-r--r-- | ransim/ransimctrlr/RANSIM-GUI/src/main/webapp/ransim.html | 691 |
1 files changed, 691 insertions, 0 deletions
diff --git a/ransim/ransimctrlr/RANSIM-GUI/src/main/webapp/ransim.html b/ransim/ransimctrlr/RANSIM-GUI/src/main/webapp/ransim.html new file mode 100644 index 0000000..ddb3b8b --- /dev/null +++ b/ransim/ransimctrlr/RANSIM-GUI/src/main/webapp/ransim.html @@ -0,0 +1,691 @@ +<!-- + * ============LICENSE_START======================================================= + * Ran Simulator Controller + * ================================================================================ + * Copyright (C) 2020 Wipro Limited. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + --> + +<!DOCTYPE html> +<html> + +<head> + <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,target-densitydpi=device-dpi, user-scalable=no" /> + <style> + .show { + z-index: 1000; + position: absolute; + padding: 2px; + display: block; + margin: 0; + list-style-type: none; + list-style: none; + } + + .hide { + display: none; + } + + .btn-group .button { + background-color: LightGrey; + color: black; + border: 1px solid Black; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + cursor: pointer; + width: 100px; + display: block; + } + + .btn-group .button:not (:last-child) { + border-bottom: none; + } + + .btn-group .button:hover { + background-color: lightblue; + color: white; + } + .button { + background-color: #4CAF50; /* Green */ + border: none; + color: white; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + margin: 4px 2px; + cursor: pointer; + } + </style> + <script> + var childWindow; + + var ScreenConfig; + var netconfServerUserInput = ""; + + function init() { + getCellTopology(); + } + + function getCellTopology() { + var xmlhttp = new XMLHttpRequest(); + xmlhttp.onreadystatechange = function() { + if (this.readyState == 4 && this.status == 200) { + var topology = JSON.parse(this.responseText); + drawTopology(topology); + } + }; + xmlhttp.open("GET", "/ransim/api/GetTopology", + true); + xmlhttp.send(); + } + + function drawTopology(topoObj) { + console.log("topoObj"); + console.log(topoObj); + console.log("netconfServerUserInput"); + console.log(netconfServerUserInput); + var width = window.innerWidth*3.5; + var height = window.innerWidth*3.5; + var myCanvas = document.getElementById("myCanvas"); + var topoWidth = (width) + 200; + var topoHeight = (height) + 200; + myCanvas.width = topoWidth; + myCanvas.height = topoHeight; + + console.log("width" + width); + console.log("height" + height); + console.log("topoWidth " + topoWidth); + console.log("topoHeight " + topoHeight); + var context = myCanvas.getContext("2d"); + context.clearRect(0, 0, topoWidth, topoHeight); + context.fillStyle = "#FFFFDF"; + context.fillRect(0, 0, topoWidth, topoHeight); + var RADIUS = 11; + var noProblemColor = "#32CD32"; //GREEN + var xScaleUnit = width / ((topoObj.maxScreenX - topoObj.minScreenX) ) + var yScaleUnit = height / ((topoObj.maxScreenY - topoObj.minScreenY) ) + + ScreenConfig = { + "xScaleUnit": xScaleUnit, + "yScaleUnit": yScaleUnit, + "noProblemColor": noProblemColor, + "RADIUS": RADIUS, + "minX": topoObj.minScreenX, + "maxX": topoObj.maxScreenX, + "minY": topoObj.minScreenY, + "maxY": topoObj.maxScreenY, + "context": context + } + + for (i in topoObj.cellTopology) { + var nodeId = topoObj.cellTopology[i].nodeId; + var physicalCellId = topoObj.cellTopology[i].physicalCellId; + var serverId = topoObj.cellTopology[i].serverId; + var confColor = noProblemColor; + /*if (typeof topoObj.cellTopology[i].color != 'undefined') { + confColor = topoObj.cellTopology[i].color; + console.log("topoObj.cellTopology[i].color:"); + console.log(topoObj.cellTopology[i].color); + }*/ + confColor = topoObj.cellTopology[i].color; + console.log("topoObj.cellTopology[i].color:"); + console.log(topoObj.cellTopology[i].color); + + if (serverId == netconfServerUserInput) { + confColor = "#8A2BE2"; + } + + var cellX = (topoObj.cellTopology[i].screenX - topoObj.minScreenX ) * xScaleUnit + 50; + var cellY = (topoObj.cellTopology[i].screenY - topoObj.minScreenY ) * yScaleUnit + 50; + + if (topoObj.cellTopology[i].sectorNumber == 1) { + cellX -= RADIUS; + } else if (topoObj.cellTopology[i].sectorNumber == 2) { + cellX += RADIUS; + } else if (topoObj.cellTopology[i].sectorNumber == 3) { + cellY += 1.8 * RADIUS; + } + + console.log("confColor:"); + console.log(confColor); + context.fillStyle = confColor; + context.beginPath(); + context.arc(cellX, cellY, RADIUS, 0, Math.PI * 2, true); + context.strokeStyle = "black"; + context.stroke(); + context.closePath(); + context.fill(); + context.font = "bold 11px Comic Sans MS"; + context.fillStyle = "black"; + context.textAlign = "center"; + fillMultiLineText(context, physicalCellId, cellX, (cellY + (RADIUS/2)) ); + } + ScreenConfig.context.save(); + document.getElementById("modified").innerHTML = 'a'; + + myCanvas.addEventListener('click', function() { + document.getElementById("rmenu").className = "hide"; + ScreenConfig.context.restore(); + if (document.getElementById("modified").innerHTML != 'a') { + drawTopology(topoObj); + } + }); + + myCanvas.addEventListener('contextmenu', (e) => { + e.preventDefault(); + var canvas = document.getElementById("myCanvas"); + var BB = canvas.getBoundingClientRect(); + const pos = { + x: (e.clientX - BB.left), + y: (e.clientY - BB.top) + }; + + var isClickedOnCell = false; + for (i in topoObj.cellTopology) { + var cellX = (topoObj.cellTopology[i].screenX - topoObj.minScreenX ) * ScreenConfig.xScaleUnit + 50; + var cellY = (topoObj.cellTopology[i].screenY - topoObj.minScreenY ) * ScreenConfig.yScaleUnit + 50; + var rt = 0; + if (isIntersect(pos, topoObj.cellTopology[i], cellX, cellY, ScreenConfig)) { + isClickedOnCell = true; + var nodeVal = topoObj.cellTopology[i].nodeId; + var cellVal = topoObj.cellTopology[i].physicalCellId; + var pnfName = topoObj.cellTopology[i].serverId; + if (pnfName === 'undefined' || pnfName === '') { + pnfName = 'Not Set'; + } + + if (topoObj.cellTopology[i].sectorNumber == 1) { + cellX -= ScreenConfig.RADIUS; + } else if (topoObj.cellTopology[i].sectorNumber == 2) { + cellX += ScreenConfig.RADIUS; + } else if (topoObj.cellTopology[i].sectorNumber == 3) { + cellY += 1.8 * ScreenConfig.RADIUS; + } + + + document.getElementById("rmenu").className = "show"; + document.getElementById('rmenu').style.top = pos.y + "px"; + document.getElementById('rmenu').style.left = pos.x + "px"; + + var htmlText1 = '<div class="btn-group">'; + + htmlText1 += + '<button class="button" id="cellDetails">Show Cell Details</button>'; + htmlText1 += + '<button class="button" id="showNeighbours">Show Neighbors</button>'; + htmlText1 += + '<button class="button" id="modifyNodeNeighbor">Modify Neighbors</button>'; + htmlText1 += + '<button class="button" id="modifyNodePci">Modify PCI</button>'; + htmlText1 += + '<button class="button" id="deleteNode">Delete</button>'; + htmlText1 += '</div>'; + document.getElementById("rmenu").innerHTML = htmlText1; + rt++; + + var x = cellX; + var y = cellY; + document.getElementById("cellDetails").addEventListener("click", + function() { + + childWindow = window.open('displayCellDetails.html?cid=' + nodeVal + + '&pcid=' + cellVal + '&pnf=' + pnfName, '', + 'menubar=no, locationbar=no, toolbar=no, width=500px, height=300px' + ); + + //alert("Cell Id:" + nodeVal + "\nPhysical Cell Id:" + cellVal + "\nPnf Name:" + pnfName); + }); + document.getElementById("showNeighbours").addEventListener("click", + function() { + showNeighbours(nodeVal, cellVal, x, y, RADIUS, + ScreenConfig, topoObj); + }); + document.getElementById("modifyNodeNeighbor").addEventListener("click", + function() { + modifyNodeNeighbor(nodeVal, cellVal); + }); + document.getElementById("modifyNodePci").addEventListener("click", + function() { + modifyNodePci(nodeVal, cellVal); + }); + document.getElementById("deleteNode").addEventListener("click", + function() { + deleteNode(nodeVal, cellVal); + }); + } + } + if (!isClickedOnCell) { + document.getElementById("rmenu").className = "hide"; + } + + }); + } + + function showNeighbours(nodeId, pcId, cellX, cellY, RADIUS, ScreenConfig, topoObj) { + var formVal = { + "nodeId": nodeId + } + var dataObj = JSON.stringify(formVal); + var xmlhttp = new XMLHttpRequest(); + xmlhttp.onreadystatechange = function() { + if (this.readyState == 4 && this.status == 200) { + var neighbour = JSON.parse(this.responseText); + drawNeighbors(neighbour, nodeId, pcId, cellX, cellY, RADIUS, ScreenConfig, topoObj); + } + }; + xmlhttp.open("POST", "/ransim/api/GetNeighborList", + true); + xmlhttp.setRequestHeader('Content-Type', 'application/json') + xmlhttp.send(dataObj); + + document.getElementById("rmenu").className = "hide"; + } + + function drawNeighbors(neighbour, cellNodeId, pcId, cellX, cellY, RADIUS, + ScreenConfig, topoObj) { + document.getElementById("modified").innerHTML = 'b'; + + /* for (i in topoObj.cellTopology) { + var n = topoObj.cellTopology[i].nodeId; + var p = topoObj.cellTopology[i].physicalCellId; + if (typeof topoObj.cellTopology[i].color != 'undefined') { + confColor = topoObj.cellTopology[i].color; + } + var x = (topoObj.cellTopology[i].screenX - topoObj.minScreenX ) * ScreenConfig.xScaleUnit + 20; + var y = (topoObj.cellTopology[i].screenY - topoObj.minScreenY ) * ScreenConfig.yScaleUnit + 20; + + if (topoObj.cellTopology[i].sectorNumber == 1) { + x -= RADIUS; + } else if (topoObj.cellTopology[i].sectorNumber == 2) { + x += RADIUS; + } else if (topoObj.cellTopology[i].sectorNumber == 3) { + y += 1.8 * RADIUS; + } + + ScreenConfig.context.fillStyle = "#BFBFBF"; + ScreenConfig.context.beginPath(); + ScreenConfig.context.arc(x, y, RADIUS, 0, Math.PI * 2, true); + ScreenConfig.context.strokeStyle = "black"; + ScreenConfig.context.stroke(); + ScreenConfig.context.closePath(); + ScreenConfig.context.fill(); + ScreenConfig.context.font = "bold 11px Comic Sans MS"; + ScreenConfig.context.fillStyle = "black"; + ScreenConfig.context.textAlign = "center"; + fillMultiLineText(ScreenConfig.context, p, x, y); + } */ + + for (i in neighbour.cellsWithHo) { + var neighbourNodeId = neighbour.cellsWithHo[i].nodeId; + var neighbourPhysicalCellId = neighbour.cellsWithHo[i].physicalCellId; + var confuColor = ScreenConfig.noProblemColor; + var collCol = 0; + var confCol = 0; + if (typeof neighbour.cellsWithHo[i].color != 'undefined') { + confuColor = neighbour.cellsWithHo[i].color; + } + ScreenConfig.context.beginPath(); + ScreenConfig.context.moveTo(cellX, cellY); + var nbrCellX = (neighbour.cellsWithHo[i].screenX - topoObj.minScreenX ) * ScreenConfig.xScaleUnit + 50; + var nbrCellY = (neighbour.cellsWithHo[i].screenY - topoObj.minScreenY ) * ScreenConfig.yScaleUnit + 50; + + if (neighbour.cellsWithHo[i].sectorNumber == 1) { + nbrCellX -= ScreenConfig.RADIUS; + } else if (neighbour.cellsWithHo[i].sectorNumber == 2) { + nbrCellX += ScreenConfig.RADIUS; + } else if (neighbour.cellsWithHo[i].sectorNumber == 3) { + nbrCellY += 1.8 * ScreenConfig.RADIUS; + } + + if (neighbour.cellsWithHo[i].physicalCellId == pcId) { + collCol = 1; + } + + for (j in neighbour.cellsWithHo) { + if (i != j) { + if(neighbour.cellsWithHo[j] != null) + { + if (neighbour.cellsWithHo[i].physicalCellId == neighbour.cellsWithHo[j].physicalCellId) { + confCol = 1; + console.log("neighbour.cellsWithHo[i].physicalCellId: " + neighbour.cellsWithHo[i].physicalCellId); + console.log("neighbour.cellsWithHo[j].physicalCellId: " + neighbour.cellsWithHo[j].physicalCellId); + } + } + } + } + + if ((collCol == 1) && (confCol == 1)) { + confuColor = "#C30000"; + } else if ((collCol == 1) && (confCol == 0)) { + confuColor = "#FF0000"; + } else if ((collCol == 0) && (confCol == 1)) { + confuColor = "#E88B00"; + } else { + confuColor = "#008000"; + } + + console.log("336. neighbourPCI: " + neighbourPhysicalCellId + " collCol:" + collCol + "confCol: " + confCol); + + var headlen = 20; // length of head in pixels + var angle = Math.atan2(nbrCellY-cellY,nbrCellX-cellX); + ScreenConfig.context.lineTo(nbrCellX, nbrCellY); + ScreenConfig.context.strokeStyle = confuColor; + ScreenConfig.context.lineWidth = 1; + ScreenConfig.context.lineTo(nbrCellX-headlen*Math.cos(angle-Math.PI/6),nbrCellY-headlen*Math.sin(angle-Math.PI/6)); + ScreenConfig.context.moveTo(nbrCellX, nbrCellY); + ScreenConfig.context.lineTo(nbrCellX-headlen*Math.cos(angle+Math.PI/6),nbrCellY-headlen*Math.sin(angle+Math.PI/6)); + ScreenConfig.context.stroke(); + ScreenConfig.context.closePath(); + + + + ScreenConfig.context.fillStyle = confuColor; + ScreenConfig.context.beginPath(); + ScreenConfig.context.arc(nbrCellX, nbrCellY, RADIUS, 0, Math.PI * 2, true); + ScreenConfig.context.strokeStyle = "black"; + ScreenConfig.context.stroke(); + ScreenConfig.context.closePath(); + ScreenConfig.context.fill(); + ScreenConfig.context.font = "bold 11px Comic Sans MS"; + ScreenConfig.context.fillStyle = "black"; + ScreenConfig.context.textAlign = "center"; + fillMultiLineText(ScreenConfig.context, neighbourPhysicalCellId, nbrCellX, (nbrCellY + (RADIUS/2)) ); + + if(nbrCellY > cellY){ + ScreenConfig.context.fillText(neighbourNodeId, nbrCellX, (nbrCellY + 2.2*RADIUS) ); + } + else{ + ScreenConfig.context.fillText(neighbourNodeId, nbrCellX, (nbrCellY - 1.6*RADIUS) ); + } + + } + + for (i in neighbour.cellsWithNoHo) { + var neighbourNodeId = neighbour.cellsWithNoHo[i].nodeId; + var neighbourPhysicalCellId = neighbour.cellsWithNoHo[i].physicalCellId; + var confuColor = ScreenConfig.noProblemColor; + var collCol = 0; + var confCol = 0; + + confuColor = "#606060"; + + + ScreenConfig.context.beginPath(); + ScreenConfig.context.moveTo(cellX, cellY); + var nbrCellX = (neighbour.cellsWithNoHo[i].screenX - topoObj.minScreenX ) * ScreenConfig.xScaleUnit + 50; + var nbrCellY = (neighbour.cellsWithNoHo[i].screenY - topoObj.minScreenY ) * ScreenConfig.yScaleUnit + 50; + + if (neighbour.cellsWithNoHo[i].sectorNumber == 1) { + nbrCellX -= ScreenConfig.RADIUS; + } else if (neighbour.cellsWithNoHo[i].sectorNumber == 2) { + nbrCellX += ScreenConfig.RADIUS; + } else if (neighbour.cellsWithNoHo[i].sectorNumber == 3) { + nbrCellY += 1.8 * ScreenConfig.RADIUS; + } + + + console.log("336. neighbourPCI: " + neighbourPhysicalCellId + " collCol:" + collCol + "confCol: " + confCol); + var headlen = 20; // length of head in pixels + var angle = Math.atan2(nbrCellY-cellY,nbrCellX-cellX); + ScreenConfig.context.setLineDash([10, 5]); + + ScreenConfig.context.lineTo(nbrCellX, nbrCellY); + ScreenConfig.context.strokeStyle = confuColor; + ScreenConfig.context.lineWidth = 1; + ScreenConfig.context.lineTo(nbrCellX-headlen*Math.cos(angle-Math.PI/6),nbrCellY-headlen*Math.sin(angle-Math.PI/6)); + ScreenConfig.context.moveTo(nbrCellX, nbrCellY); + ScreenConfig.context.lineTo(nbrCellX-headlen*Math.cos(angle+Math.PI/6),nbrCellY-headlen*Math.sin(angle+Math.PI/6)); + ScreenConfig.context.stroke(); + ScreenConfig.context.closePath(); + + ScreenConfig.context.fillStyle = confuColor; + ScreenConfig.context.beginPath(); + ScreenConfig.context.arc(nbrCellX, nbrCellY, RADIUS, 0, Math.PI * 2, true); + ScreenConfig.context.strokeStyle = "black"; + ScreenConfig.context.stroke(); + ScreenConfig.context.closePath(); + ScreenConfig.context.fill(); + ScreenConfig.context.font = "bold 11px Comic Sans MS"; + ScreenConfig.context.fillStyle = "black"; + ScreenConfig.context.textAlign = "center"; + fillMultiLineText(ScreenConfig.context, neighbourPhysicalCellId, nbrCellX, (nbrCellY + (RADIUS/2))); + if(nbrCellY > cellY){ + ScreenConfig.context.fillText(neighbourNodeId, nbrCellX, (nbrCellY + 2.2*RADIUS) ); + } + else{ + ScreenConfig.context.fillText(neighbourNodeId, nbrCellX, (nbrCellY - 1.6*RADIUS) ); + } + } + + ScreenConfig.context.fillStyle = "#00FFFF"; + ScreenConfig.context.beginPath(); + ScreenConfig.context.arc(cellX, cellY, RADIUS, 0, Math.PI * 2, true); + console.log("ScreenConfig.context.fillStyle: " + ScreenConfig.context.fillStyle); + ScreenConfig.context.strokeStyle = "black"; + ScreenConfig.context.stroke(); + ScreenConfig.context.closePath(); + ScreenConfig.context.fill(); + ScreenConfig.context.font = "bold 11px Comic Sans MS"; + ScreenConfig.context.fillStyle = "black"; + ScreenConfig.context.textAlign = "center"; + fillMultiLineText(ScreenConfig.context, pcId, cellX, (cellY + (RADIUS/2)) ); + ScreenConfig.context.font = "bold 12px Arial"; + ScreenConfig.context.fillText(cellNodeId, cellX, (cellY - 1.6*RADIUS) ); + } + + function modifyNodeNeighbor(cid, pcid) { + var formVal = { + "newPhysicalCellId": pcid, + "nodeId": cid + } + var dataObj = JSON.stringify(formVal); + //var dataObj = JSON.stringify(formVal); + var xmlhttp = new XMLHttpRequest(); + xmlhttp.onreadystatechange = function() { + if (this.readyState == 4 && this.status == 200) { + var neighbour = JSON.parse(this.responseText); + var neighbourNodeIds = ''; + for (i in neighbour.cellsWithHo) { + if (neighbourNodeIds.length == 0) + neighbourNodeIds += neighbour.cellsWithHo[i].nodeId; + else + neighbourNodeIds += ',' + neighbour.cellsWithHo[i].nodeId; + } + + var neighbrList = escape(neighbourNodeIds); + childWindow = window.open('modifyCell.html?cid=' + cid + + '&pcid=' + pcid + '&neighbrList=' + neighbrList, '', + 'menubar=no, locationbar=no, toolbar=no, width=600px, height=500px' + ); + var timer = setInterval(checkChild, 500); + document.getElementById("rmenu").className = "hide"; + } + }; + xmlhttp.open("POST", "/ransim/api/GetNeighborList", + true); + xmlhttp.setRequestHeader('Content-Type', 'application/json') + xmlhttp.send(dataObj); + } + + function modifyNodePci(cid, pcid) { + var formVal = { + "newPhysicalCellId": pcid, + "nodeId": cid + } + var dataObj = JSON.stringify(formVal); + //var dataObj = JSON.stringify(formVal); + var xmlhttp = new XMLHttpRequest(); + xmlhttp.onreadystatechange = function() { + if (this.readyState == 4 && this.status == 200) { + var neighbour = JSON.parse(this.responseText); + var neighbourNodeIds = ''; + for (i in neighbour.cellsWithHo) { + if (neighbourNodeIds.length == 0) + neighbourNodeIds += neighbour.cellsWithHo[i].nodeId; + else + neighbourNodeIds += ',' + neighbour.cellsWithHo[i].nodeId; + } + /*for (i in neighbour.cellsWithNoHo) { + if (neighbourNodeIds.length == 0) + neighbourNodeIds += neighbour.cellsWithNoHo[i].nodeId; + else + neighbourNodeIds += ',' + neighbour.cellsWithNoHo[i].nodeId; + }*/ + var neighbrList = escape(neighbourNodeIds); + childWindow = window.open('modifyCellPci.html?cid=' + cid + + '&pcid=' + pcid + '&neighbrList=' + neighbrList, '', + 'menubar=no, locationbar=no, toolbar=no, width=600px, height=500px' + ); + var timer = setInterval(checkChild, 500); + document.getElementById("rmenu").className = "hide"; + } + }; + xmlhttp.open("POST", "/ransim/api/GetNeighborList", + true); + xmlhttp.setRequestHeader('Content-Type', 'application/json') + xmlhttp.send(dataObj); + } + + function checkChild() { + if (childWindow.closed) { + //alert("Child window closed"); + document.location.reload() + clearInterval(timer); + } + } + + function deleteNode(cid, pcid) { + var formVal = { + "newPhysicalCellId": pcid, + "nodeId": cid + } + var dataObj = JSON.stringify(formVal); + childWindow = window.open('deleteCell.html?cid=' + cid + + '&pcid=' + pcid, '', + 'menubar=no, locationbar=no, toolbar=no, width=600px, height=250px' + ); + var timer = setInterval(checkChild, 500); + document.getElementById("rmenu").className = "hide"; + } + + function isIntersect(point, currCell, cellX, cellY, ScreenConfig) { + //var cellX = currCell.screenX * ScreenConfig.xScaleUnit; + //var cellY = currCell.screenY * ScreenConfig.yScaleUnit; + + if (currCell.sectorNumber == 1) { + cellX -= ScreenConfig.RADIUS; + } else if (currCell.sectorNumber == 2) { + cellX += ScreenConfig.RADIUS; + } else if (currCell.sectorNumber == 3) { + cellY += 1.8 * ScreenConfig.RADIUS; + } + console.log('isIntersect x:' + cellX + ' y:' + cellY + ' point.x:' + point.x + ' point.y:' + point.y); + return (Math.sqrt((point.x - cellX) ** 2 + (point.y - cellY) ** 2) < ScreenConfig.RADIUS); + } + + function fillMultiLineText(context, textVal, x, y) { + var lineHeight = context.measureText("M").width; + var lines = textVal.toString().split("\n"); + for (var i = 0; i < lines.length; ++i) { + context.fillText(lines[i], x, y); + y += lineHeight; + } + } + + + + function reset(){ + netconfServerUserInput = ""; + window.location.reload(); + } + + function searchCell(){ + //alert("enter netconf server id"); + var serverId = document.getElementById("myText").value;; + netconfServerUserInput = serverId; + console.log("netconfServerUserInput"); + console.log(netconfServerUserInput); + if (serverId != null) { + var formVal = { + "serverId": serverId + } + var dataObj = JSON.stringify(formVal); + var xmlhttp = new XMLHttpRequest(); + xmlhttp.onreadystatechange = function() { + if (this.readyState == 4 && this.status == 200) { + + var cellList = JSON.parse(this.responseText); + drawCell(cellList); + } + + }; + xmlhttp.open("POST", "/ransim/api/GetNetconfServerDetails", + true); + xmlhttp.setRequestHeader('Content-Type', 'application/json') + xmlhttp.send(dataObj); + } + } + + function drawCell(cellList){ + document.getElementById("modified").innerHTML = 'b'; + + for (i in cellList.cells) { + var n = cellList.cells[i].nodeId; + var p = cellList.cells[i].physicalCellId; + + var x = (cellList.cells[i].screenX - ScreenConfig.minX ) * ScreenConfig.xScaleUnit + 50; + var y = (cellList.cells[i].screenY - ScreenConfig.minY ) * ScreenConfig.yScaleUnit + 50; + + if (cellList.cells[i].sectorNumber == 1) { + x -= ScreenConfig.RADIUS; + } else if (cellList.cells[i].sectorNumber == 2) { + x += ScreenConfig.RADIUS; + } else if (cellList.cells[i].sectorNumber == 3) { + y += 1.8 * ScreenConfig.RADIUS; + } + + ScreenConfig.context.fillStyle = "#8A2BE2"; + ScreenConfig.context.beginPath(); + ScreenConfig.context.arc(x, y, ScreenConfig.RADIUS, 0, Math.PI * 2, true); + ScreenConfig.context.strokeStyle = "black"; + ScreenConfig.context.stroke(); + ScreenConfig.context.closePath(); + ScreenConfig.context.fill(); + ScreenConfig.context.font = "bold 11px Comic Sans MS"; + ScreenConfig.context.fillStyle = "black"; + ScreenConfig.context.textAlign = "center"; + fillMultiLineText(ScreenConfig.context, p, x, (y + (ScreenConfig.RADIUS/2))); + } + } + </script> +</head> + +<body onLoad="init();" style="margin: 0px"> + <div class="hide" id="rmenu"></div> + <div class="hide" id="modified"></div> + <div id="ransim" class="absolute"> + PNF/Cell name: <input type="text" id="myText" size="9" value="ncserver00"> + <button onclick="searchCell()">Search</button> + <br> + + </div> + <canvas id="myCanvas" width="500000" height="500000"></canvas> +</body> + +</html> |