Restructure code and layout

js/views/report.js

@@ -1,22 +1,25 @@
 'use strict';
 
-import {
-    BASE_URL,
-    fetchReport,
-    printReport,
-    getImageSrc,
-    OBJECT_ORDER,
-    attachMap
-} from "../ds.js";
+import DataSpace from "../ds.js";
 
 document.addEventListener('readystatechange', async () => {
-    const report = await fetchReport(location.search.replace("?id=", ''));
-    const archesJson = await fetchReport(location.search.replace("?id=", ''), 'arches-json');
-    const files = getImageSrc(archesJson);
+    DataSpace.printReport();
+    // Show modal
+    document.querySelector('.modal').classList.add('active');
 
-    printReport();
+    const report = await DataSpace.fetchReport(location.search.replace("?id=", ''));
+    const archesJson = await DataSpace.fetchReport(
+        location.search.replace("?id=", ''),
+        'arches-json'
+    );
+    const files = DataSpace.getImagesSrc(archesJson);
 
-    const resource = Object.assign(OBJECT_ORDER, report.resource);
+    // Close modal
+    document.querySelector('.modal').classList.remove('active');
+
+    const resource = Object.assign(DataSpace.OBJECT_ORDER, report.resource);
+
+    const shape = DataSpace.createObjectShape(resource);
 
     let resKeys = Object.keys(resource);
     // Default value...
@@ -29,23 +32,25 @@ document.addEventListener('readystatechange', async () => {
 
     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(', ');
+        ?.replace(/^.*coordinates\':\s?\[(\d+\.\d+,\s?\d+\.\d+)\].*$/, "$1")
+        ?.split(', ');
 
     let lat, long;
     [long, lat] = coordinates;
     
-    attachMap([lat, long]);
+    DataSpace.createMap([lat, long]);
 
     resKeys = resKeys.filter(e => !e.includes('Coordinates'));
 
     document.querySelector('#rep-tit')
         .innerText = `${resType} ${report.displayname}`;
 
-    const repTable = document.querySelector('#resource tbody');
+    const repTable = document.querySelector('#res-before tbody');
+
     // TODO manage files and nested objects
-    for (const key of resKeys) {
+    for (const key in shape.get('before-gallery')) {
         const row = document.createElement('tr');
         let innerList = null;
         
@@ -93,11 +98,11 @@ document.addEventListener('readystatechange', async () => {
 
         for (const src of files) {
             const img = document.createElement('img');
-            img.className = 'img-responsive img-fit-contain';
+            img.className = 'img-responsive img-fit-cover';
             img.src = src;
 
             const col = document.createElement('div');
-            col.className = 'column col-4 c-hand spotlight';
+            col.className = 'column col-3 c-hand spotlight';
             col.setAttribute('data-src', src);
             col.setAttribute('data-download', true);
 
@@ -105,4 +110,17 @@ document.addEventListener('readystatechange', async () => {
             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);
+    }
 })