Draft report for Sample

js/ds.js

@@ -13,6 +13,7 @@ DataSpace.FILES_URI = `${DataSpace.BASE_URL}/files/uploadedfiles/`;
 DataSpace.RESOURCE_REPORT = {
     'Object' : resmap.OBJECT_REPORT,
     'Context' : resmap.CONTEXT_REPORT,
+    'Sample' : resmap.SAMPLE_REPORT,
 };
 /**
  * Populate partial objects from
@@ -64,16 +65,16 @@ DataSpace.createShape = function (resource, resType) {
  * @todo Refactor!! Make it general...
  *
  * @param {object} report The report's JSON object
+ * @param {object} report The report's arches-json object
  * @param {string[]} images Filenames of images
  *
  * @return {void}
  */
-DataSpace.renderReport = function (report, images)
+DataSpace.renderReport = function (report,  archesJson, images)
 {
-    // TODO
     let resource = report.resource; 
     let resKeys = Object.keys(resource);
-    // TODO
+    // TODO prepare 404 page
     if (!resKeys.length) {
         location.href = '/404.html';
         return;
@@ -81,20 +82,33 @@ DataSpace.renderReport = function (report, images)
     
     let resType = resKeys[0].split(' ')[0]; 
 
-    const geoJSON = JSON.parse(
+    if (resType === 'Sample') {
-        resource[`${resType} Coordinates`]
+        const container = document.querySelector('#analysis');
-            .replaceAll('\'', '"')
+        container.classList.remove('d-hide');
-    );
+        // TODO handle click on "View Analysis"
+        container.querySelector('button').onclick = () => {
+            console.log(this.getRelatedAnalysisId(archesJson));
+        }
+     }
 
-    // TODO this is terrible...
+    if (['Object', 'Context'].includes(resType)) {
-    const centerCoords = this.getCenterCoordinates(geoJSON);
+        const geoJSON = JSON.parse(
-    this.createMap(geoJSON);
+            resource[`${resType} Coordinates`]
+                .replaceAll('\'', '"')
+        );
 
-    // Write coordinates below map
+        document.querySelector('#geo').classList.remove('d-hide');
-    document.querySelector('#coord').innerHTML = `
+
-        <span><strong>Latitude:</strong> ${centerCoords[0]}</span>
+        // TODO this is terrible...
-        <span><strong>Longitude:</strong> ${centerCoords[1]}</span>
+        const centerCoords = this.getCenterCoordinates(geoJSON);
-    `;
+        this.createMap(geoJSON);
+
+        // Write coordinates below map
+        document.querySelector('#coord').innerHTML = `
+            <span><strong>Latitude:</strong> ${centerCoords[0]}</span>
+            <span><strong>Longitude:</strong> ${centerCoords[1]}</span>
+        `;
+    }
 
     resKeys = resKeys.filter(e => !e.includes('Coordinates'));
 
@@ -298,13 +312,26 @@ DataSpace.attachReadMore = function (cssClass, maxWords = 100)
                         contentElement.appendChild(node);
                     }
                 }
-
                 contentElement.textContent = text + ' ';
                 contentElement.appendChild(less);
             }
         }
     }
 }
+/**
+ * For the Sample report
+ *
+ * @todo This is quite awful...
+ * @param {object} resource The resource object (Arches JSON!)
+ *
+ * @returns {string}
+ */
+DataSpace.getRelatedAnalysisId = function (resource)
+{
+    // The related analysis is the 7th element
+    // in the tiles array...
+    return Object.values(resource.tiles[6].data)[0][0]['resourceId'];
+}
 /**
  * @todo The order of elements in the tiles array
  *       in arches-json is the same as that of
@@ -343,7 +370,7 @@ function _createImgGallery(images, htmlId)
         img.src = src;
 
         const col = document.createElement('div');
-        col.className = 'column col-3 c-hand spotlight';
+        col.className = 'column p-1 col-lg-3 col-md-4 col-sm-12 c-hand spotlight';
         col.setAttribute('data-src', src);
         col.setAttribute('data-download', true);
 
@@ -371,7 +398,7 @@ function _createReportTable(resType, shape, resource)
                     `<strong>${innerKey.replace(key,'')}</strong>:
                     ${resource[key][innerKey]}`;
 
-                if (resource[key][innerKey] !== null) {
+                if (resource[key][innerKey] !== '') {
                     innerList.appendChild(li);
                 }
             }
@@ -394,7 +421,6 @@ function _createReportTable(resType, shape, resource)
     }
 }
 
-// TODO `Read more` for description
 function _createReportTail(resType, shape, resource)
 {
     let after = document.querySelector('#res-after');

js/resmap.js

@@ -63,5 +63,53 @@ CONTEXT_REPORT.set(
         "Context Bibliography" : null,
     }
 );
+const SAMPLE_REPORT = new Map();
+SAMPLE_REPORT.set(
+    'before-gallery',
+    {
+        "Sample ID" : null,
+        "Sample Object" : null,
+        "Sample Sampling date" : null,
+        "Sample Withdrawal Point" : null,
+        "Sample Compiler" : null,
+        "Sample Bibliography" : null,
+    }
+);
+const ANALYSIS_REPORT = new Map();
+ANALYSIS_REPORT.set(
+    'before-gallery',
+    {
+        "Analysis Sample" : null,
+        "Analysis Description" : null,
+        "Analysis Conservation status" : null,
+    }
+);
+ANALYSIS_REPORT.set(
+    'gallery',
+    {
+        "Analysis Photos" : null,
+        /*
+        "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,
+        */
+    }
+);
 
-export {OBJECT_REPORT, CONTEXT_REPORT};
+export {
+    OBJECT_REPORT,
+    CONTEXT_REPORT,
+    SAMPLE_REPORT,
+    ANALYSIS_REPORT,
+};

js/views/report.js

@@ -4,8 +4,9 @@ import DataSpace from "../ds.js";
 
 document.addEventListener('readystatechange', async () => {
     DataSpace.printReport();
-    // Show modal
+    // Show waiting modal
-    document.querySelector('.modal').classList.add('active');
+    document.querySelector('.modal')
+        .classList.add('active');
 
     const resId = location.search.replace("?id=", '');
     const report = await DataSpace.fetchReport(resId);
@@ -15,11 +16,11 @@ document.addEventListener('readystatechange', async () => {
     );
     const images = DataSpace.getImagesSrc(archesJson);
 
-    // Close modal
+    // Close waiting modal
-    document.querySelector('.modal').classList.remove('active');
+    document.querySelector('.modal')
+        .classList.remove('active');
 
     // Create report HTML
-    DataSpace.renderReport(report, images);
+    DataSpace.renderReport(report, archesJson, images);
-
     DataSpace.attachReadMore('read-more', 80);
 });

report/index.html

@@ -44,7 +44,7 @@
                             </tbody>
                         </table>
                     </div>
-                    <div class="column col-lg-5  col-md-12 col-sm-12 p-2 mt-1">
+                    <div id="geo" class="d-hide column col-lg-5  col-md-12 col-sm-12 p-2 mt-1">
                         <div id="map" class="mt-2"></div>
                         <p class="mt-2 p-2">
                             <strong>Coordinates</strong>
@@ -61,6 +61,13 @@
                 </div>
                 <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>
         <footer class="text-light">