From 2c80887e673fb2d4ed7f8be8c83687b17145e69e Mon Sep 17 00:00:00 2001 From: davvalent Date: Mon, 1 Apr 2024 16:21:40 -0400 Subject: [PATCH] dev: error handling --- dist/js/main.js | 159 ++++++++++++++++++++++++++++-------------------- 1 file changed, 94 insertions(+), 65 deletions(-) diff --git a/dist/js/main.js b/dist/js/main.js index 6c077d7..d7662e6 100644 --- a/dist/js/main.js +++ b/dist/js/main.js @@ -173,71 +173,97 @@ console.log( console.log("Dev: Response from RDF store: ", jsonLD); } - const popUpInformation = ` + let popUpInformation, resourceUri; -
- -

Chargement

-

-
+ try { -
+ popUpInformation = ` -
-
    -
+
+ +

Chargement

+

-
- - +
+ +
+
    +
+
+ +
+ + +
-
- -
-

${feature.properties.URI}

-
- 
${JSON.stringify(jsonLD, undefined, 2)}
+ +
+

${feature.properties.URI}

+
+ 
${
+                  (() => {
+                    if (JSON.stringify(jsonLD, undefined, 2)) {
+                      return JSON.stringify(jsonLD, undefined, 2);
+                    } else {
+                      return `
+                    Une erreur est survenue pour la ressource identifiée par :\n
+                    ${feature.properties.URI}\n
+                    Pour aider à régler le problème, vous pouvez contacter l'éditeur du PIFM :\n
+                    david.valentine@umontreal.ca\n
+                    Veuillez s'il vous plait mentionner l'identifiant de la ressource.\n
+                    Identifiant de la ressource :\n
+                    ${feature.properties.URI}`;
+                    }  
+                  })()
+                }
+
-
- `; + `; + + /** Récupérer l'URI de la ressource */ + jsonLD["@graph"].forEach((resource)=> { + + if (resource["@id"].search("http://data.qdmtl.ca/Building/") > -1) { + resourceUri = resource["@id"]; + } + }); + } catch (error) { + console.error(error); + } + + // injecte HTML pour la visionneuse popup.setContent(popUpInformation); /** * Déplacement et centrage de la punaise */ - let targetLatLng = L.latLng(// coordonnées sont inversées avec GeoJSON */ - feature.geometry.coordinates[1], - feature.geometry.coordinates[0], - ); - const targetZoom = 20, - popUpWidth = document.querySelector(".leaflet-popup").clientWidth, - targetPoint = pifm.project(targetLatLng, targetZoom).subtract([popUpWidth / 2, 0]); - targetLatLng = pifm.unproject(targetPoint, targetZoom); - pifm.setView(targetLatLng, targetZoom); - - /** Récupérer l'URI de la ressource */ - let ressourceUri; - jsonLD["@graph"].forEach((ressource)=> { - - if (ressource["@id"].search("http://data.qdmtl.ca/Building/") > -1) { - ressourceUri = ressource["@id"]; - } - }) + const centering = () => { + + let targetLatLng = L.latLng(// coordonnées sont inversées avec GeoJSON */ + feature.geometry.coordinates[1], + feature.geometry.coordinates[0], + ); + const targetZoom = 20, + popUpWidth = document.querySelector(".leaflet-popup").clientWidth, + targetPoint = pifm.project(targetLatLng, targetZoom).subtract([popUpWidth / 2, 0]); + targetLatLng = pifm.unproject(targetPoint, targetZoom); + pifm.setView(targetLatLng, targetZoom); + }; + + centering(); /** SPARQL query for images */ - let imagesQuery = "PREFIX rico:PREFIX schema:SELECT ?f WHERE{[]a rico:Record;rico:hasInstantiation ?i;rico:hasOrHadMainSubject<"; - imagesQuery += ressourceUri; - imagesQuery += ">.?i schema:image ?f.}"; + let imagesQuery = `PREFIX rico:PREFIX schema:SELECT ?f WHERE{[]a rico:Record;rico:hasInstantiation ?i;rico:hasOrHadMainSubject<${resourceUri}>.?i schema:image ?f.}`; imagesQuery = "query=" + encodeURIComponent(imagesQuery); /** fetch images URL */ @@ -303,7 +329,7 @@ console.log( /** the loop blocks the main thread so this does nothing */ let counter = document.querySelector(`p#${popupId}counter`); - counter.innerText = `${++index}/${imagesElements.length}`; + counter.innerText = `${++index}/${imageUrls.length}`; }); /** initialisation du caroussel */ @@ -315,9 +341,14 @@ console.log( animationDuration: 200, keyboard: true }); - glide.mount(); + // aviser user si des images manquent + if (imageUrls.length !== imagesElements.length) { + const message = `Certaines images ne peuvent pas être téléchargées pour l'instant :\n${imagesElements.length}/${imageUrls.length} images téléchargées.\n\nPour compléter le téléchargement :\n\n1. cliquez sur OK\n2. fermez la visionneuse (panneau de gauche)\n3. cliquez de nouveau sur la punaise de cette ressource\n4. répétez cette manipulation jusqu'à ce que cet avertissement ne s'affiche plus` + alert(message); + } + /** hide the spinner */ let loader = document.querySelector(`#${popupId}loader`); setTimeout(() => { // wait to make sure it's clean @@ -366,20 +397,18 @@ console.log( */ pifm.createPane('fixed', document.querySelector("#map")); - const addControls = (() => { - - /** Layers control data */ - const overlays = { - "Plan d'expropriation": faubourgLayer, - "Bâtiments": geoJSON, - }; + /** Layers control data */ + const overlays = { + "Plan d'expropriation": faubourgLayer, + "Bâtiments": geoJSON, + }; - L.control.layers(null, overlays).addTo(pifm), - L.control.zoom({position:"topright"}).addTo(pifm), - L.control.scale({ - position:"bottomright", - maxWidth: 150 - }).addTo(pifm); + L.control.layers(null, overlays).addTo(pifm), + L.control.zoom({position:"topright"}).addTo(pifm), + L.control.scale({ + position:"bottomright", + maxWidth: 150 + }).addTo(pifm); /** * Utilitaires