refactor(ui): Improve UI, Upgrade frontend libraries, Fix map

- Upgrade frontend libraries: Bootstrap, Jquery, FontAwesome - Improve profile, fix image input class - Fix map component, Enable GeoLocation
Roskus · Mar 10, 2024 · c1d8305 · c1d8305
1 parent 01fdfec
commit c1d8305
Show file tree

Hide file tree

Showing 7 changed files with 198 additions and 133 deletions.
diff --git a/app/Http/Requests/CustomerRequest.php b/app/Http/Requests/CustomerRequest.php
@@ -61,7 +61,7 @@ public function rules()
             'tiktok' => 'nullable|url|max:255',
             'notes' => 'nullable',
             'seller_id' => 'required|numeric',
-            'country' => 'nullable|max:2',
+            'country_id' => 'required|max:2',
             'province' => 'nullable|max:80',
             'city' => 'nullable|max:50',
             'locality' => 'nullable|max:80',

diff --git a/app/Http/Requests/LeadRequest.php b/app/Http/Requests/LeadRequest.php
@@ -60,7 +60,7 @@ public function rules()
             'tiktok' => 'nullable|url|max:255',
             'notes' => 'nullable',
             'seller_id' => 'required|numeric',
-            'country' => 'nullable|max:2',
+            'country_id' => 'required|max:2',
             'province' => 'nullable|max:80',
             'city' => 'nullable|max:50',
             'locality' => 'nullable|max:80',

diff --git a/resources/views/components/geolocalization/map.blade.php b/resources/views/components/geolocalization/map.blade.php
@@ -15,6 +15,61 @@
     var longitude = "{{ $attributes['longitude'] }}";
     var map = L.map("map");
 
+    function initializeMap(latitude, longitude) {
+        // Verifica si hay coordenadas disponibles y establece el centro del mapa y el marcador si es así
+        if (latitude && longitude) {
+            // Establece la vista del mapa en la posición inicial y un nivel de zoom determinado
+            map.setView([latitude, longitude], 18);
+
+            // Agrega capas de azulejos al mapa para mostrar el mapa base
+            var tiles = L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
+                maxZoom: 20,
+                attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+            }).addTo(map);
+
+            // Agrega un marcador a la posición inicial del mapa
+            var marker = L.marker([latitude, longitude]).addTo(map);
+        }
+    }
+
+
+    // Manage success get current user position
+    function showPosition(position) {
+        let latitude = position.coords.latitude;
+        let longitude = position.coords.longitude;
+
+        // Llama a la función para mostrar el mapa y establecer la posición del marcador
+        initializeMap(latitude, longitude);
+    }
+
+    // Función para manejar el caso de error al obtener la ubicación
+    function showError(error) {
+        switch (error.code) {
+            case error.PERMISSION_DENIED:
+                console.log("User denied the request for Geolocation.");
+                break;
+            case error.POSITION_UNAVAILABLE:
+                console.log("Location information is unavailable.");
+                break;
+            case error.TIMEOUT:
+                console.log("The request to get user location timed out.");
+                break;
+            case error.UNKNOWN_ERROR:
+                console.log("An unknown error occurred.");
+                break;
+        }
+    }
+
+
+    // Get current user location
+    function getLocation() {
+        if (navigator.geolocation) {
+            navigator.geolocation.getCurrentPosition(showPosition, showError);
+        } else {
+            console.log("Geolocation is not supported by this browser.");
+        }
+    }
+
     function setMarker(latitude, longitude) {
         if (!latitude || !longitude) {
             document.getElementById('map').innerHTML = "<p class='p-3'>{{ __('It is not possible to show the map of the location because the geolocation is not established.') }}</p>";
@@ -62,7 +117,9 @@ function getCoordinates() {
                     document.getElementById('longitude').value = longitude;
 
                     // Actualizar el mapa con las nuevas coordenadas
-                    setMarker(latitude, longitude);
+                    if (map) {
+                        setMarker(latitude, longitude);
+                    }
 
                     console.log(`Coordenadas de la dirección '${address}': Latitud ${latitude}, Longitud ${longitude}`);
                 } else {
@@ -83,6 +140,8 @@ function getCoordinates() {
         }).addTo(map);
 
         var marker = L.marker([latitude, longitude]).addTo(map);
+    } else {
+        getLocation();
     }
 </script>
 @endpush
diff --git a/resources/views/customer/customer.blade.php b/resources/views/customer/customer.blade.php
@@ -5,16 +5,6 @@
         <h1>{{ __('Customer') }} @if($customer->id) #{{ $customer->id }} @endif</h1>
     </header>
 
-    @if ($errors->any())
-        <div class="alert alert-danger">
-            <ul>
-                @foreach ($errors->all() as $error)
-                    <li>{{ $error }}</li>
-                @endforeach
-            </ul>
-        </div>
-    @endif
-
     <form method="POST" action="{{ url('/customer/save') }}" class="form">
         {{ csrf_field() }}
         <div class="card mt-2">
@@ -63,7 +53,8 @@ class="form-control form-control-lg">
                         <label for="extension">{{ __('Extension') }}</label>
                         <div class="input-group">
                             <span class="input-group-text"><i class="lab la-buromobelexperte"></i></span>
-                            <input type="text" name="extension" id="extension" value="{{ old('extension', $customer->extension) }}"
+                            <input type="text" name="extension" id="extension"
+                                   value="{{ old('extension', $customer->extension) }}"
                                    maxlength="6" class="form-control form-control-lg">
                         </div>
                     </div>
@@ -148,8 +139,11 @@ class="form-control form-control-lg">{{ old('notes', $customer->notes) }}</texta
                     <div class="col">
                         <label for="search-address">{{ __('Search for an address') }}</label>
                         <div class="input-group">
-                            <input type="text" id="search-address" placeholder="{{ __('Search for an address') }}" class="form-control form-control-lg">
-                            <button type="button" onclick="getCoordinates()" class="btn btn-secondary"><i class="las la-search"></i></button>
+                            <input type="text" id="search-address" placeholder="{{ __('Search for an address') }}"
+                                   class="form-control form-control-lg">
+                            <button type="button" onclick="getCoordinates()" class="btn btn-secondary">
+                                <i class="las la-search"></i>
+                            </button>
                         </div>
                     </div>
                 </div>

diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
@@ -14,13 +14,13 @@
     <link rel="manifest" href="{{ url('/manifest') }}">
 
     <!-- Bootstrap -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
-          integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
+          integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     <link rel="stylesheet"
           href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/js/all.min.js"
-            integrity="sha512-2bMhOkE/ACz21dJT8zBOMgMecNxx0d37NND803ExktKiKdSzdwn+L7i9fdccw/3V06gM/DBWKbYmQvKMdAA9Nw=="
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/js/all.min.js"
+            integrity="sha512-GWzVrcGlo0TxTRvz9ttioyYJ+Wwk9Ck0G81D+eO63BaqHaJ3YZX9wuqjwgfcV/MrB2PhaVX9DkYVhbFpStnqpQ=="
             crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <link rel="stylesheet" href="/asset/css/prospect-flow.css">
     <link rel="stylesheet" href="/asset/theme/space/css/space.css">
@@ -153,9 +153,10 @@
 <div id="notifications-toast-container" class="toast-container position-fixed bottom-0 end-0 p-3"></div>
 
 <!--JavaScript-->
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
-   integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
+        crossorigin="anonymous"></script>
 <script src="/asset/js/ProspectFlow.js"></script>
 <script src="/asset/js/Notification.js"></script>
 @auth

diff --git a/resources/views/lead/lead.blade.php b/resources/views/lead/lead.blade.php
@@ -5,16 +5,6 @@
         <h1>{{ __('Lead') }} @if($lead->id) #{{ $lead->id }} @endif</h1>
     </header>
 
-    @if ($errors->any())
-        <div class="alert alert-danger">
-            <ul>
-                @foreach ($errors->all() as $error)
-                    <li>{{ $error }}</li>
-                @endforeach
-            </ul>
-        </div>
-    @endif
-
     <form method="POST" action="{{ url('/lead/save') }}" class="form">
         {{ csrf_field() }}
         <div class="card mt-2">