Axione-IPE-Viewer/webapp/templates/app.js

const minZoomForRequest = 17;
const urlADSL='https://tools.aquilenet.fr/cgi-bin/recherchend.cgi'
const urlTestFTTH='https://tools.aquilenet.fr/cgi-bin/test.cgi'

const streetTypeConversion = new Map();
streetTypeConversion.set("aire", "aire")
streetTypeConversion.set("allée", "all")
streetTypeConversion.set("allee", "all")
streetTypeConversion.set("avenue", "av")
streetTypeConversion.set("base", "base")
streetTypeConversion.set("boulevard", "bd")
streetTypeConversion.set("cami", "cami")
streetTypeConversion.set("carrefour", "car")
streetTypeConversion.set("chemin", "che")
streetTypeConversion.set("cheminement", "chem")
streetTypeConversion.set("chaussée", "chs")
streetTypeConversion.set("cité", "cite")
streetTypeConversion.set("cite", "cite")
streetTypeConversion.set("clos", "clos")
streetTypeConversion.set("coin", "coin")
streetTypeConversion.set("corniche", "cor")
streetTypeConversion.set("cote", "cote")
streetTypeConversion.set("cour", "cour")
streetTypeConversion.set("cours", "crs")
streetTypeConversion.set("domaine", "dom")
streetTypeConversion.set("descente", "dsc")
streetTypeConversion.set("ecart", "eca")
streetTypeConversion.set("esplanade", "esp")
streetTypeConversion.set("faubourg", "fg")
streetTypeConversion.set("gare", "gare")
streetTypeConversion.set("grande rue", "gr")
streetTypeConversion.set("hameau", "ham")
streetTypeConversion.set("halle", "hle")
streetTypeConversion.set("ilôt", "ilot")
streetTypeConversion.set("impasse", "imp")
streetTypeConversion.set("lieu dit", "ld")
streetTypeConversion.set("lotissement", "lot")
streetTypeConversion.set("marché", "mar")
streetTypeConversion.set("montée", "mte")
streetTypeConversion.set("parc", "parc")
streetTypeConversion.set("passage", "pas")
streetTypeConversion.set("place", "pl")
streetTypeConversion.set("plan", "plan")
streetTypeConversion.set("plaine", "pln")
streetTypeConversion.set("plateau", "plt")
streetTypeConversion.set("pont", "pont")
streetTypeConversion.set("port", "port")
streetTypeConversion.set("promenade", "pro")
streetTypeConversion.set("parvis", "prv")
streetTypeConversion.set("quartier", "qua")
streetTypeConversion.set("quai", "quai")
streetTypeConversion.set("résidence", "res")
streetTypeConversion.set("residence", "res")
streetTypeConversion.set("ruelle", "rle")
streetTypeConversion.set("rocade", "roc")
streetTypeConversion.set("rond point", "rpt")
streetTypeConversion.set("route", "rte")
streetTypeConversion.set("rue", "rue")
streetTypeConversion.set("sentier", "sen")
streetTypeConversion.set("sente", "sen")
streetTypeConversion.set("square", "sq")
streetTypeConversion.set("tour", "tour")
streetTypeConversion.set("terre-plein", "tpl")
streetTypeConversion.set("traverse", "tra")
streetTypeConversion.set("villa", "vla")
streetTypeConversion.set("village", "vlge ")
streetTypeConversion.set("voie", "voie")
streetTypeConversion.set("zone artisanale", "za")
streetTypeConversion.set("zone d'aménagement concerté", "zac")
streetTypeConversion.set("zone d'aménagement différé", "zad")
streetTypeConversion.set("zone industrielle", "zi")
streetTypeConversion.set("zone", "zone")

let markers = [];
function initMap(btn) {
  // Init map position/zoom. Potentially using what's in the URL search string.
  const params = new URLSearchParams(window.location.search);
  let x = parseFloat(params.get('x'));
  let y = parseFloat(params.get('y'));
  let z = parseInt(params.get('z'));
  let map = L.map('map');
  if (x && y && z) {
    map.setView([y, x], z);
    fetchEligData(map);
  } else {
    map.setView([46.710, 3.669], 6);
  }

  L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);

  map.on("zoom", () => {
    /* We only want to enable the search button when we reached a sufficient zoom level */
    if (btn.disabled && map.getZoom() >= minZoomForRequest) {
      displayBtn(btn);
    }
    if (!btn.disabled && map.getZoom() < minZoomForRequest) {
      hideBtn(btn);
    }
  });
  return map;
}

function initAddrSearch(map) {
  const autocompleteOptions = {
    debounceTime: 300,
    search: async (query) => {
      if (query.length > 2) {
        const mapCenter = map.getCenter();
        const reqUri = `https://photon.komoot.io/api/?q=${encodeURI(query)}&lat=${mapCenter.lat}&lon=${mapCenter.lng}&limit=20&lang=fr`;
        const source = await fetch(reqUri);
        const data = await source.json();
        return data.features;
      } else {
        return [];
      }
    },
    renderResult: (res, props) => {
      const p = res.properties;
      if (p.name && p.postcode && p.city && p.county && res.geometry.coordinates && res.geometry.coordinates.length === 2)
        return `<li ${props}>${p.name} - ${p.postcode} ${p.city}, ${p.county}</li>`;
      else
        return "";
    },
    onSubmit: async (res) => {
      const searchInput = document.getElementById('search-addr-autocomplete-input');
      const p = res.properties;
      searchInput.value = `${p.name} - ${p.postcode} ${p.city}, ${p.county}`;
      // We already filtered out the result not having strictly 2 coordinates at item display
      map.setView([res.geometry.coordinates[1], res.geometry.coordinates[0]], 19);
      fetchEligData(map);
    }
  };
  const autocompleteAddr = new Autocomplete("#search-addr-autocomplete", autocompleteOptions);
  return autocompleteAddr;
}

function updateEligData(map, eligData) {
  markers.map(marker => map.removeLayer(marker));
  let buildings = eligData.buildings;
  markers = Object.values(buildings).map(building => {
    const latlng = new L.latLng(building.y, building.x);
    let addrImm = `${building.numVoieImm} ${building.typeVoieImm} ${building.nomVoieImm}`
    if (building.bat_info != "") {
      addrImm += ` (Bat ${building.bat_info})`
    }
    let messageElig = ``
    eligTestApi=`eligtest/ftth?idImm=${building.idImm}&codePostal=${building.codePostal}&axione=${building.aquilenetEligStatus.isEligible}&liazo=${building.fdnEligStatus.isEligible}`
    // éligible chez Aquilenet, lien pour le test
    if (building.aquilenetEligStatus.isEligible) {
      messageElig = `<p class=deployeeAquilenet>Fibre deployee et disponible par Aquilenet !</p>`
      const zip=encodeURIComponent(building.codePostal);
      const idImm=encodeURIComponent(building.idImm);
      messageElig += `<br/><a href=${urlTestFTTH}?ftth=1&axione=1&adsltel=NOUVEAU&cp=${zip}&refimmeuble=${idImm}`
                   + `>Tester l'éligibilité</a>`
    // pas de données Axione mais Kosc nous renvoie qque chose à cette adresse (fdnEligStatus)
    // c'est peut être OK, on croise avec les données ARCEP (othersEligStatus)
    // Enfin on affiche un lien vers le test d'éligibilté KOSC à cette adresse
    } else if (building.fdnEligStatus.isEligible && building.othersEligStatus.isEligible) {
      messageElig = `<p class=deployeeFDN>Fibre deployee mais pas chez Axione !`
      messageElig += `<br/><a href=${eligTestApi}>Tester l'eligibilite par Kosc et Bouygues</a></p>`
    // Pas de données Kosc ou Axione mais l'ARCEP nous dit qu'une fibre est déployée à cette adresse
    } else if (building.othersEligStatus.isEligible) {
      messageElig = `<p class=deployeeAutres>Fibre deployee mais non eligible Aquilenet, desole :(</p>`
    // Pas de fibre il semblerait, proposer un test ADSL Aquilenet
    } else {
      messageElig = `<p class=nonDeployee>Fibre non deployee :(</p>`
      const zip=encodeURIComponent(building.codePostal);
      const comm=encodeURIComponent(building.commune);
      let convertType = streetTypeConversion.get(building.typeVoieImm.toLowerCase());
      if (! convertType) {
        convertType = building.typeVoieImm;
      }
      const street=encodeURIComponent(`${convertType} ${building.nomVoieImm}`)
      const street_nb=encodeURIComponent(building.numVoieImm)
      messageElig += `<br/><a href=${urlADSL}?zip=${zip}&city=${comm}&street=${street}&street_nb=${street_nb}&gps=&do=1&submit=Valider`
                   + `>Tester ADSL a cette adresse</a>`
      if (building.othersEligStatus.reasonNotEligible != "") {
        messageElig += `<br/><br/>Status general ARCEP: ${building.othersEligStatus.reasonNotEligible}`
      }
    }
    // Si pas d'éligibilité fibre, on affiche la raison si elle existe
    if (building.aquilenetEligStatus.reasonNotEligible != "") {
      messageElig += `<br/> Pour Aquilenet, raison non eligible: ${building.aquilenetEligStatus.reasonNotEligible}`
    }
    const marker = new L.marker(latlng)
      .bindPopup(`${addrImm}<br/>${building.codePostal} ${building.commune}`
               + `<br/><br/>${messageElig}<br/><br/>Ref Immeuble: ${building.idImm}`, {
                maxWidth : 560
            });
    map.addLayer(marker);
    return marker
  });
}

function updateUrl(map) {
  const c = map.getCenter();
  history.replaceState({}, "", encodeURI(`?x=${c.lng}&y=${c.lat}&z=${map.getZoom()}`));
}

async function fetchEligData(map) {
  const zoom = map.getZoom();
  if (zoom >= minZoomForRequest) {
    const mc = map.getCenter();
    const bounds = map.getBounds();
    const sw = bounds.getSouthWest();
    const ne = bounds.getNorthEast();
    const btn = document.getElementById("btn-load-elig-data");
    waitBtn(btn);
    const reqUri = encodeURI(`eligdata?swx=${sw.lng}&swy=${sw.lat}&nex=${ne.lng}&ney=${ne.lat}&centerlat=${mc.lat}&centerlng=${mc.lng}`);
    const source = await fetch(reqUri);
    const eligData = await source.json();
    updateEligData(map, eligData);
    updateUrl(map);
    displayBtn(btn);
  }
}

function initBtn() {
  const btn = document.getElementById("btn-load-elig-data");
  btn.disabled = true;
  btn.title = "Veuillez zoomer plus la carte avant de lancer une recherche d'éligibilité.";
  btn.onclick = () => fetchEligData(map);
  return btn;
}

function displayBtn(btn) {
  btn.disabled = false;
  btn.title = "Rechercher les données d'éligibilité pour cette zone."
}

function hideBtn(btn) {
  btn.disabled = true;
  btn.title = "Veuillez zoomer plus la carte avant de lancer une recherche d'éligibilité.";
}
function waitBtn(btn) {
  btn.disabled = true;
  btn.title = "Chargement des batiments...";
}


const btn = initBtn();
const map = initMap(btn);
const addrSearch = initAddrSearch(map);