[ui] use Table on Home view
This commit is contained in:
parent
604292d56d
commit
b02b6d7feb
2 changed files with 11 additions and 41 deletions
|
@ -12,11 +12,12 @@
|
||||||
import Editable from "../utils/Editable.svelte";
|
import Editable from "../utils/Editable.svelte";
|
||||||
import { query } from "../../lib/entity";
|
import { query } from "../../lib/entity";
|
||||||
import { Readable, readable } from "svelte/store";
|
import { Readable, readable } from "svelte/store";
|
||||||
import { defaultEntitySort } from "../../util/sort";
|
import { defaultEntitySort, entityValueSort } from "../../util/sort";
|
||||||
const dispatch = createEventDispatcher();
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
export let columns: string;
|
export let columns: string;
|
||||||
export let header = true;
|
export let header = true;
|
||||||
|
export let orderByValue = false;
|
||||||
|
|
||||||
export let entries: UpEntry[];
|
export let entries: UpEntry[];
|
||||||
export let editable = false;
|
export let editable = false;
|
||||||
|
@ -100,7 +101,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
function sortAttributes() {
|
function sortAttributes() {
|
||||||
sortedAttributes = defaultEntitySort(entries, sortKeys);
|
sortedAttributes = orderByValue
|
||||||
|
? entityValueSort(entries, sortKeys)
|
||||||
|
: defaultEntitySort(entries, sortKeys);
|
||||||
}
|
}
|
||||||
|
|
||||||
$: {
|
$: {
|
||||||
|
|
|
@ -5,6 +5,7 @@
|
||||||
import UpObject from "../components/display/UpObject.svelte";
|
import UpObject from "../components/display/UpObject.svelte";
|
||||||
import UpObjectCard from "../components/display/UpObjectCard.svelte";
|
import UpObjectCard from "../components/display/UpObjectCard.svelte";
|
||||||
import Spinner from "../components/utils/Spinner.svelte";
|
import Spinner from "../components/utils/Spinner.svelte";
|
||||||
|
import Table from "../components/widgets/Table.svelte";
|
||||||
import { query } from "../lib/entity";
|
import { query } from "../lib/entity";
|
||||||
import { vaultInfo } from "../util/info";
|
import { vaultInfo } from "../util/info";
|
||||||
import { updateTitle } from "../util/title";
|
import { updateTitle } from "../util/title";
|
||||||
|
@ -19,18 +20,10 @@
|
||||||
})();
|
})();
|
||||||
|
|
||||||
const { result: lastVisitedQuery } = query(`(matches ? "LAST_VISITED" ? )`);
|
const { result: lastVisitedQuery } = query(`(matches ? "LAST_VISITED" ? )`);
|
||||||
$: lastVisited = ($lastVisitedQuery?.entries || [])
|
$: lastVisited = ($lastVisitedQuery?.entries || []).slice(0, 25);
|
||||||
.filter((e) => e.value.t == "Number")
|
|
||||||
.sort((a, b) => (b.value.c as number) - (a.value.c as number))
|
|
||||||
.map((e) => [e.entity, e.value.c as number])
|
|
||||||
.slice(0, 25) as [string, number][];
|
|
||||||
|
|
||||||
const { result: latestQuery } = query(`(matches ? "ADDED" ?)`);
|
const { result: latestQuery } = query(`(matches ? "ADDED" ?)`);
|
||||||
$: latest = ($latestQuery?.entries || [])
|
$: latest = ($latestQuery?.entries || []).slice(0, 25);
|
||||||
.filter((e) => e.value.t == "Number")
|
|
||||||
.sort((a, b) => (b.value.c as number) - (a.value.c as number))
|
|
||||||
.map((e) => [e.entity, e.value.c as number])
|
|
||||||
.slice(0, 25) as [string, number][];
|
|
||||||
|
|
||||||
updateTitle("Home");
|
updateTitle("Home");
|
||||||
</script>
|
</script>
|
||||||
|
@ -63,16 +56,7 @@
|
||||||
{#if $lastVisitedQuery == undefined}
|
{#if $lastVisitedQuery == undefined}
|
||||||
<Spinner centered />
|
<Spinner centered />
|
||||||
{:else}
|
{:else}
|
||||||
<table>
|
<Table columns="value, entity" entries={lastVisited} orderByValue />
|
||||||
{#each lastVisited as [address, visited]}
|
|
||||||
<tr>
|
|
||||||
<td class="timestamp"
|
|
||||||
>{formatRelative(visited * 1000, new Date())}</td
|
|
||||||
>
|
|
||||||
<td class="object"><UpObject link {address} /></td>
|
|
||||||
</tr>
|
|
||||||
{/each}
|
|
||||||
</table>
|
|
||||||
{/if}
|
{/if}
|
||||||
</section>
|
</section>
|
||||||
{/if}
|
{/if}
|
||||||
|
@ -83,16 +67,7 @@
|
||||||
{#if $latestQuery == undefined}
|
{#if $latestQuery == undefined}
|
||||||
<Spinner centered />
|
<Spinner centered />
|
||||||
{:else}
|
{:else}
|
||||||
<table>
|
<Table columns="value, entity" entries={latest} orderByValue />
|
||||||
{#each latest as [address, added]}
|
|
||||||
<tr>
|
|
||||||
<td class="timestamp"
|
|
||||||
>{formatRelative(added * 1000, new Date())}</td
|
|
||||||
>
|
|
||||||
<td class="object"><UpObject link {address} /></td>
|
|
||||||
</tr>
|
|
||||||
{/each}
|
|
||||||
</table>
|
|
||||||
{/if}
|
{/if}
|
||||||
</section>
|
</section>
|
||||||
{/if}
|
{/if}
|
||||||
|
@ -118,15 +93,7 @@
|
||||||
|
|
||||||
.latest,
|
.latest,
|
||||||
.lastVisited {
|
.lastVisited {
|
||||||
table {
|
margin: 1rem;
|
||||||
border-spacing: 1em 0.25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timestamp {
|
|
||||||
opacity: 0.77;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.roots {
|
.roots {
|
||||||
|
|
Loading…
Reference in a new issue