rating is implemented, updates the stars and prohibits voting more than once

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;

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>

src/main/resources/static/details.js

@@ -17,6 +17,8 @@ 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")) {
@@ -35,11 +37,13 @@ if (currentLocation.searchParams.has("id")) {
         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;
@@ -51,7 +55,7 @@ if (currentLocation.searchParams.has("id")) {
             month: "long",
             year: "numeric",
         });
-        //category.innerText = dataset.category.name;
+        //category.innerText = dataset.category.name; // TODO: uncomment
         //category.dataset.id = dataset.category.id;
         //license.innerText = dataset.license;
         //termsOfUse.href = dataset.termsOfUse;
@@ -83,3 +87,37 @@ deleteButton.addEventListener("click", () => {
         });
     }
 });
+
+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/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";