added paging functionality

src/main/resources/static/contentUtility.js

@@ -1,22 +1,28 @@
-import {searchBarTimeout, searchSection} from "./main.js"
+import {searchBarTimeout, searchSection, lastQuery} from "./main.js"
 import Dataset from "./dataset.js"
 
-export function fetchQuery(fetchString) {
+export function fetchQuery(fetchString, clearResults) {
     clearTimeout(searchBarTimeout);
     fetch(fetchString)
         .then(resp => resp.json())
         .then((data) => {
-            parseContent(data.content);
+            parseContent(data.content, clearResults);
+            lastQuery.totalPages = data.totalPages;
+            if (clearResults) {
+                lastQuery.currentPage = 0;
+            }
         });
 }
 
-function parseContent(content) {
+function parseContent(content, clearResults) {
     if (content.length === 0) {
         searchSection.querySelector("#nothing-found ").classList.remove("hidden");
     } else {
         searchSection.querySelector("#nothing-found").classList.add("hidden");
         const datasets = content.map(dataset => new Dataset(dataset));
+        if (clearResults) {
             Array.from(searchSection.querySelectorAll(".datasets .dataset")).forEach(e => e.remove());
+        }
         for (const dataset of datasets) {
             searchSection.querySelector(".datasets").appendChild(dataset.createDatasetHTMLElement());
         }

src/main/resources/static/main.js

@@ -4,7 +4,7 @@ import Dataset from "./dataset.js";
 const apiEndpoint = "/api/v1/datasets";
 const baseURL = location.origin;
 const defaultPagingValue = 20;
-const lastQuery = {
+export const lastQuery = {
     url: "",
     totalPages: 0,
     currentPage: 0
@@ -35,12 +35,12 @@ addButton.addEventListener("click", () => {
 filterButton.addEventListener("change", () => {
     const filterString = filterButton.value;
     if (filterString !== filterButton.querySelector("#default-filter").value) {
-        fetchQuery(createQuery());
+        fetchQuery(createQuery(), true);
     }
 });
 
 searchButton.addEventListener("click", () => {
-    fetchQuery(createQuery());
+    fetchQuery(createQuery(), true);
 
 });
 
@@ -48,18 +48,18 @@ searchBar.addEventListener("input", () => {
     updateSections();
     clearTimeout(searchBarTimeout);
     searchBarTimeout = setTimeout(() => {
-        fetchQuery(createQuery());
+        fetchQuery(createQuery(), true);
     }, searchDelay);
 });
 
 searchBar.addEventListener('keypress', function (e) {
     if (e.key === 'Enter') {
-        fetchQuery(createQuery());
+        fetchQuery(createQuery(), true);
     }
 });
 
 sortButton.addEventListener("change", () => {
-    fetchQuery(createQuery());
+    fetchQuery(createQuery(), true);
 });
 
 resetButton.addEventListener("click", () => {
@@ -141,7 +141,8 @@ export function vote(entryID, up) {
         method: "PUT",
         headers: {
             'Content-Type': 'application/json',
-        }})
+        }
+    })
         .then(resp => resp.json())
         .then((data) => {
             console.log(data.upvotes); // TODO: remove, check einbauen: data.id === entryID?
@@ -217,6 +218,21 @@ window.onload = function () {
     fetchInitialEntries();
     updateSections();
     if (searchBar.value !== "") {
-        fetchQuery(createQuery());
+        fetchQuery(createQuery(), true);
+    }
+    let observer = new IntersectionObserver(() => {
+        if (!searchSection.classList.contains("hidden")) {
+            fetchPagingResults();
+        }
+    }, {root: null, rootMargin: "0px", threshold: .9});
+    observer.observe(document.getElementById("observable"));
+}
+
+function fetchPagingResults() {
+    lastQuery.currentPage++
+    if (lastQuery.currentPage < lastQuery.totalPages) {
+        let pagingQuery = new URL(createQuery());
+        pagingQuery.searchParams.append("page", lastQuery.currentPage.toString(10));
+        fetchQuery(pagingQuery, false);
     }
 }

src/main/resources/templates/index.html

@@ -78,6 +78,7 @@
             </div>
             <ul class="datasets">
             </ul>
+            <div id="observable" style="height: 2rem"></div>
         </section>
     </main>
 </body>