Refined (final?) report layout for Object

css/ds.css

@@ -66,7 +66,7 @@ table.table th {
     display: block;
 }
 
-/* Print styles */
+/* Print layout */
 @media print {
     .report-container {
         width: 100%;
@@ -93,4 +93,4 @@ table.table th {
     td.key {
         min-width: 200px;
     }
-}
+}

js/ds.js

@@ -7,6 +7,7 @@ const DataSpace = {};
 
 DataSpace.BASE_URL = 'http://dataspace.ispc.cnr.it';
 DataSpace.RES_ENDPOINT = '/resources/';
+DataSpace.FILES_URI = `${DataSpace.BASE_URL}/files/uploadedfiles/`;
 DataSpace.OBJECT_ORDER = {
     "Object Type" : null,
     "Object ID" : null,
@@ -43,10 +44,15 @@ OBJECT_REPORT.set(
     }
 );
 OBJECT_REPORT.set(
-    'after-gallery',
+    'after-gallery-1-col',
     {
         "Object Description" : null,
         "Object Conservation State" : null,
+    }
+);
+OBJECT_REPORT.set(
+    'after-gallery-2-col',
+    {
         "Object Reused?" : null,
         "Object Project" : null,
         "Object Compiler" : null,
@@ -66,8 +72,10 @@ DataSpace.createObjectShape = function (resource) {
     const shape = this.OBJECT_REPORT;
 
     let beforeGallery = shape.get('before-gallery'),
-        afterGallery = shape.get('after-gallery');
+        afterGalleryCol1 = shape.get('after-gallery-1-col'),
+        afterGalleryCol2 = shape.get('after-gallery-2-col');
 
+    // TODO export to private function
     for (const key in shape.get('before-gallery')) {
         if (resource[key]) {
             beforeGallery[key] = resource[key];
@@ -76,19 +84,188 @@ DataSpace.createObjectShape = function (resource) {
         }
     }
 
-    for (const key in shape.get('after-gallery')) {
+    for (const key in shape.get('after-gallery-1-col')) {
         if (resource[key]) {
-            afterGallery[key] = resource[key];
+            afterGalleryCol1[key] = resource[key];
         } else {
-            delete afterGallery[key];
+            delete afterGalleryCol1[key];
+        }
+    }
+
+    for (const key in shape.get('after-gallery-2-col')) {
+        if (resource[key]) {
+            afterGalleryCol2[key] = resource[key];
+        } else {
+            delete afterGalleryCol2[key];
         }
     }
 
     shape.set('before-gallery', beforeGallery);
-    shape.set('after-gallery', afterGallery);
+    shape.set('after-gallery-1-col', afterGalleryCol1);
+    shape.set('after-gallery-2-col', afterGalleryCol2);
 
     return shape;
 }
+/**
+ * @todo Refactor!!
+ *
+ * @param {object} report The report's JSON object
+ * @param {string[]} images Filenames of images
+ *
+ * @return {void}
+ */
+DataSpace.renderObjectReport = function (report, images)
+{
+    // TODO
+    const resource = Object.assign(this.OBJECT_ORDER, report.resource);
+    const shape = this.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;
+    
+    this.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 resource[key] == 'object') {
+            const boolValue = '@value' in resource[key];
+            innerList = document.createElement('ul');
+
+            if (! boolValue) {
+                for (const k in resource[key]) {
+                    const li = document.createElement('li');
+                    li.innerHTML = 
+                        `<strong>${k.replace(key,'')}</strong>:
+                        ${resource[key][k]}`;
+
+                    if (resource[key][k] !== null) {
+                        innerList.appendChild(li);
+                    }
+                }
+            } else {
+                innerList.innerHTML = 
+                    `<li>${resource[key]['@value']}</li>`;
+            }
+        }
+
+        let value = innerList !== null ? 
+            innerList.outerHTML : 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 (images.length) {
+        // Create image gallery
+        // TODO refactor...
+        let gallery = document.querySelector('#gallery');
+        gallery.parentElement
+            .classList.remove('d-hide');
+
+        for (const src of images) {
+            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-1-col')) {
+        const col = document.createElement('div');
+
+        col.className = 'column col-12';
+        col.innerHTML = `
+            <p class="text-bold">${key.replace(resType, '')}</p>
+            <p>${resource[key]}</p>
+        `;
+
+        after.appendChild(col);
+    }
+
+    for (const key in shape.get('after-gallery-2-col')) {
+        const col = document.createElement('div');
+
+        col.className = 'column col-6';
+        let displayValue = resource[key];
+
+        if (typeof resource[key] === 'object') {
+            const boolValue = '@value' in resource[key];
+            if (! boolValue) {
+                col.innerHTML = '<ul>';
+
+                for (const innerKey in resource[key]) {
+                    col.innerHTML += `
+                        <li>
+                            <span class="text-bold">${innerKey.replace(resType, '')}</span>
+                            <span>${resource[key][innerKey]}</span>
+                        </li>
+                    `;
+                }
+                col.innerHTML += '</ul>';
+            }
+
+            displayValue = boolValue ?
+                resource[key]['@value'].replace('False', 'No') :
+                displayValue;
+        }
+
+        col.innerHTML = `
+            <p class="text-bold">${key.replace(resType, '')}</p>
+            <p>${displayValue}</p>
+        `;
+
+        after.appendChild(col);
+    }
+}
 /**
  * Fetch JSON report...
  * @param {string} uuid The resource's UUID in Arches
@@ -98,8 +275,7 @@ DataSpace.createObjectShape = function (resource) {
  */
 DataSpace.fetchReport = async function (uuid, format='json')
 {
-    const jsonRep =
+    return await fetch(
-        await fetch(
             `${this.BASE_URL}${this.RES_ENDPOINT}${uuid}?format=${format}&indent=2`
         )
         .then(res => res.json())
@@ -108,8 +284,6 @@ DataSpace.fetchReport = async function (uuid, format='json')
             document.querySelector('.modal')
                 .classList.remove('active');
         });
-
-    return jsonRep;
 }
 /**
  * Add window.print to link in navbar
@@ -123,6 +297,7 @@ DataSpace.printReport = function () {
     });
 }
 /**
+ * @todo Use OpenLayers?
  * Attach Leaflet.js map to HTML element
  * 
  * @param {string[]} coordinates 
@@ -159,8 +334,7 @@ DataSpace.createMap = function (coordinates, htmlId = 'map') {
     L.control.layers(baseMaps).addTo(map);
 
     L.marker(coordinates).addTo(map)
-        .bindPopup(`lat.: ${coordinates[0]}, long. : ${coordinates[1]}`)
+        .bindPopup(`lat.: ${coordinates[0]}, long. : ${coordinates[1]}`);
-        .openPopup();
 }
 /**
  * @todo Use TS to define object shape
@@ -169,17 +343,14 @@ DataSpace.createMap = function (coordinates, htmlId = 'map') {
  * @return {string[]}
  */
 DataSpace.getImagesSrc = function (resource) {
-    // TODO hardcoded...
-    const filesUri = `${this.BASE_URL}/files/uploadedfiles/`;
-
     // TODO don't filter this array, populate another one
     let arr = resource.tiles
         .filter(tile => { 
-            let key = Object.keys(tile.data)[0]
+            let key = Object.keys(tile.data)[0];
             return Array.isArray(tile.data[key]);
         }).filter(o => {
-            let key = Object.keys(o.data)[0]
+            let key = Object.keys(o.data)[0];
-            return Object.keys(o.data[key][0]).includes('file_id')
+            return Object.keys(o.data[key][0]).includes('file_id');
         });
 
     let fileNames = [],
@@ -189,13 +360,26 @@ DataSpace.getImagesSrc = function (resource) {
 
     dataObjects.forEach(e => {
         e[Object.keys(e)[0]].forEach(o => {
-            fileNames.push(filesUri + o.name)
+            fileNames.push(this.FILES_URI + o.name)
         });
     });
 
     return fileNames;
 }
 
+/**
+ * @todo The order of elements in the tiles array
+ *       in arches-json is the same as that of
+ *       objects in the JSON resource (report)
+ *
+ * @param {object} resource The resource object (Arches JSON!)
+ *
+ * @return {string[]}
+DataSpace.getLinkedData = function (resource) 
+{
+}
+*/
+
 function _fetchError(message, htmlId)
 {
     const error = document.createElement('div');
@@ -210,16 +394,3 @@ function _fetchError(message, htmlId)
 }
 
 export default DataSpace;
-/**
- * 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/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);
-    }
-})

report/index.html

@@ -38,13 +38,13 @@
                 <h2 class="mt-1 p-2" id="rep-tit"></h2>
                 <div class="columns">
                     <div class="column col-lg-7 col-md-12 col-sm-12">
-                        <table class="table mt-2" id="res-before">
+                        <table class="table table-hover mt-2" id="res-before">
                             <tbody>
                             </tbody>
                         </table>
                     </div>
                     <div class="column col-lg-5  col-md-12 col-sm-12 p-2 mt-1">
-                        <div id="map"></div>
+                        <div id="map" class="mt-2"></div>
                         <p class="mt-2 p-2">
                             <strong>Coordinates</strong>
                         </p>