Layout changes and draft report logic

css/ds.css

@@ -1,13 +1,23 @@
+body {
+    height: 100%;
+}
 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;
+    border-bottom: 1px lightgrey solid;
 }
 main {
     width: 75%;
     margin: 0 auto;
+    padding: 2rem 0 5rem 0;
+}
+footer {
+    min-height: 40px;
+    background-color: rgba(5, 5, 5, 0.6);
+    padding: 3rem;
 }
 ul {
     list-style: none;
@@ -16,7 +26,14 @@ ul li {
     padding: 5px;
 }
 
+td ul {
+    margin-left: 0;
+    padding-left: 0;
+}
 .mt-2 {
     margin-top: 2rem !important;
 }
+.key {
+    min-width: 200px;
+}
 

index.html

@@ -30,5 +30,8 @@
                 </div>
             </div>
         </main>
+        <footer>
+            <div class="text-center text-light mt-2">Whatever...</div>
+        </footer>
     </body>
 </html>

js/ds.js

@@ -26,21 +26,16 @@ export async function fetchResourceList(max = 20)
  * @param {string} id The ID of the UL element
  * @param {string} replace The string that should replace loalhost...
  * 
+ * @return {void}
  */
 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.replace('http://localhost:8000/resources/',replace)}">
+            `<a href="${link.replace('http://localhost:8000/resources/', replace)}">
-                ${link.substring(link.lastIndexOf('/')+1)}
+                ${link.substring(link.lastIndexOf('/') + 1)}
             </a>`;
         document.querySelector(`#${id}`).appendChild(item);
     }
@@ -62,6 +57,15 @@ export async function fetchReport(uuid)
     // Arbitrary slice...
     return jsonRep;
 }
+/**
+ * Fetch file blob (CORS...)
+ * @todo
+ * 
+ * @param {string} fileUri The file's URI in Arches
+ * 
+ * @return {object}
+ */
+//export async function fetchFileBlob(fileUri);
 /**
  * Query report links to determine
  * resource instance type...

js/views/index.js

@@ -6,14 +6,7 @@ import {
 
 document.addEventListener('readystatechange', async () => {
     const resList = await fetchResourceList();
-    createLinks(
+
-        resList,
+    createLinks(resList, 'links', `${BASE_URL}/report/`);
-        'links',
+    createLinks( resList, 'rep-links', `/report?id=`);
-        `${BASE_URL}/report/`
-    );
-    createLinks(
-        resList,
-        'rep-links',
-        `/report?id=`
-    );
 })

js/views/report.js

@@ -13,20 +13,46 @@ document.addEventListener('readystatechange', async () => {
 
     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');
+            let rowspan = '';
+            let innerList = null;
+            
+            if (typeof report.resource[key] == 'object') {
+                const boolValue = '@value' in report.resource[key];
+                innerList = document.createElement('ul');
+
+                if (! boolValue) {
+                    rowspan = Object.keys(report.resource[key]).length;
+
+                    for (const k in report.resource[key]) {
+                        const li = document.createElement('li');
+                        li.innerHTML = 
+                            `<strong>${k.replace(key,'')}</strong>:
+                            ${report.resource[key][k]}`;
+
+                        if (report.resource[key][k] !== null) {
+                            innerList.appendChild(li);
+                        }
+                    }
+                } else {
+                    innerList.innerHTML = `<li>${report.resource[key]['@value']}</li>`;
+                }
+            }
 
             if (!key.includes('Coordinates')) {
+                let value = innerList !== null ? 
+                    innerList.outerHTML : report.resource[key];
                 row.innerHTML = `
-                    <td class="text-bold">${key.replace(resType, '')}</td>
+                    <td class="text-bold key">${key.replace(resType, '')}</td>
-                    <td>${report.resource[key]}</td>
+                    <td>${value}</td>
                 `;
             }
 

report/index.html

@@ -8,10 +8,10 @@
     <body>
         <header class="text-center">
         </header>
+        <h1 class="text-center mt-2">
+            Report Light
+        </h1>
         <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">
@@ -27,6 +27,9 @@
                 </div>
             </div>
         </main>
+        <footer>
+            <div class="text-center text-light mt-2">Whatever...</div>
+        </footer>
     </body>
 <!-- Templates? -->
 </html>