From 00a1f4f12c5eebccebcea1285662e68de67b66fb Mon Sep 17 00:00:00 2001 From: Elias Schriefer Date: Tue, 18 Jun 2024 15:40:39 +0200 Subject: [PATCH 1/8] Fix button styling for 'add' page --- src/main/resources/static/add.css | 1 + src/main/resources/static/main.css | 8 +++++-- src/main/resources/templates/index.html | 30 ++++++++++++------------- 3 files changed, 22 insertions(+), 17 deletions(-) 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/main.css b/src/main/resources/static/main.css index ece21e9..3c2d591 100644 --- a/src/main/resources/static/main.css +++ b/src/main/resources/static/main.css @@ -147,10 +147,14 @@ header { filter: brightness(1.3); } -.btn:is(:hover, :focus-visible) { +.btn.flat { + transition: filter ease-out 50ms; +} + +.btn.flat:is(:hover, :focus-visible) { filter: brightness(1.5); } -.btn:active { +.btn.flat:active { filter: brightness(1.75); } diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html index 2ac398e..0a7587d 100644 --- a/src/main/resources/templates/index.html +++ b/src/main/resources/templates/index.html @@ -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 180770f28eacc9ec687a7101455232d94c5671ff Mon Sep 17 00:00:00 2001 From: J-Klinke Date: Thu, 20 Jun 2024 15:54:01 +0200 Subject: [PATCH 2/8] refined search minor bugfixes in other functionalities --- src/main/resources/static/contentUtility.js | 5 ++++- src/main/resources/static/main.js | 23 ++++++++++++++++----- src/main/resources/templates/index.html | 2 +- 3 files changed, 23 insertions(+), 7 deletions(-) diff --git a/src/main/resources/static/contentUtility.js b/src/main/resources/static/contentUtility.js index eb2c2ce..dc3eace 100644 --- a/src/main/resources/static/contentUtility.js +++ b/src/main/resources/static/contentUtility.js @@ -1,4 +1,7 @@ -function fetchQuery(fetchString) { +import {searchBarTimeout} from "./main.js" + +export function fetchQuery(fetchString) { + clearTimeout(searchBarTimeout); fetch(fetchString) .then(resp => resp.json()) .then((data) => { diff --git a/src/main/resources/static/main.js b/src/main/resources/static/main.js index 9b74cd2..0c30d5b 100644 --- a/src/main/resources/static/main.js +++ b/src/main/resources/static/main.js @@ -1,3 +1,5 @@ +import { fetchQuery } from "./contentUtility.js"; + const baseURL = "http://" + window.location.host + "/api/v1/datasets"; const defaultPagingValue = 20; const lastQuery = { @@ -23,10 +25,20 @@ searchButton.addEventListener("click", () => { search(searchString); }); const searchBar = document.getElementById("search-entry"); +export let searchBarTimeout; searchBar.addEventListener("input", () => { - const searchString = searchBar.value; - search(searchString); + 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); + } +}) const sortButton = document.getElementById("sort-btn"); sortButton.addEventListener("change", () => { @@ -58,19 +70,20 @@ function navigateToAdd() { function filter(filterString) { filterString = filterString.toUpperCase(); - const fetchURL = baseURL + "?type=" + filterString + "&size=" + defaultPagingValue; + const fetchURL = baseURL + "?type=" + encodeURIComponent(filterString) + "&size=" + defaultPagingValue; + console.log(fetchURL) fetchQuery(fetchURL); } function search(searchString) { - const fetchURL = baseURL + "?search=" + encodeURIComponent(searchString.length === 0?"%":searchString); + const fetchURL = baseURL + "/search" + "?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] === "↑") { + if (query[1] === "a-z" || query[1] === "↑") { query[1] = "asc"; } else { query[1] = "desc"; diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html index f80de12..7969a63 100644 --- a/src/main/resources/templates/index.html +++ b/src/main/resources/templates/index.html @@ -5,7 +5,7 @@ DataDash - +
    From 11cd870fde1c863af29752de78c87243663998d9 Mon Sep 17 00:00:00 2001 From: J-Klinke Date: Thu, 20 Jun 2024 15:59:03 +0200 Subject: [PATCH 3/8] resolved merge conflict --- src/main/resources/templates/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html index 7969a63..45519f3 100644 --- a/src/main/resources/templates/index.html +++ b/src/main/resources/templates/index.html @@ -16,7 +16,7 @@
    - Sort by From b8c23f7e246996449fd52bfc90bd29a802a5de2b Mon Sep 17 00:00:00 2001 From: J-Klinke Date: Fri, 21 Jun 2024 10:43:04 +0200 Subject: [PATCH 4/8] added comments --- src/main/resources/static/contentUtility.js | 2 +- src/main/resources/static/main.js | 5 ++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/main/resources/static/contentUtility.js b/src/main/resources/static/contentUtility.js index dc3eace..e3adfe5 100644 --- a/src/main/resources/static/contentUtility.js +++ b/src/main/resources/static/contentUtility.js @@ -10,5 +10,5 @@ export function fetchQuery(fetchString) { } function parseContent(content) { - + //TODO: method for parsing query results } diff --git a/src/main/resources/static/main.js b/src/main/resources/static/main.js index 0c30d5b..4f4cbf7 100644 --- a/src/main/resources/static/main.js +++ b/src/main/resources/static/main.js @@ -8,6 +8,7 @@ const lastQuery = { currentPage: 0 }; +// definition of all buttons const addButton = document.getElementById("add-btn"); addButton.addEventListener("click", () => { navigateToAdd(); @@ -24,6 +25,7 @@ searchButton.addEventListener("click", () => { const searchString = searchBar.value; search(searchString); }); + const searchBar = document.getElementById("search-entry"); export let searchBarTimeout; searchBar.addEventListener("input", () => { @@ -64,8 +66,9 @@ 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) { From cd7bfc037066aac7396f80d89cc2cffa1eb116ad Mon Sep 17 00:00:00 2001 From: J-Klinke Date: Fri, 21 Jun 2024 11:07:49 +0200 Subject: [PATCH 5/8] added todos --- src/main/resources/static/main.js | 8 ++++---- src/main/resources/templates/index.html | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/main/resources/static/main.js b/src/main/resources/static/main.js index 4f4cbf7..08adb7c 100644 --- a/src/main/resources/static/main.js +++ b/src/main/resources/static/main.js @@ -74,13 +74,13 @@ function navigateToAdd() { function filter(filterString) { filterString = filterString.toUpperCase(); const fetchURL = baseURL + "?type=" + encodeURIComponent(filterString) + "&size=" + defaultPagingValue; - console.log(fetchURL) + console.log(fetchURL); // TODO: remove fetchQuery(fetchURL); } function search(searchString) { const fetchURL = baseURL + "/search" + "?search=" + encodeURIComponent(searchString.length === 0?"%":searchString); - console.log(fetchURL); + console.log(fetchURL); // TODO: remove fetchQuery(fetchURL); } @@ -92,12 +92,12 @@ function sort(sortString) { query[1] = "desc"; } const fetchURL = baseURL + "?sort=" + query[0] + "&direction=" + query[1]; - console.log(fetchURL); + console.log(fetchURL); // TODO: remove fetchQuery(fetchURL); } function vote(entryID, up) { - console.log(baseURL + "/id/" + entryID + "/" + (up?"upvote":"downvote")); + console.log(baseURL + "/id/" + entryID + "/" + (up?"upvote":"downvote")); // TODO: remove fetch(baseURL + "/id/" + entryID + "/" + up?"upvote":"downvote"); } diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html index 5ac6b42..caa1721 100644 --- a/src/main/resources/templates/index.html +++ b/src/main/resources/templates/index.html @@ -8,7 +8,7 @@ -
    +

    Welcome to DataDash

    From 85213b25da891b15535a438d7f18bb2fe9068418 Mon Sep 17 00:00:00 2001 From: J-Klinke Date: Fri, 21 Jun 2024 11:12:42 +0200 Subject: [PATCH 6/8] changed filter presets --- src/main/resources/templates/index.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html index caa1721..4355483 100644 --- a/src/main/resources/templates/index.html +++ b/src/main/resources/templates/index.html @@ -29,11 +29,11 @@
    From c19459ad01db096bd3c51495ed80edf8e1dc487d Mon Sep 17 00:00:00 2001 From: Elias Schriefer Date: Fri, 21 Jun 2024 12:03:10 +0200 Subject: [PATCH 7/8] Little fixes --- src/main/resources/static/contentUtility.js | 2 +- src/main/resources/static/main.js | 31 +++++++++++---------- 2 files changed, 17 insertions(+), 16 deletions(-) diff --git a/src/main/resources/static/contentUtility.js b/src/main/resources/static/contentUtility.js index e3adfe5..61c9f36 100644 --- a/src/main/resources/static/contentUtility.js +++ b/src/main/resources/static/contentUtility.js @@ -1,4 +1,4 @@ -import {searchBarTimeout} from "./main.js" +import { searchBarTimeout } from "./main.js" export function fetchQuery(fetchString) { clearTimeout(searchBarTimeout); diff --git a/src/main/resources/static/main.js b/src/main/resources/static/main.js index 08adb7c..2f1d526 100644 --- a/src/main/resources/static/main.js +++ b/src/main/resources/static/main.js @@ -1,6 +1,6 @@ import { fetchQuery } from "./contentUtility.js"; -const baseURL = "http://" + window.location.host + "/api/v1/datasets"; +const apiEndpoint = "/api/v1/datasets"; const defaultPagingValue = 20; const lastQuery = { url: "", @@ -10,24 +10,31 @@ const lastQuery = { // 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(); }); -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"); -export let searchBarTimeout; searchBar.addEventListener("input", () => { clearTimeout(searchBarTimeout); searchBarTimeout = setTimeout(() => { @@ -35,6 +42,7 @@ searchBar.addEventListener("input", () => { search(searchString); }, 1000); }); + searchBar.addEventListener('keypress', function (e) { if (e.key === 'Enter') { const searchString = searchBar.value; @@ -42,13 +50,11 @@ searchBar.addEventListener('keypress', function (e) { } }) -const sortButton = document.getElementById("sort-btn"); sortButton.addEventListener("change", () => { const sortString = sortButton.value; sort(sortString); }); -const upvoteButtons = document.getElementsByClassName("upvote-btn"); const upvoteButtonClickListener = e => { const entryID = e.target.parentElement.parentElement.dataset.id; vote(entryID, true); @@ -57,7 +63,6 @@ for (const upvoteButton of upvoteButtons) { upvoteButton.addEventListener("click", upvoteButtonClickListener); } -const downvoteButtons = document.getElementsByClassName("downvote-btn"); const downvoteButtonClickListener = e => { const entryID = e.target.parentElement.parentElement.dataset.id; vote(entryID, false); @@ -91,20 +96,16 @@ function sort(sortString) { } else { query[1] = "desc"; } - const fetchURL = baseURL + "?sort=" + query[0] + "&direction=" + query[1]; + const fetchURL = apiEndpoint + "?sort=" + query[0] + "&direction=" + query[1]; console.log(fetchURL); // TODO: remove fetchQuery(fetchURL); } function vote(entryID, up) { - console.log(baseURL + "/id/" + entryID + "/" + (up?"upvote":"downvote")); // TODO: remove - fetch(baseURL + "/id/" + entryID + "/" + up?"upvote":"downvote"); + console.log(apiEndpoint + "/id/" + entryID + "/" + (up ? "upvote" : "downvote")); // TODO: remove + fetch(apiEndpoint + "/id/" + entryID + "/" + (up ? "upvote" : "downvote")); } function incrementPageCount() { lastQuery.currentPage++; } - - - - From 5fda42856dfb86ec2085321342a821793558e44c Mon Sep 17 00:00:00 2001 From: Elias Schriefer Date: Fri, 21 Jun 2024 12:06:02 +0200 Subject: [PATCH 8/8] Fix filter + search urls --- src/main/resources/static/main.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/main/resources/static/main.js b/src/main/resources/static/main.js index 2f1d526..cf8b852 100644 --- a/src/main/resources/static/main.js +++ b/src/main/resources/static/main.js @@ -78,13 +78,13 @@ function navigateToAdd() { function filter(filterString) { filterString = filterString.toUpperCase(); - const fetchURL = baseURL + "?type=" + encodeURIComponent(filterString) + "&size=" + defaultPagingValue; + const fetchURL = apiEndpoint + "?type=" + encodeURIComponent(filterString) + "&size=" + defaultPagingValue; console.log(fetchURL); // TODO: remove fetchQuery(fetchURL); } function search(searchString) { - const fetchURL = baseURL + "/search" + "?search=" + encodeURIComponent(searchString.length === 0?"%":searchString); + const fetchURL = apiEndpoint + "/search" + "?search=" + encodeURIComponent(searchString.length === 0?"%":searchString); console.log(fetchURL); // TODO: remove fetchQuery(fetchURL); }