nicolo/caprigis
1
1
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

More refactoring components (minus Site)

Browse Source
This commit is contained in:
Nicolò P 2025-09-02 09:59:02 +02:00
parent 77d42a2c27
commit 53c3f6c6b2
5 changed files with 19 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
webgis/js/components/Finding.js
View File

@ -65,7 +65,7 @@ export class Finding {
* @param {number} recordId
*/
async biblio(recordId) {
let {citations, biblioElements} = await Utils.buildBibliography('not_conserved', recordId);
let {citations, biblioElements} = await Utils.buildBibliography('finding', recordId);
this.biblioElements = biblioElements;
return citations;

2
webgis/js/components/NotConserved.js
View File

@ -56,7 +56,7 @@ export class NotConserved {
* @param {Function} gallery
*/
setImages(imageContainer, gallery) {
if (this._data.images.length) {
if (this._data.images?.length) {
imageContainer.innerHTML = Utils.renderImages('not-conserved-gallery', this._data.images);
gallery('not-conserved-gallery', this._data.images);
} else

56
webgis/js/components/Prehistoric.js
View File

@ -1,4 +1,4 @@
import { GisState } from "../state.js";
import Utils from "./utils.js";
/**
* @class Prehistoric
*/
@ -47,7 +47,6 @@ export class Prehistoric {
</div>`;
/*
<p class="mt-4 pl-2 pr-5">
<span class="icon has-text-link">
<i class="fa fa-book"></i>
@ -58,32 +57,14 @@ export class Prehistoric {
*/
}
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="prehist-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;
}
/**
* @param {HTMLElement} imageContainer
* @param {Function} gallery
*/
async setImages(imageContainer, gallery) {
if (this._data.images.length) {
this.images = this._data.images;
imageContainer.innerHTML = this.renderImages();
gallery('prehist-gallery', this.images);
if (this._data.images?.length) {
imageContainer.innerHTML = Utils.renderImages('prehist-gallery', this._data.images);
gallery('prehist-gallery', this._data.images);
} else
imageContainer.innerHTML = '<p class="has-text-centered">Nessuna risorsa visuale disponibile</p>';
}
@ -91,29 +72,10 @@ export class Prehistoric {
* @param {number} recordId
*/
async biblio(recordId) {
let finding = await this.fetchData(`${GisState.apiUrl}/prehistoric/${recordId}`);
let {citations, biblioElements} = await Utils.buildBibliography('prehistoric', recordId);
this.biblioElements = biblioElements;
let citations = '';
if (finding.bibliography.length) {
finding.bibliography.forEach(record => {
citations += `
<span class="is-clickable has-text-link"
data-action="click->biblio#open"
id="cit-${record.id}">
${record.citation}</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);
return citations;
}
getReference(id) {
@ -122,8 +84,4 @@ export class Prehistoric {
return ref.match(regex);
});
}
async fetchData(url) {
return await fetch(url).then(res => res.json());
}
}

61
webgis/js/components/Reuse.js
View File

@ -1,4 +1,4 @@
import { GisState } from "../state.js";
import Utils from "./utils.js";
/**
* @class Reuse
*/
@ -50,64 +50,25 @@ export class Reuse {
</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="reuse-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;
}
/**
* @param {HTMLElement} imageContainer
* @param {Function} gallery
*/
async setImages(imageContainer, gallery) {
let record = await this.fetchData(`${GisState.apiUrl}/reuse/${this._data.id}`)
if (record.images.length) {
this.images = record.images;
imageContainer.innerHTML = this.renderImages();
gallery('reuse-gallery', this.images);
}
if (this._data.images?.length) {
imageContainer.innerHTML = Utils.renderImages('reuse-gallery', this._data.images);
gallery('reuse-gallery', this._data.images);
} else
imageContainer.innerHTML = '<p class="has-text-centered">Nessuna risorsa visuale disponibile</p>';
}
/**
* @param {number} recordId
*/
async biblio(recordId) {
let finding = await this.fetchData(`${GisState.apiUrl}/reuse/${recordId}`);
let {citations, biblioElements} = await Utils.buildBibliography('reuse', recordId);
this.biblioElements = biblioElements;
let citations = '';
if (finding.bibliography.length) {
finding.bibliography.forEach(record => {
citations += `
<span class="is-clickable has-text-link"
data-action="click->biblio#open"
id="cit-${record.id}">
${record.citation}</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);
return citations;
}
getReference(id) {
@ -116,9 +77,5 @@ export class Reuse {
return ref.match(regex);
});
}
async fetchData(url) {
return await fetch(url).then(res => res.json());
}
}

2
webgis/js/components/utils.js
View File

@ -17,7 +17,7 @@ Utils.renderImages = function (galleryId, imagesData) {
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="not-conserved-gallery">
<figure class="is-relative is-clickable has-text-centered" id="${galleryId}">
<img src="img/${imagesData[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>