Restructure code and layout

css/ds.css

@@ -52,15 +52,19 @@ td ul {
 .mt-2 {
     margin-top: 2rem !important;
 }
-.key {
+td.key {
-    min-width: 200px;
+    min-width: 400px;
 }
 table.table td,
 table.table th {
     border: none;
 }
 #map {
-    height: 400px;
+    height: 450px;
+}
+#gallery img {
+    max-height: 200px;
+    min-height: 200px;
 }
 
 /* Print styles */

js/ds.js

@@ -4,12 +4,9 @@
 */
 const DataSpace = {};
 
-export const BASE_URL = 'http://dataspace.ispc.cnr.it';
+DataSpace.BASE_URL = 'http://dataspace.ispc.cnr.it';
-const RES_ENDPOINT = '/resources/';
+DataSpace.RES_ENDPOINT = '/resources/';
-/**
+DataSpace.OBJECT_ORDER = {
- * @todo Report shapes??
- */
-export const OBJECT_ORDER = {
     "Object Type" : null,
     "Object ID" : null,
     "Object Excavation code" : null,
@@ -30,43 +27,58 @@ export const SAMPLE_ORDER = {
 
 };
 */
-
+const OBJECT_REPORT = new Map();
-/**
+OBJECT_REPORT.set(
- * @todo Query report links to determine resource type?
+    'before-gallery',
- * @param {int} max Max number of resources to list
- *                  (randomly selected)
- * 
- * @returns {Array} An array with selected resource links
- */
-export async function fetchResourceList(max = 20)
     {
-    // TODO Errors!!
+        "Object Type" : null,
-    const list = await fetch(`${BASE_URL}${RES_ENDPOINT}`)
+        "Object ID" : null,
-        .then(res => res.json())
+        "Object Excavation code" : null,
-        .catch();
+        "Object Chronology" : null,
-
+        "Object Era" : null,
-    // Arbitrary slice...
+        "Object Geographical Context of Discovery" : null,
-    return list['ldp:contains'].slice(100, max + 100);
+        "Object Dimensions" : null,
+        "Object Material" : null,
     }
-/**
+);
- * Create links list
+OBJECT_REPORT.set(
- * @param {string[]} links The fetched resource links
+    'after-gallery',
- * @param {string} id The ID of the UL element
- * @param {string} replace The string that should replace loalhost...
- * 
- * @return {void}
- */
-export function createLinks(links, id, replace)
     {
-    for (const link of links) {
+        "Object Description" : null,
-        const item = document.createElement('li');
+        "Object Conservation State" : null,
-
+        "Object Reused?" : null,
-        item.innerHTML = 
+        "Object Project" : null,
-            `<a href="${link.replace('http://localhost:8000/resources/', replace)}">
+        "Object Compiler" : null,
-                ${link.substring(link.lastIndexOf('/') + 1)}
+        "Object Bibliography" : null,
-            </a>`;
-        document.querySelector(`#${id}`).appendChild(item);
     }
+);
+DataSpace.OBJECT_REPORT = OBJECT_REPORT;
+/**
+ * Populate partial objects from
+ * resource object based on Map
+ * @todo
+ * @param {object} resource
+ * 
+ * @return {Map<string, object>}
+ */
+DataSpace.createObjectShape = function(resource) {
+    const shape = this.OBJECT_REPORT;
+
+    let beforeGallery = shape.get('before-gallery'),
+        afterGallery = shape.get('after-gallery');
+
+    for (const key in shape.get('before-gallery')) {
+        beforeGallery[key] = resource[key];
+    }
+
+    for (const key in shape.get('after-gallery')) {
+        afterGallery[key] = resource[key];
+    }
+
+    shape.set('before-gallery', beforeGallery);
+    shape.set('after-gallery', afterGallery);
+
+    return shape;
 }
 /**
  * Fetch JSON report...
@@ -75,29 +87,45 @@ export function createLinks(links, id, replace)
  * 
  * @return {object}
  */
-export async function fetchReport(uuid, format='json')
+DataSpace.fetchReport = async function(uuid, format='json')
 {
     // TODO Errors!!
     const jsonRep =
-        await fetch(`${BASE_URL}${RES_ENDPOINT}${uuid}?format=${format}&indent=2`)
+        await fetch(`${this.BASE_URL}${this.RES_ENDPOINT}${uuid}?format=${format}&indent=2`)
         .then(res => res.json())
         .catch();
 
     return jsonRep;
 }
-export function printReport() {
+/**
-    document.querySelector('#print').addEventListener('click', () => {
+ * Add window.print to link in navbar
+ * 
+ * @return {void}
+ */
+DataSpace.printReport = function() {
+    document.querySelector('#print')
+        .addEventListener('click', () => {
             window.print();
     });
 }
-export function attachMap(coordinates, htmlId = 'map') {
+/**
-    const map = L.map(htmlId).setView(coordinates, 18);
+ * Attach Leaflet.js map to HTML element
+ * 
+ * @param {string[]} coordinates 
+ * @param {string} htmlId 
+ * 
+ * @return {void}
+ */
+DataSpace.createMap = function(coordinates, htmlId = 'map') {
+    const map = L.map(htmlId).setView(coordinates, 17);
 
     L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
         attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
     }).addTo(map);
 
-    L.marker(coordinates).addTo(map);
+    L.marker(coordinates).addTo(map)
+        .bindPopup(`lat.: ${coordinates[0]}, long. : ${coordinates[1]}`)
+        .openPopup();
 }
 /**
  * @todo Use TS to define object shape
@@ -105,11 +133,10 @@ export function attachMap(coordinates, htmlId = 'map') {
  *
  * @return {string[]}
  */
-export function getImageSrc(resource) {
+DataSpace.getImagesSrc = function(resource) {
     // TODO hardcoded...
-    const filesUri = `${BASE_URL}/files/uploadedfiles/`;
+    const filesUri = `${this.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 => { 
@@ -133,6 +160,8 @@ export function getImageSrc(resource) {
 
     return fileNames;
 }
+
+export default DataSpace;
 /**
  * Fetch file blob (CORS...)
  * @todo
@@ -146,3 +175,42 @@ export function getImageSrc(resource) {
  * Query report links to determine
  * resource instance type...
  */
+
+
+/**
+ * Create links list
+ * @param {string[]} links The fetched resource links
+ * @param {string} id The ID of the UL element
+ * @param {string} replace The string that should replace loalhost...
+ * 
+ * @return {void}
+export function createLinks(links, id, replace)
+{
+    for (const link of links) {
+        const item = document.createElement('li');
+
+        item.innerHTML = 
+            `<a href="${link.replace('http://localhost:8000/resources/', replace)}">
+                ${link.substring(link.lastIndexOf('/') + 1)}
+            </a>`;
+        document.querySelector(`#${id}`).appendChild(item);
+    }
+}
+ */
+/**
+ * @todo Query report links to determine resource type?
+ * @param {int} max Max number of resources to list
+ *                  (randomly selected)
+ * 
+ * @returns {Array} An array with selected resource links
+export async function fetchResourceList(max = 20)
+{
+    // TODO Errors!!
+    const list = await fetch(`${BASE_URL}${RES_ENDPOINT}`)
+        .then(res => res.json())
+        .catch();
+
+    // Arbitrary slice...
+    return list['ldp:contains'].slice(100, max + 100);
+}
+ */

js/views/report.js

@@ -1,22 +1,25 @@
 'use strict';
 
-import {
+import DataSpace from "../ds.js";
-    BASE_URL,
-    fetchReport,
-    printReport,
-    getImageSrc,
-    OBJECT_ORDER,
-    attachMap
-} from "../ds.js";
 
 document.addEventListener('readystatechange', async () => {
-    const report = await fetchReport(location.search.replace("?id=", ''));
+    DataSpace.printReport();
-    const archesJson = await fetchReport(location.search.replace("?id=", ''), 'arches-json');
+    // Show modal
-    const files = getImageSrc(archesJson);
+    document.querySelector('.modal').classList.add('active');
 
-    printReport();
+    const report = await DataSpace.fetchReport(location.search.replace("?id=", ''));
+    const archesJson = await DataSpace.fetchReport(
+        location.search.replace("?id=", ''),
+        'arches-json'
+    );
+    const files = DataSpace.getImagesSrc(archesJson);
 
-    const resource = Object.assign(OBJECT_ORDER, report.resource);
+    // Close modal
+    document.querySelector('.modal').classList.remove('active');
+
+    const resource = Object.assign(DataSpace.OBJECT_ORDER, report.resource);
+
+    const shape = DataSpace.createObjectShape(resource);
 
     let resKeys = Object.keys(resource);
     // Default value...
@@ -29,23 +32,25 @@ document.addEventListener('readystatechange', async () => {
 
     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")
+        ?.replace(/^.*coordinates\':\s?\[(\d+\.\d+,\s?\d+\.\d+)\].*$/, "$1")
-        .split(', ');
+        ?.split(', ');
 
     let lat, long;
     [long, lat] = coordinates;
     
-    attachMap([lat, long]);
+    DataSpace.createMap([lat, long]);
 
     resKeys = resKeys.filter(e => !e.includes('Coordinates'));
 
     document.querySelector('#rep-tit')
         .innerText = `${resType} ${report.displayname}`;
 
-    const repTable = document.querySelector('#resource tbody');
+    const repTable = document.querySelector('#res-before tbody');
+
     // TODO manage files and nested objects
-    for (const key of resKeys) {
+    for (const key in shape.get('before-gallery')) {
         const row = document.createElement('tr');
         let innerList = null;
         
@@ -93,11 +98,11 @@ document.addEventListener('readystatechange', async () => {
 
         for (const src of files) {
             const img = document.createElement('img');
-            img.className = 'img-responsive img-fit-contain';
+            img.className = 'img-responsive img-fit-cover';
             img.src = src;
 
             const col = document.createElement('div');
-            col.className = 'column col-4 c-hand spotlight';
+            col.className = 'column col-3 c-hand spotlight';
             col.setAttribute('data-src', src);
             col.setAttribute('data-download', true);
 
@@ -105,4 +110,17 @@ document.addEventListener('readystatechange', async () => {
             gallery.appendChild(col);
         }
     }
+
+    // Create after-gallery...
+    let after = document.querySelector('#res-after');
+
+    for (const key in shape.get('after-gallery')) {
+        const col = document.createElement('div');
+        col.className = 'column col-12';
+        col.innerHTML = `
+            <p class="text-bold">${key.replace(resType, '')}</p>
+            <p>${report.resource[key]}</p>
+        `
+        after.appendChild(col);
+    }
 })

report/index.html

@@ -33,25 +33,28 @@
             </section>
         </header>
         <main>
-            <div class="columns report-container">
+            <div class="report-container">
-                <div class="column col-6">
+                <h2 class="mt-1 p-2" id="rep-tit"></h2>
-                    <h2 class="mt-2 p-2" id="rep-tit">
+                <div class="columns">
-                    </h2>
+                    <div class="column col-7">
-                    <table class="table table-hover mt-2" id="resource">
+                        <table class="table table-hover mt-2" id="res-before">
                             <tbody>
                             </tbody>
                         </table>
                     </div>
-                <div class="column col-6 p-2 mt-2">
+                    <div class="column col-5 p-2 mt-2">
                         <div id="map"></div>
                     </div>
-                <div class="container d-hide mt-2 pt-2 grid-md">
+                </div>
+                <div class="container d-hide mt-2 pt-2">
                     <p class="text-small">
                         Click on any image to open gallery
                     </p>
                     <div class="columns mt-2" id="gallery">
                     </div>
                 </div>
+                <div class="columns mt-2" id="res-after">
+                </div>
             </div>
         </main>
         <footer class="text-light">
@@ -101,6 +104,13 @@
                 </div>
             </div>
         </footer>
+        <div class="modal modal-lg">
+            <span class="modal-overlay"></span>
+            <div class="modal-container">
+              <p class="text-large text-center text-bold">Loading data...</p>
+              <div class="loading loading-lg"></div>
+            </div>
+        </div>
     </body>
 <!-- Templates? -->
 </html>