Rewrite most of this

This commit is contained in:
Melon 2023-10-25 00:04:00 +01:00
parent c9862ccc92
commit 97a2cf089b
Signed by: melon
GPG Key ID: 6C9D970C50D26A25

View File

@ -1,6 +1,6 @@
<script lang="ts">
import Flags from "../components/Flags.svelte";
import {getBearer, loginStore, type LoginStore} from "../stores/login";
import {getBearer} from "../stores/login";
const apiViolet = import.meta.env.VITE_API_VIOLET;
@ -34,19 +34,17 @@
active: boolean;
}
let serverRoutes: Route[];
let serverRedirects: Redirect[];
type CSPair<T> = {client: T; server: T} | CSPairNotC<T> | CSPairNotS<T>;
type CSPairNotC<T> = {client: null; server: T};
type CSPairNotS<T> = {client: T; server: null};
let clientRoutes: Route[];
let clientRedirects: Redirect[];
let routeData: Map<string, CSPair<Route>> = new Map();
let redirectData: Map<string, CSPair<Redirect>> = new Map();
function getServerRoute(src: string) {
return serverRoutes.find(v => v.src === src);
}
let routeSrcs: Set<string> = new Set();
let redirectSrcs: Set<string> = new Set();
function getServerRedirect(src: string) {
return serverRedirects.find(v => v.src === src);
}
$: console.log(routeData);
function routeEqual(a: Route, b: Route): boolean {
return a.src === b.src && a.dst === b.dst && a.flags === b.flags && a.active === b.active;
@ -56,14 +54,12 @@
return a.src === b.src && a.dst === b.dst && a.flags === b.flags && a.active === b.active;
}
function resetRoute(i: number, route: Route) {
clientRoutes[i] = JSON.parse(JSON.stringify(route));
clientRoutes = clientRoutes;
function noCPair<T>(pair: CSPair<T>): pair is CSPairNotC<T> {
return pair.client == null;
}
function resetRedirect(i: number, redirect: Redirect) {
clientRedirects[i] = JSON.parse(JSON.stringify(redirect));
clientRedirects = clientRedirects;
function noSPair<T>(pair: CSPair<T>): pair is CSPairNotS<T> {
return pair.server == null;
}
let promiseForRoutes = new Promise<void>((res, rej) => {
@ -73,8 +69,10 @@
return x.json();
})
.then(x => {
serverRoutes = x as Route[];
clientRoutes = JSON.parse(JSON.stringify(serverRoutes));
let routes = x as Route[];
routes.forEach(x => {
routeData.set(x.src, {client: JSON.parse(JSON.stringify(x)), server: x});
});
res();
})
.catch(x => rej(x));
@ -86,8 +84,10 @@
return x.json();
})
.then(x => {
serverRedirects = x as Redirect[];
clientRedirects = JSON.parse(JSON.stringify(serverRedirects));
let redirects = x as Redirect[];
redirects.forEach(x => {
redirectData.set(x.src, {client: JSON.parse(JSON.stringify(x)), server: x});
});
res();
})
.catch(x => rej(x));
@ -105,21 +105,31 @@
<th>Flags</th>
<th>Active</th>
</tr>
{#each clientRoutes as route, i (route.src)}
{@const serverRoute = getServerRoute(route.src)}
{@const isNew = serverRoute == undefined}
<tr class:created={isNew} class:modified={isNew || !routeEqual(route, serverRoute)}>
<td>{route.src}</td>
<td>{route.dst}</td>
<td><Flags bind:value={route.flags} editable keys={routeKeys} /></td>
<td><input type="checkbox" bind:checked={route.active} /></td>
<td>{route.active}</td>
<td>
{#if !isNew}
<button on:click={() => resetRoute(i, serverRoute)}>Reset</button>
{/if}
</td>
</tr>
{#each routeSrcs as src (src)}
{@const route = routeData.get(src)}
{#if route}
{#if noCPair(route)}
<tr class="deleted">
<td>{route.server.src}</td>
<td>{route.server.dst}</td>
<td><Flags bind:value={route.flags} editable keys={routeKeys} /></td>
<td><input type="checkbox" bind:checked={route.active} /></td>
</tr>
{/if}
{@const isCreated = !route.server}
{@const isDeleted = !route.client}
<tr class:created={isCreated} class:modified={isCreated || !routeEqual(route.client, route.server)} class:deleted={isDeleted}>
<td>{route.client.src}</td>
<td>{route.client.dst}</td>
<td><Flags bind:value={route.flags} editable keys={routeKeys} /></td>
<td><input type="checkbox" bind:checked={route.active} /></td>
<td>
{#if !isCreated}
<button on:click={() => resetRoute(i, serverRoute)}>Reset</button>
{/if}
</td>
</tr>
{/if}
{/each}
</table>
{:catch err}
@ -158,10 +168,13 @@
{/await}
<style lang="scss">
table > tr.created {
background-color: #1a5100;
}
table > tr.modified {
background-color: #515100;
table {
> tr.created {
background-color: #1a5100;
}
> tr.modified {
background-color: #515100;
}
}
</style>