From 97b9bef4674e7bb3b6aead64361d7ed823dde9a2 Mon Sep 17 00:00:00 2001
From: MrMelon54 <github@mrmelon54.com>
Date: Mon, 13 Nov 2023 13:26:45 +0000
Subject: [PATCH] Convert target tables to one generic component

---
 src/components/RedirectRow.svelte     |  44 +++---
 src/components/RouteRow.svelte        |  40 +++--
 src/types/cspair.ts                   |  16 +-
 src/views/RedirectsView.svelte        | 220 ++------------------------
 src/views/RoutesView.svelte           | 218 ++-----------------------
 src/views/TargetManagementView.svelte | 170 ++++++--------------
 6 files changed, 140 insertions(+), 568 deletions(-)

diff --git a/src/components/RedirectRow.svelte b/src/components/RedirectRow.svelte
index 262f4a4..7e2367b 100644
--- a/src/components/RedirectRow.svelte
+++ b/src/components/RedirectRow.svelte
@@ -1,43 +1,49 @@
 <script lang="ts">
-  import {type CSPair, noCPair, noSPair} from "../types/cspair";
+  import type {Writable} from "svelte/store";
+  import {type CSPair, noCPair, noSPair, noPair, yesCPair} from "../types/cspair";
   import {redirectKeys, redirectEqual, type Redirect} from "../types/target";
   import Flags from "./Flags.svelte";
   import RedirectCode from "./RedirectCode.svelte";
 
-  export let value: CSPair<Redirect>;
+  export let value: Writable<CSPair<Redirect>>;
+
+  let item: CSPair<Redirect>;
+  $: item = $value;
 
   function resetRedirect(): any {
-    value.client = JSON.parse(JSON.stringify(value.server));
+    item.client = JSON.parse(JSON.stringify(item.server));
   }
 
   const descCols = 50;
 </script>
 
-{#if noCPair(value)}
+{#if noCPair(item)}
   <tr class="deleted">
-    <td class="code-font"><a href="https://{value.server.src}" target="_blank">{value.server.src}</a></td>
-    <td><input type="text" class="code-font" disabled bind:value={value.server.dst} size={Math.max(20, value.server.dst.length + 2)} /></td>
-    <td><Flags value={value.server.flags} keys={redirectKeys} /></td>
-    <td><RedirectCode bind:code={value.server.code} /></td>
-    <td class="desc"><textarea rows="3" cols={descCols} disabled value={value.server.desc} /></td>
+    <td class="code-font"><a href="https://{item.server.src}" target="_blank">{item.server.src}</a></td>
+    <td><input type="text" class="code-font" disabled bind:value={item.server.dst} size={Math.max(20, item.server.dst.length + 2)} /></td>
+    <td><Flags value={item.server.flags} keys={redirectKeys} /></td>
+    <td><RedirectCode bind:code={item.server.code} /></td>
+    <td class="desc"><textarea rows="3" cols={descCols} disabled value={item.server.desc} /></td>
     <td><input type="checkbox" disabled checked={false} /></td>
     <td><button on:click={() => resetRedirect()}>Restore</button></td>
   </tr>
-{:else}
-  <tr class:created={noSPair(value)} class:modified={!noSPair(value) && !redirectEqual(value.client, value.server)}>
-    <td class="code-font"><a href="https://{value.client.src}" target="_blank">{value.client.src}</a></td>
-    <td><input type="text" class="code-font" bind:value={value.client.dst} size={Math.max(20, value.client.dst.length + 2)} /></td>
-    <td><Flags bind:value={value.client.flags} editable keys={redirectKeys} /></td>
-    <td><RedirectCode bind:code={value.client.code} editable /></td>
-    <td class="desc"><textarea rows="3" cols={descCols} bind:value={value.client.desc} /></td>
-    <td><input type="checkbox" bind:checked={value.client.active} /></td>
+{:else if yesCPair(item)}
+  <tr class:created={noSPair(item)} class:modified={!noSPair(item) && !redirectEqual(item.client, item.server)}>
+    <td class="code-font"><a href="https://{item.client.src}" target="_blank">{item.client.src}</a></td>
+    <td><input type="text" class="code-font" bind:value={item.client.dst} size={Math.max(20, item.client.dst.length + 2)} /></td>
+    <td><Flags bind:value={item.client.flags} editable keys={redirectKeys} /></td>
+    <td><RedirectCode bind:code={item.client.code} editable /></td>
+    <td class="desc"><textarea rows="3" cols={descCols} bind:value={item.client.desc} /></td>
+    <td><input type="checkbox" bind:checked={item.client.active} /></td>
     <td>
-      {#if !noSPair(value)}
+      {#if !noSPair(item)}
         <button on:click={() => resetRedirect()}>Reset</button>
       {/if}
-      <button on:click={() => (value.client = null)}>Delete</button>
+      <button on:click={() => (item.client = null)}>Delete</button>
     </td>
   </tr>
+{:else}
+  <div>Invalid redirect row: please report this error</div>
 {/if}
 
 <style lang="scss">
diff --git a/src/components/RouteRow.svelte b/src/components/RouteRow.svelte
index 4fa31fb..ea1ad92 100644
--- a/src/components/RouteRow.svelte
+++ b/src/components/RouteRow.svelte
@@ -1,40 +1,46 @@
 <script lang="ts">
-  import {type CSPair, noCPair, noSPair} from "../types/cspair";
+  import type {Writable} from "svelte/store";
+  import {type CSPair, noCPair, noSPair, yesCPair} from "../types/cspair";
   import {type Route, routeKeys, routeEqual} from "../types/target";
   import Flags from "./Flags.svelte";
 
-  export let value: CSPair<Route>;
+  export let value: Writable<CSPair<Route>>;
+
+  let item: CSPair<Route>;
+  $: item = $value;
 
   function resetRoute(): any {
-    value.client = JSON.parse(JSON.stringify(value.server));
+    item.client = JSON.parse(JSON.stringify(item.server));
   }
 
   const descCols = 50;
 </script>
 
-{#if noCPair(value)}
+{#if noCPair(item)}
   <tr class="deleted">
-    <td class="code-font"><a href="https://{value.server.src}" target="_blank">{value.server.src}</a></td>
-    <td><input type="text" class="code-font" disabled bind:value={value.server.dst} size={Math.max(20, value.server.dst.length + 2)} /></td>
-    <td><Flags value={value.server.flags} keys={routeKeys} /></td>
-    <td class="desc"><textarea rows="3" cols={descCols} disabled value={value.server.desc} /></td>
+    <td class="code-font"><a href="https://{item.server.src}" target="_blank">{item.server.src}</a></td>
+    <td><input type="text" class="code-font" disabled bind:value={item.server.dst} size={Math.max(20, item.server.dst.length + 2)} /></td>
+    <td><Flags value={item.server.flags} keys={routeKeys} /></td>
+    <td class="desc"><textarea rows="3" cols={descCols} disabled value={item.server.desc} /></td>
     <td><input type="checkbox" disabled checked={false} /></td>
     <td><button on:click={() => resetRoute()}>Restore</button></td>
   </tr>
-{:else}
-  <tr class:created={noSPair(value)} class:modified={!noSPair(value) && !routeEqual(value.client, value.server)}>
-    <td class="code-font"><a href="https://{value.client.src}" target="_blank">{value.client.src}</a></td>
-    <td><input type="text" class="code-font" bind:value={value.client.dst} size={Math.max(20, value.client.dst.length + 2)} /></td>
-    <td><Flags bind:value={value.client.flags} editable keys={routeKeys} /></td>
-    <td class="desc"><textarea rows="3" cols={descCols} bind:value={value.client.desc} /></td>
-    <td><input type="checkbox" bind:checked={value.client.active} /></td>
+{:else if yesCPair(item)}
+  <tr class:created={noSPair(item)} class:modified={!noSPair(item) && !routeEqual(item.client, item.server)}>
+    <td class="code-font"><a href="https://{item.client.src}" target="_blank">{item.client.src}</a></td>
+    <td><input type="text" class="code-font" bind:value={item.client.dst} size={Math.max(20, item.client.dst.length + 2)} /></td>
+    <td><Flags bind:value={item.client.flags} editable keys={routeKeys} /></td>
+    <td class="desc"><textarea rows="3" cols={descCols} bind:value={item.client.desc} /></td>
+    <td><input type="checkbox" bind:checked={item.client.active} /></td>
     <td>
-      {#if !noSPair(value)}
+      {#if !noSPair(item)}
         <button on:click={() => resetRoute()}>Reset</button>
       {/if}
-      <button on:click={() => (value.client = null)}>Delete</button>
+      <button on:click={() => (item.client = null)}>Delete</button>
     </td>
   </tr>
+{:else}
+  <div>Invalid redirect row: please report this error</div>
 {/if}
 
 <style lang="scss">
diff --git a/src/types/cspair.ts b/src/types/cspair.ts
index 264d96d..6430a9e 100644
--- a/src/types/cspair.ts
+++ b/src/types/cspair.ts
@@ -1,11 +1,25 @@
-export type CSPair<T> = {client: T; server: T; p: Promise<void>} | CSPairNotC<T> | CSPairNotS<T>;
+export type CSPair<T> = CSPairYesC<T> | CSPairYesS<T>;
 export type CSPairNotC<T> = {client: null; server: T; p: Promise<void>};
 export type CSPairNotS<T> = {client: T; server: null; p: Promise<void>};
+export type CSPairYesC<T> = {client: T; server: T | null; p: Promise<void>};
+export type CSPairYesS<T> = {client: T | null; server: T; p: Promise<void>};
+
+export function noPair<T>(pair: CSPair<T>): boolean {
+  return pair.client == null || pair.server == null;
+}
 
 export function noCPair<T>(pair: CSPair<T>): pair is CSPairNotC<T> {
   return pair.client == null;
 }
 
+export function yesCPair<T>(pair: CSPair<T>): pair is CSPairYesC<T> {
+  return pair.client != null;
+}
+
 export function noSPair<T>(pair: CSPair<T>): pair is CSPairNotS<T> {
   return pair.server == null;
 }
+
+export function yesSPair<T>(pair: CSPair<T>): pair is CSPairYesS<T> {
+  return pair.server != null;
+}
diff --git a/src/views/RedirectsView.svelte b/src/views/RedirectsView.svelte
index 5b2768e..5a26828 100644
--- a/src/views/RedirectsView.svelte
+++ b/src/views/RedirectsView.svelte
@@ -1,211 +1,23 @@
 <script lang="ts">
   import RedirectCreator from "../components/RedirectCreator.svelte";
   import RedirectRow from "../components/RedirectRow.svelte";
-  import {getBearer} from "../stores/login";
-  import type {CSPair} from "../types/cspair";
-  import {type Redirect, redirectEqual} from "../types/target";
-  import {domainOption} from "../stores/domain-option";
-  import {redirectsTable, type CountStats, tableCountStats} from "../stores/target";
+  import {redirectEqual} from "../types/target";
+  import {redirectsTable} from "../stores/target";
+  import TargetManagementView from "./TargetManagementView.svelte";
 
   const apiViolet = import.meta.env.VITE_API_VIOLET;
-
-  let tableKeys: string[] = [];
-
-  $: tableKeys = Object.entries($redirectsTable)
-    .filter(x => x[1].client != null || x[1].server != null)
-    .map(x => x[0])
-    .filter(x => domainFilter(x, $domainOption))
-    .sort((a, b) => a.localeCompare(b));
-
-  let rowStats: CountStats = {created: 0, modified: 0, removed: 0};
-
-  $: rowStats = tableCountStats($redirectsTable, tableKeys, redirectEqual);
-
-  function domainFilter(src: string, domain: string) {
-    if (domain == "*") return true;
-    let n = src.indexOf("/");
-    if (n == -1) n = src.length;
-    let p = src.slice(0, n);
-    if (p == domain) return true;
-    return p.endsWith(domain);
-  }
-
-  let promiseForTable: Promise<void> = Object.keys($redirectsTable).length === 0 ? reloadTable() : Promise.resolve();
-
-  function reloadTable(): Promise<void> {
-    return new Promise<void>((res, rej) => {
-      fetch(apiViolet + "/redirect", {headers: {Authorization: getBearer()}})
-        .then(x => {
-          if (x.status !== 200) throw new Error("Unexpected status code: " + x.status);
-          return x.json();
-        })
-        .then(x => {
-          let rows = x as Redirect[];
-          let srcs = new Set(Object.keys($redirectsTable));
-          rows.forEach(x => {
-            $redirectsTable[x.src] = {
-              client: !$redirectsTable[x.src] ? JSON.parse(JSON.stringify(x)) : $redirectsTable[x.src]?.client,
-              server: x,
-              p: Promise.resolve(),
-            };
-            srcs.delete(x.src);
-          });
-          srcs.forEach(x => {
-            $redirectsTable[x].server = null;
-          });
-          res();
-        })
-        .catch(x => rej(x));
-    });
-  }
-
-  interface Savable<T> {
-    type: "del" | "ins";
-    v: CSPair<T>;
-  }
-
-  function saveChanges() {
-    let tableProm = tableKeys
-      .map(x => $redirectsTable[x])
-      .filter(x => x.client != null || x.server != null)
-      .filter(x => !redirectEqual(x.client, x.server))
-      .map((x: CSPair<Redirect>): Savable<Redirect> => {
-        if (x.client == null && x.server != null) return {type: "del", v: x};
-        return {type: "ins", v: x};
-      })
-      .sort((a, _) => (a.type === "del" ? -1 : a.type === "ins" ? 1 : 0))
-      .map(x => {
-        x.v.p = fetch(apiViolet + "/redirect", {
-          method: x.type == "del" ? "DELETE" : "POST",
-          headers: {Authorization: getBearer()},
-          body: JSON.stringify(x.type == "del" ? {src: (x.v.server as Redirect).src} : x.v.client),
-        }).then(x => {
-          if (x.status !== 200) throw new Error("Unexpected status code: " + x.status);
-        });
-        return x.v.p;
-      });
-
-    Promise.all(tableProm)
-      .then(_ => reloadTable())
-      .catch(_ => {
-        alert("Some rows failed to save changes");
-      });
-  }
 </script>
 
-<div class="wrapper">
-  <div style="padding:8px;background-color:#bb7900;">
-    Warning: This is currently still under development, however it DOES update the real server redirects
-  </div>
-
-  <div class="scrolling-area">
-    {#await promiseForTable}
-      <div class="text-padding">
-        <div>Loading...</div>
-      </div>
-    {:then}
-      <table>
-        <thead>
-          <tr>
-            <th>Source</th>
-            <th>Destination</th>
-            <th>Flags</th>
-            <th>Code</th>
-            <th>Description</th>
-            <th>Active</th>
-            <th>Option</th>
-          </tr>
-          <RedirectCreator
-            on:make={e => {
-              const x = e.detail;
-              $redirectsTable[x.src] = {client: x, server: $redirectsTable[x.src]?.server, p: Promise.resolve()};
-              tableKeys.push(x.src);
-              tableKeys = tableKeys;
-            }}
-          />
-        </thead>
-        <tbody>
-          {#each tableKeys as src (src)}
-            {#await $redirectsTable[src].p}
-              <tr><td colspan="5">Loading...</td></tr>
-            {:then _}
-              <RedirectRow bind:value={$redirectsTable[src]} />
-            {:catch err}
-              <tr><td colspan="5">Error loading row for {src}: {err}</td></tr>
-            {/await}
-          {/each}
-        </tbody>
-      </table>
-    {:catch err}
-      <div class="text-padding">
-        <div>Administrator... I hardly know her?</div>
-        <div>{err}</div>
-      </div>
-    {/await}
-  </div>
-
-  <div class="footer">
-    <button class="btn-green" on:click={() => saveChanges()}>Save Changes</button>
-    {#if rowStats.created > 0}
-      <div class="meta-info">{rowStats.created} new redirect{rowStats.created > 1 ? "s" : ""}</div>
-    {/if}
-    {#if rowStats.modified > 0}
-      <div class="meta-info">{rowStats.modified} unsaved change{rowStats.modified > 1 ? "s" : ""}</div>
-    {/if}
-    {#if rowStats.removed > 0}
-      <div class="meta-info">{rowStats.removed} removed redirect{rowStats.removed > 1 ? "s" : ""}</div>
-    {/if}
-  </div>
-</div>
-
-<style lang="scss">
-  table {
-    border-collapse: collapse;
-    border-spacing: 0;
-    width: 100%;
-
-    thead {
-      background-color: #333333;
-      position: sticky;
-      top: 0;
-      z-index: 9999;
-      box-shadow: 0 4px 8px #0003, 0 6px 20px #00000030;
-    }
-
-    :global(th),
-    :global(td) {
-      padding: 11px 8px 11px 8px;
-      text-align: center;
-    }
-  }
-
-  .wrapper {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-
-    .scrolling-area {
-      overflow: auto;
-      height: 100%;
-    }
-  }
-
-  .text-padding {
-    padding: 4px 16px;
-  }
-
-  .footer {
-    height: 50px;
-    background-color: #2c2c2c;
-    box-shadow: 0 -4px 8px #0003, 0 -6px 20px #00000030;
-    display: flex;
-    flex-direction: row;
-
-    .meta-info {
-      line-height: 50px;
-      padding-inline: 16px;
-    }
-  }
-</style>
+<TargetManagementView apiUrl="{apiViolet}/redirect" tableData={redirectsTable} equality={redirectEqual}>
+  <svelte:fragment slot="headers">
+    <th>Source</th>
+    <th>Destination</th>
+    <th>Flags</th>
+    <th>Code</th>
+    <th>Description</th>
+    <th>Active</th>
+    <th>Option</th>
+  </svelte:fragment>
+  <RedirectRow slot="row" let:value {value} />
+  <RedirectCreator slot="creator" let:make on:make={e => make(e)} />
+</TargetManagementView>
diff --git a/src/views/RoutesView.svelte b/src/views/RoutesView.svelte
index 2686ed6..a055fc8 100644
--- a/src/views/RoutesView.svelte
+++ b/src/views/RoutesView.svelte
@@ -1,210 +1,22 @@
 <script lang="ts">
   import RouteCreator from "../components/RouteCreator.svelte";
   import RouteRow from "../components/RouteRow.svelte";
-  import {getBearer} from "../stores/login";
-  import type {CSPair} from "../types/cspair";
-  import {type Route, routeEqual} from "../types/target";
-  import {domainOption} from "../stores/domain-option";
-  import {routesTable, type CountStats, tableCountStats} from "../stores/target";
+  import {routeEqual} from "../types/target";
+  import {routesTable} from "../stores/target";
+  import TargetManagementView from "./TargetManagementView.svelte";
 
   const apiViolet = import.meta.env.VITE_API_VIOLET;
-
-  let tableKeys: string[] = [];
-
-  $: tableKeys = Object.entries($routesTable)
-    .filter(x => x[1].client != null || x[1].server != null)
-    .map(x => x[0])
-    .filter(x => domainFilter(x, $domainOption))
-    .sort((a, b) => a.localeCompare(b));
-
-  let rowStats: CountStats = {created: 0, modified: 0, removed: 0};
-
-  $: rowStats = tableCountStats($routesTable, tableKeys, routeEqual);
-
-  function domainFilter(src: string, domain: string) {
-    if (domain == "*") return true;
-    let n = src.indexOf("/");
-    if (n == -1) n = src.length;
-    let p = src.slice(0, n);
-    if (p == domain) return true;
-    return p.endsWith(domain);
-  }
-
-  let promiseForTable: Promise<void> = Object.keys($routesTable).length === 0 ? reloadTable() : Promise.resolve();
-
-  function reloadTable(): Promise<void> {
-    return new Promise<void>((res, rej) => {
-      fetch(apiViolet + "/route", {headers: {Authorization: getBearer()}})
-        .then(x => {
-          if (x.status !== 200) throw new Error("Unexpected status code: " + x.status);
-          return x.json();
-        })
-        .then(x => {
-          let rows = x as Route[];
-          let srcs = new Set(Object.keys($routesTable));
-          rows.forEach(x => {
-            $routesTable[x.src] = {
-              client: !$routesTable[x.src] ? JSON.parse(JSON.stringify(x)) : $routesTable[x.src]?.client,
-              server: x,
-              p: Promise.resolve(),
-            };
-            srcs.delete(x.src);
-          });
-          srcs.forEach(x => {
-            $routesTable[x].server = null;
-          });
-          res();
-        })
-        .catch(x => rej(x));
-    });
-  }
-
-  interface Savable<T> {
-    type: "del" | "ins";
-    v: CSPair<T>;
-  }
-
-  function saveChanges() {
-    let tableProm = tableKeys
-      .map(x => $routesTable[x])
-      .filter(x => x.client != null || x.server != null)
-      .filter(x => !routeEqual(x.client, x.server))
-      .map((x: CSPair<Route>): Savable<Route> => {
-        if (x.client == null && x.server != null) return {type: "del", v: x};
-        return {type: "ins", v: x};
-      })
-      .sort((a, _) => (a.type === "del" ? -1 : a.type === "ins" ? 1 : 0))
-      .map(x => {
-        x.v.p = fetch(apiViolet + "/route", {
-          method: x.type == "del" ? "DELETE" : "POST",
-          headers: {Authorization: getBearer()},
-          body: JSON.stringify(x.type == "del" ? {src: (x.v.server as Route).src} : x.v.client),
-        }).then(x => {
-          if (x.status !== 200) throw new Error("Unexpected status code: " + x.status);
-        });
-        return x.v.p;
-      });
-
-    Promise.all(tableProm)
-      .then(_ => reloadTable())
-      .catch(_ => {
-        alert("Some rows failed to save changes");
-      });
-  }
 </script>
 
-<div class="wrapper">
-  <div style="padding:8px;background-color:#bb7900;">
-    Warning: This is currently still under development, however it DOES update the real server routes
-  </div>
-
-  <div class="scrolling-area">
-    {#await promiseForTable}
-      <div class="text-padding">
-        <div>Loading...</div>
-      </div>
-    {:then}
-      <table>
-        <thead>
-          <tr>
-            <th>Source</th>
-            <th>Destination</th>
-            <th>Flags</th>
-            <th>Description</th>
-            <th>Active</th>
-            <th>Option</th>
-          </tr>
-          <RouteCreator
-            on:make={e => {
-              const x = e.detail;
-              $routesTable[x.src] = {client: x, server: $routesTable[x.src]?.server, p: Promise.resolve()};
-              tableKeys.push(x.src);
-              tableKeys = tableKeys;
-            }}
-          />
-        </thead>
-        <tbody>
-          {#each tableKeys as src (src)}
-            {#await $routesTable[src].p}
-              <tr><td colspan="5">Loading...</td></tr>
-            {:then _}
-              <RouteRow bind:value={$routesTable[src]} />
-            {:catch err}
-              <tr><td colspan="5">Error loading row for {src}: {err}</td></tr>
-            {/await}
-          {/each}
-        </tbody>
-      </table>
-    {:catch err}
-      <div class="text-padding">
-        <div>Administrator... I hardly know her?</div>
-        <div>{err}</div>
-      </div>
-    {/await}
-  </div>
-
-  <div class="footer">
-    <button class="btn-green" on:click={() => saveChanges()}>Save Changes</button>
-    {#if rowStats.created > 0}
-      <div class="meta-info">{rowStats.created} new route{rowStats.created > 1 ? "s" : ""}</div>
-    {/if}
-    {#if rowStats.modified > 0}
-      <div class="meta-info">{rowStats.modified} unsaved change{rowStats.modified > 1 ? "s" : ""}</div>
-    {/if}
-    {#if rowStats.removed > 0}
-      <div class="meta-info">{rowStats.removed} removed route{rowStats.removed > 1 ? "s" : ""}</div>
-    {/if}
-  </div>
-</div>
-
-<style lang="scss">
-  table {
-    border-collapse: collapse;
-    border-spacing: 0;
-    width: 100%;
-
-    thead {
-      background-color: #333333;
-      position: sticky;
-      top: 0;
-      z-index: 9999;
-      box-shadow: 0 4px 8px #0003, 0 6px 20px #00000030;
-    }
-
-    :global(th),
-    :global(td) {
-      padding: 11px 8px 11px 8px;
-      text-align: center;
-    }
-  }
-
-  .wrapper {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-
-    .scrolling-area {
-      overflow: auto;
-      height: 100%;
-    }
-  }
-
-  .text-padding {
-    padding: 4px 16px;
-  }
-
-  .footer {
-    height: 50px;
-    background-color: #2c2c2c;
-    box-shadow: 0 -4px 8px #0003, 0 -6px 20px #00000030;
-    display: flex;
-    flex-direction: row;
-
-    .meta-info {
-      line-height: 50px;
-      padding-inline: 16px;
-    }
-  }
-</style>
+<TargetManagementView apiUrl="{apiViolet}/route" tableData={routesTable} equality={routeEqual}>
+  <svelte:fragment slot="headers">
+    <th>Source</th>
+    <th>Destination</th>
+    <th>Flags</th>
+    <th>Description</th>
+    <th>Active</th>
+    <th>Option</th>
+  </svelte:fragment>
+  <RouteRow slot="row" let:value {value} />
+  <RouteCreator slot="creator" let:make on:make={e => make(e)} />
+</TargetManagementView>
diff --git a/src/views/TargetManagementView.svelte b/src/views/TargetManagementView.svelte
index 26166e9..46ed609 100644
--- a/src/views/TargetManagementView.svelte
+++ b/src/views/TargetManagementView.svelte
@@ -1,31 +1,26 @@
-<script lang="ts">
-<<<<<<< TargetManagement.svelte
-  import RedirectCreator from "../components/RedirectCreator.svelte";
-  import RedirectRow from "../components/RedirectRow.svelte";
-  import {getBearer} from "../stores/login";
-  import type {CSPair} from "../types/cspair";
-  import {type Redirect, redirectEqual} from "../types/target";
-  import {domainOption} from "../stores/domain-option";
-  import {redirectsTable, type CountStats, tableCountStats} from "../stores/target";
-=======
-  import RouteCreator from "../components/RouteCreator.svelte";
-  import RouteRow from "../components/RouteRow.svelte";
-  import {getBearer} from "../stores/login";
-  import type {CSPair} from "../types/cspair";
-  import {type Route, routeEqual} from "../types/target";
-  import {domainOption} from "../stores/domain-option";
-  import {routesTable, type CountStats, tableCountStats} from "../stores/target";
->>>>>>> ../views/RoutesView.svelte
+<script lang="ts" context="module">
+  interface Target {
+    src: string;
+  }
+</script>
 
-  const apiViolet = import.meta.env.VITE_API_VIOLET;
+<script lang="ts">
+  import {writable, type Writable} from "svelte/store";
+
+  import {getBearer} from "../stores/login";
+  import type {CSPair} from "../types/cspair";
+  import {domainOption} from "../stores/domain-option";
+  import {type CountStats, tableCountStats} from "../stores/target";
+
+  type T = $$Generic<Target>;
+
+  export let apiUrl: string;
+  export let tableData: Writable<{[key: string]: CSPair<T>}>;
+  export let equality: (a: T | null, b: T | null) => boolean;
 
   let tableKeys: string[] = [];
 
-<<<<<<< TargetManagement.svelte
-  $: tableKeys = Object.entries($redirectsTable)
-=======
-  $: tableKeys = Object.entries($routesTable)
->>>>>>> ../views/RoutesView.svelte
+  $: tableKeys = Object.entries($tableData)
     .filter(x => x[1].client != null || x[1].server != null)
     .map(x => x[0])
     .filter(x => domainFilter(x, $domainOption))
@@ -33,11 +28,7 @@
 
   let rowStats: CountStats = {created: 0, modified: 0, removed: 0};
 
-<<<<<<< TargetManagement.svelte
-  $: rowStats = tableCountStats($redirectsTable, tableKeys, redirectEqual);
-=======
-  $: rowStats = tableCountStats($routesTable, tableKeys, routeEqual);
->>>>>>> ../views/RoutesView.svelte
+  $: rowStats = tableCountStats($tableData, tableKeys, equality);
 
   function domainFilter(src: string, domain: string) {
     if (domain == "*") return true;
@@ -48,48 +39,28 @@
     return p.endsWith(domain);
   }
 
-<<<<<<< TargetManagement.svelte
-  let promiseForTable: Promise<void> = Object.keys($redirectsTable).length === 0 ? reloadTable() : Promise.resolve();
+  let promiseForTable: Promise<void> = Object.keys($tableData).length === 0 ? reloadTable() : Promise.resolve();
 
   function reloadTable(): Promise<void> {
     return new Promise<void>((res, rej) => {
-      fetch(apiViolet + "/redirect", {headers: {Authorization: getBearer()}})
-=======
-  let promiseForTable: Promise<void> = Object.keys($routesTable).length === 0 ? reloadTable() : Promise.resolve();
-
-  function reloadTable(): Promise<void> {
-    return new Promise<void>((res, rej) => {
-      fetch(apiViolet + "/route", {headers: {Authorization: getBearer()}})
->>>>>>> ../views/RoutesView.svelte
+      fetch(apiUrl, {headers: {Authorization: getBearer()}})
         .then(x => {
           if (x.status !== 200) throw new Error("Unexpected status code: " + x.status);
           return x.json();
         })
         .then(x => {
-<<<<<<< TargetManagement.svelte
-          let rows = x as Redirect[];
-          let srcs = new Set(Object.keys($redirectsTable));
+          let rows = x as T[];
+          let srcs = new Set(Object.keys($tableData));
           rows.forEach(x => {
-            $redirectsTable[x.src] = {
-              client: !$redirectsTable[x.src] ? JSON.parse(JSON.stringify(x)) : $redirectsTable[x.src]?.client,
-=======
-          let rows = x as Route[];
-          let srcs = new Set(Object.keys($routesTable));
-          rows.forEach(x => {
-            $routesTable[x.src] = {
-              client: !$routesTable[x.src] ? JSON.parse(JSON.stringify(x)) : $routesTable[x.src]?.client,
->>>>>>> ../views/RoutesView.svelte
+            $tableData[x.src] = {
+              client: !$tableData[x.src] ? JSON.parse(JSON.stringify(x)) : $tableData[x.src]?.client,
               server: x,
               p: Promise.resolve(),
             };
             srcs.delete(x.src);
           });
           srcs.forEach(x => {
-<<<<<<< TargetManagement.svelte
-            $redirectsTable[x].server = null;
-=======
-            $routesTable[x].server = null;
->>>>>>> ../views/RoutesView.svelte
+            $tableData[x].server = null;
           });
           res();
         })
@@ -104,33 +75,19 @@
 
   function saveChanges() {
     let tableProm = tableKeys
-<<<<<<< TargetManagement.svelte
-      .map(x => $redirectsTable[x])
+      .map(x => $tableData[x])
       .filter(x => x.client != null || x.server != null)
-      .filter(x => !redirectEqual(x.client, x.server))
-      .map((x: CSPair<Redirect>): Savable<Redirect> => {
-=======
-      .map(x => $routesTable[x])
-      .filter(x => x.client != null || x.server != null)
-      .filter(x => !routeEqual(x.client, x.server))
-      .map((x: CSPair<Route>): Savable<Route> => {
->>>>>>> ../views/RoutesView.svelte
+      .filter(x => !equality(x.client, x.server))
+      .map((x: CSPair<T>): Savable<T> => {
         if (x.client == null && x.server != null) return {type: "del", v: x};
         return {type: "ins", v: x};
       })
       .sort((a, _) => (a.type === "del" ? -1 : a.type === "ins" ? 1 : 0))
       .map(x => {
-<<<<<<< TargetManagement.svelte
-        x.v.p = fetch(apiViolet + "/redirect", {
+        x.v.p = fetch(apiUrl, {
           method: x.type == "del" ? "DELETE" : "POST",
           headers: {Authorization: getBearer()},
-          body: JSON.stringify(x.type == "del" ? {src: (x.v.server as Redirect).src} : x.v.client),
-=======
-        x.v.p = fetch(apiViolet + "/route", {
-          method: x.type == "del" ? "DELETE" : "POST",
-          headers: {Authorization: getBearer()},
-          body: JSON.stringify(x.type == "del" ? {src: (x.v.server as Route).src} : x.v.client),
->>>>>>> ../views/RoutesView.svelte
+          body: JSON.stringify(x.type == "del" ? {src: (x.v.server as T).src} : x.v.client),
         }).then(x => {
           if (x.status !== 200) throw new Error("Unexpected status code: " + x.status);
         });
@@ -143,15 +100,18 @@
         alert("Some rows failed to save changes");
       });
   }
+
+  export function make(e: CustomEvent<T>) {
+    const x = e.detail as unknown as T;
+    $tableData[x.src] = {client: x, server: $tableData[x.src]?.server, p: Promise.resolve()};
+    tableKeys.push(x.src);
+    tableKeys = tableKeys;
+  }
 </script>
 
 <div class="wrapper">
   <div style="padding:8px;background-color:#bb7900;">
-<<<<<<< TargetManagement.svelte
-    Warning: This is currently still under development, however it DOES update the real server redirects
-=======
-    Warning: This is currently still under development, however it DOES update the real server routes
->>>>>>> ../views/RoutesView.svelte
+    Warning: This is currently still under development, however it DOES send updates to the real server
   </div>
 
   <div class="scrolling-area">
@@ -163,46 +123,16 @@
       <table>
         <thead>
           <tr>
-            <th>Source</th>
-            <th>Destination</th>
-            <th>Flags</th>
-<<<<<<< TargetManagement.svelte
-            <th>Code</th>
-=======
->>>>>>> ../views/RoutesView.svelte
-            <th>Description</th>
-            <th>Active</th>
-            <th>Option</th>
+            <slot name="headers" />
           </tr>
-<<<<<<< TargetManagement.svelte
-          <RedirectCreator
-            on:make={e => {
-              const x = e.detail;
-              $redirectsTable[x.src] = {client: x, server: $redirectsTable[x.src]?.server, p: Promise.resolve()};
-=======
-          <RouteCreator
-            on:make={e => {
-              const x = e.detail;
-              $routesTable[x.src] = {client: x, server: $routesTable[x.src]?.server, p: Promise.resolve()};
->>>>>>> ../views/RoutesView.svelte
-              tableKeys.push(x.src);
-              tableKeys = tableKeys;
-            }}
-          />
+          <slot name="creator" {make} />
         </thead>
         <tbody>
           {#each tableKeys as src (src)}
-<<<<<<< TargetManagement.svelte
-            {#await $redirectsTable[src].p}
+            {#await $tableData[src].p}
               <tr><td colspan="5">Loading...</td></tr>
             {:then _}
-              <RedirectRow bind:value={$redirectsTable[src]} />
-=======
-            {#await $routesTable[src].p}
-              <tr><td colspan="5">Loading...</td></tr>
-            {:then _}
-              <RouteRow bind:value={$routesTable[src]} />
->>>>>>> ../views/RoutesView.svelte
+              <slot name="row" value={writable($tableData[src])} />
             {:catch err}
               <tr><td colspan="5">Error loading row for {src}: {err}</td></tr>
             {/await}
@@ -220,21 +150,13 @@
   <div class="footer">
     <button class="btn-green" on:click={() => saveChanges()}>Save Changes</button>
     {#if rowStats.created > 0}
-<<<<<<< TargetManagement.svelte
-      <div class="meta-info">{rowStats.created} new redirect{rowStats.created > 1 ? "s" : ""}</div>
-=======
-      <div class="meta-info">{rowStats.created} new route{rowStats.created > 1 ? "s" : ""}</div>
->>>>>>> ../views/RoutesView.svelte
+      <div class="meta-info">{rowStats.created} new row{rowStats.created > 1 ? "s" : ""}</div>
     {/if}
     {#if rowStats.modified > 0}
       <div class="meta-info">{rowStats.modified} unsaved change{rowStats.modified > 1 ? "s" : ""}</div>
     {/if}
     {#if rowStats.removed > 0}
-<<<<<<< TargetManagement.svelte
-      <div class="meta-info">{rowStats.removed} removed redirect{rowStats.removed > 1 ? "s" : ""}</div>
-=======
-      <div class="meta-info">{rowStats.removed} removed route{rowStats.removed > 1 ? "s" : ""}</div>
->>>>>>> ../views/RoutesView.svelte
+      <div class="meta-info">{rowStats.removed} removed row{rowStats.removed > 1 ? "s" : ""}</div>
     {/if}
   </div>
 </div>