aboutsummaryrefslogtreecommitdiff
path: root/web/pw-server/src/routes/matches
diff options
context:
space:
mode:
authorIlion Beyst <ilion.beyst@gmail.com>2022-08-09 20:43:02 +0200
committerIlion Beyst <ilion.beyst@gmail.com>2022-08-09 20:43:02 +0200
commit58c1c5f9fb48040ad6b0891d586543c219de74d2 (patch)
tree08ba1282c24199bc75e639bbfb56f0a335645edd /web/pw-server/src/routes/matches
parent00356d669c765b9f9b47d7a619d73d734fffd594 (diff)
downloadplanetwars.dev-58c1c5f9fb48040ad6b0891d586543c219de74d2.tar.xz
planetwars.dev-58c1c5f9fb48040ad6b0891d586543c219de74d2.zip
badly paginated matches
Diffstat (limited to 'web/pw-server/src/routes/matches')
-rw-r--r--web/pw-server/src/routes/matches/index.svelte48
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>