Erik/DataDash
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add basic support for viewing datasets

Browse Source
This commit is contained in:
Elias Schriefer 2024-07-06 10:00:33 +02:00
parent 922dfdd26d
commit 6380355227
5 changed files with 94 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/main/resources/static/constants.js Normal file
View File

@ -0,0 +1,2 @@
export const DATASET_ENDPOINT = "/api/v1/datasets";
export const getBaseURL = () => location.origin;

48
src/main/resources/static/dataset.js
View File

@ -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]);

8
src/main/resources/static/details.html
View File

@ -11,6 +11,14 @@
<script defer type="module" src="details.js"></script>
</head>
<body>
<template id="voting-template">
<aside class="upvote">
<button class="upvote-btn btn flat">Upvote</button>
<span class="upvote-count">0</span>
<button class="downvote-btn btn flat">Downvote</button>
</aside>
</template>
<main class="skeleton">
<header data-id="dataset-id">
<h1 id="title" data-type="api">Title</h1>

51
src/main/resources/static/details.js Normal file
View File

@ -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");
}
}

4
src/main/resources/static/main.js
View File

@ -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,