diff options
| -rw-r--r-- | web/pw-server/src/routes/matches/index.svelte | 48 |
1 files changed, 47 insertions, 1 deletions
diff --git a/web/pw-server/src/routes/matches/index.svelte b/web/pw-server/src/routes/matches/index.svelte index af0cd08..c6eca50 100644 --- a/web/pw-server/src/routes/matches/index.svelte +++ b/web/pw-server/src/routes/matches/index.svelte @@ -1,10 +1,14 @@ <script lang="ts" context="module"> import { ApiClient } from "$lib/api_client"; + const PAGE_SIZE = "50"; + export async function load({ fetch }) { try { const apiClient = new ApiClient(fetch); - const matches = await apiClient.get("/api/matches"); + const matches = await apiClient.get("/api/matches", { + count: PAGE_SIZE, + }); return { props: { @@ -24,10 +28,46 @@ import MatchList from "$lib/components/matches/MatchList.svelte"; export let matches: object[]; + let loading = false; + + async function loadNewer() { + if (matches.length == 0) { + return; + } + const firstTimestamp = matches[0]["timestamp"]; + const apiClient = new ApiClient(); + const reversedNewPage = await apiClient.get("/api/matches", { + count: PAGE_SIZE, + after: firstTimestamp, + }); + + if (reversedNewPage.length > 0) { + matches = reversedNewPage.reverse(); + } + } + + async function loadOlder() { + if (matches.length == 0) { + return; + } + const lastTimestamp = matches[matches.length - 1]["timestamp"]; + const apiClient = new ApiClient(); + const newPage = await apiClient.get("/api/matches", { + count: PAGE_SIZE, + before: lastTimestamp, + }); + if (newPage.length > 0) { + matches = newPage; + } + } </script> <div class="container"> <MatchList {matches} /> + <div class="page-controls"> + <button on:click={loadNewer}>newer</button> + <button on:click={loadOlder}>older</button> + </div> </div> <style lang="scss"> @@ -35,4 +75,10 @@ width: 800px; margin: 0 auto; } + + .page-controls { + display: flex; + justify-content: space-between; + margin: 12px; + } </style> |