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";