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

Images for not conserved

Browse Source
This commit is contained in:
Nicolò P 2025-04-28 12:36:09 +02:00
parent 334cab6e4f
commit 0ca98e2b6d
3 changed files with 63 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
webgis/index.html
View File

@ -524,10 +524,31 @@
<button class="modal-close is-large" aria-label="close" data-action="modal#close tabs#reset"></button>
</div>
<!-- Not conserved modal -->
<div class="modal" id="not-conser-data" data-controller="modal biblio marker" data-modal-target="modal">
<div class="modal" id="not-conser-data" data-controller="modal biblio tabs marker" data-modal-target="modal">
<div class="modal-background" data-action="click->modal#close"></div>
<div class="modal-content has-background-white">
<div id="not-conser-sheet"></div>
<div class="tabs is-centered">
<ul>
<li class="is-active" id="for-not-conserved-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>
</ul>
</div>
<div class="data-tabs" id="not-conserved-sheet" data-tabs-target="content"></div>
<div class="data-tabs is-hidden" id="photos" data-tabs-target="content"></div>
</div>
<button class="modal-close is-large" aria-label="close" data-action="modal#close"></button>
</div>

37
webgis/js/components/NotConservedSheet.js → webgis/js/components/NotConserved.js
View File

@ -1,8 +1,8 @@
/**
* Component to render data for not conserved assets sheet
* @class NotConservedSheet
* Component to render data for not conserved assets
* @class NotConserved
*/
export class NotConservedSheet {
export class NotConserved {
biblioElements = [];
/**
* @param {object} data
@ -49,6 +49,37 @@ export class NotConservedSheet {
</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) {
let record = await this.fetchData(`${window.API_URL}/not_conserved/${this._data.id}`)
if (record.images.length) {
this.images = record.images;
imageContainer.innerHTML = this.renderImages();
gallery('not-conserved-gallery', this.images);
}
}
async biblio(recordId) {
let record = await this.fetchData(`${window.API_URL}/not_conserved/${recordId}`);

11
webgis/js/ui.js
View File

@ -5,7 +5,7 @@ import { SiteSheet } from './components/SiteSheet.js';
import { SiteDocuments } from './components/SiteDocuments.js';
import { SiteSurveys } from './components/SiteSurveys.js';
import { SiteMedia } from './components/SiteMedia.js';
import { NotConservedSheet } from './components/NotConservedSheet.js';
import { NotConserved } from './components/NotConserved.js';
import { Finding } from './components/Finding.js';
import { Prehistoric } from './components/Prehistoric.js';
@ -162,12 +162,13 @@ UI.openSiteModal = function (data, selector) {
UI.openNotConserModal = function (data, selector) {
const modal = document.querySelector(selector);
let sheet = new NotConservedSheet();
sheet.siteData = data;
let notConserved = new NotConserved();
notConserved.siteData = data;
// For Stimulus biblio_controller
window.Biblio = sheet;
window.Biblio = notConserved;
sheet.render().then(html => modal.querySelector('#not-conser-sheet').innerHTML = html);
notConserved.render().then(html => modal.querySelector('#not-conserved-sheet').innerHTML = html);
notConserved.setImages(modal.querySelector('#photos'), this.imageGallery);
modal.classList.add('is-active');
}
/**