ds-front-test/js/ds.js

'use strict';
const MAPBOX_API_KEY = 'pk.eyJ1IjoiZ2VyYW5nMSIsImEiOiJjbDg5MHZxcG8wMmo3M3BudnphMWhnN2ZrIn0.SsFGVF-EMHwRYTp7njmb_Q';
/**
* @namespace DataSpace
*/
const DataSpace = {};

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,
    "Object Chronology" : null,
    "Object Era" : null,
    "Object Geographical Context of Discovery" : null,
    "Object Dimensions" : null,
    "Object Material" : null,
    "Object Description" : null,
    "Object Conservation State" : null,
    "Object Reused?" : null,
    "Object Project" : null,
    "Object Compiler" : null,
    "Object Bibliography" : null,
};
/*
export const SAMPLE_ORDER = {

};
*/
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')) {
        if (resource[key]) {
            beforeGallery[key] = resource[key];
        } else {
            delete beforeGallery[key];
        }
    }

    for (const key in shape.get('after-gallery')) {
        if (resource[key]) {
            afterGallery[key] = resource[key];
        } else {
            delete afterGallery[key];
        }
    }

    shape.set('before-gallery', beforeGallery);
    shape.set('after-gallery', afterGallery);

    return shape;
}
/**
 * Fetch JSON report...
 * @param {string} uuid The resource's UUID in Arches
 * @param {string} format Either 'json' or 'arches-json'
 * 
 * @return {object}
 */
DataSpace.fetchReport = async function (uuid, format='json')
{
    const jsonRep =
        await fetch(
            `${this.BASE_URL}${this.RES_ENDPOINT}${uuid}?format=${format}&indent=2`
        )
        .then(res => res.json())
        .catch(excep => {
            _fetchError(excep, 'error');
            document.querySelector('.modal')
                .classList.remove('active');
        });

    return jsonRep;
}
/**
 * Add window.print to link in navbar
 * 
 * @return {void}
 */
DataSpace.printReport = function () {
    document.querySelector('#print')
        .addEventListener('click', () => {
            window.print();
    });
}
/**
 * Attach Leaflet.js map to HTML element
 * 
 * @param {string[]} coordinates 
 * @param {string} htmlId 
 * 
 * @return {void}
 */
DataSpace.createMap = function (coordinates, htmlId = 'map') {
    const mapboxAttribution = `© <a href="https://www.mapbox.com/about/maps/">Mapbox</a>`;
    const mapboxSat = `https://api.mapbox.com/v4/mapbox.satellite/18/152278/101181.webp?access_token=${MAPBOX_API_KEY}`;
    const streets = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    });
    const satellite = L.tileLayer(
        mapboxSat,
        {
            id: 'mapbox/satellite-v9',
            tileSize: 512,
            zoomOffset: -1,
            attribution: mapboxAttribution
        }
    );
    const baseMaps = {
        "OpenStreetMap": streets,
        "Mapbox Satellite": satellite
    };
    const map = L.map(htmlId, {
        center: coordinates,
        zoom: 18,
        layers: [streets, satellite]
    });

    L.control.layers(baseMaps).addTo(map);

    L.marker(coordinates).addTo(map)
        .bindPopup(`lat.: ${coordinates[0]}, long. : ${coordinates[1]}`)
        .openPopup();
}
/**
 * @todo Use TS to define object shape
 * @param {object} resource The resource object (Arches JSON!)
 *
 * @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]
            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 fileNames = [],
        dataObjects = [];

    arr.forEach(d => dataObjects.push(d.data));

    dataObjects.forEach(e => {
        e[Object.keys(e)[0]].forEach(o => {
            fileNames.push(filesUri + o.name)
        });
    });

    return fileNames;
}

function _fetchError(message, htmlId)
{
    const error = document.createElement('div');
    const clear = document.createElement('button');
    error.className = 'toast toast-error';
    clear.className = 'btn btn-clear float-right';

    error.appendChild(clear);
    error.textContent = message;

    document.querySelector(`#${htmlId}`).appendChild(error);
}

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...
 */