Analysis report draft

css/ds.css

@@ -1,5 +1,9 @@
 @import '../vendor/fontawesome-free/css/all.css';
 
+:root {
+    --ispc-blue: #213B55;
+}
+
 body {
     height: 100%;
 }
@@ -51,6 +55,20 @@ td ul {
 .mt-2 {
     margin-top: 2rem !important;
 }
+.blue-bg {
+    background-color: var(--ispc-blue) !important;
+}
+.btn {
+    color: #fff;
+    background-color: var(--ispc-blue);
+    border-color: var(--ispc-blue);
+}
+.btn:hover {
+    color: #fff;
+    background-color: var(--ispc-blue);
+    opacity: 0.7;
+    border-color: var(--ispc-blue);
+}
 table.table td,
 table.table th {
     border: none;

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

report/index.html

@@ -62,11 +62,6 @@
                 <div class="columns mt-2" id="res-after">
                 </div>
                 <div id="analysis" class="d-hide columns mt-2 mb-2 pb-2">
-                    <div class="column col-12 text-center">
-                        <button class="btn btn-primary btn-lg">
-                            View Analysis
-                        </button>
-                    </div>
                 </div>
             </div>
         </main>