diff --git a/subnets.html b/subnets.html index c24a7be..13338b1 100644 --- a/subnets.html +++ b/subnets.html @@ -6,6 +6,7 @@ var curNetwork = 0; var curMask = 0; +var curComments = {}; function updateNetwork() { @@ -77,10 +78,37 @@ function recreateTables() document.getElementById('joinHeader').colSpan = (rootSubnet[0] > 0 ? rootSubnet[0] : 1); document.getElementById('col_join').span = (rootSubnet[0] > 0 ? rootSubnet[0] : 1); - /* Create the bookmark hyperlink */ + /* Disable joins for subnets with comments. */ + var joinLocks = {}; // a unique collection of join elements to disable + + for (var addressWithMask in curComments) { + let splitAddressMask = addressWithMask.split('/'); + let addressToLock = inet_aton(splitAddressMask[0]); + let upperMaskToLock = splitAddressMask[1]; + for (let maskToLock = upperMaskToLock; maskToLock >= curMask; maskToLock--) { + joinLocks[inet_ntoa(network_address(addressToLock, maskToLock)) + "/" + maskToLock] = true; + } + } + + for (var lock in joinLocks) { + let joinElement = document.getElementById("join_" + lock); + if (joinElement && joinElement.onclick) { + joinElement.onclick = null; + joinElement.classList.remove("maskSpanJoinable"); + joinElement.classList.add("maskSpan"); + } + }; + + createBookmarkHyperlink(); +} + +function createBookmarkHyperlink() { var link = document.getElementById('saveLink'); if (link) { - link.href = 'subnets.html?network='+inet_ntoa(curNetwork)+'&mask='+curMask+'&division='+binToAscii(nodeToString(rootSubnet)); + link.href = 'subnets.html?network='+inet_ntoa(curNetwork) + +'&mask='+curMask + +'&division='+binToAscii(nodeToString(rootSubnet)) + +'&comments='+JSON.stringify(curComments); } } @@ -132,9 +160,10 @@ function asciiToBin(str) return out; } +// Recursive function that creates rows working from the outer most mask and working inwards function createRow(calcbody, node, address, mask, labels, depth) { - if (node[2]) { + if (node[2]) { // We need to go deeper var newlabels = labels; newlabels.push(mask+1); newlabels.push(node[2][0][1]); @@ -147,7 +176,7 @@ function createRow(calcbody, node, address, mask, labels, depth) newlabels.push(node[2][1]); createRow(calcbody, node[2][1], address+subnet_addresses(mask+1), mask+1, newlabels, depth-1); } - else { + else { // Actually create a row var newRow = document.createElement('TR'); calcbody.appendChild(newRow); @@ -163,6 +192,7 @@ function createRow(calcbody, node, address, mask, labels, depth) var numHosts; var addressRange; var usaebleRange; + var comment = curComments[inet_ntoa(address) + "/" + mask] || null; if (mask == 32) { addressRange = inet_ntoa(addressFirst); @@ -201,12 +231,42 @@ function createRow(calcbody, node, address, mask, labels, depth) newCell.appendChild(document.createTextNode(numHosts)); newRow.appendChild(newCell); + /* Comments */ + var newCell = document.createElement('TD'); + var textarea = document.createElement('TEXTAREA'); + textarea.id = "comment_" + inet_ntoa(network_address(address, mask)) + "/" + mask; + textarea.onchange = ((mask, address) => ( function() { + var key = inet_ntoa(address) + "/" + mask; + var needToRedraw = false; + + if (this.value == null || this.value === "") { + needToRedraw = curComments[key] !== undefined; + delete curComments[key]; + } else { + needToRedraw = curComments[key] === undefined; + curComments[key] = this.value; + } + + if (needToRedraw) { + recreateTables(); + // Restore previous focus after redrawing table + document.getElementById(this.id).focus(); + } else { + // Just update link if we don't need to redraw. + createBookmarkHyperlink(); + } + }))(mask, address); // keep some vars in scope + + textarea.innerText = comment; + newCell.appendChild(textarea); + newRow.appendChild(newCell); + /* actions */ var newCell = document.createElement('TD'); newRow.appendChild(newCell); - if (mask == 32) { + if (mask == 32 || comment != null) { var newLink = document.createElement('SPAN'); newLink.className = 'disabledAction'; newLink.appendChild(document.createTextNode('Divide')); @@ -230,6 +290,7 @@ function createRow(calcbody, node, address, mask, labels, depth) var newCell = document.createElement('TD'); newCell.rowSpan = (rowspan > 1 ? rowspan : 1); newCell.colSpan = (colspan > 1 ? colspan : 1); + newCell.id = "join_" + inet_ntoa(network_address(address, mask)) + "/" + mask; if (i == (labels.length/3)-1) { newCell.className = 'maskSpan'; @@ -248,13 +309,15 @@ function createRow(calcbody, node, address, mask, labels, depth) colspan = 1; // reset for subsequent cells } } - } /* This is necessary because 'joinnode' changes during the scope of the caller */ function newJoin(joinnode) { - return function() { join(joinnode) }; + return function() { + join(joinnode); + return false; // prevent click event + }; } function divide(node) @@ -374,9 +437,10 @@ function calcOnLoad() { preloadSubnetImages(); args = parseQueryString(); - if (args['network'] && args['mask'] && args['division']) { + if (args['network'] && args['mask'] && args['division'] && args['comments']) { document.forms['calc'].elements['network'].value = args['network']; document.forms['calc'].elements['netbits'].value = args['mask']; + curComments = JSON.parse(args['comments']); updateNetwork(); var division = asciiToBin(args['division']); rootSubnet = [0, 0, null]; @@ -489,7 +553,7 @@ P { .maskSpanJoinable { background-color: #cccccc; text-align: right; - cursor: hand; + cursor: grab; } .maskSpanRotate { @@ -525,12 +589,13 @@ P { -
Show columns: +
Show columns: +
@@ -557,6 +622,7 @@ If you wish to save this subnetting for later, bookmark