diff --git a/src/main/java/de/uni_passau/fim/PADAS/group3/DataDash/model/LoadDummyDatabase.java b/src/main/java/de/uni_passau/fim/PADAS/group3/DataDash/model/LoadDummyDatabase.java index 42de661..dd6d8e0 100644 --- a/src/main/java/de/uni_passau/fim/PADAS/group3/DataDash/model/LoadDummyDatabase.java +++ b/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; @@ -22,7 +23,9 @@ public class LoadDummyDatabase { 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); - repository.save(dataset); + for (int j = 0; j < new Random().nextInt(50); j++) { + dataset.upvote(); + } log.info("Preloading" + repository.save(dataset)); } List s = repository.findByTitleLike("%Title%"); diff --git a/src/main/resources/static/contentUtility.js b/src/main/resources/static/contentUtility.js index 61c9f36..fc7b5b6 100644 --- a/src/main/resources/static/contentUtility.js +++ b/src/main/resources/static/contentUtility.js @@ -1,4 +1,5 @@ -import { searchBarTimeout } from "./main.js" +import {searchBarTimeout, searchSection} from "./main.js" +import Dataset from "./dataset.js" export function fetchQuery(fetchString) { clearTimeout(searchBarTimeout); @@ -11,4 +12,17 @@ export function fetchQuery(fetchString) { function parseContent(content) { //TODO: method for parsing query results + 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); + 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/dataset.js b/src/main/resources/static/dataset.js new file mode 100644 index 0000000..8f454ec --- /dev/null +++ b/src/main/resources/static/dataset.js @@ -0,0 +1,39 @@ +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; + return clone; + } +} diff --git a/src/main/resources/static/main.css b/src/main/resources/static/main.css index 3c2d591..63566c3 100644 --- a/src/main/resources/static/main.css +++ b/src/main/resources/static/main.css @@ -61,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; } @@ -72,6 +103,10 @@ header { gap: 1rem; } + + + + @container (width < 60ch) { .datasets { grid-template-columns: 1fr; diff --git a/src/main/resources/static/main.js b/src/main/resources/static/main.js index 91dd9e0..3cc733a 100644 --- a/src/main/resources/static/main.js +++ b/src/main/resources/static/main.js @@ -2,6 +2,7 @@ import { fetchQuery } from "./contentUtility.js"; const apiEndpoint = "/api/v1/datasets"; const baseURL = location.origin; +const searchDelay = 500; const defaultPagingValue = 20; const lastQuery = { url: "", @@ -17,6 +18,9 @@ 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; @@ -37,11 +41,21 @@ 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"); + } + clearTimeout(searchBarTimeout); searchBarTimeout = setTimeout(() => { const searchString = searchBar.value; search(searchString); - }, 1000); + }, searchDelay); }); searchBar.addEventListener('keypress', function (e) { diff --git a/src/main/resources/static/sad-looking-glass.svg b/src/main/resources/static/sad-looking-glass.svg index 7ad3841..ab99a6e 100644 --- a/src/main/resources/static/sad-looking-glass.svg +++ b/src/main/resources/static/sad-looking-glass.svg @@ -1,2 +1,7 @@ - + + + + + + diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html index 4355483..a9f7128 100644 --- a/src/main/resources/templates/index.html +++ b/src/main/resources/templates/index.html @@ -15,6 +15,22 @@

The place to launch and discover datasets and API endpoints.

+ +