show maps on customer view

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 # CHANGELOG
 
+## 2024.3.23
+
+- Maps full height
+- Show Get Directions instead Coordinates
+- Maps Label always show
+
 ## 2024.3.22
 
 - Fix Broadcast Message by @Focuslinkstech

system/controllers/customers.php

@@ -245,6 +245,7 @@ switch ($action) {
             $ui->assign('v', $v);
             $ui->assign('d', $customer);
             $ui->assign('customFields', $customFields);
+            $ui->assign('xheader', $leafletpickerHeader);
             $ui->display('customers-view.tpl');
         } else {
             r2(U . 'customers/list', 'e', $_L['Account_Not_Found']);

ui/ui/customers-view.tpl

@@ -37,14 +37,6 @@
                                 onclick="this.select()">
                         </li>
                     {/if}
-                    {if $d['coordinates']}
-                        <li class="list-group-item">
-                            <b>{Lang::T('Coordinates')}</b> <span class="pull-right">
-                                <a href="https://www.google.com/maps/dir//{$d['coordinates']}/" target="_blank">Get
-                                    Directions</a>
-                            </span>
-                        </li>
-                    {/if}
                     <!--Customers Attributes view start -->
                     {if $customFields}
                         {foreach $customFields as $customField}
@@ -82,6 +74,16 @@
                         <b>{Lang::T('Last Login')}</b> <span
                             class="pull-right">{Lang::dateTimeFormat($d['last_login'])}</span>
                     </li>
+                    {if $d['coordinates']}
+                        <li class="list-group-item">
+                            <b>{Lang::T('Coordinates')}</b> <span class="pull-right">
+                                <i class="glyphicon glyphicon-road"></i> <a style="color: black;"
+                                    href="https://www.google.com/maps/dir//{$d['coordinates']}/" target="_blank">Get
+                                    Directions</a>
+                            </span>
+                            <div id="map" style="width: '100%'; height: 100px;"></div>
+                        </li>
+                    {/if}
                 </ul>
                 <div class="row">
                     <div class="col-xs-4">
@@ -230,4 +232,24 @@
     </div>
 </div>
 
+{if $d['coordinates']}
+{literal}
+<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
+<script>
+    function setupMap(lat, lon) {
+        var map = L.map('map').setView([lat, lon], 17);
+        L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/light_all/{z}/{x}/{y}.png', {
+            attribution:
+                '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
+                subdomains: 'abcd',
+                maxZoom: 20
+        }).addTo(map);
+        var marker = L.marker([lat, lon]).addTo(map);
+    }
+    window.onload = function() {
+        {/literal}setupMap({$d['coordinates']});{literal}
+    }
+</script>
+{/literal}
+{/if}
 {include file="sections/footer.tpl"}

ui/ui/customers.tpl

@@ -18,8 +18,8 @@
                     <div class="col-md-8">
                         <form id="site-search" method="post" action="{$_url}customers/list/">
                             <div class="input-group">
-                                <input type="text" id="search-input" name="search" value="{$search}" class="form-control"
+                                <input type="text" id="search-input" name="search" value="{$search}"
-                                    placeholder="{Lang::T('Search')}...">
+                                    class="form-control" placeholder="{Lang::T('Search')}...">
                                 <div class="input-group-btn">
                                     <button class="btn btn-success" type="submit"><span
                                             class="fa fa-search"></span></button>
@@ -28,8 +28,8 @@
                         </form>
                     </div>
                     <div class="col-md-4">
-                        <a href="{$_url}customers/add" class="btn btn-primary btn-block"><i
+                        <a href="{$_url}customers/add" class="btn btn-primary btn-block"><i class="ion ion-android-add">
-                                class="ion ion-android-add"> </i> {Lang::T('Add New Contact')}</a>
+                            </i> {Lang::T('Add New Contact')}</a>
                     </div>&nbsp;
                 </div>
                 <div class="table-responsive table_mobile">
@@ -83,14 +83,14 @@
 
 <script>
     // Functionality to filter table rows based on admin input
-    document.addEventListener('DOMContentLoaded', function () {
+    document.addEventListener('DOMContentLoaded', function() {
         var searchInput = document.getElementById('search-input');
         var tableRows = document.querySelectorAll('tbody tr');
 
-            searchInput.addEventListener('input', function () {
+        searchInput.addEventListener('input', function() {
             var searchText = this.value.toLowerCase();
 
-                tableRows.forEach(function (row) {
+            tableRows.forEach(function(row) {
                 var rowData = row.textContent.toLowerCase();
 
                 if (rowData.includes(searchText)) {

version.json

@@ -1,3 +1,3 @@
 {
-    "version": "2024.3.22.1"
+    "version": "2024.3.23"
 }