Refactor components (WIP)

This commit is contained in:
Nicolò P 2025-09-01 17:20:47 +02:00
parent 40cc2ef88b
commit 77d42a2c27
7 changed files with 214 additions and 165 deletions

View File

@ -462,12 +462,36 @@
<button class="modal-close is-large" aria-label="close" data-action="modal#close tabs#reset"></button> <button class="modal-close is-large" aria-label="close" data-action="modal#close tabs#reset"></button>
</div> </div>
<!-- Underwater modal --> <!-- Underwater modal -->
<div class="modal" id="underwater-data" data-controller="modal biblio marker" data-modal-target="modal"> <div class="modal" id="underwater-data" data-controller="modal tabs marker" data-modal-target="modal">
<div class="modal-background" data-action="click->modal#close"></div> <div class="modal-background" data-action="click->modal#close click->tabs#reset"></div>
<div class="modal-content has-background-white"> <div class="modal-content has-background-white">
<div id="underwater-sheet"></div> <div class="tabs is-centered">
<ul>
<li class="is-active" id="for-underwater-sheet" data-tabs-target="tab active" data-action="click->tabs#activate">
<a>
<span class="icon is-small"><i class="fas fa-info-circle" aria-hidden="true"></i></span>
<span>Scheda</span>
</a>
</li>
<li id="for-photos" data-tabs-target="tab" data-action="click->tabs#activate">
<a>
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
<span>Immagini</span>
</a>
</li>
<li id="for-documents" data-tabs-target="tab" data-action="click->tabs#activate">
<a>
<span class="icon is-small"><i class="fas fa-book" aria-hidden="true"></i></span>
<span>Documenti</span>
</a>
</li>
</ul>
</div>
<div class="data-tabs" id="underwater-sheet" data-tabs-target="content"></div>
<div class="data-tabs is-hidden" id="photos" data-tabs-target="content"></div>
<div class="data-tabs is-hidden" id="documents" data-tabs-target="content"></div>
</div> </div>
<button class="modal-close is-large" aria-label="close" data-action="modal#close"></button> <button class="modal-close is-large" aria-label="close" data-action="modal#close tabs#reset"></button>
</div> </div>
<!-- Reuse modal --> <!-- Reuse modal -->
<div class="modal" id="reuse-data" data-controller="modal biblio tabs marker" data-modal-target="modal"> <div class="modal" id="reuse-data" data-controller="modal biblio tabs marker" data-modal-target="modal">
@ -477,9 +501,7 @@
<ul> <ul>
<li class="is-active" id="for-reuse-sheet" data-tabs-target="tab active" data-action="click->tabs#activate"> <li class="is-active" id="for-reuse-sheet" data-tabs-target="tab active" data-action="click->tabs#activate">
<a> <a>
<span class="icon is-small" <span class="icon is-small"><i class="fas fa-info-circle" aria-hidden="true"></i></span>
><i class="fas fa-info-circle" aria-hidden="true"></i
></span>
<span>Scheda</span> <span>Scheda</span>
</a> </a>
</li> </li>

View File

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

View File

@ -1,4 +1,4 @@
import { GisState } from "../state.js"; import Utils from "./utils.js";
/** /**
* Component to render data for not conserved assets * Component to render data for not conserved assets
@ -51,116 +51,27 @@ export class NotConserved {
</div>`; </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="not-conserved-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 {HTMLElement} imageContainer
* @param {Function} gallery * @param {Function} gallery
*/ */
async setImages(imageContainer, gallery) { setImages(imageContainer, gallery) {
if (this._data.images.length) { if (this._data.images.length) {
this.images = this._data.images; imageContainer.innerHTML = Utils.renderImages('not-conserved-gallery', this._data.images);
imageContainer.innerHTML = this.renderImages(); gallery('not-conserved-gallery', this._data.images);
gallery('not-conserved-gallery', this.images);
} else } else
imageContainer.innerHTML = '<p class="has-text-centered">Nessuna risorsa visuale disponibile</p>'; imageContainer.innerHTML = '<p class="has-text-centered">Nessuna risorsa visuale disponibile</p>';
} }
async renderDocs() { async renderDocs() {
let record = await this.fetchData(`${GisState.apiUrl}/not_conserved/${this._data.id}`); return await Utils.generateDocsTable(this._data, 'not_conserved');
this.documentation = record.documents.filter(d => d.type === 'documentazione')
this.publications = record.documents.filter(d => d.type === 'pubblicazione');
let content = `
<div class="has-bottom-border">
<div class="p-2">
<table class="p-4 table is-fullwidth is-striped">
<thead>
<tr><th colspan=3 class="p-2 has-text-centered is-size-5">Documentazione di archivio</th>
<tr><th>Titolo</th><th>Luogo di conservazione</th><th>Download</th></tr>
</thead>
<tbody>
`;
for (const doc of this.documentation) {
content += `
<tr><td>${doc.title}</td><td>${doc.conservationPlace}</td><td><a class="button is-link has-text-white" href="docs/${doc.filename}">
<i class="fa fa-download mr-2"></i> PDF
</a></td></tr>
`;
}
if (this.publications.length) {
content += `
</tbody>
<thead>
<tr><th colspan=3 class="p-2 has-text-centered is-size-5">Pubblicazioni del progetto Carta Archeologica</th>
<tr><th>Titolo</th><th>Autori</th><th>Download</th></tr>
</thead>
<tbody>
`;
for (const doc of this.publications) {
content += `
<tr><td>${doc.title}</td><td>${doc.authors}</td><td><a class="button is-link has-text-white" href="docs/${doc.filename}">
<i class="fa fa-download mr-2"></i> PDF
</a></td></tr>
`;
}
}
content += `
</tbody>
</table>
</div>
</div>
`;
if (!this.publications.length && !this.documentation.length) {
content = '<p class="has-text-centered">Nessun documento disponibile.</p>';
}
return content;
} }
async biblio(recordId) { async biblio(recordId) {
let record = await this.fetchData(`${GisState.apiUrl}/not_conserved/${recordId}`); let {citations, biblioElements} = await Utils.buildBibliography('not_conserved', recordId);
this.biblioElements = biblioElements;
let citations = ''; return citations;
if (record.bibliography.length) {
record.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) { getReference(id) {
@ -169,8 +80,4 @@ export class NotConserved {
return ref.match(regex); return ref.match(regex);
}); });
} }
async fetchData(url) {
return await fetch(url).then(res => res.json());
}
} }

View File

@ -1,3 +1,4 @@
import Utils from "./utils.js";
/** /**
* @class Underwater * @class Underwater
*/ */
@ -34,8 +35,19 @@ export class Underwater {
</p> </p>
</div>`; </div>`;
} }
/**
* @param {HTMLElement} imageContainer
* @param {Function} gallery
*/
setImages(imageContainer, gallery) {
if (this._data.images?.length) {
imageContainer.innerHTML = Utils.renderImages('underwater-gallery', this._data.images);
gallery('underwater-gallery', this._data.images);
} else
imageContainer.innerHTML = '<p class="has-text-centered">Nessuna risorsa visuale disponibile</p>';
}
async fetchData(url) { async renderDocs() {
return await fetch(url).then(res => res.json()); return await Utils.generateDocsTable(this._data, 'underwater');
} }
} }

View File

@ -0,0 +1,152 @@
import { GisState } from "../state.js";
/**
* @namespace Utils
*/
const Utils = {};
/**
*
* @param {string} galleryId The image gallery's id
* @param {Object} imagesData
* @returns {string}
*/
Utils.renderImages = function (galleryId, imagesData) {
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="not-conserved-gallery">
<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>
</div>
</figure>
</div>
</div>`;
return content;
}
/**
* @param {Object} imagesData
* @param {HTMLElement} imageContainer
* @param {Function} galleryGenerator The function that creates the image gallery
* @param {string} galleryId The image gallery's id
*/
Utils.setImages = function(imagesData, imageContainer, galleryGenerator, galleryId) {
imageContainer.innerHTML = Utils.renderImages(galleryId);
galleryGenerator(galleryId, imagesData);
}
/**
*
* @param {Object} data The component's data
* @param {String} resourceUri The resource URI to be used for API calls
* @returns {String} The table HTML
*/
Utils.generateDocsTable = async function(data, resourceUri) {
let record = await Utils.fetchData(`${GisState.apiUrl}/${resourceUri}/${data.id}`);
// TODO Horrible??
if (record instanceof Error) return '<p class="has-text-centered">Nessun documento disponibile.</p>';
const documentation = record.documents.filter(d => d.type === 'documentazione')
const publications = record.documents.filter(d => d.type === 'pubblicazione');
let content = `
<div class="has-bottom-border">
<div class="p-2">
<table class="p-4 table is-fullwidth is-striped">
<thead>
<tr><th colspan=3 class="p-2 has-text-centered is-size-5">Documentazione di archivio</th>
<tr><th>Titolo</th><th>Luogo di conservazione</th><th>Download</th></tr>
</thead>
<tbody>
`;
for (const doc of documentation) {
content += `
<tr><td>${doc.title}</td><td>${doc.conservationPlace}</td><td><a class="button is-link has-text-white" href="docs/${doc.filename}">
<i class="fa fa-download mr-2"></i> PDF
</a></td></tr>
`;
}
if (publications.length) {
content += `
</tbody>
<thead>
<tr><th colspan=3 class="p-2 has-text-centered is-size-5">Pubblicazioni del progetto Carta Archeologica</th>
<tr><th>Titolo</th><th>Autori</th><th>Download</th></tr>
</thead>
<tbody>
`;
for (const doc of publications) {
content += `
<tr><td>${doc.title}</td><td>${doc.authors}</td><td><a class="button is-link has-text-white" href="docs/${doc.filename}">
<i class="fa fa-download mr-2"></i> PDF
</a></td></tr>
`;
}
}
content += `
</tbody>
</table>
</div>
</div>
`;
if (publications.length === 0 && documentation.length === 0) {
content = '<p class="has-text-centered">Nessun documento disponibile.</p>';
}
return content;
}
/**
*
* @param {String} recordUri The record URI used for API calls
* @param {Number} recordId This record's ID
* @returns {{citations:String,biblioElements:String[]}}
*/
Utils.buildBibliography = async function(recordUri, recordId) {
let record = await Utils.fetchData(`${GisState.apiUrl}/${recordUri}/${recordId}`);
let biblioElements = [];
let citations = '';
if (record.bibliography.length) {
record.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};` : ';';
biblioElements.push(`
<div class="p-2 mt-2" id="ref-${record.id}">
<p class="p-3">${record.reference}</p>
</div>
`
);
});
}
const bibliography = {
citations: citations.trim().slice(0, -1),
biblioElements
}
return bibliography;
}
Utils.fetchData = async function(url) {
return await fetch(url).then(res => res.ok ? res.json() : new Error())
.catch(err => console.log(err));
}
export default Utils;

View File

@ -24,9 +24,6 @@ export default class extends Controller {
let ul = this.renderMenuItems(group, municipality); let ul = this.renderMenuItems(group, municipality);
document.querySelector(`[data-list-id="${group}-${municipality.toLowerCase()}-sub"]`) document.querySelector(`[data-list-id="${group}-${municipality.toLowerCase()}-sub"]`)
?.appendChild(ul); ?.appendChild(ul);
if (group === 'reuse' && municipality === 'Capri') console.log(ul);
} }
} }
} }

View File

@ -212,6 +212,8 @@ UI.openUnderwaterModal = function (data, selector) {
// For Stimulus biblio_controller // For Stimulus biblio_controller
//GisState.bibliography = underwater; //GisState.bibliography = underwater;
underwater.render().then(html => modal.querySelector('#underwater-sheet').innerHTML = html); underwater.render().then(html => modal.querySelector('#underwater-sheet').innerHTML = html);
underwater.renderDocs().then(html => modal.querySelector('#documents').innerHTML = html);
underwater.setImages(modal.querySelector('#photos'), this.imageGallery);
modal.classList.add('is-active'); modal.classList.add('is-active');
} }
/** /**