[ui] add a last visited view
parent
6bb3fe1788
commit
41f929d352
|
@ -1,11 +1,14 @@
|
|||
<script lang="ts">
|
||||
import { formatRelative, parseISO } from "date-fns";
|
||||
import { last } from "lodash";
|
||||
|
||||
import { Link } from "svelte-navigator";
|
||||
import { UpListing } from "upend";
|
||||
import type { IFile, ListingResult, VaultInfo } from "upend/types";
|
||||
import UpObjectCard from "../components/display/UpObjectCard.svelte";
|
||||
import Spinner from "../components/utils/Spinner.svelte";
|
||||
import UpObject from "../components/display/UpObject.svelte";
|
||||
import UpObjectCard from "../components/display/UpObjectCard.svelte";
|
||||
import Spinner from "../components/utils/Spinner.svelte";
|
||||
import { query } from "../lib/entity";
|
||||
|
||||
let infoData: VaultInfo | undefined;
|
||||
|
||||
|
@ -22,9 +25,19 @@ import Spinner from "../components/utils/Spinner.svelte";
|
|||
);
|
||||
})();
|
||||
|
||||
const { result: lastVisitedQuery } = query(
|
||||
() => `(matches ? "LAST_VISITED" ? )`
|
||||
);
|
||||
$: lastVisited = ($lastVisitedQuery?.entries || [])
|
||||
.filter((e) => e.value.t == "Number")
|
||||
.sort((a, b) => (a.value.c as number) - (b.value.c as number))
|
||||
.map((e) => [e.entity, e.value.c as number])
|
||||
.slice(0, 25) as [string, number][];
|
||||
|
||||
const latestFiles = (async () => {
|
||||
const response = await fetch("/api/files/latest");
|
||||
return (await response.json()) as IFile[];
|
||||
const files = (await response.json()) as IFile[];
|
||||
return files.slice(0, 25);
|
||||
})();
|
||||
|
||||
function fmtDate(dateString: string) {
|
||||
|
@ -55,6 +68,20 @@ import Spinner from "../components/utils/Spinner.svelte";
|
|||
{/await}
|
||||
</section>
|
||||
|
||||
{#if lastVisited.length > 0}
|
||||
<section class="lastVisited">
|
||||
<h2>Last visited</h2>
|
||||
<table>
|
||||
{#each lastVisited as [address, visited]}
|
||||
<tr>
|
||||
<td class="timestamp">{formatRelative(visited, new Date())}</td>
|
||||
<td class="object"><UpObject link {address} /></td>
|
||||
</tr>
|
||||
{/each}
|
||||
</table>
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
<section class="latest">
|
||||
<h2>Most recently added files</h2>
|
||||
{#await latestFiles}
|
||||
|
@ -63,7 +90,7 @@ import Spinner from "../components/utils/Spinner.svelte";
|
|||
<table>
|
||||
{#each data as file}
|
||||
<tr>
|
||||
<td class="file-added">{fmtDate(file.added)}</td>
|
||||
<td class="timestamp">{fmtDate(file.added)}</td>
|
||||
<td>
|
||||
<Link to="/browse/{file.hash}">
|
||||
<div class="file-path">{file.path}</div>
|
||||
|
@ -82,18 +109,20 @@ import Spinner from "../components/utils/Spinner.svelte";
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.latest {
|
||||
.latest,
|
||||
.lastVisited {
|
||||
table {
|
||||
border-spacing: 1em 0.25em;
|
||||
}
|
||||
|
||||
.file-added {
|
||||
.timestamp {
|
||||
opacity: 0.77;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.roots {
|
||||
ul {
|
||||
list-style: none;
|
||||
|
|
Loading…
Reference in New Issue