https://www.obiprint.com/rc/scripts/rc.js

1const ensCode = "R8";
2const apiKey = "RC202306281035REAPRT";
3const relayCount = 30;
4const searchPerimeter = 100000;
5const hereIcon = "rc/images/VousEtesIci.gif";
6const borderCountries = [
7  "France",
8  "Belgique",
9  "Monaco",
10  "Espagne",
11  "Italie",
12  "Allemagne",
13  "Luxembourg",
14  "Suisse"
15];
16const wsRelayUrl = "https://service.relaiscolis.com/wslisterelaisproches/RelaisProches/Liste?key=" + apiKey;
17const osmGeocodingUrl = "https://nominatim.openstreetmap.org/search?q=";
18const gouvGeocodingUrl = "https://api-adresse.data.gouv.fr/search/?q=";
19const params = new URLSearchParams(window.location.search);
20
21let map = null;
22let featureLayer;
23let shippingDelay = 2;
24let onlyActiveRelays = true;
25let minZoom = 5;
26let maxZoom = 19;
27let zoom = 14;
28let parOnlyMaxRelays = (params.get("relaisColisMax") !== null) ? params.get("relaisColisMax").trim() : "";
29let parCountryCode = (params.get("relaisCodeCountry") !== null) ? params.get("relaisCodeCountry").trim().toUpperCase() : "";
30let parSmartRelays = (params.get("relaisColisSmart") !== null) ? params.get("relaisColisSmart").trim() : "";
31let parAddressCountryCode = (params.get("adresseCodeCountry") !== null) ? params.get("adresseCodeCountry").trim().toUpperCase() : "";
32let parClientAddress = (params.get("clientAddress") !== null) ? params.get("clientAddress").trim() : "";
33let parActivity = (params.get("activity") !== null) ? params.get("activity").trim() : "";
34let allRelays = [];
35
36$(document).ready(function() {
37  if (parClientAddress !== null) {
38    initMap();
39  }
40
41  $("#addressSearch").autocomplete(
42    {
43      source: function (request, response) {
44        let wsUrl = gouvGeocodingUrl + request.term + "&autocomplete=1";
45        let protocol = window.location.protocol;
46
47        if (protocol === "http") {
48          wsUrl = wsUrl.replace("https", "http");
49        }
50
51        $("#searchLat").val("");
52        $("#searchLon").val("");
53
54        $.ajax({

55          type: "GET",
56          url: wsUrl,
57          contentType: "application/json",
58          dataType: "json",
59          success: function (data) {
60            let itemArr = [];
61
62            $.each(data.features, function (index, address) {
63              let city = address.properties.city;
64              let zipcode = address.properties.postcode;
65              let context = address.properties.context;
66              let label = address.properties.label;
67
68              itemArr[index] = {
69                label: zipcode + " " + city + " - " + address.properties.name,
70                value: address.geometry,
71                data: address
72              };
73            });
74
75            response(itemArr);
76          },
77          error: function(err) {
78            console.log('Error retrieving records...');
79            console.dir(err);
80          }
81        });
82      },
83      select: function (event, ui) {
84        let lon = $("#searchLon");
85        let lat = $("#searchLat");
86
87        $("#addressSearch").val(ui.item.label);
88
89        if (ui.item.value.coordinates.length > 0) {
90          lon.val(ui.item.value.coordinates[0]);
91          lat.val(ui.item.value.coordinates[1]);
92          hideLocation(true);
93          getPoisListNearTo(lon.val(), lat.val(), ensCode);
94        } else {
95          lon.val("");
96          lat.val("");
97        }
98
99        return false;
100      },
101      focus: function (event, ui) {
102        $("#addressSearch").val(ui.item.label);
103
104        return false;
105      },
106      minLength: 3
107    }
108  );
109});
110
111$("#searchButton").click(function() {
112  let address = $("#addressSearch").val();
113  let lon = $("#searchLon").val();
114  let lat = $("#searchLat").val();
115
116  if (lon === "") {
117    if (address !== "") {
118      getPoisListGeocodingByOSM(address);
119    }
120  }
121});
122
123$(document).keyup(function(e) {
124  let key = e.which;
125
126  if (key === 13) {
127    let address = $("#addressSearch").val();
128    let lon = $("searchLon").val();
129
130    if (lon === "") {
131      if (address !== "") {
132        getPoisListGeocodingByOSM(address);
133      }
134    }
135  }
136});
137
138function init() {
139  if (parClientAddress !== "") {
140    $('#addressSearch').val(parClientAddress.toUpperCase());
141    let countryCode = parCountryCode.toUpperCase();
142    if (countryCode !== "") {
143      if (!["BEL", "FRA", "MCO"].includes(countryCode)) {
144        return false;
145      }
146    } else {
147      countryCode = "FRA";
148    }
149
150    return true;
151  } else {
152    return false;
153  }
154}
155
156function initMap() {
157  const initialized = init();
158
159  if (initialized) {
160    if (parClientAddress === "") {
161      return false;
162    }
163
164    if (parAddressCountryCode !== "" || parAddressCountryCode !== "FRA") {
165      getPoisListGeocodingByOSM(parClientAddress);
166    } else {
167      getPoisListGeocodingByGouvFr(parClientAddress);
168    }
169  }
170}
171
172function getPoisListNearTo(lon, lat, ensCode) {
173  $("#noAddressMessage").hide();
174
175  if (map !== null) {
176    map.remove();
177    map = null;
178  }
179
180  map = L.map("map", {
181    center: new L.LatLng(lat, lon),
182    maxZoom: maxZoom,
183    minZoom: minZoom
184  }).setView([lat, lon], zoom);
185
186  let tiles = L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
187    maxZoom: maxZoom,
188    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
189  }).addTo(map);
190
191  if (typeof featureLayer !== 'undefined') {
192    map.removeLayer(featureLayer);
193  }
194
195  let errorMessage = $("#errorMessage");
196  let wsUrl = wsRelayUrl;
197  let request = {
198    Lon: lon,
199    Lat: lat,
200    EnsCode: ensCode,
201    RelaisMax: parOnlyMaxRelays,
202    RelaisSmart: parSmartRelays,
203    RelaisActifouTF: onlyActiveRelays,
204    RelaisCodeCountry: parCountryCode,
205    RayonRecherche: searchPerimeter,
206    Delailogistique: shippingDelay,
207    AdresseSaisie: $("#addressSearch").val(),
208    NbRelais: relayCount,
209    Activity: parActivity
210  };
211
212  errorMessage.html("");
213
214  $.ajax({
215    type: "POST",
216    url: wsUrl,
217    contentType: "application/json; charset=utf-8",
218    data: JSON.stringify(request),
219    success: function (data, status, req) {
220      let errorList = data.ErrorsList;
221
222      if (errorList.length > 0) {
223        console.log(data.responseText);
224        console.log(errorList[0].ErrorDescription);
225        errorMessage.html("<b>Un ou plusieurs problème(s) sont survenus</b><p>" + errorList[0].ErrorDescription + "</p>");
226      }
227
228      if (status === "success") {
229        drawRelayPoints(map, data, lat, lon);
230      }
231
232      if (data.PoisList.length === 0) {
233        errorMessage.html("<b>Un ou plusieurs problème(s) sont survenus</b><p>Aucun point relais colis n'a été trouvé autour de cette adresse</p>");
234      }
235    },
236    error: function (data, status, req) {
237      alert(data.responseJSON.Message + " - " + data.responseJSON.E

237xceptionMessage);
238    }
239  })
240}
241
242function getPoisListGeocodingByOSM(params) {
243  let wsUrl = osmGeocodingUrl + params + "&format=json";
244  let relayList = $('#relayList');
245
246  relayList.show();
247  relayList.html("<h4>Liste des points relais</h4>");
248
249  if (typeof map !== 'undefined') {
250    map.remove();
251  }
252
253  if (window.location.protocol === "http") {
254    wsUrl = wsUrl.replace("https", "http");
255  }
256
257  $.getJSON(wsUrl, function(addressList) {
258    let newListAddress = [];
259
260    $.each(addressList, function(index, address) {
261      let arr = address.display_name.split(',');
262
263      if (borderCountries.indexOf(arr[arr.length - 1].replace(/^\s+/, "")) >= 0) {
264        newListAddress.push(address);
265      }
266    });
267
268    let addressListSorted = _.orderBy(newListAddress, "importance", "desc");
269    let resultCount = addressListSorted.length;
270
271    switch(resultCount) {
272      case 0:
273        hideLocation(true);
274        alert("Whoops : Adresse non-trouvée");
275        break;
276      case 1:
277        let address = addressListSorted[0];
278        hideLocation(true);
279        $("#searchLon").val(address.lon);
280        $("#searchLat").val(address.lat);
281        getPoisListNearTo(address.lon, address.lat, ensCode);
282        break;
283      default:
284        let selectAddress = $("#selectAddress");
285        selectAddress[0].options.length = 0;
286        $.each(addressListSorted, function (index, address) {
287          let out = address.display_name + '-' + '(' + address.lat + ', ' + address.lon + ')';
288          let coordXY = '(' + address.lat + ', ' + address.lon + ')';
289          let newOption = new Option(out, coordXY);
290          selectAddress.append(newOption);
291          out = '';
292        });
293        break;
294    }
295  });
296}
297
298function getPoisListGeocodingByGouvFr(params) {
299  let wsUrl = gouvGeocodingUrl + params + "&autocomplete=0";
300
301  if (window.location.protocol === "http") {
302    wsUrl = wsUrl.replace("https", "http");
303  }
304
305  let relayList = $('#relayList');
306
307  relayList.show();
308
309  $.getJSON(wsUrl, function (data) {
310    let resultCount = data.features.length;
311    let out = "";

312    let coordXY = "";
313
314    switch(resultCount) {
315      case 0:
316        hideLocation(true);
317        alert("Whoops : address non-trouvée");
318        break;
319      case 1:
320        let address = data.features[0];
321        hideLocation(true);
322        $("#searchLon").val(address.geometry.coordinates[0]);
323        $("#searchLat").val(address.geometry.coordinates[1]);
324        getPoisListNearTo(address.geometry.coordinates[0], address.geometry.coordinates[1], ensCode);
325        break;
326      default:
327        let selectAddress = $("#selectAddress");
328        hideLocation(true);
329        selectAddress[0].options.length = 0;
330        $.each(data.features, function (index, address) {
331          let lon = address.geometry.coordinates[0];
332          let lat = address.geometry.coordinates[1];
333          out = address.properties.label + '-' + '(' + lat + ', ' + lon + ')';
334          coordXY = '(' + lat + ', ' + lon + ')';
335          var newOption = new Option(out, coordXY);
336          selectAddress.append(newOption);
337          out = '';
338        });
339        $("#addressSearch").focus();
340        break;
341    }
342  });
343}
344
345function drawRelayPoints(map, data, lat, lon) {
346  let pinContent = "";
347  let markerList = [];
348  let yahIcon = L.icon({
349    iconUrl: hereIcon,
350    iconSize: [25, 25]
351  });
352  let yahMarker = L.marker([lat, lon], {
353    icon: yahIcon
354  }).bindTooltip('<b style="font-size: 12px;">Vous êtes ici</b>');
355
356  markerList.push(yahMarker);
357
358  let relayList = $('#relayList');
359
360  relayList.show();
361  relayList.html("<h4>Liste des points relais</h4>");
362
363  allRelays = data.PoisList;
364
365  $.each(data.PoisList, function (index, relay) {
366    let popupHtml = generatePopup(relay, index);
367    let relayIcon = L.icon({
368      iconUrl: "images/" + relay.IconeLogo,
369      iconSize: [25, 25]
370    });
371    let poiHtmlList = generatePoisSimpleList(relay, index);
372    let relayList = $("#relayList");
373    let currentList = relayList.html();
374
375    if (relay.AffichageLien !== "OK") {
376      return;
377    }
378
379    relayList.html(currentList + poiHtmlList);
380
381    $("#selectRelay-" + index).click(function () {
382      selectRelay(relay);
383    });
384
385    let markerIcon = L.icon({
386      iconUrl: "rc/images/" + relayList.IconeLogo,
387      iconSize: [25, 25],
388      className: "iconMap"
389    });
390
391    if (relay.AffichageLien === "OK") {
392      pinContent = '<div class="labelMap" style="background-image: url(rc/images/' + relay.IconeLogo + ')" title="' + relay.Nomdepositaire + '"><b class="pins">' + (index + 1) + '</b></div>';
393    } else {
394      pinContent = '<div class="labelMapFerme" style="background-image: url(rc/images/' + relay.IconeLogo + ')" title="' + relay.Nomdepositaire + '"><b class="pins">' + (index + 1) + '</b></div>';
395    }
396
397    let markerText = L.divIcon(
398      {
399        className: "text",
400        permanent: true,
401        html: pinContent,
402        iconSize: [25, 25]
403      }
404    );
405    let label = L.marker([relay.Lat, relay.Lon], { icon: markerText });
406    label.bindPopup(popupHtml);
407    markerList.push(label);
408  });
409
410  if (markerList.length > 0) {
411    let group = L.featureGroup(markerList).addTo(map);
412    map.fitBounds(group.getBounds());
413  }
414}
415
416function generatePopup(relay, index) {
417  var poiShowing = relay.AffichageLien;
418  var poiUrl = generateUrl(relay);
419  var poiHTML = "<div class='card mb-3'>"
420    + "<div class='row g-0'>"
421    + "<div class='col-md-5'>"
422    + "<img id='relais_img' class='relais_img' title='photo du relais' src='" + relay.Photopath + "'  alt='photo du relais' />"
423    + "</div>"
424    + "<div class='col-md-7'>"
425    + "<div class='card-body'>"
426    + "<h5 class='card-title'><div class='nomrelais'>"
427    + relay.Nomdepositaire.toUpperCase() + " (" + relay.Distance + "m)"
428    + "</div>" + "</h5 >"
429    + "<p class='card-text cardText'>" + relay.Geocoadresse + "</p>"
430    + "<p class='card-text cardText'>" + relay.Postalcode + " " + relay.Commune + "</p>"
431    + "</div>"
432    + "</div>"
433    + "</div>"
434    + "</div ></br>";
435
436  poiHTML += "<table class='tableH horaire'>"
437    + "<tr><td colspan='3'><b>Horaires d'ouverture</b></td></tr>"
438    + "<tr><td class='jour'>Lundi</td><td class='tdhoraire'>" + relay.Horairelundimatin.replace('-',' - ') + "</td><td class='tdhoraire'>" + relay.Horairelundiapm.replace('-',' - ') + "</td></tr>"
439    + "<tr><td class='jour'>Mardi</td><td class='tdhoraire'>" + relay.Horairemardimatin.replace('-',' - ') + "</td><td class='tdhoraire'>" + relay.Horairemardiapm.replace('-',' - ') + "</td></tr>"
440    + "<tr><td class='jour'>Mercredi</td><td class='tdhoraire'>" + relay.Horairemercredimatin.replace('-',' - ') + "</td><td class='tdhoraire'>" + relay.Horairemercrediapm.replace('-',' - ') + "</td></tr>"
441    + "<tr><td class='jour'>Jeudi</td><td class='tdhoraire'>" + relay.Horairejeudimatin.replace('-',' - ') + "</td><td class='tdhoraire'>" + relay.Horairejeudiapm.replace('-',' - ') + "</td></tr>"
442    + "<tr><td class='jour'>Vendredi</td><td class='tdhoraire'>" + relay.Horairevendredimatin.replace('-',' - ') + "</td><td class='tdhoraire'>" + relay.Horairevendrediapm.replace('-',' - ') + "</td></tr>"
443    + "<tr><td class='jour'>Samedi</td><td class='tdhoraire'>" + relay.Horairesamedimatin.replace('-',' - ') + "</td><td class='tdhoraire'>" + relay.Horairesamediapm.replace('-',' - ') + "</td></tr>"
444    + "<tr><td class='jour'>Dimanche</td><td class='tdhoraire'>" + relay.Horairedimanchematin.replace('-',' - ') + "</td><td class='tdhoraire'>" + relay.Horairedimancheapm.replace('-',' - ') + "</td></tr>";
445
446  if (poiShowing === "OK") {
447    poiHTML += "<tr><td></td><td style='padding-top:10px;text-align:right' colspan='2'>";
448    poiHTML += "<div style=''>

448<a onclick=\"selectRelay(" + index + ")\"><button type='button' class='select-button' style='padding: 4px;border:#C0D248 1px solid; margin-right: 15px;'>"
449      +"<span aria-hidden='true'>S&eacute;lectionner</span>"
450      +"<span class='select-button' style='float:right' aria-hidden='true'></span>"
451      +"</button></a></div>";
452    poiHTML += "</td></tr></table>";
453  } else {
454    poiHTML += "</table>";
455    poiHTML += "<div class='relaisEnConges'>"
456      + "Relais en cong&eacute;s du " + relay.Datefermeture + " au " + relay.Datepremiercolis + "</div>";
457  }
458
459  return poiHTML;
460}
461
462function poiLocate(lat, lon) {
463  map.setView([lat, lon]);
464}
465
466function generatePoisSimpleList(relay, index) {
467  let poiShowing = relay.AffichageLien;
468  let poiUrl = generateUrl(relay);
469  let poiHTMLList = '';
470
471  poiHTMLList += '<div class="card">' +
472    '<div class="row">' +
473    '<div class="col-sm-6">' +
474    '<h5>' +
475    '<span class="badge badge-relay" style="margin-right: 5px; cursor: pointer;" onclick="javascript:poiLocate(\'' + relay.Lat + '\', \'' + relay.Lon + '\');">' + (index + 1) + '</span>' +
476    relay.Nomrelais.toUpperCase() + ' (' + relay.Distance + 'm)' +
477    '</h5>' +
478    '<p>' +
479    relay.Geocoadresse + '<br />' +
480    relay.Postalcode + ' ' + relay.Commune +
481    '</p>';
482
483  if (poiShowing === "OK") {
484    poiHTMLList += '<button type="button" class="btn btn-primary selectButton" onclick="selectRelay(' + index + ')">Choisir ce point relais</button>';
485  } else {
486    poiHTMLList += '<b>Relais en cong&eacute;s du ' + relay.Datefermeture + ' au ' + relay.Datepremiercolis + '</b>';
487  }
488
489  poiHTMLList += '</div>' +
490    '<div class="col-sm-6">' +
491    '<h6>Horaires d\'ouverture</h6>' +
492    '<table style="width: 100%;">' +
493    '<tbody>' +
494    '<tr><td>Lundi</td><td>' + relay.Horairelundimatin.replace('-', ' - ') + '</td><td>' + relay.Horairelundiapm.replace('-', ' - ') + '</td></tr>' +
495    '<tr><td>Mardi</td><td>' + relay.Horairemardimatin.replace('-', ' - ') + '</td><td>' + relay.Horairemardiapm.replace('-', ' - ') + '</td></tr>' +
496    '<tr><td>Mercredi</td><td>' + relay.Horairemercredimatin.replace('-', ' - ') + '</td><td>' + relay.Horairemercrediapm.replace('-', ' - ') + '</td></tr>' +
497    '<tr><td>Jeudi</td><td>' + relay.Horairejeudimatin.replace('-', ' - ') + '</td><td>' + relay.Horairejeudiapm.replace('-', ' - ') + '</td></tr>' +
498    '<tr><td>Vendredi</td><td>' + relay.Horairevendredimatin.replace('-', ' - ') + '</td><td>' + relay.Horairevendrediapm.replace('-', ' - ') + '</td></tr>' +
499    '<tr><td>Samedi</td><td>' + relay.Horairesamedimatin.replace('-', ' - ') + '</td><td>' + relay.Horairesamediapm.replace('-', ' - ') + '</td></tr>' +
500    '<tr><td>Dimanche</td><td>' + relay.Horairedimanchematin.replace('-', ' - ') + '</td><td>' + relay.Horairedimancheapm.replace('-', ' - ') + '</td></tr>' +
501    '</tbody>' +
502    '</table>' +
503    '</div>' +
504    '</div>' +
505    '</div>';
506
507  return poiHTMLList;
508}
509
510function generateUrl(relay) {
511  return "&relaisAdresse=" + escape(relay.Geocoadresse)
512    + "&relaisCodePostal=" + relay.Postalcode + "&relaisCity=" + relay.Commune
513    + "&ouvLun=" + relay.Horairelundimatin + "@" + relay.Horairelundiapm
514    + "&ouvMar=" + relay.Horairemardimatin + "@" + relay.Horairemardiapm
515    + "&ouvMer=" + relay.Horairemercredimatin + "@" + relay.Horairemercrediapm
516    + "&ouvJeu=" + relay.Horairejeudimatin + "@" + relay.Horairejeudiapm
517    + "&ouvVen=" + relay.Horairevendredimatin + "@" + relay.Horairevendrediapm
518    + "&ouvSam=" + relay.Horairesamedimatin + "@" + relay.Horairesamediapm
519    + "&ouvDim=" + relay.Horairedimanchematin + "@" + relay.Horairedimancheapm
520    + "&pseudoRvc=" + relay.Pseudorvc
521    + "&adresseClient=" + escape($("#addressSearch").val())
522    + "&relaisColisMax=" + parOnlyMaxRelays
523    + "&relaisCodeCountry=" + relay.countryISO
524    + "&adresseCodeCountry=" + relay.AgenceCountryISO
525    + "&agenceCode=" + relay.Agencecode + "&agenceNom=" + relay.Agencenom
526    + "&agenceAdresse=" + relay.Agenceadresse1 + " " + relay.Agenceadresse2
527    + "&agenceCity=" + relay.Agenceville
528    + "&agenceCodePostal=" + relay.Agencecodepostal;
529}
530
531function selectRelay(index) {
532  let relay = allRelays[index];
533
534  $('input[name="rc_xeett_id"]').val(relay.Xeett);
535  $('input[name="rc_relay_name"]').val(relay.Nomrelais.toUpperCase());
536  $('input[name="rc_relay_address"]').val(relay.Geocoadresse.toUpperCase());
537  $('input[name="rc_relay_zip"]').val(relay.Postalcode);
538  $('input[name="rc_relay_city"]').val(relay.Commune.toUpperCase());
539  $('input[name="rc_relay_country"]').val(relay.countryISO);
540
541  $('#sr-photo').attr("style", "background-image: url('" + relay.Photopath + "'); background-size: cover;");
542  $('#sr-name').html(relay.Nomrelais.toUpperCase() + "(" + relay.Distance + "m)");
543  $('#sr-address').html(relay.Geocoadresse);
544  $('#sr-zip-city').html(relay.Postalcode + " " + relay.Commune);
545  $('#sr-lunmat').html(relay.Horairelundimatin.replace('-', ' - '));
546  $('#sr-lunapm').html(relay.Horairelundiapm.replace('-', ' - '));
547  $('#sr-marmat').html(relay.Horairemardimatin.replace('-', ' - '));
548  $('#sr-marapm').html(relay.Horairemardiapm.replace('-', ' - '));
549  $('#sr-mermat').html(relay.Horairemercredimatin.replace('-', ' - '));
550  $('#sr-merapm').html(relay.Horairemercrediapm.replace('-', ' - '));
551  $('#sr-jeumat').html(relay.Horairejeudimatin.replace('-', ' - '));
552  $('#sr-jeuapm').html(relay.Horairejeudiapm.replace('-', ' - '));
553  $('#sr-venmat').html(relay.Horairevendredimatin.replace('-', ' - '));
554  $('#sr-venapm').html(relay.Horairevendrediapm.replace('-', ' - '));
555  $('#sr-sammat').html(relay.Horairesamedimatin.replace('-', ' - '));
556  $('#sr-samapm').html(relay.Horairesamediapm.replace('-', ' - '));
557  $('#sr-dimmat').html(relay.Horairedimanchematin.replace('-', ' - '));
558  $('#sr-dimapm').html(relay.Horairedimancheapm.replace('-', ' - '));
559  $('#selectedRelay').show();
560  $('#search').hide();
561  $('#map').hide();
562  $('#relayList').hide();
563}
564
565function changeRelay() {
566  $('#selectedRelay').hide();
567  $('#search').show();
568  $('#map').show();
569  $('#relayList').show();
570  $('input[name="rc_xeett_id"]').val('');
571  $('input[name="rc_relay_name"]').val('');
572  $('input[name="rc_relay_address"]').val('');
573  $('input[name="rc_relay_zip"]').val('');
574  $('input[name="rc_relay_city"]').val('');
575  $('input[name="rc_relay_country"]').val('');
576}
577
578function hideLocation(hide) {
579  if (hide) {
580    $("#location").hide();
581  } else {
582    $("#location").show();
583  }
584}