implemented delete & back button

src/main/resources/static/details.css

@@ -208,6 +208,48 @@ a {
     }
 }
 
+#details-btns > . {
+    float: right;
+}
+
+#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

@@ -58,6 +58,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,10 @@ 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;
 
 const currentLocation = new URL(location.href);
 if (currentLocation.searchParams.has("id")) {
@@ -22,10 +26,16 @@ 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");
+        }
+
         title.innerText = dataset.title;
         title.dataset.type = dataset.type.toLowerCase();
         rating.value = dataset.rating;
@@ -41,10 +51,10 @@ if (currentLocation.searchParams.has("id")) {
             month: "long",
             year: "numeric",
         });
-        category.innerText = dataset.category.name;
+        //category.innerText = dataset.category.name;
-        category.dataset.id = dataset.category.id;
+        //category.dataset.id = dataset.category.id;
-        license.innerText = dataset.license;
+        //license.innerText = dataset.license;
-        termsOfUse.href = dataset.termsOfUse;
+        //termsOfUse.href = dataset.termsOfUse;
 
         fullDescription.innerText = dataset.fullDescription;
 
@@ -57,3 +67,19 @@ 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;
+            }
+        });
+    }
+});