Analysis report draft

js/ds.js

@@ -14,6 +14,7 @@ DataSpace.RESOURCE_REPORT = {
     'Object' : resmap.OBJECT_REPORT,
     'Context' : resmap.CONTEXT_REPORT,
     'Sample' : resmap.SAMPLE_REPORT,
+    'Analysis' : resmap.ANALYSIS_REPORT,
 };
 /**
  * Populate partial objects from
@@ -70,7 +71,7 @@ DataSpace.createShape = function (resource, resType) {
  *
  * @return {void}
  */
-DataSpace.renderReport = function (report,  archesJson, images)
+DataSpace.renderReport = async function (report,  archesJson, images)
 {
     let resource = report.resource; 
     let resKeys = Object.keys(resource);
@@ -82,14 +83,6 @@ DataSpace.renderReport = function (report,  archesJson, images)
     
     let resType = resKeys[0].split(' ')[0]; 
 
-    if (resType === 'Sample') {
-        const container = document.querySelector('#analysis');
-        container.classList.remove('d-hide');
-        // TODO handle click on "View Analysis"
-        container.querySelector('button').onclick = () => {
-            console.log(this.getRelatedAnalysisId(archesJson));
-        }
-     }
 
     if (['Object', 'Context'].includes(resType)) {
         const geoJSON = JSON.parse(
@@ -125,6 +118,62 @@ DataSpace.renderReport = function (report,  archesJson, images)
 
     // Create after-gallery...
     _createReportTail(resType, shape, resource);
+
+    if (resType === 'Sample') {
+        const container = document.querySelector('#analysis');
+        container.classList.remove('d-hide');
+        const report = await this.fetchReport(
+                this.getRelatedAnalysisId(archesJson)
+        );
+
+        container.innerHTML += this.renderAnalysisReport(
+            report.resource,
+            report.displayname
+        );
+     }
+}
+/**
+ * Create Analysis report
+ * @param {string} uuid The analysis resource's UUID
+ * @param {string} type The analysis displayname
+ *
+ * @returns {string} HTML
+ */
+DataSpace.renderAnalysisReport = function (resource, type)
+{
+    const shape = this.createShape(resource, 'Analysis');
+    let html = `
+        <div class="column col-12 mt-2">
+        <h3 class="p-2 text-center">${type}</h3>
+    `;
+
+    let table = '<table class="table table-hover">';
+
+    for (const key in shape.get('before-gallery')) {
+        table += `<tr><td class="text-bold key">
+            ${key.replace('Analysis', '')}</td>
+            <td>${resource[key]}</td>
+            </tr>`;
+    }
+
+    table += '</table>';
+    html += table + '</div>';
+
+    const photos = resource['Analysis Photos'];
+
+    for (const key in photos) {
+        if (photos[key] !== '') {
+            html += `
+                <div class="column col-12 mt-2 pl-2">
+                <h4 class="pl-2">Photos</h4>
+                <p class="mt-2 text-bold pl-2">${key.replace('Analysis Photos', '')}</p>
+                </div>
+            `;
+            console.warn(photos[key], key);
+        }
+    }
+
+    return html;
 }
 /**
  * Fetch JSON report...
@@ -136,13 +185,12 @@ DataSpace.renderReport = function (report,  archesJson, images)
 DataSpace.fetchReport = async function (uuid, format='json')
 {
     return await fetch(
-            `${this.BASE_URL}${this.RES_ENDPOINT}${uuid}?format=${format}&indent=2`
+            `${this.BASE_URL}${this.RES_ENDPOINT}${uuid}?format=${format}`
         )
         .then(res => res.json())
         .catch(excep => {
             _fetchError(excep, 'error');
-            document.querySelector('.modal')
-                .classList.remove('active');
+            document.querySelector('.modal').classList.remove('active');
         });
 }
 /**

js/resmap.js

@@ -87,23 +87,21 @@ ANALYSIS_REPORT.set(
 ANALYSIS_REPORT.set(
     'gallery',
     {
-        "Analysis Photos" : null,
-        /*
-        "Analysis Photos Microscopy" : null,
-        "Analysis Photos SEM EDS" : null,
-        "Analysis Photos Microscopic" : null,
-        */
+        "Analysis Photos" : {
+            "Analysis Photos Microscopy" : null,
+            "Analysis Photos SEM EDS" : null,
+            "Analysis Photos Microscopic" : null,
+        }
     }
 );
 ANALYSIS_REPORT.set(
     'after-gallery',
     {
-        "Analysis Spectrum" : null
-        /*
-        "Spectrum Raw Data" : null,
-        "Spectrum Technique" : null,
-        "Spectrum Interpreted Data" : null,
-        */
+        "Analysis Spectrum" : {
+            "Spectrum Raw Data" : null,
+            "Spectrum Technique" : null,
+            "Spectrum Interpreted Data" : null,
+        }
     }
 );