Refactor Dataset class
This commit is contained in:
@@ -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 () {
|
||||
|
||||
Reference in New Issue
Block a user