Brutal image handling...

js/ds.js

@@ -43,22 +43,57 @@ export function createLinks(links, id, replace)
 /**
  * Fetch JSON report...
  * @param {string} uuid The resource's UUID in Arches
+ * @param {string} format Either 'json' or 'arches-json'
  * 
  * @return {object}
  */
-export async function fetchReport(uuid)
+export async function fetchReport(uuid, format='json')
 {
     // TODO Errors!!
     const jsonRep =
-        await fetch(`${BASE_URL}${RES_ENDPOINT}${uuid}?format=json&indent=2`)
+        await fetch(`${BASE_URL}${RES_ENDPOINT}${uuid}?format=${format}&indent=2`)
         .then(res => res.json())
         .catch();
 
-    // Arbitrary slice...
     return jsonRep;
 }
 export function printReport() {
-    document.querySelector('#print').onclick = window.print();
+    document.querySelector('#print').addEventListener('click', () => {
+        window.print();
+    });
+}
+/**
+ * @param {object} resource The resource object (Arches JSON!)
+ *
+ * @return {string[]}
+ */
+export function getImageSrc(resource) {
+    // TODO hardcoded...
+    const filesUri = `${BASE_URL}/files/uploadedfiles/`;
+
+    //let key = Object.keys(resource.tiles[11].data)[0];
+    // TODO don't filter this array, populate another one
+    let arr = resource.tiles
+        .filter(tile => { 
+            let key = Object.keys(tile.data)[0]
+            return Array.isArray(tile.data[key]);
+        }).filter(o => {
+            let key = Object.keys(o.data)[0]
+            return Object.keys(o.data[key][0]).includes('file_id')
+        });
+
+    let fileNames = [],
+        dataObjects = [];
+
+    arr.forEach(d => dataObjects.push(d.data));
+
+    dataObjects.forEach(e => {
+        e[Object.keys(e)[0]].forEach(o => {
+            fileNames.push(filesUri + o.name)
+        });
+    });
+
+    return fileNames;
 }
 /**
  * Fetch file blob (CORS...)

js/views/report.js

@@ -1,17 +1,21 @@
 'use strict';
 
 import {
+    BASE_URL,
     fetchReport,
     printReport,
+    getImageSrc
 } from "../ds.js";
 
 document.addEventListener('readystatechange', async () => {
     const report = await fetchReport(location.search.replace("?id=", ''));
     const resource = report.resource;
+    const archesJson = await fetchReport(location.search.replace("?id=", ''), 'arches-json');
 
-    document.querySelector('#print').addEventListener('click', () => {
-        window.print();
-    });
+    // DEBUG
+    const files = getImageSrc(archesJson);
+
+    printReport();
 
     let resKeys = Object.keys(resource);
     // Default value...
@@ -52,7 +56,8 @@ document.addEventListener('readystatechange', async () => {
                     }
                 }
             } else {
-                innerList.innerHTML = `<li>${report.resource[key]['@value']}</li>`;
+                innerList.innerHTML = 
+                    `<li>${report.resource[key]['@value']}</li>`;
             }
         }
 
@@ -60,6 +65,18 @@ document.addEventListener('readystatechange', async () => {
         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>