caprigis/webgis/js/components/SiteSheet.js

import Utils from "./utils.js";
/**
 * Component to render data for site sheet
 * @class SiteSheet
 */
export class SiteSheet {
    biblioElements = [];
    /*
    constructor(data) {
        this._siteData = data;
    }
    */
    /**
     * @param {object} data
     */
    set siteData(data) {
        this._siteData = data;
    }
    /**
     * @returns {string} HTML
     */
    render() {
        const description = Utils.parseMarkers(this._siteData.description);
        const localization = Utils.parseMarkers(this._siteData.localization);

        return `<div class="container has-bottom-border">
            <table class="table is-fullwidth is-striped">
                <tr class="is-link"><th class="is-size-5 has-text-centered" colspan=2>Identificazione</th></tr>
                <tr><th>Denominazione</th><td>${this._siteData.denomination}</td></tr>
                <tr><th>Definizione</th><td>${this._siteData.definition}</td></tr>
                <tr class="is-link"><th class="is-size-5 has-text-centered" colspan=2>Localizzazione geografico-amministrativa</th></tr>
                <tr><th>Comune</th><td>${this._siteData.municipality}</td></tr>
                <tr><th>Indirizzo</th><td>${this._siteData.address}</td></tr>
                <tr><th>Località</th><td>${this._siteData.place}</td></tr>
                <tr><th>Localizzazione</th><td>${localization}</td></tr>
                <tr class="is-link"><th class="is-size-5 has-text-centered" colspan=2>Cronologia</th></tr>
                <tr><th>Periodo</th><td>${this._siteData.period}</td></tr>
                <tr><th>Fase</th><td>${this._siteData.phase}</td></tr>
                <tr><th>Cronologia</th><td>${this._siteData.chronology}</td></tr>
                <tr><th>Motivazione cronologia</th><td>${this._siteData.motivation}</td></tr>
                <tr class="is-link"><th class="is-size-5 has-text-centered" colspan=2>Conservazione e condizione giuridica</th></tr>
                <tr><th>Stato di conservazione</th><td>${this._siteData.conservationState}</td></tr>
                <tr><th>Tecniche edilizie impiegate:</th><td>${this._siteData.techniques}</td></tr>
                <tr class="is-link"><th class="is-size-5 has-text-centered" colspan=2>Ritrovamento e materiali</th></tr>
                <tr><th>Anno di ritrovamento</th><td>${this._siteData.finding}</td></tr>
                <tr><th>Materiali rinvenuti</th><td>${this._siteData.materials}</td></tr>
                <tr><th>Luogo custodia materiali</th><td>${this._siteData.conservationPlace}</td></tr>
                <tr class="is-link"><th class="is-size-5 has-text-centered" colspan=2>Rilievi</th></tr>
                <tr><td colspan=2>${this._siteData.surveys ?? 'Nessun rilievo'}</td></tr>
                <tr class="is-link"><th class="is-size-5 has-text-centered" colspan=2>Descrizione</th></tr>
                <tr><td class="pr-6 pl-6 pt-3" colspan="2">${description}</td></tr>
                <tr class="is-link"><th class="is-size-5 has-text-centered" colspan=2>Bibliografia</th></tr>
                <tr>
                    <td colspan=2>
                        ${this.biblio()}
                        <div class="notification is-light mx-3 mt-4 mb-0 p-2 is-hidden" id="biblio-detail" data-biblio-target="biblio"></div>
                    </td>
                </tr>
            </table>
            <p class="pl-4 mb-4">
                <strong>Autore scheda:</strong> ${this._siteData.author}
            </p>
        </div>`;
    }

    renderShort() {
        const shortDesc = Utils.parseMarkers(this._siteData.shortDescription);

        return `
        <div class="container p-3">
            <p class="p-2">
                <span class="icon has-text-link">
                    <i class="fa fa-tag"></i>
                </span>
                <strong>Denominazione:</strong> ${this._siteData.denomination}
            </p>
            <p class="p-2">
                <span class="icon has-text-link">
                    <i class="fa fa-hourglass"></i>
                </span>
                <strong>Periodo:</strong> ${this._siteData.period}
            </p>
            <p class="p-2">
                <span class="icon has-text-link">
                    <i class="fa fa-map"></i>
                </span>
                <strong>Località generica:</strong> ${this._siteData.genericPlace}
            </p>
            <p class="mt-4 pl-2 pr-5">
                ${shortDesc}
            </p>
            <p class="mt-4 pl-2 pr-5">
                <span class="icon has-text-link">
                    <i class="fa fa-book"></i>
                </span>
                <strong>Bibliografia:</strong> ${this.biblio()}
            </p>
            <div class="notification is-light mx-3 mt-4 mb-0 p-2 is-hidden" data-biblio-target="biblio"></div>
            <p class="p-2">
                <strong>Autore scheda:</strong> ${this._siteData.author}
            </p>
        </div>`;
    }

    biblio() {
        let citations = '';

        if (this._siteData.bibliography.length) {
            this._siteData.bibliography.forEach(record => {
                citations += `
                    <span class="is-clickable has-text-link"
                        data-action="click->biblio#open"
                        id="cit-${record.id}">
                        ${record.citation.trim()}</span>`;

                citations += record.pages?.length ? `, ${record.pages};` : ';';

                this.biblioElements.push(`
                    <div class="p-2 mt-2" id="ref-${record.id}">
                        <p class="p-3">${record.reference}</p>
                    </div>
                    `
                );
            });
        }

        return citations.trim().slice(0, -1);
    }

    getReference(id) {
        return this.biblioElements.find(ref => {
            let regex = new RegExp('ref-'+id+'"');
            return ref.match(regex);
        });
    }
}