Render report for generic resource (draft)

.gitignore

@@ -1,3 +1,4 @@
 vendor/
 *.log
 .*.sw*
+docs/

js/ds.js

@@ -24,22 +24,19 @@ DataSpace.OBJECT_ORDER = {
     "Object Compiler" : null,
     "Object Bibliography" : null,
 };
-/*
 DataSpace.CONTEXT_ORDER = {
-    "Cultural Context Name" : null,
+    "Context Name" : null,
-    "Cultural Context Typology" : null,
+    "Context Typology" : null,
-    "Cultural Context Chronology" : null,
+    "Context Chronology" : null,
-    "Cultural Context Era" : null,
+    "Context Era" : null,
-    "Cultural Context Surface" : null,
+    "Context Surface" : null,
-    "Cultural Context Square meters" : null,
+    "Context Square meters" : null,
-    "Cultural Context Quality of the marble used/extracted" : null,
+    "Context Quality of the marble used/extracted" : null,
-    "Cultural Context Description" : null,
+    "Context Description" : null,
-    "Cultural Context Traces of extraction tools" : null,
+    "Context Traces of extraction tools" : null,
-    "Cultural Context Amount of debris (cm3)" : null,
+    "Context Amount of debris (cm3)" : null,
-    "Cultural Context Presence of unfinished materials" : null,
+    "Context Presence of unfinished materials" : null,
-
 };
-*/
 const OBJECT_REPORT = new Map();
 OBJECT_REPORT.set(
     'before-gallery',
@@ -70,17 +67,50 @@ OBJECT_REPORT.set(
         "Object Bibliography" : null,
     }
 );
+const CONTEXT_REPORT = new Map();
+CONTEXT_REPORT.set(
+    'before-gallery',
+    {
+        "Context Name" : null,
+        "Context Typology" : null,
+        "Context Chronology" : null,
+        "Context Era" : null,
+        "Context Surface" : null,
+        "Context Square meters" : null,
+        "Context Quality of the marble used/extracted" : null,
+        "Context Traces of extraction tools" : null,
+        "Context Amount of debris (cm3)" : null,
+        "Context Presence of unfinished materials" : null,
+    }
+);
+CONTEXT_REPORT.set(
+    'after-gallery-1-col',
+    {
+        "Context Description" : null,
+    }
+);
+CONTEXT_REPORT.set(
+    'after-gallery-2-col',
+    {
+    }
+);
 DataSpace.OBJECT_REPORT = OBJECT_REPORT;
+DataSpace.CONTEXT_REPORT = CONTEXT_REPORT;
+DataSpace.RESOURCE_REPORT = {
+    'Object' : DataSpace.OBJECT_REPORT,
+    'Context' : DataSpace.CONTEXT_REPORT,
+};
 /**
  * Populate partial objects from
  * resource object based on Map
  * @todo
  * @param {object} resource
+ * @param {string} resType
  * 
  * @return {Map<string, object>}
  */
-DataSpace.createObjectShape = function (resource) {
+DataSpace.createShape = function (resource, resType) {
-    const shape = this.OBJECT_REPORT;
+    const shape = this.RESOURCE_REPORT[resType];
 
     let beforeGallery = shape.get('before-gallery'),
         afterGalleryCol1 = shape.get('after-gallery-1-col'),
@@ -125,38 +155,38 @@ DataSpace.createObjectShape = function (resource) {
  *
  * @return {void}
  */
-DataSpace.renderObjectReport = function (report, images)
+DataSpace.renderReport = function (report, images)
 {
     // TODO
-    const resource = Object.assign(this.OBJECT_ORDER, report.resource);
+    let resource = report.resource; 
-    const shape = this.createObjectShape(resource);
-
     let resKeys = Object.keys(resource);
-    // Default value...
-    let resType = 'Object';
     // TODO
     if (!resKeys.length) {
         location.href = '/404.html';
         return;
     }
-
-    resType = resKeys[0].split(' ')[0]; 
-
-    // TODO use match...
-    // TODO check if coordinates exists...
-    const coordinates = resource['Object Coordinates']
-        ?.replace(/^.*coordinates\':\s?\[(\d+\.\d+,\s?\d+\.\d+)\].*$/, "$1")
-        ?.split(', ');
-
-    let lat, long;
-    [long, lat] = coordinates;
     
-    this.createMap([lat, long]);
+    let resType = resKeys[0].split(' ')[0]; 
+
+    const reportOrder = {
+        'Object' : this.OBJECT_ORDER,
+        'Context' : this.CONTEXT_ORDER,
+    };
+
+    resource = Object.assign(reportOrder[resType], resource);
+    const geoJSON = JSON.parse(
+        resource[`${resType} Coordinates`]
+            .replaceAll('\'', '"')
+    );
+
+    // TODO this is terrible...
+    const centerCoords = this.getCenterCoordinates(geoJSON);
+    this.createMap(geoJSON);
 
     // Write coordinates below map
     document.querySelector('#coord').innerHTML = `
-        <span><strong>Latitude</strong>: ${lat}</span>
+        <span><strong>Latitude:</strong> ${centerCoords[0]}</span>
-        <span><strong>Longitude</strong>: ${long}</span>  
+        <span><strong>Longitude:</strong> ${centerCoords[1]}</span>
     `;
 
     resKeys = resKeys.filter(e => !e.includes('Coordinates'));
@@ -164,14 +194,16 @@ DataSpace.renderObjectReport = function (report, images)
     document.querySelector('#rep-tit')
         .innerText = `${resType} ${report.displayname}`;
 
-    _createObjectTable(resType, shape, resource);
+    const shape = this.createShape(resource, resType);
+
+    _createReportTable(resType, shape, resource);
 
     if (images.length) {
         _createImgGallery(images, 'gallery');
     }
 
     // Create after-gallery...
-    _createObjectTail(resType, shape, resource);
+    _createReportTail(resType, shape, resource);
 }
 /**
  * Fetch JSON report...
@@ -203,16 +235,49 @@ DataSpace.printReport = function () {
             window.print();
     });
 }
+/**
+ * Calculate center coordinates
+ * based on feature geometry
+ * 
+ * @param {object} geoJSON  The geoJSON feature
+ * @returns {string[]}
+ */
+DataSpace.getCenterCoordinates = function (geoJSON)
+{
+    const geometry = geoJSON.features[0].geometry.type;
+
+    let coordinates = geometry === 'Point' ?
+        geoJSON.features[0].geometry.coordinates : 
+       geoJSON.features[0].geometry.coordinates[0];
+    
+    let centerCoords = [coordinates[1], coordinates[0]];
+    
+    if (geometry !== 'Point') {
+        let avX = coordinates[0]
+            .map(el => el[0])
+            .reduce((p, c) => p + c) / coordinates[0].length;
+
+        let avY = coordinates[0]
+            .map(el => el[1])
+            .reduce((p, c) => p + c) / coordinates[0].length;
+        
+        centerCoords = [avY, avX];
+    }
+    
+    return centerCoords;
+}
 /**
  * @todo Use OpenLayers?
  * Attach Leaflet.js map to HTML element
+ * and return center coordinates (NOOOO)
  * 
- * @param {string[]} coordinates 
+ * @param {string} geoJSON 
  * @param {string} htmlId 
  * 
- * @return {void}
+ * @return {string[]}
  */
-DataSpace.createMap = function (coordinates, htmlId = 'map') {
+DataSpace.createMap = function (geoJSON, htmlId = 'map') {
+    const centerCoords = this.getCenterCoordinates(geoJSON);
     const mapboxAttribution = `© <a href="https://www.mapbox.com/about/maps/">Mapbox</a>`;
     const mapboxSat = `https://api.mapbox.com/v4/{id}/{z}/{x}/{y}@2x.jpg90?access_token=${MAPBOX_TOKEN}`;
     const streets = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
@@ -234,15 +299,21 @@ DataSpace.createMap = function (coordinates, htmlId = 'map') {
         "Mapbox Satellite": satellite
     };
     const map = L.map(htmlId, {
-        center: coordinates,
+        center: centerCoords,
         zoom: 18,
         layers: [streets, satellite]
     });
 
     L.control.layers(baseMaps).addTo(map);
 
+    const geoLayer = L.geoJSON().addTo(map);
+    geoLayer.addData(geoJSON);
+
+    return centerCoords;
+    /*
     L.marker(coordinates).addTo(map)
         .bindPopup(`lat.: ${coordinates[0]}, long. : ${coordinates[1]}`);
+    */
 }
 /**
  * @todo Use TS to define object shape
@@ -322,7 +393,7 @@ function _createImgGallery(images, htmlId)
     }
 }
 
-function _createObjectTable(resType, shape, resource)
+function _createReportTable(resType, shape, resource)
 {
     const tableElement = document.querySelector('#res-before tbody');
     for (const key in shape.get('before-gallery')) {
@@ -361,7 +432,8 @@ function _createObjectTable(resType, shape, resource)
     }
 }
 
-function _createObjectTail(resType, shape, resource)
+// TODO `Read more` for description
+function _createReportTail(resType, shape, resource)
 {
     let after = document.querySelector('#res-after');
 

js/views/report.js

@@ -19,5 +19,5 @@ document.addEventListener('readystatechange', async () => {
     document.querySelector('.modal').classList.remove('active');
 
     // Create report HTML
-    DataSpace.renderObjectReport(report, images);
+    DataSpace.renderReport(report, images);
 });