Further report styling + jsdoc

css/ds.css

@@ -19,8 +19,19 @@ main {
 }
 footer {
     min-height: 40px;
-    background-color: rgba(5, 5, 5, 0.6);
+    background-color: #213B55;
-    padding: 3rem;
+    padding: 1rem 5rem;
+}
+footer a {
+    color: #fff;
+    cursor: pointer;
+    text-decoration: underline;
+}
+footer a:hover {
+    color: #fff;
+}
+footer .column > a {
+    display: block;
 }
 ul {
     list-style: none;
@@ -28,7 +39,6 @@ ul {
 ul li {
     padding: 5px;
 }
-
 td ul {
     margin-left: 0;
     padding-left: 0;
@@ -37,7 +47,7 @@ td ul {
     width: 75%;
     margin: 0 auto;
     background-color: #fff;
-    padding: 1rem 1rem;
+    padding: 1rem 1rem 3rem 1rem;
 }
 .mt-2 {
     margin-top: 2rem !important;
@@ -45,4 +55,19 @@ td ul {
 .key {
     min-width: 200px;
 }
+table.table td,
+table.table th {
+    border: none;
+}
 
+/* Print styles */
+@media print {
+    .report-container {
+        width: 100%;
+    }
+    .navbar,
+    footer,
+    #map {
+        display: none;
+    }
+}

js/README.md

@@ -0,0 +1,3 @@
+# DataSpace - JavaScript reference for custom frontend
+
+Minimal documentation for a custom frontend implementation of ISPC DataSpace reports using Arches REST API to retrieve data.

js/ds.js

@@ -2,6 +2,20 @@
 
 export const BASE_URL = 'http://dataspace.ispc.cnr.it';
 const RES_ENDPOINT = '/resources/';
+/**
+ * @todo Report shapes??
+ */
+/*
+export const OBJECT_ORDER = {
+    "Object Type" : null,
+    "Object ID" : null,
+    "Object Chronology" : null,
+    "Object Era" : null,
+};
+export const SAMPLE_ORDER = {
+
+};
+*/
 
 /**
  * @todo Query report links to determine resource type?
@@ -63,6 +77,7 @@ export function printReport() {
     });
 }
 /**
+ * @todo Use TS to define object shape
  * @param {object} resource The resource object (Arches JSON!)
  *
  * @return {string[]}

js/jsdoc.json

@@ -0,0 +1,19 @@
+{
+    "source": {
+        "include": ["ds.js", "views/report.js", "README.md"]
+    },
+
+    "opts": {
+        "encoding": "utf8",
+        "readme" : "README.md",
+        "destination": "docs/",
+        "recurse": true,
+        "verbose": true,
+        "template": "/home/nicolo/node_modules/lib/node_modules/clean-jsdoc-theme",
+        "theme_opts": {
+            "theme": "light",
+            "title": "DataSpace Custom Report",
+            "create_style": ".description{padding:10px 0}.param-desc{padding:10px}"
+        }
+    }
+}

js/views/report.js

@@ -27,7 +27,9 @@ document.addEventListener('readystatechange', async () => {
     }
 
     resType = resKeys[0].split(' ')[0]; 
+    // TODO use coordinates for map
     const coordinates = resource['Coordinates'];
+
     resKeys = resKeys.filter(e => !e.includes('Coordinates'));
 
     document.querySelector('#rep-tit')
@@ -61,27 +63,37 @@ document.addEventListener('readystatechange', async () => {
             }
         }
 
-        // TODO Pop coordinates before traversing the object
         let value = innerList !== null ? 
             innerList.outerHTML : report.resource[key];
 
-        if (key.includes('Images')) {
-            let images = '';
-
-            for (const src of files) {
-                images += `<span style="max-width: 100px; padding: 5px">
-                    <img class="img-fit-contain img-responsive" src="${src}" />
-                    </span>`;
-            }
-
-            value = images;
-        }
-
         row.innerHTML = `
             <td class="text-bold key">${key.replace(resType, '')}</td>
             <td>${value}</td>
         `;
 
-        repTable.appendChild(row);
+        if (!key.includes('Images') && !key.includes('Photos')) {
+            repTable.appendChild(row);
+        }
+    }
+
+    if (files.length) {
+        // Create image gallery
+        // TODO refactor...
+        let gallery = document.querySelector('#gallery');
+        gallery.classList.remove('d-hide');
+
+        for (const src of files) {
+            const img = document.createElement('img');
+            img.className = 'img-responsive img-fit-contain';
+            img.src = src;
+
+            const col = document.createElement('div');
+            col.className = 'column col-4 c-hand spotlight';
+            col.setAttribute('data-src', src);
+            col.setAttribute('data-download', true);
+
+            col.appendChild(img);
+            gallery.appendChild(col);
+        }
     }
 })

package.json

@@ -7,6 +7,8 @@
   "license": "MIT",
   "dependencies": {
     "fontawesome-free": "^1.0.4",
-    "spectre.css": "^0.5.9"
+    "plotly.js": "^2.18.2",
+    "spectre.css": "^0.5.9",
+    "spotlight.js": "^0.7.8"
   }
 }

report/index.html

@@ -1,10 +1,11 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <title>Dataspace | Report</title>
+        <title>DataSpace | Report</title>
         <link href="../vendor/spectre.css/dist/spectre.css" rel="stylesheet" />
         <link href="../css/ds.css" rel="stylesheet" />
         <link rel="shortcut icon" href="../img/favicon_dataspace.svg" />
+        <script src="../vendor/spotlight.js/dist/spotlight.bundle.js"></script>
         <script src="../js/views/report.js" type="module"></script>
     </head>
     <body>
@@ -23,7 +24,7 @@
                 <a href="http://dataspace.ispc.cnr.it/search" class="btn btn-link" title="Search">
                     <i class="fa fa-search"></i>
                 </a>
-                <a class="btn btn-link" id="print">
+                <a class="btn btn-link" title="Print this page" id="print">
                     <i class="fa fa-print"></i>
                 </a>
                 <a class="btn btn-link"></a>
@@ -40,12 +41,60 @@
                     </table>
                 </div>
                 <div class="column col-4 p-2">
-                    <img class="img-responsive mt-2" src="../img/map.png" />
+                    <img id="map" class="img-responsive mt-2" src="../img/map.png" />
+                </div>
+                <div class="container grid-md">
+                    <div class="columns d-hide mt-2" id="gallery">
+                    </div>
                 </div>
             </div>
         </main>
-        <footer>
+        <footer class="text-light">
-            <div class="text-center text-light mt-2">Whatever...</div>
+            <h6 class="text-bold mt-2">Institute of Heritage Science</h6>
+            <div class="columns mt-2">
+                <div class="column col-6">
+                    <p class="mb-0">Find us</p>
+                    <p class="text-small pt-2">
+                        Via Cardinale Guglielmo Sanfelice 8, 80134 Napoli (NA), IT<br>
+                        Tel: 081-247-0966
+                    </p>
+                </div>
+                <div class="column col-3">
+                    <p class="mb-0">Useful links</p>
+                    <a class="text-small pt-2">About DataSpace</a>
+                    <a class="text-small pt-2">Contact us</a>
+                </div>
+                <div class="column col-3">
+                    <p class="mb-0">Disclaimer & Agreements</p>
+                    <a class="text-small pt-2">Cookies Policy</a>
+                    <a class="text-small pt-2">Privacy Policy</a>
+                </div>
+            </div>
+            <div class="columns mt-1 mb-2" style="border-top: 1px solid #fff">
+                <div class="column col-6 mt-1">
+                    <p class="mt-1 mb-0 text-small">
+                        <a href="https://www.cnr.it" title="CNR website">
+                            National Research Council
+                        </a> -
+                        <a href="https://www.ispc.cnr.it" title="ISPC website">
+                            Institute of Heritage Science
+                        </a>
+                    </p>
+                </div>
+                <div class="column col-3">
+                    <div class="tile tile-centered text-small pt-2">
+                        <div class="tile-icon">
+                            <img height="30px" class="img-fit-contain" src="/img/favicon_dataspace.svg" />
+                        </div>
+                        <div class="tile-content">
+                            2023 All rights reserved
+                        </div>
+                    </div>
+                </div>
+                <div class="column col-3 mt-1">
+                    <a href="https://archesproject.org" class="text-small pt-2">Powered by Arches</a>
+                </div>
+            </div>
         </footer>
     </body>
 <!-- Templates? -->