Add route and redirect creators

src/components/RedirectCreator.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import {createEventDispatcher} from "svelte";
+  import {redirectKeys, type Redirect} from "../types/target";
+  import Flags from "./Flags.svelte";
+
+  const dispatch = createEventDispatcher();
+  let redirect: Redirect = {src: "", dst: "", flags: 0, active: true};
+</script>
+
+<tr class="created">
+  <td><input type="text" class="code-font" bind:value={redirect.src} size={redirect.src.length + 2} /></td>
+  <td><input type="text" class="code-font" bind:value={redirect.dst} size={redirect.dst.length + 2} /></td>
+  <td><Flags value={redirect.flags} editable keys={redirectKeys} /></td>
+  <td><input type="checkbox" bind:checked={redirect.active} /></td>
+  <td>
+    <button
+      on:click={() => {
+        dispatch("make", redirect);
+        redirect = {src: "", dst: "", flags: 0, active: true};
+      }}
+    >
+      Create
+    </button>
+  </td>
+</tr>

src/components/RedirectRow.svelte

@@ -12,15 +12,15 @@
 
 {#if noCPair(redirect)}
   <tr class="deleted">
-    <td class="code-font">{redirect.server.src}</td>
+    <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={redirect.server.dst.length + 2} /></td>
     <td><Flags value={redirect.server.flags} keys={redirectKeys} /></td>
     <td><input type="checkbox" disabled checked={false} /></td>
     <td><button on:click={() => resetRedirect()}>Restore</button></td>
   </tr>
 {:else}
-  <tr class:created={noSPair(redirect)} class:modified={noSPair(redirect) || !redirectEqual(redirect.client, redirect.server)}>
+  <tr class:created={noSPair(redirect)} class:modified={!noSPair(redirect) && !redirectEqual(redirect.client, redirect.server)}>
-    <td class="code-font">{redirect.client.src}</td>
+    <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={redirect.client.dst.length + 2} /></td>
     <td><Flags bind:value={redirect.client.flags} editable keys={redirectKeys} /></td>
     <td><input type="checkbox" bind:checked={redirect.client.active} /></td>

src/components/RouteCreator.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import {createEventDispatcher} from "svelte";
+  import {routeKeys, type Route} from "../types/target";
+  import Flags from "./Flags.svelte";
+
+  const dispatch = createEventDispatcher();
+  let route: Route = {src: "", dst: "", flags: 0, active: true};
+</script>
+
+<tr class="created">
+  <td><input type="text" class="code-font" bind:value={route.src} size={route.src.length + 2} /></td>
+  <td><input type="text" class="code-font" bind:value={route.dst} size={route.dst.length + 2} /></td>
+  <td><Flags value={route.flags} editable keys={routeKeys} /></td>
+  <td><input type="checkbox" bind:checked={route.active} /></td>
+  <td>
+    <button
+      on:click={() => {
+        dispatch("make", route);
+        route = {src: "", dst: "", flags: 0, active: true};
+      }}
+    >
+      Create
+    </button>
+  </td>
+</tr>

src/components/RouteRow.svelte

@@ -12,15 +12,15 @@
 
 {#if noCPair(route)}
   <tr class="deleted">
-    <td class="code-font">{route.server.src}</td>
+    <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={route.server.dst.length + 2} /></td>
     <td><Flags value={route.server.flags} keys={routeKeys} /></td>
     <td><input type="checkbox" disabled checked={false} /></td>
     <td><button on:click={() => resetRoute()}>Restore</button></td>
   </tr>
 {:else}
-  <tr class:created={noSPair(route)} class:modified={noSPair(route) || !routeEqual(route.client, route.server)}>
+  <tr class:created={noSPair(route)} class:modified={!noSPair(route) && !routeEqual(route.client, route.server)}>
-    <td class="code-font">{route.client.src}</td>
+    <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={route.client.dst.length + 2} /></td>
     <td><Flags bind:value={route.client.flags} editable keys={routeKeys} /></td>
     <td><input type="checkbox" bind:checked={route.client.active} /></td>
@@ -34,16 +34,32 @@
 {/if}
 
 <style lang="scss">
+  tr:nth-child(2n) {
+    background-color: #293138;
+  }
+
   tr.created {
     background-color: #1a5100;
+
+    &:nth-child(2n) {
+      background-color: #103300;
+    }
   }
 
   tr.modified {
     background-color: #515100;
+
+    &:nth-child(2n) {
+      background-color: #333300;
+    }
   }
 
   tr.deleted {
     background-color: #510000;
+
+    &:nth-child(2n) {
+      background-color: #330000;
+    }
   }
 
   td input[type="text"] {

src/views/VioletView.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
-  import Flags from "../components/Flags.svelte";
+  import RedirectCreator from "../components/RedirectCreator.svelte";
+  import RouteCreator from "../components/RouteCreator.svelte";
   import RedirectRow from "../components/RedirectRow.svelte";
   import RouteRow from "../components/RouteRow.svelte";
   import {getBearer} from "../stores/login";
   import type {CSPair} from "../types/cspair";
-  import {type Route, type Redirect, redirectEqual, redirectKeys} from "../types/target";
+  import {type Route, type Redirect} from "../types/target";
 
   const apiViolet = import.meta.env.VITE_API_VIOLET;
 
@@ -84,6 +85,16 @@
         {/if}
       {/each}
     </tbody>
+    <tfoot>
+      <RouteCreator
+        on:make={e => {
+          const x = e.detail;
+          routeData[x.src] = {client: x, server: null};
+          routeSrcs.push(x.src);
+          routeSrcs = routeSrcs;
+        }}
+      />
+    </tfoot>
   </table>
 {:catch err}
   <div>{err}</div>
@@ -112,6 +123,16 @@
         {/if}
       {/each}
     </tbody>
+    <tfoot>
+      <RedirectCreator
+        on:make={e => {
+          const x = e.detail;
+          redirectData[x.src] = {client: x, server: null};
+          redirectSrcs.push(x.src);
+          redirectSrcs = redirectSrcs;
+        }}
+      />
+    </tfoot>
   </table>
 {:catch err}
   <div>{err}</div>
@@ -132,9 +153,5 @@
       padding: 11px 8px 11px 8px;
       text-align: center;
     }
-
-    td:nth-child(2n) {
-      background-color: #38444d;
-    }
   }
 </style>

test-server/main.go

@@ -110,16 +110,53 @@ func apiServer(verify mjwt.Verifier) {
 				"flags":  181,
 				"active": true,
 			},
+			{
+				"src":    "b.example.test",
+				"dst":    "127.0.0.1:8081",
+				"flags":  17,
+				"active": true,
+			},
+			{
+				"src":    "c.example.test",
+				"dst":    "127.0.0.1:8082",
+				"flags":  16,
+				"active": true,
+			},
+			{
+				"src":    "d.example.test",
+				"dst":    "127.0.0.1:8083",
+				"flags":  15,
+				"active": true,
+			},
+
 		})
 	}))
 	r.Handle("/v1/violet/redirect", hasPerm(verify, "violet:redirect", func(rw http.ResponseWriter, req *http.Request) {
 		json.NewEncoder(rw).Encode([]map[string]any{
 			{
-				"src":    "b.example.test",
+				"src":    "e.example.test",
-				"dst":    "127.0.0.1:8080",
+				"dst":    "127.0.0.1:8084",
 				"flags":  181,
 				"active": true,
 			},
+			{
+				"src":    "f.example.test",
+				"dst":    "127.0.0.1:8085",
+				"flags":  17,
+				"active": true,
+			},
+			{
+				"src":    "g.example.test",
+				"dst":    "127.0.0.1:8086",
+				"flags":  16,
+				"active": true,
+			},
+			{
+				"src":    "h.example.test",
+				"dst":    "127.0.0.1:8087",
+				"flags":  15,
+				"active": true,
+			},
 		})
 	}))