diff --git a/dist/icon/browserconfig.xml b/dist/icon/browserconfig.xml index 082df8f..a25e942 100644 --- a/dist/icon/browserconfig.xml +++ b/dist/icon/browserconfig.xml @@ -2,7 +2,7 @@ - + #da532c diff --git a/dist/icon/site.webmanifest b/dist/icon/site.webmanifest index 9c2f9cd..197232a 100644 --- a/dist/icon/site.webmanifest +++ b/dist/icon/site.webmanifest @@ -3,12 +3,12 @@ "short_name": "Visual Subnet Calc", "icons": [ { - "src": "/icon/android-chrome-192x192.png", + "src": "icon/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" }, { - "src": "/icon/android-chrome-512x512.png", + "src": "icon/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" } diff --git a/dist/index.html b/dist/index.html index 97747aa..fe9292b 100644 --- a/dist/index.html +++ b/dist/index.html @@ -4,15 +4,15 @@ Visual Subnet Calculator - + - - - - - + + + + + @@ -72,7 +72,7 @@ Subnet address Netmask Range of addresses - Useable IPs + Usable IPs Hosts Note @@ -196,8 +196,8 @@ - - + + - \ No newline at end of file + diff --git a/dist/js/main.js b/dist/js/main.js index dfa1ee8..35c5a8a 100644 --- a/dist/js/main.js +++ b/dist/js/main.js @@ -3,8 +3,8 @@ let subnetNotes = {}; let maxNetSize = 0; let infoColumnCount = 5 // NORMAL mode: -// - Smallest subnet: /30 -// - Two reserved addresses per subnet: +// - Smallest subnet: /32 +// - Two reserved addresses per subnet of size <= 30: // - Network Address (network + 0) // - Broadcast Address (last network address) // AWS mode (future): @@ -17,7 +17,7 @@ let infoColumnCount = 5 // - Broadcast Address (last network address) let operatingMode = 'NORMAL' let noteTimeout; -let minSubnetSize = 30 +let minSubnetSize = 32 let inflightColor = 'NONE' let urlVersion = '1' let configVersion = '1' @@ -83,7 +83,7 @@ function reset() { if (operatingMode === 'AWS') { minSubnetSize = 28 } else { - minSubnetSize = 30 + minSubnetSize = 32 } let cidrInput = $('#network').val() + '/' + $('#netsize').val() let rootNetwork = get_network($('#network').val(), $('#netsize').val()) @@ -150,26 +150,30 @@ function addRowTree(subnetTree, depth, maxDepth) { } function addRow(network, netSize, colspan, note, notesWidth, color) { - // TODO: do some checking here for smaller networks like /32, probably some edge cases to watch for. let addressFirst = ip2int(network) let addressLast = subnet_last_address(addressFirst, netSize) - // Will need to adjust this for AWS mode - let usableFirst = addressFirst + 1 - if (operatingMode === 'AWS') { - // https://docs.aws.amazon.com/vpc/latest/userguide/subnet-sizing.html - usableFirst += 3 - } - let usableLast = addressLast - 1 + let usableFirst = subnet_usable_first(addressFirst, netSize, operatingMode) + let usableLast = subnet_usable_last(addressFirst, netSize) let hostCount = 1 + usableLast - usableFirst let styleTag = '' if (color !== '') { styleTag = ' style="background-color: ' + color + '"' } + + let rangeCol, usableCol; + if (netSize < 32) { + rangeCol = int2ip(addressFirst) + ' - ' + int2ip(addressLast); + usableCol = int2ip(usableFirst) + ' - ' + int2ip(usableLast); + } else { + rangeCol = int2ip(addressFirst); + usableCol = int2ip(usableFirst); + } + let newRow = ' \n' + ' ' + network + '/' + netSize + '\n' + - ' ' + int2ip(addressFirst) + ' - ' + int2ip(addressLast) + '\n' + - ' ' + int2ip(usableFirst) + ' - ' + int2ip(usableLast) + '\n' + + ' ' + rangeCol + '\n' + + ' ' + usableCol + '\n' + ' ' + hostCount + '\n' + ' \n' + ' /' + netSize + '\n' @@ -209,6 +213,25 @@ function subnet_addresses(netSize) { return 2**(32-netSize); } +function subnet_usable_first(network, netSize, operatingMode) { + if (netSize < 31) { + // https://docs.aws.amazon.com/vpc/latest/userguide/subnet-sizing.html + // AWS reserves 3 additional IPs + return network + (operatingMode === 'AWS' ? 4 : 1); + } else { + return network; + } +} + +function subnet_usable_last(network, netSize) { + let last_address = subnet_last_address(network, netSize); + if (netSize < 31) { + return last_address - 1; + } else { + return last_address; + } +} + function get_dict_max_depth(dict, curDepth) { let maxDepth = curDepth for (let mapKey in dict) { @@ -424,9 +447,6 @@ function processConfigUrl() { renameKey(urlConfig, 'v', 'config_version') renameKey(urlConfig, 's', 'subnets') expandKeys(urlConfig['subnets']) - let subnet_split = Object.keys(urlConfig['subnets'])[0].split('/') - $('#network').val(subnet_split[0]) - $('#netsize').val(subnet_split[1]) importConfig(urlConfig) return true } @@ -483,6 +503,9 @@ function renameKey(obj, oldKey, newKey) { function importConfig(text) { // TODO: Probably need error checking here if (text['config_version'] === '1') { + let subnet_split = Object.keys(text['subnets'])[0].split('/') + $('#network').val(subnet_split[0]) + $('#netsize').val(subnet_split[1]) subnetMap = text['subnets']; renderTable() }