Move Geofence toggle button to map header next to Export
Relocated the "Show/Hide Geofences" toggle button from floating position (top-right corner) to the main header toolbar. **Changes:** - Moved toggle button to header, positioned between Export and Admin buttons - Converted showGeofences from local state to prop passed from parent - Button now matches header design system (same styling as Export/Admin) - Purple background when active, white when inactive - Better UX: All controls now in one consistent location **New Button Position:** Export | Show/Hide Geofences | Admin | Logout Much cleaner and more intuitive than the floating button! 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -22,6 +22,7 @@ interface MapViewProps {
|
||||
filterMode: "quick" | "custom";
|
||||
startTime: string; // datetime-local format
|
||||
endTime: string; // datetime-local format
|
||||
showGeofences: boolean;
|
||||
}
|
||||
|
||||
interface DeviceInfo {
|
||||
@@ -67,14 +68,13 @@ function SetViewOnChange({
|
||||
return null;
|
||||
}
|
||||
|
||||
export default function MapView({ selectedDevice, timeFilter, isPaused, filterMode, startTime, endTime }: MapViewProps) {
|
||||
export default function MapView({ selectedDevice, timeFilter, isPaused, filterMode, startTime, endTime, showGeofences }: MapViewProps) {
|
||||
const [locations, setLocations] = useState<Location[]>([]);
|
||||
const [devices, setDevices] = useState<Record<string, DeviceInfo>>({});
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [mapCenter, setMapCenter] = useState<[number, number] | null>(null);
|
||||
const [currentZoom, setCurrentZoom] = useState(12);
|
||||
const [showGeofences, setShowGeofences] = useState(true);
|
||||
const intervalRef = useRef<NodeJS.Timeout | null>(null);
|
||||
|
||||
// Add animation styles for latest marker
|
||||
@@ -228,22 +228,7 @@ export default function MapView({ selectedDevice, timeFilter, isPaused, filterMo
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-full w-full relative">
|
||||
{/* Geofence Toggle Button */}
|
||||
<div className="absolute top-4 right-4 z-[1000]">
|
||||
<button
|
||||
onClick={() => setShowGeofences(!showGeofences)}
|
||||
className={`px-4 py-2 rounded-lg shadow-lg font-semibold text-sm transition-all ${
|
||||
showGeofences
|
||||
? "bg-purple-600 text-white hover:bg-purple-700"
|
||||
: "bg-white text-gray-700 hover:bg-gray-100"
|
||||
}`}
|
||||
title={showGeofences ? "Hide Geofences" : "Show Geofences"}
|
||||
>
|
||||
📍 {showGeofences ? "Hide" : "Show"} Geofences
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="h-full w-full">
|
||||
<MapContainer
|
||||
center={[48.1351, 11.582]}
|
||||
zoom={12}
|
||||
|
||||
Reference in New Issue
Block a user