Update map on trip planner list

Add anchors around the phone numbers and apply the formatting.

diff --git a/models/front/itinerary/list.php b/models/front/itinerary/list.php
index 34f5902..ef0a1c6 100755 (executable)
--- a/models/front/itinerary/list.php
+++ b/models/front/itinerary/list.php
@@ -26,12 +26,20 @@ class GlmMembersFront_itinerary_list // extends GlmMembersFront_events_baseActio
      */
     public function modelAction( $actionData = false )
     {
-        $status   = true;
-        $view     = 'list.html';
+        $status  = true;
+        $view    = 'list.html';
+        $members = array();
+
+        if ( isset( $_SESSION['travel-list'] ) ) {
+            foreach ( $_SESSION['travel-list'] as $item ) {
+                $members[] = apply_filters( 'glm-member-get-memberinfo-data', '', $item['ref_dest'] );
+            }
+        }
 
 
         $templateData = array(
             'baseurl' => get_bloginfo( 'url' ),
+            'members' => $members,
         );
 
         error_reporting(E_ALL ^ E_NOTICE);

diff --git a/views/front/itinerary/list.html b/views/front/itinerary/list.html
index 63ab8c1..b873816 100644 (file)
--- a/views/front/itinerary/list.html
+++ b/views/front/itinerary/list.html
@@ -1,3 +1,11 @@
+{* Trip Planner (Itinerary) List page *}
+<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>
+<script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js" integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q==" crossorigin=""></script>
+<link rel="stylesheet" href="{$jsUrl}/LeafletMarkerCluster/dist/MarkerCluster.Default.css" />
+<script src="{$jsUrl}/LeafletMarkerCluster/dist/leaflet.markercluster-src.js"></script>
+<link rel="stylesheet" href="{$jsUrl}/Leaflet.loading/src/Control.Loading.css" />
+<script src="{$jsUrl}/Leaflet.loading/src/Control.Loading.js"></script>
+
 <p>{$settings.itinerary_page_content}</p>
 
 
@@ -8,7 +16,9 @@
             <h2>Sign In:</h2>
         <input type="text" name="username" />
         <input type="password" name="password" />
+        <input type="submit" value="Log in" class="button" />
 
+        <a href="#">Forgot your Password?</a>
         </div>
     </form>
 
@@ -30,21 +40,37 @@
 </div>
 <br clear="all">
 
-<div id="PrintArea">
-    {foreach $smarty.session['travel-list'] as $record}
-        <div class="glm-itinerary-list-item" style="border:1px solid black; padding: 10px; margin: 10px;">
-            {$data = apply_filters('glm-member-get-memberinfo-data', '', $record.ref_dest)}
-            <a href="#" class="dashicons dashicons-trash glm-itinerary-delete" data-id="{$data.member}" data-baseurl="{$baseurl}" style="float:right;" alt="Remove"></a>
-            <h4 style="width:90%; clear: none;">{$data.member_name}</h4>
+<div id="glm-locationMap-container">
+    <div id="LeafletMapContainer" style="height: 400px; width: 90%; border: 1px black solid; z-index: +0; margin: 0 auto;"></div>
+</div>
+
+{if $members}
+    {foreach $members as $data}
+        <div id="map_info_{$data.id}" class="glm-hidden">
+            <strong>{$data.member_name}</strong>
             <div>
                 {$data.addr1}<br>
                 {$data.city}, {$data.state} {$data.zip}<br>
-                {if $data.phone}Phone: {$data.phone}<br>{/if}
+                {if $data.phone}Phone:  <a href="tel:{apply_filters('glm_associate_phone_filter_tel', $data.phone)}">{apply_filters('glm_associate_phone_filter', $data.phone)}</a><br>{/if}
                 {if $data.url}<a href="{$data.url}">Website</a><br>{/if}
             </div>
         </div>
     {/foreach}
-</div>
+    <div id="PrintArea">
+        {foreach $members as $data}
+            <div class="glm-itinerary-list-item" style="border:1px solid black; padding: 10px; margin: 10px;">
+                <a href="#" class="dashicons dashicons-trash glm-itinerary-delete" data-id="{$data.member}" data-baseurl="{$baseurl}" style="float:right;" alt="Remove"></a>
+                <h4 style="width:90%; clear: none;">{$data.member_name}</h4>
+                <div>
+                    {$data.addr1}<br>
+                    {$data.city}, {$data.state} {$data.zip}<br>
+                    {if $data.phone}Phone: <a href="tel:{apply_filters('glm_associate_phone_filter_tel', $data.phone)}">{apply_filters('glm_associate_phone_filter', $data.phone)}</a><br>{/if}
+                    {if $data.url}<a href="{$data.url}">Website</a><br>{/if}
+                </div>
+            </div>
+        {/foreach}
+    </div>
+{/if}
 <script src="{$jsUrl}/PrintArea/jquery.PrintArea.js" type="text/JavaScript" language="javascript"></script>
 <script>
     jQuery(document).ready(function($){
@@ -64,5 +90,104 @@
                 strict:     false      // strict or looseTransitional html 4.01 document standard or undefined to not include at all only for popup option
             });
         });
+
+        /*
+         *  Leaflet Map
+         *  API reference: https://leafletjs.com/reference-1.3.2.html
+         */
+
+        /*
+         * Map operations
+         */
+
+        var startLat = $('#glmLat').val();
+        var startLon = $('#glmLng').val();
+        var defZoom = Number({$settings.maps_default_zoom});
+
+        function initMap() {
+
+            var leafletMap = L.map('LeafletMapContainer').setView([{$settings.maps_default_lat}, {$settings.maps_default_lon}], defZoom);
+            var leafletTileServer = '{$settings.leaflet_tile_server}/{$settings.leaflet_tile_server_key}/' + {literal}'{z}/{x}/{y}.png'{/literal};
+            var leafletMinZoom = 3;
+            var leafletMaxZoom = 19;
+            var clusterRadiusMax = 40;
+            var geocoder;
+
+            // Loading features
+            var loadingControl = L.Control.loading({
+                separate: true,
+                delayIndicator: 500
+            });
+            leafletMap.addControl(loadingControl);
+
+            // Init Map
+            L.tileLayer(leafletTileServer, {
+               attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.gaslightmedia.com/">Gaslight Media</a>',
+               minZoom: leafletMinZoom,
+               maxZoom: leafletMaxZoom,
+               id: 'nothot'
+            }).addTo(leafletMap);
+
+
+            {if $members}
+
+                var markerGroup = L.markerClusterGroup({
+                    maxClusterRadius: clusterRadiusMax
+                });
+
+                var mapContainerWidth = Number(leafletMap._container.clientWidth);
+                var maxPopupWidth = .65 * mapContainerWidth;
+                if (maxPopupWidth > 600) {
+                    maxPopupWidth = 600;
+                }
+                var mapContainerHeight = Number(leafletMap._container.clientHeight);
+                var maxPopupHeight = .7 * mapContainerHeight;
+
+                {foreach $members as $m}
+                    {if $m.lat != 0 && $m.lon != 0}
+
+                    // Create marker for this member and and to Feature Group
+                    var leafletMarker = L.marker([{$m.lat}, {$m.lon}], { title:  '{$m.member_name|escape:quotes}' })
+                    .bindPopup($('#map_info_' + {$m.id}).html(), {
+                        maxWidth: maxPopupWidth,
+                        maxHeight: maxPopupHeight
+                    })
+                    .addTo(markerGroup);
+
+                    {/if}
+                {/foreach}
+
+                leafletMap.addLayer(markerGroup);
+
+                // Get outer bounds of all markers in the Feature Group
+                leafletMap.fitBounds(markerGroup.getBounds());
+            {/if}
+
+            // When a marker is clicked, display the pop-up near the center of the map.
+
+            leafletMap.on('popupopen', function(e) {
+                var px = leafletMap.project(e.popup._latlng);
+                px.x -= 20;                                         // Bump a bit to the right to avoid resize buttons
+                px.y -= e.popup._container.clientHeight/2;          // Position more toward the center
+                leafletMap.panTo(leafletMap.unproject(px),{ animate: true });
+            });
+
+
+        }
+
+        var mapInitialized = false;
+        $("#glm-member-list-map-toggle").click( function() {
+            $(".glm-member-db-{$view}-view").toggleClass("map-opened");
+            $(".glm-member-db-{$view}-view").toggleClass("map-closed");
+            if (!mapInitialized) {
+                initMap();
+                mapInitialized = true;
+            }
+        });
+
+        // Start with Map opened
+        initMap();
+        mapInitialized = true;
+
     });
 </script>