Merge branch '22-integrate-api-and-frontend' into 36-refactor-dataset-class

src/main/resources/static/main.js

@@ -9,6 +9,7 @@ export const lastQuery = {
     totalPages: 0,
     currentPage: 0,
 };
+const loadedCategories = new Set;
 
 // definition of all buttons & sections
 const addButton = document.getElementById("add-btn");
@@ -33,22 +34,23 @@ addButton.addEventListener("click", () => {
 });
 
 filterButton.addEventListener("change", () => {
-    const filterString = filterButton.value;
-    if (filterString !== filterButton.querySelector("#default-filter").value) {
-        fetchQuery(createQuery(), true);
-    }
+    fetchQuery(createQuery(), true);
 });
 
+filterButton.addEventListener("click", () => {
+    fetchCategories();
+})
+
 searchButton.addEventListener("click", () => {
     fetchQuery(createQuery(), true);
 
 });
 
 searchBar.addEventListener("input", () => {
-    updateSections();
     clearTimeout(searchBarTimeout);
     searchBarTimeout = setTimeout(() => {
         fetchQuery(createQuery(), true);
+        updateSections();
     }, searchDelay);
 });
 
@@ -71,7 +73,7 @@ resetButton.addEventListener("click", () => {
 
 // functions of the main page
 function navigateToAdd() {
-    window.location.href = "/add"; //TODO: move to EventListner?
+    window.location.href = "/add.html"; //TODO: move to EventListener?
 }
 
 function getFilterQuery() {
@@ -81,7 +83,7 @@ function getFilterQuery() {
     } else if (document.querySelector('#filter-btn option:checked').parentElement.label === "Standard categories") {
         return ["type", filterString];
     } else {
-        return ["category", filterString];
+        return ["category", filterButton.options[filterButton.selectedIndex].value]
     }
 }
 
@@ -135,15 +137,18 @@ function updateSections() {
 
 // fetches the further categories used in the filter function
 function fetchCategories() {
-    const fetchURL = new URL(
-        "api/v1/categories", getBaseURL());
+    const fetchURL = new URL("api/v1/categories", getBaseURL());
     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));
+                let categoryName = data[i].name.toLowerCase();
+                categoryName = categoryName.charAt(0).toUpperCase() + categoryName.slice(1);
+                if (!loadedCategories.has(categoryName)) {
+                    let newCategory = new Option(categoryName, data[i].id);
+                    document.getElementById("other-categories").appendChild(newCategory);
+                    loadedCategories.add(categoryName);
+                }
             }
         });
 }