117 lines
3.9 KiB
JavaScript
117 lines
3.9 KiB
JavaScript
import { DATASETS_ENDPOINT } from "./constants.js";
|
|
import Dataset from "./dataset.js";
|
|
|
|
const mainPage = document.getElementById("details");
|
|
const notFoundPage = document.getElementById("not-found");
|
|
|
|
const title = document.getElementById("title");
|
|
const rating = document.getElementById("rating");
|
|
const ratingText = document.getElementById("rating-text");
|
|
const summary = document.getElementById("summary");
|
|
const url = document.getElementById("url");
|
|
const date = document.getElementById("date");
|
|
const category = document.getElementById("category");
|
|
const license = document.getElementById("license");
|
|
const termsOfUse = document.getElementById("terms-of-use");
|
|
const description = document.getElementById("description");
|
|
const backButton = document.getElementById("back-btn");
|
|
const deleteButton = document.getElementById("delete-btn");
|
|
|
|
let dataset = null;
|
|
let currentRating = 0;
|
|
|
|
const currentLocation = new URL(location.href);
|
|
if (currentLocation.searchParams.has("id")) {
|
|
const id = currentLocation.searchParams.get("id");
|
|
const response = await fetch(`${DATASETS_ENDPOINT}/id/${id}`);
|
|
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
dataset = new Dataset(data);
|
|
const upvoteComponent = dataset.createUpvoteComponent();
|
|
|
|
if (dataset.storageGetKey("created-locally", false)) {
|
|
deleteButton.classList.remove("hidden");
|
|
}
|
|
|
|
title.innerText = dataset.title;
|
|
title.dataset.type = dataset.type.toLowerCase();
|
|
rating.value = dataset.rating;
|
|
ratingText.innerText = parseFloat(dataset.rating).toFixed(1);
|
|
summary.innerText = dataset.summary;
|
|
url.href = dataset.url;
|
|
url.innerText = dataset.url;
|
|
mainPage.querySelector(".upvote").replaceWith(upvoteComponent);
|
|
|
|
date.datetime = dataset.date;
|
|
date.innerText = dataset.parseDate().toLocaleDateString(undefined, {
|
|
day: "numeric",
|
|
month: "long",
|
|
year: "numeric",
|
|
});
|
|
category.innerText = dataset.category.name;
|
|
category.dataset.id = dataset.category.id;
|
|
license.innerText = dataset.license;
|
|
termsOfUse.href = dataset.termsOfUse;
|
|
|
|
description.innerText = dataset.description;
|
|
|
|
mainPage.classList.remove("skeleton");
|
|
} else {
|
|
mainPage.classList.add("hidden");
|
|
notFoundPage.classList.remove("hidden");
|
|
}
|
|
} else {
|
|
mainPage.classList.add("hidden");
|
|
notFoundPage.classList.remove("hidden");
|
|
}
|
|
|
|
backButton.addEventListener("click", () => {
|
|
window.location.href = location.origin;
|
|
})
|
|
|
|
deleteButton.addEventListener("click", async () => {
|
|
if (dataset != null) {
|
|
const response = await fetch(
|
|
`${DATASETS_ENDPOINT}/id/${dataset.id}`,
|
|
{ method: 'DELETE' }
|
|
);
|
|
|
|
if (response.ok) {
|
|
window.location.href = location.origin;
|
|
}
|
|
}
|
|
});
|
|
|
|
rating.addEventListener("mousemove", (event) => {
|
|
if (!dataset.storageGetKey("is-rated", false)) {
|
|
let bounds = rating.getBoundingClientRect();
|
|
currentRating = Math.round(((event.clientX - bounds.left) / bounds.width) * 5);
|
|
rating.value = currentRating;
|
|
}
|
|
|
|
});
|
|
|
|
rating.addEventListener("mouseleave", () => {
|
|
rating.value = dataset.rating;
|
|
});
|
|
|
|
rating.addEventListener("click", async () => {
|
|
if (!dataset.storageGetKey("is-rated", false)) {
|
|
const starsResponse = await fetch(
|
|
`${DATASETS_ENDPOINT}/id/${dataset.id}/stars?stars=${currentRating}`,
|
|
{ method: 'PUT' }
|
|
);
|
|
|
|
if (starsResponse.ok) {
|
|
dataset.storageSetKey("is-rated", true);
|
|
const response = await fetch(`${DATASETS_ENDPOINT}/id/${dataset.id}`);
|
|
const data = await response.json();
|
|
|
|
dataset = new Dataset(data);
|
|
ratingText.innerText = parseFloat(dataset.rating).toFixed(1);
|
|
rating.value = dataset.rating;
|
|
}
|
|
}
|
|
});
|