diff --git a/app/javascript/controllers/maps_controller.js b/app/javascript/controllers/maps_controller.js index 693e7a15..a74aaac3 100644 --- a/app/javascript/controllers/maps_controller.js +++ b/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(); diff --git a/app/javascript/maps/visits.js b/app/javascript/maps/visits.js index b62d0968..ee4a7680 100644 --- a/app/javascript/maps/visits.js +++ b/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 = `
+
+
+ ${dateTimeDisplay.trim()} +
+
+ + Duration: ${durationText}, + + + status: ${visit.status.charAt(0).toUpperCase() + visit.status.slice(1)} + +
+