Add a save changes button

This commit is contained in:
Melon 2023-10-29 00:48:03 +01:00
parent e4c2563811
commit 6aa8c8612d
Signed by: melon
GPG Key ID: 6C9D970C50D26A25
4 changed files with 109 additions and 35 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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;
}

View File

@ -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;
}}