First report draft
This commit is contained in:
parent
defdfefb03
commit
039567d0c8
15
css/ds.css
15
css/ds.css
@ -5,3 +5,18 @@ header {
|
|||||||
background-size: contain;
|
background-size: contain;
|
||||||
min-height: 200px;
|
min-height: 200px;
|
||||||
}
|
}
|
||||||
|
main {
|
||||||
|
width: 75%;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
ul li {
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt-2 {
|
||||||
|
margin-top: 2rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
BIN
img/map.png
Normal file
BIN
img/map.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
21
index.html
21
index.html
@ -3,7 +3,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<link href="vendor/spectre.css/dist/spectre.css" rel="stylesheet" />
|
<link href="vendor/spectre.css/dist/spectre.css" rel="stylesheet" />
|
||||||
<link href="css/ds.css" rel="stylesheet" />
|
<link href="css/ds.css" rel="stylesheet" />
|
||||||
<script src="js/index.js" type="module"></script>
|
<script src="js/views/index.js" type="module"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header class="text-center">
|
<header class="text-center">
|
||||||
@ -12,12 +12,23 @@
|
|||||||
<h1 class="text-center mt-2">
|
<h1 class="text-center mt-2">
|
||||||
DataSpace Light
|
DataSpace Light
|
||||||
</h1>
|
</h1>
|
||||||
<p class="text-medium text-center text-italic">It's good for your health!</p>
|
<p class="text-large text-center text-italic">It's good for your health!</p>
|
||||||
<h2 class=""text-center mt-2">
|
<div class="columns mt-2">
|
||||||
Sample resources
|
<div class="column col-6">
|
||||||
|
<h2 class=""text-center">
|
||||||
|
Arches reports (sample)
|
||||||
</h2>
|
</h2>
|
||||||
<ul id="links">
|
<ul id="links" class="mt-2">
|
||||||
</ul>
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="column col-6">
|
||||||
|
<h2 class=""text-center">
|
||||||
|
Custom reports (sample)
|
||||||
|
</h2>
|
||||||
|
<ul id="rep-links" class="mt-2">
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</main>
|
</main>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
44
js/ds.js
44
js/ds.js
@ -1,6 +1,6 @@
|
|||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
const BASE_URL = 'http://150.145.56.132';
|
export const BASE_URL = 'http://150.145.56.132';
|
||||||
const RES_ENDPOINT = '/resources/';
|
const RES_ENDPOINT = '/resources/';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -13,33 +13,55 @@ const RES_ENDPOINT = '/resources/';
|
|||||||
export async function fetchResourceList(max = 20)
|
export async function fetchResourceList(max = 20)
|
||||||
{
|
{
|
||||||
// TODO Errors!!
|
// TODO Errors!!
|
||||||
let req = new Request(`${BASE_URL}${RES_ENDPOINT}`);
|
const list = await fetch(`${BASE_URL}${RES_ENDPOINT}`)
|
||||||
const res = await fetch(req).catch();
|
.then(res => res.json())
|
||||||
const list = await res.json();
|
.catch();
|
||||||
|
|
||||||
return list['ldp:contains'].slice(100, max + 100)
|
// Arbitrary slice...
|
||||||
.map(e => e.replace(
|
return list['ldp:contains'].slice(100, max + 100);
|
||||||
'http://localhost:8000/resources',
|
|
||||||
`${BASE_URL}/report`));
|
|
||||||
}
|
}
|
||||||
/**
|
/**
|
||||||
* Create links list
|
* Create links list
|
||||||
* @param {string[]} links The fetched resource links
|
* @param {string[]} links The fetched resource links
|
||||||
* @param {string} id The ID of the UL element
|
* @param {string} id The ID of the UL element
|
||||||
|
* @param {string} replace The string that should replace loalhost...
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
export function createLinks(links, id)
|
export function createLinks(links, id, replace)
|
||||||
{
|
{
|
||||||
|
/*
|
||||||
|
links = links.map(e => e.replace(
|
||||||
|
'http://localhost:8000/resources/',
|
||||||
|
replace
|
||||||
|
));
|
||||||
|
*/
|
||||||
for (const link of links) {
|
for (const link of links) {
|
||||||
const item = document.createElement('li');
|
const item = document.createElement('li');
|
||||||
|
|
||||||
item.innerHTML = `<a href="${link}">${link}</a>`;
|
item.innerHTML =
|
||||||
|
`<a href="${link.replace('http://localhost:8000/resources/',replace)}">
|
||||||
|
${link.substring(link.lastIndexOf('/')+1)}
|
||||||
|
</a>`;
|
||||||
document.querySelector(`#${id}`).appendChild(item);
|
document.querySelector(`#${id}`).appendChild(item);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/**
|
/**
|
||||||
* Process JSON report...
|
* Fetch JSON report...
|
||||||
|
* @param {string} uuid The resource's UUID in Arches
|
||||||
|
*
|
||||||
|
* @return {object}
|
||||||
*/
|
*/
|
||||||
|
export async function fetchReport(uuid)
|
||||||
|
{
|
||||||
|
// TODO Errors!!
|
||||||
|
const jsonRep =
|
||||||
|
await fetch(`${BASE_URL}${RES_ENDPOINT}${uuid}?format=json&indent=2`)
|
||||||
|
.then(res => res.json())
|
||||||
|
.catch();
|
||||||
|
|
||||||
|
// Arbitrary slice...
|
||||||
|
return jsonRep;
|
||||||
|
}
|
||||||
/**
|
/**
|
||||||
* Query report links to determine
|
* Query report links to determine
|
||||||
* resource instance type...
|
* resource instance type...
|
||||||
|
|||||||
@ -1,8 +0,0 @@
|
|||||||
import {
|
|
||||||
fetchResourceList,
|
|
||||||
createLinks
|
|
||||||
} from "./ds.js";
|
|
||||||
|
|
||||||
document.addEventListener('readystatechange', async () => {
|
|
||||||
createLinks(await fetchResourceList(), 'links');
|
|
||||||
})
|
|
||||||
19
js/views/index.js
Normal file
19
js/views/index.js
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
import {
|
||||||
|
fetchResourceList,
|
||||||
|
createLinks,
|
||||||
|
BASE_URL
|
||||||
|
} from "../ds.js";
|
||||||
|
|
||||||
|
document.addEventListener('readystatechange', async () => {
|
||||||
|
const resList = await fetchResourceList();
|
||||||
|
createLinks(
|
||||||
|
resList,
|
||||||
|
'links',
|
||||||
|
`${BASE_URL}/report/`
|
||||||
|
);
|
||||||
|
createLinks(
|
||||||
|
resList,
|
||||||
|
'rep-links',
|
||||||
|
`/report?id=`
|
||||||
|
);
|
||||||
|
})
|
||||||
36
js/views/report.js
Normal file
36
js/views/report.js
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
import {
|
||||||
|
fetchReport,
|
||||||
|
} from "../ds.js";
|
||||||
|
|
||||||
|
document.addEventListener('readystatechange', async () => {
|
||||||
|
const report = await fetchReport(location.search.replace("?id=", ''));
|
||||||
|
|
||||||
|
const resKeys = Object.keys(report.resource);
|
||||||
|
// Default value...
|
||||||
|
let resType = 'Object';
|
||||||
|
|
||||||
|
if (resKeys.length) {
|
||||||
|
resType = resKeys[0].split(' ')[0];
|
||||||
|
document.querySelector('#rep-tit')
|
||||||
|
.innerText = `${resType} ${report.displayname}`;
|
||||||
|
|
||||||
|
const repTable = document.querySelector('#resource tbody');
|
||||||
|
|
||||||
|
// TODO manage files and nested objects
|
||||||
|
// e.g. if (typeof report.resource[key] == 'object') ...
|
||||||
|
for (const key of resKeys) {
|
||||||
|
const row = document.createElement('tr');
|
||||||
|
|
||||||
|
if (!key.includes('Coordinates')) {
|
||||||
|
row.innerHTML = `
|
||||||
|
<td class="text-bold">${key.replace(resType, '')}</td>
|
||||||
|
<td>${report.resource[key]}</td>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
repTable.appendChild(row);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
32
report/index.html
Normal file
32
report/index.html
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<link href="../vendor/spectre.css/dist/spectre.css" rel="stylesheet" />
|
||||||
|
<link href="../css/ds.css" rel="stylesheet" />
|
||||||
|
<script src="../js/views/report.js" type="module"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header class="text-center">
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<h1 class="text-center mt-2">
|
||||||
|
Report Light
|
||||||
|
</h1>
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column col-8">
|
||||||
|
<h2 class="text-center mt-2" id="rep-tit">
|
||||||
|
</h2>
|
||||||
|
<table class="table" id="resource">
|
||||||
|
<tbody>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div class="column col-4">
|
||||||
|
<h2 class="text-center mt-2">Map</h2>
|
||||||
|
<img class="img-responsive" src="../img/map.png" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
<!-- Templates? -->
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user