diff --git a/src/main/resources/static/details.css b/src/main/resources/static/details.css index 86bb412..ad808bc 100644 --- a/src/main/resources/static/details.css +++ b/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); } diff --git a/src/main/resources/static/details.html b/src/main/resources/static/details.html index e91405e..1e867b3 100644 --- a/src/main/resources/static/details.html +++ b/src/main/resources/static/details.html @@ -58,6 +58,10 @@ ipsam nobis quis.

+
+ + +
diff --git a/src/main/resources/static/details.js b/src/main/resources/static/details.js index e770a5c..155b14d 100644 --- a/src/main/resources/static/details.js +++ b/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.dataset.id = dataset.category.id; - license.innerText = dataset.license; - termsOfUse.href = dataset.termsOfUse; + //category.innerText = dataset.category.name; + //category.dataset.id = dataset.category.id; + //license.innerText = dataset.license; + //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; + } + }); + } +});