Merge branch '31-add-abilityto-add-new-categories' into '11-add-api-for-getting-home-page-data'

Resolve "Add abilityto add new categories"

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

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

@@ -1,18 +1,43 @@
 package de.uni_passau.fim.PADAS.group3.DataDash.controler;
+import java.util.List;
+import java.util.UUID;
 
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RestController;
 
-import de.uni_passau.fim.PADAS.group3.DataDash.model.Category;
+import de.uni_passau.fim.PADAS.group3.DataDash.model.CategoryDto;
+import de.uni_passau.fim.PADAS.group3.DataDash.model.CategoryService;
 
+import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestBody;
+
+
 
 
 @RestController
 @RequestMapping("/api/v1/categories")
 public class CategoryController {
+    @Autowired
+    private CategoryService categoryService;
+
     @GetMapping
-    public Category[] getMethodName() {
+    public List<CategoryDto> getMethodName() {
-        return Category.values();
+        return categoryService.getAllCategories() ;
     }
+
+    @GetMapping("/id/{id}")
+    public CategoryDto getMethodName(@PathVariable("id") UUID id) {
+        return categoryService.getCategoryById(id);
+    }
+
+    @PostMapping
+    public String postMethodName(@RequestBody CategoryDto dto) {
+        categoryService.addCategory(dto);        
+        return null;
+    }
+    
+    
 }

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

@@ -0,0 +1,12 @@
+package de.uni_passau.fim.PADAS.group3.DataDash.controler;
+
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.GetMapping;
+
+@Controller
+public class PageController {
+    @GetMapping("/add")
+    public String getAddPage() {
+        return "add";
+    }    
+}

src/main/java/de/uni_passau/fim/PADAS/group3/DataDash/model/Category.java

@@ -1,14 +1,45 @@
 package de.uni_passau.fim.PADAS.group3.DataDash.model;
 
-public enum Category {
+import java.util.List;
-    HEALTH,
+import java.util.UUID;
-    ENVIRONMENT,
+
-    ECONOMY,
+import org.springframework.context.annotation.Lazy;
-    POLITICS,
+
-    TECHNOLOGY,
+import jakarta.persistence.Entity;
-    SPORTS,
+import jakarta.persistence.GeneratedValue;
-    SCIENCE,
+import jakarta.persistence.GenerationType;
-    CULTURE,
+import jakarta.persistence.Id;
-    EDUCATION,
+import jakarta.persistence.OneToMany;
-    OTHER
+
+@Entity
+public class Category {
+
+    @Id
+    @GeneratedValue(strategy = GenerationType.AUTO)
+    private UUID id;
+    
+    private String name;
+    
+    @Lazy
+    @OneToMany(mappedBy = "categorie")
+    private List<Dataset> datasets;
+
+    public Category(String name) {
+        this.name = name;
+    }
+
+    public Category() {
+    }
+
+    public UUID getId() {
+        return id;
+    }
+
+    public String getName() {
+        return name;
+    }
+
+    public void setName(String name) {
+        this.name = name;
+    }
 }

src/main/java/de/uni_passau/fim/PADAS/group3/DataDash/model/CategoryDto.java

@@ -0,0 +1,27 @@
+package de.uni_passau.fim.PADAS.group3.DataDash.model;
+
+import java.util.UUID;
+
+public class CategoryDto {
+
+    private String name;
+    private UUID id;
+
+    public CategoryDto() {
+    }
+
+    CategoryDto(String name, UUID id) {
+        this.name = name;
+        this.id = id;
+    }
+
+
+    public String getName() {
+        return name;
+    }
+
+    public UUID getId() {
+        return id;
+    }
+}
+

src/main/java/de/uni_passau/fim/PADAS/group3/DataDash/model/CategoryDtoMapper.java

@@ -0,0 +1,10 @@
+package de.uni_passau.fim.PADAS.group3.DataDash.model;
+
+public class CategoryDtoMapper {
+
+    public static CategoryDto toDto(Category category) {
+        CategoryDto dto = new CategoryDto(category.getName(), category.getId());
+        return dto;
+    }
+
+}

src/main/java/de/uni_passau/fim/PADAS/group3/DataDash/model/CategoryRepository.java

@@ -0,0 +1,20 @@
+package de.uni_passau.fim.PADAS.group3.DataDash.model;
+
+import java.util.List;
+import java.util.Optional;
+import java.util.UUID;
+
+import org.springframework.data.jpa.repository.JpaRepository;
+
+
+public interface CategoryRepository extends JpaRepository<Category, UUID>{
+
+    Category getCategoryById(UUID id);
+
+    @SuppressWarnings("null")
+    List<Category> findAll();
+    List<Category> findByName(String name);
+    @SuppressWarnings("null")
+    Optional<Category> findById(UUID id);
+
+}

src/main/java/de/uni_passau/fim/PADAS/group3/DataDash/model/CategoryService.java

@@ -0,0 +1,32 @@
+package de.uni_passau.fim.PADAS.group3.DataDash.model;
+
+import org.springframework.stereotype.Service;
+import java.util.List;
+import java.util.UUID;
+
+
+@Service
+public class CategoryService {
+    private CategoryRepository categoryRepository;
+
+    public CategoryService(CategoryRepository categoryRepository) {
+        this.categoryRepository = categoryRepository;
+    }
+
+    public void addCategory(CategoryDto category) {
+        Category cat = new Category(category.getName());
+        categoryRepository.save(cat);
+    }
+
+    public List<CategoryDto> getAllCategories() {
+        List<Category> tmp = categoryRepository.findAll();
+        List<CategoryDto> s = tmp.stream().map(CategoryDtoMapper::toDto).toList();
+        return s;
+    }
+
+    public CategoryDto getCategoryById(UUID id) {
+        return CategoryDtoMapper.toDto(categoryRepository.getCategoryById(id));
+    }
+
+
+}

src/main/java/de/uni_passau/fim/PADAS/group3/DataDash/model/Dataset.java

@@ -11,6 +11,7 @@ import jakarta.persistence.Enumerated;
 import jakarta.persistence.GeneratedValue;
 import jakarta.persistence.GenerationType;
 import jakarta.persistence.Id;
+import jakarta.persistence.ManyToOne;
 
 @Entity
 public class Dataset {
@@ -39,7 +40,8 @@ public class Dataset {
     private int upvotes;
 
     private URL url;
-    @Enumerated(EnumType.STRING)
+
+    @ManyToOne
     private Category categorie;
 
     public Dataset(String title, String abst, String description, String author, URL url, Category categories, Type type) {
@@ -51,7 +53,7 @@ public class Dataset {
         setAbst(abst);        
         setDescription(description);        
         setAuthor(author);
-        setDate(LocalDate.now());        
+        setDate(LocalDate.now());
         setCategorie(categories);        
         setType(type);
         setUrl(url);

src/main/java/de/uni_passau/fim/PADAS/group3/DataDash/model/DatasetService.java

@@ -1,5 +1,6 @@
 package de.uni_passau.fim.PADAS.group3.DataDash.model;
 
+import java.time.LocalDate;
 import java.util.List;
 import java.util.Optional;
 import java.util.UUID;
@@ -12,9 +13,11 @@ import org.springframework.data.domain.Page;
 @Service
 public class DatasetService {
     private dataRepository datasetRepository;
+    private CategoryRepository categoryRepository;
 
-    public DatasetService(dataRepository datasetRepository) {
+    public DatasetService(dataRepository datasetRepository, CategoryRepository categoryRepository) {
         this.datasetRepository = datasetRepository;
+        this.categoryRepository = categoryRepository;
     }
 
     public List<Dataset> getAllDatasets() {
@@ -26,6 +29,7 @@ public class DatasetService {
     }
 
     public void addDataset(Dataset dataset) {
+        dataset.setDate(LocalDate.now());
         datasetRepository.save(dataset);
     }
 
@@ -93,9 +97,14 @@ public class DatasetService {
 
     public Page<Dataset> searchByOptionalCriteria(String search, String categories, String type, Pageable pageable) {
         //TODO: make it not Crash
-        Category category = categories.equals("%") ? null : Category.valueOf(categories);
+        //TODO: make it do useful stuff
+        Category category = categories.equals("%") ? null : categoryRepository.getCategoryById(UUID.fromString(categories)) ;
         Type t = type.equals("%") ? null : Type.valueOf(type);
 
-        return datasetRepository.searchByOptionalCriteria(Optional.ofNullable(search), Optional.ofNullable(category), Optional.ofNullable(t),pageable);
+        if(category == null){
+            return datasetRepository.searchByOptionalCriteria(Optional.ofNullable(search), Optional.ofNullable(t),pageable);
+        }
+        return datasetRepository.searchByOptionalCriteriaWithCategory(Optional.ofNullable(search), category, Optional.ofNullable(t),pageable);
     }
+
 }

src/main/java/de/uni_passau/fim/PADAS/group3/DataDash/model/LoadDummyDatabase.java

@@ -1,6 +1,7 @@
 package de.uni_passau.fim.PADAS.group3.DataDash.model;
 
 import java.util.List;
+import java.util.Random;
 
 import org.slf4j.LoggerFactory;
 import org.springframework.boot.CommandLineRunner;
@@ -15,15 +16,21 @@ public class LoadDummyDatabase {
     private static final org.slf4j.Logger log = LoggerFactory.getLogger(LoadDummyDatabase.class);
 
     @Bean  
-    CommandLineRunner initDatabase(dataRepository repository) {
+    CommandLineRunner initDatabase(dataRepository repository, CategoryRepository categoryRepository) {
 
       
 
         return args -> {
         for (int i = 0; i < 100; i++) {
-            Dataset dataset = new Dataset("Title" + i, "Abst" + i, "Description" + i, "Author" + i,null, Category.EDUCATION, Type.API);
+            Category category = new Category("Category" + i);
-            repository.save(dataset);
+            log.info("Preloading" + categoryRepository.save(category));
+
+            Dataset dataset = new Dataset("Title" + i, "Abst" + i, "Description" + i, "Author" + i,null, category, Type.API);
+            for (int j = 0; j < new Random().nextInt(50); j++) {
+                dataset.upvote();
+            }
             log.info("Preloading" + repository.save(dataset));
+            log.info("Preloading" + categoryRepository.save(category));
         }
         List<Dataset> s = repository.findByTitleLike("%Title%");
         log.info("Found Entry with ID: " + s.get(1).getId());};

src/main/java/de/uni_passau/fim/PADAS/group3/DataDash/model/dataRepository.java

@@ -65,10 +65,19 @@ public interface dataRepository extends JpaRepository<Dataset, UUID> {
                         "((LOWER(d.title) LIKE LOWER(:search)) OR " +
                         "(LOWER(d.description) LIKE LOWER(:search)) OR " +
                         "(LOWER(d.author) LIKE LOWER(:search))) AND" +
-                        "(:categorie IS NULL OR d.categorie = :categorie) AND" +
+                        "(d.categorie = :categorie) AND" +
                         "(:type IS NULL OR d.type = :type)")
-        Page<Dataset> searchByOptionalCriteria(@Param("search") Optional<String> search,
+        Page<Dataset> searchByOptionalCriteriaWithCategory(@Param("search") Optional<String> search,
-                        @Param("categorie") Optional<Category> categories,
+                        @Param("categorie") Category categories,
                         @Param("type") Optional<Type> type,
                         Pageable pageable);
-}
+
+        @Query("SELECT d FROM Dataset d WHERE " +
+                        "((LOWER(d.title) LIKE LOWER(:search)) OR " +
+                        "(LOWER(d.description) LIKE LOWER(:search)) OR " +
+                        "(LOWER(d.author) LIKE LOWER(:search))) AND" +
+                        "(:type IS NULL OR d.type = :type)")
+        Page<Dataset> searchByOptionalCriteria(@Param("search") Optional<String> search,
+                        @Param("type") Optional<Type> type,
+                        Pageable pageable);
+}

src/main/resources/static/add.css

@@ -4,20 +4,6 @@
     --accent-color: oklch(65.33% 0.158 247.76);
 }
 
-form label:after {
-    content: ":";
-}
-
-form :is(input[type=text], textarea) {
-    background-color: var(--fg-color);
-    border: none;
-    border-radius: .25lh;
-    color: var(--text-color, white);
-    padding: .5em;
-    font-family: sans-serif;
-}
-
-/* quick info box */
 form {
     display: grid;
     grid-template-columns: 1fr 1fr auto;
@@ -30,17 +16,57 @@ form > * {
     gap: 1rem;
 }
 
-form :is(input[type=text], textarea) {
+form label:after {
+    content: ":";
+}
+
+/* text entries */
+form :is(input[type=text], input[type=url], textarea) {
+    background-color: var(--fg-color);
+    border: none;
+    border-radius: .25lh;
+    color: var(--text-color, white);
+    padding: .5em;
+    font-family: sans-serif;
     flex-grow: 1;
 }
 
+/* focus outlines */
+:is(form :is(input[type=text], input[type=url], textarea), .btn):focus-visible {
+    outline: 2px solid var(--accent-color);
+}
+
+.btn, #is-dataset-toggle {
+    transition: outline ease-in 100ms;
+}
+
+/* input validation */
+form :is(input[type=text], input[type=url], textarea):user-valid {
+    --validation-color: lime;
+}
+
+form :is(input[type=text], input[type=url], textarea):user-invalid {
+    --validation-color: red;
+    outline-style: solid;
+}
+
+form :is(input[type=text], input[type=url], textarea):is(:user-valid, :user-invalid) {
+    outline-color: var(--validation-color);
+}
+
+form :is(input[type=text], input[type=url], textarea):is(:user-valid, :user-invalid):not(:focus-visible) {
+    outline-width: 1px;
+}
+
 /* switch */
 label:has(#is-dataset) {
     gap: 0;
 }
 
 #is-dataset {
-    display: none;
+    top: -100vh;
+    left: -100vw;
+    position: absolute;
 }
 
 #is-dataset-toggle {
@@ -66,6 +92,11 @@ label:has(#is-dataset) {
     box-sizing: border-box;
     background-color: var(--text-color);
     transition: inset-inline ease-out 50ms;
+    filter: drop-shadow(rgba(0, 0, 0, .8) 0 0 .25rem);
+}
+
+#is-dataset:focus-visible + #is-dataset-toggle {
+    outline: 2px solid var(--accent-color);
 }
 
 #is-dataset:not(:checked) + #is-dataset-toggle::before {
@@ -78,7 +109,11 @@ label:has(#is-dataset) {
 
 /* short description box */
 form :has(#short-description) {
-    grid-column: 1 / 3;
+    grid-column: 1 / 2;
+}
+
+form :has(#url) {
+    grid-column: 2 / 4;
 }
 
 /* full description box */
@@ -115,13 +150,18 @@ form :has(#short-description) {
     --drop-shadow-opacity: .5;
     --drop-shadow-offset-y: 0;
     --drop-shadow-blur: .25rem;
-    filter: drop-shadow(
+    --drop-shadow: drop-shadow(
         rgba(0, 0, 0, var(--drop-shadow-opacity))
         0 var(--drop-shadow-offset-y) var(--drop-shadow-blur)
     );
+    filter: var(--drop-shadow);
 }
 
-.btn:hover {
+.btn:focus-visible, #is-dataset:focus-visible + #is-dataset-toggle {
+    outline-offset: 2px;
+}
+
+.btn:not(:disabled):hover {
     background-color: color-mix(in oklab, var(--btn-color) 80%, var(--bg-color));
     --drop-shadow-opacity: .8;
     --drop-shadow-offset-y: .25rem;
@@ -131,3 +171,7 @@ form :has(#short-description) {
 .btn.suggested {
     --btn-color: var(--accent-color);
 }
+
+.btn:disabled {
+    filter: var(--drop-shadow) grayscale(.5) brightness(.5);
+}

src/main/resources/static/add.js

@@ -0,0 +1,59 @@
+const form = document.forms[0];
+const {
+    title: titleEntry,
+    author: authorEntry,
+    ["is-dataset"]: isDatasetSwitch,
+    ["short-description"]: shortDescriptionEntry,
+    url: urlEntry,
+    ["full-description"]: fullDescriptionEntry,
+    ["btn-add"]: addBtn,
+    ["btn-cancel"]: cancelBtn,
+} = form.elements;
+
+const validationListener = () => {
+    addBtn.disabled = !form.checkValidity();
+};
+
+// Register validationListener on all required inputs that must be valid
+[
+    titleEntry,
+    authorEntry,
+    shortDescriptionEntry,
+    urlEntry,
+    fullDescriptionEntry,
+].forEach(input => input.addEventListener("input", validationListener));
+
+form.addEventListener("submit", e => {
+    e.preventDefault();
+    if (!form.reportValidity()) return;
+
+    // Create the request body
+    const newContent = {
+        title: titleEntry.value,
+        author: authorEntry.value,
+        abst: shortDescriptionEntry.value,
+        url: urlEntry.value,
+        description: fullDescriptionEntry.value,
+        type: isDatasetSwitch.checked ? "API" : "DATASET",
+        categories: [],
+    };
+
+    console.debug(newContent);
+
+    // Don't allow several requests to be sent at the same time
+    addBtn.disabled = true;
+
+    fetch("/api/v1/datasets", {
+        method: "POST",
+        body: JSON.stringify(newContent),
+        headers: {
+            "Content-Type": "application/json;charset=utf-8"
+        }
+    }).then(response => {
+        if (response.status == 200) {
+            location.assign("/");
+        } else {
+            addBtn.disabled = !form.checkValidity();
+        }
+    });
+});

src/main/resources/static/contentUtility.js

@@ -0,0 +1,27 @@
+import {searchBarTimeout, searchSection} from "./main.js"
+import Dataset from "./dataset.js"
+
+export function fetchQuery(fetchString) {
+    clearTimeout(searchBarTimeout);
+    fetch(fetchString)
+        .then(resp => resp.json())
+        .then((data) => {
+            parseContent(data.content);
+        });
+}
+
+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/dataset.js

@@ -0,0 +1,51 @@
+import { vote } from "./main.js";
+
+export default class Dataset {
+    #abstract;
+    #author;
+    #categories;
+    #date;
+    #description;
+    #id;
+    #rating;
+    #title;
+    #type;
+    #upvotes;
+    #url;
+    #votes;
+
+    constructor({abst: shortDescription, author, categories, date, description, id, rating, title, type, upvotes, url, votes}) {
+        this.#abstract = shortDescription;
+        this.#author = author;
+        this.#categories = categories;
+        this.#date = date;
+        this.#description = description;
+        this.#id = id;
+        this.#rating = rating;
+        this.#title = title;
+        this.#type = type;
+        this.#upvotes = upvotes;
+        this.#url = url;
+        this.#votes = votes;
+    }
+
+    createDatasetHTMLElement() {
+        let template = document.querySelector("#dataset-template");
+        const clone = template.content.cloneNode(true);
+        clone.querySelector(".dataset").dataset.id = this.#id;
+        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.css

@@ -4,7 +4,7 @@
     --text-color: #dbdbdb;
     --pad-datasets: 1rem;
     --pad-main: 2rem;
-    --min-card-size: 60ch;
+    --min-card-size: min(60ch, 33vw);
     --corner-radius: 1rem;
     font-size: 12pt;
     font-family: sans-serif;
@@ -49,6 +49,9 @@ header {
     gap: .5rem;
     background-color: var(--fg-color, darkgrey);
     padding: .5rem 1rem;
+    margin-bottom: var(--pad-datasets);
+    margin-left: var(--pad-datasets);
+    margin-right: var(--pad-datasets);
     border-radius: 1.5rem;
 }
 
@@ -58,6 +61,37 @@ header {
     color: var(--text-color);
 }
 
+#nothing-found {
+    height: 60vh;
+    padding: 20vh 0;
+}
+
+#nothing-found-bg {
+    background: url("sad-looking-glass.svg") center no-repeat;
+    background-size: contain;
+    width: 100%;
+    height: 40vh;
+}
+
+#nothing-found-text {
+    text-align: center;
+}
+
+
+/*
+#search .datasets:empty {
+    background: url("sad-looking-glass.svg");
+    height: 7rem;
+    width: 7rem;
+    padding: var(--pad-main);
+}
+
+ */
+
+
+.hidden {
+    display: none;
+}
 #search-entry:focus-visible {
     outline: none;
 }
@@ -69,14 +103,18 @@ header {
     gap: 1rem;
 }
 
-@container (width < 80ch) {
+
+
+
+
+@container (width < 60ch) {
     .datasets {
         grid-template-columns: 1fr;
     }
 }
 
 .dataset {
-    padding: 1rem 2rem;
+    padding: var(--pad-datasets) 2rem;
     background-color: var(--fg-color, darkgrey);
     border-radius: var(--corner-radius);
     list-style: none;
@@ -136,10 +174,22 @@ header {
     background-color: var(--bg-color);
 }
 
-:is(.upvote-btn, .downvote-btn, #search-btn, #filter-btn, #sort-btn, #add-btn):is(:hover, :focus-visible) {
+#add-btn:is(:hover, :focus-visible) {
+    filter: brightness(1.2);
+}
+
+#add-btn:active {
+    filter: brightness(1.3);
+}
+
+.btn.flat {
+    transition: filter ease-out 50ms;
+}
+
+.btn.flat:is(:hover, :focus-visible) {
     filter: brightness(1.5);
 }
 
-:is(.upvote-btn, .downvote-btn, #search-btn, #filter-btn, #sort-btn, #add-btn):active {
+.btn.flat:active {
     filter: brightness(1.75);
 }

src/main/resources/static/main.js

@@ -0,0 +1,161 @@
+import { fetchQuery } from "./contentUtility.js";
+
+const apiEndpoint = "/api/v1/datasets";
+const baseURL = location.origin;
+const defaultPagingValue = 20;
+const lastQuery = {
+    url: "",
+    totalPages: 0,
+    currentPage: 0
+};
+
+// definition of all buttons & sections
+const addButton = document.getElementById("add-btn");
+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 upvoteButtons = document.getElementsByClassName("upvote-btn");
+const downvoteButtons = document.getElementsByClassName("downvote-btn");
+export const searchSection = document.getElementById("search");
+const recentSection = document.getElementById("recents");
+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", () => {
+    navigateToAdd();
+});
+
+filterButton.addEventListener("change", () => {
+    const filterString = filterButton.value;
+    filter(filterString);
+});
+
+searchButton.addEventListener("click", () => {
+    const searchString = searchBar.value;
+    search(searchString);
+});
+
+searchBar.addEventListener("input", () => {
+    updateSections();
+    clearTimeout(searchBarTimeout);
+    searchBarTimeout = setTimeout(() => {
+        const searchString = searchBar.value;
+        search(searchString);
+    }, searchDelay);
+});
+
+searchBar.addEventListener('keypress', function (e) {
+    if (e.key === 'Enter') {
+        const searchString = searchBar.value;
+        search(searchString);
+    }
+})
+
+sortButton.addEventListener("change", () => {
+    const sortString = sortButton.value;
+    sort(sortString);
+});
+
+// Consider moving this to datasets.js completely
+const upvoteButtonClickListener = e => {
+    const entryID = e.target.parentElement.parentElement.dataset.id;
+    vote(entryID, true);
+};
+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);
+};
+for (const downvoteButton of downvoteButtons) {
+    downvoteButton.addEventListener("click", downvoteButtonClickListener);
+}
+
+// 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";
+    } 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);
+}
+
+export function vote(entryID, up) {
+    const fetchURL = new URL(
+        `${apiEndpoint}/id/${entryID}/${up ? "up" : "down"}vote`,
+        baseURL,
+    );
+    console.log(fetchURL); // TODO: remove
+    fetch(fetchURL, {
+        method: "PUT", //mode: 'no-cors'
+        headers: {
+            'Content-Type': 'application/json',
+            // Add other headers as needed
+        },
+    });
+    /*.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/static/sad-looking-glass.svg

@@ -1,2 +1,7 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="16" height="16" viewBox="0 0 16 16" version="1.1" id="sad-looking-glass" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"><g id="main-layer"><path id="looking-glass" style="fill:none;stroke:#222222;stroke-width:1.5;stroke-linecap:round" d="M 11.22141,6 A 5.2214103,5.2214103 0 0 1 6,11.22141 5.2214103,5.2214103 0 0 1 0.77858973,6 5.2214103,5.2214103 0 0 1 6,0.77858973 5.2214103,5.2214103 0 0 1 11.22141,6 Z M 15.25,15.25 10,10" /><circle style="fill:#222222" id="left-eye" cx="4" cy="4.75" r="0.75" /><circle style="fill:#222222" id="right-eye" cx="8" cy="4.75" r="0.75" /><path style="fill:none;stroke:#222222;stroke-width:1.5;stroke-linecap:round" d="M 4,8 C 6,6.5 8,8 8,8" id="mouth" /></g></svg>
+<svg width="16" height="16" viewBox="0 0 16 16" version="1.1" id="sad-looking-glass" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+    <g id="main-layer">
+        <path id="looking-glass" style="fill:none;stroke:#aaa;stroke-width:1;stroke-linecap:round" d="M 11.22141,6 A 5.2214103,5.2214103 0 0 1 6,11.22141 5.2214103,5.2214103 0 0 1 0.77858973,6 5.2214103,5.2214103 0 0 1 6,0.77858973 5.2214103,5.2214103 0 0 1 11.22141,6 Z M 15.25,15.25 10,10" />
+        <circle style="fill:#aaa" id="left-eye" cx="4" cy="4.75" r="0.75" />
+        <circle style="fill:#aaa" id="right-eye" cx="8" cy="4.75" r="0.75" />
+        <path style="fill:none;stroke:#aaa;stroke-width:1;stroke-linecap:round" d="M 4,8 C 6,6.5 8,8 8,8" id="mouth" /></g></svg>

src/main/resources/templates/add.html

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>DataDash – Add dataset/API</title>
     <link rel="stylesheet" href="add.css">
+    <script type="module" src="add.js"></script>
 </head>
 <body>
     <main>
@@ -19,15 +20,15 @@
                 how to use it.
             </p>
 
-            <form action="/api/add" method="post">
+            <form>
                 <span>
-                    <label for="text">Title</label>
+                    <label for="title">Title</label>
-                    <input type="text" name="title" id="title">
+                    <input type="text" name="title" id="title" minlength="1" maxlength="50" required>
                 </span>
 
                 <span id="author-box">
                     <label for="author">Author</label>
-                    <input type="text" name="author" id="author">
+                    <input type="text" name="author" id="author" required>
                 </span>
 
                 <label>
@@ -39,16 +40,21 @@
 
                 <span>
                     <label for="short-description">Short description</label>
-                    <input type="text" name="short-description" id="short-description">
+                    <input type="text" name="short-description" id="short-description" maxlength="100" required spellcheck="true">
+                </span>
+
+                <span>
+                    <label for="url">URL</label>
+                    <input type="url" name="url" id="url" required>
                 </span>
 
                 <span id="full-description-box">
                     <label for="full-description">Full description</label>
-                    <textarea name="full-description" id="full-description"></textarea>
+                    <textarea name="full-description" id="full-description" spellcheck="true"></textarea>
                 </span>
 
                 <span id="btn-bar">
-                    <input type="submit" value="Add" id="btn-add" class="btn suggested">
+                    <input type="submit" value="Add" id="btn-add" class="btn suggested" disabled>
                     <input type="reset" value="Cancel" id="btn-cancel" class="btn">
                 </span>
             </form>

src/main/resources/templates/index.html

@@ -5,52 +5,65 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>DataDash</title>
     <link rel="stylesheet" href="main.css">
+    <script type="module"  src="main.js" defer></script>
 </head>
 <body>
-    <div onclick="console.log('add')" id="add-btn"></div>
+    <div id="add-btn" title="Add a new API entry"></div>
     <main>
         <header>
             <h1>Welcome to DataDash</h1>
             <p>The place to launch and discover datasets and API endpoints.</p>
         </header>
 
+        <template id="dataset-template">
+            <li class="dataset" data-id="id">
+                <div class="dataset-info">
+                    <div class="details">
+                        <h3>title</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>
+        </template>
+
         <section id="tool-bar">
-            <select id="sort-btn">Sort by
+            <select id="sort-btn" class="btn flat" title="Sort entries">Sort by
-                <option>Option 1</option>
+                <option>Date newest-oldest</option>
-                <option>Option 2</option>
+                <option>Date oldest-newest</option>
+                <option>Author A-Z</option>
+                <option>Author Z-A</option>
+                <option>Title A-Z</option>
+                <option>Title Z-A</option>
+                <option>Stars ↑</option>
+                <option>Stars ↓</option>
+                <option>Votes ↑</option>
+                <option>Votes ↓</option>
             </select>
             <div class="divider"></div>
-            <select id="filter-btn">Filter
+            <select class="btn flat" id="filter-btn" title="Filter entries">Filter
                 <optgroup label="Standard categories">
-                    <option>Option 1</option>
+                    <option>Dataset</option>
-                    <option>Option 2</option>
+                    <option>API</option>
                 </optgroup>
-                <optgroup label="User categories">
+                <optgroup label="Other categories">
-                    <option>user category</option>
+                    <option>a category</option>
                 </optgroup>
             </select>
             <input type="search" name="query" id="search-entry" placeholder="Search">
-            <button id="search-btn">Search</button>
+            <button class="btn flat" id="search-btn" title="Search entries">Search</button>
         </section>
 
         <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 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">Upvote</button>
-                        <span class="upvote-count">0</span>
-                        <button class="downvote-btn">Downvote</button>
-                    </aside>
-                </li>
                 <li class="dataset">
                     <div class="dataset-info">
                         <div class="icon tori"></div>
@@ -60,9 +73,9 @@
                         </div>
                     </div>
                     <aside class="upvote">
-                        <button class="upvote-btn">Upvote</button>
+                        <button class="upvote-btn btn flat">Upvote</button>
                         <span class="upvote-count">0</span>
-                        <button class="downvote-btn">Downvote</button>
+                        <button class="downvote-btn btn flat">Downvote</button>
                     </aside>
                 </li>
                 <li class="dataset">
@@ -74,9 +87,9 @@
                         </div>
                     </div>
                     <aside class="upvote">
-                        <button class="upvote-btn">Upvote</button>
+                        <button class="upvote-btn btn flat">Upvote</button>
                         <span class="upvote-count">0</span>
-                        <button class="downvote-btn">Downvote</button>
+                        <button class="downvote-btn btn flat">Downvote</button>
                     </aside>
                 </li>
                 <li class="dataset">
@@ -88,9 +101,9 @@
                         </div>
                     </div>
                     <aside class="upvote">
-                        <button class="upvote-btn">Upvote</button>
+                        <button class="upvote-btn btn flat">Upvote</button>
                         <span class="upvote-count">0</span>
-                        <button class="downvote-btn">Downvote</button>
+                        <button class="downvote-btn btn flat">Downvote</button>
                     </aside>
                 </li>
                 <li class="dataset">
@@ -102,9 +115,9 @@
                         </div>
                     </div>
                     <aside class="upvote">
-                        <button class="upvote-btn">Upvote</button>
+                        <button class="upvote-btn btn flat">Upvote</button>
                         <span class="upvote-count">0</span>
-                        <button class="downvote-btn">Downvote</button>
+                        <button class="downvote-btn btn flat">Downvote</button>
                     </aside>
                 </li>
             </ul>
@@ -121,18 +134,21 @@
                         </div>
                     </div>
                     <aside class="upvote">
-                        <button class="upvote-btn">Upvote</button>
+                        <button class="upvote-btn btn flat">Upvote</button>
                         <span class="upvote-count">0</span>
-                        <button class="downvote-btn">Downvote</button>
+                        <button class="downvote-btn btn flat">Downvote</button>
                     </aside>
                 </li>
             </ul>
         </section>
 
-        <section id="search">
+        <section id="search" class="hidden">
             <h2>Search results:</h2>
+            <div id="nothing-found">
+                <div id="nothing-found-bg"></div>
+                <h3 id="nothing-found-text">Nothing found</h3>
+            </div>
             <ul class="datasets">
-
             </ul>
         </section>
     </main>