still uggo-ish but better (#122)

NybyDK · Apr 5, 2024 · 1077fde · 1077fde
2 parents 66feb12 + 83c3721
commit 1077fde
Show file tree

Hide file tree

Showing 11 changed files with 252 additions and 116 deletions.
diff --git a/src/lib/classes/NetworkStore.ts b/src/lib/classes/NetworkStore.ts
@@ -104,8 +104,8 @@ export class NetworkStore implements Writable<NetworkState> {
 
     const router = new LSR(id, {
       label: `LSR ${id}`,
-      x,
-      y,
+      x: Math.round(x),
+      y: Math.round(y),
     });
 
     this.addRouter(router);

diff --git a/src/lib/components/Dialog.svelte b/src/lib/components/Dialog.svelte
@@ -8,6 +8,7 @@
 
 <style>
   dialog {
+    max-height: 500px;
     padding: 10px;
     margin: auto;
   }

diff --git a/src/lib/components/LinkSettings.svelte b/src/lib/components/LinkSettings.svelte
@@ -3,6 +3,7 @@
   import { locked } from "$lib/stores/locked";
   import type Link from "$lib/classes/MPLS/Link";
   import Dialog from "$lib/components/Dialog.svelte";
+  import SmallButton from "$lib/components/RouterTables/SmallButton.svelte";
 
   export let link: Link | null;
   export let dialog: HTMLDialogElement;
@@ -22,18 +23,24 @@
   }}
 >
   {#if link}
-    Distance: {link.distance}
+    Distance: {link.distance} km
     <label>
       Bandwidth:
       <input type="number" disabled={$locked} bind:value={link.bandwidth} />
     </label>
-    <button on:click={handleClickDeleteButton}>Delete Link</button>
+    <div>
+      <SmallButton text="Delete Link" callback={handleClickDeleteButton} />
+    </div>
   {:else}
     <p>You somehow double-clicked on a link that can't be found?</p>
   {/if}
 </Dialog>
 
 <style>
+  div {
+    margin-top: 5px;
+  }
+
   label {
     display: block;
   }

diff --git a/src/lib/components/Router.svelte b/src/lib/components/Router.svelte
@@ -17,7 +17,7 @@
   r="20"
   fill={colorMap[router.type]}
 />
-<text x={router.node.x} y={router.node.y} dominant-baseline="central">
+<text x={router.node.x} y={router.node.y} dominant-baseline="central" font-size="smaller">
   {router.node.label}
 </text>
 

diff --git a/src/lib/components/RouterSettings.svelte b/src/lib/components/RouterSettings.svelte
@@ -11,6 +11,7 @@
   import Destination from "$lib/components/RouterTables/Destination.svelte";
   import LIB from "$lib/components/RouterTables/LIB.svelte";
   import FIB from "$lib/components/RouterTables/FIB.svelte";
+  import SmallButton from "$lib/components/RouterTables/SmallButton.svelte";
 
   export let router: Router | null;
   export let dialog: HTMLDialogElement;
@@ -34,58 +35,105 @@
   }}
 >
   {#if router}
-    <label>
-      Label:
-      <input type="text" bind:value={router.node.label} />
-    </label>
-    <p>ID: {router.id}</p>
-    <p>Type: {router.type}</p>
-    <label>
-      Position:
-      <input type="number" disabled={$locked} bind:value={router.node.x} />
-      <input type="number" disabled={$locked} bind:value={router.node.y} />
-    </label>
+    <div
+      on:input={() => {
+        network.notify();
+      }}
+    >
+      <div>
+        <label>
+          Label:
+          <input type="text" bind:value={router.node.label} />
+        </label>
+      </div>
+      <label>
+        Position:
+        <input type="number" disabled={$locked} bind:value={router.node.x} />
+        <input type="number" disabled={$locked} bind:value={router.node.y} />
+      </label>
+      <p>ID: {router.id}</p>
+    </div>
     {#if router instanceof CE}
-      <p>Address: {router.address}</p>
-      <Destination bind:router />
+      <p style:display={"inline"}>Address:</p>
+      <button
+        on:click={async () => {
+          if (router instanceof CE) await navigator.clipboard.writeText(router.address);
+        }}>{router.address}</button
+      >
+      <div class="margin-top">
+        <Destination bind:router />
+      </div>
     {/if}
     {#if router instanceof LER}
-      <LIB bind:router />
-      <FIB bind:router />
+      <div class="margin-top">
+        <FIB bind:router />
+      </div>
     {/if}
-    {#if router instanceof LSR}
-      <LIB bind:router />
+    {#if router instanceof LER || router instanceof LSR}
+      <div class="margin-top">
+        <LIB bind:router />
+      </div>
     {/if}
-    <button on:click={handleDelete}>Delete Router</button>
+    <div class="margin-top">
+      <SmallButton text="Delete Router" callback={handleDelete} />
+    </div>
   {:else}
     <p>You somehow double-clicked on a router that can't be found?</p>
   {/if}
 </Dialog>
 
 <style>
+  input {
+    width: 75px;
+  }
+
+  button {
+    padding: 0 10px;
+  }
+
   :global(table) {
     border-collapse: collapse;
-    min-width: 500px;
+    table-layout: fixed;
+    width: 500px;
   }
 
   :global(th),
   :global(td) {
-    border: 1px solid black;
+    outline: 1px solid black;
+  }
+
+  :global(td) {
+    background-color: #cccccc;
+  }
+
+  :global(th:last-child) {
+    width: 30px;
   }
 
   @media (prefers-color-scheme: dark) {
     :global(th),
     :global(td) {
-      border: 1px solid white;
+      outline: 1px solid white;
     }
+
+    :global(td) {
+      background-color: #333333;
+    }
+  }
+
+  :global(table input::-webkit-inner-spin-button) {
+    appearance: none;
   }
 
   :global(table input) {
     width: 100%;
     text-align: center;
+    outline: none;
+    border: none;
+    background: none;
   }
 
-  :global(button) {
-    display: block;
+  .margin-top {
+    margin-top: 10px;
   }
 </style>
diff --git a/src/lib/components/RouterTables/Destination.svelte b/src/lib/components/RouterTables/Destination.svelte
@@ -3,6 +3,7 @@
   import { paths } from "$lib/stores/paths";
   import type CE from "$lib/classes/MPLS/CE";
   import LDP from "$lib/classes/MPLS/LDP";
+  import SmallButton from "$lib/components/RouterTables/SmallButton.svelte";
 
   export let router: CE;
 
@@ -45,41 +46,53 @@
 
 <p>Destinations:</p>
 <table>
-  <tr>
-    <th>Destination</th>
-    <th>First hop</th>
-  </tr>
-  {#each [...router.firstHop] as [destination, link]}
+  <thead>
     <tr>
-      <td>
-        <input
-          type="text"
-          value={destination}
-          placeholder="Address"
-          on:change={(event) => {
-            handleOnChangeDestination(event, destination);
-          }}
-        />
-      </td>
-      <td>
-        <input
-          type="text"
-          value={link}
-          placeholder="Link"
-          on:change={(event) => {
-            handleOnChangeLink(event, destination);
+      <th>Destination</th>
+      <th>First hop</th>
+      <th></th>
+    </tr>
+  </thead>
+  <tbody>
+    {#each [...router.firstHop] as [destination, link]}
+      <tr>
+        <td>
+          <input
+            type="text"
+            value={destination}
+            placeholder="Address"
+            on:change={(event) => {
+              handleOnChangeDestination(event, destination);
+            }}
+          />
+        </td>
+        <td>
+          <input
+            type="text"
+            value={link}
+            placeholder="Link"
+            on:change={(event) => {
+              handleOnChangeLink(event, destination);
+            }}
+          />
+        </td>
+        <SmallButton
+          text="-"
+          callback={() => {
+            router.firstHop.delete(destination);
+            router = router;
           }}
         />
-      </td>
-      <button
-        on:click={() => {
-          router.deleteEntry(destination);
-          router = router;
-        }}
-      >
-        -
-      </button>
-    </tr>
-  {/each}
+      </tr>
+    {/each}
+  </tbody>
 </table>
-<button on:click={addAndUpdate(router.addEmptyEntry)}>+</button>
+<div>
+  <SmallButton text="+" callback={addAndUpdate(router.addEmptyEntry)} />
+</div>
+
+<style>
+  div {
+    margin-top: 5px;
+  }
+</style>
diff --git a/src/lib/components/RouterTables/FIB.svelte b/src/lib/components/RouterTables/FIB.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import type LER from "$lib/classes/MPLS/LER";
+  import SmallButton from "$lib/components/RouterTables/SmallButton.svelte";
 
   export let router: LER;
 
@@ -19,34 +20,47 @@
   }
 </script>
 
+<p>FIB:</p>
 <table>
-  <tr>
-    <th>Address</th>
-    <th>Label</th>
-    <th>Next hop</th>
-  </tr>
-  {#each [...router.FIB.map] as [address, value]}
+  <thead>
     <tr>
-      <td>
-        <input
-          type="text"
-          value={address}
-          on:change={(event) => {
-            handleOnChange(event, address);
+      <th>Address</th>
+      <th>Label</th>
+      <th>Next hop</th>
+      <th></th>
+    </tr>
+  </thead>
+  <tbody>
+    {#each [...router.FIB.map] as [address, value]}
+      <tr>
+        <td>
+          <input
+            type="text"
+            value={address}
+            on:change={(event) => {
+              handleOnChange(event, address);
+            }}
+          />
+        </td>
+        <td><input type="number" bind:value={value.label} /></td>
+        <td><input type="text" bind:value={value.nextHop} /></td>
+        <SmallButton
+          text="-"
+          callback={() => {
+            router.FIB.deleteEntry(address);
+            router = router;
           }}
         />
-      </td>
-      <td><input type="number" bind:value={value.label} /></td>
-      <td><input type="text" bind:value={value.nextHop} /></td>
-      <button
-        on:click={() => {
-          router.FIB.deleteEntry(address);
-          router = router;
-        }}
-      >
-        -
-      </button>
-    </tr>
-  {/each}
-  <button on:click={addAndUpdate(router.FIB.addEmptyEntry)}>+</button>
+      </tr>
+    {/each}
+  </tbody>
 </table>
+<div>
+  <SmallButton text="+" callback={addAndUpdate(router.FIB.addEmptyEntry)} />
+</div>
+
+<style>
+  div {
+    margin-top: 5px;
+  }
+</style>