From 76a307ae8be6b051a3bded0b277de43e0c6f9dc0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=B2=20P?= Date: Mon, 6 Mar 2023 17:08:53 +0100 Subject: [PATCH] Restructure code and layout --- css/ds.css | 10 ++- js/ds.js | 174 +++++++++++++++++++++++++++++++-------------- js/views/report.js | 58 +++++++++------ report/index.html | 34 +++++---- 4 files changed, 188 insertions(+), 88 deletions(-) diff --git a/css/ds.css b/css/ds.css index c37fb94..d3212cc 100644 --- a/css/ds.css +++ b/css/ds.css @@ -52,15 +52,19 @@ td ul { .mt-2 { margin-top: 2rem !important; } -.key { - min-width: 200px; +td.key { + 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 */ diff --git a/js/ds.js b/js/ds.js index d9db858..6547cc0 100644 --- a/js/ds.js +++ b/js/ds.js @@ -4,12 +4,9 @@ */ const DataSpace = {}; -export const BASE_URL = 'http://dataspace.ispc.cnr.it'; -const RES_ENDPOINT = '/resources/'; -/** - * @todo Report shapes?? - */ -export const OBJECT_ORDER = { +DataSpace.BASE_URL = 'http://dataspace.ispc.cnr.it'; +DataSpace.RES_ENDPOINT = '/resources/'; +DataSpace.OBJECT_ORDER = { "Object Type" : null, "Object ID" : null, "Object Excavation code" : null, @@ -30,43 +27,58 @@ export const SAMPLE_ORDER = { }; */ - -/** - * @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); -} -/** - * 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 = - ` - ${link.substring(link.lastIndexOf('/') + 1)} - `; - document.querySelector(`#${id}`).appendChild(item); +const OBJECT_REPORT = new Map(); +OBJECT_REPORT.set( + 'before-gallery', + { + "Object Type" : null, + "Object ID" : null, + "Object Excavation code" : null, + "Object Chronology" : null, + "Object Era" : null, + "Object Geographical Context of Discovery" : null, + "Object Dimensions" : null, + "Object Material" : null, } +); +OBJECT_REPORT.set( + 'after-gallery', + { + "Object Description" : null, + "Object Conservation State" : null, + "Object Reused?" : null, + "Object Project" : null, + "Object Compiler" : null, + "Object Bibliography" : null, + } +); +DataSpace.OBJECT_REPORT = OBJECT_REPORT; +/** + * Populate partial objects from + * resource object based on Map + * @todo + * @param {object} resource + * + * @return {Map} + */ +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', () => { - window.print(); +/** + * 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: '© OpenStreetMap 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 = + ` + ${link.substring(link.lastIndexOf('/') + 1)} + `; + 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); +} + */ \ No newline at end of file diff --git a/js/views/report.js b/js/views/report.js index b8544b4..295b7be 100644 --- a/js/views/report.js +++ b/js/views/report.js @@ -1,22 +1,25 @@ 'use strict'; -import { - BASE_URL, - fetchReport, - printReport, - getImageSrc, - OBJECT_ORDER, - attachMap -} from "../ds.js"; +import DataSpace from "../ds.js"; document.addEventListener('readystatechange', async () => { - const report = await fetchReport(location.search.replace("?id=", '')); - const archesJson = await fetchReport(location.search.replace("?id=", ''), 'arches-json'); - const files = getImageSrc(archesJson); + DataSpace.printReport(); + // Show modal + 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") - .split(', '); + ?.replace(/^.*coordinates\':\s?\[(\d+\.\d+,\s?\d+\.\d+)\].*$/, "$1") + ?.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 = ` +

${key.replace(resType, '')}

+

${report.resource[key]}

+ ` + after.appendChild(col); + } }) diff --git a/report/index.html b/report/index.html index e78a846..bbe0e34 100644 --- a/report/index.html +++ b/report/index.html @@ -33,25 +33,28 @@
-
-
-

-

- - - -
+
+

+
+
+ + + +
+
+
+
+
-
-
-
-
+

Click on any image to open gallery

+
+
@@ -101,6 +104,13 @@
+
+ +
+

Loading data...

+
+
+