Spaces:
Sleeping
Sleeping
| import React, { useEffect } from 'react'; | |
| import { MapContainer, TileLayer, Marker, Popup, useMapEvents, useMap, Polyline } from 'react-leaflet'; | |
| import 'leaflet/dist/leaflet.css'; | |
| import L from 'leaflet'; | |
| import icon from 'leaflet/dist/images/marker-icon.png'; | |
| import iconShadow from 'leaflet/dist/images/marker-shadow.png'; | |
| let DefaultIcon = L.icon({ | |
| iconUrl: icon, | |
| shadowUrl: iconShadow, | |
| iconSize: [25, 41], | |
| iconAnchor: [12, 41], | |
| }); | |
| L.Marker.prototype.options.icon = DefaultIcon; | |
| const createCustomIcon = (color) => { | |
| return new L.DivIcon({ | |
| className: 'custom-div-icon', | |
| html: `<div style="background-color: ${color}; width: 16px; height: 16px; border-radius: 50%; border: 3px solid white; box-shadow: 0 0 5px rgba(0,0,0,0.5);"></div>`, | |
| iconSize: [22, 22], | |
| iconAnchor: [11, 11] | |
| }); | |
| }; | |
| const pickupIcon = createCustomIcon('#029676'); // Reliance Teal | |
| const dropoffIcon = createCustomIcon('#FF4A4A'); // Danger Red | |
| const carIcon = new L.DivIcon({ | |
| className: 'custom-car-icon', | |
| html: `<div style="background-color: #f59e0b; width: 28px; height: 28px; border-radius: 50%; border: 2px solid white; box-shadow: 0 0 10px rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; font-size: 16px;">🚗</div>`, | |
| iconSize: [32, 32], | |
| iconAnchor: [16, 16] | |
| }); | |
| const LocationSelector = ({ onLocationSelect }) => { | |
| useMapEvents({ | |
| click(e) { | |
| if (onLocationSelect) { | |
| onLocationSelect(e.latlng.lat, e.latlng.lng); | |
| } | |
| }, | |
| }); | |
| return null; | |
| }; | |
| export const MapBoundsUpdater = ({ pickup, dropoff }) => { | |
| const map = useMap(); | |
| useEffect(() => { | |
| if (pickup && dropoff) { | |
| const bounds = L.latLngBounds( | |
| [pickup.lat, pickup.lng], | |
| [dropoff.lat, dropoff.lng] | |
| ); | |
| map.fitBounds(bounds, { padding: [50, 50] }); | |
| } else if (pickup) { | |
| map.flyTo([pickup.lat, pickup.lng], 13); | |
| } else if (dropoff) { | |
| map.flyTo([dropoff.lat, dropoff.lng], 13); | |
| } | |
| }, [pickup, dropoff, map]); | |
| return null; | |
| }; | |
| // ... keep AutocompleteInput as it was ... | |
| let RCP_LOCATIONS = [ | |
| { name: 'RCP Twin Towers', lat: 19.1171, lng: 73.0106 }, | |
| { name: 'RCP LDC', lat: 19.1175, lng: 73.0110 }, | |
| { name: 'RCP Main Gate', lat: 19.1160, lng: 73.0090 }, | |
| ]; | |
| for (let i = 1; i <= 30; i++) { | |
| RCP_LOCATIONS.push({ name: `RCP TC ${i}`, lat: 19.1172 + (i * 0.0001), lng: 73.0107 }); | |
| } | |
| ['A', 'B', 'C', 'D', 'E', 'F', 'G'].forEach((gate, idx) => { | |
| RCP_LOCATIONS.push({ name: `RCP Gate ${gate}`, lat: 19.1165 + (idx * 0.0002), lng: 73.0095 }); | |
| }); | |
| import { useState } from 'react'; | |
| export const AutocompleteInput = ({ label, placeholder, value, onChange, onSelect, color }) => { | |
| const [suggestions, setSuggestions] = useState([]); | |
| const [showDropdown, setShowDropdown] = useState(false); | |
| const [focusedIndex, setFocusedIndex] = useState(-1); | |
| useEffect(() => { | |
| setFocusedIndex(-1); | |
| const delayDebounceFn = setTimeout(async () => { | |
| if (value && showDropdown) { | |
| let results = []; | |
| if (value.toLowerCase().includes('rcp') || value.toLowerCase().includes('gate') || value.toLowerCase().includes('tc')) { | |
| const rcpMatches = RCP_LOCATIONS.filter(loc => loc.name.toLowerCase().includes(value.toLowerCase())).map(loc => ({ | |
| properties: { name: loc.name, city: 'Ghansoli', state: 'Navi Mumbai', isCustom: true }, | |
| geometry: { coordinates: [loc.lng, loc.lat] } | |
| })); | |
| results = [...rcpMatches]; | |
| } | |
| try { | |
| const res = await fetch(`https://photon.komoot.io/api/?q=${encodeURIComponent(value)}&limit=5&lat=19.0760&lon=72.8777`); | |
| const data = await res.json(); | |
| results = [...results, ...(data.features || [])]; | |
| // Sort results alphabetically by name | |
| results.sort((a, b) => { | |
| const nameA = a.properties.name || ''; | |
| const nameB = b.properties.name || ''; | |
| return nameA.localeCompare(nameB); | |
| }); | |
| setSuggestions(results.slice(0, 8)); | |
| } catch (error) { | |
| console.error(error); | |
| } | |
| } else { | |
| setSuggestions([]); | |
| } | |
| }, 500); | |
| return () => clearTimeout(delayDebounceFn); | |
| }, [value, showDropdown]); | |
| const handleSelect = (suggestion) => { | |
| setShowDropdown(false); | |
| const props = suggestion.properties; | |
| const shortName = props.name || props.city || props.state || 'Selected Location'; | |
| onChange(shortName); | |
| onSelect({ | |
| lat: suggestion.geometry.coordinates[1], | |
| lng: suggestion.geometry.coordinates[0], | |
| name: shortName | |
| }); | |
| }; | |
| return ( | |
| <div className="flex flex-col gap-2 relative w-full"> | |
| <label className="text-xs text-on-surface-variant font-medium">{label}</label> | |
| <div className="flex w-full"> | |
| <div className="px-3 bg-surface-container/60 border border-r-0 border-white/10 rounded-l-lg flex items-center justify-center"> | |
| <div className="w-2.5 h-2.5 rounded-full" style={{ backgroundColor: color }}></div> | |
| </div> | |
| <input | |
| type="text" | |
| placeholder={placeholder} | |
| value={value} | |
| onChange={(e) => { | |
| onChange(e.target.value); | |
| setShowDropdown(true); | |
| }} | |
| onFocus={() => setShowDropdown(true)} | |
| onBlur={() => setTimeout(() => setShowDropdown(false), 200)} | |
| onKeyDown={(e) => { | |
| if (e.key === 'ArrowDown') { | |
| e.preventDefault(); | |
| setFocusedIndex(prev => (prev < suggestions.length - 1 ? prev + 1 : prev)); | |
| } else if (e.key === 'ArrowUp') { | |
| e.preventDefault(); | |
| setFocusedIndex(prev => (prev > 0 ? prev - 1 : -1)); | |
| } else if (e.key === 'Enter') { | |
| e.preventDefault(); | |
| if (focusedIndex >= 0 && suggestions[focusedIndex]) { | |
| handleSelect(suggestions[focusedIndex]); | |
| } | |
| } | |
| }} | |
| className="flex-1 glass-input px-4 py-2.5 rounded-r-lg text-white placeholder:text-on-surface-variant/30 outline-none text-body-md transition-all duration-300 w-full" | |
| /> | |
| </div> | |
| {showDropdown && suggestions.length > 0 && ( | |
| <div className="absolute top-[calc(100%+4px)] left-0 right-0 z-50 bg-surface-deep border border-white/10 rounded-lg overflow-y-auto max-h-[250px] shadow-2xl animate-slide-in"> | |
| {suggestions.map((s, idx) => ( | |
| <div | |
| key={idx} | |
| onMouseDown={(e) => { | |
| e.preventDefault(); | |
| handleSelect(s); | |
| }} | |
| className={`px-4 py-3 border-white/5 cursor-pointer text-xs text-on-surface hover:bg-white/5 transition-colors flex items-center gap-2 ${idx < suggestions.length - 1 ? 'border-b' : ''} ${idx === focusedIndex ? 'bg-white/5' : ''}`} | |
| onMouseEnter={() => setFocusedIndex(idx)} | |
| onMouseLeave={() => setFocusedIndex(-1)} | |
| > | |
| {s.properties.isCustom ? ( | |
| <span><span className="text-primary font-bold mr-1">[Internal]</span> {s.properties.name}, {s.properties.city}</span> | |
| ) : ( | |
| <span>{s.properties.name ? s.properties.name + ', ' : ''}{s.properties.city ? s.properties.city + ', ' : ''}{s.properties.state || s.properties.country}</span> | |
| )} | |
| </div> | |
| ))} | |
| </div> | |
| )} | |
| </div> | |
| ); | |
| }; | |
| const MapComponent = ({ pickupCoords, dropoffCoords, mapMode, setMapMode, onLocationSelect, routePolyline, liveDriverLocation }) => { | |
| const defaultPosition = [19.0760, 72.8777]; | |
| let polylinePositions = []; | |
| if (routePolyline) { | |
| try { | |
| const coords = JSON.parse(routePolyline); | |
| // OSRM returns [lng, lat], Leaflet needs [lat, lng] | |
| polylinePositions = coords.map(c => [c[1], c[0]]); | |
| } catch (e) { | |
| console.error("Failed to parse polyline", e); | |
| } | |
| } | |
| return ( | |
| <div className="glass-panel p-6 rounded-xl flex flex-col gap-4 h-full"> | |
| <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4"> | |
| <h2 className="text-xl font-bold text-white">{setMapMode ? 'Live Route Planner' : 'Trip Map'}</h2> | |
| {setMapMode && ( | |
| <div className="flex gap-2"> | |
| <button | |
| type="button" | |
| className={`px-4 py-2 rounded-lg font-bold text-xs transition-all duration-300 ${ | |
| mapMode === 'pickup' | |
| ? 'bg-primary text-on-primary-container hover:shadow-[0_0_10px_rgba(2,150,118,0.3)]' | |
| : 'border border-white/10 hover:bg-white/5 text-white' | |
| }`} | |
| onClick={() => setMapMode('pickup')} | |
| > | |
| 📍 Pick-up Pin | |
| </button> | |
| <button | |
| type="button" | |
| className={`px-4 py-2 rounded-lg font-bold text-xs transition-all duration-300 ${ | |
| mapMode === 'dropoff' | |
| ? 'bg-error-red text-white hover:shadow-[0_0_10px_rgba(229,57,53,0.3)]' | |
| : 'border border-white/10 hover:bg-white/5 text-white' | |
| }`} | |
| onClick={() => setMapMode('dropoff')} | |
| > | |
| 📍 Drop-off Pin | |
| </button> | |
| </div> | |
| )} | |
| </div> | |
| {setMapMode && ( | |
| <div className="text-xs text-on-surface-variant leading-relaxed"> | |
| Click anywhere on the map to pinpoint your exact {mapMode === 'pickup' ? 'Pick-up' : 'Drop-off'} location. It will automatically update the form above. | |
| </div> | |
| )} | |
| <div className="flex-grow min-h-[400px] rounded-xl overflow-hidden border border-white/10 z-10 relative"> | |
| <MapContainer center={defaultPosition} zoom={11} style={{ height: '100%', width: '100%' }}> | |
| <TileLayer | |
| url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" | |
| attribution='© OpenStreetMap contributors' | |
| /> | |
| {onLocationSelect && <LocationSelector onLocationSelect={onLocationSelect} />} | |
| <MapBoundsUpdater pickup={pickupCoords} dropoff={dropoffCoords} /> | |
| {pickupCoords && ( | |
| <Marker position={[pickupCoords.lat, pickupCoords.lng]} icon={pickupIcon}> | |
| <Popup>Pick-up: {pickupCoords.name || 'Custom'}</Popup> | |
| </Marker> | |
| )} | |
| {dropoffCoords && ( | |
| <Marker position={[dropoffCoords.lat, dropoffCoords.lng]} icon={dropoffIcon}> | |
| <Popup>Drop-off: {dropoffCoords.name || 'Custom'}</Popup> | |
| </Marker> | |
| )} | |
| {polylinePositions.length > 0 && ( | |
| <Polyline positions={polylinePositions} color="#029676" weight={5} opacity={0.7} /> | |
| )} | |
| {liveDriverLocation && ( | |
| <Marker position={[liveDriverLocation.lat, liveDriverLocation.lng]} icon={carIcon}> | |
| <Popup>Host's Live Location</Popup> | |
| </Marker> | |
| )} | |
| </MapContainer> | |
| </div> | |
| {(pickupCoords || dropoffCoords) && ( | |
| <div className="flex justify-between text-xs text-on-surface bg-primary/10 border border-primary/20 p-4 rounded-xl mt-2"> | |
| <div><strong>Route Selection:</strong></div> | |
| <div>Pick-up: <span className="text-on-surface-variant">{pickupCoords ? pickupCoords.name : 'Not set'}</span></div> | |
| <div>Drop-off: <span className="text-on-surface-variant">{dropoffCoords ? dropoffCoords.name : 'Not set'}</span></div> | |
| </div> | |
| )} | |
| </div> | |
| ); | |
| }; | |
| export default MapComponent; | |