diff --git a/src/main/java/de/uni_passau/fim/PADAS/group3/DataDash/Dataset/Dataset.java b/src/main/java/de/uni_passau/fim/PADAS/group3/DataDash/Dataset/Dataset.java index 8a269c9..36796e3 100644 --- a/src/main/java/de/uni_passau/fim/PADAS/group3/DataDash/Dataset/Dataset.java +++ b/src/main/java/de/uni_passau/fim/PADAS/group3/DataDash/Dataset/Dataset.java @@ -52,7 +52,7 @@ public class Dataset { private String licence; - private static final List sortable = Arrays.asList("author", "title", "upvotes", "date"); + private static final List sortable = Arrays.asList("author", "title", "upvotes", "raiting", "date"); @ManyToOne private Category categorie; diff --git a/src/main/java/de/uni_passau/fim/PADAS/group3/DataDash/Dataset/DatasetController.java b/src/main/java/de/uni_passau/fim/PADAS/group3/DataDash/Dataset/DatasetController.java index a844374..d0a00ca 100644 --- a/src/main/java/de/uni_passau/fim/PADAS/group3/DataDash/Dataset/DatasetController.java +++ b/src/main/java/de/uni_passau/fim/PADAS/group3/DataDash/Dataset/DatasetController.java @@ -71,7 +71,7 @@ public class DatasetController { if (datasetService.getDatasetById(id) == null) { return new ResponseEntity<>(HttpStatus.NOT_FOUND); } - if (!(stars > 0 && stars < 6)) { + if (!(stars >= 0 && stars < 6)) { return new ResponseEntity<>(HttpStatus.BAD_REQUEST); } datasetService.voteDataset(id, stars); diff --git a/src/main/resources/static/details.css b/src/main/resources/static/details.css index 86bb412..92d1372 100644 --- a/src/main/resources/static/details.css +++ b/src/main/resources/static/details.css @@ -79,6 +79,17 @@ h1 { grid-column: 1 / 3; } +#rating-input { + mask-image: url("stars.svg"); + -webkit-mask-image: url("stars.svg"); + mask-size: contain; + mask-mode: alpha; + width: 5lh; + height: 1lh; + margin-inline: .5ch; + background: linear-gradient(to right, yellow 33%, black 33%); +} + #rating { color: color-mix(in oklab, var(--text-color) 80%, black); color: transparent; @@ -208,6 +219,51 @@ a { } } +#details-btns { + grid-column: 1 / 4; + justify-content: end; + gap: 1rem; + display: flex; +} + +#delete-btn { + background: #861c1c; +} + +/* button styling to be revisited */ +.btn { + padding: .5lh 1lh; + border: none; + border-radius: .5lh; + --btn-color: var(--fg-color); + background-color: var(--btn-color); + color: var(--text-color); + font-weight: bold; + font-size: 1rem; + transition: background-color 100ms, filter 200ms; + transition-timing-function: ease-out; + --drop-shadow-opacity: .5; + --drop-shadow-offset-y: 0; + --drop-shadow-blur: .25rem; + --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: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; + --drop-shadow-blur: .4rem; +} + + #nothing-found-bg { background-position-x: calc(50% + 3cqh); } diff --git a/src/main/resources/static/details.html b/src/main/resources/static/details.html index e91405e..ff27926 100644 --- a/src/main/resources/static/details.html +++ b/src/main/resources/static/details.html @@ -24,6 +24,7 @@

Title

4 + Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis recusandae laborum odio corrupti voluptas quisquam dicta, quibusdam ipsum qui exercitationem. https://example.com/dataset @@ -58,6 +59,10 @@ ipsam nobis quis.

+
+ + +
diff --git a/src/main/resources/static/details.js b/src/main/resources/static/details.js index e770a5c..4f530a2 100644 --- a/src/main/resources/static/details.js +++ b/src/main/resources/static/details.js @@ -13,6 +13,12 @@ const category = document.getElementById("category"); const license = document.getElementById("license"); const termsOfUse = document.getElementById("terms-of-use"); const fullDescription = document.getElementById("full-description"); +const backButton = document.getElementById("back-btn"); +const deleteButton = document.getElementById("delete-btn"); + +let dataset = null; +let currentRating = 0; +let isRated = false; const currentLocation = new URL(location.href); if (currentLocation.searchParams.has("id")) { @@ -22,14 +28,22 @@ if (currentLocation.searchParams.has("id")) { if (response.ok) { const data = await response.json(); - const dataset = new Dataset(data); + dataset = new Dataset(data); console.dir(data, dataset); const upvoteComponent = dataset.createUpvoteComponent(); + console.log(dataset.storageGet()); + debugger + if (dataset.storageGetKey("created-locally", false)) { + deleteButton.classList.remove("hidden"); + } + isRated = dataset.storageGetKey("is-rated", false) + + title.innerText = dataset.title; title.dataset.type = dataset.type.toLowerCase(); rating.value = dataset.rating; - ratingText.innerText = dataset.rating; + ratingText.innerText = parseFloat(dataset.rating).toFixed(1); shortDescription.innerText = dataset.shortDescription; url.href = dataset.url; url.innerText = dataset.url; @@ -57,3 +71,53 @@ if (currentLocation.searchParams.has("id")) { mainPage.classList.add("hidden"); notFoundPage.classList.remove("hidden"); } + +backButton.addEventListener("click", () => { + window.location.href = location.origin; +}) + +deleteButton.addEventListener("click", () => { + if (dataset != null) { + fetch(`${currentLocation.origin}/api/v1/datasets/id/` + dataset.id, { + method: 'DELETE' + }).then(resp => { + if (resp.ok) { + window.location.href = location.origin; + } + }); + } +}); + +rating.addEventListener("mousemove", (event) => { + if (!isRated) { + let bounds = rating.getBoundingClientRect(); + currentRating = Math.round(((event.clientX - bounds.left) / bounds.width) * 5); + console.log(currentRating); + rating.value = currentRating; + } + +}); + +rating.addEventListener("mouseleave", () => { + rating.value = dataset.rating; +}); + +rating.addEventListener("click", () => { + if (!isRated) { + fetch(`${currentLocation.origin}/api/v1/datasets/id/` + dataset.id + "/stars?stars=" + currentRating, { + method: 'PUT' + }).then(resp => { + if (resp.ok) { + dataset.storageSetKey("is-rated", true); + isRated = true; + fetch(`${currentLocation.origin}/api/v1/datasets/id/` + dataset.id) + .then(resp => resp.json()) + .then((data) => { + dataset = new Dataset(data); + ratingText.innerText = parseFloat(dataset.rating).toFixed(1); + rating.value = dataset.rating; + }); + } + }); + } +}) diff --git a/src/main/resources/static/index.html b/src/main/resources/static/index.html index 46da537..88979c4 100644 --- a/src/main/resources/static/index.html +++ b/src/main/resources/static/index.html @@ -45,8 +45,8 @@ - - + + diff --git a/src/main/resources/static/main.js b/src/main/resources/static/main.js index ad98c3b..d58c423 100644 --- a/src/main/resources/static/main.js +++ b/src/main/resources/static/main.js @@ -1,4 +1,4 @@ -import { DATASET_ENDPOINT, getBaseURL } from "./constants.js"; +import { DATASET_ENDPOINT, getBaseURL } from "./constants.js" import { fetchQuery } from "./contentUtility.js"; import Dataset from "./dataset.js";