First report draft
This commit is contained in:
parent
defdfefb03
commit
039567d0c8
17
css/ds.css
17
css/ds.css
@ -4,4 +4,19 @@ header {
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
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 |
25
index.html
25
index.html
@ -3,7 +3,7 @@
|
||||
<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>
|
||||
<script src="js/views/index.js" type="module"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header class="text-center">
|
||||
@ -12,12 +12,23 @@
|
||||
<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>
|
||||
<p class="text-large text-center text-italic">It's good for your health!</p>
|
||||
<div class="columns mt-2">
|
||||
<div class="column col-6">
|
||||
<h2 class=""text-center">
|
||||
Arches reports (sample)
|
||||
</h2>
|
||||
<ul id="links" class="mt-2">
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
44
js/ds.js
44
js/ds.js
@ -1,6 +1,6 @@
|
||||
'use strict';
|
||||
|
||||
const BASE_URL = 'http://150.145.56.132';
|
||||
export const BASE_URL = 'http://150.145.56.132';
|
||||
const RES_ENDPOINT = '/resources/';
|
||||
|
||||
/**
|
||||
@ -13,33 +13,55 @@ const RES_ENDPOINT = '/resources/';
|
||||
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();
|
||||
const list = await fetch(`${BASE_URL}${RES_ENDPOINT}`)
|
||||
.then(res => res.json())
|
||||
.catch();
|
||||
|
||||
return list['ldp:contains'].slice(100, max + 100)
|
||||
.map(e => e.replace(
|
||||
'http://localhost:8000/resources',
|
||||
`${BASE_URL}/report`));
|
||||
// Arbitrary slice...
|
||||
return list['ldp:contains'].slice(100, max + 100);
|
||||
}
|
||||
/**
|
||||
* Create links list
|
||||
* @param {string[]} links The fetched resource links
|
||||
* @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) {
|
||||
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);
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 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
|
||||
* 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