diff --git a/js/ds.js b/js/ds.js index 8a5eabf..384c617 100644 --- a/js/ds.js +++ b/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 = - `${k.replace(key,'')}: - ${resource[key][k]}`; - - if (resource[key][k] !== null) { - innerList.appendChild(li); - } - } - } else { - innerList.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 = '${key.replace(resType, '')}
-${displayValue}
- `; - - 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'] : + `${innerKey.replace(key,'')}: + ${resource[key][innerKey]}`; + + if (resource[key][innerKey] !== null) { + innerList.appendChild(li); + } + } + } + + let value = innerList !== null ? + innerList.outerHTML : resource[key]; + + row.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]; + 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' ? + ` +${key.replace(resType, '')}
+${displayValue['@value'].replace('False', 'No') + .replace('True', 'Yes')}
+ ` : + ` +${innerKey.replace(resType, '')}
+${displayValue[innerKey]}
+ ` ; + + after.appendChild(innerCol); + } + } + } else { + col.innerHTML = ` +${key.replace(resType, '')}
+${displayValue}
+ `; + + after.appendChild(col); + } + } +} + export default DataSpace; diff --git a/js/views/report.js b/js/views/report.js index 02518f1..ab94fb5 100644 --- a/js/views/report.js +++ b/js/views/report.js @@ -18,6 +18,6 @@ document.addEventListener('readystatechange', async () => { // Close modal document.querySelector('.modal').classList.remove('active'); + // Create report HTML DataSpace.renderObjectReport(report, images); - });