beenull/visualsubnetcalc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Opinionated Adjustments for PR #11

Browse source 
* Want to keep Meta Description short for SEO purposes.
* Elected to use built-in Bootstrap mode highlighting versus changing
  the text style
* Removed the Usable IPs popovers in favor of tooltips + hyperlink
This commit is contained in:
Caesar Kabalan 2024-06-24 10:07:26 -07:00
parent 6f55ba52ec
commit 0c61b56c3c
No known key found for this signature in database
GPG key ID: DDFEF5FF6CFAB608
2 changed files with 36 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
dist/index.html vendored
View file

@ -6,7 +6,7 @@
<title>Visual Subnet Calculator - Split/Join</title> <title>Visual Subnet Calculator - Split/Join</title>
<link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/bootstrap.min.css">
<link href="css/main.css" rel="stylesheet"> <link href="css/main.css" rel="stylesheet">
<meta name="description" content="Quickly and easily design network layouts. Split and join subnets, add notes and color, then collaborate with others by sharing a custom link to your design. Switch to AWS or Azure Mode to calculate compliant subnets for those Cloud Platforms"> <meta name="description" content="Quickly and easily design network layouts. Split and join subnets, add notes and color, then collaborate with others by sharing a custom link to your design.">
<meta name="robots" content="index, follow" /> <meta name="robots" content="index, follow" />
<link rel="apple-touch-icon" sizes="180x180" href="icon/apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="180x180" href="icon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="icon/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="icon/favicon-32x32.png">
@ -58,16 +58,15 @@
Tools Tools
</button> </button>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#importExportModal" id="btn_import_export">Import / Export</a></li> <li><a class="dropdown-item active" href="#" data-bs-toggle="operatingMode" data-bs-target="#operatingMode" id="dropdown_standard" aria-current="true">Mode - Standard</a></li>
<li><a class="dropdown-item" href="#" data-bs-toggle="operatingMode" data-bs-target="#operatingMode" id="dropdown_aws">Mode - AWS</a></li>
<li><a class="dropdown-item" href="#" data-bs-toggle="operatingMode" data-bs-target="#operatingMode" id="dropdown_azure">Mode - Azure</a></li>
<li><hr class="dropdown-divider"></li> <li><hr class="dropdown-divider"></li>
<li><h6 class="dropdown-header">Mode</h6></li> <li><a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#importExportModal" id="btn_import_export">Import / Export</a></li>
<li><a class="dropdown-item active-mode" href="#" data-bs-toggle="operatingMode" data-bs-target="#operatingMode" id="dropdown_standard">Standard</a></li>
<li><a class="dropdown-item" href="#" data-bs-toggle="operatingMode" data-bs-target="#operatingMode" id="dropdown_azure">Azure</a></li>
<li><a class="dropdown-item" href="#" data-bs-toggle="operatingMode" data-bs-target="#operatingMode" id="dropdown_aws">AWS</a></li>
</ul> </ul>
</div> </div>
</div>
</div> </div>
</div>
</form> </form>
@ -78,15 +77,12 @@
<th id="subnetHeader" style="display: table-cell;">Subnet address</th> <th id="subnetHeader" style="display: table-cell;">Subnet address</th>
<th id="netmaskHeader" style="display: none;">Netmask</th> <th id="netmaskHeader" style="display: none;">Netmask</th>
<th id="rangeHeader" style="display: table-cell;">Range of addresses</th> <th id="rangeHeader" style="display: table-cell;">Range of addresses</th>
<th id="useableHeader" style="display: table-cell;" data-bs-toggle="popover" title="Usable IPs" data-bs-content="This column shows the number of usable IP addresses in each subnet." data-bs-trigger="hover focus" data-bs-placement="top">Usable IPs</th> <th id="useableHeader" style="display: table-cell;">Usable IPs</th>
<th id="hostsHeader" style="display: table-cell;">Hosts</th> <th id="hostsHeader" style="display: table-cell;">Hosts</th>
<th id="noteHeader" colspan="100%" style="display: table-cell;"> <th id="noteHeader" colspan="100%" style="display: table-cell;">
Note Note
<div style="float:right;"><span class="split">Split</span>/<span class="join">Join</span></div> <div style="float:right;"><span class="split">Split</span>/<span class="join">Join</span></div>
</th> </th>
<!--
<th id="joinHeader" colspan="100%" style="display: table-cell;"><span class="split">Split</span>/<span class="join">Join</span></th>
-->
</tr> </tr>
</thead> </thead>
<tbody id="calcbody"> <tbody id="calcbody">
@ -210,12 +206,6 @@
crossorigin="anonymous"></script> crossorigin="anonymous"></script>
<script src="js/lz-string.min.js"></script> <script src="js/lz-string.min.js"></script>
<script src="js/main.js"></script> <script src="js/main.js"></script>
<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
</script>
</div> </div>
</body> </body>
</html> </html>

74
dist/js/main.js vendored
View file

@ -5,24 +5,24 @@ let infoColumnCount = 5
// NORMAL mode: // NORMAL mode:
// - Smallest subnet: /32 // - Smallest subnet: /32
// - Two reserved addresses per subnet of size <= 30: // - Two reserved addresses per subnet of size <= 30:
// - Network Address (network + 0) // - Net+0 = Network Address
// - Broadcast Address (last network address) // - Last = Broadcast Address
// AWS mode : // AWS mode:
// - Smallest subnet: /28 // - Smallest subnet: /28
// - Two reserved addresses per subnet: // - Two reserved addresses per subnet:
// - Network Address (network + 0) // - Net+0 = Network Address
// - AWS Reserved - VPC Router // - Net+1 = AWS Reserved - VPC Router
// - AWS Reserved - VPC DNS // - Net+2 = AWS Reserved - VPC DNS
// - AWS Reserved - Future Use // - Net+3 = AWS Reserved - Future Use
// - Broadcast Address (last network address) // - Last = Broadcast Address
// Azure mode : // Azure mode:
// - Smallest subnet: /29 // - Smallest subnet: /29
// - Two reserved addresses per subnet: // - Two reserved addresses per subnet:
// - Network Address (network + 0) // - Net+0 = Network Address
// - Azure Reserved - Default Gateway // - Net+1 = Reserved - Default Gateway
// - Azure Reserved - DNS Mapping // - Net+2 = Reserved - DNS Mapping
// - Azure Reserved - DNS Mapping // - Net+3 = Reserved - DNS Mapping
// - Broadcast Address (last network address) // - Last = Broadcast Address
let noteTimeout; let noteTimeout;
let operatingMode = 'Standard' let operatingMode = 'Standard'
let previousOperatingMode = 'Standard' let previousOperatingMode = 'Standard'
@ -82,7 +82,7 @@ $('#dropdown_standard').click(function() {
if(!switchMode(operatingMode)) { if(!switchMode(operatingMode)) {
operatingMode = previousOperatingMode; operatingMode = previousOperatingMode;
$('#dropdown_'+ operatingMode.toLowerCase()).addClass('active-mode'); $('#dropdown_'+ operatingMode.toLowerCase()).addClass('active');
} }
}); });
@ -93,7 +93,7 @@ $('#dropdown_azure').click(function() {
if(!switchMode(operatingMode)) { if(!switchMode(operatingMode)) {
operatingMode = previousOperatingMode; operatingMode = previousOperatingMode;
$('#dropdown_'+ operatingMode.toLowerCase()).addClass('active-mode'); $('#dropdown_'+ operatingMode.toLowerCase()).addClass('active');
} }
}); });
@ -104,7 +104,7 @@ $('#dropdown_aws').click(function() {
if(!switchMode(operatingMode)) { if(!switchMode(operatingMode)) {
operatingMode = previousOperatingMode; operatingMode = previousOperatingMode;
$('#dropdown_'+ operatingMode.toLowerCase()).addClass('active-mode'); $('#dropdown_'+ operatingMode.toLowerCase()).addClass('active');
} }
}); });
@ -143,7 +143,7 @@ $('#btn_import_export').on('click', function() {
function reset() { function reset() {
set_popover_content(operatingMode); set_usable_ips_title(operatingMode);
let cidrInput = $('#network').val() + '/' + $('#netsize').val() let cidrInput = $('#network').val() + '/' + $('#netsize').val()
let rootNetwork = get_network($('#network').val(), $('#netsize').val()) let rootNetwork = get_network($('#network').val(), $('#netsize').val())
@ -483,7 +483,7 @@ function switchMode(operatingMode) {
if (validateSubnetSizes(subnetMap, minSubnetSizes[operatingMode])) { if (validateSubnetSizes(subnetMap, minSubnetSizes[operatingMode])) {
renderTable(operatingMode); renderTable(operatingMode);
set_popover_content(operatingMode); set_usable_ips_title(operatingMode);
$('#netsize').attr("pattern",netsizePatterns[operatingMode]); $('#netsize').attr("pattern",netsizePatterns[operatingMode]);
$('#input_form').removeClass('was-validated'); $('#input_form').removeClass('was-validated');
@ -510,8 +510,8 @@ function switchMode(operatingMode) {
} }
}); });
// Remove active class from all buttons if needed // Remove active class from all buttons if needed
$('#dropdown_standard, #dropdown_azure, #dropdown_aws').removeClass('active-mode'); $('#dropdown_standard, #dropdown_azure, #dropdown_aws').removeClass('active');
$('#dropdown_' + operatingMode.toLowerCase()).addClass('active-mode'); $('#dropdown_' + operatingMode.toLowerCase()).addClass('active');
isSwitched = true; isSwitched = true;
} else { } else {
show_warning_modal('<div>Some subnets have a netmask size smaller than the minimum allowed for ' + operatingMode +'.</div><div>The smallest size allowed is ' + minSubnetSizes[operatingMode] + '</div>'); show_warning_modal('<div>Some subnets have a netmask size smaller than the minimum allowed for ' + operatingMode +'.</div><div>The smallest size allowed is ' + minSubnetSizes[operatingMode] + '</div>');
@ -547,39 +547,19 @@ function validateSubnetSizes(subnetMap, minSubnetSize) {
} }
function set_popover_content(operatingMode) { function set_usable_ips_title(operatingMode) {
var popoverContent = "This column shows the number of usable IP addresses in each subnet.";
var popoverTitle = "Usable IPs"
switch (operatingMode) { switch (operatingMode) {
case 'AWS': case 'AWS':
$('#useableHeader').html('Usable IPs (<a href="https://docs.aws.amazon.com/vpc/latest/userguide/subnet-sizing.html#subnet-sizing-ipv4" target="_blank" style="color:#000; border-bottom: 1px dotted #000; text-decoration: dotted" data-toggle="tooltip" data-placement="top" data-bs-html="true" title="AWS reserves 5 addresses in each subnet for platform use.<br/>Click to navigate to the AWS documentation.">AWS</a>)')
break;
case 'AZURE': case 'AZURE':
var popoverTitle = "Usable IPs (" + operatingMode + ")"; $('#useableHeader').html('Usable IPs (<a href="https://learn.microsoft.com/en-us/azure/virtual-network/virtual-networks-faq#are-there-any-restrictions-on-using-ip-addresses-within-these-subnets" target="_blank" style="color:#000; border-bottom: 1px dotted #000; text-decoration: dotted" data-toggle="tooltip" data-placement="top" data-bs-html="true" title="Azure reserves 5 addresses in each subnet for platform use.<br/>Click to navigate to the Azure documentation.">Azure</a>)')
var popoverContent = "This column shows the number of usable IP addresses in each subnet. " + operatingMode + " reserves 5 IP Addresses"
break; break;
default: default:
var popoverContent = "This column shows the number of usable IP addresses in each subnet."; $('#useableHeader').html('Usable IPs')
var popoverTitle = "Usable IPs"
break; break;
} }
$('[data-toggle="tooltip"]').tooltip()
// Ensure the popover is properly disposed
$('#useableHeader').popover('dispose');
// Reinitialize the popover with direct options for title and content
$('#useableHeader').popover({
trigger: 'hover',
html: true,
title: function() {
// You can compute or fetch the title dynamically here
return popoverTitle;
},
content: function() {
// You can compute or fetch the content dynamically here
return popoverContent;
}
});
} }
function show_warning_modal(message) { function show_warning_modal(message) {