PointRetrait : On avance pas mal sur le frontOffice

local/modules/PointRetrait/Config/config.xml

@@ -8,6 +8,7 @@
         <!-- Global hook class -->
         <hook id="pdr.css.hook" class="PointRetrait\Hook\CssHook">
             <tag name="hook.event_listener" event="main.head-css" type="back" method="onAddCss"/>
+            <tag name="hook.event_listener" event="main.stylesheet" type="front" method="onAddCss"/>
         </hook>
 
         <hook id="pdr.admin.hook" class="PointRetrait\Hook\AdminHook">

local/modules/PointRetrait/Config/module.xml

@@ -25,7 +25,4 @@
     <stability>beta</stability>
     <mandatory>0</mandatory>
     <hidden>0</hidden>
-    <required>
-        <module version="~1.0">PlanificationLivraison</module>
-    </required>
 </module>

local/modules/PointRetrait/Loop/GeneralLoop.php

@@ -72,7 +72,9 @@ class GeneralLoop extends BaseLoop implements PropelSearchLoopInterface
     {
         return new ArgumentCollection(
             Argument::createIntListTypeArgument('id'),
-            Argument::createIntListTypeArgument('active')
+            Argument::createIntListTypeArgument('active'),
+            Argument::createEnumListTypeArgument('order',
+                ['city', 'title'], 'title')
         );
     }
 
@@ -91,7 +93,19 @@ class GeneralLoop extends BaseLoop implements PropelSearchLoopInterface
             $places->filterByActive($active);
         }
 
-        return $places->orderByTitle();
+        foreach ($this->getOrder() as $order) {
+            switch ($order) {
+                case 'title':
+                    $places->orderByTitle();
+                    break;
+                case 'city':
+                    $places->orderByZipcode()->orderByCity()->orderByAddress1();
+                    break;
+            }
+
+        }
+
+        return $places;
     }
 
 }

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

@@ -184,7 +184,7 @@
 
         <div class="row">
             <div class="col-md-12">
-                <script src="https://maps.googleapis.com/maps/api/js?key={module_config module='PlanificationLivraison' key='planiflivraison_googlemap_api_key' locale='en_US'}&callback=initMap&libraries=&v=weekly" async></script>
+                <script src="https://maps.googleapis.com/maps/api/js?key={module_config module='PlanificationLivraison' key='googlemap_api_key' locale='en_US'}&callback=initMap&libraries=&v=weekly" async></script>
                 <div id="map" class="locationMap"></div>
             </div>
         </div>

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

@@ -27,17 +27,17 @@
         </thead>
         <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/drapeau-vert.png'}"}
-                {assign var=alt value='Drapeau vert'}
-            {/if}
-            {if $DELTA <= 4}
-                {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/drapeau-rouge.png'}"}
+            {if $DELTA <= {module_config module="PlanificationLivraison" key='delay_red_alert' locale="en_US"}}
+                {assign var=path value="{image file='assets/img/drapeau-rouge.png' source='PlanificationLivraison'}"}
                 {assign var=alt value='Drapeau rouge'}
+            {else}
+                {if $DELTA <= {module_config module="PlanificationLivraison" key='delay_orange_alert' locale="en_US"}}
+                    {assign var=path value="{image file='assets/img/drapeau-orange.png' source='PlanificationLivraison'}"}
+                    {assign var=alt value='Drapeau orange'}
+                {else}
+                    {assign var=path value="{image file='assets/img/drapeau-vert.png' source='PlanificationLivraison'}"}
+                    {assign var=alt value='Drapeau vert'}
+                {/if}
             {/if}
             {assign var=title value="{$DELTA} jour(s) de délai"}
 

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

@@ -0,0 +1,65 @@
+.custom-map-control-button {
+    appearance: button;
+    background-color: #fff;
+    border: 0;
+    border-radius: 2px;
+    box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
+    cursor: pointer;
+    margin: 10px;
+    padding: 0 0.5em;
+    height: 40px;
+    font: 400 18px Roboto, Arial, sans-serif;
+    overflow: hidden;
+}
+.custom-map-control-button:hover {
+    background: #ebebeb;
+}
+
+.locationMap {
+    height:450px;
+    width:100%;
+}
+
+.legende {
+    margin-top: 25px;
+    text-align: center;
+    font-style: italic;
+}
+
+.pin-pdr {
+    height: 25px;
+    margin-left: 12px;
+}
+
+tr .ligne > td {
+    border: 1px solid gray !important;
+}
+
+.ligne > td {
+   padding: 5px !important;
+}
+
+.creneau > td {
+    text-align: left !important;
+    font-size: 1.2rem;
+}
+
+.titre {
+    font-size: 1.6rem;
+    color: red;
+    font-weight: 600;
+}
+
+.adresse {
+    font-size: 1.4rem;
+}
+
+.table-main {
+    margin-bottom: 0 !important;
+}
+
+.table-schedule {
+    background-color: #aeaeae !important;
+    color: white !important;
+    border-color: #aeaeae !important;
+}

local/modules/PointRetrait/templates/frontOffice/default/order-delivery-extra.html

@@ -20,38 +20,49 @@
             <div class="col-sm-4">&nbsp;</div>
         </div>
 
-        <div class="row">
-            <div class="col-md-5">
-                <div id="select-pdr">
-                {form name="thelia.order.delivery"}
-                    <div class="table-responsive" style="border: 1px solid gray">
-                        <table class="table table-striped table-condensed">
-                        {loop type="pdr_places" name="places-loop" active=true}
-                            <tr>
-                                <td>
-                                    <span class="">{$TITLE}</span><br>
-                                    <span class="">{$ADDRESS1}</span><br>
-                                    <span class="">{$ZIPCODE} {$CITY}</span><br>
-                                    <table class="table">
-                                    {loop type="pdr_schedule" name="schedule-loop" place_id={$ID}}
-                                        <tr>
-                                            <td style="padding:10px; text-align: center">{$DAY_LABEL} {format_date date=$BEGIN format="H\hi"} à {format_date date=$END format="H\hi"}</td>
-                                            <td style="padding:10px; text-align: center"><input type="radio" name="lps-choosen-day" value="{$ID}"{if {cart attr='total_taxed_price_without_discount'} < $minimum} disabled{/if} /></td>
-                                        </tr>
-                                    {/loop}
-                                    </table>
-                                </td>
-                            </tr>
-                        {/loop}
-                        </table>
-                    </div>
-                {/form}
+        <div class="row" id="select-pdr">
+            <div class="col-md-4">
+            {form name="thelia.order.delivery"}
+                <div class="table-responsive" style="border: 1px solid gray">
+                    <table class="table table-condensed table-main">
+                    {loop type="pdr_places" name="places-loop" active=true order="city"}
+                        <tr class="ligne">
+                            <td>
+                                <span class="titre">({$ID}) {$TITLE}</span><br>
+                                <span class="adresse">{$ADDRESS1}</span><br>
+                                <span class="adresse">{$ZIPCODE} {$CITY}</span><br>
+                                <table class="table table-schedule">
+                                {loop type="pdr_schedule" name="schedule-loop" place_id={$ID}}
+                                    <tr class="creneau">
+                                        <td style="padding:10px; text-align: center">{$DAY_LABEL} {format_date date=$BEGIN format="H\hi"} à {format_date date=$END format="H\hi"}</td>
+                                        <td style="padding:10px; text-align: center"><input type="radio" name="lps-choosen-day" value="{$ID}"{if {cart attr='total_taxed_price_without_discount'} < $minimum} disabled{/if} /></td>
+                                    </tr>
+                                {/loop}
+                                </table>
+                            </td>
+                        </tr>
+                    {/loop}
+                    </table>
                 </div>
+            {/form}
             </div>
-            <div class="col-md-7">
-                <div id="mondialrelay_map" style="width: 100%; height: 450px;">
+            <div class="col-md-8">
+                <input type="hidden" id="map-center-lat" value={{module_config module='PlanificationLivraison' key='map_center_latitude' locale='en_US'}|default:50.75075530537203} />
+                <input type="hidden" id="map-center-lon" value={{module_config module='PlanificationLivraison' key='map_center_longitude' locale='en_US'}|default:2.252608244005041} />
+
+                <table id="coordinates" class="hidden">
+                    {loop type="pdr_places" name="places-loop" active=true order="city"}
+                    <tr>
+                        <td>{$ID}
+                        <td>{$LATITUDE}</td>
+                        <td>{$LONGITUDE}</td>
+                        <td>{$TITLE}</td>
+                    </tr>
+                    {/loop}
+                </table>
+
+                <div id="pdr_map" class="locationMap">
             </div>
-        </div>
     </td>
 
 </script>
@@ -87,9 +98,52 @@
     function loadScript() {
         var script = document.createElement('script');
         script.type = 'text/javascript';
-        script.src = "https://maps.googleapis.com/maps/api/js?callback=mondialRelaySetup&key={config key='planiflivraison_googlemap_api_key'}";
+        script.src = "https://maps.googleapis.com/maps/api/js?callback=initMap" +
+                     "&key={module_config module='PlanificationLivraison' key='googlemap_api_key' locale='en_US'}";
         document.body.appendChild(script);
     }
 
+    function initMap() {
+        var opt = {
+            center: new google.maps.LatLng($("#map-center-lat").val(), $("#map-center-lon").val()),
+            zoom: 12,
+            streetViewControl: false,
+            mapTypeControl: false
+        };
+
+        Data.map = new google.maps.Map(document.getElementById('pdr_map'), opt);
+        Data.geocoder = new google.maps.Geocoder();
+
+        displayPins();
+    }
+
+    function displayPins() {
+        var arrays = [];
+        $('#coordinates').eq(0).find('tr').each((r,row) => arrays.push($(row).find('td,th').map((c,cell) => $(cell).text()).toArray()))
+
+        arrays.forEach(function(place) {
+            var marker = new google.maps.Marker({
+                title: place[3],
+                label: place[0],
+                position: new google.maps.LatLng(place[1], place[2]),
+                map: Data.map
+            });
+        });
+    }
+
+    /*********************************************************/
+
+    var Data = {
+        markers: [],
+        map: null,
+        geocoder: null,
+        bounds: null
+    };
+
+    if (typeof(google) === 'undefined') {
+        loadScript();
+    } else {
+        initMap();
+    }
 
 </script>