Biblio for sites

webgis/js/components/SiteSheet.js

@@ -3,13 +3,21 @@
  * @class SiteSheet
  */
 export class SiteSheet {
+    biblioElements = [];
+    /*
+    constructor(data) {
+        this._siteData = data;
+    }
+    */
     /**
      * @param {object} data
      */
     set siteData(data) {
         this._siteData = data;
     }
-
+    /**
+     * @returns {string} HTML
+     */
     render() {
         return `<div class="container has-bottom-border">
             <table class="table is-fullwidth is-striped">
@@ -33,6 +41,13 @@ export class SiteSheet {
                 <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>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>
                 <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">${this._siteData.description}</td></tr>
             </table>
@@ -60,6 +75,13 @@ export class SiteSheet {
                 </span>
                 <strong>Località generica:</strong> ${this._siteData.genericPlace}
             </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="mt-4 pl-2 pr-5">
                 ${this._siteData.shortDescription}
             </p>
@@ -68,4 +90,36 @@ export class SiteSheet {
             </p>
         </div>`;
     }
+
+    biblio() {
+        let citations = '';
+
+        if (this._siteData.bibliography.length) {
+            this._siteData.bibliography.forEach(record => {
+                citations += `
+                    <span class="is-clickable is-capitalized has-text-link"
+                        data-action="click->biblio#open"
+                        id="cit-${record.id}">
+                        ${record.citation.toLowerCase()},
+                    </span> ${record.pages};
+                `;
+
+                this.biblioElements.push(`
+                    <div class="p-2 mt-2" id="ref-${record.id}">
+                        <p>${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);
+        });
+    }
 }