- ${location.visits.slice(0, 5).map(visit => `
-
- 📍 ${this.formatDateTime(visit.date)} (${visit.distance_meters}m away)
+
+
+
+ ${Object.entries(visitsByYear).map(([year, yearVisits]) => `
+
+
+ ${year}
+ ${yearVisits.length} visits
+ ▶
+
+
+ ${yearVisits.map((visit, visitIndex) => `
+
+
+
+ 📍 ${this.formatDateTime(visit.date)}
+
+ ${visit.duration_estimate}
+
+
+
+ ${visit.distance_meters}m
+
+
+
+ `).join('')}
+
`).join('')}
- ${location.visits.length > 5 ? `
+ ${location.visits.length - 5} more visits
` : ''}
`;
}
+ groupVisitsByYear(visits) {
+ const groups = {};
+ visits.forEach(visit => {
+ const year = new Date(visit.date).getFullYear().toString();
+ if (!groups[year]) {
+ groups[year] = [];
+ }
+ groups[year].push(visit);
+ });
+
+ // Sort years descending (most recent first)
+ const sortedGroups = {};
+ Object.keys(groups)
+ .sort((a, b) => parseInt(b) - parseInt(a))
+ .forEach(year => {
+ sortedGroups[year] = groups[year];
+ });
+
+ return sortedGroups;
+ }
+
+ formatDateShort(dateString) {
+ const date = new Date(dateString);
+ return date.toLocaleDateString('en-GB', {
+ day: '2-digit',
+ month: '2-digit',
+ year: 'numeric'
+ });
+ }
+
bindResultEvents() {
- const locationResults = this.resultsContainer.querySelectorAll('.location-result');
- locationResults.forEach(result => {
- result.addEventListener('click', (e) => {
- const index = parseInt(e.currentTarget.dataset.locationIndex);
- this.focusOnLocation(this.searchResults[index]);
+ // Bind click events to year toggles
+ const yearToggles = this.resultsContainer.querySelectorAll('.year-toggle');
+ yearToggles.forEach(toggle => {
+ toggle.addEventListener('click', (e) => {
+ e.stopPropagation();
+ const locationIndex = parseInt(toggle.dataset.locationIndex);
+ const year = toggle.dataset.year;
+ this.toggleYear(locationIndex, year, toggle);
});
});
+
+ // Bind click events to individual visits
+ const visitResults = this.resultsContainer.querySelectorAll('.visit-item');
+ visitResults.forEach(visit => {
+ visit.addEventListener('click', (e) => {
+ e.stopPropagation(); // Prevent triggering other clicks
+ const locationIndex = parseInt(visit.dataset.locationIndex);
+ const visitIndex = parseInt(visit.dataset.visitIndex);
+ this.focusOnVisit(this.searchResults[locationIndex], visitIndex);
+ });
+ });
+ }
+
+ toggleYear(locationIndex, year, toggleElement) {
+ const yearVisitsContainer = document.getElementById(`year-${locationIndex}-${year}`);
+ const arrow = toggleElement.querySelector('.year-arrow');
+
+ if (yearVisitsContainer.classList.contains('hidden')) {
+ // Show visits
+ yearVisitsContainer.classList.remove('hidden');
+ arrow.style.transform = 'rotate(90deg)';
+ arrow.textContent = '▼';
+ } else {
+ // Hide visits
+ yearVisitsContainer.classList.add('hidden');
+ arrow.style.transform = 'rotate(0deg)';
+ arrow.textContent = '▶';
+ }
}
addSearchMarkersToMap(locations) {
@@ -394,54 +498,189 @@ class LocationSearch {
this.hideResults();
}
+ focusOnVisit(location, visitIndex) {
+ const visit = location.visits[visitIndex];
+ if (!visit) return;
+
+ // Navigate to the visit coordinates (more precise than location coordinates)
+ const [lat, lon] = visit.coordinates || location.coordinates;
+ this.map.setView([lat, lon], 18); // Higher zoom for individual visit
+
+ // Parse the visit timestamp to create a time filter
+ const visitDate = new Date(visit.date);
+ const startTime = new Date(visitDate.getTime() - (2 * 60 * 60 * 1000)); // 2 hours before
+ const endTime = new Date(visitDate.getTime() + (2 * 60 * 60 * 1000)); // 2 hours after
+
+ // Emit custom event for time filtering that other parts of the app can listen to
+ const timeFilterEvent = new CustomEvent('locationSearch:timeFilter', {
+ detail: {
+ startTime: startTime.toISOString(),
+ endTime: endTime.toISOString(),
+ visitDate: visit.date,
+ location: location.place_name,
+ coordinates: [lat, lon]
+ }
+ });
+
+ document.dispatchEvent(timeFilterEvent);
+
+ // Create a special marker for the specific visit
+ this.addVisitMarker(lat, lon, visit, location);
+
+ // Show visit details in a popup or notification
+ this.showVisitDetails(visit, location);
+
+ // DON'T hide results - keep sidebar open
+ // this.hideResults();
+ }
+
+ addVisitMarker(lat, lon, visit, location) {
+ // Remove existing visit marker if any
+ if (this.visitMarker) {
+ this.map.removeLayer(this.visitMarker);
+ }
+
+ // Create a highlighted marker for the specific visit
+ this.visitMarker = L.circleMarker([lat, lon], {
+ radius: 12,
+ fillColor: '#22c55e', // Green color to distinguish from search results
+ color: '#ffffff',
+ weight: 3,
+ opacity: 1,
+ fillOpacity: 0.9
+ });
+
+ const popupContent = `
+
+
${this.escapeHtml(location.place_name)}
+
${this.escapeHtml(location.address || '')}
+
+
Visit Details:
+
${this.formatDateTime(visit.date)}
+
Duration: ${visit.duration_estimate}
+
+
+
+
+
+ `;
+
+ this.visitMarker.bindPopup(popupContent, {
+ closeButton: true,
+ autoClose: false, // Don't auto-close when clicking elsewhere
+ closeOnEscapeKey: true, // Allow closing with Escape key
+ closeOnClick: false // Don't close when clicking on map
+ });
+
+ this.visitMarker.addTo(this.map);
+ this.visitMarker.openPopup();
+
+ // Add event listener to clean up when popup is closed
+ this.visitMarker.on('popupclose', () => {
+ if (this.visitMarker) {
+ this.map.removeLayer(this.visitMarker);
+ this.visitMarker = null;
+ }
+ });
+
+ // Store reference for manual cleanup if needed
+ this.currentVisitMarker = this.visitMarker;
+ }
+
+ showVisitDetails(visit, location) {
+ // Remove any existing notification
+ const existingNotification = document.querySelector('.visit-navigation-notification');
+ if (existingNotification) {
+ existingNotification.remove();
+ }
+
+ // Create a persistent notification showing visit details
+ const notification = document.createElement('div');
+ notification.className = 'visit-navigation-notification fixed top-4 right-4 z-40 bg-green-50 border border-green-200 rounded-lg p-4 shadow-lg max-w-sm';
+ notification.innerHTML = `
+
+
+
+
+ Viewing visit
+
+
+ ${this.escapeHtml(location.place_name)}
+
+
+ ${this.formatDateTime(visit.date)} • ${visit.duration_estimate}
+
+
+
+
+ `;
+
+ document.body.appendChild(notification);
+
+ // Auto-remove notification after 10 seconds (longer duration)
+ setTimeout(() => {
+ if (notification.parentNode) {
+ notification.remove();
+ }
+ }, 10000);
+ }
+
clearSearch() {
this.searchInput.value = '';
this.clearButton.classList.add('hidden');
this.hideResults();
this.clearSearchMarkers();
+ this.clearVisitMarker();
this.currentSearchQuery = '';
}
- toggleSearchBar() {
- if (this.searchVisible) {
- this.hideSearchBar();
- } else {
- this.showSearchBar();
+ clearVisitMarker() {
+ if (this.visitMarker) {
+ this.map.removeLayer(this.visitMarker);
+ this.visitMarker = null;
+ }
+ if (this.currentVisitMarker) {
+ this.map.removeLayer(this.currentVisitMarker);
+ this.currentVisitMarker = null;
+ }
+
+ // Remove any visit notifications
+ const existingNotification = document.querySelector('.visit-navigation-notification');
+ if (existingNotification) {
+ existingNotification.remove();
}
}
- showSearchBar() {
- // Calculate position relative to the toggle button using viewport coordinates
- const buttonRect = this.toggleButton.getBoundingClientRect();
-
- // Position search container to the left of the button, aligned vertically
- // Using fixed positioning relative to viewport
- const searchTop = buttonRect.top; // Same vertical position as button (viewport coordinates)
- const searchRight = window.innerWidth - buttonRect.left + 10; // 10px gap to the left of button
-
- // Debug logging to see actual values
- console.log('Button rect:', buttonRect);
- console.log('Window width:', window.innerWidth);
- console.log('Calculated top:', searchTop);
- console.log('Calculated right:', searchRight);
-
- this.searchContainer.style.top = searchTop + 'px';
- this.searchContainer.style.right = searchRight + 'px';
-
- this.searchContainer.classList.remove('hidden');
+ showSidepanel() {
+ this.sidepanel.classList.remove('translate-x-full');
this.searchVisible = true;
// Focus the search input for immediate typing
setTimeout(() => {
this.searchInput.focus();
- }, 100);
+ }, 300); // Wait for animation to complete
}
- hideSearchBar() {
- this.searchContainer.classList.add('hidden');
- this.hideResults();
- this.clearSearch();
+ hideSidepanel() {
+ this.sidepanel.classList.add('translate-x-full');
this.searchVisible = false;
+ this.clearSearch();
+ this.showDefaultState();
+ }
+
+ showDefaultState() {
+ this.defaultPanel.classList.remove('hidden');
+ this.suggestionsPanel.classList.add('hidden');
+ this.resultsPanel.classList.add('hidden');
}
clearSearchMarkers() {
@@ -474,6 +713,9 @@ class LocationSearch {
return;
}
+ // Show loading state for suggestions
+ this.showSuggestionsLoading();
+
try {
const response = await fetch(`/api/v1/locations/suggestions?q=${encodeURIComponent(query)}`, {
method: 'GET',
@@ -496,35 +738,46 @@ class LocationSearch {
}
}
+ showSuggestionsLoading() {
+ // Hide other panels and show suggestions with loading
+ this.defaultPanel.classList.add('hidden');
+ this.resultsPanel.classList.add('hidden');
+ this.suggestionsPanel.classList.remove('hidden');
+
+ this.suggestionsContainer.innerHTML = `
+
+
⏳
+
Finding suggestions...
+
+ `;
+ }
+
displaySuggestions(suggestions) {
if (!suggestions.length) {
this.hideSuggestions();
return;
}
- // Position suggestions container below search input, aligned with the search container
- const searchRect = this.searchContainer.getBoundingClientRect();
- const suggestionsTop = searchRect.bottom + 2;
- const suggestionsRight = window.innerWidth - searchRect.left;
-
- this.suggestionsContainer.style.top = suggestionsTop + 'px';
- this.suggestionsContainer.style.right = suggestionsRight + 'px';
+ // Hide other panels and show suggestions
+ this.defaultPanel.classList.add('hidden');
+ this.resultsPanel.classList.add('hidden');
+ this.suggestionsPanel.classList.remove('hidden');
// Build suggestions HTML
let suggestionsHtml = '';
suggestions.forEach((suggestion, index) => {
const isActive = index === this.currentSuggestionIndex;
suggestionsHtml += `
-
-
${this.escapeHtml(suggestion.name)}
-
${this.escapeHtml(suggestion.address || '')}
+
${this.escapeHtml(suggestion.name)}
+
${this.escapeHtml(suggestion.address || '')}
+
${suggestion.type}
`;
});
this.suggestionsContainer.innerHTML = suggestionsHtml;
- this.suggestionsContainer.classList.remove('hidden');
this.suggestionsVisible = true;
this.suggestions = suggestions;
@@ -582,12 +835,28 @@ class LocationSearch {
const suggestion = this.suggestions[index];
this.searchInput.value = suggestion.name;
this.hideSuggestions();
+ this.showSearchLoading(suggestion.name);
this.performCoordinateSearch(suggestion); // Use coordinate-based search for selected suggestion
}
+ showSearchLoading(locationName) {
+ // Hide other panels and show loading for search results
+ this.defaultPanel.classList.add('hidden');
+ this.suggestionsPanel.classList.add('hidden');
+ this.resultsPanel.classList.remove('hidden');
+
+ this.resultsContainer.innerHTML = `
+
+
⏳
+
Searching visits to
+
${this.escapeHtml(locationName)}
+
+ `;
+ }
+
async performCoordinateSearch(suggestion) {
this.currentSearchQuery = suggestion.name;
- this.showLoading();
+ // Loading state already shown by showSearchLoading
try {
const params = new URLSearchParams({
@@ -619,7 +888,7 @@ class LocationSearch {
}
hideSuggestions() {
- this.suggestionsContainer.classList.add('hidden');
+ this.suggestionsPanel.classList.add('hidden');
this.suggestionsVisible = false;
this.currentSuggestionIndex = -1;
this.suggestions = [];
diff --git a/app/javascript/maps/visits.js b/app/javascript/maps/visits.js
index f70cf765..5b5c3848 100644
--- a/app/javascript/maps/visits.js
+++ b/app/javascript/maps/visits.js
@@ -535,6 +535,8 @@ export class VisitsManager {
return drawer;
}
+
+
/**
* Fetches visits data from the API and displays them
*/
diff --git a/app/services/location_search/geocoding_service.rb b/app/services/location_search/geocoding_service.rb
index d2ed9303..327bf6a8 100644
--- a/app/services/location_search/geocoding_service.rb
+++ b/app/services/location_search/geocoding_service.rb
@@ -2,7 +2,7 @@
module LocationSearch
class GeocodingService
- MAX_RESULTS = 5
+ MAX_RESULTS = 10
CACHE_TTL = 1.hour
def initialize