Add created, modified and removed counts for routes and redirects

This commit is contained in:
Melon 2023-11-12 20:28:56 +00:00
parent 2ca7a47853
commit 91ed75f970
Signed by: melon
GPG Key ID: 6C9D970C50D26A25
3 changed files with 67 additions and 15 deletions

View File

@ -4,3 +4,29 @@ import type {Redirect, Route} from "../types/target";
export const routesTable = writable<{[key: string]: CSPair<Route>}>({});
export const redirectsTable = writable<{[key: string]: CSPair<Redirect>}>({});
export interface Pair<A, B> {
a: A;
b: B;
}
function getTableArray<T>(table: {[key: string]: CSPair<T>}, keys: Array<string>): Array<Pair<string, CSPair<T>>> {
return keys.map(x => ({a: x, b: table[x]}));
}
export interface CountStats {
created: number;
modified: number;
removed: number;
}
export function tableCountStats<T>(table: {[key: string]: CSPair<T>}, keys: Array<string>, equality: (a: T, b: T) => boolean): CountStats {
let list = getTableArray(table, keys)
.map(x => x.b)
.filter(x => x.client != null || x.server != null);
return {
created: list.filter(x => x.server == null).length,
modified: list.filter(x => x.server != null && x.client != null && !equality(x.client, x.server)).length,
removed: list.filter(x => x.client == null).length,
};
}

View File

@ -5,7 +5,7 @@
import type {CSPair} from "../types/cspair";
import {type Redirect, redirectEqual} from "../types/target";
import {domainOption} from "../stores/domain-option";
import {redirectsTable} from "../stores/target";
import {redirectsTable, type CountStats, tableCountStats} from "../stores/target";
const apiViolet = import.meta.env.VITE_API_VIOLET;
@ -17,6 +17,10 @@
.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("/");
@ -141,7 +145,16 @@
</div>
<div class="footer">
<button on:click={() => saveChanges()}>Save Changes</button>
<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>
@ -187,19 +200,12 @@
height: 50px;
background-color: #2c2c2c;
box-shadow: 0 -4px 8px #0003, 0 -6px 20px #00000030;
display: flex;
flex-direction: row;
button {
background-color: #04aa6d;
border: none;
box-shadow: none;
box-sizing: border-box;
color: black;
cursor: pointer;
font-size: 20px;
font-weight: 700;
line-height: 24px;
height: 50px;
padding: 4px 16px;
.meta-info {
line-height: 50px;
padding-inline: 16px;
}
}
</style>

View File

@ -5,7 +5,7 @@
import type {CSPair} from "../types/cspair";
import {type Route, routeEqual} from "../types/target";
import {domainOption} from "../stores/domain-option";
import {routesTable} from "../stores/target";
import {routesTable, type CountStats, tableCountStats} from "../stores/target";
const apiViolet = import.meta.env.VITE_API_VIOLET;
@ -17,6 +17,10 @@
.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("/");
@ -141,6 +145,15 @@
<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>
@ -186,5 +199,12 @@
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>