Merge branch '45-finalize-details-page' into '22-integrate-api-and-frontend'

Resolve "finalize details page"

See merge request padas/24ss-5430-web-and-data-eng/gruppe-3/datadash!46

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<String> sortable = Arrays.asList("author", "title", "upvotes", "date");
+    private static final List<String> sortable = Arrays.asList("author", "title", "upvotes", "raiting", "date");
 
     @ManyToOne
     private Category categorie;

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

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);
 }

src/main/resources/static/details.html

@@ -24,6 +24,7 @@
             <h1 id="title" data-type="api">Title</h1>
             <summary>
                 <span id="rating-text">4</span><meter id="rating" value="4" max="5"></meter>
+                <span id="rating-input"></span>
                 <span id="short-description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis recusandae laborum odio corrupti voluptas quisquam dicta, quibusdam ipsum qui exercitationem.</span>
             </summary>
             <a id="url">https://example.com/dataset</a>
@@ -58,6 +59,10 @@
                 ipsam nobis quis.
             </p>
         </section>
+        <section id="details-btns">
+            <button id="back-btn" class="btn">Back to main page</button>
+            <button id="delete-btn" class="hidden btn">Delete</button>
+        </section>
     </main>
 
     <main id="not-found" class="hidden">

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;
+                });
+            }
+        });
+    }
+})

src/main/resources/static/index.html

@@ -45,8 +45,8 @@
                 <option>Author Z-A</option>
                 <option>Title A-Z</option>
                 <option>Title Z-A</option>
-                <option>Stars ↑</option>
+                <option>Raiting ↑</option>
-                <option>Stars ↓</option>
+                <option>Raiting ↓</option>
                 <option>Upvotes ↑</option>
                 <option>Upvotes ↓</option>
             </select>

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