Add route and redirect creators

This commit is contained in:
Melon 2023-10-25 20:02:48 +01:00
parent 944af0d8d9
commit 8e27eea6b0
Signed by: melon
GPG Key ID: 6C9D970C50D26A25
6 changed files with 134 additions and 14 deletions

View File

@ -0,0 +1,25 @@
<script lang="ts">
import {createEventDispatcher} from "svelte";
import {redirectKeys, type Redirect} from "../types/target";
import Flags from "./Flags.svelte";
const dispatch = createEventDispatcher();
let redirect: Redirect = {src: "", dst: "", flags: 0, active: true};
</script>
<tr class="created">
<td><input type="text" class="code-font" bind:value={redirect.src} size={redirect.src.length + 2} /></td>
<td><input type="text" class="code-font" bind:value={redirect.dst} size={redirect.dst.length + 2} /></td>
<td><Flags value={redirect.flags} editable keys={redirectKeys} /></td>
<td><input type="checkbox" bind:checked={redirect.active} /></td>
<td>
<button
on:click={() => {
dispatch("make", redirect);
redirect = {src: "", dst: "", flags: 0, active: true};
}}
>
Create
</button>
</td>
</tr>

View File

@ -12,15 +12,15 @@
{#if noCPair(redirect)}
<tr class="deleted">
<td class="code-font">{redirect.server.src}</td>
<td class="code-font"><a href="https://{redirect.server.src}" target="_blank">{redirect.server.src}</a></td>
<td><input type="text" class="code-font" disabled bind:value={redirect.server.dst} size={redirect.server.dst.length + 2} /></td>
<td><Flags value={redirect.server.flags} keys={redirectKeys} /></td>
<td><input type="checkbox" disabled checked={false} /></td>
<td><button on:click={() => resetRedirect()}>Restore</button></td>
</tr>
{:else}
<tr class:created={noSPair(redirect)} class:modified={noSPair(redirect) || !redirectEqual(redirect.client, redirect.server)}>
<td class="code-font">{redirect.client.src}</td>
<tr class:created={noSPair(redirect)} class:modified={!noSPair(redirect) && !redirectEqual(redirect.client, redirect.server)}>
<td class="code-font"><a href="https://{redirect.client.src}" target="_blank">{redirect.client.src}</a></td>
<td><input type="text" class="code-font" bind:value={redirect.client.dst} size={redirect.client.dst.length + 2} /></td>
<td><Flags bind:value={redirect.client.flags} editable keys={redirectKeys} /></td>
<td><input type="checkbox" bind:checked={redirect.client.active} /></td>

View File

@ -0,0 +1,25 @@
<script lang="ts">
import {createEventDispatcher} from "svelte";
import {routeKeys, type Route} from "../types/target";
import Flags from "./Flags.svelte";
const dispatch = createEventDispatcher();
let route: Route = {src: "", dst: "", flags: 0, active: true};
</script>
<tr class="created">
<td><input type="text" class="code-font" bind:value={route.src} size={route.src.length + 2} /></td>
<td><input type="text" class="code-font" bind:value={route.dst} size={route.dst.length + 2} /></td>
<td><Flags value={route.flags} editable keys={routeKeys} /></td>
<td><input type="checkbox" bind:checked={route.active} /></td>
<td>
<button
on:click={() => {
dispatch("make", route);
route = {src: "", dst: "", flags: 0, active: true};
}}
>
Create
</button>
</td>
</tr>

View File

@ -12,15 +12,15 @@
{#if noCPair(route)}
<tr class="deleted">
<td class="code-font">{route.server.src}</td>
<td class="code-font"><a href="https://{route.server.src}" target="_blank">{route.server.src}</a></td>
<td><input type="text" class="code-font" disabled bind:value={route.server.dst} size={route.server.dst.length + 2} /></td>
<td><Flags value={route.server.flags} keys={routeKeys} /></td>
<td><input type="checkbox" disabled checked={false} /></td>
<td><button on:click={() => resetRoute()}>Restore</button></td>
</tr>
{:else}
<tr class:created={noSPair(route)} class:modified={noSPair(route) || !routeEqual(route.client, route.server)}>
<td class="code-font">{route.client.src}</td>
<tr class:created={noSPair(route)} class:modified={!noSPair(route) && !routeEqual(route.client, route.server)}>
<td class="code-font"><a href="https://{route.client.src}" target="_blank">{route.client.src}</a></td>
<td><input type="text" class="code-font" bind:value={route.client.dst} size={route.client.dst.length + 2} /></td>
<td><Flags bind:value={route.client.flags} editable keys={routeKeys} /></td>
<td><input type="checkbox" bind:checked={route.client.active} /></td>
@ -34,16 +34,32 @@
{/if}
<style lang="scss">
tr:nth-child(2n) {
background-color: #293138;
}
tr.created {
background-color: #1a5100;
&:nth-child(2n) {
background-color: #103300;
}
}
tr.modified {
background-color: #515100;
&:nth-child(2n) {
background-color: #333300;
}
}
tr.deleted {
background-color: #510000;
&:nth-child(2n) {
background-color: #330000;
}
}
td input[type="text"] {

View File

@ -1,10 +1,11 @@
<script lang="ts">
import Flags from "../components/Flags.svelte";
import RedirectCreator from "../components/RedirectCreator.svelte";
import RouteCreator from "../components/RouteCreator.svelte";
import RedirectRow from "../components/RedirectRow.svelte";
import RouteRow from "../components/RouteRow.svelte";
import {getBearer} from "../stores/login";
import type {CSPair} from "../types/cspair";
import {type Route, type Redirect, redirectEqual, redirectKeys} from "../types/target";
import {type Route, type Redirect} from "../types/target";
const apiViolet = import.meta.env.VITE_API_VIOLET;
@ -84,6 +85,16 @@
{/if}
{/each}
</tbody>
<tfoot>
<RouteCreator
on:make={e => {
const x = e.detail;
routeData[x.src] = {client: x, server: null};
routeSrcs.push(x.src);
routeSrcs = routeSrcs;
}}
/>
</tfoot>
</table>
{:catch err}
<div>{err}</div>
@ -112,6 +123,16 @@
{/if}
{/each}
</tbody>
<tfoot>
<RedirectCreator
on:make={e => {
const x = e.detail;
redirectData[x.src] = {client: x, server: null};
redirectSrcs.push(x.src);
redirectSrcs = redirectSrcs;
}}
/>
</tfoot>
</table>
{:catch err}
<div>{err}</div>
@ -132,9 +153,5 @@
padding: 11px 8px 11px 8px;
text-align: center;
}
td:nth-child(2n) {
background-color: #38444d;
}
}
</style>

View File

@ -110,16 +110,53 @@ func apiServer(verify mjwt.Verifier) {
"flags": 181,
"active": true,
},
{
"src": "b.example.test",
"dst": "127.0.0.1:8081",
"flags": 17,
"active": true,
},
{
"src": "c.example.test",
"dst": "127.0.0.1:8082",
"flags": 16,
"active": true,
},
{
"src": "d.example.test",
"dst": "127.0.0.1:8083",
"flags": 15,
"active": true,
},
})
}))
r.Handle("/v1/violet/redirect", hasPerm(verify, "violet:redirect", func(rw http.ResponseWriter, req *http.Request) {
json.NewEncoder(rw).Encode([]map[string]any{
{
"src": "b.example.test",
"dst": "127.0.0.1:8080",
"src": "e.example.test",
"dst": "127.0.0.1:8084",
"flags": 181,
"active": true,
},
{
"src": "f.example.test",
"dst": "127.0.0.1:8085",
"flags": 17,
"active": true,
},
{
"src": "g.example.test",
"dst": "127.0.0.1:8086",
"flags": 16,
"active": true,
},
{
"src": "h.example.test",
"dst": "127.0.0.1:8087",
"flags": 15,
"active": true,
},
})
}))