diff --git a/src/main/resources/static/constants.js b/src/main/resources/static/constants.js
new file mode 100644
index 0000000..ed33038
--- /dev/null
+++ b/src/main/resources/static/constants.js
@@ -0,0 +1,2 @@
+export const DATASET_ENDPOINT = "/api/v1/datasets";
+export const getBaseURL = () => location.origin;
diff --git a/src/main/resources/static/dataset.js b/src/main/resources/static/dataset.js
index 1c5d40a..4154fba 100644
--- a/src/main/resources/static/dataset.js
+++ b/src/main/resources/static/dataset.js
@@ -1,13 +1,13 @@
-import { DATASET_ENDPOINT, getBaseURL } from "./main.js";
+import { DATASET_ENDPOINT, getBaseURL } from "./constants.js";
export default class Dataset {
static #datasets = new Map();
- #abstract;
+ #shortDescription;
#author;
- #categories;
+ #category;
#date;
- #description;
+ #fullDescription;
#id;
#rating;
#title;
@@ -15,48 +15,52 @@ export default class Dataset {
#upvotes;
#url;
#votes;
+ #license;
+ #termsOfUse;
#elements = [];
static get(id) {
return this.#datasets.get(id);
}
- constructor({ abst: shortDescription, author, categories, date, description, id, rating, title, type, upvotes, url, votes }) {
- this.#abstract = shortDescription;
+ constructor({ abst: shortDescription, author, categorie, date, description, id, raiting, title, type, upvotes, url, votes, license, termsOfUse }) {
+ this.#shortDescription = shortDescription;
this.#author = author;
- this.#categories = categories;
+ this.#category = categorie;
this.#date = date;
- this.#description = description;
+ this.#fullDescription = description;
this.#id = id;
- this.#rating = rating;
+ this.#rating = raiting;
this.#title = title;
this.#type = type;
this.#upvotes = upvotes;
this.#url = url;
this.#votes = votes;
+ this.#license = license;
+ this.#termsOfUse = termsOfUse;
Dataset.#datasets.set(id, this);
}
// Getters
- get abstract() {
- return this.#abstract;
+ get shortDescription() {
+ return this.#shortDescription;
}
get author() {
return this.#author;
}
- get categories() {
- return this.#categories;
+ get category() {
+ return this.#category;
}
get date() {
return this.#date;
}
- get description() {
- return this.#description;
+ get fullDescription() {
+ return this.#fullDescription;
}
get id() {
@@ -87,6 +91,14 @@ export default class Dataset {
return this.#votes;
}
+ get license() {
+ return this.#license;
+ }
+
+ get termsOfUse() {
+ return this.#termsOfUse;
+ }
+
get mainElement() {
return this.#elements[0];
}
@@ -95,6 +107,10 @@ export default class Dataset {
return this.#elements;
}
+ parseDate() {
+ return new Date(this.#date);
+ }
+
// Main methods
// Only on main page
@@ -106,7 +122,7 @@ export default class Dataset {
clone.querySelector(".dataset").dataset.id = this.#id;
clone.querySelector(".dataset-title").innerText = this.#title;
- clone.querySelector(".dataset-description").innerText = this.#description;
+ clone.querySelector(".dataset-description").innerText = this.#shortDescription;
clone.querySelector(".upvote-count").innerText = this.#upvotes;
this.#elements.push(clone.children[0]);
diff --git a/src/main/resources/static/details.html b/src/main/resources/static/details.html
index 90e311f..ab97874 100644
--- a/src/main/resources/static/details.html
+++ b/src/main/resources/static/details.html
@@ -11,6 +11,14 @@
+
+
+
+
Title
diff --git a/src/main/resources/static/details.js b/src/main/resources/static/details.js
new file mode 100644
index 0000000..26991c6
--- /dev/null
+++ b/src/main/resources/static/details.js
@@ -0,0 +1,51 @@
+import Dataset from "./dataset.js";
+
+const mainElement = document.getElementsByTagName("main")[0];
+
+const title = document.getElementById("title");
+const rating = document.getElementById("rating");
+const shortDescription = document.getElementById("short-description");
+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 fullDescription = document.getElementById("full-description");
+
+const currentLocation = new URL(location.href);
+if (currentLocation.searchParams.has("id")) {
+ const id = currentLocation.searchParams.get("id");
+ const response = await fetch(`${currentLocation.origin}/api/v1/datasets/id/${id}`);
+ console.dir(response);
+
+ if (response.ok) {
+ const data = await response.json();
+ const dataset = new Dataset(data);
+ console.dir(data, dataset);
+ const upvoteComponent = dataset.createUpvoteComponent();
+
+ title.innerText = dataset.title;
+ title.dataset.type = dataset.type.toLowerCase();
+ rating.innerText = dataset.rating;
+ rating.style.setProperty("--rating", `${dataset.rating}`);
+ shortDescription.innerText = dataset.shortDescription;
+ url.href = dataset.url;
+ url.innerText = dataset.url;
+ mainElement.querySelector(".upvote").replaceWith(upvoteComponent);
+
+ date.innerText = dataset.parseDate().toLocaleDateString(undefined, {
+ day: "numeric",
+ month: "long",
+ year: "numeric",
+ });
+ date.dataset.date = dataset.parseDate().getTime();
+ category.innerText = dataset.category.name;
+ category.dataset.id = dataset.category.id;
+ license.innerText = dataset.license;
+ termsOfUse.href = dataset.termsOfUse;
+
+ fullDescription.innerText = dataset.fullDescription;
+
+ mainElement.classList.remove("skeleton");
+ }
+}
diff --git a/src/main/resources/static/main.js b/src/main/resources/static/main.js
index 08ba6b1..ad98c3b 100644
--- a/src/main/resources/static/main.js
+++ b/src/main/resources/static/main.js
@@ -1,9 +1,7 @@
+import { DATASET_ENDPOINT, getBaseURL } from "./constants.js";
import { fetchQuery } from "./contentUtility.js";
import Dataset from "./dataset.js";
-export const DATASET_ENDPOINT = "/api/v1/datasets";
-export const getBaseURL = () => location.origin;
-
const defaultPagingValue = 20;
export const lastQuery = {
totalPages: 0,