merge: sync remote github/main with local main
This commit is contained in:
Shanmuga Krishnan S M
@@ -17,37 +17,84 @@ L.Icon.Default.mergeOptions({
|
||||
shadowUrl: markerShadow,
|
||||
});
|
||||
|
||||
// Glowing Live Bus Icon
|
||||
const liveBusIcon = L.divIcon({
|
||||
html: `<div class="relative flex items-center justify-center w-10 h-10 rounded-full bg-emerald-500 border-2 border-white shadow-xl text-white text-base font-bold cursor-pointer"><span class="absolute inset-0 rounded-full bg-emerald-500/50 animate-ping"></span>🚌</div>`,
|
||||
html: `<div class="relative flex items-center justify-center w-10 h-10 rounded-full bg-emerald-500 border-2 border-white shadow-2xl text-white text-base font-bold cursor-pointer"><span class="absolute inset-0 rounded-full bg-emerald-500/60 animate-ping"></span>🚌</div>`,
|
||||
className: '',
|
||||
iconSize: [40, 40],
|
||||
iconAnchor: [20, 20],
|
||||
});
|
||||
|
||||
// Stopped Bus Icon
|
||||
const stoppedBusIcon = L.divIcon({
|
||||
html: `<div class="relative flex items-center justify-center w-10 h-10 rounded-full bg-red-500 border-2 border-white shadow-xl text-white text-base font-bold cursor-pointer">🚌</div>`,
|
||||
html: `<div class="relative flex items-center justify-center w-10 h-10 rounded-full bg-red-500 border-2 border-white shadow-2xl text-white text-base font-bold cursor-pointer">🚌</div>`,
|
||||
className: '',
|
||||
iconSize: [40, 40],
|
||||
iconAnchor: [20, 20],
|
||||
});
|
||||
|
||||
// Helper component to pan map to active bus marker when selected
|
||||
function MapPanFocus({ center }: { center: [number, number] | null }) {
|
||||
// Helper: Create Clean Start Point Icon (Starting Location Name Only)
|
||||
function createStartIcon(locationName: string) {
|
||||
return L.divIcon({
|
||||
html: `
|
||||
<div class="relative flex items-center justify-center cursor-pointer group">
|
||||
<span class="absolute -inset-2 rounded-full bg-emerald-500/40 animate-ping"></span>
|
||||
<div class="relative flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-emerald-600 border-2 border-white text-white font-extrabold text-xs shadow-2xl transition-transform group-hover:scale-105">
|
||||
<span class="text-sm">📍</span>
|
||||
<span class="whitespace-nowrap tracking-wide">${locationName}</span>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
className: '',
|
||||
iconSize: [160, 40],
|
||||
iconAnchor: [80, 20],
|
||||
});
|
||||
}
|
||||
|
||||
// Helper: Create Clean Destination Point Icon (RIT Campus Only)
|
||||
function createDestinationIcon(locationName: string) {
|
||||
const displayName = locationName.includes('RIT') ? locationName : 'RIT Campus';
|
||||
return L.divIcon({
|
||||
html: `
|
||||
<div class="relative flex items-center justify-center cursor-pointer group">
|
||||
<span class="absolute -inset-2 rounded-full bg-orange-500/40 animate-ping"></span>
|
||||
<div class="relative flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-orange-600 border-2 border-white text-white font-extrabold text-xs shadow-2xl transition-transform group-hover:scale-105">
|
||||
<span class="text-sm">🏫</span>
|
||||
<span class="whitespace-nowrap tracking-wide">${displayName}</span>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
className: '',
|
||||
iconSize: [160, 40],
|
||||
iconAnchor: [80, 20],
|
||||
});
|
||||
}
|
||||
|
||||
// Helper component to auto-fit map view bounds when route changes
|
||||
function MapPanFocus({ bounds }: { bounds: L.LatLngBoundsExpression | null }) {
|
||||
const map = useMap();
|
||||
|
||||
useEffect(() => {
|
||||
if (center) {
|
||||
map.setView(center, 13, { animate: true });
|
||||
if (bounds) {
|
||||
map.fitBounds(bounds, {
|
||||
padding: [80, 80],
|
||||
maxZoom: 14,
|
||||
animate: true,
|
||||
duration: 0.8,
|
||||
});
|
||||
}
|
||||
}, [center, map]);
|
||||
}, [bounds, map]);
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
interface BusRouteMapProps {
|
||||
selectedRoute: BusRoute | null;
|
||||
allRoutes: BusRoute[];
|
||||
allRoutes?: BusRoute[];
|
||||
}
|
||||
|
||||
const DEFAULT_CENTER: [number, number] = [13.0118, 80.0214]; // RIT Campus default
|
||||
const RIT_CAMPUS_COORDS: [number, number] = [13.03868, 80.045138]; // True RIT Campus Kuthambakkam / Poonamallee
|
||||
const DEFAULT_CENTER: [number, number] = RIT_CAMPUS_COORDS;
|
||||
|
||||
export default function BusRouteMap({ selectedRoute }: BusRouteMapProps) {
|
||||
const [allLiveLocations, setAllLiveLocations] = useState<
|
||||
@@ -100,36 +147,52 @@ export default function BusRouteMap({ selectedRoute }: BusRouteMapProps) {
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
// Determine center focus point if a bus is live or selected
|
||||
const activeFocusCenter = useMemo<[number, number] | null>(() => {
|
||||
// Compute Start and Destination coordinates only
|
||||
const routeData = useMemo(() => {
|
||||
if (!selectedRoute) return null;
|
||||
|
||||
const normalizeRouteNum = (str: string) => (str || '').replace(/^[Rr]0*/, '').trim().toUpperCase();
|
||||
const matchLocKey = Object.keys(allLiveLocations).find(
|
||||
(k) => normalizeRouteNum(k) === normalizeRouteNum(selectedRoute.number)
|
||||
);
|
||||
|
||||
if (matchLocKey && allLiveLocations[matchLocKey]) {
|
||||
const loc = allLiveLocations[matchLocKey];
|
||||
return [loc.latitude, loc.longitude];
|
||||
}
|
||||
// Start coordinates
|
||||
let startCoords: [number, number] | null = null;
|
||||
let startName = selectedRoute.from || 'Start Point';
|
||||
|
||||
if (selectedRoute.from_lat && selectedRoute.from_lng) {
|
||||
return [selectedRoute.from_lat, selectedRoute.from_lng];
|
||||
startCoords = [selectedRoute.from_lat, selectedRoute.from_lng];
|
||||
} else if (selectedRoute.stops && selectedRoute.stops.length > 0) {
|
||||
const firstStop = selectedRoute.stops[0];
|
||||
if (firstStop.lat && firstStop.lng) {
|
||||
startCoords = [firstStop.lat, firstStop.lng];
|
||||
startName = firstStop.name || startName;
|
||||
}
|
||||
}
|
||||
|
||||
return DEFAULT_CENTER;
|
||||
}, [selectedRoute, allLiveLocations]);
|
||||
// Destination is ALWAYS the true RIT Campus location (Kuthambakkam)
|
||||
const destCoords: [number, number] = RIT_CAMPUS_COORDS;
|
||||
const destName = 'RIT Campus';
|
||||
|
||||
// Compute bounding box for map view auto-fit (start & destination only)
|
||||
const allPoints: [number, number][] = [];
|
||||
if (startCoords) allPoints.push(startCoords);
|
||||
if (destCoords) allPoints.push(destCoords);
|
||||
|
||||
const bounds: L.LatLngBoundsExpression | null =
|
||||
allPoints.length > 0 ? (allPoints as L.LatLngBoundsExpression) : null;
|
||||
|
||||
return {
|
||||
startCoords,
|
||||
startName,
|
||||
destCoords,
|
||||
destName,
|
||||
bounds,
|
||||
};
|
||||
}, [selectedRoute]);
|
||||
|
||||
return (
|
||||
<div className="relative h-full w-full bg-slate-950 overflow-hidden">
|
||||
<MapContainer
|
||||
center={DEFAULT_CENTER as L.LatLngExpression}
|
||||
zoom={11}
|
||||
minZoom={10}
|
||||
minZoom={9}
|
||||
maxZoom={18}
|
||||
maxBounds={[[12.65, 79.25], [13.35, 80.45]] as L.LatLngBoundsExpression}
|
||||
maxBoundsViscosity={1.0}
|
||||
className="h-full w-full z-10"
|
||||
style={{ height: '100%', width: '100%' }}
|
||||
>
|
||||
@@ -138,7 +201,52 @@ export default function BusRouteMap({ selectedRoute }: BusRouteMapProps) {
|
||||
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||||
/>
|
||||
|
||||
{/* Live GPS Bus Markers ONLY - No polyline routes */}
|
||||
{/* ── SELECTED ROUTE MARKERS (Starting Point & RIT Campus Destination ONLY) ── */}
|
||||
{selectedRoute && routeData && (
|
||||
<>
|
||||
{/* START Point Marker */}
|
||||
{routeData.startCoords && (
|
||||
<Marker
|
||||
position={routeData.startCoords}
|
||||
icon={createStartIcon(routeData.startName)}
|
||||
>
|
||||
<Popup>
|
||||
<div className="p-1 font-sans text-center">
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-emerald-100 text-emerald-800 text-[10px] font-bold">
|
||||
📍 ORIGIN / PICKUP
|
||||
</span>
|
||||
<h4 className="font-bold text-slate-900 text-xs mt-1">{routeData.startName}</h4>
|
||||
<p className="text-[10px] text-slate-500 mt-0.5">
|
||||
Departure: <strong>{selectedRoute.departureTime || 'Early Morning'}</strong>
|
||||
</p>
|
||||
</div>
|
||||
</Popup>
|
||||
</Marker>
|
||||
)}
|
||||
|
||||
{/* DESTINATION Point Marker (RIT Campus) */}
|
||||
{routeData.destCoords && (
|
||||
<Marker
|
||||
position={routeData.destCoords}
|
||||
icon={createDestinationIcon(routeData.destName)}
|
||||
>
|
||||
<Popup>
|
||||
<div className="p-1 font-sans text-center">
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-orange-100 text-orange-800 text-[10px] font-bold">
|
||||
🏫 DESTINATION
|
||||
</span>
|
||||
<h4 className="font-bold text-slate-900 text-xs mt-1">{routeData.destName}</h4>
|
||||
<p className="text-[10px] text-slate-500 mt-0.5">
|
||||
Arrival: <strong>{selectedRoute.arrivalTime || '08:30 AM'}</strong>
|
||||
</p>
|
||||
</div>
|
||||
</Popup>
|
||||
</Marker>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* ── LIVE GPS BUS TRACKING MARKERS ── */}
|
||||
{Object.entries(allLiveLocations).map(([rNum, loc]) => {
|
||||
const normalizeRouteNum = (str: string) => (str || '').replace(/^[Rr]0*/, '').trim().toUpperCase();
|
||||
if (selectedRoute && normalizeRouteNum(selectedRoute.number) !== normalizeRouteNum(rNum)) return null;
|
||||
@@ -174,7 +282,8 @@ export default function BusRouteMap({ selectedRoute }: BusRouteMapProps) {
|
||||
);
|
||||
})}
|
||||
|
||||
<MapPanFocus center={activeFocusCenter} />
|
||||
{/* Auto fit map bounds when selected route changes */}
|
||||
<MapPanFocus bounds={routeData?.bounds || null} />
|
||||
</MapContainer>
|
||||
|
||||
{/* Floating Info Card on Selected Route */}
|
||||
@@ -183,21 +292,21 @@ export default function BusRouteMap({ selectedRoute }: BusRouteMapProps) {
|
||||
<div className="flex items-center gap-2 mb-1.5">
|
||||
<span
|
||||
className="px-2.5 py-0.5 rounded-full text-xs font-bold text-white shadow-xs"
|
||||
style={{ backgroundColor: selectedRoute.color }}
|
||||
style={{ backgroundColor: selectedRoute.color || '#F97316' }}
|
||||
>
|
||||
{selectedRoute.number}
|
||||
</span>
|
||||
<span className="text-xs font-bold text-white">{selectedRoute.name}</span>
|
||||
</div>
|
||||
<div className="text-[11px] text-slate-300 space-y-1">
|
||||
<p>
|
||||
🏁 <strong>Start:</strong> {selectedRoute.from} ({selectedRoute.departureTime})
|
||||
<p className="flex items-center gap-1.5">
|
||||
<span className="text-emerald-400 font-bold">📍 Start:</span> {selectedRoute.from} ({selectedRoute.departureTime})
|
||||
</p>
|
||||
<p>
|
||||
🏫 <strong>Destination:</strong> RIT Campus ({selectedRoute.arrivalTime})
|
||||
<p className="flex items-center gap-1.5">
|
||||
<span className="text-orange-400 font-bold">🏫 Destination:</span> RIT Campus ({selectedRoute.arrivalTime})
|
||||
</p>
|
||||
<p>
|
||||
📍 <strong>Stops:</strong> {selectedRoute.stops.length} mapped stops
|
||||
<p className="text-slate-400 text-[10px] pt-0.5">
|
||||
📍 {selectedRoute.stops.length} mapped stops along route
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -58,32 +58,32 @@ export default function Navbar() {
|
||||
initial={{ y: -100, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.6, ease: 'easeOut' }}
|
||||
className="fixed top-4 left-1/2 -translate-x-1/2 z-50 w-[95%] max-w-6xl transition-all duration-300 shadow-[0_8px_32px_rgba(0,0,0,0.25)]"
|
||||
className="fixed top-4 left-1/2 -translate-x-1/2 z-50 w-[96%] max-w-7xl transition-all duration-300 shadow-[0_8px_32px_rgba(0,0,0,0.3)]"
|
||||
style={{
|
||||
background: 'linear-gradient(to right, rgba(15, 23, 42, 0.45) 0%, rgba(30, 41, 59, 0.35) 50%, rgba(15, 23, 42, 0.45) 100%)',
|
||||
background: 'linear-gradient(to right, rgba(15, 23, 42, 0.75) 0%, rgba(30, 41, 59, 0.65) 50%, rgba(15, 23, 42, 0.75) 100%)',
|
||||
backdropFilter: 'blur(16px)',
|
||||
WebkitBackdropFilter: 'blur(16px)',
|
||||
borderRadius: '20px',
|
||||
border: '1px solid rgba(255, 255, 255, 0.1)',
|
||||
border: '1px solid rgba(255, 255, 255, 0.15)',
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center justify-between px-5 py-2.5">
|
||||
<div className="flex items-center justify-between px-3.5 sm:px-5 py-2">
|
||||
{/* Logo - RIT Event Hub Style */}
|
||||
<a href="/" className="flex items-center gap-2 group">
|
||||
<a href="/" className="flex items-center gap-2 group shrink-0">
|
||||
{/* Logo Image */}
|
||||
<motion.img
|
||||
whileHover={{ scale: 1.05 }}
|
||||
src="/logo.png"
|
||||
alt="RIT Logo"
|
||||
className="w-10 h-10 object-contain rounded-full shrink-0"
|
||||
className="w-9 h-9 sm:w-10 sm:h-10 object-contain rounded-full shrink-0"
|
||||
/>
|
||||
|
||||
<div className="flex items-center">
|
||||
<span className="font-extrabold text-white text-2xl tracking-tighter" style={{ fontFamily: 'Poppins, sans-serif' }}>
|
||||
<span className="font-extrabold text-white text-xl sm:text-2xl tracking-tighter" style={{ fontFamily: 'Poppins, sans-serif' }}>
|
||||
rit
|
||||
</span>
|
||||
<div className="h-7 w-[1px] bg-white/20 mx-2" />
|
||||
<div className="flex flex-col text-[8.5px] font-bold text-slate-200 leading-tight tracking-wider" style={{ fontFamily: 'Inter, sans-serif' }}>
|
||||
<div className="h-6 sm:h-7 w-[1px] bg-white/20 mx-1.5 sm:mx-2" />
|
||||
<div className="hidden sm:flex flex-col text-[8px] sm:text-[8.5px] font-bold text-slate-200 leading-tight tracking-wider" style={{ fontFamily: 'Inter, sans-serif' }}>
|
||||
<span>RAJALAKSHMI</span>
|
||||
<span>INSTITUTE OF</span>
|
||||
<span>TECHNOLOGY</span>
|
||||
@@ -92,14 +92,14 @@ export default function Navbar() {
|
||||
</a>
|
||||
|
||||
{/* Desktop Nav */}
|
||||
<div className="hidden md:flex items-center gap-1">
|
||||
<div className="hidden lg:flex items-center gap-0.5 xl:gap-1">
|
||||
{NAV_LINKS.map((link) => {
|
||||
const isActive = checkIsActive(link.path);
|
||||
return (
|
||||
<Link
|
||||
key={link.path}
|
||||
to={link.path}
|
||||
className="relative px-1.5 lg:px-2.5 xl:px-3.5 py-1.5 rounded-lg text-[10px] lg:text-[11px] xl:text-xs font-semibold uppercase tracking-wider transition-all duration-200"
|
||||
className="relative px-2 xl:px-2.5 py-1.5 rounded-lg text-[10px] xl:text-[11px] font-bold uppercase tracking-wider transition-all duration-200"
|
||||
style={{
|
||||
fontFamily: 'Poppins, sans-serif',
|
||||
color: isActive ? '#FFFFFF' : '#CBD5E1',
|
||||
@@ -120,7 +120,7 @@ export default function Navbar() {
|
||||
</div>
|
||||
|
||||
{/* Right Side: Auth + Mobile Toggle */}
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
{/* Auth Section */}
|
||||
{isAuthenticated && user ? (
|
||||
<div className="relative" ref={profileRef}>
|
||||
@@ -140,8 +140,8 @@ export default function Navbar() {
|
||||
{user.name.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
)}
|
||||
<div className="hidden lg:flex flex-col items-start">
|
||||
<span className="text-white text-[11px] font-semibold leading-tight max-w-[100px] truncate">
|
||||
<div className="hidden xl:flex flex-col items-start">
|
||||
<span className="text-white text-[11px] font-semibold leading-tight max-w-[90px] truncate">
|
||||
{user.name.split(' ')[0]}
|
||||
</span>
|
||||
{isVerifiedStudent && (
|
||||
@@ -150,7 +150,7 @@ export default function Navbar() {
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<ChevronDown className="w-3 h-3 text-slate-400 hidden lg:block" />
|
||||
<ChevronDown className="w-3 h-3 text-slate-400 hidden xl:block" />
|
||||
</button>
|
||||
|
||||
{/* Profile Dropdown */}
|
||||
@@ -213,10 +213,10 @@ export default function Navbar() {
|
||||
</div>
|
||||
) : (
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.03 }}
|
||||
whileTap={{ scale: 0.97 }}
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
onClick={loginWithGoogle}
|
||||
className="hidden md:flex items-center gap-2 px-4 py-2 rounded-xl text-white text-[11px] font-semibold border border-white/15 hover:border-orange-500/40 hover:bg-white/5 transition-all cursor-pointer"
|
||||
className="flex items-center gap-1.5 px-3.5 py-1.5 rounded-xl text-white text-xs font-bold bg-gradient-to-r from-orange-500 to-amber-500 hover:from-orange-600 hover:to-amber-600 shadow-md shadow-orange-500/25 border border-orange-400/40 transition-all cursor-pointer shrink-0"
|
||||
style={{ fontFamily: 'Poppins, sans-serif' }}
|
||||
>
|
||||
<LogIn className="w-3.5 h-3.5" />
|
||||
|
||||
Reference in New Issue
Block a user