From 3e131c49ae4148942fdf1e8b7d8c25d5b6c54028 Mon Sep 17 00:00:00 2001 From: J-Klinke Date: Tue, 18 Jun 2024 15:09:40 +0200 Subject: [PATCH 1/5] minor changes --- src/main/resources/static/main.css | 21 ++++++++++++---- src/main/resources/templates/index.html | 32 ++++++++++++------------- 2 files changed, 32 insertions(+), 21 deletions(-) diff --git a/src/main/resources/static/main.css b/src/main/resources/static/main.css index 0711eca..ece21e9 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,18 @@ 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:is(:hover, :focus-visible) { filter: brightness(1.5); } -:is(.upvote-btn, .downvote-btn, #search-btn, #filter-btn, #sort-btn, #add-btn):active { +.btn:active { filter: brightness(1.75); } diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html index 172c714..2ac398e 100644 --- a/src/main/resources/templates/index.html +++ b/src/main/resources/templates/index.html @@ -7,7 +7,7 @@ -
+

Welcome to DataDash

@@ -15,12 +15,12 @@
- Sort by
- Filter @@ -30,7 +30,7 @@ - +
@@ -46,9 +46,9 @@
  • @@ -60,9 +60,9 @@
  • @@ -74,9 +74,9 @@
  • @@ -88,9 +88,9 @@
  • @@ -102,9 +102,9 @@
    • @@ -121,9 +121,9 @@ From cddfdf546a4d77bd2fbe3f0d9f860c256fc9cab5 Mon Sep 17 00:00:00 2001 From: J-Klinke Date: Tue, 18 Jun 2024 15:57:08 +0200 Subject: [PATCH 2/5] js skeleton implemented --- src/main/resources/static/main.js | 61 +++++++++++++++++++++++++ src/main/resources/templates/index.html | 3 +- 2 files changed, 63 insertions(+), 1 deletion(-) create mode 100644 src/main/resources/static/main.js diff --git a/src/main/resources/static/main.js b/src/main/resources/static/main.js new file mode 100644 index 0000000..cb3f480 --- /dev/null +++ b/src/main/resources/static/main.js @@ -0,0 +1,61 @@ + +const addButton = document.getElementById("add-btn"); +addButton.addEventListener("click", () => { + navigateToAdd(); +}); + +const filterButton = document.getElementById("filter-btn"); +filterButton.addEventListener("change", () => { + const filterString = filterButton.value; + filter(filterString); +}); + +const searchButton = document.getElementById("search-btn"); +searchButton.addEventListener("click", () => { + const searchString = searchBar.value; + search(searchString); +}); +const searchBar = document.getElementById("search-entry"); +searchBar.addEventListener("change", () => { + const searchString = searchBar.value; + search(searchString); +}); + +const sortButton = document.getElementById("sort-btn"); +sortButton.addEventListener("change", () => { + const sortString = sortButton.value; + sort(sortString); +}); + +const upvoteButton = document.getElementsByClassName("upvote-btn"); +upvoteButton.addEventListener("click", () => { + //const entryID = ; + vote(entryID, true); +}); + +const downvoteButton = document.getElementsByClassName("downvote-btn"); +downvoteButton.addEventListener("click", () => { + //const entryID; + vote(entryID, false); +}); + +function navigateToAdd() { + +} + +function filter(filterString) { + +} + +function search(searchString) { + +} + +function sort(sortString) { + +} + +function vote(entryID, up) { + fetch() + +} \ No newline at end of file diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html index 2ac398e..15c2664 100644 --- a/src/main/resources/templates/index.html +++ b/src/main/resources/templates/index.html @@ -4,7 +4,8 @@ DataDash - + +
    From d5fd98a0666b025ee901c4f70719cc67391a152a Mon Sep 17 00:00:00 2001 From: J-Klinke Date: Tue, 18 Jun 2024 16:38:09 +0200 Subject: [PATCH 3/5] main.js further implemented --- src/main/resources/static/main.js | 27 +++++++++++++++---------- src/main/resources/templates/index.html | 6 +++--- 2 files changed, 19 insertions(+), 14 deletions(-) diff --git a/src/main/resources/static/main.js b/src/main/resources/static/main.js index cb3f480..c7ab0aa 100644 --- a/src/main/resources/static/main.js +++ b/src/main/resources/static/main.js @@ -16,7 +16,7 @@ searchButton.addEventListener("click", () => { search(searchString); }); const searchBar = document.getElementById("search-entry"); -searchBar.addEventListener("change", () => { +searchBar.addEventListener("input", () => { const searchString = searchBar.value; search(searchString); }); @@ -27,17 +27,23 @@ sortButton.addEventListener("change", () => { sort(sortString); }); -const upvoteButton = document.getElementsByClassName("upvote-btn"); -upvoteButton.addEventListener("click", () => { - //const entryID = ; +const upvoteButtons = document.getElementsByClassName("upvote-btn"); +const upvoteButtonClickListener = () => { + const entryID = upvoteButton.parent.dataset.id; vote(entryID, true); -}); +}; +for (const upvoteButton of upvoteButtons) { + upvoteButton.addEventListener("click", upvoteButtonClickListener); +} -const downvoteButton = document.getElementsByClassName("downvote-btn"); -downvoteButton.addEventListener("click", () => { - //const entryID; +const downvoteButtons = document.getElementsByClassName("downvote-btn"); +const downvoteButtonClickListener = () => { + const entryID = downvoteButton.parent.dataset.id; vote(entryID, false); -}); +}; +for (const downvoteButton of downvoteButtons) { + downvoteButton.addEventListener("click", downvoteButtonClickListener); +} function navigateToAdd() { @@ -48,7 +54,7 @@ function filter(filterString) { } function search(searchString) { - + console.log(searchString); } function sort(sortString) { @@ -57,5 +63,4 @@ function sort(sortString) { function vote(entryID, up) { fetch() - } \ No newline at end of file diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html index 15c2664..d345799 100644 --- a/src/main/resources/templates/index.html +++ b/src/main/resources/templates/index.html @@ -4,8 +4,8 @@ DataDash - - + +
    @@ -38,7 +38,7 @@

    Recently added:

      -
    • +
    • From 65d9e8ea1f440e533808b239833ba350a9fcc6f0 Mon Sep 17 00:00:00 2001 From: J-Klinke Date: Thu, 20 Jun 2024 15:07:00 +0200 Subject: [PATCH 4/5] main.js mostly done, started implmenting contentUtility.js added sort options to index.html --- src/main/resources/static/contentUtility.js | 11 +++++ src/main/resources/static/main.js | 46 +++++++++++++++++---- src/main/resources/templates/index.html | 10 ++++- 3 files changed, 56 insertions(+), 11 deletions(-) create mode 100644 src/main/resources/static/contentUtility.js diff --git a/src/main/resources/static/contentUtility.js b/src/main/resources/static/contentUtility.js new file mode 100644 index 0000000..eb2c2ce --- /dev/null +++ b/src/main/resources/static/contentUtility.js @@ -0,0 +1,11 @@ +function fetchQuery(fetchString) { + fetch(fetchString) + .then(resp => resp.json()) + .then((data) => { + parseContent(data.content); + }); +} + +function parseContent(content) { + +} diff --git a/src/main/resources/static/main.js b/src/main/resources/static/main.js index c7ab0aa..9b74cd2 100644 --- a/src/main/resources/static/main.js +++ b/src/main/resources/static/main.js @@ -1,3 +1,10 @@ +const baseURL = "http://" + window.location.host + "/api/v1/datasets"; +const defaultPagingValue = 20; +const lastQuery = { + url: "", + totalPages: 0, + currentPage: 0 +}; const addButton = document.getElementById("add-btn"); addButton.addEventListener("click", () => { @@ -28,8 +35,8 @@ sortButton.addEventListener("change", () => { }); const upvoteButtons = document.getElementsByClassName("upvote-btn"); -const upvoteButtonClickListener = () => { - const entryID = upvoteButton.parent.dataset.id; +const upvoteButtonClickListener = e => { + const entryID = e.target.parentElement.parentElement.dataset.id; vote(entryID, true); }; for (const upvoteButton of upvoteButtons) { @@ -37,8 +44,8 @@ for (const upvoteButton of upvoteButtons) { } const downvoteButtons = document.getElementsByClassName("downvote-btn"); -const downvoteButtonClickListener = () => { - const entryID = downvoteButton.parent.dataset.id; +const downvoteButtonClickListener = e => { + const entryID = e.target.parentElement.parentElement.dataset.id; vote(entryID, false); }; for (const downvoteButton of downvoteButtons) { @@ -50,17 +57,38 @@ function navigateToAdd() { } function filter(filterString) { - + filterString = filterString.toUpperCase(); + const fetchURL = baseURL + "?type=" + filterString + "&size=" + defaultPagingValue; + fetchQuery(fetchURL); } function search(searchString) { - console.log(searchString); + const fetchURL = baseURL + "?search=" + encodeURIComponent(searchString.length === 0?"%":searchString); + console.log(fetchURL); + fetchQuery(fetchURL); } function sort(sortString) { - + let query = sortString.toLowerCase().split(" "); + if (query[1] === "A-Z" || query[1] === "↑") { + query[1] = "asc"; + } else { + query[1] = "desc"; + } + const fetchURL = baseURL + "?sort=" + query[0] + "&direction=" + query[1]; + console.log(fetchURL); + fetchQuery(fetchURL); } function vote(entryID, up) { - fetch() -} \ No newline at end of file + console.log(baseURL + "/id/" + entryID + "/" + (up?"upvote":"downvote")); + fetch(baseURL + "/id/" + entryID + "/" + up?"upvote":"downvote"); +} + +function incrementPageCount() { + lastQuery.currentPage++; +} + + + + diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html index d345799..f80de12 100644 --- a/src/main/resources/templates/index.html +++ b/src/main/resources/templates/index.html @@ -17,8 +17,14 @@