nicolo/ds-front-test
1
1
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Nicolò P 2023-02-21 23:33:58 +01:00
commit defdfefb03
6 changed files with 97 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
vendor/
*.log

7
css/ds.css Normal file
View File

@ -0,0 +1,7 @@
header {
background-image: url('http://150.145.56.132/static/img/logos/dataspace_icon.svg');
background-position: center;
background-repeat: no-repeat;
background-size: contain;
min-height: 200px;
}

23
index.html Normal file
View File

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<link href="vendor/spectre.css/dist/spectre.css" rel="stylesheet" />
<link href="css/ds.css" rel="stylesheet" />
<script src="js/index.js" type="module"></script>
</head>
<body>
<header class="text-center">
</header>
<main style="width: 75%; margin: 0 auto">
<h1 class="text-center mt-2">
DataSpace Light
</h1>
<p class="text-medium text-center text-italic">It's good for your health!</p>
<h2 class=""text-center mt-2">
Sample resources
</h2>
<ul id="links">
</ul>
</main>
</body>
</html>

46
js/ds.js Normal file
View File

@ -0,0 +1,46 @@
'use strict';
const BASE_URL = 'http://150.145.56.132';
const RES_ENDPOINT = '/resources/';
/**
* @todo Query report links to determine resource type?
* @param {int} max Max number of resources to list
* (randomly selected)
*
* @returns {Array} An array with selected resource links
*/
export async function fetchResourceList(max = 20)
{
// TODO Errors!!
let req = new Request(`${BASE_URL}${RES_ENDPOINT}`);
const res = await fetch(req).catch();
const list = await res.json();
return list['ldp:contains'].slice(100, max + 100)
.map(e => e.replace(
'http://localhost:8000/resources',
`${BASE_URL}/report`));
}
/**
* Create links list
* @param {string[]} links The fetched resource links
* @param {string} id The ID of the UL element
*
*/
export function createLinks(links, id)
{
for (const link of links) {
const item = document.createElement('li');
item.innerHTML = `<a href="${link}">${link}</a>`;
document.querySelector(`#${id}`).appendChild(item);
}
}
/**
* Process JSON report...
*/
/**
* Query report links to determine
* resource instance type...
*/

8
js/index.js Normal file
View File

@ -0,0 +1,8 @@
import {
fetchResourceList,
createLinks
} from "./ds.js";
document.addEventListener('readystatechange', async () => {
createLinks(await fetchResourceList(), 'links');
})

11
package.json Normal file
View File

@ -0,0 +1,11 @@
{
"name": "ds-front-test",
"version": "0.0.1",
"description": "Test frontend for Arches DataSpace ISPC",
"main": "index.js",
"author": "Nicolò Paraciani",
"license": "MIT",
"dependencies": {
"spectre.css": "^0.5.9"
}
}