Move visits to different panes

app/javascript/controllers/maps_controller.js

@@ -103,11 +103,21 @@ export default class extends BaseController {
     this.map.getPane('areasPane').style.zIndex = 650;
     this.map.getPane('areasPane').style.pointerEvents = 'all';
 
-    // Create custom pane for visits
+    // Create custom panes for visits
+    // Note: We'll still create visitsPane for backward compatibility
     this.map.createPane('visitsPane');
     this.map.getPane('visitsPane').style.zIndex = 600;
     this.map.getPane('visitsPane').style.pointerEvents = 'all';
 
+    // Create separate panes for confirmed and suggested visits
+    this.map.createPane('confirmedVisitsPane');
+    this.map.getPane('confirmedVisitsPane').style.zIndex = 450;
+    this.map.getPane('confirmedVisitsPane').style.pointerEvents = 'all';
+
+    this.map.createPane('suggestedVisitsPane');
+    this.map.getPane('suggestedVisitsPane').style.zIndex = 460;
+    this.map.getPane('suggestedVisitsPane').style.pointerEvents = 'all';
+
     // Initialize areasLayer as a feature group and add it to the map immediately
     this.areasLayer = new L.FeatureGroup();
     this.photoMarkers = L.layerGroup();

app/javascript/maps/visits.js

@@ -210,11 +210,11 @@ export class VisitsManager {
             color: isSuggested ? '#FFA500' : '#4A90E2', // Border color
             fillColor: isSuggested ? '#FFD700' : '#4A90E2', // Fill color
             fillOpacity: isSuggested ? 0.4 : 0.6,
-            radius: 100,
+            radius: isConfirmed ? 110 : 80, // Increased size for confirmed visits
             weight: 2,
             interactive: true,
             bubblingMouseEvents: false,
-            pane: 'visitsPane',
+            pane: isConfirmed ? 'confirmedVisitsPane' : 'suggestedVisitsPane', // Use appropriate pane
             dashArray: isSuggested ? '4' : null // Dotted border for suggested
           });
 
@@ -677,10 +677,50 @@ export class VisitsManager {
 
       const possiblePlaces = await response.json();
 
+      // Format date and time
+      const startDate = new Date(visit.started_at);
+      const endDate = new Date(visit.ended_at);
+      const isSameDay = startDate.toDateString() === endDate.toDateString();
+
+      let dateTimeDisplay;
+      if (isSameDay) {
+        dateTimeDisplay = `
+          ${startDate.toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' })},
+          ${startDate.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit', hour12: false })} -
+          ${endDate.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit', hour12: false })}
+        `;
+      } else {
+        dateTimeDisplay = `
+          ${startDate.toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' })},
+          ${startDate.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit', hour12: false })} -
+          ${endDate.toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' })},
+          ${endDate.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit', hour12: false })}
+        `;
+      }
+
+      // Format duration
+      const durationText = this.formatDuration(visit.duration * 60);
+
+      // Status with color coding
+      const statusColorClass = visit.status === 'confirmed' ? 'text-success' : 'text-warning';
+
       // Create popup content with form and dropdown
       const defaultName = visit.name;
       const popupContent = `
         <div class="p-3">
+          <div class="mb-3">
+            <div class="text-sm mb-1">
+              ${dateTimeDisplay.trim()}
+            </div>
+            <div>
+              <span class="text-sm text-gray-500">
+                Duration: ${durationText},
+              </span>
+              <span class="text-sm mb-1 ${statusColorClass} font-semibold">
+                status: ${visit.status.charAt(0).toUpperCase() + visit.status.slice(1)}
+              </span>
+            </div>
+          </div>
           <form class="visit-name-form" data-visit-id="${visit.id}">
             <div class="form-control">
               <input type="text"
@@ -711,10 +751,10 @@ export class VisitsManager {
       // Create and store the popup
       const popup = L.popup({
         closeButton: true,
-        closeOnClick: false,
-        autoClose: false,
-        maxWidth: 300, // Set maximum width
-        minWidth: 200  // Set minimum width
+        closeOnClick: true,
+        autoClose: true,
+        maxWidth: 450, // Set maximum width
+        minWidth: 300  // Set minimum width
       })
         .setLatLng([visit.place.latitude, visit.place.longitude])
         .setContent(popupContent);

app/models/concerns/nearable.rb

@@ -12,6 +12,9 @@ module Nearable
   }.freeze
 
   class_methods do
+    # It accepts an array of coordinates [latitude, longitude]
+    # and an optional radius and distance unit
+
     # rubocop:disable Metrics/MethodLength
     def near(*args)
       latitude, longitude, radius, unit = extract_coordinates_and_options(*args)

app/services/visits/place_finder.rb

@@ -17,13 +17,9 @@ module Visits
       # Define the search radius in meters
       search_radius = 100 # Adjust this value as needed
 
-      # First check by exact coordinates
-      existing_place = Place.where('ST_DWithin(lonlat, ST_SetSRID(ST_MakePoint(?, ?), 4326), 1)', lon, lat).first
-
-      # If no exact match, check by name within radius
-      existing_place ||= Place.where(name: name)
-                              .where('ST_DWithin(lonlat, ST_SetSRID(ST_MakePoint(?, ?), 4326), ?)', lon, lat, search_radius)
-                              .first
+      existing_place = Place.where(name: name)
+                            .near([lon, lat], search_radius, :m)
+                            .first
 
       return existing_place if existing_place