diff --git a/src/main/resources/static/contentUtility.js b/src/main/resources/static/contentUtility.js index fc7b5b6..e2a032e 100644 --- a/src/main/resources/static/contentUtility.js +++ b/src/main/resources/static/contentUtility.js @@ -11,14 +11,13 @@ export function fetchQuery(fetchString) { } function parseContent(content) { - //TODO: method for parsing query results - console.log(content); + console.log(content); //TODO: remove 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)); - console.log(datasets); + console.log(datasets); //TODO: remove 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/dataset.js b/src/main/resources/static/dataset.js index 8f454ec..27245e5 100644 --- a/src/main/resources/static/dataset.js +++ b/src/main/resources/static/dataset.js @@ -1,3 +1,5 @@ +import { vote } from "./main.js"; + export default class Dataset { #abstract; #author; @@ -34,6 +36,16 @@ export default class Dataset { clone.querySelector("h3").innerText = this.#title; clone.querySelector("p").innerText = this.#description; clone.querySelector("span").innerText = this.#upvotes; + + // Event Listeners + clone.querySelector(".upvote-btn").addEventListener("click", () => { + vote(this.#id, true); + }); + + clone.querySelector(".downvote-btn").addEventListener("click", () => { + vote(this.#id, false); + }) + return clone; } } diff --git a/src/main/resources/static/main.js b/src/main/resources/static/main.js index 3cc733a..e168ef4 100644 --- a/src/main/resources/static/main.js +++ b/src/main/resources/static/main.js @@ -2,7 +2,6 @@ import { fetchQuery } from "./contentUtility.js"; const apiEndpoint = "/api/v1/datasets"; const baseURL = location.origin; -const searchDelay = 500; const defaultPagingValue = 20; const lastQuery = { url: "", @@ -10,7 +9,7 @@ const lastQuery = { currentPage: 0 }; -// definition of all buttons +// definition of all buttons & sections const addButton = document.getElementById("add-btn"); const filterButton = document.getElementById("filter-btn"); const searchButton = document.getElementById("search-btn"); @@ -24,6 +23,7 @@ const mostLikedSection = document.getElementById("top"); // ID of the timeout, because we need to cancel it at some point export let searchBarTimeout; +const searchDelay = 500; // Event listeners addButton.addEventListener("click", () => { @@ -41,16 +41,7 @@ searchButton.addEventListener("click", () => { }); searchBar.addEventListener("input", () => { - if (searchBar.value === "") { - searchSection.classList.add("hidden"); - recentSection.classList.remove("hidden"); - mostLikedSection.classList.remove("hidden"); - } else { - searchSection.classList.remove("hidden"); - recentSection.classList.add("hidden"); - mostLikedSection.classList.add("hidden"); - } - + updateSections(); clearTimeout(searchBarTimeout); searchBarTimeout = setTimeout(() => { const searchString = searchBar.value; @@ -70,7 +61,8 @@ sortButton.addEventListener("change", () => { sort(sortString); }); -const upvoteButtonClickListener = e => { +// Consider moving this to datasets.js completely +const upvoteButtonClickListener = e => { const entryID = e.target.parentElement.parentElement.dataset.id; vote(entryID, true); }; @@ -78,6 +70,7 @@ for (const upvoteButton of upvoteButtons) { upvoteButton.addEventListener("click", upvoteButtonClickListener); } +// Consider moving this to datasets.js completely const downvoteButtonClickListener = e => { const entryID = e.target.parentElement.parentElement.dataset.id; vote(entryID, false); @@ -93,18 +86,16 @@ function navigateToAdd() { function filter(filterString) { filterString = filterString.toUpperCase(); - let fetchURL = new URL(apiEndpoint, baseURL); fetchURL.searchParams.append("type", filterString); fetchURL.searchParams.append("size", defaultPagingValue); - console.log(fetchURL); // TODO: remove fetchQuery(fetchURL); } function search(searchString) { let fetchURL = new URL(apiEndpoint + "/search", baseURL); - fetchURL.searchParams.append("search", searchString.length == 0 ? "%" : searchString); + fetchURL.searchParams.append("search", searchString.length === 0 ? "%" : searchString); console.log(fetchURL); // TODO: remove fetchQuery(fetchURL); @@ -112,30 +103,52 @@ function search(searchString) { function sort(sortString) { let query = sortString.toLowerCase().split(" "); - if (query[1] === "a-z" || query[1] === "↑") { + if (query[1] === "a-z" || query[1] === "↑" || query[1] === "oldest-newest") { query[1] = "asc"; } else { query[1] = "desc"; } - let fetchURL = new URL(apiEndpoint, baseURL); fetchURL.searchParams.append("sort", query[0]); fetchURL.searchParams.append("direction", query[1]); - console.log(fetchURL); // TODO: remove fetchQuery(fetchURL); } -function vote(entryID, up) { +export function vote(entryID, up) { const fetchURL = new URL( `${apiEndpoint}/id/${entryID}/${up ? "up" : "down"}vote`, baseURL, ); - console.log(fetchURL); // TODO: remove - fetch(fetchURL); + fetch(fetchURL, {method: "post", mode: 'no-cors'}); + /*.then(resp => resp.json()) // TODO: wait for backend + .then((data) => { + console.log(data.content); // TODO: remove*/ + let dataset = document.querySelector('[data-id= ' + CSS.escape(entryID) + ']') + dataset.querySelector("span").innerText++; // TODO: replace by parsed vote + /*});*/ } function incrementPageCount() { lastQuery.currentPage++; } + +function updateSections() { + if (searchBar.value === "") { + searchSection.classList.add("hidden"); + recentSection.classList.remove("hidden"); + mostLikedSection.classList.remove("hidden"); + } else { + searchSection.classList.remove("hidden"); + recentSection.classList.add("hidden"); + mostLikedSection.classList.add("hidden"); + } +} + +window.onload = function () { + updateSections(); + if (searchBar.value !== "") { + search(searchBar.value); + } +} diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html index a9f7128..a16f045 100644 --- a/src/main/resources/templates/index.html +++ b/src/main/resources/templates/index.html @@ -33,6 +33,8 @@