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

Resolve "add functionality for listing query results in frontend"

See merge request padas/24ss-5430-web-and-data-eng/gruppe-3/datadash!18

src/main/java/de/uni_passau/fim/PADAS/group3/DataDash/controler/DatasetController.java

@@ -65,7 +65,7 @@ public class DatasetController {
         return getDatasetById(id); // new ResponseEntity<>(null, HttpStatus.OK);
     }
 
-    @PutMapping("/id/{id}/vote")
+    @PutMapping("/id/{id}/stars")
     public Dataset postMethodName(@PathVariable("id") UUID id,
             @RequestParam("stars") int stars) {
         if (stars > 0 && stars < 6) {

src/main/resources/static/contentUtility.js

@@ -11,13 +11,11 @@ export function fetchQuery(fetchString) {
 }
 
 function parseContent(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); //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/main.css

@@ -42,6 +42,7 @@ header {
     left: 0;
     z-index: 1;
 }
+
 #tool-bar {
     display: flex;
     flex-direction: row;
@@ -77,18 +78,6 @@ header {
     text-align: center;
 }
 
-
-/*
-#search .datasets:empty {
-    background: url("sad-looking-glass.svg");
-    height: 7rem;
-    width: 7rem;
-    padding: var(--pad-main);
-}
-
- */
-
-
 .hidden {
     display: none;
 }
@@ -103,10 +92,6 @@ header {
     gap: 1rem;
 }
 
-
-
-
-
 @container (width < 60ch) {
     .datasets {
         grid-template-columns: 1fr;
@@ -133,7 +118,7 @@ header {
     gap: .5em;
 }
 /* Buttons */
-.upvote-btn, .downvote-btn, #search-btn, #filter-btn, #sort-btn {
+.upvote-btn, .downvote-btn, #search-btn, #filter-btn, #sort-btn, #reset-tools-btn {
     background: var(--icon-url) no-repeat;
     background-size: contain;
     border: none;
@@ -163,6 +148,11 @@ header {
     --icon-size: 1rem;
 }
 
+#reset-tools-btn {
+    --icon-url: url(reset.svg);
+    --icon-size: 1rem;
+}
+
 #sort-btn {
     --icon-url: url(sort.svg);
     --icon-size: 1rem;

src/main/resources/static/main.js

@@ -1,4 +1,5 @@
-import { fetchQuery } from "./contentUtility.js";
+import {fetchQuery} from "./contentUtility.js";
+import Dataset from "./dataset.js";
 
 const apiEndpoint = "/api/v1/datasets";
 const baseURL = location.origin;
@@ -15,6 +16,7 @@ const filterButton = document.getElementById("filter-btn");
 const searchButton = document.getElementById("search-btn");
 const searchBar = document.getElementById("search-entry");
 const sortButton = document.getElementById("sort-btn");
+const resetButton = document.getElementById("reset-tools-btn");
 const upvoteButtons = document.getElementsByClassName("upvote-btn");
 const downvoteButtons = document.getElementsByClassName("downvote-btn");
 export const searchSection = document.getElementById("search");
@@ -32,33 +34,39 @@ addButton.addEventListener("click", () => {
 
 filterButton.addEventListener("change", () => {
     const filterString = filterButton.value;
-    filter(filterString);
+    if (filterString !== filterButton.querySelector("#default-filter").value) {
+        fetchQuery(createQuery());
+    }
 });
 
 searchButton.addEventListener("click", () => {
-    const searchString = searchBar.value;
-    search(searchString);
+    fetchQuery(createQuery());
+
 });
 
 searchBar.addEventListener("input", () => {
     updateSections();
     clearTimeout(searchBarTimeout);
     searchBarTimeout = setTimeout(() => {
-        const searchString = searchBar.value;
-        search(searchString);
+        fetchQuery(createQuery());
     }, searchDelay);
 });
 
 searchBar.addEventListener('keypress', function (e) {
     if (e.key === 'Enter') {
-        const searchString = searchBar.value;
-        search(searchString);
+        fetchQuery(createQuery());
     }
-})
+});
 
 sortButton.addEventListener("change", () => {
-    const sortString = sortButton.value;
-    sort(sortString);
+    fetchQuery(createQuery());
+});
+
+resetButton.addEventListener("click", () => {
+    searchBar.value = "";
+    filterButton.value = filterButton.querySelector("#default-filter").value;
+    sortButton.value = sortButton.querySelector("#default-sort").value;
+    updateSections();
 });
 
 // Consider moving this to datasets.js completely
@@ -81,39 +89,47 @@ for (const downvoteButton of downvoteButtons) {
 
 // functions of the main page
 function navigateToAdd() {
-    //TODO: url to add page not yet implemented, add here
     window.location.href = "/add";
 }
 
-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);
-
-    console.log(fetchURL); // TODO: remove
-    fetchQuery(fetchURL);
-}
-
-function sort(sortString) {
-    let query = sortString.toLowerCase().split(" ");
-    if (query[1] === "a-z" || query[1] === "↑" || query[1] === "oldest-newest") {
-        query[1] = "asc";
+function getFilterQuery() {
+    let filterString= filterButton.value.toUpperCase();
+    if (filterString === "NONE") {
+        return ["type", "%"]
+    } else if (document.querySelector('#filter-btn option:checked').parentElement.label === "Standard categories") {
+        return ["type", filterString];
     } else {
-        query[1] = "desc";
+        return ["category", filterString];
     }
-    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 getSearchQuery() {
+    let searchString = searchBar.value;
+    return (searchString.length === 0 ? "%" : ("%" + searchString + "%"));
+}
+
+function getSortQuery() {
+    let sortString = sortButton.value.toLowerCase().split(" ");
+    if (sortString[1] === "a-z" || sortString[1] === "↑" || sortString[1] === "oldest-newest") {
+        sortString[1] = "asc";
+    } else {
+        sortString[1] = "desc";
+    }
+    return sortString
+}
+
+// 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);
+    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) {
@@ -121,41 +137,86 @@ export function vote(entryID, up) {
         `${apiEndpoint}/id/${entryID}/${up ? "up" : "down"}vote`,
         baseURL,
     );
-    console.log(fetchURL); // TODO: remove
     fetch(fetchURL, {
-        method: "PUT", //mode: 'no-cors'
+        method: "PUT",
         headers: {
             'Content-Type': 'application/json',
-            // Add other headers as needed
-        },
-    });
-    /*.then(resp => resp.json()) // TODO: wait for backend
+        }})
+    .then(resp => resp.json())
     .then((data) => {
-        console.log(data.content); // TODO: remove*/
+        console.log(data.upvotes); // TODO: remove, check einbauen: data.id === entryID?
     let dataset = document.querySelector('[data-id= ' + CSS.escape(entryID) + ']')
-    dataset.querySelector("span").innerText++; // TODO: replace by parsed vote
-    /*});*/
+    dataset.querySelector("span").innerText = data.upvotes;
+    });
 }
 
 function incrementPageCount() {
     lastQuery.currentPage++;
 }
 
+// updates the page display. If no query is present, the initial page is shown, otherwise the search results.
 function updateSections() {
-    if (searchBar.value === "") {
+    if (searchBar.value === "" && sortButton.value === sortButton.querySelector("#default-sort").value
+        && filterButton.value === filterButton.querySelector("#default-filter").value) {
         searchSection.classList.add("hidden");
         recentSection.classList.remove("hidden");
         mostLikedSection.classList.remove("hidden");
+        resetButton.classList.add("hidden");
     } else {
         searchSection.classList.remove("hidden");
         recentSection.classList.add("hidden");
         mostLikedSection.classList.add("hidden");
+        resetButton.classList.remove("hidden");
     }
 }
 
+// fetches the further categories used in the filter function
+function fetchCategories() {
+    const fetchURL = new URL(
+        "api/v1/categories" , baseURL);
+    fetch(fetchURL)
+        .then(resp => resp.json())
+        .then((data) => {
+            for (let i = 0; i < data.length; i++) {
+                let category = data[i].toLowerCase();
+                category = category.charAt(0).toUpperCase() + category.slice(1);
+                document.getElementById("other-categories").appendChild(new Option(category));
+            }
+        });
+}
+
+// fetches entries for the initial page
+function fetchInitialEntries() {
+    let recentsQueryURL = new URL(apiEndpoint + "/search", baseURL);
+    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);
+    topVotedQueryURL.searchParams.append("sort", "upvotes");
+    topVotedQueryURL.searchParams.append("direction", "desc");
+    topVotedQueryURL.searchParams.append("size", "1");
+    fetch(topVotedQueryURL)
+        .then(resp => resp.json())
+        .then((data) => {
+            document.querySelector("#top .datasets")
+                .appendChild(new Dataset(data.content[0]).createDatasetHTMLElement());
+        });
+}
+
 window.onload = function () {
+    fetchCategories();
+    fetchInitialEntries();
     updateSections();
     if (searchBar.value !== "") {
-        search(searchBar.value);
+        fetchQuery(createQuery());
     }
 }

src/main/resources/static/reset.svg

@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="1.70667in" height="1.70667in"
+     viewBox="0 0 512 512">
+  <path id="Selection"
+        fill="#222" stroke="#222" stroke-width="1"
+        d="M 237.00,255.00
+           C 232.17,252.53 227.04,246.25 222.99,242.29
+             222.99,242.29 198.20,217.75 198.20,217.75
+             198.20,217.75 163.08,182.72 163.08,182.72
+             163.08,182.72 125.09,144.45 125.09,144.45
+             125.09,144.45 100.59,120.08 100.59,120.08
+             95.21,114.71 91.15,113.03 91.00,105.00
+             90.96,102.52 90.73,98.57 91.99,96.43
+             95.30,90.82 104.55,89.45 110.00,92.17
+             114.03,94.19 130.60,111.60 135.00,116.00
+             135.00,116.00 215.00,196.00 215.00,196.00
+             215.00,196.00 257.00,237.00 257.00,237.00
+             259.56,232.22 265.16,227.50 269.08,223.59
+             269.08,223.59 290.92,201.92 290.92,201.92
+             290.92,201.92 367.41,125.08 367.41,125.08
+             367.41,125.08 391.85,101.05 391.85,101.05
+             396.75,96.08 399.44,91.44 407.00,91.04
+             416.65,90.54 421.50,95.35 420.96,105.00
+             420.60,111.25 417.19,113.79 413.00,118.00
+             413.00,118.00 397.00,134.00 397.00,134.00
+             397.00,134.00 307.00,224.00 307.00,224.00
+             307.00,224.00 284.00,247.00 284.00,247.00
+             282.10,248.90 277.04,253.27 277.04,256.00
+             277.04,258.73 282.10,263.10 284.00,265.00
+             284.00,265.00 307.00,288.00 307.00,288.00
+             307.00,288.00 397.00,378.00 397.00,378.00
+             397.00,378.00 412.00,393.00 412.00,393.00
+             414.67,395.67 418.93,399.50 420.26,403.00
+             420.95,404.81 421.00,407.07 420.99,409.00
+             420.95,417.91 415.37,421.34 407.00,420.96
+             399.20,420.61 397.05,416.34 391.92,411.26
+             391.92,411.26 368.25,387.75 368.25,387.75
+             368.25,387.75 291.75,311.25 291.75,311.25
+             291.75,311.25 269.08,288.42 269.08,288.42
+             265.10,284.40 259.51,279.96 257.00,275.00
+             257.00,275.00 219.83,311.28 219.83,311.28
+             219.83,311.28 135.00,396.00 135.00,396.00
+             135.00,396.00 119.08,412.08 119.08,412.08
+             116.77,414.39 112.71,418.94 109.83,420.13
+             104.28,422.42 95.26,421.12 91.99,415.57
+             90.73,413.43 90.96,409.48 91.00,407.00
+             91.14,399.23 95.36,397.16 100.59,391.92
+             100.59,391.92 127.56,365.29 127.56,365.29
+             127.56,365.29 202.25,290.25 202.25,290.25
+             202.25,290.25 237.00,255.00 237.00,255.00 Z" />
+</svg>

src/main/resources/templates/index.html

@@ -32,8 +32,9 @@
         </template>
 
         <section id="tool-bar">
+            <button class="btn flat" id="reset-tools-btn" title="Reset search results">Reset</button>
             <select id="sort-btn" class="btn flat" title="Sort entries">Sort by
-                <option>Date newest-oldest</option>
+                <option id="default-sort">Date newest-oldest</option>
                 <option>Date oldest-newest</option>
                 <option>Author A-Z</option>
                 <option>Author Z-A</option>
@@ -41,17 +42,17 @@
                 <option>Title Z-A</option>
                 <option>Stars ↑</option>
                 <option>Stars ↓</option>
-                <option>Votes ↑</option>
-                <option>Votes ↓</option>
+                <option>Upvotes ↑</option>
+                <option>Upvotes ↓</option>
             </select>
             <div class="divider"></div>
             <select class="btn flat" id="filter-btn" title="Filter entries">Filter
+                <option id="default-filter">None</option>
                 <optgroup label="Standard categories">
                     <option>Dataset</option>
                     <option>API</option>
                 </optgroup>
-                <optgroup label="Other categories">
-                    <option>a category</option>
+                <optgroup id="other-categories" label="Other categories">
                 </optgroup>
             </select>
             <input type="search" name="query" id="search-entry" placeholder="Search">
@@ -61,84 +62,11 @@
         <section id="recents">
             <h2>Recently added:</h2>
             <ul class="datasets">
-
-                <!-- Preliminary content to be replaced by data from our server: -->
-
-                <li class="dataset">
-                    <div class="dataset-info">
-                        <div class="icon tori"></div>
-                        <div class="details">
-                            <h3>Tori</h3>
-                            <p>The simple mobile crypto wallet even your grandparents can use</p>
-                        </div>
-                    </div>
-                    <aside class="upvote">
-                        <button class="upvote-btn btn flat">Upvote</button>
-                        <span class="upvote-count">0</span>
-                        <button class="downvote-btn btn flat">Downvote</button>
-                    </aside>
-                </li>
-                <li class="dataset">
-                    <div class="dataset-info">
-                        <div class="icon tyms"></div>
-                        <div class="details">
-                            <h3>Tyms</h3>
-                            <p>Modern accounting ERP for ambitious businesses</p>
-                        </div>
-                    </div>
-                    <aside class="upvote">
-                        <button class="upvote-btn btn flat">Upvote</button>
-                        <span class="upvote-count">0</span>
-                        <button class="downvote-btn btn flat">Downvote</button>
-                    </aside>
-                </li>
-                <li class="dataset">
-                    <div class="dataset-info">
-                        <div class="icon zapcardz"></div>
-                        <div class="details">
-                            <h3>ZapCardz</h3>
-                            <p>Remember what you learn forever with AI powered flashcards</p>
-                        </div>
-                    </div>
-                    <aside class="upvote">
-                        <button class="upvote-btn btn flat">Upvote</button>
-                        <span class="upvote-count">0</span>
-                        <button class="downvote-btn btn flat">Downvote</button>
-                    </aside>
-                </li>
-                <li class="dataset">
-                    <div class="dataset-info">
-                        <div class="icon peek"></div>
-                        <div class="details">
-                            <h3>Peek</h3>
-                            <p>AI organizer and workspace for your browser tabs</p>
-                        </div>
-                    </div>
-                    <aside class="upvote">
-                        <button class="upvote-btn btn flat">Upvote</button>
-                        <span class="upvote-count">0</span>
-                        <button class="downvote-btn btn flat">Downvote</button>
-                    </aside>
-                </li>
             </ul>
         </section>
         <section id="top">
             <h2>Most Liked:</h2>
             <ul class="datasets">
-                <li class="dataset">
-                    <div class="dataset-info">
-                        <div class="icon standup"></div>
-                        <div class="details">
-                            <h3>Standup</h3>
-                            <p>Simply daily accountability phone call, powered by AI</p>
-                        </div>
-                    </div>
-                    <aside class="upvote">
-                        <button class="upvote-btn btn flat">Upvote</button>
-                        <span class="upvote-count">0</span>
-                        <button class="downvote-btn btn flat">Downvote</button>
-                    </aside>
-                </li>
             </ul>
         </section>