Add some color pallete functionality and corret other rendering

reliability issues

dist/index.html

@@ -95,6 +95,18 @@
             </tr>
         </tbody>
     </table>
+    <div id="color_palette">
+        <div id="palette_picker_1"></div>
+        <div id="palette_picker_2"></div>
+        <div id="palette_picker_3"></div>
+        <div id="palette_picker_4"></div>
+        <div id="palette_picker_5"></div>
+        <div id="palette_picker_6"></div>
+        <div id="palette_picker_7"></div>
+        <div id="palette_picker_8"></div>
+        <div id="palette_picker_9"></div>
+        <div id="palette_picker_10"></div>
+    </div>
 
     <div class="modal fade" id="notifyModal" tabindex="-1" aria-labelledby="notifyModalLabel" aria-hidden="true">
         <div class="modal-dialog modal-md">

dist/main.css

@@ -1,8 +1,81 @@
 :root {
-  --split-foreground: #000000;
+    /*
-  --split-background: indianred;
+    Color Palette
-  --join-foreground: #000000;
+    https://coolors.co/palette/033270-1368aa-4091c9-9dcee2-fedfd4-f29479-f26a4f-ef3c2d-cb1b16-65010c
-  --join-background: skyblue;
+    --yale-blue: #033270ff;
+    --green-blue: #1368aaff;
+    --celestial-blue: #4091c9ff;
+    --light-blue: #9dcee2ff;
+    --misty-rose: #fedfd4ff;
+    --salmon: #f29479ff;
+    --tomato: #f26a4fff;
+    --vermilion: #ef3c2dff;
+    --engineering-orange: #cb1b16ff;
+    --rosewood: #65010cff;
+     */
+    --split-foreground: #000000;
+    /* Combination of Salmon/Tomato */
+    --split-background: #F27F64;
+    --join-foreground: #000000;
+    /* Combination of Light/Celestial Blue */
+    --join-background: #6FB0D6;
+
+    /* Color Palettes for subnet highlights
+    https://coolors.co/palette/f0d7df-f9e0e2-f8eaec-f7ddd9-f7e6da-e3e9dd-c4dbd9-d4e5e3-cae0e4-c8c7d6
+    https://coolors.co/palette/54478c-2c699a-048ba8-0db39e-16db93-83e377-b9e769-efea5a-f1c453-f29e4c
+    https://coolors.co/palette/e2e2df-d2d2cf-e2cfc4-f7d9c4-faedcb-c9e4de-c6def1-dbcdf0-f2c6de-f9c6c9
+    https://coolors.co/palette/54478c-2c699a-048ba8-0db39e-16db93-83e377-b9e769-efea5a-f1c453-f29e4c
+    https://coolors.co/palette/ffadad-ffd6a5-fdffb6-caffbf-9bf6ff-a0c4ff-bdb2ff-ffc6ff-fffffc
+     */
+    --subpal-1-1: #ffadadff;
+    --subpal-1-2: #ffd6a5ff;
+    --subpal-1-3: #fdffb6ff;
+    --subpal-1-4: #caffbfff;
+    --subpal-1-5: #9bf6ffff;
+    --subpal-1-6: #a0c4ffff;
+    --subpal-1-7: #bdb2ffff;
+    --subpal-1-8: #ffc6ffff;
+    --subpal-1-9: #fffffcff;
+    --subpal-1-10: #ffffffff;
+}
+
+#color_palette div {
+    display:inline-block;
+    height:2rem;
+    width:2rem;
+    border:1px solid;
+    cursor:pointer;
+}
+
+#color_palette #palette_picker_1 {
+    background-color: var(--subpal-1-1);
+}
+#color_palette #palette_picker_2 {
+    background-color: var(--subpal-1-2);
+}
+#color_palette #palette_picker_3 {
+    background-color: var(--subpal-1-3);
+}
+#color_palette #palette_picker_4 {
+    background-color: var(--subpal-1-4);
+}
+#color_palette #palette_picker_5 {
+    background-color: var(--subpal-1-5);
+}
+#color_palette #palette_picker_6 {
+    background-color: var(--subpal-1-6);
+}
+#color_palette #palette_picker_7 {
+    background-color: var(--subpal-1-7);
+}
+#color_palette #palette_picker_8 {
+    background-color: var(--subpal-1-8);
+}
+#color_palette #palette_picker_9 {
+    background-color: var(--subpal-1-9);
+}
+#color_palette #palette_picker_10 {
+    background-color: var(--subpal-1-10);
 }
 
 .container-xxl {
@@ -119,13 +192,12 @@
     padding-left:0.5rem;
     padding-right:0.5rem;
 }
-#calc .note {
+
-    width: 30%;
-}
 
 #calc .note input {
     border: none !important;
     border-color: transparent !important;
+    background-color: transparent;
 }
 
 /* https://stackoverflow.com/a/47245068/606974 */

dist/main.js

@@ -18,11 +18,20 @@ let infoColumnCount = 5
 let operatingMode = 'NORMAL'
 let noteTimeout;
 let minSubnetSize = 30
+let inflightColor = '#ffffff'
 
 $('input#network,input#netsize').on('input', function() {
     $('#input_form')[0].classList.add('was-validated');
 })
 
+$('#color_palette div').on('click', function() {
+    inflightColor = $(this).css('background-color')
+})
+
+$('#calcbody').on('click', '.row_address, .row_range, .row_usable, .row_hosts, .note', function(event) {
+    $(this).parent().css('background-color', inflightColor)
+})
+
 $('#btn_go').on('click', function() {
     reset();
 })
@@ -135,12 +144,22 @@ function addRowTree(subnetTree, depth, maxDepth) {
             addRowTree(subnetTree[mapKey], depth + 1, maxDepth)
         } else {
             let subnet_split = mapKey.split('/')
-            addRow(subnet_split[0], parseInt(subnet_split[1]), (infoColumnCount + maxDepth - depth))
+            let notesWidth = '30%';
+            if ((maxDepth > 5) && (maxDepth <= 10)) {
+                notesWidth = '25%';
+            } else if ((maxDepth > 10) && (maxDepth <= 15)) {
+                notesWidth = '20%';
+            } else if ((maxDepth > 15) && (maxDepth <= 20)) {
+                notesWidth = '15%';
+            } else if (maxDepth > 20) {
+                notesWidth = '10%';
+            }
+            addRow(subnet_split[0], parseInt(subnet_split[1]), (infoColumnCount + maxDepth - depth), notesWidth)
         }
     }
 }
 
-function addRow(network, netSize, colspan) {
+function addRow(network, netSize, colspan, notesWidth) {
     // 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)
@@ -154,7 +173,7 @@ function addRow(network, netSize, colspan) {
         '                <td class="row_range">' + int2ip(addressFirst) + ' - ' + int2ip(addressLast) + '</td>\n' +
         '                <td class="row_usable">' + int2ip(usableFirst) + ' - ' + int2ip(usableLast) + '</td>\n' +
         '                <td class="row_hosts">' + hostCount + '</td>\n' +
-        '                <td class="note"><label><input type="text" class="form-control shadow-none p-0" data-subnet="' + network + '/' + netSize + '" value="' + (subnetNotes[network + '/' + netSize] || '') + '"></label></td>\n' +
+        '                <td class="note" style="width:' + notesWidth + '"><label><input type="text" class="form-control shadow-none p-0" data-subnet="' + network + '/' + netSize + '" value="' + (subnetNotes[network + '/' + netSize] || '') + '"></label></td>\n' +
         '                <td rowspan="1" colspan="' + colspan + '" class="split rotate" data-subnet="' + network + '/' + netSize + '" data-mutate-verb="split"><span>/' + netSize + '</span></td>\n'
     if (netSize > maxNetSize) {
         // This is wrong. Need to figure out a way to get the number of children so you can set rowspan and the number
@@ -315,57 +334,7 @@ function mutate_subnet_map(verb, network, subnetTree) {
         }
     }
 }
-/*
-function validate_cidr(network, netSize) {
-    let returnObj = {
-        'valid': false,
-        'errorNetwork': true,
-        'errorSize': true,
-        'cidr': false,
-        'network': false,
-        'netSize': false
-    }
-    returnObj['network'] = validate_network(network)
-    if (returnObj['network']) {
-        returnObj['errorNetwork'] = false;
-    }
-    if (!/^\d+$/.test(netSize)) {
-        returnObj['errorSize'] = true;
-    } else {
-        netSize = parseInt(netSize)
-        if ((netSize > 32) || (netSize < 0)) {
-            returnObj['errorSize'] = true;
-        } else {
-            returnObj['errorSize'] = false;
-            returnObj['netSize'] = netSize.toString()
-        }
-    }
-    if ((returnObj['errorNetwork'] === false) && (returnObj['errorSize'] === false)) {
-        returnObj['cidr'] = returnObj['network'] + '/' + returnObj['netSize']
-        returnObj['valid'] = true
-    }
-    return returnObj;
-}
 
-function validate_network(network) {
-    // This can probably be done with Regex but this is better.
-    let octets = network.split('.');
-    if (octets.length !== 4) { return false }
-    if (!/^\d+$/.test(octets[0])) { return false }
-    if (!/^\d+$/.test(octets[1])) { return false }
-    if (!/^\d+$/.test(octets[2])) { return false }
-    if (!/^\d+$/.test(octets[3])) { return false }
-    octets[0] = parseInt(octets[0])
-    octets[1] = parseInt(octets[1])
-    octets[2] = parseInt(octets[2])
-    octets[3] = parseInt(octets[3])
-    if ((octets[0] < 0) || (octets[0] > 255)) { return false }
-    if ((octets[1] < 0) || (octets[1] > 255)) { return false }
-    if ((octets[2] < 0) || (octets[2] > 255)) { return false }
-    if ((octets[3] < 0) || (octets[3] > 255)) { return false }
-    return octets.join('.')
-}
-*/
 
 function show_warning_modal(message) {
     var notifyModal = new bootstrap.Modal(document.getElementById("notifyModal"), {});
@@ -375,6 +344,7 @@ function show_warning_modal(message) {
 
 $( document ).ready(function() {
     reset();
+    importConfig('{"config_version":"1","subnets":{"10.0.0.0/16":{"10.0.0.0/17":{"10.0.0.0/18":{},"10.0.64.0/18":{}},"10.0.128.0/17":{"10.0.128.0/18":{"10.0.128.0/19":{},"10.0.160.0/19":{"10.0.160.0/20":{"10.0.160.0/21":{"10.0.160.0/22":{},"10.0.164.0/22":{}},"10.0.168.0/21":{}},"10.0.176.0/20":{"10.0.176.0/21":{"10.0.176.0/22":{"10.0.176.0/23":{},"10.0.178.0/23":{}},"10.0.180.0/22":{}},"10.0.184.0/21":{}}}},"10.0.192.0/18":{"10.0.192.0/19":{},"10.0.224.0/19":{}}}}},"notes":{}}')
 });
 
 function exportConfig() {