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

Fix checkboxes

Browse Source
This commit is contained in:
John Steel 2021-04-24 19:11:05 -04:00 committed by John Steel
parent 919c90bb3d
commit 7bad568167
No known key found for this signature in database
GPG Key ID: EA905C8A46530B3C
1 changed files with 56 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
subnets.html
View File

@ -1,8 +1,9 @@
<html> <!DOCTYPE html>
<html lang="en">
<head> <head>
<meta charset="utf-8"/>
<title>Visual Subnet Calculator</title> <title>Visual Subnet Calculator</title>
<script language="javascript" type="text/javascript"> <script language="javascript" type="text/javascript">
<!--
var curNetwork = 0; var curNetwork = 0;
var curMask = 0; var curMask = 0;
@ -182,6 +183,7 @@ function createRow(calcbody, node, address, mask, labels, depth)
/* subnet address */ /* subnet address */
var newCell = document.createElement('TD'); var newCell = document.createElement('TD');
newCell.classList.add("col_subnet");
newCell.appendChild(document.createTextNode(inet_ntoa(address)+'/'+mask)); newCell.appendChild(document.createTextNode(inet_ntoa(address)+'/'+mask));
newRow.appendChild(newCell); newRow.appendChild(newCell);
@ -213,21 +215,25 @@ function createRow(calcbody, node, address, mask, labels, depth)
/* netmask */ /* netmask */
var newCell = document.createElement('TD'); var newCell = document.createElement('TD');
newCell.classList.add("col_netmask");
newCell.appendChild(document.createTextNode(inet_ntoa(subnet_netmask(mask)))); newCell.appendChild(document.createTextNode(inet_ntoa(subnet_netmask(mask))));
newRow.appendChild(newCell); newRow.appendChild(newCell);
/* range of addresses */ /* range of addresses */
var newCell = document.createElement('TD'); var newCell = document.createElement('TD');
newCell.classList.add("col_range");
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.classList.add("col_useable");
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.classList.add("col_hosts");
newCell.appendChild(document.createTextNode(numHosts)); newCell.appendChild(document.createTextNode(numHosts));
newRow.appendChild(newCell); newRow.appendChild(newCell);
@ -257,6 +263,7 @@ function createRow(calcbody, node, address, mask, labels, depth)
} }
}))(mask, address); // keep some vars in scope }))(mask, address); // keep some vars in scope
newCell.classList.add("col_comments");
textarea.innerText = comment; textarea.innerText = comment;
newCell.appendChild(textarea); newCell.appendChild(textarea);
newRow.appendChild(newCell); newRow.appendChild(newCell);
@ -279,6 +286,7 @@ function createRow(calcbody, node, address, mask, labels, depth)
newLink.appendChild(document.createTextNode('Divide')); newLink.appendChild(document.createTextNode('Divide'));
newCell.appendChild(newLink); newCell.appendChild(newLink);
} }
newCell.classList.add("col_divide");
var colspan = depth - node[0]; var colspan = depth - node[0];
@ -288,17 +296,17 @@ function createRow(calcbody, node, address, mask, labels, depth)
var joinnode = labels[(i*3)+2]; var joinnode = labels[(i*3)+2];
var newCell = document.createElement('TD'); var newCell = document.createElement('TD');
newCell.classList.add("col_join")
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; newCell.id = "join_" + inet_ntoa(network_address(address, mask)) + "/" + mask;
if (i == (labels.length/3)-1) { if (i == (labels.length/3)-1 || comment != null) {
newCell.className = 'maskSpan'; newCell.classList.add("maskSpan")
} }
else { else {
newCell.className = 'maskSpanJoinable'; newCell.classList.add("maskSpanJoinable")
newCell.onclick = newJoin(joinnode); newCell.onclick = newJoin(joinnode);
// newCell.onmouseover = function() { window.status = joinnode[0]+'---'+joinnode[1]+'---'+joinnode[2]+'>>>>>'+node[2];}
} }
var newImg = document.createElement('IMG'); var newImg = document.createElement('IMG');
@ -496,15 +504,15 @@ window.onload = calcOnLoad;
function toggleColumn(cb) function toggleColumn(cb)
{ {
var colName = 'col_'+(cb.id.substr(3)); var cssName = '--display-'+(cb.id.substr(3));
var col = document.getElementById(colName);
if (cb.checked) { if (cb.checked) {
col.style.display = 'block'; document.documentElement.style.setProperty(cssName, null);
} }
else { else {
col.style.display = 'none'; document.documentElement.style.setProperty(cssName, 'none');
} }
recreateTables(); /* because IE draws lines all over the place with border-collapse */ recreateTables(); /* because IE draws lines all over the place with border-collapse */
} }
@ -513,6 +521,26 @@ function toggleColumn(cb)
<style type="text/css"> <style type="text/css">
:root {
--display-subnet: table-cell;
--display-netmask: table-cell;
--display-range: table-cell;
--display-useable: table-cell;
--display-hosts: table-cell;
--display-comments: table-cell;
--display-divide: table-cell;
--display-join: table-cell;
}
.col_subnet { display: var(--display-subnet); }
.col_netmask { display: var(--display-netmask); }
.col_range { display: var(--display-range); }
.col_useable { display: var(--display-useable); }
.col_hosts { display: var(--display-hosts); }
.col_comments { display: var(--display-comments); }
.col_divide { display: var(--display-divide); }
.col_join { display: var(--display-join); }
H1 { H1 {
font-family: Arial, Verdana, sans-serif; font-family: Arial, Verdana, sans-serif;
font-size: 18pt; font-size: 18pt;
@ -527,7 +555,6 @@ P {
font-size: 75%; font-size: 75%;
} }
.label { .label {
font-family: Arial, Verdana, sans-serif; font-family: Arial, Verdana, sans-serif;
font-size: 60%; font-size: 60%;
@ -599,14 +626,14 @@ P {
</table> </table>
<p>Show columns: <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_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_netmask" checked 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_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_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_hosts" checked onclick="toggleColumn(this)"><label for="cb_hosts">Hosts</label>
<input type="checkbox" id="cb_comments" checked onclick="toggleColumn(this)"><label for="cb_comments">Comments</label> <input type="checkbox" id="cb_comments" checked onclick="toggleColumn(this)"><label for="cb_comments">Comments</label>
<input type="checkbox" id="cb_divide" checked onclick="toggleColumn(this)"><label for="cb_divide">Divide</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> <input type="checkbox" id="cb_join" checked onclick="toggleColumn(this)"><label for="cb_join">Join</label>
</p> </p>
</form> </form>
@ -627,7 +654,7 @@ If you wish to save this subnetting for later, bookmark <a href="subnets.html" i
<table class="calc" cellspacing="0" cellpadding="2"> <table class="calc" cellspacing="0" cellpadding="2">
<colgroup> <colgroup>
<col id="col_subnet"> <col id="col_subnet">
<col id="col_netmask" style="display: none"> <col id="col_netmask">
<col id="col_range"> <col id="col_range">
<col id="col_useable"> <col id="col_useable">
<col id="col_hosts"> <col id="col_hosts">
@ -637,14 +664,14 @@ If you wish to save this subnetting for later, bookmark <a href="subnets.html" i
</colgroup> </colgroup>
<thead> <thead>
<tr> <tr>
<td>Subnet address</td> <td class="col_subnet" >Subnet address</td>
<td>Netmask</td> <td class="col_netmask" >Netmask</td>
<td>Range of addresses</td> <td class="col_range" >Range of addresses</td>
<td>Useable IPs</td> <td class="col_useable" >Useable IPs</td>
<td>Hosts</td> <td class="col_hosts" >Hosts</td>
<td>Comments</td> <td class="col_comments" >Comments</td>
<td>Divide</td> <td class="col_divide" >Divide</td>
<td id="joinHeader">Join</td> <td class="col_join" id="joinHeader">Join</td>
</tr> </tr>
</thead> </thead>
<tbody id="calcbody"> <tbody id="calcbody">