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 { export default class Dataset {
static #datasets = new Map(); static #datasets = new Map();
#abstract; #shortDescription;
#author; #author;
#categories; #category;
#date; #date;
#description; #fullDescription;
#id; #id;
#rating; #rating;
#title; #title;
@ -15,48 +15,52 @@ export default class Dataset {
#upvotes; #upvotes;
#url; #url;
#votes; #votes;
#license;
#termsOfUse;
#elements = []; #elements = [];
static get(id) { static get(id) {
return this.#datasets.get(id); return this.#datasets.get(id);
} }
constructor({ abst: shortDescription, author, categories, date, description, id, rating, title, type, upvotes, url, votes }) { constructor({ abst: shortDescription, author, categorie, date, description, id, raiting, title, type, upvotes, url, votes, license, termsOfUse }) {
this.#abstract = shortDescription; this.#shortDescription = shortDescription;
this.#author = author; this.#author = author;
this.#categories = categories; this.#category = categorie;
this.#date = date; this.#date = date;
this.#description = description; this.#fullDescription = description;
this.#id = id; this.#id = id;
this.#rating = rating; this.#rating = raiting;
this.#title = title; this.#title = title;
this.#type = type; this.#type = type;
this.#upvotes = upvotes; this.#upvotes = upvotes;
this.#url = url; this.#url = url;
this.#votes = votes; this.#votes = votes;
this.#license = license;
this.#termsOfUse = termsOfUse;
Dataset.#datasets.set(id, this); Dataset.#datasets.set(id, this);
} }
// Getters // Getters
get abstract() { get shortDescription() {
return this.#abstract; return this.#shortDescription;
} }
get author() { get author() {
return this.#author; return this.#author;
} }
get categories() { get category() {
return this.#categories; return this.#category;
} }
get date() { get date() {
return this.#date; return this.#date;
} }
get description() { get fullDescription() {
return this.#description; return this.#fullDescription;
} }
get id() { get id() {
@ -87,6 +91,14 @@ export default class Dataset {
return this.#votes; return this.#votes;
} }
get license() {
return this.#license;
}
get termsOfUse() {
return this.#termsOfUse;
}
get mainElement() { get mainElement() {
return this.#elements[0]; return this.#elements[0];
} }
@ -95,6 +107,10 @@ export default class Dataset {
return this.#elements; return this.#elements;
} }
parseDate() {
return new Date(this.#date);
}
// Main methods // Main methods
// Only on main page // Only on main page
@ -106,7 +122,7 @@ export default class Dataset {
clone.querySelector(".dataset").dataset.id = this.#id; clone.querySelector(".dataset").dataset.id = this.#id;
clone.querySelector(".dataset-title").innerText = this.#title; 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; clone.querySelector(".upvote-count").innerText = this.#upvotes;
this.#elements.push(clone.children[0]); 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> <script defer type="module" src="details.js"></script>
</head> </head>
<body> <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"> <main class="skeleton">
<header data-id="dataset-id"> <header data-id="dataset-id">
<h1 id="title" data-type="api">Title</h1> <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 { fetchQuery } from "./contentUtility.js";
import Dataset from "./dataset.js"; import Dataset from "./dataset.js";
export const DATASET_ENDPOINT = "/api/v1/datasets";
export const getBaseURL = () => location.origin;
const defaultPagingValue = 20; const defaultPagingValue = 20;
export const lastQuery = { export const lastQuery = {
totalPages: 0, totalPages: 0,