Nulo/transicion-desordenada-diablo
1
1
Fork 0
mirror of https://github.com/catdevnull/transicion-desordenada-diablo synced 2024-05-19 19:50:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

frontend: mejorar navegación

Browse source
This commit is contained in:
Cat /dev/Nulo 2023-12-08 19:22:39 -03:00
parent 4f90c7c812
commit 0d9132a1f4
6 changed files with 84 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
frontend/src/App.svelte
View file

@ -15,8 +15,10 @@
else if (route === "Dump") return Dump;
}
$: component = chooseComponent($currentRoute.component) as any;
$: params = $currentRoute.params as any;
$: r = {
component: chooseComponent($currentRoute.component) as any,
params: $currentRoute.params as any,
};
</script>
<svelte:component this={component} {params} />
<svelte:component this={r.component} params={r.params} />

55
frontend/src/lib/nav/Nav.svelte Normal file
View file

@ -0,0 +1,55 @@
<script lang="ts">
import { inject } from "regexparam";
import ChevronRight from "eva-icons/outline/svg/chevron-right-outline.svg?component";
import { routes } from "../router";
import Portal from "../routes/Portal.svelte";
export let params:
| { dumpUrl: string }
| { dumpUrl: string; portal: string }
| { dumpUrl: string; portal: string; id: string };
function generateDumpName(dumpUrl: string) {
const clean = decodeURIComponent(dumpUrl).replace(/\/+$/, "");
return clean.slice(clean.lastIndexOf("/") + 1);
}
$: dumpName = generateDumpName(params.dumpUrl);
</script>
<nav class="flex justify-between m-2">
<ol
class="flex items-center mb-3 text-sm text-neutral-500 [&_.active-breadcrumb]:text-neutral-600 [&_.active-breadcrumb]:font-medium sm:mb-0"
>
<li class="flex items-center h-full">
<a
href={inject(routes.Dump, params)}
class="inline-flex items-center px-2 py-1.5 space-x-1.5 rounded-md hover:text-neutral-900 hover:bg-neutral-100"
>
<span>{dumpName}</span>
</a>
</li>
{#if "portal" in params}
<ChevronRight class="w-5 h-5 text-gray-400" fill="currentColor" />
<li>
<a
href={inject(routes.Portal, params)}
class="inline-flex items-center px-2 py-1.5 space-x-1.5 font-normal rounded-md hover:bg-neutral-100 hover:text-neutral-900 focus:outline-none"
>
<span>{params.portal}</span>
</a>
</li>
{/if}
{#if "id" in params}
<ChevronRight class="w-5 h-5 text-gray-400" fill="currentColor" />
<li>
<a
href={inject(routes.Dataset, params)}
class="inline-flex items-center px-2 py-1.5 space-x-1.5 font-normal rounded-md hover:bg-neutral-100 hover:text-neutral-900 focus:outline-none"
>
<span>{params.id}</span>
</a>
</li>
{/if}
</ol>
</nav>

4
frontend/src/lib/router.ts
View file

@ -4,8 +4,8 @@ import { writable } from "svelte/store";
export const routes = {
Home: "/",
Dump: "/dump/:dumpUrl",
Portal: "/portal/:portalUrl",
Dataset: "/portal/:portalUrl/dataset/:id",
Portal: "/dump/:dumpUrl/:portal",
Dataset: "/dump/:dumpUrl/:portal/dataset/:id",
};
export type ComponentType = "NotFound" | keyof typeof routes;

14
frontend/src/lib/routes/Dataset.svelte
View file

@ -5,16 +5,19 @@
import NotFound from "./NotFound.svelte";
import { inject } from "regexparam";
import { routes } from "../router";
import Nav from "../nav/Nav.svelte";
export let params: { portalUrl: string; id: string };
const url = decodeURIComponent(params.portalUrl);
export let params: { dumpUrl: string; portal: string; id: string };
$: url = decodeURIComponent(params.dumpUrl) + "/" + params.portal;
const data = Promise.all([fetchData(url), fetchErrors(url)]).then(
$: data = Promise.all([fetchData(url), fetchErrors(url)]).then(
([data, errors]) => ({ data, errors }),
);
</script>
<main class="mx-auto max-w-3xl">
<Nav {params} />
<div class="rounded-lg border bg-white m-2">
{#await data}
<p class="p-6">Cargando dataset...</p>
@ -27,7 +30,10 @@
<small>
<a
class="flex text-blue-500 leading-none gap-1 items-center"
href={inject(routes.Portal, { portalUrl: params.portalUrl })}
href={inject(routes.Portal, {
dumpUrl: params.dumpUrl,
portal: params.portal,
})}
>
<ArrowBack fill="currentColor" class="h-[1.25em]" /> Viendo {data.title}
</a>

7
frontend/src/lib/routes/Dump.svelte
View file

@ -5,9 +5,9 @@
import { routes } from "../router";
export let params: { dumpUrl: string };
const url = decodeURIComponent(params.dumpUrl);
$: url = decodeURIComponent(params.dumpUrl);
const metadataPromise = fetchDumpMetadata(url);
$: metadataPromise = fetchDumpMetadata(url);
</script>
<main class="mx-auto max-w-3xl">
@ -43,7 +43,8 @@
<ul class="divide-y divide-gray-100">
{#each metadata.sites as site}
{@const portalLink = inject(routes.Portal, {
portalUrl: encodeURIComponent(`${url}/${site.path}`),
dumpUrl: params.dumpUrl,
portal: site.path,
})}
<li>
<div class="flex px-6 py-5 justify-between gap-3">

12
frontend/src/lib/routes/Portal.svelte
View file

@ -5,11 +5,12 @@
import { fetchData, fetchErrors } from "../fetch";
import { routes } from "../router";
import type { Dataset } from "common/schema";
import Nav from "../nav/Nav.svelte";
export let params: { portalUrl: string };
const url = decodeURIComponent(params.portalUrl);
export let params: { dumpUrl: string; portal: string };
$: url = `${decodeURIComponent(params.dumpUrl)}/${params.portal}`;
const data = Promise.all([fetchData(url), fetchErrors(url)]).then(
$: data = Promise.all([fetchData(url), fetchErrors(url)]).then(
([data, errors]) => ({ data, errors }),
);
@ -29,6 +30,8 @@
</script>
<main class="mx-auto max-w-3xl">
<Nav {params} />
<div class="rounded-lg border bg-white m-2">
{#await data}
<p class="p-6">Cargando..</p>
@ -70,7 +73,8 @@
<ul class="divide-y divide-gray-100">
{#each filterDatasets(data.dataset, query) as dataset}
{@const datasetLink = inject(routes.Dataset, {
portalUrl: params.portalUrl,
dumpUrl: params.dumpUrl,
portal: params.portal,
id: dataset.identifier,
})}
<li>