Implement ability to increase/decrease subnet mask length

src/index.css

@@ -61,6 +61,9 @@ code { font-size: 1.2em; font-weight: bold; }
 .light .hashLink:hover { color: #888 }
 .light ul.top-links li:hover { background: #ddd }
 .light .error { color: #da586d }
+.light button { color: black}
+.light button:hover { background: #ddd}
+.light button:disabled { color: #888; background-color: inherit; }
 
 /* Dark */
 .dark { background: #121212; color: white;}
@@ -76,6 +79,9 @@ code { font-size: 1.2em; font-weight: bold; }
 .dark .hashLink:hover { color: #999 }
 .dark ul.top-links li:hover { background: #333 }
 .dark .error { color: #da586d}
+.dark button { color: white}
+.dark button:hover { background: #333}
+.dark button:disabled { color: #999; background-color: inherit; }
 
 /*
     Midnight Theme
@@ -95,6 +101,17 @@ code { font-size: 1.2em; font-weight: bold; }
 .midnight ul.top-links li:hover { background: #132537 }
 .midnight .error { color:#da586d}
 .midnight .changelog .item-new .date { font-weight: bold }
+.midnight button { color: white}
+.midnight button:hover { background: #132537}
+.midnight button:disabled { color: #85a0ad; background-color: inherit; }
+
+button { 
+    border: none;
+    background: none;
+    cursor: pointer;
+}
+
+button:focus {outline:0;}
 
 /* Top Links Shrink */
 @media (max-width: 800px) {

src/networking/components/SubnetView.css

@@ -13,4 +13,10 @@
 
 .subnet-view .part {
     border-bottom: solid 1px;
-}
+}
+
+.subnet-view button {
+    margin:0 3px;
+}
+
+.subnet-view .ip-address-col { min-width: 8.5em;}

src/networking/components/SubnetView.tsx

@@ -1,12 +1,24 @@
-import React from 'react';
+import React, { useState } from 'react';
 import BinaryStringView from '../../core/components/BinaryString';
 import './SubnetView.css';
 import { getNetworkAddress, getBroadCastAddress, createSubnetMaskIp } from '../subnet-utils';
 import { chunkifyString } from '../../core/utils';
 import IpAddressBinaryString from './IpAddressBinaryString';
-import { IpAddress, SubnetCommand } from '../models';
+import { IpAddress, IpAddressWithSubnetMask, SubnetCommand } from '../models';
 
-function SubnetView({subnet} : {subnet : SubnetCommand}) {
+function SubnetView(props : {subnet : SubnetCommand}) {
+
+    const [subnet, setSubnet] = useState(props.subnet);
+
+    const incrementMask = () => {
+        const newInput = new IpAddressWithSubnetMask(subnet.input.ipAddress, subnet.input.maskBits+1);
+        setSubnet(new SubnetCommand(newInput));
+    };
+
+    const decrementMask = () => {
+        const newInput = new IpAddressWithSubnetMask(subnet.input.ipAddress, subnet.input.maskBits-1);
+        setSubnet(new SubnetCommand(newInput));
+    }
 
     return <React.Fragment>
         <table className="expression subnet-view">
@@ -16,13 +28,24 @@ function SubnetView({subnet} : {subnet : SubnetCommand}) {
                     <SubnetRow ip={createSubnetMaskIp(subnet.input)} descr="Net Mask"/>
                     <SubnetRow ip={getBroadCastAddress(subnet.input)} descr="Broadcast"/>                  
                     <tr>
-                        <td className="description soft">
+                        <td data-test-name="label" className="soft">
                             <span>Network Size</span>
                         </td>
-                        <td>
+                        <td data-test-name="decimal">
                             {subnet.getAdressSpaceSize()}
                         </td>
                     </tr>
+                    <tr>
+                        <td data-test-name="label" className="soft">
+                            Mask Size
+                        </td>
+                        <td data-test-name="decimal">
+                           
+                            <button onClick={decrementMask} disabled={subnet.input.maskBits === 0} title="Decrease mask size">-</button>
+                            <span>{subnet.input.maskBits}</span>
+                            <button onClick={incrementMask} disabled={subnet.input.maskBits === 32} title="Increase mask size">+</button>
+                        </td>
+                    </tr>
             </tbody>
         </table>
         <div>
@@ -35,18 +58,14 @@ function SubnetRow(props: { ip: IpAddress, descr: string}) {
     const {ip, descr} = props;
 
     return <tr>
-            <td className="description soft">{descr}</td>
-                <td className="ip">
+            <td className="soft" data-test-name="label">{descr}</td>
+                <td data-test-name="decimal" className="ip-address-col">
                    {ip.toString()}
                 </td>
-                <td className="class-part">
+                <td data-test-name="bin">
                     <IpAddressBinaryString ip={ip} />
             </td>
         </tr>;
-
-    function addDots(bin: string) {
-        return chunkifyString(bin, 8).map((s, i) => <BinaryStringView binaryString={s} key={i} />)
-    }
 }
 
 export default SubnetView;