Refactor Dataset class

This commit is contained in:
Elias Schriefer
2024-07-05 16:57:06 +02:00
parent f60ce5babf
commit 66ac0bfc29
4 changed files with 222 additions and 113 deletions

View File

@@ -1,14 +1,14 @@
import {fetchQuery} from "./contentUtility.js";
import { fetchQuery } from "./contentUtility.js";
import Dataset from "./dataset.js";
const apiEndpoint = "/api/v1/datasets";
const baseURL = location.origin;
export const DATASET_ENDPOINT = "/api/v1/datasets";
export const getBaseURL = () => location.origin;
const defaultPagingValue = 20;
export const lastQuery = {
totalPages: 0,
currentPage: 0
currentPage: 0,
};
const votedIDs = window.localStorage;
// definition of all buttons & sections
const addButton = document.getElementById("add-btn");
@@ -69,24 +69,6 @@ resetButton.addEventListener("click", () => {
updateSections();
});
// 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);
};
for (const upvoteButton of upvoteButtons) {
upvoteButton.addEventListener("click", upvoteButtonClickListener);
}
// 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);
};
for (const downvoteButton of downvoteButtons) {
downvoteButton.addEventListener("click", downvoteButtonClickListener);
}
// functions of the main page
function navigateToAdd() {
window.location.href = "/add"; //TODO: move to EventListner?
@@ -121,42 +103,18 @@ function getSortQuery() {
// creates query for the whole toolbar, so that searching, sorting and filtering are always combined
function createQuery() {
updateSections();
let queryURL = new URL(apiEndpoint + "/search", baseURL);
let queryURL = new URL(DATASET_ENDPOINT + "/search", getBaseURL());
queryURL.searchParams.append("search", getSearchQuery());
let filterQuery = getFilterQuery();
queryURL.searchParams.append(filterQuery[0], filterQuery[1]);
let sortQuery = getSortQuery();
queryURL.searchParams.append("sort", sortQuery[0]);
queryURL.searchParams.append("direction", sortQuery[1]);
queryURL.searchParams.append("size", defaultPagingValue.toString(10));
return queryURL;
}
export function vote(entryID, up) {
const fetchURL = new URL(
`${apiEndpoint}/id/${entryID}/${up ? "up" : "down"}vote`,
baseURL,
);
fetch(fetchURL, {
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 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);
}
});
return queryURL;
}
// updates the page display. If no query is present, the initial page is shown, otherwise the search results.
@@ -178,7 +136,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", getBaseURL());
fetch(fetchURL)
.then(resp => resp.json())
.then((data) => {
@@ -191,32 +149,30 @@ function fetchCategories() {
}
// fetches entries for the initial page
function fetchInitialEntries() {
let recentsQueryURL = new URL(apiEndpoint + "/search", baseURL);
async function fetchInitialEntries() {
let recentsQueryURL = new URL(DATASET_ENDPOINT + "/search", getBaseURL());
recentsQueryURL.searchParams.append("sort", "date");
recentsQueryURL.searchParams.append("direction", "desc");
recentsQueryURL.searchParams.append("size", "6");
fetch(recentsQueryURL)
.then(resp => resp.json())
.then((data) => {
const datasets = data.content.map(dataset => new Dataset(dataset));
for (const dataset of datasets) {
document.querySelector("#recents .datasets")
.appendChild(dataset.createDatasetHTMLElement());
}
});
let topVotedQueryURL = new URL(apiEndpoint + "/search", baseURL);
const recentsResponse = await fetch(recentsQueryURL);
const recentsData = await recentsResponse.json();
const recentsDatasets = recentsData.content.map(dataset => new Dataset(dataset));
for (const recentDataset of recentsDatasets) {
document.querySelector("#recents .datasets").appendChild(recentDataset.createDatasetHTMLElement());
}
let topVotedQueryURL = new URL(DATASET_ENDPOINT + "/search", getBaseURL());
topVotedQueryURL.searchParams.append("sort", "upvotes");
topVotedQueryURL.searchParams.append("direction", "desc");
topVotedQueryURL.searchParams.append("size", "1");
fetch(topVotedQueryURL)
.then(resp => resp.json())
.then((data) => {
let dataset = new Dataset(data.content[0]);
document.querySelector("#top .datasets")
.appendChild(dataset.createDatasetHTMLElement());
});
const topVotedResponse = await fetch(topVotedQueryURL);
const topVotedData = await topVotedResponse.json();
const topVotedDataset = new Dataset(topVotedData.content[0]);
document.querySelector("#top .datasets").appendChild(topVotedDataset.createDatasetHTMLElement());
}
window.onload = function () {