Add create route and redirect buttons

src/components/RouteRow.svelte

@@ -4,7 +4,7 @@
   import type {RestItem} from "../utils/rest-table";
   import ActionMenu from "./ActionMenu.svelte";
   import ActionPopup from "./ActionPopup.svelte";
-
+  
   export let value: RestItem<Route>;
   let editItem: Route = {
     src: "",
@@ -37,7 +37,7 @@
 
     <ActionPopup name="Edit Route" bind:show={editPopup} on:save={save}>
       <div>Source</div>
-      <div><input type="text" class="code-font" bind:value={editItem.src} size={Math.max(20, value.data.dst.length + 2)} /></div>
+      <div class="code-font">{editItem.src}</div>
       <div>Destination</div>
       <div><input type="text" class="code-font" bind:value={editItem.dst} size={Math.max(20, editItem.dst.length + 2)} /></div>
       <div>Flags</div>

src/utils/rest-table.ts

@@ -56,7 +56,7 @@ export class RestTable<T extends object> implements IPromiseLike<RestTable<T>> {
 
   addItem(item: T) {
     (async () => {
-      let f = await LOGIN.clientRequest(this.apiUrl, {method: "POST"});
+      let f = await LOGIN.clientRequest(this.apiUrl, {method: "POST", body: JSON.stringify(item)});
       if (f.status !== 200) throw new Error("Unexpected status code: " + f.status);
       this.rows.push(new RestItem(this, item));
       this.updateSubs();

src/views/RedirectsView.svelte

@@ -1,11 +1,46 @@
 <script lang="ts">
+  import ActionPopup from "../components/ActionPopup.svelte";
+  import Flags from "../components/Flags.svelte";
+  import RedirectCode from "../components/RedirectCode.svelte";
   import RedirectRow from "../components/RedirectRow.svelte";
+  import {redirectKeys, type Redirect} from "../types/target";
   import TargetManagementView from "./TargetManagementView.svelte";
 
   const apiViolet = import.meta.env.VITE_API_VIOLET;
+
+  let targetManagement: TargetManagementView<Redirect>;
+  let createItem: Redirect = {
+    src: "",
+    dst: "",
+    flags: 0,
+    code: 0,
+    active: false,
+  };
+
+  let createPopup: boolean = false;
+
+  function createRedirect() {
+    targetManagement.createItem(createItem);
+  }
 </script>
 
-<h1>Redirects</h1>
+<div class="row">
+  <h1>Redirects</h1>
+  <button class="create-button" on:click={() => (createPopup = true)}>Create Redirect</button>
+
+  <ActionPopup name="Edit Redirect" bind:show={createPopup} on:save={createRedirect}>
+    <div>Source</div>
+    <div><input type="text" class="code-font" bind:value={createItem.src} size={Math.max(20, createItem.src.length + 2)} /></div>
+    <div>Destination</div>
+    <div><input type="text" class="code-font" bind:value={createItem.dst} size={Math.max(20, createItem.dst.length + 2)} /></div>
+    <div>Flags</div>
+    <div><Flags bind:value={createItem.flags} editable keys={redirectKeys} /></div>
+    <div>Redirect Code</div>
+    <div><RedirectCode bind:code={createItem.code} editable /></div>
+    <div>Active</div>
+    <div><input type="checkbox" bind:checked={createItem.active} /></div>
+  </ActionPopup>
+</div>
 
 <TargetManagementView apiUrl="{apiViolet}/redirect">
   <svelte:fragment slot="headers">
@@ -18,3 +53,18 @@
   </svelte:fragment>
   <RedirectRow slot="row" let:value {value} />
 </TargetManagementView>
+
+<style lang="scss">
+  @import "../values.scss";
+
+  .row {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .create-button {
+    @include button-green-box;
+  }
+</style>

src/views/RoutesView.svelte

@@ -1,13 +1,43 @@
 <script lang="ts">
+  import ActionPopup from "../components/ActionPopup.svelte";
   import RouteRow from "../components/RouteRow.svelte";
   import TargetManagementView from "./TargetManagementView.svelte";
+  import {routeKeys, type Route} from "../types/target";
+  import Flags from "../components/Flags.svelte";
 
   const apiViolet = import.meta.env.VITE_API_VIOLET;
+
+  let targetManagement: TargetManagementView<Route>;
+  let createItem: Route = {
+    src: "",
+    dst: "",
+    flags: 0,
+    active: false,
+  };
+  let createPopup: boolean = false;
+
+  function createRoute() {
+    targetManagement.createItem(createItem);
+  }
 </script>
 
-<h1>Routes</h1>
+<div class="row">
+  <h1>Routes</h1>
+  <button class="create-button" on:click={() => (createPopup = true)}>Create Route</button>
 
-<TargetManagementView apiUrl="{apiViolet}/route">
+  <ActionPopup name="Create Route" bind:show={createPopup} on:save={createRoute}>
+    <div>Source</div>
+    <div><input type="text" class="code-font" bind:value={createItem.src} size={Math.max(20, createItem.src.length + 2)} /></div>
+    <div>Destination</div>
+    <div><input type="text" class="code-font" bind:value={createItem.dst} size={Math.max(20, createItem.dst.length + 2)} /></div>
+    <div>Flags</div>
+    <div><Flags bind:value={createItem.flags} editable keys={routeKeys} /></div>
+    <div>Active</div>
+    <div><input type="checkbox" bind:checked={createItem.active} /></div>
+  </ActionPopup>
+</div>
+
+<TargetManagementView apiUrl="{apiViolet}/route" bind:this={targetManagement}>
   <svelte:fragment slot="headers">
     <th>Source</th>
     <th>Destination</th>
@@ -17,3 +47,18 @@
   </svelte:fragment>
   <RouteRow slot="row" let:value {value} />
 </TargetManagementView>
+
+<style lang="scss">
+  @import "../values.scss";
+
+  .row {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .create-button {
+    @include button-green-box;
+  }
+</style>

src/views/TargetManagementView.svelte

@@ -18,6 +18,10 @@
 
   let table = new TargetTable<T>(apiUrl, (item: T) => "");
 
+  export function createItem(t: T) {
+    table.addItem(t);
+  }
+
   function rowOrdering(rows: RestItem<T>[], domain: string): RestItem<T>[] {
     return rows.filter(x => domainFilter(x.data, domain)).sort((a, b) => trimWildcards(a.data.src).localeCompare(trimWildcards(b.data.src)));
   }