diff --git a/css/ds.css b/css/ds.css index 7709632..053c76b 100644 --- a/css/ds.css +++ b/css/ds.css @@ -19,8 +19,19 @@ main { } footer { min-height: 40px; - background-color: rgba(5, 5, 5, 0.6); - padding: 3rem; + background-color: #213B55; + padding: 1rem 5rem; +} +footer a { + color: #fff; + cursor: pointer; + text-decoration: underline; +} +footer a:hover { + color: #fff; +} +footer .column > a { + display: block; } ul { list-style: none; @@ -28,7 +39,6 @@ ul { ul li { padding: 5px; } - td ul { margin-left: 0; padding-left: 0; @@ -37,7 +47,7 @@ td ul { width: 75%; margin: 0 auto; background-color: #fff; - padding: 1rem 1rem; + padding: 1rem 1rem 3rem 1rem; } .mt-2 { margin-top: 2rem !important; @@ -45,4 +55,19 @@ td ul { .key { min-width: 200px; } +table.table td, +table.table th { + border: none; +} +/* Print styles */ +@media print { + .report-container { + width: 100%; + } + .navbar, + footer, + #map { + display: none; + } +} \ No newline at end of file diff --git a/js/README.md b/js/README.md new file mode 100644 index 0000000..634f913 --- /dev/null +++ b/js/README.md @@ -0,0 +1,3 @@ +# DataSpace - JavaScript reference for custom frontend + +Minimal documentation for a custom frontend implementation of ISPC DataSpace reports using Arches REST API to retrieve data. \ No newline at end of file diff --git a/js/ds.js b/js/ds.js index 6d64e63..2d33795 100644 --- a/js/ds.js +++ b/js/ds.js @@ -2,6 +2,20 @@ export const BASE_URL = 'http://dataspace.ispc.cnr.it'; const RES_ENDPOINT = '/resources/'; +/** + * @todo Report shapes?? + */ +/* +export const OBJECT_ORDER = { + "Object Type" : null, + "Object ID" : null, + "Object Chronology" : null, + "Object Era" : null, +}; +export const SAMPLE_ORDER = { + +}; +*/ /** * @todo Query report links to determine resource type? @@ -63,6 +77,7 @@ export function printReport() { }); } /** + * @todo Use TS to define object shape * @param {object} resource The resource object (Arches JSON!) * * @return {string[]} diff --git a/js/jsdoc.json b/js/jsdoc.json new file mode 100644 index 0000000..0e7d0e3 --- /dev/null +++ b/js/jsdoc.json @@ -0,0 +1,19 @@ +{ + "source": { + "include": ["ds.js", "views/report.js", "README.md"] + }, + + "opts": { + "encoding": "utf8", + "readme" : "README.md", + "destination": "docs/", + "recurse": true, + "verbose": true, + "template": "/home/nicolo/node_modules/lib/node_modules/clean-jsdoc-theme", + "theme_opts": { + "theme": "light", + "title": "DataSpace Custom Report", + "create_style": ".description{padding:10px 0}.param-desc{padding:10px}" + } + } +} diff --git a/js/views/report.js b/js/views/report.js index eccb1d5..960fc09 100644 --- a/js/views/report.js +++ b/js/views/report.js @@ -27,7 +27,9 @@ document.addEventListener('readystatechange', async () => { } resType = resKeys[0].split(' ')[0]; + // TODO use coordinates for map const coordinates = resource['Coordinates']; + resKeys = resKeys.filter(e => !e.includes('Coordinates')); document.querySelector('#rep-tit') @@ -61,27 +63,37 @@ document.addEventListener('readystatechange', async () => { } } - // TODO Pop coordinates before traversing the object let value = innerList !== null ? innerList.outerHTML : report.resource[key]; - if (key.includes('Images')) { - let images = ''; - - for (const src of files) { - images += ` - - `; - } - - value = images; - } - row.innerHTML = ` ${key.replace(resType, '')} ${value} `; - repTable.appendChild(row); + if (!key.includes('Images') && !key.includes('Photos')) { + repTable.appendChild(row); + } + } + + if (files.length) { + // Create image gallery + // TODO refactor... + let gallery = document.querySelector('#gallery'); + gallery.classList.remove('d-hide'); + + for (const src of files) { + const img = document.createElement('img'); + img.className = 'img-responsive img-fit-contain'; + img.src = src; + + const col = document.createElement('div'); + col.className = 'column col-4 c-hand spotlight'; + col.setAttribute('data-src', src); + col.setAttribute('data-download', true); + + col.appendChild(img); + gallery.appendChild(col); + } } }) diff --git a/package.json b/package.json index dfac820..f49dfae 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,8 @@ "license": "MIT", "dependencies": { "fontawesome-free": "^1.0.4", - "spectre.css": "^0.5.9" + "plotly.js": "^2.18.2", + "spectre.css": "^0.5.9", + "spotlight.js": "^0.7.8" } } diff --git a/report/index.html b/report/index.html index 18997cb..92dbb4e 100644 --- a/report/index.html +++ b/report/index.html @@ -1,10 +1,11 @@ - Dataspace | Report + DataSpace | Report + @@ -23,7 +24,7 @@ - + @@ -40,12 +41,60 @@
- + +
+
+
-