First report draft

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...

js/index.js

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

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=`
+    );
+})

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 = `
+                    <td class="text-bold">${key.replace(resType, '')}</td>
+                    <td>${report.resource[key]}</td>
+                `;
+            }
+
+            repTable.appendChild(row);
+        }
+    }
+})