From e4c256381184d502170bdc731c9585793cc8f9fd Mon Sep 17 00:00:00 2001
From: MrMelon54 <github@mrmelon54.com>
Date: Sat, 28 Oct 2023 22:44:18 +0100
Subject: [PATCH] Add descriptions for rotues and redirects

---
 src/components/RedirectCreator.svelte | 7 +++++--
 src/components/RedirectRow.svelte     | 4 ++++
 src/components/RouteCreator.svelte    | 7 +++++--
 src/components/RouteRow.svelte        | 8 ++++++++
 src/types/target.ts                   | 6 ++++--
 src/views/VioletView.svelte           | 2 ++
 test-server/main.go                   | 8 ++++++++
 7 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/src/components/RedirectCreator.svelte b/src/components/RedirectCreator.svelte
index ec602a4..4827935 100644
--- a/src/components/RedirectCreator.svelte
+++ b/src/components/RedirectCreator.svelte
@@ -4,19 +4,22 @@
   import Flags from "./Flags.svelte";
 
   const dispatch = createEventDispatcher();
-  let redirect: Redirect = {src: "", dst: "", flags: 0, active: true};
+  let redirect: Redirect = {src: "", dst: "", desc: "", flags: 0, active: true};
+
+  const descCols = 50;
 </script>
 
 <tr class="created">
   <td><input type="text" class="code-font" bind:value={redirect.src} size={Math.max(20, redirect.src.length + 2)} /></td>
   <td><input type="text" class="code-font" bind:value={redirect.dst} size={Math.max(20, redirect.dst.length + 2)} /></td>
   <td><Flags value={redirect.flags} editable keys={redirectKeys} /></td>
+  <td class="desc"><textarea rows="3" cols={descCols} bind:value={redirect.desc} /></td>
   <td><input type="checkbox" bind:checked={redirect.active} /></td>
   <td>
     <button
       on:click={() => {
         dispatch("make", redirect);
-        redirect = {src: "", dst: "", flags: 0, active: true};
+        redirect = {src: "", dst: "", desc: "", flags: 0, active: true};
       }}
     >
       Create
diff --git a/src/components/RedirectRow.svelte b/src/components/RedirectRow.svelte
index e73807a..baf6749 100644
--- a/src/components/RedirectRow.svelte
+++ b/src/components/RedirectRow.svelte
@@ -8,6 +8,8 @@
   function resetRedirect(): any {
     redirect.client = JSON.parse(JSON.stringify(redirect.server));
   }
+
+  const descCols = 50;
 </script>
 
 {#if noCPair(redirect)}
@@ -15,6 +17,7 @@
     <td class="code-font"><a href="https://{redirect.server.src}" target="_blank">{redirect.server.src}</a></td>
     <td><input type="text" class="code-font" disabled bind:value={redirect.server.dst} size={Math.max(20, redirect.server.dst.length + 2)} /></td>
     <td><Flags value={redirect.server.flags} keys={redirectKeys} /></td>
+    <td class="desc"><textarea rows="3" cols={descCols} disabled value={redirect.server.desc} /></td>
     <td><input type="checkbox" disabled checked={false} /></td>
     <td><button on:click={() => resetRedirect()}>Restore</button></td>
   </tr>
@@ -23,6 +26,7 @@
     <td class="code-font"><a href="https://{redirect.client.src}" target="_blank">{redirect.client.src}</a></td>
     <td><input type="text" class="code-font" bind:value={redirect.client.dst} size={Math.max(20, redirect.client.dst.length + 2)} /></td>
     <td><Flags bind:value={redirect.client.flags} editable keys={redirectKeys} /></td>
+    <td class="desc"><textarea rows="3" cols={descCols} bind:value={redirect.client.desc} /></td>
     <td><input type="checkbox" bind:checked={redirect.client.active} /></td>
     <td>
       {#if !noSPair(redirect)}
diff --git a/src/components/RouteCreator.svelte b/src/components/RouteCreator.svelte
index 0c09b74..c26397b 100644
--- a/src/components/RouteCreator.svelte
+++ b/src/components/RouteCreator.svelte
@@ -4,19 +4,22 @@
   import Flags from "./Flags.svelte";
 
   const dispatch = createEventDispatcher();
-  let route: Route = {src: "", dst: "", flags: 0, active: true};
+  let route: Route = {src: "", dst: "", desc: "", flags: 0, active: true};
+
+  const descCols = 50;
 </script>
 
 <tr class="created">
   <td><input type="text" class="code-font" bind:value={route.src} size={Math.max(20, route.src.length + 2)} /></td>
   <td><input type="text" class="code-font" bind:value={route.dst} size={Math.max(20, route.dst.length + 2)} /></td>
   <td><Flags value={route.flags} editable keys={routeKeys} /></td>
+  <td class="desc"><textarea rows="3" cols={descCols} bind:value={route.desc} /></td>
   <td><input type="checkbox" bind:checked={route.active} /></td>
   <td>
     <button
       on:click={() => {
         dispatch("make", route);
-        route = {src: "", dst: "", flags: 0, active: true};
+        route = {src: "", dst: "", desc: "", flags: 0, active: true};
       }}
     >
       Create
diff --git a/src/components/RouteRow.svelte b/src/components/RouteRow.svelte
index ea7a05b..ceaec41 100644
--- a/src/components/RouteRow.svelte
+++ b/src/components/RouteRow.svelte
@@ -8,6 +8,8 @@
   function resetRoute(): any {
     route.client = JSON.parse(JSON.stringify(route.server));
   }
+
+  const descCols = 50;
 </script>
 
 {#if noCPair(route)}
@@ -15,6 +17,7 @@
     <td class="code-font"><a href="https://{route.server.src}" target="_blank">{route.server.src}</a></td>
     <td><input type="text" class="code-font" disabled bind:value={route.server.dst} size={Math.max(20, route.server.dst.length + 2)} /></td>
     <td><Flags value={route.server.flags} keys={routeKeys} /></td>
+    <td class="desc"><textarea rows="3" cols={descCols} disabled value={route.server.desc} /></td>
     <td><input type="checkbox" disabled checked={false} /></td>
     <td><button on:click={() => resetRoute()}>Restore</button></td>
   </tr>
@@ -23,6 +26,7 @@
     <td class="code-font"><a href="https://{route.client.src}" target="_blank">{route.client.src}</a></td>
     <td><input type="text" class="code-font" bind:value={route.client.dst} size={Math.max(20, route.client.dst.length + 2)} /></td>
     <td><Flags bind:value={route.client.flags} editable keys={routeKeys} /></td>
+    <td class="desc"><textarea rows="3" cols={descCols} bind:value={route.client.desc} /></td>
     <td><input type="checkbox" bind:checked={route.client.active} /></td>
     <td>
       {#if !noSPair(route)}
@@ -65,4 +69,8 @@
   td input[type="text"] {
     padding: 4px;
   }
+
+  .desc textarea {
+    resize: none;
+  }
 </style>
diff --git a/src/types/target.ts b/src/types/target.ts
index dbdb84c..af78106 100644
--- a/src/types/target.ts
+++ b/src/types/target.ts
@@ -1,6 +1,7 @@
 export interface Route {
   src: string;
   dst: string;
+  desc: string;
   flags: number;
   active: boolean;
 }
@@ -8,18 +9,19 @@ export interface Route {
 export interface Redirect {
   src: string;
   dst: string;
+  desc: string;
   flags: number;
   active: boolean;
 }
 
 export function routeEqual(a: Route, b: Route): boolean {
   if (b == null) return false;
-  return a.src === b.src && a.dst === b.dst && a.flags === b.flags && a.active === b.active;
+  return a.src === b.src && a.dst === b.dst && a.desc === b.desc && a.flags === b.flags && a.active === b.active;
 }
 
 export function redirectEqual(a: Redirect, b: Redirect): boolean {
   if (b == null) return false;
-  return a.src === b.src && a.dst === b.dst && a.flags === b.flags && a.active === b.active;
+  return a.src === b.src && a.dst === b.dst && a.desc === b.desc && a.flags === b.flags && a.active === b.active;
 }
 
 export const routeKeys = [
diff --git a/src/views/VioletView.svelte b/src/views/VioletView.svelte
index c476655..72907d1 100644
--- a/src/views/VioletView.svelte
+++ b/src/views/VioletView.svelte
@@ -82,6 +82,7 @@
         <th>Source</th>
         <th>Destination</th>
         <th>Flags</th>
+        <th>Description</th>
         <th>Active</th>
         <th>Option</th>
       </tr>
@@ -119,6 +120,7 @@
         <th>Source</th>
         <th>Destination</th>
         <th>Flags</th>
+        <th>Description</th>
         <th>Active</th>
         <th>Option</th>
       </tr>
diff --git a/test-server/main.go b/test-server/main.go
index 4c8737e..7630ede 100644
--- a/test-server/main.go
+++ b/test-server/main.go
@@ -109,24 +109,28 @@ func apiServer(verify mjwt.Verifier) {
 			{
 				"src":    "example.com",
 				"dst":    "127.0.0.1:8080",
+				"desc":   "This is a test description",
 				"flags":  181,
 				"active": true,
 			},
 			{
 				"src":    "test.example.com",
 				"dst":    "127.0.0.1:8081",
+				"desc":   "This is a test description",
 				"flags":  17,
 				"active": true,
 			},
 			{
 				"src":    "example.org/hello",
 				"dst":    "127.0.0.1:8082",
+				"desc":   "This is a test description",
 				"flags":  16,
 				"active": true,
 			},
 			{
 				"src":    "test.example.org/hello",
 				"dst":    "127.0.0.1:8083",
+				"desc":   "This is a test description",
 				"flags":  15,
 				"active": true,
 			},
@@ -137,24 +141,28 @@ func apiServer(verify mjwt.Verifier) {
 			{
 				"src":    "example.org",
 				"dst":    "127.0.0.1:8084",
+				"desc":   "This is a test description",
 				"flags":  181,
 				"active": true,
 			},
 			{
 				"src":    "test.example.org",
 				"dst":    "127.0.0.1:8085",
+				"desc":   "This is a test description",
 				"flags":  17,
 				"active": true,
 			},
 			{
 				"src":    "example.org/hello",
 				"dst":    "127.0.0.1:8086",
+				"desc":   "This is a test description",
 				"flags":  16,
 				"active": true,
 			},
 			{
 				"src":    "test.example.org/hello",
 				"dst":    "127.0.0.1:8087",
+				"desc":   "This is a test description",
 				"flags":  15,
 				"active": true,
 			},