Refactor components (WIP)
This commit is contained in:
parent
40cc2ef88b
commit
77d42a2c27
@ -462,12 +462,36 @@
|
||||
<button class="modal-close is-large" aria-label="close" data-action="modal#close tabs#reset"></button>
|
||||
</div>
|
||||
<!-- Underwater modal -->
|
||||
<div class="modal" id="underwater-data" data-controller="modal biblio marker" data-modal-target="modal">
|
||||
<div class="modal-background" data-action="click->modal#close"></div>
|
||||
<div class="modal" id="underwater-data" data-controller="modal tabs marker" data-modal-target="modal">
|
||||
<div class="modal-background" data-action="click->modal#close click->tabs#reset"></div>
|
||||
<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>
|
||||
<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>
|
||||
<!-- Reuse modal -->
|
||||
<div class="modal" id="reuse-data" data-controller="modal biblio tabs marker" data-modal-target="modal">
|
||||
@ -477,9 +501,7 @@
|
||||
<ul>
|
||||
<li class="is-active" id="for-reuse-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 class="icon is-small"><i class="fas fa-info-circle" aria-hidden="true"></i></span>
|
||||
<span>Scheda</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { GisState } from "../state.js";
|
||||
import Utils from "./utils.js";
|
||||
/**
|
||||
* @class Finding
|
||||
*/
|
||||
@ -50,64 +50,25 @@ export class Finding {
|
||||
</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;
|
||||
}
|
||||
/**
|
||||
* @param {HTMLElement} imageContainer
|
||||
* @param {Function} gallery
|
||||
*/
|
||||
async setImages(imageContainer, gallery) {
|
||||
let record = await this.fetchData(`${GisState.apiUrl}/finding/${this._data.id}`)
|
||||
|
||||
if (record.images.length) {
|
||||
this.images = record.images;
|
||||
imageContainer.innerHTML = this.renderImages();
|
||||
gallery('finding-gallery', this.images);
|
||||
}
|
||||
if (this._data.images?.length) {
|
||||
imageContainer.innerHTML = Utils.renderImages('finding-gallery', this._data.images);
|
||||
gallery('finding-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}/finding/${recordId}`);
|
||||
let {citations, biblioElements} = await Utils.buildBibliography('not_conserved', 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,8 +77,4 @@ export class Finding {
|
||||
return ref.match(regex);
|
||||
});
|
||||
}
|
||||
|
||||
async fetchData(url) {
|
||||
return await fetch(url).then(res => res.json());
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { GisState } from "../state.js";
|
||||
import Utils from "./utils.js";
|
||||
|
||||
/**
|
||||
* Component to render data for not conserved assets
|
||||
@ -51,116 +51,27 @@ export class NotConserved {
|
||||
</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 {Function} gallery
|
||||
*/
|
||||
async setImages(imageContainer, gallery) {
|
||||
setImages(imageContainer, gallery) {
|
||||
if (this._data.images.length) {
|
||||
this.images = this._data.images;
|
||||
imageContainer.innerHTML = this.renderImages();
|
||||
gallery('not-conserved-gallery', this.images);
|
||||
imageContainer.innerHTML = Utils.renderImages('not-conserved-gallery', this._data.images);
|
||||
gallery('not-conserved-gallery', this._data.images);
|
||||
} else
|
||||
imageContainer.innerHTML = '<p class="has-text-centered">Nessuna risorsa visuale disponibile</p>';
|
||||
}
|
||||
|
||||
async renderDocs() {
|
||||
let record = await this.fetchData(`${GisState.apiUrl}/not_conserved/${this._data.id}`);
|
||||
|
||||
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;
|
||||
return await Utils.generateDocsTable(this._data, 'not_conserved');
|
||||
}
|
||||
|
||||
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 = '';
|
||||
|
||||
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);
|
||||
return citations;
|
||||
}
|
||||
|
||||
getReference(id) {
|
||||
@ -169,8 +80,4 @@ export class NotConserved {
|
||||
return ref.match(regex);
|
||||
});
|
||||
}
|
||||
|
||||
async fetchData(url) {
|
||||
return await fetch(url).then(res => res.json());
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import Utils from "./utils.js";
|
||||
/**
|
||||
* @class Underwater
|
||||
*/
|
||||
@ -34,8 +35,19 @@ export class Underwater {
|
||||
</p>
|
||||
</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) {
|
||||
return await fetch(url).then(res => res.json());
|
||||
async renderDocs() {
|
||||
return await Utils.generateDocsTable(this._data, 'underwater');
|
||||
}
|
||||
}
|
||||
|
||||
152
webgis/js/components/utils.js
Normal file
152
webgis/js/components/utils.js
Normal 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;
|
||||
@ -24,9 +24,6 @@ export default class extends Controller {
|
||||
let ul = this.renderMenuItems(group, municipality);
|
||||
document.querySelector(`[data-list-id="${group}-${municipality.toLowerCase()}-sub"]`)
|
||||
?.appendChild(ul);
|
||||
|
||||
if (group === 'reuse' && municipality === 'Capri') console.log(ul);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -212,6 +212,8 @@ UI.openUnderwaterModal = function (data, selector) {
|
||||
// For Stimulus biblio_controller
|
||||
//GisState.bibliography = underwater;
|
||||
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');
|
||||
}
|
||||
/**
|
||||
|
||||
Loading…
Reference in New Issue
Block a user