PointRetrait : géolocalisation sur la carte

local/modules/Front/Controller/OrderController.php

@@ -23,6 +23,9 @@
 namespace Front\Controller;
 
 use Front\Front;
+use LivraisonParSecteurs\LivraisonParSecteurs;
+use LivraisonParSecteurs\Model\LpsAreaCityQuery;
+use LivraisonParSecteurs\Model\LpsAreaQuery;
 use Propel\Runtime\ActiveQuery\Criteria;
 use Propel\Runtime\Exception\PropelException;
 use Symfony\Component\HttpFoundation\Response as BaseResponse;
@@ -46,6 +49,7 @@ use Thelia\Model\Order;
 use Thelia\Model\OrderProductQuery;
 use Thelia\Model\OrderQuery;
 use Thelia\Module\AbstractDeliveryModule;
+use Thelia\Module\BaseModule;
 use Thelia\Module\Exception\DeliveryException;
 
 /**

local/modules/LivraisonParSecteurs/templates/backOffice/default/includes/area-cities.html

@@ -26,7 +26,7 @@
         height: 30px !important;
     }
 
-    .pin {
+    .pin-lps {
         height: 25px;
         margin-left: 12px;
     }
@@ -82,7 +82,7 @@
                                 {loop name="cities" type="lps_area_cities" area_id="$area_id" order="title"}
                                 <tr>
                                     <td>{$ZIPCODE}</td>
-                                    <td>{$TITLE}{if $LATITUDE eq '' or $LONGITUDE eq ''}<img src="{image file='assets/img/pin.svg'}" title="Pas de coordonnées pour cette commune" alt="Pas de coordonnées" class="pin" />{/if}</td>
+                                    <td>{$TITLE}{if $LATITUDE eq '' or $LONGITUDE eq ''}<img src="{image file='assets/img/pin.svg' source='LivraisonParSecteurs'}" title="Pas de coordonnées pour cette commune" alt="Pas de coordonnées" class="pin-lps" />{/if}</td>
                                     <td class="actions">
                                         <div class="btn-group" role="group">
                                             {loop name="auth-delete" type="auth" role="ADMIN" resource="admin.lps.cities" access="DELETE" module="LivraisonParSecteurs"}

local/modules/LivraisonParSecteurs/templates/backOffice/default/scheduled-deliveries.html

@@ -29,15 +29,15 @@
         <tbody>
         {loop name="deliveries-loop" type="scheduled_deliveries" domicile_ou_retrait="domicile" only_future="true" order="date"}
             {if $DELTA <= 7}
-                {assign var=path value="{image file='/assets/img/flag-green.png'}"}
+                {assign var=path value="{image file='assets/img/drapeau-vert.png'}"}
                 {assign var=alt value='Drapeau vert'}
             {/if}
             {if $DELTA <= 4}
-                {assign var=path value="{image file='/assets/img/flag-orange.png'}"}
+                {assign var=path value="{image file='assets/img/drapeau-orange.png'}"}
                 {assign var=alt value='Drapeau orange'}
             {/if}
             {if $DELTA <= 1}
-                {assign var=path value="{image file='/assets/img/flag-red.png'}"}
+                {assign var=path value="{image file='assets/img/drapeau-rouge.png'}"}
                 {assign var=alt value='Drapeau rouge'}
             {/if}
             {assign var=title value="{$DELTA} jour(s) de délai"}

local/modules/PointRetrait/I18n/fr_FR.php

@@ -10,12 +10,14 @@ return array(
     'Edit a place' => 'Modifier un lieu de retrait',
     'Location set' => 'Coordonnées GPS présentes ?',
     'Main' => 'Généralités',
+    'Message no location' => 'Ce point de retrait ne possède pas de coordonnées GPS : il est conseillé de localiser l\'adresse, pour les clients',
     'Minimum amount' => 'Minimum de commande',
     'Module name' => 'Point de Retrait AuxBieauxLegumes',
     'My places' => 'Point de retrait AuxBieauxLegumes',
     'My withdrawal places' => 'Mes points de retrait AuxBieauxLegumes',
     'Order number' => 'N° de commande',
     'Place' => 'Point de retrait',
+    'Recenter map' => 'Recentrer la carte sur l\'adresse',
     'Revert origin position' => 'Revenir à la position d\'origine',
     'Schedule' => 'Horaires de retrait',
     'Scheduled date' => 'Date de retrait prévue',

local/modules/PointRetrait/templates/backOffice/default/assets/css/styles.css

@@ -42,4 +42,25 @@
     margin-top: 25px;
     text-align: center;
     font-style: italic;
+}
+
+#submit-geoloc {
+    width: 50px;
+    cursor: pointer;
+}
+
+.bouton-geoloc {
+    display: inline-block;
+    align-items: center;
+    margin-top: 25px;
+}
+
+.bouton-geoloc span {
+    font-size: larger;
+    font-weight: 600;
+}
+
+.pin-pdr {
+    height: 25px;
+    margin-left: 12px;
 }

local/modules/PointRetrait/templates/backOffice/default/assets/img/compass.svg

@@ -0,0 +1 @@
+<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><title>Compass</title><path d='M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z' fill='none' stroke='currentColor' stroke-miterlimit='10' stroke-width='32'/><path d='M350.67 150.93l-117.2 46.88a64 64 0 00-35.66 35.66l-46.88 117.2a8 8 0 0010.4 10.4l117.2-46.88a64 64 0 0035.66-35.66l46.88-117.2a8 8 0 00-10.4-10.4zM256 280a24 24 0 1124-24 24 24 0 01-24 24z'/></svg>

local/modules/PointRetrait/templates/backOffice/default/includes/main.html

@@ -23,7 +23,7 @@
         {/form_field}
 
         <div class="row">
-            <div class="col-md-3 form-inline">
+            <div class="col-md-4 form-inline">
                 {form_field form=$form field="title"}
                 <div class="form-group">
                     <label class="control-label" for="{$label_attr.for}">
@@ -66,7 +66,7 @@
                 {/form_field}
             </div>
 
-            <div class="col-md-3">
+            <div class="col-md-4">
                 {form_field form=$form field="minimum_amount"}
                 <div class="form-group form-inline">
                     <label class="control-label" for="{$label_attr.for}">
@@ -80,17 +80,6 @@
                 {/form_field}
             </div>
 
-            <div class="col-md-1">
-                {form_field form=$form field="latitude"}
-                <input type="hidden" value="{$LATITUDE}" id="{$label_attr.for}" name="{$name}">
-                {/form_field}
-                {form_field form=$form field="longitude"}
-                <input type="hidden" value="{$LONGITUDE}" id="{$label_attr.for}" name="{$name}">
-                {/form_field}
-            </div>
-            <input type="hidden" value="{$LATITUDE}" id="origin-latitude" name="origin-latitude">
-            <input type="hidden" value="{$LONGITUDE}" id="origin-longitude" name="origin-longitude">
-
         </div>
 
         <div class="row">
@@ -163,7 +152,7 @@
         </div>
 
         <div class="row">
-            <div class="col-md-10">
+            <div class="col-md-8">
                 {form_field form=$form field="access_comment"}
                 <div class="form-group">
                     <label class="control-label" for="{$label_attr.for}">
@@ -178,8 +167,21 @@
                 {form_error form=$form field="access_comment"}{$message}{/form_error}
                 {/form_field}
             </div>
+            <div class="col-md-4">
+                <div class="bouton-geoloc">
+                    <img src="{image file='assets/img/compass.svg' source='PointRetrait'}" alt="Geolocate" id="submit-geoloc"/>
+                    <span>{intl l="Recenter map" d="pointretrait"}</span>
+                </div>
+                {form_field form=$form field="latitude"}
+                <input type="hidden" value="{$LATITUDE}" id="{$label_attr.for}" name="{$name}">
+                {/form_field}
+                {form_field form=$form field="longitude"}
+                <input type="hidden" value="{$LONGITUDE}" id="{$label_attr.for}" name="{$name}">
+                {/form_field}
+            </div>
         </div>
 
+
         <div class="row">
             <div class="col-md-12">
                 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBb07YA_unrh5w821I1xHxbeYb5KCF_WaM&callback=initMap&libraries=&v=weekly" async></script>

local/modules/PointRetrait/templates/backOffice/default/js/main-js.html

@@ -1,6 +1,7 @@
 <script>
 
-    let map, marker;
+    let map;
+    let marker;
 
 
     function initMap() {
@@ -20,10 +21,12 @@
         };
 
         displayPlace();
+        addListener();
 
-        google.maps.event.addListener(marker, 'dragend', function(evt) {
+
-            $("#latitude").val(evt.latLng.lat());
+        const geocoder = new google.maps.Geocoder();
-            $("#longitude").val(evt.latLng.lng());
+        document.getElementById("submit-geoloc").addEventListener("click", () => {
+            geocodeAddress(geocoder, map);
         });
     }
 
@@ -36,5 +39,39 @@
         });
     }
 
+    function clearMarkers(map) {
+        marker.setMap(map);
+        marker = "";
+    }
+
+    function geocodeAddress(geocoder, resultsMap) {
+        const address = document.getElementById("address1").value + ', ' + document.getElementById("zipcode").value + ' ' + document.getElementById("city").value;
+        geocoder.geocode({ address: address }, (results, status) => {
+            if (status === "OK") {
+
+                clearMarkers(null);
+
+                resultsMap.setCenter(results[0].geometry.location);
+                marker = new google.maps.Marker({
+                    map: resultsMap,
+                    position: results[0].geometry.location,
+                    draggable: true
+                });
+                $("#latitude").val(results[0].geometry.location.lat);
+                $("#longitude").val(results[0].geometry.location.lng);
+                addListener();
+            } else {
+                alert("Geocode was not successful for the following reason: " + status);
+            }
+        });
+    }
+
+    function addListener() {
+        google.maps.event.addListener(marker, 'dragend', function(evt) {
+            $("#latitude").val(evt.latLng.lat());
+            $("#longitude").val(evt.latLng.lng());
+        });
+    }
+
 
 </script>

local/modules/PointRetrait/templates/backOffice/default/place-edit.html

@@ -11,6 +11,9 @@
 {/block}
 
 {block name="main-content"}
+
+<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
+
 <div id="wrapper" class="container">
     {assign "place_id" $smarty.get.place_id}
 
@@ -43,6 +46,8 @@
             {/loop}
         </div>
     </div>
+
+    <input type="hidden" id="message-pas-de-coordonnees" value="{intl l='Message no location' d='pointretrait'}" />
 </div>
 
 {*
@@ -69,6 +74,10 @@
         var hash = location.hash.slice(1);
         if (!hash) hash = "main";
         $('#tabbed-menu a[href="#' + hash + '"]').tab('show');
+
+        if ($("#latitude").val() == '')
+            alert ($('#message-pas-de-coordonnees').val());
+
     });
 </script>
 {/javascripts}

local/modules/PointRetrait/templates/backOffice/default/places-list.html

@@ -49,7 +49,7 @@ mais{extends file="admin-layout.tpl"}
                                     <input type="checkbox" class="link" {if $ACTIVE == 1}checked="checked"{/if}>
                                 </div>
                             </td>
-                            <td>{$ADDRESS1}<br>{$ZIPCODE} {$CITY}</td>
+                            <td>{$ADDRESS1}<br>{$ZIPCODE} {$CITY}{if $LATITUDE eq '' or $LONGITUDE eq ''}<img src="{image file='assets/img/pin.svg' source='PointRetrait'}" title="Pas de coordonnées pour ce point de retrait" alt="Pas de coordonnées" class="pin-pdr" />{/if}</td>
                             <td>{$DELIVERY_DAYS}{if $DELIVERY_DAYS eq ''}<i>{intl l="There is no schedule for this place" d='pointretrait'}</i>{/if}</td>
                             <td>{$PRICE} €</td>
                             <td>{$MINIMUM_AMOUNT} €</td>

local/modules/PointRetrait/templates/backOffice/default/scheduled-withdrawals.html

@@ -28,15 +28,15 @@
         <tbody>
         {loop name="deliveries-loop" type="scheduled_deliveries" domicile_ou_retrait="retrait" only_future="true" order="date"}
             {if $DELTA <= 7}
-                {assign var=path value="{image file='/assets/img/flag-green.png'}"}
+                {assign var=path value="{image file='assets/img/drapeau-vert.png'}"}
                 {assign var=alt value='Drapeau vert'}
             {/if}
             {if $DELTA <= 4}
-                {assign var=path value="{image file='/assets/img/flag-orange.png'}"}
+                {assign var=path value="{image file='assets/img/drapeau-orange.png'}"}
                 {assign var=alt value='Drapeau orange'}
             {/if}
             {if $DELTA <= 1}
-                {assign var=path value="{image file='/assets/img/flag-red.png'}"}
+                {assign var=path value="{image file='assets/img/drapeau-rouge.png'}"}
                 {assign var=alt value='Drapeau rouge'}
             {/if}
             {assign var=title value="{$DELTA} jour(s) de délai"}