From eb2d6189a8bcc8a89f273c35d5914d3bf6fed08f Mon Sep 17 00:00:00 2001 From: J-Klinke Date: Tue, 25 Jun 2024 09:14:12 +0200 Subject: [PATCH 1/6] some code formatting, searchbar is now empty on reload --- src/main/resources/static/contentUtility.js | 5 ++--- src/main/resources/static/main.js | 13 +++++++------ 2 files changed, 9 insertions(+), 9 deletions(-) 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/main.js b/src/main/resources/static/main.js index 3cc733a..9753fad 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", () => { @@ -70,7 +70,7 @@ sortButton.addEventListener("change", () => { sort(sortString); }); -const upvoteButtonClickListener = e => { +const upvoteButtonClickListener = e => { const entryID = e.target.parentElement.parentElement.dataset.id; vote(entryID, true); }; @@ -117,11 +117,9 @@ function sort(sortString) { } 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); } @@ -131,7 +129,6 @@ function vote(entryID, up) { `${apiEndpoint}/id/${entryID}/${up ? "up" : "down"}vote`, baseURL, ); - console.log(fetchURL); // TODO: remove fetch(fetchURL); } @@ -139,3 +136,7 @@ function vote(entryID, up) { function incrementPageCount() { lastQuery.currentPage++; } + +window.onload = function () { + document.getElementById("search-entry").value = ""; +} From e47edf3cf2c612e60a2c004817c3d06dae80d26c Mon Sep 17 00:00:00 2001 From: J-Klinke Date: Tue, 25 Jun 2024 09:44:01 +0200 Subject: [PATCH 2/6] improved searchBar functionality: on page reload, it now displays the query fitting to the entered string --- src/main/resources/static/main.js | 30 ++++++++++++++++++------------ 1 file changed, 18 insertions(+), 12 deletions(-) diff --git a/src/main/resources/static/main.js b/src/main/resources/static/main.js index 9753fad..be21842 100644 --- a/src/main/resources/static/main.js +++ b/src/main/resources/static/main.js @@ -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; @@ -137,6 +128,21 @@ function incrementPageCount() { lastQuery.currentPage++; } -window.onload = function () { - document.getElementById("search-entry").value = ""; +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); + } } From a340d59ca2520088177e2fef88ba1e5f98428107 Mon Sep 17 00:00:00 2001 From: Elias Schriefer Date: Tue, 25 Jun 2024 09:59:39 +0200 Subject: [PATCH 3/6] Fix voting event listeners in search --- src/main/resources/static/dataset.js | 12 ++++++++++++ src/main/resources/static/main.js | 4 +++- 2 files changed, 15 insertions(+), 1 deletion(-) 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 be21842..8acde0a 100644 --- a/src/main/resources/static/main.js +++ b/src/main/resources/static/main.js @@ -61,6 +61,7 @@ sortButton.addEventListener("change", () => { sort(sortString); }); +// Consider moving this to datasets.js completely const upvoteButtonClickListener = e => { const entryID = e.target.parentElement.parentElement.dataset.id; vote(entryID, true); @@ -69,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); @@ -115,7 +117,7 @@ function sort(sortString) { fetchQuery(fetchURL); } -function vote(entryID, up) { +export function vote(entryID, up) { const fetchURL = new URL( `${apiEndpoint}/id/${entryID}/${up ? "up" : "down"}vote`, baseURL, From 7e3f1919100b2e0f7fe0eedd91829c5fd45e191e Mon Sep 17 00:00:00 2001 From: J-Klinke Date: Tue, 25 Jun 2024 12:49:28 +0200 Subject: [PATCH 4/6] upvote/down vote work in frontend, but api seems to work incorrectly --- src/main/resources/static/main.js | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/src/main/resources/static/main.js b/src/main/resources/static/main.js index 8acde0a..e109fce 100644 --- a/src/main/resources/static/main.js +++ b/src/main/resources/static/main.js @@ -86,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); @@ -123,7 +121,17 @@ export function vote(entryID, up) { baseURL, ); console.log(fetchURL); // TODO: remove - fetch(fetchURL); + fetch(fetchURL) + .then(resp => resp.json()) + .then((data) => { + console.log(data.content); // TODO: remove + let dataset = document.querySelector('[data-id= ' + CSS.escape(entryID) + ']') + if (Number.isInteger(data.content)) { // TODO: remove and do parsing instead + dataset.querySelector("span").innerText = data.content; // TODO: remove + } else { // TODO: remove + dataset.querySelector("span").innerText = -1; + } // TODO: remove + }); } function incrementPageCount() { From e9e825eb42bc6b106426b4bb52e53966d2858965 Mon Sep 17 00:00:00 2001 From: J-Klinke Date: Tue, 25 Jun 2024 13:30:38 +0200 Subject: [PATCH 5/6] added sorting by date refined main.js/vote() --- src/main/resources/static/main.js | 12 +++++------- src/main/resources/templates/index.html | 2 ++ 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/main/resources/static/main.js b/src/main/resources/static/main.js index e109fce..05a6c61 100644 --- a/src/main/resources/static/main.js +++ b/src/main/resources/static/main.js @@ -103,7 +103,7 @@ 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"; @@ -121,16 +121,14 @@ export function vote(entryID, up) { baseURL, ); console.log(fetchURL); // TODO: remove - fetch(fetchURL) + fetch(fetchURL, { + method: "post" + }) .then(resp => resp.json()) .then((data) => { console.log(data.content); // TODO: remove let dataset = document.querySelector('[data-id= ' + CSS.escape(entryID) + ']') - if (Number.isInteger(data.content)) { // TODO: remove and do parsing instead - dataset.querySelector("span").innerText = data.content; // TODO: remove - } else { // TODO: remove - dataset.querySelector("span").innerText = -1; - } // TODO: remove + dataset.querySelector("span").innerText = -1; // TODO: replace by parsed vote }); } 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 @@