kasperj/turftracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

polygons

Browse Source
This commit is contained in:
Jake Kasper
2025-09-04 08:51:23 -05:00
parent b77c844da4
commit 658b5bb44d
1 changed files with 56 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
frontend/src/pages/Properties/PropertyDetail.js
View File

@@ -354,6 +354,8 @@ const PropertyDetail = () => {
const [gpsAccuracy, setGpsAccuracy] = useState(null);
const [isSnapPreview, setIsSnapPreview] = useState(false);
const [showAddMenu, setShowAddMenu] = useState(false);
// Modal picker to ensure options show reliably on mobile
const [showCaptureModeModal, setShowCaptureModeModal] = useState(false);
const [currentColor, setCurrentColor] = useState(SECTION_COLORS[0]);
const [showNameModal, setShowNameModal] = useState(false);
const [pendingSection, setPendingSection] = useState(null);
@@ -813,49 +815,14 @@ const PropertyDetail = () => {
</div>
<div className="relative">
<button
onClick={() => setShowAddMenu(v=>!v)}
onClick={() => setShowCaptureModeModal(true)}
className="btn-primary flex items-center gap-2"
title="Add a lawn section"
>
<PlusIcon className="h-5 w-5" />
Add Lawn Section
</button>
{showAddMenu && (
<div className="absolute right-0 mt-2 w-56 bg-white border rounded shadow-lg z-10">
<button
className="w-full text-left px-3 py-2 hover:bg-gray-50"
onClick={() => { setShowAddMenu(false); setIsDrawing(true); setIsGPSPointsMode(false); setIsGPSTraceMode(false); }}
>
Tap to Draw (manual)
</button>
<button
className="w-full text-left px-3 py-2 hover:bg-gray-50"
onClick={() => {
setShowAddMenu(false);
// Enable GPS points mode, disable trace
setIsGPSTraceMode(false);
setIsTracing(false);
if (gpsWatchId) { navigator.geolocation.clearWatch(gpsWatchId); setGpsWatchId(null); }
clearGpsPoints();
setIsGPSPointsMode(true);
}}
>
GPS Points (walk and mark)
</button>
<button
className="w-full text-left px-3 py-2 hover:bg-gray-50"
onClick={() => {
setShowAddMenu(false);
// Enable trace mode, disable points mode
setIsGPSPointsMode(false);
clearGpsPoints();
setIsGPSTraceMode(true);
}}
>
Trace Boundary (continuous)
</button>
</div>
)}
{/* Dropdown removed in favor of modal for reliability */}
</div>
</div>
@@ -1097,6 +1064,58 @@ const PropertyDetail = () => {
</div>
</div>
{/* Capture Mode Modal */}
{showCaptureModeModal && (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center" style={{ zIndex: 9999 }}>
<div className="bg-white rounded-lg p-6 w-96 max-w-[92vw] shadow-2xl">
<h3 className="text-lg font-semibold mb-4">Create Lawn Section</h3>
<div className="space-y-3">
<button
className="w-full px-4 py-3 border rounded hover:bg-gray-50 text-left"
onClick={() => {
setShowCaptureModeModal(false);
setIsDrawing(true);
setIsGPSPointsMode(false);
setIsGPSTraceMode(false);
}}
>
<div className="font-medium">Tap to Draw (manual)</div>
<div className="text-xs text-gray-600">Tap the map to add corners, double‑tap to finish.</div>
</button>
<button
className="w-full px-4 py-3 border rounded hover:bg-gray-50 text-left"
onClick={() => {
setShowCaptureModeModal(false);
setIsGPSTraceMode(false);
setIsTracing(false);
if (gpsWatchId) { navigator.geolocation.clearWatch(gpsWatchId); setGpsWatchId(null); }
clearGpsPoints();
setIsGPSPointsMode(true);
}}
>
<div className="font-medium">GPS Points (walk and mark)</div>
<div className="text-xs text-gray-600">Walk to each corner and tap “Mark Point”, then Complete.</div>
</button>
<button
className="w-full px-4 py-3 border rounded hover:bg-gray-50 text-left"
onClick={() => {
setShowCaptureModeModal(false);
setIsGPSPointsMode(false);
clearGpsPoints();
setIsGPSTraceMode(true);
}}
>
<div className="font-medium">Trace Boundary (continuous)</div>
<div className="text-xs text-gray-600">Start tracing and walk the perimeter. Pause as needed, then Complete.</div>
</button>
</div>
<div className="mt-4 flex justify-end">
<button className="btn-secondary" onClick={() => setShowCaptureModeModal(false)}>Cancel</button>
</div>
</div>
</div>
)}
{/* Recent History */}
<div className="mt-8">
<h2 className="text-lg font-semibold mb-3">Recent History</h2>