Further report styling + jsdoc

js/README.md

@@ -0,0 +1,3 @@
+# DataSpace - JavaScript reference for custom frontend
+
+Minimal documentation for a custom frontend implementation of ISPC DataSpace reports using Arches REST API to retrieve data.

js/ds.js

@@ -2,6 +2,20 @@
 
 export const BASE_URL = 'http://dataspace.ispc.cnr.it';
 const RES_ENDPOINT = '/resources/';
+/**
+ * @todo Report shapes??
+ */
+/*
+export const OBJECT_ORDER = {
+    "Object Type" : null,
+    "Object ID" : null,
+    "Object Chronology" : null,
+    "Object Era" : null,
+};
+export const SAMPLE_ORDER = {
+
+};
+*/
 
 /**
  * @todo Query report links to determine resource type?
@@ -63,6 +77,7 @@ export function printReport() {
     });
 }
 /**
+ * @todo Use TS to define object shape
  * @param {object} resource The resource object (Arches JSON!)
  *
  * @return {string[]}

js/jsdoc.json

@@ -0,0 +1,19 @@
+{
+    "source": {
+        "include": ["ds.js", "views/report.js", "README.md"]
+    },
+
+    "opts": {
+        "encoding": "utf8",
+        "readme" : "README.md",
+        "destination": "docs/",
+        "recurse": true,
+        "verbose": true,
+        "template": "/home/nicolo/node_modules/lib/node_modules/clean-jsdoc-theme",
+        "theme_opts": {
+            "theme": "light",
+            "title": "DataSpace Custom Report",
+            "create_style": ".description{padding:10px 0}.param-desc{padding:10px}"
+        }
+    }
+}

js/views/report.js

@@ -27,7 +27,9 @@ document.addEventListener('readystatechange', async () => {
     }
 
     resType = resKeys[0].split(' ')[0]; 
+    // TODO use coordinates for map
     const coordinates = resource['Coordinates'];
+
     resKeys = resKeys.filter(e => !e.includes('Coordinates'));
 
     document.querySelector('#rep-tit')
@@ -61,27 +63,37 @@ document.addEventListener('readystatechange', async () => {
             }
         }
 
-        // TODO Pop coordinates before traversing the object
         let value = innerList !== null ? 
             innerList.outerHTML : report.resource[key];
 
-        if (key.includes('Images')) {
-            let images = '';
-
-            for (const src of files) {
-                images += `<span style="max-width: 100px; padding: 5px">
-                    <img class="img-fit-contain img-responsive" src="${src}" />
-                    </span>`;
-            }
-
-            value = images;
-        }
-
         row.innerHTML = `
             <td class="text-bold key">${key.replace(resType, '')}</td>
             <td>${value}</td>
         `;
 
-        repTable.appendChild(row);
+        if (!key.includes('Images') && !key.includes('Photos')) {
+            repTable.appendChild(row);
+        }
+    }
+
+    if (files.length) {
+        // Create image gallery
+        // TODO refactor...
+        let gallery = document.querySelector('#gallery');
+        gallery.classList.remove('d-hide');
+
+        for (const src of files) {
+            const img = document.createElement('img');
+            img.className = 'img-responsive img-fit-contain';
+            img.src = src;
+
+            const col = document.createElement('div');
+            col.className = 'column col-4 c-hand spotlight';
+            col.setAttribute('data-src', src);
+            col.setAttribute('data-download', true);
+
+            col.appendChild(img);
+            gallery.appendChild(col);
+        }
     }
 })