Fix bug with nested objects in report
This commit is contained in:
parent
c8b887fdba
commit
d39e6b740c
224
js/ds.js
224
js/ds.js
@ -152,119 +152,14 @@ DataSpace.renderObjectReport = function (report, images)
|
||||
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);
|
||||
}
|
||||
}
|
||||
_createObjectTable(resType, shape, resource);
|
||||
|
||||
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);
|
||||
}
|
||||
_createImgGallery(images, 'gallery');
|
||||
}
|
||||
|
||||
// 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);
|
||||
}
|
||||
_createObjectTail(resType, shape, resource);
|
||||
}
|
||||
/**
|
||||
* Fetch JSON report...
|
||||
@ -393,4 +288,117 @@ function _fetchError(message, htmlId)
|
||||
document.querySelector(`#${htmlId}`).appendChild(error);
|
||||
}
|
||||
|
||||
function _createImgGallery(images, htmlId)
|
||||
{
|
||||
let gallery = document.querySelector(`#${htmlId}`);
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
function _createObjectTable(resType, shape, resource)
|
||||
{
|
||||
const tableElement = document.querySelector('#res-before tbody');
|
||||
for (const key in shape.get('before-gallery')) {
|
||||
const row = document.createElement('tr');
|
||||
let innerList = null;
|
||||
|
||||
// TODO refactor
|
||||
if (typeof resource[key] == 'object') {
|
||||
innerList = document.createElement('ul');
|
||||
|
||||
for (const innerKey in resource[key]) {
|
||||
const li = document.createElement('li');
|
||||
|
||||
li.innerHTML = innerKey === '@value' ?
|
||||
resource[key]['@value'] :
|
||||
`<strong>${innerKey.replace(key,'')}</strong>:
|
||||
${resource[key][innerKey]}`;
|
||||
|
||||
if (resource[key][innerKey] !== null) {
|
||||
innerList.appendChild(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')) {
|
||||
tableElement.appendChild(row);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function _createObjectTail(resType, shape, resource)
|
||||
{
|
||||
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];
|
||||
const isNested = typeof resource[key] === 'object';
|
||||
|
||||
if (isNested) {
|
||||
for (const innerKey in resource[key]) {
|
||||
if (resource[key][innerKey] !== "") {
|
||||
const innerCol = document.createElement('div');
|
||||
innerCol.className = 'column col-6';
|
||||
innerCol.innerHTML = innerKey === '@value' ?
|
||||
`
|
||||
<p class="text-bold">${key.replace(resType, '')}</p>
|
||||
<p>${displayValue['@value'].replace('False', 'No')
|
||||
.replace('True', 'Yes')}</p>
|
||||
` :
|
||||
`
|
||||
<p class="text-bold">${innerKey.replace(resType, '')}</p>
|
||||
<p>${displayValue[innerKey]}</p>
|
||||
` ;
|
||||
|
||||
after.appendChild(innerCol);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
col.innerHTML = `
|
||||
<p class="text-bold">${key.replace(resType, '')}</p>
|
||||
<p>${displayValue}</p>
|
||||
`;
|
||||
|
||||
after.appendChild(col);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default DataSpace;
|
||||
|
||||
@ -18,6 +18,6 @@ document.addEventListener('readystatechange', async () => {
|
||||
// Close modal
|
||||
document.querySelector('.modal').classList.remove('active');
|
||||
|
||||
// Create report HTML
|
||||
DataSpace.renderObjectReport(report, images);
|
||||
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user