Refined (final?) report layout for Object

js/views/report.js

@@ -7,126 +7,17 @@ document.addEventListener('readystatechange', async () => {
     // Show modal
     document.querySelector('.modal').classList.add('active');
 
-    const report = await DataSpace.fetchReport(location.search.replace("?id=", ''));
+    const resId = location.search.replace("?id=", '');
+    const report = await DataSpace.fetchReport(resId);
     const archesJson = await DataSpace.fetchReport(
-        location.search.replace("?id=", ''),
+        resId,
         'arches-json'
     );
-    const files = DataSpace.getImagesSrc(archesJson);
+    const images = DataSpace.getImagesSrc(archesJson);
 
     // Close modal
     document.querySelector('.modal').classList.remove('active');
 
-    const resource = Object.assign(DataSpace.OBJECT_ORDER, report.resource);
+    DataSpace.renderObjectReport(report, images);
 
-    const shape = DataSpace.createObjectShape(resource);
-
-    let resKeys = Object.keys(resource);
-    // Default value...
-    let resType = 'Object';
-    // TODO
-    if (!resKeys.length) {
-        location.href = '/404.html';
-        return;
-    }
-
-    resType = resKeys[0].split(' ')[0]; 
-    // TODO use match...
-    // TODO check if coordinates exists...
-    const coordinates = resource['Object Coordinates']
-        ?.replace(/^.*coordinates\':\s?\[(\d+\.\d+,\s?\d+\.\d+)\].*$/, "$1")
-        ?.split(', ');
-
-    let lat, long;
-    [long, lat] = coordinates;
-    
-    DataSpace.createMap([lat, long]);
-
-    // Write coordinates below map
-    document.querySelector('#coord').innerHTML = `
-        <span><strong>Latitude</strong>: ${lat}</span>
-        <span><strong>Longitude</strong>: ${long}</span>  
-    `;
-
-    resKeys = resKeys.filter(e => !e.includes('Coordinates'));
-
-    document.querySelector('#rep-tit')
-        .innerText = `${resType} ${report.displayname}`;
-
-    const repTable = document.querySelector('#res-before tbody');
-
-    // TODO manage files and nested objects
-    for (const key in shape.get('before-gallery')) {
-        const row = document.createElement('tr');
-        let innerList = null;
-        
-        // TODO refactor
-        if (typeof report.resource[key] == 'object') {
-            const boolValue = '@value' in report.resource[key];
-            innerList = document.createElement('ul');
-
-            if (! boolValue) {
-                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>`;
-            }
-        }
-
-        let value = innerList !== null ? 
-            innerList.outerHTML : report.resource[key];
-
-        row.innerHTML = `
-            <td class="text-bold key">${key.replace(resType, '')}</td>
-            <td>${value}</td>
-        `;
-
-        if (!key.includes('Images') && !key.includes('Photos')) {
-            repTable.appendChild(row);
-        }
-    }
-
-    if (files.length) {
-        // Create image gallery
-        // TODO refactor...
-        let gallery = document.querySelector('#gallery');
-        gallery.parentElement
-            .classList.remove('d-hide');
-
-        for (const src of files) {
-            const img = document.createElement('img');
-            img.className = 'img-responsive img-fit-cover';
-            img.src = src;
-
-            const col = document.createElement('div');
-            col.className = 'column col-3 c-hand spotlight';
-            col.setAttribute('data-src', src);
-            col.setAttribute('data-download', true);
-
-            col.appendChild(img);
-            gallery.appendChild(col);
-        }
-    }
-
-    // Create after-gallery...
-    let after = document.querySelector('#res-after');
-
-    for (const key in shape.get('after-gallery')) {
-        const col = document.createElement('div');
-        col.className = 'column col-12';
-        col.innerHTML = `
-            <p class="text-bold">${key.replace(resType, '')}</p>
-            <p>${report.resource[key]}</p>
-        `
-        after.appendChild(col);
-    }
-})
+});