mirror of
https://github.com/Telecominfraproject/oopt-gnpy-web-gui.git
synced 2025-10-30 01:32:21 +00:00
523 lines
22 KiB
JavaScript
523 lines
22 KiB
JavaScript
/**
|
|
* main.js.
|
|
* The main.js library describes UI actions. like show/hide and update the html element with style based on user interaction.
|
|
*/
|
|
|
|
let attenuator = document.querySelector('#attenuator');
|
|
let roadm = document.querySelector('#roadm');
|
|
let ILA = document.querySelector('#ILA');
|
|
let amplifier = document.querySelector('#amplifier');
|
|
let dualfiber = document.querySelector('#dualfiber');
|
|
let service = document.querySelector('#service');
|
|
let transceiver = document.querySelector('#transceiver');
|
|
let singlefiber = document.querySelector('#singlefiber');
|
|
let singlepatch = document.querySelector('#singlepatch');
|
|
let dualpatch = document.querySelector('#dualpatch');
|
|
let ramanamp = document.querySelector('#ramanamp');
|
|
let drawerclose = document.getElementById('drawer-close')
|
|
|
|
/**
|
|
* Open drawer based on node/fiber/patch/service.
|
|
* @param {string} node - The type of component.
|
|
*/
|
|
function openDrawer(node) {
|
|
switch (node) {
|
|
case 'attenuator':
|
|
roadm.classList.remove('d-visible');
|
|
ILA.classList.remove('d-visible');
|
|
amplifier.classList.remove('d-visible');
|
|
dualfiber.classList.remove('d-visible');
|
|
service.classList.remove('d-visible');
|
|
attenuator.classList.add('d-visible');
|
|
transceiver.classList.remove('d-visible');
|
|
singlefiber.classList.remove('d-visible');
|
|
singlepatch.classList.remove('d-visible');
|
|
dualpatch.classList.remove('d-visible');
|
|
ramanamp.classList.remove('d-visible');
|
|
|
|
// drawerclose.classList.add("drawerleft")
|
|
break;
|
|
case 'roadm':
|
|
attenuator.classList.remove('d-visible');
|
|
ILA.classList.remove('d-visible');
|
|
amplifier.classList.remove('d-visible');
|
|
dualfiber.classList.remove('d-visible');
|
|
service.classList.remove('d-visible');
|
|
transceiver.classList.remove('d-visible');
|
|
singlefiber.classList.remove('d-visible');
|
|
singlepatch.classList.remove('d-visible');
|
|
dualpatch.classList.remove('d-visible');
|
|
roadm.classList.add('d-visible');
|
|
ramanamp.classList.remove('d-visible');
|
|
// drawerclose.classList.add("drawerleft")
|
|
break;
|
|
case 'ILA':
|
|
attenuator.classList.remove('d-visible');
|
|
ILA.classList.add('d-visible');
|
|
amplifier.classList.remove('d-visible');
|
|
dualfiber.classList.remove('d-visible');
|
|
service.classList.remove('d-visible');
|
|
roadm.classList.remove('d-visible');
|
|
transceiver.classList.remove('d-visible');
|
|
singlefiber.classList.remove('d-visible');
|
|
singlepatch.classList.remove('d-visible');
|
|
// drawerclose.classList.add("drawerleft")
|
|
dualpatch.classList.remove('d-visible');
|
|
ramanamp.classList.remove('d-visible');
|
|
break;
|
|
case 'amplifier':
|
|
attenuator.classList.remove('d-visible');
|
|
ILA.classList.remove('d-visible');
|
|
amplifier.classList.add('d-visible');
|
|
dualfiber.classList.remove('d-visible');
|
|
service.classList.remove('d-visible');
|
|
roadm.classList.remove('d-visible');
|
|
transceiver.classList.remove('d-visible');
|
|
singlefiber.classList.remove('d-visible');
|
|
singlepatch.classList.remove('d-visible');
|
|
dualpatch.classList.remove('d-visible');
|
|
// drawerclose.classList.add("drawerleft")
|
|
ramanamp.classList.remove('d-visible');
|
|
break;
|
|
case 'dualfiber':
|
|
attenuator.classList.remove('d-visible');
|
|
ILA.classList.remove('d-visible');
|
|
amplifier.classList.remove('d-visible');
|
|
dualfiber.classList.add('d-visible');
|
|
service.classList.remove('d-visible');
|
|
roadm.classList.remove('d-visible');
|
|
transceiver.classList.remove('d-visible');
|
|
singlefiber.classList.remove('d-visible');
|
|
singlepatch.classList.remove('d-visible');
|
|
// drawerclose.classList.add("drawerleft")
|
|
dualpatch.classList.remove('d-visible');
|
|
ramanamp.classList.remove('d-visible');
|
|
break;
|
|
case 'create':
|
|
attenuator.classList.remove('d-visible');
|
|
ILA.classList.remove('d-visible');
|
|
amplifier.classList.remove('d-visible');
|
|
dualfiber.classList.remove('d-visible');
|
|
service.classList.remove('d-visible');
|
|
roadm.classList.remove('d-visible');
|
|
transceiver.classList.remove('d-visible');
|
|
singlefiber.classList.remove('d-visible');
|
|
singlepatch.classList.remove('d-visible');
|
|
dualpatch.classList.remove('d-visible');
|
|
// drawerclose.classList.add("drawerleft")
|
|
ramanamp.classList.remove('d-visible');
|
|
break;
|
|
case 'transceiver':
|
|
attenuator.classList.remove('d-visible');
|
|
ILA.classList.remove('d-visible');
|
|
amplifier.classList.remove('d-visible');
|
|
dualfiber.classList.remove('d-visible');
|
|
service.classList.remove('d-visible');
|
|
roadm.classList.remove('d-visible');
|
|
transceiver.classList.add('d-visible');
|
|
singlefiber.classList.remove('d-visible');
|
|
singlepatch.classList.remove('d-visible');
|
|
// drawerclose.classList.add("drawerleft")
|
|
dualpatch.classList.remove('d-visible');
|
|
ramanamp.classList.remove('d-visible');
|
|
break;
|
|
case 'singlefiber':
|
|
attenuator.classList.remove('d-visible');
|
|
ILA.classList.remove('d-visible');
|
|
amplifier.classList.remove('d-visible');
|
|
dualfiber.classList.remove('d-visible');
|
|
service.classList.remove('d-visible');
|
|
roadm.classList.remove('d-visible');
|
|
transceiver.classList.remove('d-visible');
|
|
singlefiber.classList.add('d-visible');
|
|
singlepatch.classList.remove('d-visible');
|
|
// drawerclose.classList.add("drawerleft")
|
|
dualpatch.classList.remove('d-visible');
|
|
ramanamp.classList.remove('d-visible');
|
|
break;
|
|
case 'dualpatch':
|
|
attenuator.classList.remove('d-visible');
|
|
ILA.classList.remove('d-visible');
|
|
amplifier.classList.remove('d-visible');
|
|
dualfiber.classList.remove('d-visible');
|
|
service.classList.remove('d-visible');
|
|
roadm.classList.remove('d-visible');
|
|
transceiver.classList.remove('d-visible');
|
|
singlefiber.classList.remove('d-visible');
|
|
singlepatch.classList.remove('d-visible');
|
|
dualpatch.classList.add('d-visible');
|
|
// drawerclose.classList.add("drawerleft")
|
|
ramanamp.classList.remove('d-visible');
|
|
break;
|
|
case 'singlepatch':
|
|
attenuator.classList.remove('d-visible');
|
|
ILA.classList.remove('d-visible');
|
|
amplifier.classList.remove('d-visible');
|
|
dualfiber.classList.remove('d-visible');
|
|
service.classList.remove('d-visible');
|
|
roadm.classList.remove('d-visible');
|
|
transceiver.classList.remove('d-visible');
|
|
singlefiber.classList.remove('d-visible');
|
|
singlepatch.classList.add('d-visible');
|
|
dualpatch.classList.remove('d-visible');
|
|
// drawerclose.classList.add("drawerleft")
|
|
ramanamp.classList.remove('d-visible');
|
|
break;
|
|
case 'service':
|
|
attenuator.classList.remove('d-visible');
|
|
ILA.classList.remove('d-visible');
|
|
amplifier.classList.remove('d-visible');
|
|
dualfiber.classList.remove('d-visible');
|
|
service.classList.add('d-visible');
|
|
roadm.classList.remove('d-visible');
|
|
transceiver.classList.remove('d-visible');
|
|
singlefiber.classList.remove('d-visible');
|
|
singlepatch.classList.remove('d-visible');
|
|
// drawerclose.classList.add("drawerleft")
|
|
dualpatch.classList.remove('d-visible');
|
|
ramanamp.classList.remove('d-visible');
|
|
break;
|
|
case 'ramanamp':
|
|
attenuator.classList.remove('d-visible');
|
|
ILA.classList.remove('d-visible');
|
|
amplifier.classList.remove('d-visible');
|
|
dualfiber.classList.remove('d-visible');
|
|
service.classList.remove('d-visible');
|
|
roadm.classList.remove('d-visible');
|
|
transceiver.classList.remove('d-visible');
|
|
singlefiber.classList.remove('d-visible');
|
|
singlepatch.classList.remove('d-visible');
|
|
// drawerclose.classList.add("drawerleft")
|
|
dualpatch.classList.remove('d-visible');
|
|
ramanamp.classList.add('d-visible');
|
|
break;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Close drawer based on node/fiber/patch/service.
|
|
* @param {string} node - The type of component.
|
|
*/
|
|
function closeDrawer(node) {
|
|
switch (node) {
|
|
case 'attenuator':
|
|
attenuator.classList.remove('d-visible');
|
|
// drawerclose.classList.remove("drawerleft")
|
|
break;
|
|
case 'roadm':
|
|
roadm.classList.remove('d-visible');
|
|
// drawerclose.classList.remove("drawerleft")
|
|
break;
|
|
case 'ILA':
|
|
ILA.classList.remove('d-visible');
|
|
// drawerclose.classList.remove("drawerleft")
|
|
break;
|
|
case 'amplifier':
|
|
amplifier.classList.remove('d-visible');
|
|
// drawerclose.classList.remove("drawerleft")
|
|
break;
|
|
case 'create':
|
|
create.classList.remove('d-visible');
|
|
// drawerclose.classList.remove("drawerleft")
|
|
break;
|
|
case 'singlefiber':
|
|
singlefiber.classList.remove('d-visible');
|
|
// drawerclose.classList.remove("drawerleft")
|
|
break;
|
|
case 'transceiver':
|
|
transceiver.classList.remove('d-visible');
|
|
// drawerclose.classList.remove("drawerleft")
|
|
break;
|
|
case 'singlepatch':
|
|
singlepatch.classList.remove('d-visible');
|
|
// drawerclose.classList.remove("drawerleft")
|
|
break;
|
|
case 'dualpatch':
|
|
dualpatch.classList.remove('d-visible');
|
|
// drawerclose.classList.remove("drawerleft")
|
|
break;
|
|
case 'dualfiber':
|
|
dualfiber.classList.remove('d-visible');
|
|
// drawerclose.classList.remove("drawerleft")
|
|
break;
|
|
case 'service':
|
|
service.classList.remove('d-visible');
|
|
// drawerclose.classList.remove("drawerleft")
|
|
case 'ramanamp':
|
|
ramanamp.classList.remove('d-visible');
|
|
// drawerclose.classList.remove("drawerleft")
|
|
}
|
|
}
|
|
|
|
var tabcontent = document.querySelector(".stp-tab");
|
|
var arrowbtn1 = document.querySelector("#toggle-arrow-1");
|
|
var arrowbtn2 = document.querySelector("#toggle-arrow-2");
|
|
var arrowbtn3 = document.querySelector("#toggle-arrow-3");
|
|
var arrowbtn4 = document.querySelector("#toggle-arrow-4");
|
|
var sidebartext = document.querySelectorAll(".sidebar-text");
|
|
var sidebartext1 = document.querySelectorAll(".sidebar-text1");
|
|
var sidebartext2 = document.querySelectorAll(".sidebar-text2");
|
|
var sidebartext3 = document.querySelectorAll(".sidebar-text3");
|
|
|
|
arrowbtn2.addEventListener("click", function () {
|
|
tabcontent.classList.toggle('left-59')
|
|
for (var i = 0; i < sidebartext1.length; i++) {
|
|
sidebartext1[i].classList.toggle("d-none")
|
|
}
|
|
|
|
|
|
})
|
|
|
|
arrowbtn3.addEventListener("click", function () {
|
|
tabcontent.classList.toggle('left-59')
|
|
for (var i = 0; i < sidebartext2.length; i++) {
|
|
sidebartext2[i].classList.toggle("d-none")
|
|
}
|
|
|
|
})
|
|
arrowbtn4.addEventListener("click", function () {
|
|
tabcontent.classList.toggle('left-59')
|
|
for (var i = 0; i < sidebartext3.length; i++) {
|
|
sidebartext3[i].classList.toggle("d-none")
|
|
}
|
|
})
|
|
|
|
/**
|
|
* Highlight the steper menu by selection.
|
|
* @param {number} index - The menu index.
|
|
*/
|
|
function stepColor(index) {
|
|
showMenu = 0;
|
|
modeHighLight();
|
|
switch (index) {
|
|
case 1:
|
|
break;
|
|
case 2:
|
|
|
|
currentStepper = "stepCreateTopology";
|
|
showMenu = 1;
|
|
//let prev = document.querySelector("#step2").previousElementSibling;
|
|
//if (prev.id === "step1") {
|
|
// let step1 = document.getElementById("step1").childNodes;
|
|
// step1[1].classList.add("tab-nav-completed");
|
|
// step1[1].classList.add("text-tab-completed")
|
|
//}
|
|
break;
|
|
case 3:
|
|
currentStepper = "stepAddService";
|
|
showMenu = 2;
|
|
//let prev1 = document.querySelector("#step3").previousElementSibling;
|
|
//if (prev1.id === "step2") {
|
|
// let step1 = document.getElementById("step2").childNodes;
|
|
// step1[1].classList.add("tab-nav-completed");
|
|
// step1[1].classList.add("text-tab-completed")
|
|
//}
|
|
break;
|
|
case 4:
|
|
currentStepper = "stepSaveNetwork";
|
|
//let prev2 = document.querySelector("#step4").previousElementSibling;
|
|
//if (prev2.id === "step3") {
|
|
// let step1 = document.getElementById("step3").childNodes;
|
|
// step1[1].classList.add("tab-nav-completed");
|
|
// step1[1].classList.add("text-tab-completed")
|
|
//}
|
|
break;
|
|
}
|
|
}
|
|
|
|
var btnAddRoadm = "#btnAddRoadm";
|
|
var btnAddFused = "#btnAddFused";
|
|
var btnAddILA = "#btnAddILA";
|
|
var btnAddAmplifier = "#btnAddAmplifier";
|
|
var btnAddTransceiver = "#btnAddTransceiver";
|
|
var btnAddDualFiber = "#btnAddDualFiber";
|
|
var btnAddSingleFiber = "#btnAddSingleFiber";
|
|
var btnServiceActive = "#btnServiceActive";
|
|
var btnAddSinglePatch = "#btnAddSinglePatch";
|
|
var btnAddDualPatch = "#btnAddDualPatch";
|
|
var btnAddRamAmp = "#btnAddRamAmp";
|
|
|
|
/**
|
|
* Highlight node/fiber/patch/service menu by name.
|
|
* @param {string} node - The type on component.
|
|
*/
|
|
function modeHighLight(node) {
|
|
disableFiberService();
|
|
showHideDrawerandMenu();
|
|
switch (node) {
|
|
case 'Roadm':
|
|
$(btnAddRoadm).addClass('highlight');
|
|
$(btnAddFused).removeClass('highlight');
|
|
$(btnAddILA).removeClass('highlight');
|
|
$(btnAddAmplifier).removeClass('highlight');
|
|
$(btnAddTransceiver).removeClass('highlight');
|
|
$(btnAddDualFiber).removeClass('highlight');
|
|
$(btnAddSingleFiber).removeClass('highlight');
|
|
$(btnAddSinglePatch).removeClass('highlight');
|
|
$(btnAddDualPatch).removeClass('highlight');
|
|
$(btnAddRamAmp).removeClass('highlight');
|
|
break;
|
|
case 'ILA':
|
|
$(btnAddRoadm).removeClass('highlight');
|
|
$(btnAddFused).removeClass('highlight');
|
|
$(btnAddILA).addClass('highlight');
|
|
$(btnAddAmplifier).removeClass('highlight');
|
|
$(btnAddTransceiver).removeClass('highlight');
|
|
$(btnAddDualFiber).removeClass('highlight');
|
|
$(btnAddSingleFiber).removeClass('highlight');
|
|
$(btnAddSinglePatch).removeClass('highlight');
|
|
$(btnAddDualPatch).removeClass('highlight');
|
|
$(btnAddRamAmp).removeClass('highlight');
|
|
break;
|
|
case 'amplifier':
|
|
$(btnAddRoadm).removeClass('highlight');
|
|
$(btnAddFused).removeClass('highlight');
|
|
$(btnAddILA).removeClass('highlight');
|
|
$(btnAddAmplifier).addClass('highlight');
|
|
$(btnAddTransceiver).removeClass('highlight');
|
|
$(btnAddDualFiber).removeClass('highlight');
|
|
$(btnAddSingleFiber).removeClass('highlight');
|
|
$(btnAddSinglePatch).removeClass('highlight');
|
|
$(btnAddDualPatch).removeClass('highlight');
|
|
$(btnAddRamAmp).removeClass('highlight');
|
|
break;
|
|
case 'fused':
|
|
$(btnAddRoadm).removeClass('highlight');
|
|
$(btnAddFused).addClass('highlight');
|
|
$(btnAddILA).removeClass('highlight');
|
|
$(btnAddAmplifier).removeClass('highlight');
|
|
$(btnAddTransceiver).removeClass('highlight');
|
|
$(btnAddDualFiber).removeClass('highlight');
|
|
$(btnAddSingleFiber).removeClass('highlight');
|
|
$(btnAddSinglePatch).removeClass('highlight');
|
|
$(btnAddDualPatch).removeClass('highlight');
|
|
$(btnAddRamAmp).removeClass('highlight');
|
|
break;
|
|
case 'transceiver':
|
|
$(btnAddRoadm).removeClass('highlight');
|
|
$(btnAddFused).removeClass('highlight');
|
|
$(btnAddILA).removeClass('highlight');
|
|
$(btnAddAmplifier).removeClass('highlight');
|
|
$(btnAddTransceiver).addClass('highlight');
|
|
$(btnAddDualFiber).removeClass('highlight');
|
|
$(btnAddSingleFiber).removeClass('highlight');
|
|
$(btnAddSinglePatch).removeClass('highlight');
|
|
$(btnAddDualPatch).removeClass('highlight');
|
|
$(btnAddRamAmp).removeClass('highlight');
|
|
break;
|
|
case 'dualfiber':
|
|
$(btnAddRoadm).removeClass('highlight');
|
|
$(btnAddFused).removeClass('highlight');
|
|
$(btnAddILA).removeClass('highlight');
|
|
$(btnAddAmplifier).removeClass('highlight');
|
|
$(btnAddTransceiver).removeClass('highlight');
|
|
$(btnAddDualFiber).addClass('highlight');
|
|
$(btnAddSingleFiber).removeClass('highlight');
|
|
$(btnAddSinglePatch).removeClass('highlight');
|
|
$(btnAddDualPatch).removeClass('highlight');
|
|
$(btnAddRamAmp).removeClass('highlight');
|
|
break;
|
|
case 'singlefiber':
|
|
$(btnAddRoadm).removeClass('highlight');
|
|
$(btnAddFused).removeClass('highlight');
|
|
$(btnAddILA).removeClass('highlight');
|
|
$(btnAddAmplifier).removeClass('highlight');
|
|
$(btnAddTransceiver).removeClass('highlight');
|
|
$(btnAddDualFiber).removeClass('highlight');
|
|
$(btnAddSingleFiber).addClass('highlight');
|
|
$(btnAddSinglePatch).removeClass('highlight');
|
|
$(btnAddDualPatch).removeClass('highlight');
|
|
$(btnAddRamAmp).removeClass('highlight');
|
|
break;
|
|
case 'singlepatch':
|
|
$(btnAddRoadm).removeClass('highlight');
|
|
$(btnAddFused).removeClass('highlight');
|
|
$(btnAddILA).removeClass('highlight');
|
|
$(btnAddAmplifier).removeClass('highlight');
|
|
$(btnAddTransceiver).removeClass('highlight');
|
|
$(btnAddDualFiber).removeClass('highlight');
|
|
$(btnAddSingleFiber).removeClass('highlight');
|
|
$(btnAddSinglePatch).addClass('highlight');
|
|
$(btnAddDualPatch).removeClass('highlight');
|
|
$(btnAddRamAmp).removeClass('highlight');
|
|
break;
|
|
case 'dualpatch':
|
|
$(btnAddRoadm).removeClass('highlight');
|
|
$(btnAddFused).removeClass('highlight');
|
|
$(btnAddILA).removeClass('highlight');
|
|
$(btnAddAmplifier).removeClass('highlight');
|
|
$(btnAddTransceiver).removeClass('highlight');
|
|
$(btnAddDualFiber).removeClass('highlight');
|
|
$(btnAddSingleFiber).removeClass('highlight');
|
|
$(btnAddSinglePatch).removeClass('highlight');
|
|
$(btnAddDualPatch).addClass('highlight');
|
|
$(btnAddRamAmp).removeClass('highlight');
|
|
break;
|
|
case 'ramanamp':
|
|
$(btnAddRoadm).removeClass('highlight');
|
|
$(btnAddFused).removeClass('highlight');
|
|
$(btnAddILA).removeClass('highlight');
|
|
$(btnAddAmplifier).removeClass('highlight');
|
|
$(btnAddTransceiver).removeClass('highlight');
|
|
$(btnAddDualFiber).removeClass('highlight');
|
|
$(btnAddSingleFiber).removeClass('highlight');
|
|
$(btnAddSinglePatch).removeClass('highlight');
|
|
$(btnAddDualPatch).removeClass('highlight');
|
|
$(btnAddRamAmp).addClass('highlight');
|
|
break;
|
|
case 'service':
|
|
$(btnServiceActive).addClass('highlight');
|
|
break;
|
|
default:
|
|
$(btnAddRoadm).removeClass('highlight');
|
|
$(btnAddFused).removeClass('highlight');
|
|
$(btnAddILA).removeClass('highlight');
|
|
$(btnAddAmplifier).removeClass('highlight');
|
|
$(btnAddTransceiver).removeClass('highlight');
|
|
$(btnAddDualFiber).removeClass('highlight');
|
|
$(btnAddSingleFiber).removeClass('highlight');
|
|
$(btnServiceActive).removeClass('highlight');
|
|
$(btnAddSinglePatch).removeClass('highlight');
|
|
$(btnAddDualPatch).removeClass('highlight');
|
|
$(btnAddRamAmp).removeClass('highlight');
|
|
try {
|
|
network.disableEditMode();
|
|
}
|
|
catch {}
|
|
|
|
}
|
|
}
|
|
|
|
/** Show/Hide the context menu of node/fiber/patch/service. */
|
|
function showHideDrawerandMenu() {
|
|
document.getElementById("roadmMenu").style.display = "none";
|
|
document.getElementById("attenuatorMenu").style.display = "none";
|
|
document.getElementById("ILAMenu").style.display = "none";
|
|
document.getElementById("amplifierMenu").style.display = "none";
|
|
document.getElementById("transceiverMenu").style.display = "none";
|
|
document.getElementById("serviceMenu").style.display = "none";
|
|
document.getElementById("singleFiberMenu").style.display = "none";
|
|
document.getElementById("dualFiberMenu").style.display = "none";
|
|
document.getElementById("singlePatchMenu").style.display = "none";
|
|
document.getElementById("dualPatchMenu").style.display = "none";
|
|
document.getElementById("ramanAmpMenu").style.display = "none";
|
|
document.getElementById("templateMenu").style.display = "none";
|
|
|
|
closeDrawer('roadm');
|
|
closeDrawer('attenuator');
|
|
closeDrawer('ILA');
|
|
closeDrawer('amplifier');
|
|
closeDrawer('transceiver');
|
|
closeDrawer('service');
|
|
closeDrawer('dualfiber');
|
|
closeDrawer('singlefiber');
|
|
closeDrawer('singlepatch');
|
|
closeDrawer('dualpatch');
|
|
closeDrawer('ramanamp');
|
|
}
|
|
|
|
|
|
|
|
|
|
|