Restructure code and layout
This commit is contained in:
parent
37f51955e6
commit
76a307ae8b
10
css/ds.css
10
css/ds.css
@ -52,15 +52,19 @@ td ul {
|
||||
.mt-2 {
|
||||
margin-top: 2rem !important;
|
||||
}
|
||||
.key {
|
||||
min-width: 200px;
|
||||
td.key {
|
||||
min-width: 400px;
|
||||
}
|
||||
table.table td,
|
||||
table.table th {
|
||||
border: none;
|
||||
}
|
||||
#map {
|
||||
height: 400px;
|
||||
height: 450px;
|
||||
}
|
||||
#gallery img {
|
||||
max-height: 200px;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
/* Print styles */
|
||||
|
||||
174
js/ds.js
174
js/ds.js
@ -4,12 +4,9 @@
|
||||
*/
|
||||
const DataSpace = {};
|
||||
|
||||
export const BASE_URL = 'http://dataspace.ispc.cnr.it';
|
||||
const RES_ENDPOINT = '/resources/';
|
||||
/**
|
||||
* @todo Report shapes??
|
||||
*/
|
||||
export const OBJECT_ORDER = {
|
||||
DataSpace.BASE_URL = 'http://dataspace.ispc.cnr.it';
|
||||
DataSpace.RES_ENDPOINT = '/resources/';
|
||||
DataSpace.OBJECT_ORDER = {
|
||||
"Object Type" : null,
|
||||
"Object ID" : null,
|
||||
"Object Excavation code" : null,
|
||||
@ -30,43 +27,58 @@ export const SAMPLE_ORDER = {
|
||||
|
||||
};
|
||||
*/
|
||||
|
||||
/**
|
||||
* @todo Query report links to determine resource type?
|
||||
* @param {int} max Max number of resources to list
|
||||
* (randomly selected)
|
||||
*
|
||||
* @returns {Array} An array with selected resource links
|
||||
*/
|
||||
export async function fetchResourceList(max = 20)
|
||||
{
|
||||
// TODO Errors!!
|
||||
const list = await fetch(`${BASE_URL}${RES_ENDPOINT}`)
|
||||
.then(res => res.json())
|
||||
.catch();
|
||||
|
||||
// Arbitrary slice...
|
||||
return list['ldp:contains'].slice(100, max + 100);
|
||||
}
|
||||
/**
|
||||
* Create links list
|
||||
* @param {string[]} links The fetched resource links
|
||||
* @param {string} id The ID of the UL element
|
||||
* @param {string} replace The string that should replace loalhost...
|
||||
*
|
||||
* @return {void}
|
||||
*/
|
||||
export function createLinks(links, id, replace)
|
||||
{
|
||||
for (const link of links) {
|
||||
const item = document.createElement('li');
|
||||
|
||||
item.innerHTML =
|
||||
`<a href="${link.replace('http://localhost:8000/resources/', replace)}">
|
||||
${link.substring(link.lastIndexOf('/') + 1)}
|
||||
</a>`;
|
||||
document.querySelector(`#${id}`).appendChild(item);
|
||||
const OBJECT_REPORT = new Map();
|
||||
OBJECT_REPORT.set(
|
||||
'before-gallery',
|
||||
{
|
||||
"Object Type" : null,
|
||||
"Object ID" : null,
|
||||
"Object Excavation code" : null,
|
||||
"Object Chronology" : null,
|
||||
"Object Era" : null,
|
||||
"Object Geographical Context of Discovery" : null,
|
||||
"Object Dimensions" : null,
|
||||
"Object Material" : null,
|
||||
}
|
||||
);
|
||||
OBJECT_REPORT.set(
|
||||
'after-gallery',
|
||||
{
|
||||
"Object Description" : null,
|
||||
"Object Conservation State" : null,
|
||||
"Object Reused?" : null,
|
||||
"Object Project" : null,
|
||||
"Object Compiler" : null,
|
||||
"Object Bibliography" : null,
|
||||
}
|
||||
);
|
||||
DataSpace.OBJECT_REPORT = OBJECT_REPORT;
|
||||
/**
|
||||
* Populate partial objects from
|
||||
* resource object based on Map
|
||||
* @todo
|
||||
* @param {object} resource
|
||||
*
|
||||
* @return {Map<string, object>}
|
||||
*/
|
||||
DataSpace.createObjectShape = function(resource) {
|
||||
const shape = this.OBJECT_REPORT;
|
||||
|
||||
let beforeGallery = shape.get('before-gallery'),
|
||||
afterGallery = shape.get('after-gallery');
|
||||
|
||||
for (const key in shape.get('before-gallery')) {
|
||||
beforeGallery[key] = resource[key];
|
||||
}
|
||||
|
||||
for (const key in shape.get('after-gallery')) {
|
||||
afterGallery[key] = resource[key];
|
||||
}
|
||||
|
||||
shape.set('before-gallery', beforeGallery);
|
||||
shape.set('after-gallery', afterGallery);
|
||||
|
||||
return shape;
|
||||
}
|
||||
/**
|
||||
* Fetch JSON report...
|
||||
@ -75,29 +87,45 @@ export function createLinks(links, id, replace)
|
||||
*
|
||||
* @return {object}
|
||||
*/
|
||||
export async function fetchReport(uuid, format='json')
|
||||
DataSpace.fetchReport = async function(uuid, format='json')
|
||||
{
|
||||
// TODO Errors!!
|
||||
const jsonRep =
|
||||
await fetch(`${BASE_URL}${RES_ENDPOINT}${uuid}?format=${format}&indent=2`)
|
||||
await fetch(`${this.BASE_URL}${this.RES_ENDPOINT}${uuid}?format=${format}&indent=2`)
|
||||
.then(res => res.json())
|
||||
.catch();
|
||||
|
||||
return jsonRep;
|
||||
}
|
||||
export function printReport() {
|
||||
document.querySelector('#print').addEventListener('click', () => {
|
||||
window.print();
|
||||
/**
|
||||
* Add window.print to link in navbar
|
||||
*
|
||||
* @return {void}
|
||||
*/
|
||||
DataSpace.printReport = function() {
|
||||
document.querySelector('#print')
|
||||
.addEventListener('click', () => {
|
||||
window.print();
|
||||
});
|
||||
}
|
||||
export function attachMap(coordinates, htmlId = 'map') {
|
||||
const map = L.map(htmlId).setView(coordinates, 18);
|
||||
/**
|
||||
* Attach Leaflet.js map to HTML element
|
||||
*
|
||||
* @param {string[]} coordinates
|
||||
* @param {string} htmlId
|
||||
*
|
||||
* @return {void}
|
||||
*/
|
||||
DataSpace.createMap = function(coordinates, htmlId = 'map') {
|
||||
const map = L.map(htmlId).setView(coordinates, 17);
|
||||
|
||||
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
}).addTo(map);
|
||||
|
||||
L.marker(coordinates).addTo(map);
|
||||
L.marker(coordinates).addTo(map)
|
||||
.bindPopup(`lat.: ${coordinates[0]}, long. : ${coordinates[1]}`)
|
||||
.openPopup();
|
||||
}
|
||||
/**
|
||||
* @todo Use TS to define object shape
|
||||
@ -105,11 +133,10 @@ export function attachMap(coordinates, htmlId = 'map') {
|
||||
*
|
||||
* @return {string[]}
|
||||
*/
|
||||
export function getImageSrc(resource) {
|
||||
DataSpace.getImagesSrc = function(resource) {
|
||||
// TODO hardcoded...
|
||||
const filesUri = `${BASE_URL}/files/uploadedfiles/`;
|
||||
const filesUri = `${this.BASE_URL}/files/uploadedfiles/`;
|
||||
|
||||
//let key = Object.keys(resource.tiles[11].data)[0];
|
||||
// TODO don't filter this array, populate another one
|
||||
let arr = resource.tiles
|
||||
.filter(tile => {
|
||||
@ -133,6 +160,8 @@ export function getImageSrc(resource) {
|
||||
|
||||
return fileNames;
|
||||
}
|
||||
|
||||
export default DataSpace;
|
||||
/**
|
||||
* Fetch file blob (CORS...)
|
||||
* @todo
|
||||
@ -146,3 +175,42 @@ export function getImageSrc(resource) {
|
||||
* Query report links to determine
|
||||
* resource instance type...
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* Create links list
|
||||
* @param {string[]} links The fetched resource links
|
||||
* @param {string} id The ID of the UL element
|
||||
* @param {string} replace The string that should replace loalhost...
|
||||
*
|
||||
* @return {void}
|
||||
export function createLinks(links, id, replace)
|
||||
{
|
||||
for (const link of links) {
|
||||
const item = document.createElement('li');
|
||||
|
||||
item.innerHTML =
|
||||
`<a href="${link.replace('http://localhost:8000/resources/', replace)}">
|
||||
${link.substring(link.lastIndexOf('/') + 1)}
|
||||
</a>`;
|
||||
document.querySelector(`#${id}`).appendChild(item);
|
||||
}
|
||||
}
|
||||
*/
|
||||
/**
|
||||
* @todo Query report links to determine resource type?
|
||||
* @param {int} max Max number of resources to list
|
||||
* (randomly selected)
|
||||
*
|
||||
* @returns {Array} An array with selected resource links
|
||||
export async function fetchResourceList(max = 20)
|
||||
{
|
||||
// TODO Errors!!
|
||||
const list = await fetch(`${BASE_URL}${RES_ENDPOINT}`)
|
||||
.then(res => res.json())
|
||||
.catch();
|
||||
|
||||
// Arbitrary slice...
|
||||
return list['ldp:contains'].slice(100, max + 100);
|
||||
}
|
||||
*/
|
||||
@ -1,22 +1,25 @@
|
||||
'use strict';
|
||||
|
||||
import {
|
||||
BASE_URL,
|
||||
fetchReport,
|
||||
printReport,
|
||||
getImageSrc,
|
||||
OBJECT_ORDER,
|
||||
attachMap
|
||||
} from "../ds.js";
|
||||
import DataSpace from "../ds.js";
|
||||
|
||||
document.addEventListener('readystatechange', async () => {
|
||||
const report = await fetchReport(location.search.replace("?id=", ''));
|
||||
const archesJson = await fetchReport(location.search.replace("?id=", ''), 'arches-json');
|
||||
const files = getImageSrc(archesJson);
|
||||
DataSpace.printReport();
|
||||
// Show modal
|
||||
document.querySelector('.modal').classList.add('active');
|
||||
|
||||
printReport();
|
||||
const report = await DataSpace.fetchReport(location.search.replace("?id=", ''));
|
||||
const archesJson = await DataSpace.fetchReport(
|
||||
location.search.replace("?id=", ''),
|
||||
'arches-json'
|
||||
);
|
||||
const files = DataSpace.getImagesSrc(archesJson);
|
||||
|
||||
const resource = Object.assign(OBJECT_ORDER, report.resource);
|
||||
// Close modal
|
||||
document.querySelector('.modal').classList.remove('active');
|
||||
|
||||
const resource = Object.assign(DataSpace.OBJECT_ORDER, report.resource);
|
||||
|
||||
const shape = DataSpace.createObjectShape(resource);
|
||||
|
||||
let resKeys = Object.keys(resource);
|
||||
// Default value...
|
||||
@ -29,23 +32,25 @@ document.addEventListener('readystatechange', async () => {
|
||||
|
||||
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(', ');
|
||||
?.replace(/^.*coordinates\':\s?\[(\d+\.\d+,\s?\d+\.\d+)\].*$/, "$1")
|
||||
?.split(', ');
|
||||
|
||||
let lat, long;
|
||||
[long, lat] = coordinates;
|
||||
|
||||
attachMap([lat, long]);
|
||||
DataSpace.createMap([lat, long]);
|
||||
|
||||
resKeys = resKeys.filter(e => !e.includes('Coordinates'));
|
||||
|
||||
document.querySelector('#rep-tit')
|
||||
.innerText = `${resType} ${report.displayname}`;
|
||||
|
||||
const repTable = document.querySelector('#resource tbody');
|
||||
const repTable = document.querySelector('#res-before tbody');
|
||||
|
||||
// TODO manage files and nested objects
|
||||
for (const key of resKeys) {
|
||||
for (const key in shape.get('before-gallery')) {
|
||||
const row = document.createElement('tr');
|
||||
let innerList = null;
|
||||
|
||||
@ -93,11 +98,11 @@ document.addEventListener('readystatechange', async () => {
|
||||
|
||||
for (const src of files) {
|
||||
const img = document.createElement('img');
|
||||
img.className = 'img-responsive img-fit-contain';
|
||||
img.className = 'img-responsive img-fit-cover';
|
||||
img.src = src;
|
||||
|
||||
const col = document.createElement('div');
|
||||
col.className = 'column col-4 c-hand spotlight';
|
||||
col.className = 'column col-3 c-hand spotlight';
|
||||
col.setAttribute('data-src', src);
|
||||
col.setAttribute('data-download', true);
|
||||
|
||||
@ -105,4 +110,17 @@ document.addEventListener('readystatechange', async () => {
|
||||
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);
|
||||
}
|
||||
})
|
||||
|
||||
@ -33,25 +33,28 @@
|
||||
</section>
|
||||
</header>
|
||||
<main>
|
||||
<div class="columns report-container">
|
||||
<div class="column col-6">
|
||||
<h2 class="mt-2 p-2" id="rep-tit">
|
||||
</h2>
|
||||
<table class="table table-hover mt-2" id="resource">
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="report-container">
|
||||
<h2 class="mt-1 p-2" id="rep-tit"></h2>
|
||||
<div class="columns">
|
||||
<div class="column col-7">
|
||||
<table class="table table-hover mt-2" id="res-before">
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="column col-5 p-2 mt-2">
|
||||
<div id="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-6 p-2 mt-2">
|
||||
<div id="map"></div>
|
||||
</div>
|
||||
<div class="container d-hide mt-2 pt-2 grid-md">
|
||||
<div class="container d-hide mt-2 pt-2">
|
||||
<p class="text-small">
|
||||
Click on any image to open gallery
|
||||
</p>
|
||||
<div class="columns mt-2" id="gallery">
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns mt-2" id="res-after">
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="text-light">
|
||||
@ -101,6 +104,13 @@
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<div class="modal modal-lg">
|
||||
<span class="modal-overlay"></span>
|
||||
<div class="modal-container">
|
||||
<p class="text-large text-center text-bold">Loading data...</p>
|
||||
<div class="loading loading-lg"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<!-- Templates? -->
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user