From 0c61b56c3cc9d515fa4d016650596d3b70b986ac Mon Sep 17 00:00:00 2001 From: Caesar Kabalan Date: Mon, 24 Jun 2024 10:07:26 -0700 Subject: [PATCH] Opinionated Adjustments for PR #11 * 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 --- dist/index.html | 24 +++++---------- dist/js/main.js | 78 ++++++++++++++++++------------------------------- 2 files changed, 36 insertions(+), 66 deletions(-) diff --git a/dist/index.html b/dist/index.html index 62172dc..efa5cfa 100644 --- a/dist/index.html +++ b/dist/index.html @@ -6,7 +6,7 @@ Visual Subnet Calculator - Split/Join - + @@ -58,16 +58,15 @@ Tools - + @@ -78,15 +77,12 @@ Subnet address Netmask Range of addresses - Usable IPs + Usable IPs Hosts Note
Split/Join
- @@ -210,12 +206,6 @@ crossorigin="anonymous"> - diff --git a/dist/js/main.js b/dist/js/main.js index f36eda3..c07fbab 100644 --- a/dist/js/main.js +++ b/dist/js/main.js @@ -5,24 +5,24 @@ let infoColumnCount = 5 // NORMAL mode: // - Smallest subnet: /32 // - Two reserved addresses per subnet of size <= 30: -// - Network Address (network + 0) -// - Broadcast Address (last network address) -// AWS mode : +// - Net+0 = Network Address +// - Last = Broadcast Address +// AWS mode: // - Smallest subnet: /28 // - Two reserved addresses per subnet: -// - Network Address (network + 0) -// - AWS Reserved - VPC Router -// - AWS Reserved - VPC DNS -// - AWS Reserved - Future Use -// - Broadcast Address (last network address) -// Azure mode : +// - Net+0 = Network Address +// - Net+1 = AWS Reserved - VPC Router +// - Net+2 = AWS Reserved - VPC DNS +// - Net+3 = AWS Reserved - Future Use +// - Last = Broadcast Address +// Azure mode: // - Smallest subnet: /29 // - Two reserved addresses per subnet: -// - Network Address (network + 0) -// - Azure Reserved - Default Gateway -// - Azure Reserved - DNS Mapping -// - Azure Reserved - DNS Mapping -// - Broadcast Address (last network address) +// - Net+0 = Network Address +// - Net+1 = Reserved - Default Gateway +// - Net+2 = Reserved - DNS Mapping +// - Net+3 = Reserved - DNS Mapping +// - Last = Broadcast Address let noteTimeout; let operatingMode = 'Standard' let previousOperatingMode = 'Standard' @@ -82,7 +82,7 @@ $('#dropdown_standard').click(function() { if(!switchMode(operatingMode)) { operatingMode = previousOperatingMode; - $('#dropdown_'+ operatingMode.toLowerCase()).addClass('active-mode'); + $('#dropdown_'+ operatingMode.toLowerCase()).addClass('active'); } }); @@ -93,7 +93,7 @@ $('#dropdown_azure').click(function() { if(!switchMode(operatingMode)) { operatingMode = previousOperatingMode; - $('#dropdown_'+ operatingMode.toLowerCase()).addClass('active-mode'); + $('#dropdown_'+ operatingMode.toLowerCase()).addClass('active'); } }); @@ -104,7 +104,7 @@ $('#dropdown_aws').click(function() { if(!switchMode(operatingMode)) { operatingMode = previousOperatingMode; - $('#dropdown_'+ operatingMode.toLowerCase()).addClass('active-mode'); + $('#dropdown_'+ operatingMode.toLowerCase()).addClass('active'); } }); @@ -142,9 +142,9 @@ $('#btn_import_export').on('click', function() { }) function reset() { - - set_popover_content(operatingMode); - + + set_usable_ips_title(operatingMode); + let cidrInput = $('#network').val() + '/' + $('#netsize').val() let rootNetwork = get_network($('#network').val(), $('#netsize').val()) let rootCidr = rootNetwork + '/' + $('#netsize').val() @@ -483,7 +483,7 @@ function switchMode(operatingMode) { if (validateSubnetSizes(subnetMap, minSubnetSizes[operatingMode])) { renderTable(operatingMode); - set_popover_content(operatingMode); + set_usable_ips_title(operatingMode); $('#netsize').attr("pattern",netsizePatterns[operatingMode]); $('#input_form').removeClass('was-validated'); @@ -510,8 +510,8 @@ function switchMode(operatingMode) { } }); // Remove active class from all buttons if needed - $('#dropdown_standard, #dropdown_azure, #dropdown_aws').removeClass('active-mode'); - $('#dropdown_' + operatingMode.toLowerCase()).addClass('active-mode'); + $('#dropdown_standard, #dropdown_azure, #dropdown_aws').removeClass('active'); + $('#dropdown_' + operatingMode.toLowerCase()).addClass('active'); isSwitched = true; } else { show_warning_modal('
Some subnets have a netmask size smaller than the minimum allowed for ' + operatingMode +'.
The smallest size allowed is ' + minSubnetSizes[operatingMode] + '
'); @@ -547,39 +547,19 @@ function validateSubnetSizes(subnetMap, minSubnetSize) { } -function set_popover_content(operatingMode) { - var popoverContent = "This column shows the number of usable IP addresses in each subnet."; - var popoverTitle = "Usable IPs" - +function set_usable_ips_title(operatingMode) { switch (operatingMode) { case 'AWS': + $('#useableHeader').html('Usable IPs (AWS)') + break; case 'AZURE': - var popoverTitle = "Usable IPs (" + operatingMode + ")"; - var popoverContent = "This column shows the number of usable IP addresses in each subnet. " + operatingMode + " reserves 5 IP Addresses" + $('#useableHeader').html('Usable IPs (Azure)') break; default: - var popoverContent = "This column shows the number of usable IP addresses in each subnet."; - var popoverTitle = "Usable IPs" + $('#useableHeader').html('Usable IPs') break; } - - // 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; - } - }); - + $('[data-toggle="tooltip"]').tooltip() } function show_warning_modal(message) {