Layout changes and draft report logic

js/views/index.js

@@ -6,14 +6,7 @@ import {
 
 document.addEventListener('readystatechange', async () => {
     const resList = await fetchResourceList();
-    createLinks(
-        resList,
-        'links',
-        `${BASE_URL}/report/`
-    );
-    createLinks(
-        resList,
-        'rep-links',
-        `/report?id=`
-    );
+
+    createLinks(resList, 'links', `${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>${report.resource[key]}</td>
+                    <td class="text-bold key">${key.replace(resType, '')}</td>
+                    <td>${value}</td>
                 `;
             }