Add descriptions for rotues and redirects

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

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)}

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

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>

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 = [

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>

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,
 			},