diff --git a/css/ds.css b/css/ds.css index 680535d..a0983f5 100644 --- a/css/ds.css +++ b/css/ds.css @@ -4,4 +4,19 @@ header { background-repeat: no-repeat; background-size: contain; min-height: 200px; -} \ No newline at end of file +} +main { + width: 75%; + margin: 0 auto; +} +ul { + list-style: none; +} +ul li { + padding: 5px; +} + +.mt-2 { + margin-top: 2rem !important; +} + diff --git a/img/map.png b/img/map.png new file mode 100644 index 0000000..b6139f5 Binary files /dev/null and b/img/map.png differ diff --git a/index.html b/index.html index 92d737f..6972d53 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - +
@@ -12,12 +12,23 @@

DataSpace Light

-

It's good for your health!

-

- Sample resources -

- +

It's good for your health!

+
+
+

+ Arches reports (sample) +

+ +
+
+

+ Custom reports (sample) +

+ +
+
\ No newline at end of file diff --git a/js/ds.js b/js/ds.js index bbd206e..3ce8ee6 100644 --- a/js/ds.js +++ b/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 = `${link}`; + item.innerHTML = + ` + ${link.substring(link.lastIndexOf('/')+1)} + `; 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... diff --git a/js/index.js b/js/index.js deleted file mode 100644 index aae5c86..0000000 --- a/js/index.js +++ /dev/null @@ -1,8 +0,0 @@ -import { - fetchResourceList, - createLinks -} from "./ds.js"; - -document.addEventListener('readystatechange', async () => { - createLinks(await fetchResourceList(), 'links'); -}) \ No newline at end of file diff --git a/js/views/index.js b/js/views/index.js new file mode 100644 index 0000000..93e638f --- /dev/null +++ b/js/views/index.js @@ -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=` + ); +}) \ No newline at end of file diff --git a/js/views/report.js b/js/views/report.js new file mode 100644 index 0000000..b382811 --- /dev/null +++ b/js/views/report.js @@ -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 = ` + ${key.replace(resType, '')} + ${report.resource[key]} + `; + } + + repTable.appendChild(row); + } + } +}) \ No newline at end of file diff --git a/report/index.html b/report/index.html new file mode 100644 index 0000000..814cf0b --- /dev/null +++ b/report/index.html @@ -0,0 +1,32 @@ + + + + + + + + +
+
+
+

+ Report Light +

+
+
+

+

+ + + +
+
+
+

Map

+ +
+
+
+ + + \ No newline at end of file