Add a save changes button

src/components/RedirectCreator.svelte

@@ -12,7 +12,7 @@
 <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><Flags bind: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>
@@ -31,4 +31,8 @@
   tr:nth-child(2n) {
     background-color: #2a2a2a;
   }
+
+  .desc textarea {
+    resize: none;
+  }
 </style>

src/components/RouteCreator.svelte

@@ -12,7 +12,7 @@
 <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><Flags bind: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>
@@ -31,4 +31,8 @@
   tr:nth-child(2n) {
     background-color: #2a2a2a;
   }
+
+  .desc textarea {
+    resize: none;
+  }
 </style>

src/types/target.ts

@@ -14,13 +14,13 @@ export interface Redirect {
   active: boolean;
 }
 
-export function routeEqual(a: Route, b: Route): boolean {
-  if (b == null) return false;
+export function routeEqual(a: Route | null, b: Route | null): boolean {
+  if (a == null || b == null) return false;
   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;
+export function redirectEqual(a: Redirect | null, b: Redirect | null): boolean {
+  if (a == null || b == null) return false;
   return a.src === b.src && a.dst === b.dst && a.desc === b.desc && a.flags === b.flags && a.active === b.active;
 }
 

src/views/VioletView.svelte

@@ -5,7 +5,7 @@
   import RouteRow from "../components/RouteRow.svelte";
   import {getBearer, loginStore, parseJwt, type LoginStore} from "../stores/login";
   import type {CSPair} from "../types/cspair";
-  import {type Route, type Redirect} from "../types/target";
+  import {type Route, type Redirect, routeEqual, redirectEqual} from "../types/target";
   import {domainOption} from "../stores/domain-option";
 
   const apiViolet = import.meta.env.VITE_API_VIOLET;
@@ -36,42 +36,108 @@
     return p.endsWith(domain);
   }
 
-  let promiseForRoutes = 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();
+  let promiseForRoutes: Promise<void>;
+  let promiseForRedirects: Promise<void>;
+
+  reloadRoutes();
+  reloadRedirects();
+
+  function reloadRoutes() {
+    promiseForRoutes = 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 routes = x as Route[];
+          routes.forEach(x => {
+            routeData[x.src] = {client: JSON.parse(JSON.stringify(x)), server: x};
+          });
+          res();
+        })
+        .catch(x => rej(x));
+    });
+  }
+
+  function reloadRedirects() {
+    promiseForRedirects = 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 redirects = x as Redirect[];
+          redirects.forEach(x => {
+            redirectData[x.src] = {client: JSON.parse(JSON.stringify(x)), server: x};
+          });
+          res();
+        })
+        .catch(x => rej(x));
+    });
+  }
+
+  interface Savable<T> {
+    type: "del" | "ins";
+    v: T;
+    p?: Promise<void>;
+  }
+
+  function saveChanges() {
+    let routePromises = routeSrcs
+      .map(x => routeData[x])
+      .filter(x => x.client != null || x.server != null)
+      .filter(x => !routeEqual(x.client, x.server))
+      .map((x: CSPair<Route>): Savable<CSPair<Route>> => {
+        if (x.client == null && x.server != null) return {type: "del", v: x};
+        return {type: "ins", v: x};
       })
-      .then(x => {
-        let routes = x as Route[];
-        routes.forEach(x => {
-          routeData[x.src] = {client: JSON.parse(JSON.stringify(x)), server: x};
+      .sort((a, _) => (a.type === "del" ? -1 : a.type === "ins" ? 1 : 0))
+      .map(x => {
+        x.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);
         });
-        res();
+      });
+
+    let redirectPromises = redirectSrcs
+      .map(x => redirectData[x])
+      .filter(x => x.client != null || x.server != null)
+      .filter(x => !redirectEqual(x.client, x.server))
+      .map((x: CSPair<Redirect>): Savable<CSPair<Redirect>> => {
+        if (x.client == null && x.server != null) return {type: "del", v: x};
+        return {type: "ins", v: x};
       })
-      .catch(x => rej(x));
-  });
-  let promiseForRedirects = 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 redirects = x as Redirect[];
-        redirects.forEach(x => {
-          redirectData[x.src] = {client: JSON.parse(JSON.stringify(x)), server: x};
+      .sort((a, _) => (a.type === "del" ? -1 : a.type === "ins" ? 1 : 0))
+      .map(x => {
+        x.p = fetch(apiViolet + "/route", {
+          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);
         });
-        res();
-      })
-      .catch(x => rej(x));
-  });
+      });
+
+    Promise.all(routePromises).then(_ => {
+      reloadRoutes();
+    });
+    Promise.all(redirectPromises).then(_ => {
+      reloadRedirects();
+    });
+  }
 </script>
 
 <div style="padding:8px;background-color:#bb7900;">
   Warning: This is currently still under development and does not update the routes and redirects on the server
 </div>
 
+<button on:click={() => saveChanges()}>Save Changes</button>
+
 <h2>Routes</h2>
 {#await promiseForRoutes}
   <div>Loading...</div>
@@ -99,7 +165,7 @@
       <RouteCreator
         on:make={e => {
           const x = e.detail;
-          routeData[x.src] = {client: x, server: null};
+          routeData[x.src] = {client: x, server: routeData[x.src]?.server};
           routeSrcs.push(x.src);
           routeSrcs = routeSrcs;
         }}
@@ -137,7 +203,7 @@
       <RedirectCreator
         on:make={e => {
           const x = e.detail;
-          redirectData[x.src] = {client: x, server: null};
+          redirectData[x.src] = {client: x, server: redirectData[x.src]?.server};
           redirectSrcs.push(x.src);
           redirectSrcs = redirectSrcs;
         }}