From 13d6004fe803ffc74477a23c1030aa57ca5dc6ae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=B2=20P?= Date: Wed, 19 Feb 2025 10:48:19 +0100 Subject: [PATCH] Refactor with less awaits (WIP) --- webgis/js/components/Finding.js | 9 +++++++-- webgis/js/gis.js | 20 ++++++-------------- webgis/js/ui.js | 30 +++++++++++------------------- 3 files changed, 24 insertions(+), 35 deletions(-) diff --git a/webgis/js/components/Finding.js b/webgis/js/components/Finding.js index 6181fe2..a8a0a5d 100644 --- a/webgis/js/components/Finding.js +++ b/webgis/js/components/Finding.js @@ -67,12 +67,17 @@ export class Finding { return content; } - - async setImages() { + /** + * @param {HTMLElement} imageContainer + * @param {Function} gallery + */ + async setImages(imageContainer, gallery) { let record = await this.fetchData(`${window.API_URL}/finding/${this._data.id}`) if (record.images.length) { this.images = record.images; + imageContainer.innerHTML = this.renderImages(); + gallery('finding-gallery', this.images); } } /** diff --git a/webgis/js/gis.js b/webgis/js/gis.js index 68136b0..f599d24 100644 --- a/webgis/js/gis.js +++ b/webgis/js/gis.js @@ -132,10 +132,11 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) { let layerVincoli = await this.loadLayer('vincoli.geojson', optionsVincoli); let layerPaesistici = await this.loadLayer('paesistici.geojson', optionsPaesistici); - let markersGroup = await this.sitesMarkers(sitesGroup); - let notConservedGroup = await this.notConserved(); - let findingsGroup = await this.findings(); - let prehistoric = await this.prehistoric(); + // Refactor with separate function... + this.sitesMarkers(sitesGroup).then(group => {group.addTo(map); window.Sites = group}); + this.notConserved().then(group => {group.addTo(map); window.NotConserved = group}); + this.findings().then(group => {group.addTo(map); window.Findings = group}); + this.prehistoric().then(group => {group.addTo(map); window.Prehistoric = group}); const archeo = { 'Vincoli archeologici' : layerVincoli, @@ -144,16 +145,7 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) { // TEMP!! Remove point for Lo Pozzo... sitesGroup.removeLayer(sitesGroup.customGetLayer('lopozzo')); - markersGroup.addTo(map); sitesGroup.addTo(map); - notConservedGroup.addTo(map); - findingsGroup.addTo(map); - prehistoric.addTo(map); - - window.Sites = markersGroup; - window.NotConserved = notConservedGroup; - window.Findings = findingsGroup; - window.Prehistoric = prehistoric; L.control.layers(baseMap, archeo).addTo(map); @@ -171,7 +163,7 @@ GIS.sitesMarkers = async function (sitesGroup) { for (let id in MARKER_NAMES.sites) { let layer = sitesGroup.customGetLayer(id); - let coords = layer.getBounds().getCenter(); + let coords = layer?.getBounds().getCenter(); const fromStorage = localStorage.getItem(id); let data = {}; diff --git a/webgis/js/ui.js b/webgis/js/ui.js index 0bc7ca9..229012e 100644 --- a/webgis/js/ui.js +++ b/webgis/js/ui.js @@ -96,14 +96,12 @@ UI.toggleMenu = function (triggerId, listId = null) { * @param {object} data The data retrieved from the DB to display as modal content * @param {string} selector The modal selector */ -UI.openSiteModal = async function (data, selector) { +UI.openSiteModal = function (data, selector) { const modal = document.querySelector(selector); let dataTabs = modal.querySelectorAll('.data-tabs'); // Reset data tabs content - for (let tab of dataTabs) { - tab.innerHTML = ''; - } + for (let tab of dataTabs) tab.innerHTML = ''; let siteSheet = new SiteSheet(); siteSheet.siteData = data; @@ -161,7 +159,7 @@ UI.openSiteModal = async function (data, selector) { * @param {object} data The data retrieved from the DB to display as modal content * @param {string} selector The modal selector */ -UI.openNotConserModal = async function (data, selector) { +UI.openNotConserModal = function (data, selector) { const modal = document.querySelector(selector); let sheet = new NotConservedSheet(); @@ -169,21 +167,19 @@ UI.openNotConserModal = async function (data, selector) { // For Stimulus biblio_controller window.Biblio = sheet; - modal.querySelector('#not-conser-sheet').innerHTML = await sheet.render(); + sheet.render().then(html => modal.querySelector('#not-conser-sheet').innerHTML = html); modal.classList.add('is-active'); } /** * @param {object} data The data retrieved from the DB to display as modal content * @param {string} selector The modal selector */ -UI.openFindingModal = async function (data, selector) { +UI.openFindingModal = function (data, selector) { const modal = document.querySelector(selector); let dataTabs = modal.querySelectorAll('.data-tabs'); // Reset data tabs content - for (let tab of dataTabs) { - tab.innerHTML = ''; - } + for (let tab of dataTabs) tab.innerHTML = ''; let finding = new Finding(); finding.data = data; @@ -191,12 +187,9 @@ UI.openFindingModal = async function (data, selector) { // For Stimulus biblio_controller window.Biblio = finding; - finding.setImages(); - modal.querySelector('#finding-sheet').innerHTML = await finding.render(); - if (finding.images) { - modal.querySelector('#photos').innerHTML = finding.renderImages(); - this.imageGallery('finding-gallery', finding.images); - } + finding.render().then(html => modal.querySelector('#finding-sheet').innerHTML = html); + finding.setImages(modal.querySelector('#photos'), this.imageGallery); + modal.classList.add('is-active'); } /** @@ -204,7 +197,7 @@ UI.openFindingModal = async function (data, selector) { * @param {object} data The data retrieved from the DB to display as modal content * @param {string} selector The modal selector */ -UI.openPrehistModal = async function (data, selector) { +UI.openPrehistModal = function (data, selector) { const modal = document.querySelector(selector); let prehistoric = new Prehistoric(); @@ -212,8 +205,7 @@ UI.openPrehistModal = async function (data, selector) { // For Stimulus biblio_controller //window.Biblio = prehistoric; - - modal.querySelector('#prehist-sheet').innerHTML = await prehistoric.render(); + prehistoric.render().then(html => modal.querySelector('#prehist-sheet').innerHTML = html); modal.classList.add('is-active'); } /**