Further report styling + jsdoc

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);
+        }
     }
 })