diff --git a/src/main/resources/static/contentUtility.js b/src/main/resources/static/contentUtility.js index deb5658..7555315 100644 --- a/src/main/resources/static/contentUtility.js +++ b/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)); - Array.from(searchSection.querySelectorAll(".datasets .dataset")).forEach(e => e.remove()); + if (clearResults) { + Array.from(searchSection.querySelectorAll(".datasets .dataset")).forEach(e => e.remove()); + } for (const dataset of datasets) { searchSection.querySelector(".datasets").appendChild(dataset.createDatasetHTMLElement()); } diff --git a/src/main/resources/static/main.js b/src/main/resources/static/main.js index 77af7e6..fb8700d 100644 --- a/src/main/resources/static/main.js +++ b/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", () => { @@ -79,7 +79,7 @@ for (const upvoteButton of upvoteButtons) { } // Consider moving this to datasets.js completely -const downvoteButtonClickListener = e => { +const downvoteButtonClickListener = e => { const entryID = e.target.parentElement.parentElement.dataset.id; vote(entryID, false); }; @@ -93,7 +93,7 @@ function navigateToAdd() { } function getFilterQuery() { - let filterString= filterButton.value.toUpperCase(); + let filterString = filterButton.value.toUpperCase(); if (filterString === "NONE") { return ["type", "%"] } else if (document.querySelector('#filter-btn option:checked').parentElement.label === "Standard categories") { @@ -141,13 +141,14 @@ 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? - let dataset = document.querySelector('[data-id= ' + CSS.escape(entryID) + ']') - dataset.querySelector("span").innerText = data.upvotes; - }); + } + }) + .then(resp => resp.json()) + .then((data) => { + console.log(data.upvotes); // TODO: remove, check einbauen: data.id === entryID? + let dataset = document.querySelector('[data-id= ' + CSS.escape(entryID) + ']') + dataset.querySelector("span").innerText = data.upvotes; + }); } function incrementPageCount() { @@ -173,7 +174,7 @@ function updateSections() { // fetches the further categories used in the filter function function fetchCategories() { const fetchURL = new URL( - "api/v1/categories" , baseURL); + "api/v1/categories", baseURL); fetch(fetchURL) .then(resp => resp.json()) .then((data) => { @@ -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); } } diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html index 23ee989..34982f9 100644 --- a/src/main/resources/templates/index.html +++ b/src/main/resources/templates/index.html @@ -78,6 +78,7 @@