Interactive citations

webgis/js/components/NotConservedSheet.js

@@ -3,6 +3,7 @@
  * @class NotConservedSheet
  */
 export class NotConservedSheet {
+    biblioElements = [];
     /**
      * @param {object} data
      */
@@ -12,7 +13,7 @@ export class NotConservedSheet {
 
     async render() {
         return `
-        <div class="container ml-3">
+        <div class="container">
             <p class="p-2">
                 <span class="icon has-text-link">
                     <i class="fa fa-tag"></i>
@@ -41,6 +42,8 @@ export class NotConservedSheet {
                 </span>
                 <strong>Bibliografia:</strong> ${await this.biblio(this._data.id)}
             </p>
+            <div class="notification is-light mx-2 mt-2 p-2 is-hidden" id="biblio">
+            </div>
             <p class="p-2">
                 <strong>Autore scheda:</strong> ${this._data.author}
             </p>
@@ -50,18 +53,32 @@ export class NotConservedSheet {
     async biblio(recordId) {
         let record = await this.fetchData(`${window.API_URL}/not_conserved/${recordId}`);
 
-        let biblio = '';
+        let citations = '';
 
         if (record.bibliography.length) {
             record.bibliography.forEach(record => {
-                biblio += `
-                    <span class="is-capitalized">${record.citation.toLowerCase()}</span>,
-                    ${record.pages};
+                citations += `
+                    <span class="is-clickable is-capitalized has-text-link"
+                        id="cit-${record.id}">
+                        ${record.citation.toLowerCase()},
+                    </span> ${record.pages};
                 `;
+
+                this.biblioElements.push(`
+                    <div class="p-2" id="ref-${record.id}">
+                        <p><strong>Riferimento</strong></p>
+                        <p>${record.reference}</p>
+                    </div>
+                    `
+                );
             });
         }
 
-        return biblio.trim().slice(0, -1);
+        return citations.trim().slice(0, -1);
+    }
+
+    getReference(id) {
+        return this.biblioElements.find(ref => ref.includes(`ref-${id}`));
     }
 
     async fetchData(url) {