Refined (final?) report layout for Object
This commit is contained in:
parent
e7013e8977
commit
c8b887fdba
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
235
js/ds.js
235
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 = `
|
||||
<span><strong>Latitude</strong>: ${lat}</span>
|
||||
<span><strong>Longitude</strong>: ${long}</span>
|
||||
`;
|
||||
|
||||
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 =
|
||||
`<strong>${k.replace(key,'')}</strong>:
|
||||
${resource[key][k]}`;
|
||||
|
||||
if (resource[key][k] !== null) {
|
||||
innerList.appendChild(li);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
innerList.innerHTML =
|
||||
`<li>${resource[key]['@value']}</li>`;
|
||||
}
|
||||
}
|
||||
|
||||
let value = innerList !== null ?
|
||||
innerList.outerHTML : resource[key];
|
||||
|
||||
row.innerHTML = `
|
||||
<td class="text-bold key">${key.replace(resType, '')}</td>
|
||||
<td>${value}</td>
|
||||
`;
|
||||
|
||||
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 = `
|
||||
<p class="text-bold">${key.replace(resType, '')}</p>
|
||||
<p>${resource[key]}</p>
|
||||
`;
|
||||
|
||||
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 = '<ul>';
|
||||
|
||||
for (const innerKey in resource[key]) {
|
||||
col.innerHTML += `
|
||||
<li>
|
||||
<span class="text-bold">${innerKey.replace(resType, '')}</span>
|
||||
<span>${resource[key][innerKey]}</span>
|
||||
</li>
|
||||
`;
|
||||
}
|
||||
col.innerHTML += '</ul>';
|
||||
}
|
||||
|
||||
displayValue = boolValue ?
|
||||
resource[key]['@value'].replace('False', 'No') :
|
||||
displayValue;
|
||||
}
|
||||
|
||||
col.innerHTML = `
|
||||
<p class="text-bold">${key.replace(resType, '')}</p>
|
||||
<p>${displayValue}</p>
|
||||
`;
|
||||
|
||||
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...
|
||||
*/
|
||||
|
||||
@ -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 = `
|
||||
<span><strong>Latitude</strong>: ${lat}</span>
|
||||
<span><strong>Longitude</strong>: ${long}</span>
|
||||
`;
|
||||
|
||||
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 =
|
||||
`<strong>${k.replace(key,'')}</strong>:
|
||||
${report.resource[key][k]}`;
|
||||
|
||||
if (report.resource[key][k] !== null) {
|
||||
innerList.appendChild(li);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
innerList.innerHTML =
|
||||
`<li>${report.resource[key]['@value']}</li>`;
|
||||
}
|
||||
}
|
||||
|
||||
let value = innerList !== null ?
|
||||
innerList.outerHTML : report.resource[key];
|
||||
|
||||
row.innerHTML = `
|
||||
<td class="text-bold key">${key.replace(resType, '')}</td>
|
||||
<td>${value}</td>
|
||||
`;
|
||||
|
||||
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 = `
|
||||
<p class="text-bold">${key.replace(resType, '')}</p>
|
||||
<p>${report.resource[key]}</p>
|
||||
`
|
||||
after.appendChild(col);
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
@ -38,13 +38,13 @@
|
||||
<h2 class="mt-1 p-2" id="rep-tit"></h2>
|
||||
<div class="columns">
|
||||
<div class="column col-lg-7 col-md-12 col-sm-12">
|
||||
<table class="table mt-2" id="res-before">
|
||||
<table class="table table-hover mt-2" id="res-before">
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="column col-lg-5 col-md-12 col-sm-12 p-2 mt-1">
|
||||
<div id="map"></div>
|
||||
<div id="map" class="mt-2"></div>
|
||||
<p class="mt-2 p-2">
|
||||
<strong>Coordinates</strong>
|
||||
</p>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user