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

589 lines
15 KiB
HTML
Raw Normal View History

initial import of visual subnet calculator
2017-09-20 16:49:00 +01:00
<html>
WIP: undo some formatting
2024-03-24 18:02:04 -04:00
<head>
<title>Visual Subnet Calculator</title>
<script src="calculations_4.js"></script>
<script src="calculations_6.js"></script>
<script src="calculations.js"></script>
<script language="javascript" type="text/javascript">
var curNetwork = 0;
var curMask = 0;
var curVersion = 4;
function updateNetwork() {
var newNetworkStr = document.forms["calc"].elements["network"].value;
var newMask = parseInt(
document.forms["calc"].elements["netbits"].value
);
var newVersion = parseInt(
document.forms["calc"].elements["version"].value
);
var newNetwork = inet_aton(newVersion, newNetworkStr);
if (newNetwork === null) {
alert("Invalid network address entered");
return;
}
var tmpNetwork = network_address(newVersion, newNetwork, newMask);
if (newNetwork != 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;
document.forms["calc"].elements["network"].value = inet_ntoa(
newVersion,
tmpNetwork
);
}
if ((newVersion == 4 && (newMask < 0 || newMask > 32)) || (newVersion == 6 && (newMask < 0 || newMask > 128))) {
alert("The network mask you have entered is invalid");
return;
}
if (curMask == 0) {
curMask = newMask;
curNetwork = newNetwork;
curVersion = newVersion;
startOver();
} else if (
(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;
curNetwork = newNetwork;
curVersion = newVersion;
startOver();
} else {
document.forms["calc"].elements["netbits"].value = curMask;
curNetwork = newNetwork;
recreateTables();
}
}
function startOver() {
rootSubnet = [0, 0, null];
recreateTables();
}
function recreateTables() {
var calcbody = document.getElementById("calcbody");
if (!calcbody) {
alert("Body not found");
return;
}
while (calcbody.hasChildNodes()) {
calcbody.removeChild(calcbody.firstChild);
}
updateNumChildren(rootSubnet);
updateDepthChildren(rootSubnet);
createRow(
calcbody,
rootSubnet,
curNetwork,
curMask,
[curMask, rootSubnet[1], rootSubnet],
rootSubnet[0]
);
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 */
var link = document.getElementById("saveLink");
if (link) {
link.href =
"subnets.html?version=" +
curVersion +
"&network=" +
inet_ntoa(curVersion, curNetwork) +
"&mask=" +
curMask +
"&division=" +
binToAscii(nodeToString(rootSubnet));
}
}
function nodeToString(node) {
if (node[2]) {
return "1" + nodeToString(node[2][0]) + nodeToString(node[2][1]);
} else {
return "0";
}
}
function binToAscii(str) {
var curOut = "";
var curBit = 0;
var curChar = 0;
for (var i = 0; i < str.length; i++) {
if (str.charAt(i) == "1") {
curChar |= 1 << curBit;
initial import of visual subnet calculator
2017-09-20 16:49:00 +01:00
}
WIP: undo some formatting
2024-03-24 18:02:04 -04:00
curBit++;
if (curBit > 3) {
curOut += curChar.toString(16);
curChar = 0;
curBit = 0;
initial import of visual subnet calculator
2017-09-20 16:49:00 +01:00
}
WIP: undo some formatting
2024-03-24 18:02:04 -04:00
}
if (curBit > 0) {
curOut += curChar.toString(16);
}
return str.length + "." + curOut;
}
function asciiToBin(str) {
var re = /([0-9]+)\.([0-9a-f]+)/;
var res = re.exec(str);
var len = res[1];
var encoded = res[2];
var out = "";
for (var i = 0; i < res[1]; i++) {
var ch = parseInt(res[2].charAt(Math.floor(i / 4)), 16);
var pos = i % 4;
out += ch & (1 << pos) ? "1" : "0";
}
return out;
}
function createRow(calcbody, node, address, mask, labels, depth) {
if (node[2]) {
var newlabels = labels;
newlabels.push(mask + 1);
newlabels.push(node[2][0][1]);
newlabels.push(node[2][0]);
createRow(
calcbody,
node[2][0],
address,
mask + 1,
newlabels,
depth - 1
);
newlabels = new Array();
newlabels.push(mask + 1);
newlabels.push(node[2][1][1]);
newlabels.push(node[2][1]);
createRow(
calcbody,
node[2][1],
address + subnet_addresses(curVersion, mask + 1),
mask + 1,
newlabels,
depth - 1
);
} else {
var newRow = document.createElement("TR");
calcbody.appendChild(newRow);
/* subnet address */
var newCell = document.createElement("TD");
newCell.appendChild(
document.createTextNode(inet_ntoa(curVersion, address) + "/" + mask)
);
newRow.appendChild(newCell);
var addressFirst = address;
var addressLast = subnet_last_address(curVersion, address, mask);
var useableFirst = subnet_first_address_useable(curVersion, address);
var useableLast = subnet_last_address_useable(curVersion, addressLast);
var numHosts;
var addressRange;
var usaebleRange;
if ((curVersion == 4 && mask == 32) || (curVersion == 6 && mask == 128)) {
addressRange = inet_ntoa(curVersion, addressFirst);
useableRange = addressRange;
numHosts = 1;
} else {
addressRange =
inet_ntoa(curVersion, addressFirst) +
" - " +
inet_ntoa(curVersion, addressLast);
if ( (curVersion == 4 && mask == 31) || (curVersion == 6 && mask == 127)) {
useableRange = addressRange;
numHosts = 2;
Add IPv6 support Split IPv4 and IPv6 calculations into different JS files to make them easier to understand. IDE decided to format HTML code and I left it as-is.
2021-12-08 00:13:30 -05:00
} else {
WIP: undo some formatting
2024-03-24 18:02:04 -04:00
useableRange =
inet_ntoa(curVersion, useableFirst) +
" - " +
inet_ntoa(curVersion, useableLast);
numHosts = num_hosts(curVersion, useableFirst, useableLast);
Add IPv6 support Split IPv4 and IPv6 calculations into different JS files to make them easier to understand. IDE decided to format HTML code and I left it as-is.
2021-12-08 00:13:30 -05:00
}
}
WIP: undo some formatting
2024-03-24 18:02:04 -04:00
/* netmask */
var newCell = document.createElement("TD");
var netmask = subnet_netmask(curVersion, mask);
if (netmask) {
newCell.appendChild(
document.createTextNode(inet_ntoa(curVersion, netmask))
);
Add IPv6 support Split IPv4 and IPv6 calculations into different JS files to make them easier to understand. IDE decided to format HTML code and I left it as-is.
2021-12-08 00:13:30 -05:00
}
WIP: undo some formatting
2024-03-24 18:02:04 -04:00
newRow.appendChild(newCell);
/* range of addresses */
var newCell = document.createElement("TD");
newCell.appendChild(document.createTextNode(addressRange));
newRow.appendChild(newCell);
/* useable addresses */
var newCell = document.createElement("TD");
newCell.appendChild(document.createTextNode(useableRange));
newRow.appendChild(newCell);
/* Hosts */
var newCell = document.createElement("TD");
newCell.appendChild(document.createTextNode(numHosts));
newRow.appendChild(newCell);
/* actions */
var newCell = document.createElement("TD");
newRow.appendChild(newCell);
if ((curVersion == 4 && mask == 32) || (curVersion == 6 && mask == 128)) {
var newLink = document.createElement("SPAN");
newLink.className = "disabledAction";
newLink.appendChild(document.createTextNode("Divide"));
newCell.appendChild(newLink);
} else {
var newLink = document.createElement("A");
newLink.href = "#";
newLink.onclick = function () {
divide(node);
return false;
Add IPv6 support Split IPv4 and IPv6 calculations into different JS files to make them easier to understand. IDE decided to format HTML code and I left it as-is.
2021-12-08 00:13:30 -05:00
};
WIP: undo some formatting
2024-03-24 18:02:04 -04:00
newLink.appendChild(document.createTextNode("Divide"));
newCell.appendChild(newLink);
Add IPv6 support Split IPv4 and IPv6 calculations into different JS files to make them easier to understand. IDE decided to format HTML code and I left it as-is.
2021-12-08 00:13:30 -05:00
}
WIP: undo some formatting
2024-03-24 18:02:04 -04:00
var colspan = depth - node[0];
Add IPv6 support Split IPv4 and IPv6 calculations into different JS files to make them easier to understand. IDE decided to format HTML code and I left it as-is.
2021-12-08 00:13:30 -05:00
WIP: undo some formatting
2024-03-24 18:02:04 -04:00
for (var i = labels.length / 3 - 1; i >= 0; i--) {
var mask = labels[i * 3];
var rowspan = labels[i * 3 + 1];
var joinnode = labels[i * 3 + 2];
Add IPv6 support Split IPv4 and IPv6 calculations into different JS files to make them easier to understand. IDE decided to format HTML code and I left it as-is.
2021-12-08 00:13:30 -05:00
WIP: undo some formatting
2024-03-24 18:02:04 -04:00
var newCell = document.createElement("TD");
newCell.rowSpan = rowspan > 1 ? rowspan : 1;
newCell.colSpan = colspan > 1 ? colspan : 1;
Add IPv6 support Split IPv4 and IPv6 calculations into different JS files to make them easier to understand. IDE decided to format HTML code and I left it as-is.
2021-12-08 00:13:30 -05:00
WIP: undo some formatting
2024-03-24 18:02:04 -04:00
if (i == labels.length / 3 - 1) {
newCell.className = "maskSpan";
Add IPv6 support Split IPv4 and IPv6 calculations into different JS files to make them easier to understand. IDE decided to format HTML code and I left it as-is.
2021-12-08 00:13:30 -05:00
} else {
WIP: undo some formatting
2024-03-24 18:02:04 -04:00
newCell.className = "maskSpanJoinable";
newCell.onclick = newJoin(joinnode);
// newCell.onmouseover = function() { window.status = joinnode[0]+'---'+joinnode[1]+'---'+joinnode[2]+'>>>>>'+node[2];}
Add IPv6 support Split IPv4 and IPv6 calculations into different JS files to make them easier to understand. IDE decided to format HTML code and I left it as-is.
2021-12-08 00:13:30 -05:00
}
WIP: undo some formatting
2024-03-24 18:02:04 -04:00
var newImg = document.createElement("IMG");
newImg.src = "img/" + mask + ".gif";
newCell.appendChild(newImg);
newRow.appendChild(newCell);
Add IPv6 support Split IPv4 and IPv6 calculations into different JS files to make them easier to understand. IDE decided to format HTML code and I left it as-is.
2021-12-08 00:13:30 -05:00
WIP: undo some formatting
2024-03-24 18:02:04 -04:00
colspan = 1; // reset for subsequent cells
Add IPv6 support Split IPv4 and IPv6 calculations into different JS files to make them easier to understand. IDE decided to format HTML code and I left it as-is.
2021-12-08 00:13:30 -05:00
}
WIP: undo some formatting
2024-03-24 18:02:04 -04:00
}
}
/* This is necessary because 'joinnode' changes during the scope of the caller */
function newJoin(joinnode) {
return function () {
join(joinnode);
};
}
function divide(node) {
node[2] = new Array();
node[2][0] = [0, 0, null];
node[2][1] = [0, 0, null];
recreateTables();
}
function join(node) {
/* easy as pie */
node[2] = null;
recreateTables();
}
function updateNumChildren(node) {
if (node[2] == null) {
node[1] = 0;
return 1;
} else {
node[1] =
updateNumChildren(node[2][0]) + updateNumChildren(node[2][1]);
return node[1];
}
}
function updateDepthChildren(node) {
if (node[2] == null) {
node[0] = 0;
return 1;
} else {
node[0] =
updateDepthChildren(node[2][0]) + updateDepthChildren(node[2][1]);
return node[1];
}
}
var rootSubnet;
// each node is Array:
// [0] => depth of children, total number of visible children, children
function preloadSubnetImages() {
if (document.images) {
if (!document.preloadedImages) {
document.preloadedImages = new Array();
Add IPv6 support Split IPv4 and IPv6 calculations into different JS files to make them easier to understand. IDE decided to format HTML code and I left it as-is.
2021-12-08 00:13:30 -05:00
}
WIP: undo some formatting
2024-03-24 18:02:04 -04:00
for (var i = 0; i <= 128; i++) {
var img = new Image();
img.src = "img/" + i + ".gif";
document.preloadedImages.push(img);
Add IPv6 support Split IPv4 and IPv6 calculations into different JS files to make them easier to understand. IDE decided to format HTML code and I left it as-is.
2021-12-08 00:13:30 -05:00
}
WIP: undo some formatting
2024-03-24 18:02:04 -04:00
}
}
function calcOnLoad() {
preloadSubnetImages();
args = parseQueryString();
if (args["network"] && args["mask"] && args["division"]) {
document.forms["calc"].elements["version"].value = args["version"] || 4;
document.forms["calc"].elements["network"].value = args["network"];
document.forms["calc"].elements["netbits"].value = args["mask"];
updateNetwork();
var division = asciiToBin(args["division"]);
rootSubnet = [0, 0, null];
if (division != "0") {
loadNode(rootSubnet, division);
Add IPv6 support Split IPv4 and IPv6 calculations into different JS files to make them easier to understand. IDE decided to format HTML code and I left it as-is.
2021-12-08 00:13:30 -05:00
}
WIP: undo some formatting
2024-03-24 18:02:04 -04:00
recreateTables();
} else {
updateNetwork();
}
}
function loadNode(curNode, division) {
if (division.charAt(0) == "0") {
return division.substr(1);
} else {
curNode[2] = new Array();
curNode[2][0] = [0, 0, null];
curNode[2][1] = [0, 0, null];
division = loadNode(curNode[2][0], division.substr(1));
division = loadNode(curNode[2][1], division);
return division;
}
}
function parseQueryString(str)
{
str = str ? str : location.search;
var query = str.charAt(0) == "?" ? str.substring(1) : str;
var args = new Object();
if (query) {
var fields = query.split("&");
for (var f = 0; f < fields.length; f++) {
var field = fields[f].split("=");
args[unescape(field[0].replace(/\+/g, " "))] = unescape(
field[1].replace(/\+/g, " ")
);
}
}
return args;
}
window.onload = calcOnLoad;
function toggleColumn(cb)
{
var colName = 'col_'+(cb.id.substr(3));
var col = document.getElementById(colName);
if (cb.checked) {
col.style.display = 'block';
}
else {
col.style.display = 'none';
}
recreateTables(); /* because IE draws lines all over the place with border-collapse */
}
//-->
</script>
<style type="text/css">
H1 {
font-family: Arial, Verdana, sans-serif;
font-size: 18pt;
}
BODY {
font-family: Arial, Verdana, sans-serif;
}
P {
font-family: Arial, Verdana, sans-serif;
font-size: 75%;
}
.label {
font-family: Arial, Verdana, sans-serif;
font-size: 60%;
}
.calc {
font-family: Arial, Verdana, sans-serif;
font-size: 80%;
border-collapse: collapse;
}
.calc td {
border: 1px solid black;
}
.calc thead {
font-weight: bold;
background-color: #eeeeee;
}
.disabledAction {
color: #dddddd;
}
.maskSpan {
background-color: #cccccc;
text-align: right;
}
.maskSpanJoinable {
background-color: #cccccc;
text-align: right;
cursor: hand;
}
.maskSpanRotate {
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
background-color:green;
}
</style>
</head>
<body>
<table width="100%">
<tr valign=top>
<td>
<h1>Visual Subnet Calculator</h1>
<p>Enter the network you wish to subnet:</p>
<form name="calc" onsubmit="updateNetwork(); return false;">
<table cellspacing="0">
<tr>
<td class="label">IPv4 / IPv6</td>
<td class="label">Network Address</td>
<td class="label">Mask bits</td>
</tr>
<tr>
<td>
<input type="radio" name="version" value="4" checked />
<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();">
</td>
</tr>
</table>
<p>Show columns:
<input type="checkbox" id="cb_subnet" checked onclick="toggleColumn(this)"><label for="cb_subnet">Subnet address</label>
<input type="checkbox" id="cb_netmask" onclick="toggleColumn(this)"><label for="cb_netmask">Netmask</label>
<input type="checkbox" id="cb_range" checked onclick="toggleColumn(this)"><label for="cb_range">Range of addresses</label>
<input type="checkbox" id="cb_useable" checked onclick="toggleColumn(this)"><label for="cb_useable">Useable IPs</label>
<input type="checkbox" id="cb_hosts" checked onclick="toggleColumn(this)"><label for="cb_hosts">Hosts</label>
<input type="checkbox" id="cb_divide" checked onclick="toggleColumn(this)"><label for="cb_divide">Divide</label>
<input type="checkbox" id="cb_join" checked onclick="toggleColumn(this)"><label for="cb_join">Join</label>
</p>
</form>
<p>Click below to split and join subnets.<br>
If you wish to save this subnetting for later, bookmark <a href="subnets.html" id="saveLink">this hyperlink</a>.</p>
</td>
<td align="right">
<a href="https://github.com/davidc/subnets"><img alt="Fork me on GitHub" src="https://github.blog/wp-content/uploads/2008/12/forkme_right_white_ffffff.png" style="right: 0;top: 0;position: absolute;" ></a>
</td>
</tr>
</table>
<br>
<hr noshade color="black" size="1">
<br>
<table class="calc" cellspacing="0" cellpadding="2">
<colgroup>
<col id="col_subnet">
<col id="col_netmask" style="display: none">
<col id="col_range">
<col id="col_useable">
<col id="col_hosts">
<col id="col_divide">
<col id="col_join">
</colgroup>
<thead>
<tr>
<td>Subnet address</td>
<td>Netmask</td>
<td>Range of addresses</td>
<td>Useable IPs</td>
<td>Hosts</td>
<td>Divide</td>
<td id="joinHeader">Join</td>
</tr>
</thead>
<tbody id="calcbody">
<!--tr>
initial import of visual subnet calculator
2017-09-20 16:49:00 +01:00
<td>130.94.203.0/24</td>
<td>130.94.203.0 - 130.94.203.255</td>
<td>130.94.203.1 - 130.94.203.254 (254)</td>
<td>Divide</td>
</tr-->
WIP: undo some formatting
2024-03-24 18:02:04 -04:00
</tbody>
</table>
</body>
initial import of visual subnet calculator
2017-09-20 16:49:00 +01:00
</html>
Reference in New Issue Copy Permalink