started initial page display

This commit is contained in:
J-Klinke 2024-07-01 12:22:56 +02:00
parent e5a4b1186e
commit 3aa87d531b
3 changed files with 15 additions and 74 deletions

View File

@ -11,7 +11,6 @@ export function fetchQuery(fetchString) {
}
function parseContent(content) {
console.log(content); //TODO: remove
if (content.length === 0) {
searchSection.querySelector("#nothing-found ").classList.remove("hidden");
} else {

View File

@ -1,4 +1,5 @@
import {fetchQuery} from "./contentUtility.js";
import Dataset from "./dataset";
const apiEndpoint = "/api/v1/datasets";
const baseURL = location.origin;
@ -106,6 +107,7 @@ function getSearchQuery() {
let searchString = searchBar.value;
return (searchString.length === 0 ? "%" : (searchString + "%"));
}
function getSortQuery() {
let sortString = sortButton.value.toLowerCase().split(" ");
if (sortString[1] === "a-z" || sortString[1] === "↑" || sortString[1] === "oldest-newest") {
@ -181,8 +183,21 @@ function fetchCategories() {
});
}
function fetchInitialEntries() {
let topVotedQueryURL = new URL(apiEndpoint + "/search" + baseURL);
topVotedQueryURL.searchParams.append("sort", getSortQuery()[0]);
topVotedQueryURL.searchParams.append("direction", getSortQuery()[1]);
topVotedQueryURL.searchParams.append("size", "1");
fetch(topVotedQueryURL)
.then(resp => resp.json())
.then((data) => {
document.querySelector("#top .datasets").appendChild(new Dataset(data[0]).createDatasetHTMLElement());
});
}
window.onload = function () {
fetchCategories();
fetchInitialEntries();
updateSections();
if (searchBar.value !== "") {
fetchQuery(createQuery());

View File

@ -62,84 +62,11 @@
<section id="recents">
<h2>Recently added:</h2>
<ul class="datasets">
<!-- Preliminary content to be replaced by data from our server: -->
<li class="dataset">
<div class="dataset-info">
<div class="icon tori"></div>
<div class="details">
<h3>Tori</h3>
<p>The simple mobile crypto wallet even your grandparents can use</p>
</div>
</div>
<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>
</li>
<li class="dataset">
<div class="dataset-info">
<div class="icon tyms"></div>
<div class="details">
<h3>Tyms</h3>
<p>Modern accounting ERP for ambitious businesses</p>
</div>
</div>
<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>
</li>
<li class="dataset">
<div class="dataset-info">
<div class="icon zapcardz"></div>
<div class="details">
<h3>ZapCardz</h3>
<p>Remember what you learn forever with AI powered flashcards</p>
</div>
</div>
<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>
</li>
<li class="dataset">
<div class="dataset-info">
<div class="icon peek"></div>
<div class="details">
<h3>Peek</h3>
<p>AI organizer and workspace for your browser tabs</p>
</div>
</div>
<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>
</li>
</ul>
</section>
<section id="top">
<h2>Most Liked:</h2>
<ul class="datasets">
<li class="dataset">
<div class="dataset-info">
<div class="icon standup"></div>
<div class="details">
<h3>Standup</h3>
<p>Simply daily accountability phone call, powered by AI</p>
</div>
</div>
<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>
</li>
</ul>
</section>