paradizelost/visualsubnetcalculator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: paradizelost:fe956b853ed1e7c97e9ef34e9896e329eb3dc5a6
Branches Tags
paradizelost:master paradizelost:work
...
compare: paradizelost:529c790e9ad23311a9a6e56a345ab6c656a6da96
Branches Tags
paradizelost:master paradizelost:work

2 Commits
fe956b853e ... 529c790e9a

Author SHA1 Message Date
paradizelost
529c790e9a Merge pull request 'merging in changes to do ipv6 and comments' (#4) from work into master 
Reviewed-on: #4
 2025-08-18 20:33:58 +00:00
Dan Hamik
5ca12ff53b merging in changes to do ipv6 and comments
All checks were successful
/ Plan (push) Successful in 1m11s
Details
/ Plan (pull_request) Successful in 38s
Details
2025-08-18 15:32:27 -05:00
1 changed files with 356 additions and 372 deletions
Expand all files Collapse all files

452
subnets.html
View File

@@ -1,68 +1,90 @@
<html> <html>
<head> <head>
<title>Visual Subnet Calculator</title> <title>Visual Subnet Calculator</title>
<script language="javascript" type="text/javascript"> <script src="calculations_4.js"></script>
<!-- <script src="calculations_6.js"></script>
<script src="calculations.js"></script>
var curNetwork = 0; <script language="javascript" type="text/javascript">
var curMask = 0; var curNetwork = 0;
var curMask = 0;
var curVersion = 4;
var curComments = {}; var curComments = {};
function updateNetwork() function updateNetwork() {
{ var newNetworkStr = document.forms["calc"].elements["network"].value;
var newNetworkStr = document.forms['calc'].elements['network'].value; var newMask = parseInt(
var newMask = parseInt(document.forms['calc'].elements['netbits'].value); document.forms["calc"].elements["netbits"].value
);
var newVersion = parseInt(
document.forms["calc"].elements["version"].value
);
var newNetwork = inet_aton(newNetworkStr); var newNetwork = inet_aton(newVersion, newNetworkStr);
if (newNetwork === null) { if (newNetwork === null) {
alert('Invalid network address entered'); alert("Invalid network address entered");
return; return;
} }
var tmpNetwork = network_address(newNetwork, newMask); var tmpNetwork = network_address(newVersion, newNetwork, newMask);
if (newNetwork != tmpNetwork) { if (newNetwork != tmpNetwork) {
alert('The network address entered is not on a network boundary for this mask.\nIt has been changed to '+inet_ntoa(tmpNetwork)+'.'); alert(
"The network address entered is not on a network boundary for this mask.\nIt has been changed to " +
inet_ntoa(newVersion, tmpNetwork) +
"."
);
newNetwork = tmpNetwork; newNetwork = tmpNetwork;
document.forms['calc'].elements['network'].value = inet_ntoa(tmpNetwork); document.forms["calc"].elements["network"].value = inet_ntoa(
newVersion,
tmpNetwork
);
} }
if (newMask < 0 || newMask > 32) { if ((newVersion == 4 && (newMask < 0 || newMask > 32)) || (newVersion == 6 && (newMask < 0 || newMask > 128))) {
alert('The network mask you have entered is invalid'); alert("The network mask you have entered is invalid");
return; return;
} }
if (curMask == 0) { if (curMask == 0) {
curMask = newMask; curMask = newMask;
curNetwork = newNetwork; curNetwork = newNetwork;
curVersion = newVersion;
startOver(); startOver();
} } else if (
else if (curMask != newMask && confirm('You are changing the base network from /'+curMask+' to /'+newMask+'. This will reset any changes you have made. Proceed?')) { (curMask != newMask || curVersion != newVersion) &&
confirm(
"You are changing the base network from /" +
curMask + "(v" + curVersion +
") to /" +
newMask + "(v" + newVersion +
"). This will reset any changes you have made. Proceed?"
)
) {
curMask = newMask; curMask = newMask;
curNetwork = newNetwork; curNetwork = newNetwork;
curVersion = newVersion;
startOver(); startOver();
} } else {
else { document.forms["calc"].elements["netbits"].value = curMask;
document.forms['calc'].elements['netbits'].value = curMask;
curNetwork = newNetwork; curNetwork = newNetwork;
recreateTables(); recreateTables();
} }
} }
function startOver() function startOver() {
{
rootSubnet = [0, 0, null]; rootSubnet = [0, 0, null];
recreateTables(); recreateTables();
} }
function recreateTables() function recreateTables() {
{ var calcbody = document.getElementById("calcbody");
var calcbody = document.getElementById('calcbody');
if (!calcbody) { if (!calcbody) {
alert('Body not found'); alert("Body not found");
return; return;
} }
@@ -73,10 +95,21 @@ function recreateTables()
updateNumChildren(rootSubnet); updateNumChildren(rootSubnet);
updateDepthChildren(rootSubnet); updateDepthChildren(rootSubnet);
createRow(calcbody, rootSubnet, curNetwork, curMask, [curMask, rootSubnet[1], rootSubnet], rootSubnet[0]); createRow(
calcbody,
rootSubnet,
curNetwork,
curMask,
[curMask, rootSubnet[1], rootSubnet],
rootSubnet[0]
);
document.getElementById('joinHeader').colSpan = (rootSubnet[0] > 0 ? rootSubnet[0] : 1); document.getElementById("joinHeader").colSpan =
document.getElementById('col_join').span = (rootSubnet[0] > 0 ? rootSubnet[0] : 1); 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. */ /* Disable joins for subnets with comments. */
var joinLocks = {}; // a unique collection of join elements to disable var joinLocks = {}; // a unique collection of join elements to disable
@@ -111,26 +144,22 @@ function createBookmarkHyperlink() {
+'&comments='+encodeURIComponent(JSON.stringify(curComments)); +'&comments='+encodeURIComponent(JSON.stringify(curComments));
} }
} }
function nodeToString(node) {
function nodeToString(node)
{
if (node[2]) { if (node[2]) {
return '1'+nodeToString(node[2][0])+nodeToString(node[2][1]); return "1" + nodeToString(node[2][0]) + nodeToString(node[2][1]);
} else {
return "0";
} }
else {
return '0';
} }
}
function binToAscii(str) function binToAscii(str) {
{ var curOut = "";
var curOut = '';
var curBit = 0; var curBit = 0;
var curChar = 0; var curChar = 0;
for (var i=0; i<str.length; i++) { for (var i = 0; i < str.length; i++) {
if (str.charAt(i) == '1') { if (str.charAt(i) == "1") {
curChar |= 1<<curBit; curChar |= 1 << curBit;
} }
curBit++; curBit++;
if (curBit > 3) { if (curBit > 3) {
@@ -142,95 +171,114 @@ function binToAscii(str)
if (curBit > 0) { if (curBit > 0) {
curOut += curChar.toString(16); curOut += curChar.toString(16);
} }
return str.length+'.'+curOut; return str.length + "." + curOut;
} }
function asciiToBin(str) function asciiToBin(str) {
{
var re = /([0-9]+)\.([0-9a-f]+)/; var re = /([0-9]+)\.([0-9a-f]+)/;
var res = re.exec(str); var res = re.exec(str);
var len = res[1]; var len = res[1];
var encoded = res[2]; var encoded = res[2];
var out = ''; var out = "";
for (var i=0; i< res[1]; i++) { for (var i = 0; i < res[1]; i++) {
var ch = parseInt(res[2].charAt(Math.floor(i/4)), 16); var ch = parseInt(res[2].charAt(Math.floor(i / 4)), 16);
var pos = i % 4; var pos = i % 4;
out += (ch & (1<<pos) ? '1' : '0'); out += ch & (1 << pos) ? "1" : "0";
} }
return out; return out;
} }
// Recursive function that creates rows working from the outer most mask and working inwards function createRow(calcbody, node, address, mask, labels, depth) {
function createRow(calcbody, node, address, mask, labels, depth) if (node[2]) {
{
if (node[2]) { // We need to go deeper
var newlabels = labels; var newlabels = labels;
newlabels.push(mask+1); newlabels.push(mask + 1);
newlabels.push(node[2][0][1]); newlabels.push(node[2][0][1]);
newlabels.push(node[2][0]); newlabels.push(node[2][0]);
createRow(calcbody, node[2][0], address, mask+1, newlabels, depth-1); createRow(
calcbody,
node[2][0],
address,
mask + 1,
newlabels,
depth - 1
);
newlabels = new Array(); newlabels = new Array();
newlabels.push(mask+1); newlabels.push(mask + 1);
newlabels.push(node[2][1][1]); newlabels.push(node[2][1][1]);
newlabels.push(node[2][1]); newlabels.push(node[2][1]);
createRow(calcbody, node[2][1], address+subnet_addresses(mask+1), mask+1, newlabels, depth-1); createRow(
} calcbody,
else { // Actually create a row node[2][1],
var newRow = document.createElement('TR'); address + subnet_addresses(curVersion, mask + 1),
mask + 1,
newlabels,
depth - 1
);
} else {
var newRow = document.createElement("TR");
calcbody.appendChild(newRow); calcbody.appendChild(newRow);
/* subnet address */ /* subnet address */
var newCell = document.createElement('TD'); var newCell = document.createElement("TD");
newCell.appendChild(document.createTextNode(inet_ntoa(address)+'/'+mask)); newCell.appendChild(
document.createTextNode(inet_ntoa(curVersion, address) + "/" + mask)
);
newRow.appendChild(newCell); newRow.appendChild(newCell);
var addressFirst = address; var addressFirst = address;
var addressLast = subnet_last_address(address, mask); var addressLast = subnet_last_address(curVersion, address, mask);
var useableFirst = address + 1; var useableFirst = subnet_first_address_useable(curVersion, address);
var useableLast = addressLast - 1; var useableLast = subnet_last_address_useable(curVersion, addressLast);
var numHosts; var numHosts;
var addressRange; var addressRange;
var usaebleRange; var usaebleRange;
var comment = curComments[inet_ntoa(address) + "/" + mask] || null; var comment = curComments[inet_ntoa(address) + "/" + mask] || null;
if ((curVersion == 4 && mask == 32) || (curVersion == 6 && mask == 128)) {
if (mask == 32) { addressRange = inet_ntoa(curVersion, addressFirst);
addressRange = inet_ntoa(addressFirst);
useableRange = addressRange; useableRange = addressRange;
numHosts = 1; numHosts = 1;
} } else {
else { addressRange =
addressRange = inet_ntoa(addressFirst)+' - '+inet_ntoa(addressLast); inet_ntoa(curVersion, addressFirst) +
if (mask == 31) { " - " +
inet_ntoa(curVersion, addressLast);
if ( (curVersion == 4 && mask == 31) || (curVersion == 6 && mask == 127)) {
useableRange = addressRange; useableRange = addressRange;
numHosts = 2; numHosts = 2;
} } else {
else { useableRange =
useableRange = inet_ntoa(useableFirst)+' - '+inet_ntoa(useableLast); inet_ntoa(curVersion, useableFirst) +
numHosts = (1 + useableLast - useableFirst); " - " +
inet_ntoa(curVersion, useableLast);
numHosts = num_hosts(curVersion, useableFirst, useableLast);
} }
} }
/* netmask */ /* netmask */
var newCell = document.createElement('TD'); var newCell = document.createElement("TD");
newCell.appendChild(document.createTextNode(inet_ntoa(subnet_netmask(mask)))); var netmask = subnet_netmask(curVersion, mask);
if (netmask) {
newCell.appendChild(
document.createTextNode(inet_ntoa(curVersion, netmask))
);
}
newRow.appendChild(newCell); newRow.appendChild(newCell);
/* range of addresses */ /* range of addresses */
var newCell = document.createElement('TD'); var newCell = document.createElement("TD");
newCell.appendChild(document.createTextNode(addressRange)); newCell.appendChild(document.createTextNode(addressRange));
newRow.appendChild(newCell); newRow.appendChild(newCell);
/* useable addresses */ /* useable addresses */
var newCell = document.createElement('TD'); var newCell = document.createElement("TD");
newCell.appendChild(document.createTextNode(useableRange)); newCell.appendChild(document.createTextNode(useableRange));
newRow.appendChild(newCell); newRow.appendChild(newCell);
/* Hosts */ /* Hosts */
var newCell = document.createElement('TD'); var newCell = document.createElement("TD");
newCell.appendChild(document.createTextNode(numHosts)); newCell.appendChild(document.createTextNode(numHosts));
newRow.appendChild(newCell); newRow.appendChild(newCell);
/* Comments */ /* Comments */
var newCell = document.createElement('TD'); var newCell = document.createElement('TD');
var textarea = document.createElement('TEXTAREA'); var textarea = document.createElement('TEXTAREA');
@@ -261,210 +309,141 @@ function createRow(calcbody, node, address, mask, labels, depth)
newCell.appendChild(textarea); newCell.appendChild(textarea);
newRow.appendChild(newCell); newRow.appendChild(newCell);
/* actions */ /* actions */
var newCell = document.createElement('TD'); var newCell = document.createElement("TD");
newRow.appendChild(newCell); newRow.appendChild(newCell);
if (mask == 32 || comment != null) { if ((curVersion == 4 && mask == 32) || (curVersion == 6 && mask == 128)) {
var newLink = document.createElement('SPAN'); var newLink = document.createElement("SPAN");
newLink.className = 'disabledAction'; newLink.className = "disabledAction";
newLink.appendChild(document.createTextNode('Divide')); newLink.appendChild(document.createTextNode("Divide"));
newCell.appendChild(newLink); newCell.appendChild(newLink);
} } else {
else { var newLink = document.createElement("A");
var newLink = document.createElement('A'); newLink.href = "#";
newLink.href = '#'; newLink.onclick = function () {
newLink.onclick = function () { divide(node); return false; } divide(node);
newLink.appendChild(document.createTextNode('Divide')); return false;
};
newLink.appendChild(document.createTextNode("Divide"));
newCell.appendChild(newLink); newCell.appendChild(newLink);
} }
var colspan = depth - node[0]; var colspan = depth - node[0];
for (var i=(labels.length/3)-1; i>=0; i--) { for (var i = labels.length / 3 - 1; i >= 0; i--) {
var mask = labels[i*3]; var mask = labels[i * 3];
var rowspan = labels[(i*3)+1]; var rowspan = labels[i * 3 + 1];
var joinnode = labels[(i*3)+2]; var joinnode = labels[i * 3 + 2];
var newCell = document.createElement('TD'); var newCell = document.createElement("TD");
newCell.rowSpan = (rowspan > 1 ? rowspan : 1); newCell.rowSpan = rowspan > 1 ? rowspan : 1;
newCell.colSpan = (colspan > 1 ? colspan : 1); newCell.colSpan = colspan > 1 ? colspan : 1;
newCell.id = "join_" + inet_ntoa(network_address(address, mask)) + "/" + mask;
if (i == (labels.length/3)-1) { if (i == labels.length / 3 - 1) {
newCell.className = 'maskSpan'; newCell.className = "maskSpan";
} } else {
else { newCell.className = "maskSpanJoinable";
newCell.className = 'maskSpanJoinable';
newCell.onclick = newJoin(joinnode); newCell.onclick = newJoin(joinnode);
// newCell.onmouseover = function() { window.status = joinnode[0]+'---'+joinnode[1]+'---'+joinnode[2]+'>>>>>'+node[2];} // newCell.onmouseover = function() { window.status = joinnode[0]+'---'+joinnode[1]+'---'+joinnode[2]+'>>>>>'+node[2];}
} }
var newImg = document.createElement('IMG'); var newImg = document.createElement("IMG");
newImg.src = 'img/'+mask+'.gif'; newImg.src = "img/" + mask + ".gif";
newCell.appendChild(newImg); newCell.appendChild(newImg);
newRow.appendChild(newCell); newRow.appendChild(newCell);
colspan = 1; // reset for subsequent cells colspan = 1; // reset for subsequent cells
} }
} }
} }
/* This is necessary because 'joinnode' changes during the scope of the caller */ /* This is necessary because 'joinnode' changes during the scope of the caller */
function newJoin(joinnode) function newJoin(joinnode) {
{ return function () {
return function() {
join(joinnode); join(joinnode);
return false; // prevent click event
}; };
} }
function divide(node) function divide(node) {
{
node[2] = new Array(); node[2] = new Array();
node[2][0] = [0, 0, null]; node[2][0] = [0, 0, null];
node[2][1] = [0, 0, null]; node[2][1] = [0, 0, null];
recreateTables(); recreateTables();
} }
function join(node) function join(node) {
{
/* easy as pie */ /* easy as pie */
node[2] = null; node[2] = null;
recreateTables(); recreateTables();
} }
function updateNumChildren(node) function updateNumChildren(node) {
{
if (node[2] == null) { if (node[2] == null) {
node[1] = 0; node[1] = 0;
return 1; return 1;
} } else {
else { node[1] =
node[1] = updateNumChildren(node[2][0]) + updateNumChildren(node[2][1]); updateNumChildren(node[2][0]) + updateNumChildren(node[2][1]);
return node[1]; return node[1];
} }
} }
function updateDepthChildren(node) function updateDepthChildren(node) {
{
if (node[2] == null) { if (node[2] == null) {
node[0] = 0; node[0] = 0;
return 1; return 1;
} } else {
else { node[0] =
node[0] = updateDepthChildren(node[2][0]) + updateDepthChildren(node[2][1]); updateDepthChildren(node[2][0]) + updateDepthChildren(node[2][1]);
return node[1]; return node[1];
} }
}
var rootSubnet;
// each node is Array:
// [0] => depth of children, total number of visible children, children
function inet_ntoa(addrint)
{
return ((addrint >> 24) & 0xff)+'.'+
((addrint >> 16) & 0xff)+'.'+
((addrint >> 8) & 0xff)+'.'+
(addrint & 0xff);
}
function inet_aton(addrstr)
{
var re = /^([0-9]{1,3})\.([0-9]{1,3})\.([0-9]{1,3})\.([0-9]{1,3})$/;
var res = re.exec(addrstr);
if (res === null) {
return null;
} }
for (var i=1; i<=4; i++) { var rootSubnet;
if (res[i] < 0 || res[i] > 255) {
return null;
}
}
return (res[1] << 24) | (res[2] << 16) | (res[3] << 8) | res[4]; // each node is Array:
} // [0] => depth of children, total number of visible children, children
function network_address(ip, mask) function preloadSubnetImages() {
{
var maskbits = 0;
for (var i=31-mask; i>=0; i--) {
ip &= ~ 1<<i;
}
return ip;
}
function subnet_addresses(mask)
{
return 1<<(32-mask);
}
function subnet_last_address(subnet, mask)
{
return subnet + subnet_addresses(mask) - 1;
}
function subnet_netmask(mask)
{
return network_address(0xffffffff, mask);
}
function preloadSubnetImages()
{
if (document.images) { if (document.images) {
if (!document.preloadedImages) { if (!document.preloadedImages) {
document.preloadedImages = new Array(); document.preloadedImages = new Array();
} }
for (var i=0; i<=32; i++) { for (var i = 0; i <= 128; i++) {
var img = new Image(); var img = new Image();
img.src = 'img/'+i+'.gif'; img.src = "img/" + i + ".gif";
document.preloadedImages.push(img); document.preloadedImages.push(img);
} }
} }
} }
function calcOnLoad() {
function calcOnLoad()
{
preloadSubnetImages(); preloadSubnetImages();
args = parseQueryString(); args = parseQueryString();
if (args['network'] && args['mask'] && args['division']) { if (args["network"] && args["mask"] && args["division"]) {
document.forms['calc'].elements['network'].value = args['network']; document.forms["calc"].elements["version"].value = args["version"] || 4;
document.forms['calc'].elements['netbits'].value = args['mask']; document.forms["calc"].elements["network"].value = args["network"];
document.forms["calc"].elements["netbits"].value = args["mask"];
if (args['comments']) {
curComments = JSON.parse(args['comments']);
} else {
curComments = {};
}
updateNetwork(); updateNetwork();
var division = asciiToBin(args['division']); var division = asciiToBin(args["division"]);
rootSubnet = [0, 0, null]; rootSubnet = [0, 0, null];
if (division != '0') { if (division != "0") {
loadNode(rootSubnet, division); loadNode(rootSubnet, division);
} }
recreateTables(); recreateTables();
} } else {
else {
updateNetwork(); updateNetwork();
} }
}
function loadNode(curNode, division)
{
if (division.charAt(0) == '0') {
return division.substr(1);
} }
else {
function loadNode(curNode, division) {
if (division.charAt(0) == "0") {
return division.substr(1);
} else {
curNode[2] = new Array(); curNode[2] = new Array();
curNode[2][0] = [0, 0, null]; curNode[2][0] = [0, 0, null];
curNode[2][1] = [0, 0, null]; curNode[2][1] = [0, 0, null];
@@ -473,20 +452,21 @@ function loadNode(curNode, division)
division = loadNode(curNode[2][1], division); division = loadNode(curNode[2][1], division);
return division; return division;
} }
} }
function parseQueryString(str)
function parseQueryString (str)
{ {
str = str ? str : location.search; str = str ? str : location.search;
var query = str.charAt(0) == '?' ? str.substring(1) : str; var query = str.charAt(0) == "?" ? str.substring(1) : str;
var args = new Object(); var args = new Object();
if (query) { if (query) {
var fields = query.split('&'); var fields = query.split("&");
for (var f = 0; f < fields.length; f++) { for (var f = 0; f < fields.length; f++) {
var field = fields[f].split('='); var field = fields[f].split("=");
args[unescape(field[0].replace(/\+/g, ' '))] =
unescape(field[1].replace(/\+/g, ' ')); args[unescape(field[0].replace(/\+/g, " "))] = unescape(
field[1].replace(/\+/g, " ")
);
} }
} }
return args; return args;
@@ -546,7 +526,6 @@ P {
font-weight: bold; font-weight: bold;
background-color: #eeeeee; background-color: #eeeeee;
} }
.calc textarea { .calc textarea {
height: 1.5em; height: 1.5em;
} }
@@ -562,7 +541,7 @@ P {
.maskSpanJoinable { .maskSpanJoinable {
background-color: #cccccc; background-color: #cccccc;
text-align: right; text-align: right;
cursor: grab; cursor: hand;
} }
.maskSpanRotate { .maskSpanRotate {
@@ -586,13 +565,18 @@ P {
<table cellspacing="0"> <table cellspacing="0">
<tr> <tr>
<td class="label">IPv4 / IPv6</td>
<td class="label">Network Address</td> <td class="label">Network Address</td>
<td class="label">Mask bits</td> <td class="label">Mask bits</td>
</tr> </tr>
<tr> <tr>
<td><input type="text" name="network" size="15" maxlength="15" value="192.168.0.0"></td> <td>
<td>/<input type="text" name="netbits" size="2" maxlength="2" value="16"></td> <input type="radio" name="version" value="4" checked />
<td><input type="submit" value="Update"> <input type="radio" name="version" value="6" />
</td>
<td><input type="text" name="network" size="15" maxlength="45" value="192.168.0.0"></td>
<td>/<input type="text" name="netbits" size="3" maxlength="3" value="16"></td>
<td><input type="submit" value="Update" />
<input type="button" value="Reset" onclick="if (confirm('This will reset all subnet divisions you have made. Proceed?')) startOver();"> <input type="button" value="Reset" onclick="if (confirm('This will reset all subnet divisions you have made. Proceed?')) startOver();">
</td> </td>
</tr> </tr>