118 lines
4.6 KiB
Markdown
118 lines
4.6 KiB
Markdown
# Explore Page - Location-Based Sorting Implementation
|
|
|
|
## Summary
|
|
Implemented location-based sorting for clubs in the `/explore` page. When the "All" or "Clubs" tabs are selected, clubs are now sorted by distance from nearest to farthest based on the user's set location.
|
|
|
|
## Changes Made
|
|
|
|
### 1. Backend Changes - `app/Http/Controllers/ClubController.php`
|
|
|
|
#### Modified `all()` Method
|
|
- **Added Parameters**: Now accepts optional `latitude` and `longitude` query parameters
|
|
- **Distance Calculation**: When location is provided, calculates distance for each club using the Haversine formula
|
|
- **Sorting Logic**: Sorts clubs by distance (nearest first)
|
|
- Clubs with GPS coordinates and calculated distance appear first (sorted by distance)
|
|
- Clubs without GPS coordinates appear at the end
|
|
- **Response**: Returns clubs with distance information included
|
|
|
|
**Key Features:**
|
|
- Reuses existing `calculateDistance()` method for consistency
|
|
- Handles clubs without GPS coordinates gracefully
|
|
- Returns `null` for distance when location is not provided
|
|
- Maintains backward compatibility (works with or without location parameters)
|
|
|
|
### 2. Frontend Changes - `resources/views/clubs/explore.blade.php`
|
|
|
|
#### Modified `fetchAllClubs()` Function
|
|
- **Location Integration**: Now passes user location (latitude/longitude) as query parameters when available
|
|
- **Dynamic URL Building**: Constructs URL with location parameters if `userLocation` is set
|
|
- **Fallback**: Works without location parameters if user location is unavailable
|
|
|
|
#### Modified Category Button Logic
|
|
- **Updated Behavior**: Both "All" and "Clubs" (sports-clubs) tabs now use `fetchAllClubs()`
|
|
- **Consistent Sorting**: Ensures location-based sorting is applied for both categories
|
|
- **Other Categories**: Other categories continue to use `fetchNearbyClubs()` as before
|
|
|
|
## How It Works
|
|
|
|
1. **User Location Detection**:
|
|
- Page automatically detects user's location on load
|
|
- Location is stored in `userLocation` variable
|
|
|
|
2. **Tab Selection**:
|
|
- When "All" or "Clubs" tab is clicked, `fetchAllClubs()` is called
|
|
- If user location is available, it's sent to the backend
|
|
|
|
3. **Backend Processing**:
|
|
- Backend receives location parameters
|
|
- Calculates distance for each club with GPS coordinates
|
|
- Sorts clubs by distance (nearest to farthest)
|
|
- Returns sorted list with distance information
|
|
|
|
4. **Display**:
|
|
- Clubs are displayed in cards with distance shown
|
|
- Card style matches the exact design specification
|
|
- Distance is displayed as "X.XX km away"
|
|
|
|
## Card Style
|
|
The card implementation maintains the exact style as specified:
|
|
- Club image with logo overlay (bottom-right corner)
|
|
- "Sports Club" badge (top-right corner)
|
|
- Club name (bold, large text)
|
|
- Distance with navigation icon (red text)
|
|
- Owner/address information
|
|
- Stats grid (Members, Packages, Trainers)
|
|
- Action buttons (Join Club, View Details)
|
|
|
|
## Testing
|
|
|
|
To test the implementation:
|
|
|
|
1. Visit `http://localhost:8000/explore`
|
|
2. Allow location access when prompted
|
|
3. Click on "All" tab - clubs should be sorted by distance
|
|
4. Click on "Clubs" tab - clubs should be sorted by distance
|
|
5. Verify distance is displayed correctly on each card
|
|
6. Verify card style matches the design specification
|
|
|
|
## Technical Details
|
|
|
|
### Distance Calculation
|
|
- Uses Haversine formula for accurate distance calculation
|
|
- Returns distance in kilometers
|
|
- Rounded to 2 decimal places for display
|
|
|
|
### Sorting Algorithm
|
|
```php
|
|
// Clubs with distance come first (sorted by distance)
|
|
// Clubs without distance come last (maintain original order)
|
|
if (both have distance) -> sort by distance
|
|
if (only one has distance) -> prioritize it
|
|
if (neither has distance) -> maintain order
|
|
```
|
|
|
|
### API Endpoints Used
|
|
- `GET /clubs/all?latitude={lat}&longitude={lng}` - Fetch all clubs with distance sorting
|
|
- `GET /clubs/nearby?latitude={lat}&longitude={lng}&radius={km}` - Fetch nearby clubs within radius
|
|
|
|
## Files Modified
|
|
1. `app/Http/Controllers/ClubController.php` - Backend logic
|
|
2. `resources/views/clubs/explore.blade.php` - Frontend JavaScript (also fixed missing `pageMap` variable declaration bug)
|
|
|
|
## Bug Fixes
|
|
During implementation, discovered and fixed an existing bug:
|
|
- **Missing Variable Declaration**: Added `let pageMap;` declaration that was causing JavaScript errors
|
|
|
|
## Backward Compatibility
|
|
- All changes are backward compatible
|
|
- Works with or without location parameters
|
|
- Existing functionality remains intact
|
|
- No database schema changes required
|
|
|
|
## Future Enhancements
|
|
Potential improvements for future iterations:
|
|
- Add distance unit toggle (km/miles)
|
|
- Add custom radius filter for "All" tab
|
|
- Cache distance calculations for performance
|
|
- Add map view with sorted markers
|