From 3e131c49ae4148942fdf1e8b7d8c25d5b6c54028 Mon Sep 17 00:00:00 2001 From: J-Klinke Date: Tue, 18 Jun 2024 15:09:40 +0200 Subject: [PATCH 01/30] 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 00a1f4f12c5eebccebcea1285662e68de67b66fb Mon Sep 17 00:00:00 2001 From: Elias Schriefer Date: Tue, 18 Jun 2024 15:40:39 +0200 Subject: [PATCH 02/30] 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 cddfdf546a4d77bd2fbe3f0d9f860c256fc9cab5 Mon Sep 17 00:00:00 2001 From: J-Klinke Date: Tue, 18 Jun 2024 15:57:08 +0200 Subject: [PATCH 03/30] 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 04/30] 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 05/30] 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 @@
      Sort by + Filter - - + + - - + + From ee5d9712f447f0ef0386976aafcdaf82d348885e Mon Sep 17 00:00:00 2001 From: Elias Schriefer Date: Fri, 21 Jun 2024 11:27:26 +0200 Subject: [PATCH 11/30] Implement JS + add URL field --- src/main/resources/static/add.css | 81 ++++++++++++++++++++------- src/main/resources/static/add.js | 56 ++++++++++++++++++ src/main/resources/templates/add.html | 18 ++++-- 3 files changed, 130 insertions(+), 25 deletions(-) create mode 100644 src/main/resources/static/add.js diff --git a/src/main/resources/static/add.css b/src/main/resources/static/add.css index a4b4b92..6d62a6f 100644 --- a/src/main/resources/static/add.css +++ b/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 { @@ -69,6 +95,10 @@ label:has(#is-dataset) { 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 { left: 0; } @@ -79,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 */ @@ -116,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; @@ -132,3 +171,7 @@ form :has(#short-description) { .btn.suggested { --btn-color: var(--accent-color); } + +.btn:disabled { + filter: var(--drop-shadow) grayscale(.5) brightness(.5); +} diff --git a/src/main/resources/static/add.js b/src/main/resources/static/add.js new file mode 100644 index 0000000..f35c62d --- /dev/null +++ b/src/main/resources/static/add.js @@ -0,0 +1,56 @@ +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), + }).then(response => { + if (response.status == 200) { + location.assign("/"); + } else { + addBtn.disabled = !checkValidity(); + } + }); +}); diff --git a/src/main/resources/templates/add.html b/src/main/resources/templates/add.html index d8472c1..eb8cd36 100644 --- a/src/main/resources/templates/add.html +++ b/src/main/resources/templates/add.html @@ -5,6 +5,7 @@ DataDash – Add dataset/API +
      @@ -21,13 +22,13 @@
      - - + + - +