feat: add popup to check gpf services status

Author: azarz

src/css/index.css

@@ -152,6 +152,21 @@ input[type="submit"].disabled {
   font-size: 14px;
 }
 
+/* POPUP services GPF */
+.gpfServiceName {
+  font-family: "Open Sans Semibold";
+}
+
+.gpfStatusPopup ul,
+.gpfStatusPopup p {
+  margin: 2px 0;
+}
+
+.gpfStatusPopup ul {
+  margin-top: 8px;
+  padding-left: 15px;
+}
+
 .secondary-button {
   color: var(--darker-green);
   background-color: var(--light-green);

src/css/position.css

@@ -250,6 +250,7 @@
   color: var(--dark-grey);
   border-radius: 15px;
   padding: 0;
+  border: 1px solid #DDE1E6;
 }
 
 .maplibregl-popup-content > div > div:nth-child(2).divPopupContent {

src/js/index.js

@@ -91,6 +91,7 @@ function app() {
             map.once("moveend", () => {
               StatusPopups.getNetworkPopup(map);
               StatusPopups.getEditoPopup(map);
+              StatusPopups.getGpfStatusPopup(map);
             });
             if (urlParams.get("l1") && urlParams.get("l2") && urlParams.get("m") && urlParams.get("title") && urlParams.get("color")) {
               const feature = {
@@ -311,6 +312,7 @@ function app() {
     map.once("moveend", () => {
       StatusPopups.getNetworkPopup(map);
       StatusPopups.getEditoPopup(map);
+      StatusPopups.getGpfStatusPopup(map);
     });
   }
 
@@ -352,6 +354,7 @@ function app() {
       map.once("moveend", () => {
         StatusPopups.getNetworkPopup(map);
         StatusPopups.getEditoPopup(map);
+        StatusPopups.getGpfStatusPopup(map);
       });
     });
   }
@@ -366,6 +369,7 @@ function app() {
       if (!Globals.mapLoaded) {
         SplashScreen.hide();
         StatusPopups.getEditoPopup(map);
+        StatusPopups.getGpfStatusPopup(map);
       }
     }, 2000);
   }, 4000);

src/js/status-popups.js

@@ -77,6 +77,61 @@ function getEditoPopup (map) {
   });
 }
 
+function getGpfStatusPopup (map) {
+  fetch("https://ignf.github.io/cartes-ign-services-uptime/cartes-ign-status-TEST.json?v=0").then(res => res.json()).then( (res) => {
+    let msgDiv = null;
+    let serviceList = null;
+    for (const [key, value] of Object.entries(res)) {
+      if (value.up) {
+        continue;
+      }
+      if (!msgDiv) {
+        msgDiv = document.createElement("div");
+        const titleDiv = document.createElement("div");
+        titleDiv.classList.add("divPositionTitle");
+        titleDiv.innerText = "Fonctionnalités indisponibles";
+        msgDiv.appendChild(titleDiv);
+
+        const contentDiv = document.createElement("div");
+        contentDiv.classList.add("divPopupContent");
+        msgDiv.appendChild(contentDiv);
+
+        const intro = document.createElement("p");
+        intro.innerText = "Du fait d'une indisponibilité de la plateforme sur laquelle l'application se base, les fonctionnalités suivantes peuvent rencontrer des problèmes ou être indisponibles :";
+        contentDiv.appendChild(intro);
+
+        serviceList = document.createElement("ul");
+        contentDiv.appendChild(serviceList);
+      }
+      const li = document.createElement("li");
+      const date = new Date(0);
+      date.setUTCSeconds(value.since);
+      let sinceText = "";
+      if (value.since !== 0) {
+        sinceText = `(depuis le ${date.toLocaleString("fr-FR", {month: "numeric", day: "numeric", hour: "2-digit", minute:"2-digit"})})`;
+      }
+      const element = `
+        <span class="gpfServiceName">${key}</span> ${sinceText}
+      `;
+      li.innerHTML = element;
+      serviceList.appendChild(li);
+    }
+    if (msgDiv) {
+      PopupUtils.showGpfStatusPopup(`
+      <div id="editoPopup">
+        <div class="divPopupClose" onclick="onClosegpfStatusPopup(event)"></div>
+        <div>${msgDiv.innerHTML}</div>
+      </div>
+      `
+      , map);
+    }
+
+  }).catch((err) => {
+    console.warn("Could not load gpf status");
+    console.warn(err);
+  });
+}
+
 function getOnboardingModal() {
   if (
     localStorage.getItem("lastOnboardId") !== null && localStorage.getItem("lastOnboardId") === `${OnboardingConfig.id}`
@@ -102,4 +157,5 @@ export default {
   getNetworkPopup,
   getEditoPopup,
   getOnboardingModal,
+  getGpfStatusPopup,
 };

src/js/utils/popup-utils.js

@@ -13,6 +13,9 @@ let popup = {
 let editoPopup = {
   popup: null
 };
+let gpfStatusPopup = {
+  popup: null
+};
 
 function showPopup(content, map, className, closeMethodName, object) {
   // on supprime la popup
@@ -52,13 +55,17 @@ function showOnlinePopup(content, map) {
   showPopup(content, map, "onlinePopup", "onCloseonlinePopup", popup);
 }
 
-
 function showEditoPopup(content, map) {
   showPopup(content, map, "editoPopup", "onCloseeditoPopup", editoPopup);
 }
 
+function showGpfStatusPopup(content, map) {
+  showPopup(content, map, "gpfStatusPopup", "onClosegpfStatusPopup", gpfStatusPopup);
+}
+
 export default {
   showOnlinePopup,
   showEditoPopup,
   showPopup,
+  showGpfStatusPopup,
 };