834 lines
46 KiB
JavaScript
834 lines
46 KiB
JavaScript
import React, { useEffect, useMemo, useState } from 'react';
|
||
import { MapContainer, TileLayer, Polygon, Marker, Circle, Rectangle, Popup, useMapEvents, useMap, Polyline } from 'react-leaflet';
|
||
import { Icon } from 'leaflet';
|
||
import 'leaflet/dist/leaflet.css';
|
||
import { propertiesAPI, wateringAPI, equipmentAPI } from '../../services/api';
|
||
import toast from 'react-hot-toast';
|
||
|
||
const SprinklerPlacement = ({ onPlace }) => {
|
||
useMapEvents({
|
||
click(e) { onPlace([e.latlng.lat, e.latlng.lng]); }
|
||
});
|
||
return null;
|
||
};
|
||
|
||
const computeCoverage = (sprinkler) => {
|
||
if (sprinkler.type === 'rotor_impact' || sprinkler.type === 'spray_fixed') {
|
||
return { kind: 'circle', radius: sprinkler.throwFeet, degrees: sprinkler.degrees || 360 };
|
||
}
|
||
if (sprinkler.type === 'oscillating_fan') {
|
||
const L = sprinkler.lengthFeet || 0; const W = sprinkler.widthFeet || 0;
|
||
return { kind: 'rect', length: L, width: W };
|
||
}
|
||
return null;
|
||
};
|
||
|
||
const Watering = () => {
|
||
const [properties, setProperties] = useState([]);
|
||
const [selectedProperty, setSelectedProperty] = useState(null);
|
||
const [sections, setSections] = useState([]);
|
||
const [placing, setPlacing] = useState(false);
|
||
const [sprinklerForm, setSprinklerForm] = useState({
|
||
mount: 'above_ground',
|
||
type: 'rotor_impact',
|
||
gpm: 2.5,
|
||
throwFeet: 20,
|
||
degrees: 360,
|
||
lengthFeet: 30,
|
||
widthFeet: 20,
|
||
durationMinutes: 60
|
||
});
|
||
const [plan, setPlan] = useState(null);
|
||
const [plans, setPlans] = useState([]);
|
||
const [points, setPoints] = useState([]);
|
||
const [guiding, setGuiding] = useState(false);
|
||
const [guideIndex, setGuideIndex] = useState(0);
|
||
const [currentPos, setCurrentPos] = useState(null);
|
||
const [watchId, setWatchId] = useState(null);
|
||
const [sprinklers, setSprinklers] = useState([]);
|
||
const [selectedSprinklerId, setSelectedSprinklerId] = useState('');
|
||
const [selectedPointId, setSelectedPointId] = useState(null);
|
||
const selectedPoint = useMemo(()=> points.find(p=> p.id===selectedPointId), [points, selectedPointId]);
|
||
const sortedPoints = useMemo(() => {
|
||
return [...points].sort((a,b) => (Number(a.sequence||0)) - (Number(b.sequence||0)) || (Number(a.id)-Number(b.id)));
|
||
}, [points]);
|
||
const [editForm, setEditForm] = useState(null);
|
||
const [satellite, setSatellite] = useState(false);
|
||
const [rename, setRename] = useState('');
|
||
|
||
// Distinct colors for points
|
||
const palette = ['#ef4444','#f59e0b','#10b981','#3b82f6','#8b5cf6','#ec4899','#14b8a6','#84cc16','#f97316','#06b6d4','#a855f7','#22c55e'];
|
||
const pointColor = (pt) => {
|
||
const idx = points.findIndex(p=> p.id===pt.id);
|
||
return palette[(idx>=0? idx:0) % palette.length];
|
||
};
|
||
const iconCache = useMemo(()=> ({}), []);
|
||
const markerIcon = (color) => {
|
||
if (iconCache[color]) return iconCache[color];
|
||
const svg = `\n <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">\n <circle cx="8" cy="8" r="6.5" fill="${color}" stroke="white" stroke-width="2"/>\n </svg>`;
|
||
const ic = new Icon({
|
||
iconUrl: 'data:image/svg+xml;base64,' + btoa(svg),
|
||
iconSize: [16,16],
|
||
iconAnchor: [8,8]
|
||
});
|
||
iconCache[color] = ic;
|
||
return ic;
|
||
};
|
||
|
||
// Select a point helper (for popup+state sync)
|
||
const onSelectPoint = (pt) => {
|
||
setSelectedPointId(pt.id);
|
||
setEditForm({
|
||
durationMinutes: pt.duration_minutes || 0,
|
||
mountType: pt.sprinkler_mount,
|
||
sprinklerHeadType: pt.sprinkler_head_type,
|
||
gpm: Number(pt.sprinkler_gpm||0),
|
||
throwFeet: Number(pt.sprinkler_throw_feet||0),
|
||
degrees: Number(pt.sprinkler_degrees||360),
|
||
lengthFeet: Number(pt.sprinkler_length_feet||0),
|
||
widthFeet: Number(pt.sprinkler_width_feet||0),
|
||
headingDegrees: Number(pt.sprinkler_heading_degrees||0)
|
||
});
|
||
};
|
||
|
||
// Optimistic local patch + save to server
|
||
const applyLocalPatch = (id, patch) => {
|
||
setPoints(prev => prev.map(p => p.id === id ? { ...p,
|
||
sprinkler_degrees: patch.degrees !== undefined ? patch.degrees : p.sprinkler_degrees,
|
||
sprinkler_heading_degrees: patch.headingDegrees !== undefined ? patch.headingDegrees : p.sprinkler_heading_degrees,
|
||
sprinkler_throw_feet: patch.throwFeet !== undefined ? patch.throwFeet : p.sprinkler_throw_feet,
|
||
sprinkler_length_feet: patch.lengthFeet !== undefined ? patch.lengthFeet : p.sprinkler_length_feet,
|
||
sprinkler_width_feet: patch.widthFeet !== undefined ? patch.widthFeet : p.sprinkler_width_feet,
|
||
duration_minutes: patch.durationMinutes !== undefined ? patch.durationMinutes : p.duration_minutes,
|
||
lat: patch.lat !== undefined ? patch.lat : p.lat,
|
||
lng: patch.lng !== undefined ? patch.lng : p.lng
|
||
} : p));
|
||
};
|
||
|
||
const updatePointField = async (id, patch) => {
|
||
try {
|
||
applyLocalPatch(id, patch);
|
||
if (id === selectedPointId) {
|
||
setEditForm(prev => prev ? {
|
||
...prev,
|
||
degrees: patch.degrees !== undefined ? patch.degrees : prev.degrees,
|
||
headingDegrees: patch.headingDegrees !== undefined ? patch.headingDegrees : prev.headingDegrees,
|
||
throwFeet: patch.throwFeet !== undefined ? patch.throwFeet : prev.throwFeet,
|
||
lengthFeet: patch.lengthFeet !== undefined ? patch.lengthFeet : prev.lengthFeet,
|
||
widthFeet: patch.widthFeet !== undefined ? patch.widthFeet : prev.widthFeet,
|
||
durationMinutes: patch.durationMinutes !== undefined ? patch.durationMinutes : prev.durationMinutes,
|
||
} : prev);
|
||
}
|
||
const r = await wateringAPI.updatePoint(id, patch);
|
||
const np = r.data?.data?.point;
|
||
setPoints(prev => prev.map(p=> p.id===id? np: p));
|
||
} catch(e){ toast.error('Failed to update point'); }
|
||
};
|
||
|
||
const nudgePointLocation = (pt, dxFeet, dyFeet) => {
|
||
const lat = Number(pt.lat), lng = Number(pt.lng);
|
||
const Rlat = 111320; // meters per degree lat
|
||
const Rlng = Math.cos(lat*Math.PI/180)*111320; // meters per degree lng
|
||
const dxm = dxFeet*0.3048; // east-west
|
||
const dym = dyFeet*0.3048; // north-south
|
||
const newLat = lat + (dym / Rlat);
|
||
const newLng = lng + (dxm / Rlng);
|
||
updatePointField(pt.id, { lat: newLat, lng: newLng });
|
||
};
|
||
|
||
const adjustHeading = (pt, delta) => {
|
||
const cur = Number(pt.sprinkler_heading_degrees || 0);
|
||
let next = (cur + delta) % 360; if (next < 0) next += 360;
|
||
updatePointField(pt.id, { headingDegrees: next });
|
||
};
|
||
|
||
useEffect(() => { (async () => {
|
||
try {
|
||
const [pr, eq] = await Promise.all([propertiesAPI.getAll(), equipmentAPI.getAll()]);
|
||
setProperties(pr.data?.data?.properties||[]);
|
||
const list = (eq.data?.data?.equipment||[]).filter(e => (e.categoryName||'').toLowerCase()==='sprinkler');
|
||
setSprinklers(list);
|
||
}
|
||
catch(e){ toast.error('Failed to load properties'); }
|
||
})(); }, []);
|
||
|
||
const loadProperty = async (pid) => {
|
||
try {
|
||
const r = await propertiesAPI.getById(pid); const p = r.data?.data?.property; setSelectedProperty(p);
|
||
const secs = (p.sections||[]).map(s => ({ ...s, polygonData: typeof s.polygonData === 'string' ? JSON.parse(s.polygonData) : s.polygonData }));
|
||
setSections(secs);
|
||
// Load existing watering plans for this property
|
||
const pl = await wateringAPI.getPlans({ property_id: pid });
|
||
const plansList = pl.data?.data?.plans || [];
|
||
setPlans(plansList);
|
||
if (plansList.length) {
|
||
const sel = plansList[0];
|
||
setPlan(sel);
|
||
const pts = await wateringAPI.getPlanPoints(sel.id);
|
||
setPoints(pts.data?.data?.points || []);
|
||
} else {
|
||
setPlan(null);
|
||
setPoints([]);
|
||
}
|
||
}
|
||
catch(e){ toast.error('Failed to load property'); }
|
||
};
|
||
|
||
const ensurePlan = async () => {
|
||
if (plan) return plan;
|
||
if (!selectedProperty) { toast.error('Select a property first'); return null; }
|
||
try {
|
||
const r = await wateringAPI.createPlan({ propertyId: selectedProperty.id, name: `Sprinklers` });
|
||
const newPlan = r.data?.data?.plan;
|
||
setPlan(newPlan);
|
||
// refresh list and clear points
|
||
const pl = await wateringAPI.getPlans({ property_id: selectedProperty.id });
|
||
setPlans(pl.data?.data?.plans || []);
|
||
setPoints([]);
|
||
return newPlan;
|
||
}
|
||
catch(e){ toast.error('Failed to create plan'); return null; }
|
||
};
|
||
|
||
const selectPlan = async (planId) => {
|
||
const p = (plans||[]).find(pl=> pl.id === parseInt(planId));
|
||
setPlan(p || null);
|
||
if (p) {
|
||
try {
|
||
const rs = await wateringAPI.getPlanPoints(p.id);
|
||
setPoints(rs.data?.data?.points || []);
|
||
} catch(e){ toast.error('Failed to load plan points'); setPoints([]); }
|
||
} else {
|
||
setPoints([]);
|
||
}
|
||
};
|
||
|
||
const onPlace = async (latlng) => {
|
||
const p = await ensurePlan(); if (!p) return;
|
||
try {
|
||
const eq = sprinklers.find(s=> s.id === (selectedSprinklerId? parseInt(selectedSprinklerId): -1));
|
||
const base = eq ? {
|
||
mount: eq.sprinklerMount || sprinklerForm.mount,
|
||
type: eq.sprinklerHeadType || sprinklerForm.type,
|
||
gpm: eq.sprinklerGpm || sprinklerForm.gpm,
|
||
throwFeet: eq.sprinklerThrowFeet || sprinklerForm.throwFeet,
|
||
degrees: (eq.sprinklerDegrees !== undefined && eq.sprinklerDegrees !== null) ? eq.sprinklerDegrees : sprinklerForm.degrees,
|
||
lengthFeet: eq.sprinklerLengthFeet || sprinklerForm.lengthFeet,
|
||
widthFeet: eq.sprinklerWidthFeet || sprinklerForm.widthFeet
|
||
} : sprinklerForm;
|
||
const payload = {
|
||
lat: latlng[0], lng: latlng[1], durationMinutes: sprinklerForm.durationMinutes,
|
||
mountType: base.mount,
|
||
sprinklerHeadType: base.type,
|
||
gpm: base.gpm,
|
||
throwFeet: base.throwFeet,
|
||
degrees: base.degrees,
|
||
lengthFeet: base.lengthFeet,
|
||
widthFeet: base.widthFeet,
|
||
headingDegrees: sprinklerForm.headingDegrees || 0,
|
||
equipmentId: eq ? eq.id : null,
|
||
equipmentName: eq ? (eq.customName || `${eq.manufacturer||''} ${eq.model||''}`.trim()) : null
|
||
};
|
||
const r = await wateringAPI.addPlanPoint(p.id, payload);
|
||
setPoints(prev => [...prev, r.data?.data?.point]);
|
||
toast.success('Sprinkler location added');
|
||
setPlacing(false);
|
||
} catch(e){ toast.error('Failed to add sprinkler point'); }
|
||
};
|
||
|
||
const center = useMemo(() => {
|
||
if (selectedProperty?.latitude && selectedProperty?.longitude) return [Number(selectedProperty.latitude), Number(selectedProperty.longitude)];
|
||
if (sections?.length){
|
||
const pts = sections.flatMap(s => (s.polygonData?.coordinates?.[0]||[]));
|
||
if (pts.length){ const lat = pts.reduce((a,p)=> a + Number(p[0]), 0) / pts.length; const lng = pts.reduce((a,p)=> a + Number(p[1]), 0) / pts.length; return [lat, lng]; }
|
||
}
|
||
return [39.8,-98.6];
|
||
}, [selectedProperty, sections]);
|
||
|
||
const CenterOnChange = ({ center }) => {
|
||
const map = useMap();
|
||
useEffect(() => { if (center && Array.isArray(center)) map.setView(center); }, [center, map]);
|
||
return null;
|
||
};
|
||
|
||
useEffect(() => {
|
||
setRename(plan?.name || '');
|
||
}, [plan]);
|
||
|
||
const startGuidance = () => {
|
||
if (points.length === 0) { toast.error('Add at least one point'); return; }
|
||
if (!navigator.geolocation) { toast.error('GPS not available'); return; }
|
||
setGuiding(true); setGuideIndex(0);
|
||
const id = navigator.geolocation.watchPosition(pos => {
|
||
setCurrentPos({ lat: pos.coords.latitude, lng: pos.coords.longitude });
|
||
}, err => { console.warn(err); toast.error('GPS error'); }, { enableHighAccuracy:true, maximumAge: 1000, timeout: 10000 });
|
||
setWatchId(id);
|
||
};
|
||
|
||
const stopGuidance = () => { if (watchId){ navigator.geolocation.clearWatch(watchId); setWatchId(null);} setGuiding(false); };
|
||
|
||
const distanceFeet = (a,b) => {
|
||
const R=6371000; const toRad=d=>d*Math.PI/180;
|
||
const dLat=toRad(b.lat-a.lat); const dLng=toRad(b.lng-a.lng);
|
||
const A=Math.sin(dLat/2)**2 + Math.cos(toRad(a.lat))*Math.cos(toRad(b.lat))*Math.sin(dLng/2)**2;
|
||
return (2*R*Math.atan2(Math.sqrt(A),Math.sqrt(1-A)))*3.28084;
|
||
};
|
||
|
||
const bearingDegrees = (a,b) => {
|
||
const toRad = d=> d*Math.PI/180, toDeg = r=> (r*180/Math.PI+360)%360;
|
||
const lat1 = toRad(a.lat), lat2 = toRad(b.lat);
|
||
const dLng = toRad(b.lng - a.lng);
|
||
const y = Math.sin(dLng) * Math.cos(lat2);
|
||
const x = Math.cos(lat1)*Math.sin(lat2) - Math.sin(lat1)*Math.cos(lat2)*Math.cos(dLng);
|
||
return Math.round(toDeg(Math.atan2(y,x)));
|
||
};
|
||
|
||
// Build sector polygon (approx) for Leaflet
|
||
const sectorPolygon = (center, radiusFeet, startDeg, endDeg, steps=60) => {
|
||
const [clat, clng] = [Number(center.lat), Number(center.lng)];
|
||
const Rlat = 111320; // meters per degree lat
|
||
const Rlng = Math.cos(clat*Math.PI/180)*111320; // meters per degree lng
|
||
const rm = radiusFeet*0.3048; // meters
|
||
const pts = [];
|
||
const start = startDeg*Math.PI/180; const end = endDeg*Math.PI/180;
|
||
const span = end - start;
|
||
const n = Math.max(8, Math.round(steps*Math.abs(span)/(2*Math.PI)));
|
||
pts.push([clat, clng]);
|
||
for (let i=0;i<=n;i++){
|
||
const ang = start + (span*i/n);
|
||
const dx = rm * Math.cos(ang);
|
||
const dy = rm * Math.sin(ang);
|
||
const lat = clat + (dy / Rlat);
|
||
const lng = clng + (dx / Rlng);
|
||
pts.push([lat, lng]);
|
||
}
|
||
pts.push([clat, clng]);
|
||
return pts;
|
||
};
|
||
|
||
const coverageSqft = useMemo(() => {
|
||
const type = sprinklerForm.type;
|
||
if (type==='rotor_impact' || type==='spray_fixed') {
|
||
const r = Number(sprinklerForm.throwFeet||0); const deg=Number(sprinklerForm.degrees||360);
|
||
return Math.PI * r * r * (deg/360);
|
||
}
|
||
if (type==='oscillating_fan') {
|
||
return Number(sprinklerForm.lengthFeet||0) * Number(sprinklerForm.widthFeet||0);
|
||
}
|
||
return 0;
|
||
}, [sprinklerForm]);
|
||
const [targetInches, setTargetInches] = useState(0.5);
|
||
const suggestMinutes = useMemo(() => {
|
||
const gpm = Number(sprinklerForm.gpm||0);
|
||
if (!gpm || !coverageSqft || !targetInches) return 0;
|
||
const gallonsNeeded = coverageSqft * targetInches * 0.623; // gal per sqft-inch
|
||
return Math.ceil((gallonsNeeded / gpm));
|
||
}, [sprinklerForm.gpm, coverageSqft, targetInches]);
|
||
|
||
|
||
|
||
return (
|
||
<div className="p-6">
|
||
<h1 className="text-2xl font-bold mb-4">Watering - Sprinklers</h1>
|
||
<div className="grid grid-cols-1 lg:grid-cols-4 gap-4">
|
||
<div className="lg:col-span-1 space-y-4">
|
||
<div className="card">
|
||
<div className="font-medium mb-2">Plan Points</div>
|
||
<ul className="text-sm space-y-1 max-h-64 overflow-auto">
|
||
{sortedPoints.map((pt, idx) => (
|
||
<li key={pt.id}
|
||
className={(pt.id===selectedPointId? 'bg-blue-50 ' : '') + 'rounded px-2 py-1 hover:bg-gray-50 cursor-pointer flex items-center gap-2 justify-between'}
|
||
onClick={()=> onSelectPoint(pt)}>
|
||
<span className="flex items-center gap-2">
|
||
<span style={{backgroundColor: pointColor(pt)}} className="inline-block w-3 h-3 rounded-full"></span>
|
||
<span className="font-mono text-xs">#{idx+1}</span>
|
||
<span className="text-xs">{Number(pt.lat).toFixed(5)}, {Number(pt.lng).toFixed(5)}</span>
|
||
</span>
|
||
<span className="text-[11px] text-gray-600">
|
||
{pt.equipment_name || (pt.sprinkler_head_type||'-').replace('_',' ')}
|
||
{pt.sprinkler_throw_feet ? ` • ${Number(pt.sprinkler_throw_feet)}ft` : ''}
|
||
{pt.sprinkler_degrees ? ` • ${pt.sprinkler_degrees}°` : ''}
|
||
</span>
|
||
</li>
|
||
))}
|
||
{points.length===0 && <li className="text-gray-500">No points yet</li>}
|
||
</ul>
|
||
{selectedPoint && editForm && (
|
||
<div className="mt-3 border-t pt-3 space-y-2">
|
||
<div className="font-medium">Selected Details</div>
|
||
<div className="text-xs text-gray-700">
|
||
{selectedPoint?.equipment_name ? (<>
|
||
<span className="font-semibold">{selectedPoint.equipment_name}</span> •
|
||
</>) : null}
|
||
Type: {editForm.sprinklerHeadType || '-'} • GPM: {editForm.gpm || '-'} • Duration: {editForm.durationMinutes||0}m
|
||
</div>
|
||
{(editForm.sprinklerHeadType==='rotor_impact' || editForm.sprinklerHeadType==='spray_fixed') ? (
|
||
<div className="text-xs text-gray-700">Throw: {editForm.throwFeet||0} ft • Degrees: {editForm.degrees||0}° • Heading: {editForm.headingDegrees||0}°</div>
|
||
) : (
|
||
<div className="text-xs text-gray-700">Length: {editForm.lengthFeet||0} ft • Width: {editForm.widthFeet||0} ft • Heading: {editForm.headingDegrees||0}°</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div className="card">
|
||
<label className="block text-sm font-medium mb-1">Property</label>
|
||
<select className="input" value={selectedProperty?.id||''} onChange={(e)=> loadProperty(parseInt(e.target.value))}>
|
||
<option value="">Select property</option>
|
||
{properties.map(p=> (<option key={p.id} value={p.id}>{p.name}</option>))}
|
||
</select>
|
||
</div>
|
||
<div className="card space-y-2">
|
||
<div className="font-medium">Plan</div>
|
||
<select className="input w-full" value={plan?.id || ''} onChange={(e)=> selectPlan(e.target.value)} disabled={!selectedProperty}>
|
||
<option value="">-- Select plan --</option>
|
||
{plans.map(pl => (<option key={pl.id} value={pl.id}>{pl.name}</option>))}
|
||
</select>
|
||
<div className="flex gap-2 items-center flex-wrap">
|
||
<button className="btn-secondary" disabled={!selectedProperty} onClick={async ()=>{
|
||
const name = `Sprinklers ${new Date().toLocaleDateString()}`;
|
||
const r = await wateringAPI.createPlan({ propertyId: selectedProperty.id, name });
|
||
const np = r.data?.data?.plan; setPlan(np);
|
||
const pl = await wateringAPI.getPlans({ property_id: selectedProperty.id });
|
||
setPlans(pl.data?.data?.plans || []); setPoints([]);
|
||
}}>New</button>
|
||
{plan && (
|
||
<button className="btn-secondary" onClick={async ()=>{
|
||
const name = `${plan.name} (Copy ${new Date().toLocaleDateString()})`;
|
||
const rs = await wateringAPI.duplicatePlan(plan.id, { name });
|
||
const np = rs.data?.data?.plan; setPlan(np);
|
||
const pl = await wateringAPI.getPlans({ property_id: selectedProperty.id });
|
||
setPlans(pl.data?.data?.plans || []);
|
||
const pts = await wateringAPI.getPlanPoints(np.id);
|
||
setPoints(pts.data?.data?.points || []);
|
||
}}>Duplicate</button>
|
||
)}
|
||
{plan && (
|
||
<button className="btn-secondary text-red-600 border-red-300" onClick={async ()=>{
|
||
if (!window.confirm('Delete this plan and all points?')) return;
|
||
await wateringAPI.deletePlan(plan.id);
|
||
const pl = await wateringAPI.getPlans({ property_id: selectedProperty.id });
|
||
const list = pl.data?.data?.plans || [];
|
||
setPlans(list);
|
||
setPlan(list[0] || null);
|
||
if (list[0]){
|
||
const rs = await wateringAPI.getPlanPoints(list[0].id);
|
||
setPoints(rs.data?.data?.points || []);
|
||
} else {
|
||
setPoints([]);
|
||
}
|
||
}}>Delete</button>
|
||
)}
|
||
</div>
|
||
{plan && (
|
||
<div className="flex gap-2 mt-2">
|
||
<input className="input flex-1" placeholder="Rename plan" value={rename} onChange={(e)=> setRename(e.target.value)} />
|
||
<button className="btn-primary" onClick={async ()=>{
|
||
if (!rename.trim()) return;
|
||
const rs = await wateringAPI.updatePlan(plan.id, { name: rename.trim() });
|
||
const up = rs.data?.data?.plan; setPlan(up);
|
||
const pl = await wateringAPI.getPlans({ property_id: selectedProperty.id });
|
||
setPlans(pl.data?.data?.plans || []);
|
||
}}>Save</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div className="card space-y-2">
|
||
<div className="font-medium">Sprinkler Settings</div>
|
||
<div className="text-sm">Choose Saved Sprinkler</div>
|
||
<select className="input" value={selectedSprinklerId} onChange={(e)=> {
|
||
const val=e.target.value; setSelectedSprinklerId(val);
|
||
const eq = sprinklers.find(s=> s.id === parseInt(val));
|
||
if (eq) {
|
||
setSprinklerForm(sf=> ({...sf,
|
||
mount: eq.sprinklerMount || sf.mount,
|
||
type: eq.sprinklerHeadType || sf.type,
|
||
gpm: eq.sprinklerGpm || sf.gpm,
|
||
throwFeet: eq.sprinklerThrowFeet || sf.throwFeet,
|
||
degrees: (eq.sprinklerDegrees !== undefined && eq.sprinklerDegrees !== null) ? eq.sprinklerDegrees : sf.degrees,
|
||
lengthFeet: eq.sprinklerLengthFeet || sf.lengthFeet,
|
||
widthFeet: eq.sprinklerWidthFeet || sf.widthFeet
|
||
}));
|
||
}
|
||
}}>
|
||
<option value="">-- none --</option>
|
||
{sprinklers.map(s=> (
|
||
<option key={s.id} value={s.id}>{s.customName || `${s.manufacturer||''} ${s.model||''}`.trim()}</option>
|
||
))}
|
||
</select>
|
||
{(!selectedSprinklerId) && (
|
||
<SaveSprinklerInline
|
||
current={sprinklerForm}
|
||
onSaved={async (newEq)=>{
|
||
// refresh list
|
||
const eq = await equipmentAPI.getAll();
|
||
const list = (eq.data?.data?.equipment||[]).filter(e => (e.categoryName||'').toLowerCase()==='sprinkler');
|
||
setSprinklers(list);
|
||
setSelectedSprinklerId(String(newEq.id));
|
||
}}
|
||
/>
|
||
)}
|
||
<div className="text-sm">Mount</div>
|
||
<select className="input" value={sprinklerForm.mount} onChange={e=> setSprinklerForm({...sprinklerForm, mount:e.target.value})}>
|
||
<option value="in_ground">In‑Ground</option>
|
||
<option value="above_ground">Above‑Ground</option>
|
||
</select>
|
||
<div className="text-sm">Type</div>
|
||
<select className="input" value={sprinklerForm.type} onChange={e=> setSprinklerForm({...sprinklerForm, type:e.target.value})}>
|
||
<option value="rotor_impact">Rotor/Impact</option>
|
||
<option value="oscillating_fan">Oscillating/Fan</option>
|
||
<option value="spray_fixed">Spray (Fixed)</option>
|
||
</select>
|
||
{sprinklerForm.type === 'rotor_impact' || sprinklerForm.type === 'spray_fixed' ? (
|
||
<>
|
||
<div className="text-sm">GPM</div>
|
||
<input type="number" step="0.1" className="input" value={sprinklerForm.gpm} onChange={e=> setSprinklerForm({...sprinklerForm, gpm: parseFloat(e.target.value)})} />
|
||
<div className="text-sm">Throw distance (ft)</div>
|
||
<input type="number" step="0.1" className="input" value={sprinklerForm.throwFeet} onChange={e=> setSprinklerForm({...sprinklerForm, throwFeet: parseFloat(e.target.value)})} />
|
||
<div className="text-sm">Degrees (0‑360)</div>
|
||
<input type="number" className="input" value={sprinklerForm.degrees} onChange={e=> setSprinklerForm({...sprinklerForm, degrees: parseInt(e.target.value||'0',10)})} />
|
||
<div className="text-sm">Heading (0‑359, 0 = East)</div>
|
||
<input type="number" className="input" value={sprinklerForm.headingDegrees||0} onChange={e=> setSprinklerForm({...sprinklerForm, headingDegrees: (parseInt(e.target.value||'0',10)||0)%360})} />
|
||
</>
|
||
) : (
|
||
<>
|
||
<div className="text-sm">Length (ft)</div>
|
||
<input type="number" step="0.1" className="input" value={sprinklerForm.lengthFeet} onChange={e=> setSprinklerForm({...sprinklerForm, lengthFeet: parseFloat(e.target.value)})} />
|
||
<div className="text-sm">Width (ft)</div>
|
||
<input type="number" step="0.1" className="input" value={sprinklerForm.widthFeet} onChange={e=> setSprinklerForm({...sprinklerForm, widthFeet: parseFloat(e.target.value)})} />
|
||
</>
|
||
)}
|
||
<div className="text-sm">Target Depth (inches)</div>
|
||
<input type="number" step="0.1" className="input" value={targetInches} onChange={e=> setTargetInches(parseFloat(e.target.value||'0'))} />
|
||
<div className="text-xs text-gray-600">Suggested runtime: {suggestMinutes} minutes {sprinklerForm.gpm? '' : '(enter GPM to calculate)'}
|
||
</div>
|
||
<div className="text-sm">Run Duration (minutes)</div>
|
||
<input type="number" className="input" value={sprinklerForm.durationMinutes} onChange={e=> setSprinklerForm({...sprinklerForm, durationMinutes: parseInt(e.target.value||'0',10)})} />
|
||
<button className="btn-primary w-full" disabled={!selectedProperty} onClick={()=> setPlacing(true)}>Place Sprinkler on Map</button>
|
||
</div>
|
||
<div className="card">
|
||
{selectedPoint && editForm && (
|
||
<div className="space-y-2">
|
||
<div className="font-medium">Edit Selected</div>
|
||
<div>
|
||
<label className="text-xs">Saved Sprinkler</label>
|
||
<div className="flex gap-2 items-center">
|
||
<select className="input flex-1" value={selectedPoint?.equipment_id || ''} onChange={async (e)=>{
|
||
const val = e.target.value;
|
||
if (!val) {
|
||
await updatePointField(selectedPointId, { equipmentId: null, equipmentName: null });
|
||
return;
|
||
}
|
||
const eq = sprinklers.find(s=> s.id === parseInt(val));
|
||
if (eq) {
|
||
await updatePointField(selectedPointId, {
|
||
equipmentId: eq.id,
|
||
equipmentName: eq.customName || `${eq.manufacturer||''} ${eq.model||''}`.trim()
|
||
});
|
||
}
|
||
}}>
|
||
<option value="">-- none --</option>
|
||
{sprinklers.map(s=> (
|
||
<option key={s.id} value={s.id}>{s.customName || `${s.manufacturer||''} ${s.model||''}`.trim()}</option>
|
||
))}
|
||
</select>
|
||
{selectedPoint?.equipment_id && (
|
||
<button className="btn-secondary" onClick={async ()=>{
|
||
await updatePointField(selectedPointId, { equipmentId: null, equipmentName: null });
|
||
}}>Unlink</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
{(editForm.sprinklerHeadType==='rotor_impact' || editForm.sprinklerHeadType==='spray_fixed') ? (
|
||
<>
|
||
<label className="text-xs">Degrees</label>
|
||
<input type="number" className="input" value={editForm.degrees}
|
||
onChange={(e)=> setEditForm({...editForm, degrees: parseInt(e.target.value||'0',10)})} />
|
||
<label className="text-xs">Heading</label>
|
||
<input type="number" className="input" value={editForm.headingDegrees}
|
||
onChange={(e)=> setEditForm({...editForm, headingDegrees: parseInt(e.target.value||'0',10)%360})} />
|
||
<label className="text-xs">Throw (ft)</label>
|
||
<input type="number" step="0.1" className="input" value={editForm.throwFeet}
|
||
onChange={(e)=> setEditForm({...editForm, throwFeet: parseFloat(e.target.value||'0')})} />
|
||
</>
|
||
) : (
|
||
<>
|
||
<label className="text-xs">Length (ft)</label>
|
||
<input type="number" step="0.1" className="input" value={editForm.lengthFeet}
|
||
onChange={(e)=> setEditForm({...editForm, lengthFeet: parseFloat(e.target.value||'0')})} />
|
||
<label className="text-xs">Width (ft)</label>
|
||
<input type="number" step="0.1" className="input" value={editForm.widthFeet}
|
||
onChange={(e)=> setEditForm({...editForm, widthFeet: parseFloat(e.target.value||'0')})} />
|
||
<label className="text-xs">Heading</label>
|
||
<input type="number" className="input" value={editForm.headingDegrees}
|
||
onChange={(e)=> setEditForm({...editForm, headingDegrees: parseInt(e.target.value||'0',10)%360})} />
|
||
</>
|
||
)}
|
||
<label className="text-xs">Duration (min)</label>
|
||
<input type="number" className="input" value={editForm.durationMinutes}
|
||
onChange={(e)=> setEditForm({...editForm, durationMinutes: parseInt(e.target.value||'0',10)})} />
|
||
<div className="flex gap-2">
|
||
<button className="btn-primary flex-1" onClick={async ()=>{
|
||
await updatePointField(selectedPointId, editForm);
|
||
}}>Save</button>
|
||
<button className="btn-secondary" onClick={async ()=>{
|
||
await wateringAPI.deletePoint(selectedPointId);
|
||
if (plan) {
|
||
const rs = await wateringAPI.getPlanPoints(plan.id);
|
||
setPoints(rs.data?.data?.points || []);
|
||
} else {
|
||
setPoints(prev=> prev.filter(p=> p.id!==selectedPointId));
|
||
}
|
||
setSelectedPointId(null); setEditForm(null);
|
||
}}>Delete</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
{!selectedPoint && <div className="text-sm text-gray-500">Select a point to edit</div>}
|
||
</div>
|
||
</div>
|
||
<div className="lg:col-span-3">
|
||
<div className="card p-0" style={{height:'70vh', position:'relative'}}>
|
||
<div className="flex items-center justify-between p-3 border-b">
|
||
<div className="text-sm text-gray-700">{guiding && currentPos && sortedPoints[guideIndex] ? (()=>{
|
||
const tgt = {lat:Number(sortedPoints[guideIndex].lat), lng:Number(sortedPoints[guideIndex].lng)};
|
||
const dist = distanceFeet(currentPos, tgt);
|
||
const brg = bearingDegrees(currentPos, tgt);
|
||
if (dist <= 15) {
|
||
return <span className="text-green-700 font-semibold">Arrived at #{guideIndex+1} • {dist.toFixed(0)} ft</span>;
|
||
}
|
||
return <>→ {brg}° • {dist.toFixed(0)} ft • Point #{guideIndex+1}</>;
|
||
})() : 'Map'}</div>
|
||
<div className="flex gap-2 items-center">
|
||
<label className="text-xs flex items-center gap-1">
|
||
<input type="checkbox" checked={satellite} onChange={(e)=> setSatellite(e.target.checked)} /> Satellite
|
||
</label>
|
||
{!guiding ? (
|
||
<button className="btn-secondary" onClick={startGuidance} disabled={sortedPoints.length===0}>Start Guidance</button>
|
||
) : (
|
||
<>
|
||
<button className="btn-secondary" onClick={()=> setGuideIndex(i=> Math.max(0, i-1))} disabled={guideIndex===0}>Prev</button>
|
||
<button className="btn-secondary" onClick={()=> setGuideIndex(i=> Math.min(sortedPoints.length-1, i+1))} disabled={guideIndex>=sortedPoints.length-1}>Next</button>
|
||
<button className="btn-primary" onClick={stopGuidance}>Stop</button>
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
<MapContainer center={center} zoom={18} style={{height:'100%', width:'100%'}}>
|
||
<CenterOnChange center={center} />
|
||
{satellite ? (
|
||
<TileLayer url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}" />
|
||
) : (
|
||
<TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
|
||
)}
|
||
{sections.map((s)=> (
|
||
<Polygon key={s.id} positions={s.polygonData?.coordinates?.[0]||[]} pathOptions={{ color:'#16a34a', weight:2, fillOpacity:0.1 }} />
|
||
))}
|
||
{placing && <SprinklerPlacement onPlace={onPlace} />}
|
||
{guiding && currentPos && sortedPoints[guideIndex] && (
|
||
<>
|
||
{/* Current location marker */}
|
||
<Marker position={[currentPos.lat, currentPos.lng]} icon={markerIcon('#0ea5e9')} />
|
||
{/* Line to target */}
|
||
<Polyline positions={[[currentPos.lat, currentPos.lng], [Number(sortedPoints[guideIndex].lat), Number(sortedPoints[guideIndex].lng)]]} pathOptions={{ color:'#0ea5e9', dashArray:'6 6' }} />
|
||
{/* Arrival ring */}
|
||
<Circle center={[Number(sortedPoints[guideIndex].lat), Number(sortedPoints[guideIndex].lng)]} radius={15*0.3048} pathOptions={{ color:'#22c55e', fillOpacity:0.15, weight:2 }} />
|
||
</>
|
||
)}
|
||
{/* Legend overlay */}
|
||
{sortedPoints.length > 0 && (
|
||
<div style={{ position:'absolute', right:10, bottom:10, zIndex:1000 }}>
|
||
<div className="bg-white/90 border rounded shadow p-2 max-h-56 overflow-auto text-xs">
|
||
<div className="font-medium mb-1">Legend</div>
|
||
<ul className="space-y-1">
|
||
{sortedPoints.map((pt, idx) => (
|
||
<li key={`lg-${pt.id}`} className="flex items-center gap-2">
|
||
<span style={{backgroundColor: pointColor(pt)}} className="inline-block w-3 h-3 rounded-full"></span>
|
||
<span className="font-mono">#{idx+1}</span>
|
||
<span className="text-gray-700">{pt.equipment_name || (pt.sprinkler_head_type||'-').replace('_',' ')}</span>
|
||
{pt.sprinkler_gpm ? (<span className="text-gray-600">• {Number(pt.sprinkler_gpm)} gpm</span>) : null}
|
||
{pt.duration_minutes ? (<span className="text-gray-600">• {pt.duration_minutes} min</span>) : null}
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
)}
|
||
{sortedPoints.map(pt => {
|
||
const cov = computeCoverage({
|
||
type: pt.sprinkler_head_type,
|
||
throwFeet: parseFloat(pt.sprinkler_throw_feet||0),
|
||
degrees: parseInt(pt.sprinkler_degrees||360,10),
|
||
lengthFeet: parseFloat(pt.sprinkler_length_feet||0),
|
||
widthFeet: parseFloat(pt.sprinkler_width_feet||0)
|
||
});
|
||
const color = pointColor(pt);
|
||
return (
|
||
<React.Fragment key={pt.id}>
|
||
<Marker position={[Number(pt.lat), Number(pt.lng)]} draggable={true} icon={markerIcon(color)}
|
||
eventHandlers={{
|
||
dragend: (e)=>{
|
||
const ll = e.target.getLatLng();
|
||
updatePointField(pt.id, { lat: ll.lat, lng: ll.lng });
|
||
},
|
||
click: ()=> onSelectPoint(pt)
|
||
}}
|
||
>
|
||
<Popup>
|
||
<div className="space-y-2 text-sm">
|
||
<div className="font-medium">{pt.equipment_name || 'Adjust Sprinkler'}</div>
|
||
{(pt.sprinkler_head_type==='rotor_impact' || pt.sprinkler_head_type==='spray_fixed') && (
|
||
<>
|
||
<div className="flex items-center gap-2">
|
||
<span className="text-xs">Degrees:</span>
|
||
<button className="px-2 py-1 border rounded" onClick={()=> updatePointField(pt.id, { degrees: Math.max(0, Math.min(360, Number(pt.sprinkler_degrees||0) - 10)) })}>-10°</button>
|
||
<button className="px-2 py-1 border rounded" onClick={()=> updatePointField(pt.id, { degrees: Math.max(0, Math.min(360, Number(pt.sprinkler_degrees||0) - 1)) })}>-1°</button>
|
||
<span className="px-2">{Number(pt.sprinkler_degrees||0)}°</span>
|
||
<button className="px-2 py-1 border rounded" onClick={()=> updatePointField(pt.id, { degrees: Math.max(0, Math.min(360, Number(pt.sprinkler_degrees||0) + 1)) })}>+1°</button>
|
||
<button className="px-2 py-1 border rounded" onClick={()=> updatePointField(pt.id, { degrees: Math.max(0, Math.min(360, Number(pt.sprinkler_degrees||0) + 10)) })}>+10°</button>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<span className="text-xs">Throw:</span>
|
||
<button className="px-2 py-1 border rounded" onClick={()=> updatePointField(pt.id, { throwFeet: Math.max(0, Number(pt.sprinkler_throw_feet||0) - 5) })}>-5ft</button>
|
||
<button className="px-2 py-1 border rounded" onClick={()=> updatePointField(pt.id, { throwFeet: Math.max(0, Number(pt.sprinkler_throw_feet||0) - 1) })}>-1ft</button>
|
||
<span className="px-2">{Number(pt.sprinkler_throw_feet||0)} ft</span>
|
||
<button className="px-2 py-1 border rounded" onClick={()=> updatePointField(pt.id, { throwFeet: Math.max(0, Number(pt.sprinkler_throw_feet||0) + 1) })}>+1ft</button>
|
||
<button className="px-2 py-1 border rounded" onClick={()=> updatePointField(pt.id, { throwFeet: Math.max(0, Number(pt.sprinkler_throw_feet||0) + 5) })}>+5ft</button>
|
||
</div>
|
||
</>
|
||
)}
|
||
{pt.sprinkler_head_type==='oscillating_fan' && (
|
||
<>
|
||
<div className="flex items-center gap-2">
|
||
<span className="text-xs">Length:</span>
|
||
<button className="px-2 py-1 border rounded" onClick={()=> updatePointField(pt.id, { lengthFeet: Math.max(0, Number(pt.sprinkler_length_feet||0) - 5) })}>-5ft</button>
|
||
<button className="px-2 py-1 border rounded" onClick={()=> updatePointField(pt.id, { lengthFeet: Math.max(0, Number(pt.sprinkler_length_feet||0) - 1) })}>-1ft</button>
|
||
<span className="px-2">{Number(pt.sprinkler_length_feet||0)} ft</span>
|
||
<button className="px-2 py-1 border rounded" onClick={()=> updatePointField(pt.id, { lengthFeet: Math.max(0, Number(pt.sprinkler_length_feet||0) + 1) })}>+1ft</button>
|
||
<button className="px-2 py-1 border rounded" onClick={()=> updatePointField(pt.id, { lengthFeet: Math.max(0, Number(pt.sprinkler_length_feet||0) + 5) })}>+5ft</button>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<span className="text-xs">Width:</span>
|
||
<button className="px-2 py-1 border rounded" onClick={()=> updatePointField(pt.id, { widthFeet: Math.max(0, Number(pt.sprinkler_width_feet||0) - 5) })}>-5ft</button>
|
||
<button className="px-2 py-1 border rounded" onClick={()=> updatePointField(pt.id, { widthFeet: Math.max(0, Number(pt.sprinkler_width_feet||0) - 1) })}>-1ft</button>
|
||
<span className="px-2">{Number(pt.sprinkler_width_feet||0)} ft</span>
|
||
<button className="px-2 py-1 border rounded" onClick={()=> updatePointField(pt.id, { widthFeet: Math.max(0, Number(pt.sprinkler_width_feet||0) + 1) })}>+1ft</button>
|
||
<button className="px-2 py-1 border rounded" onClick={()=> updatePointField(pt.id, { widthFeet: Math.max(0, Number(pt.sprinkler_width_feet||0) + 5) })}>+5ft</button>
|
||
</div>
|
||
</>
|
||
)}
|
||
<div className="flex items-center gap-2">
|
||
<span className="text-xs">Heading:</span>
|
||
<button className="px-2 py-1 border rounded" onClick={()=> adjustHeading(pt, -10)}>-10°</button>
|
||
<button className="px-2 py-1 border rounded" onClick={()=> adjustHeading(pt, -1)}>-1°</button>
|
||
<span className="px-2">{Number(pt.sprinkler_heading_degrees||0)}°</span>
|
||
<button className="px-2 py-1 border rounded" onClick={()=> adjustHeading(pt, +1)}>+1°</button>
|
||
<button className="px-2 py-1 border rounded" onClick={()=> adjustHeading(pt, +10)}>+10°</button>
|
||
</div>
|
||
<div className="grid grid-cols-3 gap-2 items-center">
|
||
<div></div>
|
||
<button className="px-2 py-1 border rounded" onClick={()=> nudgePointLocation(pt, 0, +1)}>▲</button>
|
||
<div></div>
|
||
<button className="px-2 py-1 border rounded" onClick={()=> nudgePointLocation(pt, -1, 0)}>◀</button>
|
||
<div className="text-center text-xs">Move 1 ft</div>
|
||
<button className="px-2 py-1 border rounded" onClick={()=> nudgePointLocation(pt, +1, 0)}>▶</button>
|
||
<div></div>
|
||
<button className="px-2 py-1 border rounded" onClick={()=> nudgePointLocation(pt, 0, -1)}>▼</button>
|
||
<div></div>
|
||
</div>
|
||
<div className="flex gap-2 pt-1">
|
||
<button className="btn-secondary" onClick={async ()=>{
|
||
await wateringAPI.deletePoint(pt.id);
|
||
if (plan) {
|
||
const rs = await wateringAPI.getPlanPoints(plan.id);
|
||
setPoints(rs.data?.data?.points || []);
|
||
} else {
|
||
setPoints(prev=> prev.filter(p=> p.id!==pt.id));
|
||
}
|
||
}}>Delete</button>
|
||
</div>
|
||
</div>
|
||
</Popup>
|
||
</Marker>
|
||
{cov?.kind==='circle' && (
|
||
cov.degrees && cov.degrees < 360 ? (
|
||
<Polygon positions={sectorPolygon({lat:Number(pt.lat),lng:Number(pt.lng)}, cov.radius, (pt.sprinkler_heading_degrees||0), (pt.sprinkler_heading_degrees||0)+cov.degrees)} pathOptions={{ color, fillOpacity:0.2 }} />
|
||
) : (
|
||
<Circle center={[pt.lat, pt.lng]} radius={cov.radius*0.3048} pathOptions={{ color, fillOpacity:0.2 }} />
|
||
)
|
||
)}
|
||
{cov?.kind==='rect' && (()=>{
|
||
const clat=Number(pt.lat), clng=Number(pt.lng);
|
||
const L=cov.length, W=cov.width; const hdg=(Number(pt.sprinkler_heading_degrees||0))*Math.PI/180;
|
||
const Rlat=111320, Rlng=Math.cos(clat*Math.PI/180)*111320;
|
||
const hf=L/2*0.3048, wf=W/2*0.3048;
|
||
const corners=[{x:hf,y:wf},{x:-hf,y:wf},{x:-hf,y:-wf},{x:hf,y:-wf}].map(({x,y})=>{
|
||
const xr=x*Math.cos(hdg)-y*Math.sin(hdg);
|
||
const yr=x*Math.sin(hdg)+y*Math.cos(hdg);
|
||
const lat=clat + (yr/Rlat);
|
||
const lng=clng + (xr/Rlng);
|
||
return [lat,lng];
|
||
});
|
||
const color = pointColor(pt);
|
||
return <Polygon positions={corners} pathOptions={{ color, fillOpacity:0.2 }} />;
|
||
})()}
|
||
</React.Fragment>
|
||
);
|
||
})}
|
||
</MapContainer>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Watering;
|
||
|
||
// Inline component to save current sprinkler settings as user equipment
|
||
const SaveSprinklerInline = ({ current, onSaved }) => {
|
||
const [name, setName] = useState('');
|
||
const [saving, setSaving] = useState(false);
|
||
|
||
const save = async () => {
|
||
if (!name.trim()) { toast.error('Enter a name'); return; }
|
||
setSaving(true);
|
||
try {
|
||
// Find Sprinkler category id
|
||
const cats = await equipmentAPI.getCategories();
|
||
const list = cats.data?.data?.categories || [];
|
||
const spr = list.find(c => (c.name||'').toLowerCase() === 'sprinkler');
|
||
if (!spr) { toast.error('Sprinkler category not found'); setSaving(false); return; }
|
||
const payload = {
|
||
categoryId: spr.id,
|
||
customName: name.trim(),
|
||
// store sprinkler-specific fields
|
||
sprinklerMount: current.mount,
|
||
sprinklerHeadType: current.type,
|
||
sprinklerGpm: current.gpm,
|
||
sprinklerThrowFeet: current.throwFeet,
|
||
sprinklerDegrees: current.degrees,
|
||
sprinklerLengthFeet: current.lengthFeet,
|
||
sprinklerWidthFeet: current.widthFeet,
|
||
notes: 'Saved from Watering settings',
|
||
};
|
||
const rs = await equipmentAPI.create(payload);
|
||
const eq = rs.data?.data?.equipment;
|
||
toast.success('Sprinkler saved');
|
||
onSaved && onSaved(eq);
|
||
setName('');
|
||
} catch(e){
|
||
toast.error('Failed to save sprinkler');
|
||
} finally { setSaving(false); }
|
||
};
|
||
|
||
return (
|
||
<div className="mt-2 p-2 border rounded bg-gray-50 space-y-2">
|
||
<div className="text-sm">Save current settings as equipment</div>
|
||
<div className="flex gap-2">
|
||
<input className="input flex-1" placeholder="Name (e.g., Front Yard Rotor)" value={name} onChange={e=> setName(e.target.value)} />
|
||
<button className="btn-secondary" disabled={saving} onClick={save}>{saving? 'Saving...':'Save'}</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|