Erik/DataDash
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch '32-add-paging-functionality' into '22-integrate-api-and-frontend'

Browse Source 
upvoting suppression by local storage now works, there is a bug however with...

See merge request padas/24ss-5430-web-and-data-eng/gruppe-3/datadash!33
This commit is contained in:
Erik Foris
2024-07-04 23:02:53 +02:00
parent c73f195c2a 61fccc924f
commit f60ce5babf
5 changed files with 85 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/main/resources/static/contentUtility.js
View File

@@ -1,25 +1,31 @@
import {searchBarTimeout, searchSection} from "./main.js"
import {searchBarTimeout, searchSection, lastQuery} from "./main.js"
import Dataset from "./dataset.js"
export function fetchQuery(fetchString) {
// TODO consider renaming this to "searchUtility.js"
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());
searchSection.querySelector(".datasets")
.appendChild(dataset.createDatasetHTMLElement());
}
}
}

13
src/main/resources/static/dataset.js
View File

@@ -36,6 +36,15 @@ export default class Dataset {
clone.querySelector("h3").innerText = this.#title;
clone.querySelector("p").innerText = this.#description;
clone.querySelector("span").innerText = this.#upvotes;
let votedIDs = window.localStorage;
// depending on whether the button has been up/downvoted, its according button get disabled and hidden
if (votedIDs.getItem(this.#id)) {
let votedButton = clone.querySelector(votedIDs.getItem(this.#id)? ".upvote-btn":".downvote-btn");
votedButton.classList.add("isVoted");
votedButton.disabled = true;
let notVotedButton = clone.querySelector(votedIDs.getItem(this.#id)? ".downvote-btn":".upvote-btn");
notVotedButton.style.visibility = "hidden";
}
// Event Listeners
clone.querySelector(".upvote-btn").addEventListener("click", () => {
@@ -48,4 +57,8 @@ export default class Dataset {
return clone;
}
getID() {
return this.#id;
}
}

7
src/main/resources/static/main.css
View File

@@ -81,6 +81,7 @@ header {
.hidden {
display: none;
}
#search-entry:focus-visible {
outline: none;
}
@@ -117,6 +118,7 @@ header {
align-items: center;
gap: .5em;
}
/* Buttons */
.upvote-btn, .downvote-btn, #search-btn, #filter-btn, #sort-btn, #reset-tools-btn {
background: var(--icon-url) no-repeat;
@@ -143,6 +145,7 @@ header {
--icon-url: url(looking-glass.svg);
--icon-size: 1rem;
}
#filter-btn {
--icon-url: url(filter.svg);
--icon-size: 1rem;
@@ -158,6 +161,10 @@ header {
--icon-size: 1rem;
}
.isVoted {
filter: brightness(1.75);
}
.divider {
width: .05rem;
height: 1rem;

76
src/main/resources/static/main.js
View File

@@ -4,11 +4,11 @@ import Dataset from "./dataset.js";
const apiEndpoint = "/api/v1/datasets";
const baseURL = location.origin;
const defaultPagingValue = 20;
const lastQuery = {
url: "",
export const lastQuery = {
totalPages: 0,
currentPage: 0
};
const votedIDs = window.localStorage;
// definition of all buttons & sections
const addButton = document.getElementById("add-btn");
@@ -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", () => {
@@ -69,7 +69,7 @@ resetButton.addEventListener("click", () => {
updateSections();
});
// Consider moving this to datasets.js completely
// Consider moving this to datasets.js completely // TODO: we dont need them, do we? there in dataset.js
const upvoteButtonClickListener = e => {
const entryID = e.target.parentElement.parentElement.dataset.id;
vote(entryID, true);
@@ -78,8 +78,8 @@ for (const upvoteButton of upvoteButtons) {
upvoteButton.addEventListener("click", upvoteButtonClickListener);
}
// Consider moving this to datasets.js completely
const downvoteButtonClickListener = e => {
// Consider moving this to datasets.js completely // TODO: we dont need them, do we? there in dataset.js
const downvoteButtonClickListener = e => {
const entryID = e.target.parentElement.parentElement.dataset.id;
vote(entryID, false);
};
@@ -89,11 +89,11 @@ for (const downvoteButton of downvoteButtons) {
// functions of the main page
function navigateToAdd() {
window.location.href = "/add";
window.location.href = "/add"; //TODO: move to EventListner?
}
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,17 +141,22 @@ 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;
});
}
function incrementPageCount() {
lastQuery.currentPage++;
}
})
.then(resp => resp.json())
.then((data) => {
console.log(data.upvotes); // TODO: remove, check einbauen: data.id === entryID?
let dataSets = document.querySelectorAll('[data-id= ' + CSS.escape(entryID) + ']');
for (const dataSetElement of dataSets) {
dataSetElement.querySelector("span").innerText = data.upvotes;
let votedButton = dataSetElement.querySelector(up? ".upvote-btn":".downvote-btn");
votedButton.classList.add("isVoted");
votedButton.disabled = true;
let notVotedButton = dataSetElement.querySelector(up? ".downvote-btn":".upvote-btn");
notVotedButton.style.visibility = "hidden";
votedIDs.setItem(dataSetElement.getAttribute("data-id"), up);
}
});
}
// updates the page display. If no query is present, the initial page is shown, otherwise the search results.
@@ -173,7 +178,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) => {
@@ -196,7 +201,8 @@ function fetchInitialEntries() {
.then((data) => {
const datasets = data.content.map(dataset => new Dataset(dataset));
for (const dataset of datasets) {
document.querySelector("#recents .datasets").appendChild(dataset.createDatasetHTMLElement());
document.querySelector("#recents .datasets")
.appendChild(dataset.createDatasetHTMLElement());
}
});
@@ -207,8 +213,9 @@ function fetchInitialEntries() {
fetch(topVotedQueryURL)
.then(resp => resp.json())
.then((data) => {
let dataset = new Dataset(data.content[0]);
document.querySelector("#top .datasets")
.appendChild(new Dataset(data.content[0]).createDatasetHTMLElement());
.appendChild(dataset.createDatasetHTMLElement());
});
}
@@ -217,6 +224,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);
}
}

3
src/main/resources/templates/index.html
View File

@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DataDash</title>
<link rel="stylesheet" href="main.css">
<script type="module" src="main.js" defer></script>
<script type="module" src="main.js" defer></script>
</head>
<body>
<div id="add-btn" title="Add a new API entry"></div>
@@ -78,6 +78,7 @@
</div>
<ul class="datasets">
</ul>
<div id="observable" style="height: 2rem"></div>
</section>
</main>
</body>