load more

script/demo_list.js

@@ -1,6 +1,6 @@
 import {render} from "solid-js/web";
 import {ready} from "./ready";
-import {FilterBar} from "./filterbar"
+import {FilterBar, queryForFilter} from "./filterbar"
 import {Api, SteamId} from "./api";
 
 let lastFilter = {
@@ -12,6 +12,7 @@ let lastFilter = {
 
 ready(async () => {
     const filterBar = document.getElementById('filter-bar');
+    const moreButton = document.getElementById('load-more');
     const maps = filterBar.dataset.maps.split(",");
     const apiBase = filterBar.dataset.apiBase;
     const api = new Api(apiBase);
@@ -36,10 +37,16 @@ ready(async () => {
         players,
     };
 
+    moreButton.addEventListener('click', () => {
+       more(api, demoListBody, lastFilter);
+    });
+
     if (window.location.href.includes("uploads/")) {
         [, lastFilter.uploader] = window.location.href.split("uploads/");
     }
 
+
+
     render(() => <FilterBar maps={maps} api={api} initialFilter={lastFilter}
                             onChange={onFilter.bind(null, api, demoListBody)}/>, filterBar);
 });
@@ -56,15 +63,23 @@ const onFilter = async (api, demoListBody, filter) => {
         return;
     }
     lastFilter = filter;
-
+    const response = await fetch("/fragments/demo-list?" + queryForFilter(filter));
-    let queryParams = new URLSearchParams({
-        players: filter.players.map(player => player.steamid).join(','),
-        mode: (filter.mode || "").toLowerCase(),
-        map: filter.map || "",
-    });
-    if (filter.uploader) {
-        queryParams.set("uploader", filter.uploader);
-    }
-    const response = await fetch("/fragments/demo-list?" + queryParams);
     document.querySelector('.demolist tbody').innerHTML = await response.text();
+}
+
+const more = async (api, demoListBody, filter) => {
+    const rows = demoListBody.querySelectorAll('tr');
+    const lastId = rows[rows.length-1].dataset.id;
+
+    const query = queryForFilter(filter);
+    query.set("before", lastId)
+    const response = await fetch("/fragments/demo-list?" + query);
+    const appendBody = document.createElement('tbody');
+    appendBody.innerHTML = await response.text();
+    const fragment = document.createDocumentFragment();
+    while (appendBody.children.length > 0) {
+        fragment.appendChild(appendBody.children[0]);
+    }
+
+    demoListBody.appendChild(fragment);
 }

script/filterbar.tsx

@@ -66,4 +66,16 @@ export interface FilterSet {
     map: string,
     players: SteamUser[],
     uploader: string,
+}
+
+export function queryForFilter(filter: FilterSet): URLSearchParams {
+    let queryParams = new URLSearchParams({
+        players: filter.players.map(player => player.steamid).join(','),
+        mode: (filter.mode || "").toLowerCase(),
+        map: filter.map || "",
+    });
+    if (filter.uploader) {
+        queryParams.set("uploader", filter.uploader);
+    }
+    return queryParams;
 }

src/fragments/demo_list.rs

@@ -9,7 +9,7 @@ impl Render for DemoList<'_> {
     fn render(&self) -> Markup {
         html! {
             @for demo in self.demos {
-                tr {
+                tr data-id = (demo.id) {
                     td .title {
                         a href = (demo.url()) { (demo.server) " - " (demo.red) " vs " (demo.blu) }
                     }

src/pages/index.rs

@@ -48,6 +48,7 @@ impl Page for Index<'_> {
                     (self.demo_list())
                 }
             }
+            button #load-more { "Load more.." }
             script defer src = (script) type = "text/javascript" {}
         }
     }

src/pages/profile.rs

@@ -50,6 +50,7 @@ impl Page for Profile<'_> {
                     (self.demo_list())
                 }
             }
+            button #load-more { "Load more.." }
             script defer src = (script) type = "text/javascript" {}
         }
     }

src/pages/uploads.rs

@@ -50,6 +50,7 @@ impl Page for Uploads<'_> {
                     (self.demo_list())
                 }
             }
+            button #load-more { "Load more.." }
             script defer src = (script) type = "text/javascript" {}
         }
     }

style/pages/index.css

@@ -46,7 +46,7 @@
         width: 180px;
     }
 
-    & tr:nth-child(even) {
+    & tr:nth-child(odd) {
         background-color: var(--primary-color-accent);
     }
 }
@@ -72,6 +72,18 @@
     font-weight: bold;
 }
 
+#load-more {
+    background-color: var(--primary-color-accent);
+    display: block;
+    width: 100%;
+    line-height: 30px;
+    text-align: center;
+    border: none;
+    outline: none;
+    font-weight: bold;
+    cursor: pointer;
+}
+
 @media (max-width: 950px) {
     .demolist .format {
         display: none;