diff --git a/css/ds.css b/css/ds.css index e0658e9..44bae60 100644 --- a/css/ds.css +++ b/css/ds.css @@ -66,7 +66,7 @@ table.table th { display: block; } -/* Print styles */ +/* Print layout */ @media print { .report-container { width: 100%; @@ -93,4 +93,4 @@ table.table th { td.key { min-width: 200px; } -} \ No newline at end of file +} diff --git a/js/ds.js b/js/ds.js index b699990..8a5eabf 100644 --- a/js/ds.js +++ b/js/ds.js @@ -7,6 +7,7 @@ const DataSpace = {}; DataSpace.BASE_URL = 'http://dataspace.ispc.cnr.it'; DataSpace.RES_ENDPOINT = '/resources/'; +DataSpace.FILES_URI = `${DataSpace.BASE_URL}/files/uploadedfiles/`; DataSpace.OBJECT_ORDER = { "Object Type" : null, "Object ID" : null, @@ -43,10 +44,15 @@ OBJECT_REPORT.set( } ); OBJECT_REPORT.set( - 'after-gallery', + 'after-gallery-1-col', { "Object Description" : null, "Object Conservation State" : null, + } +); +OBJECT_REPORT.set( + 'after-gallery-2-col', + { "Object Reused?" : null, "Object Project" : null, "Object Compiler" : null, @@ -66,8 +72,10 @@ DataSpace.createObjectShape = function (resource) { const shape = this.OBJECT_REPORT; let beforeGallery = shape.get('before-gallery'), - afterGallery = shape.get('after-gallery'); + afterGalleryCol1 = shape.get('after-gallery-1-col'), + afterGalleryCol2 = shape.get('after-gallery-2-col'); + // TODO export to private function for (const key in shape.get('before-gallery')) { if (resource[key]) { beforeGallery[key] = resource[key]; @@ -76,19 +84,188 @@ DataSpace.createObjectShape = function (resource) { } } - for (const key in shape.get('after-gallery')) { + for (const key in shape.get('after-gallery-1-col')) { if (resource[key]) { - afterGallery[key] = resource[key]; + afterGalleryCol1[key] = resource[key]; } else { - delete afterGallery[key]; + delete afterGalleryCol1[key]; + } + } + + for (const key in shape.get('after-gallery-2-col')) { + if (resource[key]) { + afterGalleryCol2[key] = resource[key]; + } else { + delete afterGalleryCol2[key]; } } shape.set('before-gallery', beforeGallery); - shape.set('after-gallery', afterGallery); + shape.set('after-gallery-1-col', afterGalleryCol1); + shape.set('after-gallery-2-col', afterGalleryCol2); return shape; } +/** + * @todo Refactor!! + * + * @param {object} report The report's JSON object + * @param {string[]} images Filenames of images + * + * @return {void} + */ +DataSpace.renderObjectReport = function (report, images) +{ + // TODO + const resource = Object.assign(this.OBJECT_ORDER, 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]); + + // Write coordinates below map + document.querySelector('#coord').innerHTML = ` + Latitude: ${lat} + Longitude: ${long} + `; + + resKeys = resKeys.filter(e => !e.includes('Coordinates')); + + document.querySelector('#rep-tit') + .innerText = `${resType} ${report.displayname}`; + + const repTable = document.querySelector('#res-before tbody'); + + // TODO manage files and nested objects + for (const key in shape.get('before-gallery')) { + const row = document.createElement('tr'); + let innerList = null; + + // TODO refactor + if (typeof resource[key] == 'object') { + const boolValue = '@value' in resource[key]; + innerList = document.createElement('ul'); + + if (! boolValue) { + for (const k in resource[key]) { + const li = document.createElement('li'); + li.innerHTML = + `${k.replace(key,'')}: + ${resource[key][k]}`; + + if (resource[key][k] !== null) { + innerList.appendChild(li); + } + } + } else { + innerList.innerHTML = + `
  • ${resource[key]['@value']}
    • `; + } + } + + let value = innerList !== null ? + innerList.outerHTML : resource[key]; + + row.innerHTML = ` + ${key.replace(resType, '')} + ${value} + `; + + if (!key.includes('Images') && !key.includes('Photos')) { + repTable.appendChild(row); + } + } + + if (images.length) { + // Create image gallery + // TODO refactor... + let gallery = document.querySelector('#gallery'); + gallery.parentElement + .classList.remove('d-hide'); + + for (const src of images) { + const img = document.createElement('img'); + img.className = 'img-responsive img-fit-cover'; + img.src = src; + + const col = document.createElement('div'); + col.className = 'column col-3 c-hand spotlight'; + col.setAttribute('data-src', src); + col.setAttribute('data-download', true); + + col.appendChild(img); + gallery.appendChild(col); + } + } + + // Create after-gallery... + let after = document.querySelector('#res-after'); + + for (const key in shape.get('after-gallery-1-col')) { + const col = document.createElement('div'); + + col.className = 'column col-12'; + col.innerHTML = ` +

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

    +

    ${resource[key]}

    + `; + + after.appendChild(col); + } + + for (const key in shape.get('after-gallery-2-col')) { + const col = document.createElement('div'); + + col.className = 'column col-6'; + let displayValue = resource[key]; + + if (typeof resource[key] === 'object') { + const boolValue = '@value' in resource[key]; + if (! boolValue) { + col.innerHTML = ''; + } + + displayValue = boolValue ? + resource[key]['@value'].replace('False', 'No') : + displayValue; + } + + col.innerHTML = ` +

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

    +

    ${displayValue}

    + `; + + after.appendChild(col); + } +} /** * Fetch JSON report... * @param {string} uuid The resource's UUID in Arches @@ -98,8 +275,7 @@ DataSpace.createObjectShape = function (resource) { */ DataSpace.fetchReport = async function (uuid, format='json') { - const jsonRep = - await fetch( + return await fetch( `${this.BASE_URL}${this.RES_ENDPOINT}${uuid}?format=${format}&indent=2` ) .then(res => res.json()) @@ -108,8 +284,6 @@ DataSpace.fetchReport = async function (uuid, format='json') document.querySelector('.modal') .classList.remove('active'); }); - - return jsonRep; } /** * Add window.print to link in navbar @@ -123,6 +297,7 @@ DataSpace.printReport = function () { }); } /** + * @todo Use OpenLayers? * Attach Leaflet.js map to HTML element * * @param {string[]} coordinates @@ -159,8 +334,7 @@ DataSpace.createMap = function (coordinates, htmlId = 'map') { L.control.layers(baseMaps).addTo(map); L.marker(coordinates).addTo(map) - .bindPopup(`lat.: ${coordinates[0]}, long. : ${coordinates[1]}`) - .openPopup(); + .bindPopup(`lat.: ${coordinates[0]}, long. : ${coordinates[1]}`); } /** * @todo Use TS to define object shape @@ -169,17 +343,14 @@ DataSpace.createMap = function (coordinates, htmlId = 'map') { * @return {string[]} */ DataSpace.getImagesSrc = function (resource) { - // TODO hardcoded... - const filesUri = `${this.BASE_URL}/files/uploadedfiles/`; - // TODO don't filter this array, populate another one let arr = resource.tiles .filter(tile => { - let key = Object.keys(tile.data)[0] + let key = Object.keys(tile.data)[0]; return Array.isArray(tile.data[key]); }).filter(o => { - let key = Object.keys(o.data)[0] - return Object.keys(o.data[key][0]).includes('file_id') + let key = Object.keys(o.data)[0]; + return Object.keys(o.data[key][0]).includes('file_id'); }); let fileNames = [], @@ -189,13 +360,26 @@ DataSpace.getImagesSrc = function (resource) { dataObjects.forEach(e => { e[Object.keys(e)[0]].forEach(o => { - fileNames.push(filesUri + o.name) + fileNames.push(this.FILES_URI + o.name) }); }); return fileNames; } +/** + * @todo The order of elements in the tiles array + * in arches-json is the same as that of + * objects in the JSON resource (report) + * + * @param {object} resource The resource object (Arches JSON!) + * + * @return {string[]} +DataSpace.getLinkedData = function (resource) +{ +} +*/ + function _fetchError(message, htmlId) { const error = document.createElement('div'); @@ -210,16 +394,3 @@ function _fetchError(message, htmlId) } export default DataSpace; -/** - * Fetch file blob (CORS...) - * @todo - * - * @param {string} fileUri The file's URI in Arches - * - * @return {object} - */ -//export async function fetchFileBlob(fileUri); -/** - * Query report links to determine - * resource instance type... - */ diff --git a/js/views/report.js b/js/views/report.js index 898190c..02518f1 100644 --- a/js/views/report.js +++ b/js/views/report.js @@ -7,126 +7,17 @@ document.addEventListener('readystatechange', async () => { // Show modal document.querySelector('.modal').classList.add('active'); - const report = await DataSpace.fetchReport(location.search.replace("?id=", '')); + const resId = location.search.replace("?id=", ''); + const report = await DataSpace.fetchReport(resId); const archesJson = await DataSpace.fetchReport( - location.search.replace("?id=", ''), + resId, 'arches-json' ); - const files = DataSpace.getImagesSrc(archesJson); + const images = DataSpace.getImagesSrc(archesJson); // Close modal document.querySelector('.modal').classList.remove('active'); - const resource = Object.assign(DataSpace.OBJECT_ORDER, report.resource); + DataSpace.renderObjectReport(report, images); - const shape = DataSpace.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; - - DataSpace.createMap([lat, long]); - - // Write coordinates below map - document.querySelector('#coord').innerHTML = ` - Latitude: ${lat} - Longitude: ${long} - `; - - resKeys = resKeys.filter(e => !e.includes('Coordinates')); - - document.querySelector('#rep-tit') - .innerText = `${resType} ${report.displayname}`; - - const repTable = document.querySelector('#res-before tbody'); - - // TODO manage files and nested objects - for (const key in shape.get('before-gallery')) { - const row = document.createElement('tr'); - let innerList = null; - - // TODO refactor - if (typeof report.resource[key] == 'object') { - const boolValue = '@value' in report.resource[key]; - innerList = document.createElement('ul'); - - if (! boolValue) { - for (const k in report.resource[key]) { - const li = document.createElement('li'); - li.innerHTML = - `${k.replace(key,'')}: - ${report.resource[key][k]}`; - - if (report.resource[key][k] !== null) { - innerList.appendChild(li); - } - } - } else { - innerList.innerHTML = - `
  • ${report.resource[key]['@value']}
    • `; - } - } - - let value = innerList !== null ? - innerList.outerHTML : report.resource[key]; - - row.innerHTML = ` - ${key.replace(resType, '')} - ${value} - `; - - if (!key.includes('Images') && !key.includes('Photos')) { - repTable.appendChild(row); - } - } - - if (files.length) { - // Create image gallery - // TODO refactor... - let gallery = document.querySelector('#gallery'); - gallery.parentElement - .classList.remove('d-hide'); - - for (const src of files) { - const img = document.createElement('img'); - img.className = 'img-responsive img-fit-cover'; - img.src = src; - - const col = document.createElement('div'); - col.className = 'column col-3 c-hand spotlight'; - col.setAttribute('data-src', src); - col.setAttribute('data-download', true); - - col.appendChild(img); - 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 52352f3..e97a6ca 100644 --- a/report/index.html +++ b/report/index.html @@ -38,13 +38,13 @@

    - +
    -
    +

    Coordinates