From 15bd976407a81a634709e48a08106192dc90eebf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=B2=20P?= <nicolo.paraciani@cnr.it>
Date: Wed, 12 Apr 2023 17:01:05 +0200
Subject: [PATCH] Fix 404 bugs

---
 404.html |  2 +-
 js/ds.js | 52 ++++++++++++++++++++++++++++++++++++++--------------
 2 files changed, 39 insertions(+), 15 deletions(-)

diff --git a/404.html b/404.html
index 274f881..506d79d 100644
--- a/404.html
+++ b/404.html
@@ -79,7 +79,7 @@
                 <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" />
+                            <img height="30px" class="img-fit-contain" src="img/favicon_dataspace.svg" />
                         </div>
                         <div class="tile-content">
                             2023 All rights reserved
diff --git a/js/ds.js b/js/ds.js
index e33dbc4..3373e3b 100644
--- a/js/ds.js
+++ b/js/ds.js
@@ -7,6 +7,7 @@ import * as resmap from './resmap.js';
 const DataSpace = {};
 
 DataSpace.BASE_URL = 'http://dataspace.ispc.cnr.it';
+DataSpace.FE_URL = `${DataSpace.BASE_URL}/custome-fe`;
 DataSpace.RES_ENDPOINT = '/resources/';
 DataSpace.FILES_URI = `${DataSpace.BASE_URL}/files/uploadedfiles/`;
 // TODO maybe these assignments are non needed?
@@ -78,7 +79,7 @@ DataSpace.renderReport = async function (report,  archesJson, images)
     let resType = resKeys[0].split(' ')[0]; 
 
     if (!resKeys.length || ! (resType in this.RESOURCE_REPORT)) {
-        location.href = '/404.html';
+        location.href = `${this.FE_URL}/404.html`;
         return;
     }
     
@@ -121,10 +122,10 @@ DataSpace.renderReport = async function (report,  archesJson, images)
         const container = document.querySelector('#analysis');
         container.classList.remove('d-hide');
         const report = await this.fetchReport(
-                this.getRelatedAnalysisId(archesJson)
+            this.getRelatedAnalysisId(archesJson)
         );
 
-        container.innerHTML += this.renderAnalysisReport(
+        container.innerHTML += await this.renderAnalysisReport(
             report.resource,
             report.displayname
         );
@@ -137,15 +138,16 @@ DataSpace.renderReport = async function (report,  archesJson, images)
  *
  * @returns {string} HTML
  */
-DataSpace.renderAnalysisReport = function (resource, type)
+DataSpace.renderAnalysisReport = async 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>
+        <hr>
+        <div class="column col-12">
+        <h3 class="p-2 text-center">${type.replace(/(\w+\s\w+).*$/,"$1")}</h3>
     `;
 
-    let table = '<table class="table table-hover">';
+    let table = '<table class="mt-2 table table-hover" style="max-width: 65%">';
 
     for (const key in shape.get('before-gallery')) {
         table += `<tr><td class="text-bold key">
@@ -156,34 +158,56 @@ DataSpace.renderAnalysisReport = function (resource, type)
 
     table += '</table>';
     html += table + '</div>';
+    html += `
+        <div class="column col-12 mt-2">
+            <h4 class="pl-2">Photos</h4>
+        </div>
+    `;
 
     const photos = resource['Analysis Photos'];
 
     for (const key in photos) {
         if (photos[key] !== '') {
+            const imgUrl = await this.fetchFileUrl(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 class="column col-3">
+                    <p class="text-bold text-right pl-2">${key.replace('Analysis Photos', '')}</p>
                 </div>
+                <div class="column col-4 pl-2">
+                    <img class="img-responsive c-hand spotlight p-2" src="${imgUrl}" />
+                </div>
+                <div class="column col-5"></div>
             `;
-            console.warn(photos[key], key);
         }
     }
-
     return html;
 }
+/**
+ * @todo Generic fetch...
+ * @param {string} uri 
+ * @returns {string} 
+ */
+DataSpace.fetchFileUrl = async function (uri)
+{
+    return await fetch(
+        `${this.BASE_URL}${uri}`
+        ).then(res => res.url)
+        .catch(excep => {
+            _fetchError(excep, 'error');
+            document.querySelector('.modal').classList.remove('active');
+        });
+}
 /**
  * Fetch JSON report...
  * @param {string} uuid The resource's UUID in Arches
  * @param {string} format Either 'json' or 'arches-json'
  * 
- * @return {object}
+ * @returns {object}
  */
 DataSpace.fetchReport = async function (uuid, format='json')
 {
     return await fetch(
-            `${this.BASE_URL}${this.RES_ENDPOINT}${uuid}?format=${format}`
+        `${this.BASE_URL}${this.RES_ENDPOINT}${uuid}?format=${format}`
         )
         .then(res => res.json())
         .catch(excep => {