diff --git a/src/main/resources/static/add.css b/src/main/resources/static/add.css index 4361843..a4b4b92 100644 --- a/src/main/resources/static/add.css +++ b/src/main/resources/static/add.css @@ -66,6 +66,7 @@ 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:not(:checked) + #is-dataset-toggle::before { diff --git a/src/main/resources/static/contentUtility.js b/src/main/resources/static/contentUtility.js new file mode 100644 index 0000000..61c9f36 --- /dev/null +++ b/src/main/resources/static/contentUtility.js @@ -0,0 +1,14 @@ +import { searchBarTimeout } from "./main.js" + +export function fetchQuery(fetchString) { + clearTimeout(searchBarTimeout); + fetch(fetchString) + .then(resp => resp.json()) + .then((data) => { + parseContent(data.content); + }); +} + +function parseContent(content) { + //TODO: method for parsing query results +} diff --git a/src/main/resources/static/main.css b/src/main/resources/static/main.css index 0711eca..3c2d591 100644 --- a/src/main/resources/static/main.css +++ b/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; } @@ -69,14 +72,14 @@ 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 +139,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); } diff --git a/src/main/resources/static/main.js b/src/main/resources/static/main.js new file mode 100644 index 0000000..91dd9e0 --- /dev/null +++ b/src/main/resources/static/main.js @@ -0,0 +1,127 @@ +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 +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"); + +// ID of the timeout, because we need to cancel it at some point +export let searchBarTimeout; + +// 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", () => { + clearTimeout(searchBarTimeout); + searchBarTimeout = setTimeout(() => { + const searchString = searchBar.value; + search(searchString); + }, 1000); +}); + +searchBar.addEventListener('keypress', function (e) { + if (e.key === 'Enter') { + const searchString = searchBar.value; + search(searchString); + } +}) + +sortButton.addEventListener("change", () => { + const sortString = sortButton.value; + sort(sortString); +}); + +const upvoteButtonClickListener = e => { + const entryID = e.target.parentElement.parentElement.dataset.id; + vote(entryID, true); +}; +for (const upvoteButton of upvoteButtons) { + upvoteButton.addEventListener("click", upvoteButtonClickListener); +} + +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 +} + +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] = "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) { + const fetchURL = new URL( + `${apiEndpoint}/id/${entryID}/${up ? "up" : "down"}vote`, + baseURL, + ); + + console.log(fetchURL); // TODO: remove + fetch(fetchURL); +} + +function incrementPageCount() { + lastQuery.currentPage++; +} diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html index 172c714..4355483 100644 --- a/src/main/resources/templates/index.html +++ b/src/main/resources/templates/index.html @@ -5,9 +5,10 @@ DataDash + -
+

Welcome to DataDash

@@ -15,29 +16,35 @@
- Sort by + + + + + + + +
- Filter - - + + - - + + - +

Recently added:

@@ -121,9 +128,9 @@