Subnet command (#17)

* Started working on subnets

* Basic version of the subnet command

* Improved subnet command

* almost done with subnets

* improve positioning

src/core/byte.test.ts

@@ -0,0 +1,18 @@
+import {flipBitsToZero, flipBitsToOne} from './byte';
+
+describe('byte', () => {
+    it('can zero out bits', () => {
+        expect(flipBitsToZero(255, 1)).toBe(254);
+        expect(flipBitsToZero(212, 6)).toBe(192);
+        expect(flipBitsToZero(123, 8)).toBe(0);
+        expect(flipBitsToZero(23, 0)).toBe(23);
+    });
+
+    it('can flip bits to one', () => {
+       expect(flipBitsToOne(122,4)).toBe(127); 
+       expect(flipBitsToOne(0,8)).toBe(255);
+       expect(flipBitsToOne(0,3)).toBe(7); 
+       expect(flipBitsToOne(0,2)).toBe(3);
+       expect(flipBitsToOne(0,1)).toBe(1);
+    });
+});

src/core/byte.ts

@@ -0,0 +1,26 @@
+function flipBitsToZero(byte: number, numberOfBits : number) : number {
+    if(numberOfBits == 0)
+        return byte;
+    
+    const zerouOutMask = Math.pow(2, 8-numberOfBits)-1<<numberOfBits; // E.g. 11111000 for flipping first three bits
+    const result = byte & zerouOutMask; 
+
+    return result;
+}
+
+// TODO: continue here to implement getting broadcast address
+
+function flipBitsToOne(byte : number, numberOfBits : number) : number {
+    if(numberOfBits == 0) return byte;
+
+    const zerouOutMask = Math.pow(2, numberOfBits)-1; // E.g. 00000111 for flipping first three bits
+    const result = byte | zerouOutMask; 
+
+    return result;
+}
+
+function createSubnetMaskByte(numberOfBits: number) {
+    return 255<<(8-numberOfBits)&255;;
+}
+
+export {flipBitsToZero, createSubnetMaskByte, flipBitsToOne};

src/core/components/BinaryString.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 
 export type BinaryStringViewProps = {
-    allowFlipBits: boolean;
+    allowFlipBits?: boolean;
     binaryString: string;
     onFlipBit?: (input: FlipBitEventArg) => void;
-    emphasizeBytes: boolean;
+    emphasizeBytes?: boolean;
     className?:string
 };
 
@@ -51,7 +51,7 @@ export default class BinaryStringView extends React.Component<BinaryStringViewPr
         const css = allowFlipBits ? ' flipable' : ''
 
         return bitChars.map((c, i) => {
-            var className = c == '0' ? `zero${css}` : `one${css}`;
+            var className = c == '1' ? `one${css}` : `zero${css}`;
             return <span className={className} key={i} onClick={e => this.onBitClick(i, e)}>{c}</span>
         });
     }

src/core/formatter.ts

@@ -14,6 +14,12 @@ export default {
         }
 
         return sb.join('');
+    },
+    bin(number: number) {
+        return this.formatString(number, 'bin');
+    },
+    emBin(number: number) {
+        return this.padLeft(this.bin(number), 8, '0');
     }
 };
 

src/core/utils.test.tsx

@@ -0,0 +1,9 @@
+import { chunkifyString } from "./utils";
+
+describe('utils', () => {
+    it('chunkifyString', () => {
+        expect(chunkifyString('aabbc', 2)).toMatchObject(["aa", "bb", "c"]);
+        expect(chunkifyString('aabbc', 3)).toMatchObject(["aab", "bc"]);
+        expect(chunkifyString('aabbc', 10)).toMatchObject(["aabbc"]);
+    })
+})

src/core/utils.tsx

@@ -0,0 +1,12 @@
+function chunkifyString(input: string, chunkSize: number) : string[] {
+    
+    const result : string[] = [];
+    for(var i=0;i<input.length;i+=chunkSize) {
+        const size = Math.min(chunkSize, input.length-i);
+        result.push(input.substr(i, size));
+    }
+
+    return result;
+}
+
+export {chunkifyString};