Merge remote-tracking branch 'origin/21-add-functionality-for-listing-query-results-in-frontend' into 22-integrate-api-and-frontend

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); //TODO: remove
-    console.log(content);
     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());

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;
     }
 }

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 === "") {
+    updateSections();
-        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");
-    }
-
     clearTimeout(searchBarTimeout);
     searchBarTimeout = setTimeout(() => {
         const searchString = searchBar.value;
@@ -70,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);
@@ -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);
+    }
+}

src/main/resources/templates/index.html

@@ -33,6 +33,8 @@
 
         <section id="tool-bar">
             <select id="sort-btn" class="btn flat" title="Sort entries">Sort by
+                <option>Date newest-oldest</option>
+                <option>Date oldest-newest</option>
                 <option>Author A-Z</option>
                 <option>Author Z-A</option>
                 <option>Title A-Z</option>