Add Location Picker

CHANGELOG.md

@@ -5,6 +5,7 @@
 ## 2024.3.22
 
 - Fix Broadcast Message by @Focuslinkstech
+- Add Location Picker
 
 ## 2024.3.20
 

system/controllers/customers.php

@@ -16,6 +16,10 @@ if (empty ($action)) {
     $action = 'list';
 }
 
+$leafletpickerHeader = <<<EOT
+<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css">
+EOT;
+
 switch ($action) {
     case 'list':
         $search = _post('search');
@@ -89,6 +93,7 @@ switch ($action) {
         if (!in_array($admin['user_type'], ['SuperAdmin', 'Admin', 'Agent', 'Sales'])) {
             _alert(Lang::T('You do not have permission to access this page'), 'danger', "dashboard");
         }
+        $ui->assign('xheader', $leafletpickerHeader);
         run_hook('view_add_customer'); #HOOK
         $ui->display('customers-add.tpl');
         break;
@@ -210,7 +215,6 @@ switch ($action) {
             $customFields = ORM::for_table('tbl_customers_fields')
                 ->where('customer_id', $customer['id'])
                 ->find_many();
-          
             $v = $routes['3'];
             if (empty ($v)) {
                 $v = 'activation';
@@ -260,6 +264,7 @@ switch ($action) {
         if ($d) {
             $ui->assign('d', $d);
             $ui->assign('customFields', $customFields);
+            $ui->assign('xheader', $leafletpickerHeader);
             $ui->display('customers-edit.tpl');
         } else {
             r2(U . 'customers/list', 'e', $_L['Account_Not_Found']);

system/lan/english.json

@@ -534,5 +534,6 @@
     "20_Seconds": "20 Seconds",
     "Use_at_least_5_secs_if_you_are_sending_to_all_customers_to_avoid_being_banned_by_your_message_provider": "Use at least 5 secs if you are sending to all customers to avoid being banned by your message provider",
     "Testing__if_checked_no_real_message_is_sent_": "Testing [if checked no real message is sent]",
-    "All_fields_are_required": "All fields are required"
+    "All_fields_are_required": "All fields are required",
+    "Personal": "Personal"
 }

ui/ui/customers-add.tpl

@@ -11,10 +11,10 @@
                         <div class="col-md-9">
                             <div class="input-group">
                                 {if $_c['country_code_phone']!= ''}
-                                <span class="input-group-addon" id="basic-addon1">+</span>
+                                    <span class="input-group-addon" id="basic-addon1">+</span>
                                 {else}
-                                <span class="input-group-addon" id="basic-addon1"><i
-                                        class="glyphicon glyphicon-phone-alt"></i></span>
+                                    <span class="input-group-addon" id="basic-addon1"><i
+                                            class="glyphicon glyphicon-phone-alt"></i></span>
                                 {/if}
                                 <input type="text" class="form-control" name="username" required
                                     placeholder="{if $_c['country_code_phone']!= ''}{$_c['country_code_phone']}{/if} {Lang::T('Phone Number')}">
@@ -38,10 +38,10 @@
                         <div class="col-md-9">
                             <div class="input-group">
                                 {if $_c['country_code_phone']!= ''}
-                                <span class="input-group-addon" id="basic-addon1">+</span>
+                                    <span class="input-group-addon" id="basic-addon1">+</span>
                                 {else}
-                                <span class="input-group-addon" id="basic-addon1"><i
-                                        class="glyphicon glyphicon-phone-alt"></i></span>
+                                    <span class="input-group-addon" id="basic-addon1"><i
+                                            class="glyphicon glyphicon-phone-alt"></i></span>
                                 {/if}
                                 <input type="text" class="form-control" name="phonenumber"
                                     placeholder="{if $_c['country_code_phone']!= ''}{$_c['country_code_phone']}{/if} {Lang::T('Phone Number')}">
@@ -73,17 +73,6 @@
                             <textarea name="address" id="address" class="form-control"></textarea>
                         </div>
                     </div>
-                    <div class="form-group">
-                        <label class="col-md-3 control-label">{Lang::T('Coordinates')}</label>
-                        <div class="col-md-9">
-                            <input name="coordinates" id="coordinates" class="form-control" value=""
-                                placeholder="6.465422, 3.406448">
-                            <span class="help-block">
-                                <small>{Lang::T('Latitude and Longitude coordinates for map must be separate with comma
-                                    ","')}</small>
-                            </span>
-                        </div>
-                    </div>
                     <div class="form-group">
                         <label class="col-md-3 control-label">{Lang::T('Service Type')}</label>
                         <div class="col-md-9">
@@ -102,7 +91,15 @@
                                 <option value="Personal">Personal
                                 </option>
                                 <option value="Business">Business</option>
-                             </select>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label class="col-md-3 control-label">{Lang::T('Coordinates')}</label>
+                        <div class="col-md-9">
+                            <input name="coordinates" id="coordinates" class="form-control" value=""
+                                placeholder="6.465422, 3.406448">
+                                <div id="map" style="width: '100%'; height: 200px; min-height: 150px;"></div>
                         </div>
                     </div>
                 </div>
@@ -132,16 +129,16 @@
     </center>
 </form>
 {literal}
-<script type="text/javascript">
-    document.addEventListener("DOMContentLoaded", function () {
-        var customFieldsContainer = document.getElementById('custom-fields-container');
-        var addCustomFieldButton = document.getElementById('add-custom-field');
+    <script type="text/javascript">
+        document.addEventListener("DOMContentLoaded", function() {
+            var customFieldsContainer = document.getElementById('custom-fields-container');
+            var addCustomFieldButton = document.getElementById('add-custom-field');
 
-        addCustomFieldButton.addEventListener('click', function () {
-            var fieldIndex = customFieldsContainer.children.length;
-            var newField = document.createElement('div');
-            newField.className = 'form-group';
-            newField.innerHTML = `
+            addCustomFieldButton.addEventListener('click', function() {
+                var fieldIndex = customFieldsContainer.children.length;
+                var newField = document.createElement('div');
+                newField.className = 'form-group';
+                newField.innerHTML = `
                 <div class="col-md-4">
                     <input type="text" class="form-control" name="custom_field_name[]" placeholder="Name">
                 </div>
@@ -152,17 +149,53 @@
                     <button type="button" class="remove-custom-field btn btn-danger btn-sm">-</button>
                 </div>
             `;
-            customFieldsContainer.appendChild(newField);
-        });
+                customFieldsContainer.appendChild(newField);
+            });
 
-        customFieldsContainer.addEventListener('click', function (event) {
-            if (event.target.classList.contains('remove-custom-field')) {
-                var fieldContainer = event.target.parentNode.parentNode;
-                fieldContainer.parentNode.removeChild(fieldContainer);
-            }
+            customFieldsContainer.addEventListener('click', function(event) {
+                if (event.target.classList.contains('remove-custom-field')) {
+                    var fieldContainer = event.target.parentNode.parentNode;
+                    fieldContainer.parentNode.removeChild(fieldContainer);
+                }
+            });
         });
-    });
-</script>
+    </script>
+    <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
+    <script>
+        function getLocation() {
+            if (navigator.geolocation) {
+                navigator.geolocation.getCurrentPosition(showPosition);
+            } else {
+                setupMap(51.505, -0.09);
+            }
+        }
+
+        function showPosition(position) {
+            setupMap(position.coords.latitude, position.coords.longitude);
+        }
+
+        function setupMap(lat, lon) {
+            var map = L.map('map').setView([lat, lon], 13);
+            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);
+            map.on('click', function(e){
+                var coord = e.latlng;
+                var lat = coord.lat;
+                var lng = coord.lng;
+                var newLatLng = new L.LatLng(lat, lng);
+                marker.setLatLng(newLatLng);
+                $('#coordinates').val(lat + ',' + lng);
+            });
+        }
+        window.onload = function() {
+            getLocation();
+        }
+    </script>
 {/literal}
 
 

ui/ui/customers-edit.tpl

@@ -12,10 +12,10 @@
                         <div class="col-md-9">
                             <div class="input-group">
                                 {if $_c['country_code_phone']!= ''}
-                                <span class="input-group-addon" id="basic-addon1">+</span>
+                                    <span class="input-group-addon" id="basic-addon1">+</span>
                                 {else}
-                                <span class="input-group-addon" id="basic-addon1"><i
-                                        class="glyphicon glyphicon-phone-alt"></i></span>
+                                    <span class="input-group-addon" id="basic-addon1"><i
+                                            class="glyphicon glyphicon-phone-alt"></i></span>
                                 {/if}
                                 <input type="text" class="form-control" name="username" value="{$d['username']}"
                                     required
@@ -41,10 +41,10 @@
                         <div class="col-md-9">
                             <div class="input-group">
                                 {if $_c['country_code_phone']!= ''}
-                                <span class="input-group-addon" id="basic-addon1">+</span>
+                                    <span class="input-group-addon" id="basic-addon1">+</span>
                                 {else}
-                                <span class="input-group-addon" id="basic-addon1"><i
-                                        class="glyphicon glyphicon-phone-alt"></i></span>
+                                    <span class="input-group-addon" id="basic-addon1"><i
+                                            class="glyphicon glyphicon-phone-alt"></i></span>
                                 {/if}
                                 <input type="text" class="form-control" name="phonenumber" value="{$d['phonenumber']}"
                                     placeholder="{if $_c['country_code_phone']!= ''}{$_c['country_code_phone']}{/if} {Lang::T('Phone Number')}">
@@ -77,16 +77,6 @@
                             <textarea name="address" id="address" class="form-control">{$d['address']}</textarea>
                         </div>
                     </div>
-                    <div class="form-group">
-                        <label class="col-md-3 control-label">{Lang::T('Coordinates')}</label>
-                        <div class="col-md-9">
-                            <input name="coordinates" id="coordinates" class="form-control" value="{$d['coordinates']}">
-                            <span class="help-block">
-                                <small>{Lang::T('Latitude and Longitude coordinates for map must be separate with comma
-                                    ","')}</small>
-                            </span>
-                        </div>
-                    </div>
                     <div class="form-group">
                         <label class="col-md-3 control-label">{Lang::T('Service Type')}</label>
                         <div class="col-md-9">
@@ -98,15 +88,23 @@
                             </select>
                         </div>
                     </div>
-
                     <div class="form-group">
                         <label class="col-md-3 control-label">{Lang::T('Account Type')}</label>
                         <div class="col-md-9">
                             <select class="form-control" id="account_type" name="account_type">
                                 <option value="Personal" {if $d['account_type'] eq 'Personal' }selected{/if}>Personal
                                 </option>
-                                <option value="Business" {if $d['account_type'] eq 'Business' }selected{/if}>Business</option>
-                             </select>
+                                <option value="Business" {if $d['account_type'] eq 'Business' }selected{/if}>Business
+                                </option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label class="col-md-3 control-label">{Lang::T('Coordinates')}</label>
+                        <div class="col-md-9">
+                            <input name="coordinates" id="coordinates" class="form-control" value="{$d['coordinates']}"
+                                placeholder="6.465422, 3.406448">
+                            <div id="map" style="width: '100%'; height: 200px; min-height: 150px;"></div>
                         </div>
                     </div>
                 </div>
@@ -118,20 +116,20 @@
                 <div class="panel-body">
                     <!--Customers Attributes edit start -->
                     {if $customFields}
-                    {foreach $customFields as $customField}
-                    <div class="form-group">
-                        <label class="col-md-4 control-label"
-                            for="{$customField.field_name}">{$customField.field_name}</label>
-                        <div class="col-md-6">
-                            <input class="form-control" type="text" name="custom_fields[{$customField.field_name}]"
-                                id="{$customField.field_name}" value="{$customField.field_value}">
-                        </div>
-                        <label class="col-md-2">
-                            <input type="checkbox" name="delete_custom_fields[]" value="{$customField.field_name}">
-                            Delete
-                        </label>
-                    </div>
-                    {/foreach}
+                        {foreach $customFields as $customField}
+                            <div class="form-group">
+                                <label class="col-md-4 control-label"
+                                    for="{$customField.field_name}">{$customField.field_name}</label>
+                                <div class="col-md-6">
+                                    <input class="form-control" type="text" name="custom_fields[{$customField.field_name}]"
+                                        id="{$customField.field_name}" value="{$customField.field_value}">
+                                </div>
+                                <label class="col-md-2">
+                                    <input type="checkbox" name="delete_custom_fields[]" value="{$customField.field_name}">
+                                    Delete
+                                </label>
+                            </div>
+                        {/foreach}
                     {/if}
                     <!--Customers Attributes edit end -->
                     <!-- Customers Attributes add start -->
@@ -155,16 +153,16 @@
 </form>
 
 {literal}
-<script type="text/javascript">
-    document.addEventListener("DOMContentLoaded", function () {
-        var customFieldsContainer = document.getElementById('custom-fields-container');
-        var addCustomFieldButton = document.getElementById('add-custom-field');
+    <script type="text/javascript">
+        document.addEventListener("DOMContentLoaded", function() {
+            var customFieldsContainer = document.getElementById('custom-fields-container');
+            var addCustomFieldButton = document.getElementById('add-custom-field');
 
-        addCustomFieldButton.addEventListener('click', function () {
-            var fieldIndex = customFieldsContainer.children.length;
-            var newField = document.createElement('div');
-            newField.className = 'form-group';
-            newField.innerHTML = `
+            addCustomFieldButton.addEventListener('click', function() {
+                var fieldIndex = customFieldsContainer.children.length;
+                var newField = document.createElement('div');
+                newField.className = 'form-group';
+                newField.innerHTML = `
                 <div class="col-md-4">
                     <input type="text" class="form-control" name="custom_field_name[]" placeholder="Name">
                 </div>
@@ -175,17 +173,58 @@
                     <button type="button" class="remove-custom-field btn btn-danger btn-sm">-</button>
                 </div>
             `;
-            customFieldsContainer.appendChild(newField);
-        });
+                customFieldsContainer.appendChild(newField);
+            });
 
-        customFieldsContainer.addEventListener('click', function (event) {
-            if (event.target.classList.contains('remove-custom-field')) {
-                var fieldContainer = event.target.parentNode.parentNode;
-                fieldContainer.parentNode.removeChild(fieldContainer);
-            }
+            customFieldsContainer.addEventListener('click', function(event) {
+                if (event.target.classList.contains('remove-custom-field')) {
+                    var fieldContainer = event.target.parentNode.parentNode;
+                    fieldContainer.parentNode.removeChild(fieldContainer);
+                }
+            });
         });
-    });
-</script>
+    </script>
+
+    <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
+    <script>
+        function getLocation() {
+            if (navigator.geolocation) {
+                navigator.geolocation.getCurrentPosition(showPosition);
+            } else {
+                setupMap(51.505, -0.09);
+            }
+        }
+
+        function showPosition(position) {
+            setupMap(position.coords.latitude, position.coords.longitude);
+        }
+
+        function setupMap(lat, lon) {
+            var map = L.map('map').setView([lat, lon], 13);
+            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);
+        map.on('click', function(e) {
+            var coord = e.latlng;
+            var lat = coord.lat;
+            var lng = coord.lng;
+            var newLatLng = new L.LatLng(lat, lng);
+            marker.setLatLng(newLatLng);
+            $('#coordinates').val(lat + ',' + lng);
+        });
+        }
+        window.onload = function() {
+            {/literal}{if $d['coordinates']}
+                setupMap({$d['coordinates']});
+            {else}
+                getLocation();
+            {/if}{literal}
+        }
+    </script>
 {/literal}
 
 {include file="sections/footer.tpl"}

ui/ui/customers-view.tpl

@@ -38,7 +38,7 @@
                     </li>
                     {/if}
                     <li class="list-group-item">
-                        <b>{Lang::T('Coordinates')}</b> <span class="pull-right">{Lang::T($d['coordinates'])}</span>
+                        <b>{Lang::T('Coordinates')}</b> <span class="pull-right">{$d['coordinates']}</span>
                     </li>
                     <!--Customers Attributes view start -->
                     {if $customFields}

ui/ui/map-customer.tpl

@@ -4,42 +4,58 @@
 <div id="map" style="width: '100%'; height: 600px; margin: 20px auto"></div>
 
 {literal}
-<script>
-    window.onload = function() {
-        var map = L.map('map').setView([51.505, -0.09], 13);
-        var group = L.featureGroup().addTo(map);
-        
-        var customers = {/literal}{$customers|json_encode}{literal};
+    <script>
+        function getLocation() {
+            if (navigator.geolocation) {
+                navigator.geolocation.getCurrentPosition(showPosition);
+            } else {
+                setupMap(51.505, -0.09);
+            }
+        }
 
-        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);
+        function showPosition(position) {
+            setupMap(position.coords.latitude, position.coords.longitude);
+        }
 
-        customers.forEach(function(customer) {
-            var name = customer.id;
-            var name = customer.name;
-            var info = customer.info;
-            var coordinates = customer.coordinates;
-            var balance = customer.balance;
-            var address = customer.address;
+        function setupMap(lat, lon) {
+            var map = L.map('map').setView([lat, lon], 13);
+            var group = L.featureGroup().addTo(map);
 
-            // Create a popup for the marker
-            var popupContent = "<strong>Customer Name</strong>: " + name + "<br>" +
-                               "<strong>Customer Info</strong>: " + info + "<br>" +
-                               "<strong>Customer Balance</strong>: " + balance + "<br>" +
-                               "<strong>Address</strong>: " + address + "<br>" +
-                               "<strong>Coordinates</strong>: " + coordinates + "<br>" +
-                               "<a href='{/literal}{$_url}{literal}customers/view/"+ customer.id +"'>More Info</a><br>";
+            var customers = {/literal}{$customers|json_encode}{literal};
 
-            // Add marker to map
-            var marker = L.marker(JSON.parse(coordinates)).addTo(group);
-            marker.bindTooltip(name).bindPopup(popupContent);
-        });
+            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);
 
-        map.fitBounds(group.getBounds());
-    }
-</script>
+            customers.forEach(function(customer) {
+                var name = customer.id;
+                var name = customer.name;
+                var info = customer.info;
+                var coordinates = customer.coordinates;
+                var balance = customer.balance;
+                var address = customer.address;
+
+                // Create a popup for the marker
+                var popupContent = "<strong>Customer Name</strong>: " + name + "<br>" +
+                    "<strong>Customer Info</strong>: " + info + "<br>" +
+                    "<strong>Customer Balance</strong>: " + balance + "<br>" +
+                    "<strong>Address</strong>: " + address + "<br>" +
+                    "<strong>Coordinates</strong>: " + coordinates + "<br>" +
+                    "<a href='{/literal}{$_url}{literal}customers/view/"+ customer.id +"'>More Info</a><br>";
+
+                    // Add marker to map
+                    var marker = L.marker(JSON.parse(coordinates)).addTo(group);
+                marker.bindTooltip(name).bindPopup(popupContent);
+            });
+
+            map.fitBounds(group.getBounds());
+        }
+        window.onload = function() {
+            getLocation();
+        }
+    </script>
 {/literal}
 {include file="sections/footer.tpl"}

version.json

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