meta/yukiotoko-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: pagination on archived rooms

Browse Source
This commit is contained in:
metamethods 2025-01-03 01:19:27 -08:00
parent 2a20947f59
commit 008fc75f7b
2 changed files with 53 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/lib/Pagination.svelte Normal file
View File

@ -0,0 +1,40 @@
<script lang="ts" generics="T">
let {
items,
itemsPerPage,
pageItems = $bindable()
}: { items: Array<T>; itemsPerPage: number; pageItems: Array<T> } = $props();
let currentPage = $state(0);
let pageIndexStart = $derived(currentPage * itemsPerPage);
let pageIndexEnd = $derived(Math.min(itemsPerPage * (currentPage + 1), items.length));
$effect(() => {
currentPage = Math.min(Math.max(currentPage, 0), ~~(items.length / itemsPerPage));
pageItems = items.slice(pageIndexStart, pageIndexEnd);
});
</script>
<div class="flex flex-col gap-2">
<p>
Showing <span class="font-bold text-light">{pageIndexStart + 1}</span> to
<span class="font-bold text-light">{pageIndexEnd}</span>
of <span class="font-bold text-light">{items.length}</span>
Entries
</p>
<div class="flex divide-x divide-border">
<button class="rounded-bl-lg rounded-tl-lg text-light" onclick={() => currentPage--}
>Previous</button
>
<button class="rounded-br-lg rounded-tr-lg text-light" onclick={() => currentPage++}
>Next</button
>
</div>
</div>
<style>
button {
@apply bg-medium px-4 py-2 transition hover:brightness-150;
}
</style>

22
src/routes/+page.svelte
View File

@ -1,15 +1,17 @@
<script lang="ts">
import Pagination from '$lib/Pagination.svelte';
import Room from '$lib/Room.svelte';
import type { PageData } from './$types';
let props: { data: PageData } = $props();
let { data }: { data: PageData } = $props();
let { activeRooms, archivedRooms } = data;
let data = $state(props.data);
let paginationArchivedRooms = $state([]);
</script>
<div class="mb-16 space-y-8">
<div class="mb-8 space-y-8">
<section>
<h1 class="text-4xl font-bold">yukiotoko webui</h1>
<h1 class="text-4xl font-bold text-light">yukiotoko webui</h1>
<p>a frontend redesign for <a href="http://yukiotoko.chara.lol/">yukiotoko</a></p>
<p class="text-sub">refresh the page to fetch newer yukiotoko data</p>
</section>
@ -18,14 +20,14 @@
<div class="flex flex-col gap-8">
<section class="flex flex-col gap-4">
<div>
<h1 class="text-2xl font-bold">
active rooms <span class="text-sub">({data.activeRooms.length})</span>
<h1 class="text-2xl font-bold text-light">
active rooms <span class="text-sub">({activeRooms.length})</span>
</h1>
<p class="text-sub">all of the currently matchmaking rooms</p>
</div>
<div class="grid grid-cols-1 gap-4 xl:grid-cols-2">
{#each data.activeRooms as activeRoom}
{#each activeRooms as activeRoom}
<Room room={activeRoom} />
{/each}
</div>
@ -33,14 +35,16 @@
<section class="flex flex-col gap-4">
<div>
<h1 class="text-2xl font-bold">
<h1 class="text-2xl font-bold text-light">
archived rooms <span class="text-sub">({data.archivedRooms.length})</span>
</h1>
<p class="text-sub">rooms that were created from the last 24 hours</p>
</div>
<Pagination items={archivedRooms} itemsPerPage={20} bind:pageItems={paginationArchivedRooms} />
<div class="grid grid-cols-1 gap-4 xl:grid-cols-2">
{#each data.archivedRooms as archivedRoom}
{#each paginationArchivedRooms as archivedRoom}
<Room room={archivedRoom} />
{/each}
</div>