119 lines
3.7 KiB
JavaScript
119 lines
3.7 KiB
JavaScript
/**
|
|
* @class Finding
|
|
*/
|
|
export class Finding {
|
|
biblioElements = [];
|
|
images = null;
|
|
|
|
set data(data) {
|
|
this._data = data;
|
|
}
|
|
|
|
async render() {
|
|
return `
|
|
<div class="container px-4 pt-4">
|
|
<p class="p-2">
|
|
<strong>Oggetto:</strong> ${this._data.object}
|
|
</p>
|
|
<p class="p-2">
|
|
<strong>Materia:</strong> ${this._data.material}
|
|
</p>
|
|
<p class="p-2">
|
|
<strong>Misure:</strong> ${this._data.measurements}
|
|
</p>
|
|
<p class="p-2">
|
|
<strong>Luogo e anno rinvenimento:</strong> ${this._data.place}. ${this._data.year}
|
|
</p>
|
|
<p class="p-2">
|
|
<strong>Datazione:</strong> ${this._data.dating}
|
|
</p>
|
|
<p class="p-2">
|
|
<strong>Stato di conservazione:</strong> ${this._data.conservationState}
|
|
</p>
|
|
<p class="p-2">
|
|
<strong>Luogo di conservazione:</strong> ${this._data.conservationPlace}
|
|
</p>
|
|
<p class="mt-4 pl-2 pr-5">
|
|
<strong class="pb-3">Descrizione</strong></br>
|
|
${this._data.description}
|
|
</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> ${await this.biblio(this._data.id)}
|
|
</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 mb-4">
|
|
<strong>Autore scheda:</strong> ${this._data.author}
|
|
</p>
|
|
</div>`;
|
|
}
|
|
|
|
renderImages() {
|
|
let content = `<div class="content has-text-centered">
|
|
<p class="is-size-5 mt-3">Immagini</p>`;
|
|
content += `
|
|
<div style="max-width: 70%; margin: 0 auto">
|
|
<p class="is-size-6 has-text-centered">Cliccare sull'immagine per aprire la gallery</p>
|
|
<figure class="is-relative is-clickable has-text-centered" id="finding-gallery">
|
|
<img src="img/${this.images[0].filename}" width="300"/>
|
|
<div class="icon overlay is-flex is-justify-content-center is-align-items-center">
|
|
<i class="is-flex fa fa-2x fa-play-circle"></i>
|
|
</div>
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
return content;
|
|
}
|
|
|
|
async setImages() {
|
|
let record = await this.fetchData(`${window.API_URL}/finding/${this._data.id}`)
|
|
|
|
if (record.images.length) {
|
|
this.images = record.images;
|
|
}
|
|
}
|
|
/**
|
|
* @param {number} recordId
|
|
*/
|
|
async biblio(recordId) {
|
|
let record = await this.fetchData(`${window.API_URL}/finding/${recordId}`);
|
|
|
|
let citations = '';
|
|
|
|
if (record.bibliography.length) {
|
|
record.bibliography.forEach(biblio => {
|
|
citations += `
|
|
<span class="is-clickable is-capitalized has-text-link"
|
|
data-action="click->biblio#open"
|
|
id="cit-${biblio.id}">
|
|
${biblio.citation.toLowerCase()},
|
|
</span> ${biblio.pages};
|
|
`;
|
|
|
|
this.biblioElements.push(`
|
|
<div class="p-2 mt-2" id="ref-${biblio.id}">
|
|
<p class="p-3">${biblio.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);
|
|
});
|
|
}
|
|
|
|
async fetchData(url) {
|
|
return await fetch(url).then(res => res.json());
|
|
}
|
|
}
|