Merge branch 'release/v1.1.0'

dist/icon/browserconfig.xml

@@ -2,7 +2,7 @@
 <browserconfig>
     <msapplication>
         <tile>
-            <square150x150logo src="/icon/mstile-150x150.png"/>
+            <square150x150logo src="icon/mstile-150x150.png"/>
             <TileColor>#da532c</TileColor>
         </tile>
     </msapplication>

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"
         }

dist/index.html

@@ -4,15 +4,15 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Visual Subnet Calculator</title>
-    <link rel="stylesheet" href="/css/bootstrap.min.css">
+    <link rel="stylesheet" href="css/bootstrap.min.css">
     <link href="css/main.css" rel="stylesheet">
     <meta name="description" content="Quickly design and collaborate on network design. Visual Subnet Calculator focuses on expediting the work of network administrators, not academic subnetting math.">
     <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">
-    <link rel="icon" type="image/png" sizes="16x16" href="/icon/favicon-16x16.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="icon/favicon-16x16.png">
-    <link rel="manifest" href="/icon/site.webmanifest">
+    <link rel="manifest" href="icon/site.webmanifest">
-    <link rel="mask-icon" href="/icon/safari-pinned-tab.svg" color="#5bbad5">
+    <link rel="mask-icon" href="icon/safari-pinned-tab.svg" color="#5bbad5">
     <meta name="msapplication-TileColor" content="#da532c">
     <meta name="theme-color" content="#ffffff">
 </head>
@@ -72,7 +72,7 @@
                 <th id="subnetHeader" style="display: table-cell;">Subnet address</th>
                 <th id="netmaskHeader" style="display: none;">Netmask</th>
                 <th id="rangeHeader" style="display: table-cell;">Range of addresses</th>
-                <th id="useableHeader" style="display: table-cell;">Useable IPs</th>
+                <th id="useableHeader" style="display: table-cell;">Usable IPs</th>
                 <th id="hostsHeader" style="display: table-cell;">Hosts</th>
                 <th id="noteHeader" colspan="100%" style="display: table-cell;">
                     Note
@@ -196,8 +196,8 @@
     <script src="https://code.jquery.com/jquery-3.7.0.min.js"
             integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g="
             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>
 </div>
 </body>
 </html>

dist/js/main.js

@@ -3,8 +3,8 @@ let subnetNotes = {};
 let maxNetSize = 0;
 let infoColumnCount = 5
 // NORMAL mode:
-//   - Smallest subnet: /30
+//   - Smallest subnet: /32
-//   - Two reserved addresses per subnet:
+//   - 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 = subnet_usable_first(addressFirst, netSize, operatingMode)
-    let usableFirst = addressFirst + 1
+    let usableLast = subnet_usable_last(addressFirst, netSize)
-    if (operatingMode === 'AWS') {
-        // https://docs.aws.amazon.com/vpc/latest/userguide/subnet-sizing.html
-        usableFirst += 3
-    }
-    let usableLast = addressLast - 1
     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 =
         '            <tr id="row_' + network.replace('.', '-') + '_' + netSize + '"' + styleTag + '>\n' +
         '                <td data-subnet="' + network + '/' + netSize + '" class="row_address">' + network + '/' + netSize + '</td>\n' +
-        '                <td data-subnet="' + network + '/' + netSize + '" class="row_range">' + int2ip(addressFirst) + ' - ' + int2ip(addressLast) + '</td>\n' +
+        '                <td data-subnet="' + network + '/' + netSize + '" class="row_range">' + rangeCol + '</td>\n' +
-        '                <td data-subnet="' + network + '/' + netSize + '" class="row_usable">' + int2ip(usableFirst) + ' - ' + int2ip(usableLast) + '</td>\n' +
+        '                <td data-subnet="' + network + '/' + netSize + '" class="row_usable">' + usableCol + '</td>\n' +
         '                <td data-subnet="' + network + '/' + netSize + '" class="row_hosts">' + hostCount + '</td>\n' +
         '                <td class="note" style="width:' + notesWidth + '"><label><input type="text" class="form-control shadow-none p-0" data-subnet="' + network + '/' + netSize + '" value="' + note + '"></label></td>\n' +
         '                <td rowspan="1" colspan="' + colspan + '" class="split rotate" data-subnet="' + network + '/' + netSize + '" data-mutate-verb="split"><span>/' + netSize + '</span></td>\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()
     }