feat: show routing table (#61)

Co-authored-by: pgallino <[email protected]>

Author: MegaRedHand

src/context.ts

@@ -6,18 +6,28 @@ import {
   saveToLocalStorage,
 } from "./types/viewportManager";
 import { Layer } from "./types/devices/device";
+import { IpAddressGenerator } from "./packets/ip";
 
 export class GlobalContext {
   private viewport: Viewport = null;
   private datagraph: DataGraph;
   private viewgraph: ViewGraph;
   private saveIntervalId: NodeJS.Timeout | null = null;
+  private ipGenerator: IpAddressGenerator;
 
   initialize(viewport: Viewport) {
     this.viewport = viewport;
+
+    const baseIp = "192.168.1.0";
+    const mask = "255.255.255.0";
+    this.ipGenerator = new IpAddressGenerator(baseIp, mask);
     loadFromLocalStorage(this);
   }
 
+  getNextIp(): { ip: string; mask: string } {
+    return this.ipGenerator.getNextIp();
+  }
+
   private setNetwork(datagraph: DataGraph, layer: Layer) {
     this.datagraph = datagraph;
     this.viewport.clear();

src/graphics/renderables/device_info.ts

@@ -2,7 +2,11 @@ import { Device } from "../../types/devices";
 import { DeviceType } from "../../types/devices/device";
 import { ViewGraph } from "../../types/graphs/viewgraph";
 import { sendPacket } from "../../types/packet";
-import { createDropdown, createRightBarButton } from "../right_bar";
+import {
+  createDropdown,
+  createToggleTable,
+  createRightBarButton,
+} from "../right_bar";
 import { StyledInfo } from "./styled_info";
 
 export class DeviceInfo extends StyledInfo {
@@ -65,6 +69,20 @@ export class DeviceInfo extends StyledInfo {
     );
   }
 
+  addRoutingTable(entries: { ip: string; mask: string; iface: string }[]) {
+    const rows = entries.map((entry) => [entry.ip, entry.mask, entry.iface]);
+
+    const dynamicTable = createToggleTable(
+      "Routing Table", // Title
+      ["IP Address", "Mask", "Interface"], // Headers
+      rows, // Generated files
+      "right-bar-toggle-button", // Button class
+      "right-bar-table", // Table class
+    );
+
+    this.inputFields.push(dynamicTable);
+  }
+
   toHTML(): Node[] {
     return super.toHTML().concat(this.inputFields);
   }

src/graphics/right_bar.ts

@@ -88,6 +88,62 @@ export class RightBar {
   }
 }
 
+export function createToggleTable(
+  title: string,
+  headers: string[],
+  rows: string[][],
+  buttonClass = "right-bar-toggle-button",
+  tableClass = "right-bar-table",
+) {
+  const container = document.createElement("div");
+  container.classList.add("toggle-table-container");
+
+  // Create toggle button
+  const button = document.createElement("button");
+  button.classList.add(buttonClass);
+  button.textContent = title;
+
+  // Create table
+  const table = document.createElement("table");
+  table.classList.add(tableClass, "hidden");
+
+  // Add headers
+  const headerRow = document.createElement("tr");
+  headers.forEach((header) => {
+    const th = document.createElement("th");
+    th.textContent = header;
+    headerRow.appendChild(th);
+  });
+  table.appendChild(headerRow);
+
+  // Add rows
+  rows.forEach((row) => {
+    const rowElement = document.createElement("tr");
+    row.forEach((cellData) => {
+      const cell = document.createElement("td");
+      cell.textContent = cellData;
+      rowElement.appendChild(cell);
+    });
+    table.appendChild(rowElement);
+  });
+
+  // Toggle when clicking on button
+  button.onclick = () => {
+    const isHidden = table.classList.contains("hidden");
+    table.classList.toggle("hidden", !isHidden);
+    table.classList.toggle("open", isHidden);
+    container.classList.toggle("hidden", !isHidden);
+    container.classList.toggle("open", isHidden);
+    button.classList.toggle("open", isHidden);
+  };
+
+  // Add button and table to container
+  container.appendChild(button);
+  container.appendChild(table);
+
+  return container;
+}
+
 export function createRightBarButton(
   text: string,
   onClick: () => void,

src/index.ts

@@ -16,7 +16,7 @@ import { GlobalContext } from "./context";
 
 // Assets
 // Doing this includes the file in the build
-import "./style.css";
+import "./styles";
 import RouterSvg from "./assets/router.svg";
 import ComputerSvg from "./assets/pc.svg";
 import PlaySvg from "./assets/play-icon.svg";

src/packets/ip.ts

@@ -21,17 +21,79 @@ export class IpAddress {
     this.octets = octets;
   }
 
-  static parse(addrString: string) {
+  // Parse IP address from a string representation (10.25.34.42)
+  static parse(addrString: string): IpAddress {
     const octets = new Uint8Array(4);
-    addrString.split(".").map((octet, i) => {
+    addrString.split(".").forEach((octet, i) => {
       const octetInt = parseInt(octet);
-      if (octetInt < 0 || octetInt > 255) {
-        throw new Error("Invalid IP address");
+      if (isNaN(octetInt) || octetInt < 0 || octetInt > 255) {
+        throw new Error(`Invalid IP address: ${addrString}`);
       }
       octets[i] = octetInt;
     });
     return new this(octets);
   }
+
+  // Turn to string
+  toString(): string {
+    return Array.from(this.octets).join(".");
+  }
+
+  // Check if two IP addresses are equal.
+  equals(other: IpAddress): boolean {
+    return this.octets.every((octet, index) => octet === other.octets[index]);
+  }
+
+  // Apply a bitmask to the address (bitwise AND) and return the result.
+  applyMask(mask: IpAddress): IpAddress {
+    const maskedOctets = new Uint8Array(
+      this.octets.map((octet, i) => octet & mask.octets[i]),
+    );
+    return new IpAddress(maskedOctets);
+  }
+
+  // Return true if the two IP addresses are in the same subnet specified by the mask.
+  isInSubnet(baseIp: IpAddress, mask: IpAddress): boolean {
+    const maskedThis = this.applyMask(mask);
+    const maskedBase = baseIp.applyMask(mask);
+    return maskedThis.equals(maskedBase);
+  }
+}
+
+export class IpAddressGenerator {
+  private baseIp: number;
+  private currentIp: number;
+  private mask: string;
+
+  constructor(baseIp: string, mask: string) {
+    this.baseIp = IpAddressGenerator.ipToNumber(baseIp);
+    this.currentIp = this.baseIp + 1; // Start on first valid IP
+    this.mask = mask;
+  }
+
+  // Generate next valid IP
+  getNextIp(): { ip: string; mask: string } {
+    const nextIp = IpAddressGenerator.numberToIp(this.currentIp);
+    this.currentIp++;
+    return { ip: nextIp, mask: this.mask };
+  }
+
+  // Turn IP into a number
+  static ipToNumber(ip: string): number {
+    return ip
+      .split(".")
+      .reduce((acc, octet) => (acc << 8) + parseInt(octet, 10), 0);
+  }
+
+  // Turn number into IP
+  static numberToIp(num: number): string {
+    return [
+      (num >> 24) & 0xff,
+      (num >> 16) & 0xff,
+      (num >> 8) & 0xff,
+      num & 0xff,
+    ].join(".");
+  }
 }
 
 export interface IpPayload {

src/styles/index.ts

@@ -0,0 +1 @@
+import "./style.css";

src/style.css src/styles/style.csssrc/style.css renamed to src/styles/style.css

@@ -150,9 +150,29 @@ canvas {
   height: 60%;
 }
 
+/* width */
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: #888;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
 /* Style for the right sidebar */
 .right-bar {
-  flex: 0 0 250px; /* Fixed width of 250px for the right bar */
+  flex: 0 0 300px; /* Fixed width of 250px for the right bar */
   background-color: #f1f1f1; /* Light background for the bar */
   box-shadow: -2px 0px 5px rgba(0, 0, 0, 0.2); /* Left shadow to highlight the bar */
   padding: 20px; /* Internal space around content */
@@ -192,10 +212,14 @@ canvas {
   border-radius: 4px;
   width: 100%; /* Occupies 100% of the right-bar width */
   box-sizing: border-box; /* Includes padding in the total width */
+  transition:
+    background-color 0.3s ease,
+    transform 0.2s ease;
 }
 
 .right-bar-button:hover {
   background-color: #0056b3;
+  transform: scale(1.02); /* Small scale effect on hover */
 }
 
 .right-bar-button.selected-button {
@@ -249,3 +273,115 @@ canvas {
 .dropdown-container {
   margin-bottom: 8px; /* Reduce bottom margin */
 }
+
+/* Container for button and table */
+.toggle-table-container {
+  display: flex;
+  flex-direction: column;
+  gap: 5px; /* Spacing between button and table */
+  width: 100%;
+}
+
+/* Style for buttons in the right bar with green background */
+.right-bar-toggle-button {
+  background-color: #1d7437; /* Dark green */
+  border: none;
+  color: white;
+  padding: 6px 12px;
+  text-align: center; /* Center text horizontally */
+  text-decoration: none;
+  display: flex; /* Use flexbox to organize text and arrow */
+  justify-content: center; /* Center content horizontally */
+  align-items: center; /* Center content vertically */
+  font-size: 14px;
+  margin: 5px 0; /* Adjust margin between buttons */
+  cursor: pointer;
+  border-radius: 4px; /* Rounded borders */
+  width: 100%;
+  box-sizing: border-box; /* Include padding on all length */
+  transition:
+    background-color 0.3s ease,
+    transform 0.2s ease;
+  position: relative; /* To position internal elements like the arrow */
+}
+
+/* Hover for the button */
+.right-bar-toggle-button:hover {
+  background-color: #135025; /* Change to a darker green */
+  transform: scale(1.02); /* Small scale effect */
+}
+
+/* Triangle icon */
+.right-bar-toggle-button::after {
+  content: "";
+  display: inline-block;
+  position: absolute; /* Position the triangle on the right */
+  right: 12px; /* Right margin for the triangle */
+  width: 0;
+  height: 0;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-top: 6px solid white; /* White triangle */
+  transition: transform 0.3s ease;
+}
+
+/* Rotate triangle when opening */
+.right-bar-toggle-button.open::after {
+  transform: rotate(180deg); /* Rotate triangle upwards */
+}
+
+/* Table style */
+.toggle-table-container table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 14px;
+  text-align: center;
+  transition: opacity 0.5s ease-out; /* Make transition smoother */
+  border-radius: 8px; /* Rounded borders */
+  overflow: hidden; /* Avoid content spilling */
+  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* Table headers */
+.toggle-table-container th {
+  background-color: #1d7437;
+  color: white;
+  padding: 8px;
+  border: 1px solid #ddd;
+  text-align: center;
+}
+
+/* Table rows */
+.toggle-table-container td {
+  padding: 8px;
+  border: 1px solid #ddd;
+  text-align: center;
+}
+
+/* Alternate between row colors */
+.toggle-table-container tr:nth-child(even) {
+  background-color: #f9f9f9;
+}
+
+.toggle-table-container tr:nth-child(odd) {
+  background-color: #ffffff;
+}
+
+/* Hover on rows */
+.toggle-table-container tr:hover {
+  background-color: #f1f1f1;
+}
+
+/* Compatibility adjustments */
+.toggle-table-container caption {
+  font-size: 16px;
+  font-weight: bold;
+  margin-bottom: 5px;
+  color: #333333;
+  text-align: center;
+}
+
+/* Hidden table */
+.toggle-table-container table.hidden {
+  display: none; /* Hides table */
+}