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

asdfawdf

Browse Source
This commit is contained in:
Jake Kasper
2025-08-27 14:07:09 -04:00
parent d667a7cf9d
commit 5b1e5f4753
1 changed files with 120 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

196
frontend/src/components/Applications/ApplicationPlanModal.js
View File

@@ -93,7 +93,10 @@ const ApplicationPlanModal = ({
console.log('ApplicationPlanModal - selectedPropertyDetails:', selectedPropertyDetails); console.log('ApplicationPlanModal - selectedPropertyDetails:', selectedPropertyDetails);
console.log('ApplicationPlanModal - mapCenter:', mapCenter); console.log('ApplicationPlanModal - mapCenter:', mapCenter);
console.log('ApplicationPlanModal - sections:', selectedPropertyDetails?.sections); console.log('ApplicationPlanModal - sections:', selectedPropertyDetails?.sections);
}, [selectedPropertyDetails, mapCenter]); console.log('ApplicationPlanModal - equipment:', equipment);
console.log('ApplicationPlanModal - products:', products);
console.log('ApplicationPlanModal - nozzles:', nozzles);
}, [selectedPropertyDetails, mapCenter, equipment, products, nozzles]);
// Handle area selection on map // Handle area selection on map
const handleAreaClick = (area) => { const handleAreaClick = (area) => {
@@ -179,6 +182,10 @@ const ApplicationPlanModal = ({
toast.error('Please select a planned date'); toast.error('Please select a planned date');
return; return;
} }
if (applicationType === 'liquid' && !selectedNozzleId) {
toast.error('Please select a nozzle for liquid applications');
return;
}
// Validate products have required fields // Validate products have required fields
for (const product of selectedProducts) { for (const product of selectedProducts) {
@@ -256,47 +263,6 @@ const ApplicationPlanModal = ({
</select> </select>
</div> </div>
{/* Equipment Selection */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<WrenchScrewdriverIcon className="h-4 w-4 inline mr-1" />
Equipment
</label>
<select
value={selectedEquipmentId}
onChange={(e) => setSelectedEquipmentId(e.target.value)}
className="w-full border border-gray-300 rounded px-3 py-2"
required
>
<option value="">Select equipment</option>
{equipment.map(eq => (
<option key={eq.id} value={eq.id}>
{eq.name || 'Unnamed Equipment'} {eq.type ? `(${eq.type})` : ''}
</option>
))}
</select>
</div>
{/* Nozzle Selection (for sprayers) */}
{selectedEquipmentId && equipment.find(eq => eq.id == selectedEquipmentId)?.type === 'sprayer' && (
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Nozzle (Optional)
</label>
<select
value={selectedNozzleId}
onChange={(e) => setSelectedNozzleId(e.target.value)}
className="w-full border border-gray-300 rounded px-3 py-2"
>
<option value="">No specific nozzle</option>
{nozzles.map(nozzle => (
<option key={nozzle.id} value={nozzle.id}>
{nozzle.name} - {nozzle.flow_rate} GPM
</option>
))}
</select>
</div>
)}
{/* Planned Date */} {/* Planned Date */}
<div> <div>
@@ -312,35 +278,93 @@ const ApplicationPlanModal = ({
/> />
</div> </div>
{/* Application Type */} {/* Application Type & Equipment */}
<div> <div className="border rounded-lg p-4 bg-gray-50">
<label className="block text-sm font-medium text-gray-700 mb-1"> <div className="grid grid-cols-1 gap-4">
<BeakerIcon className="h-4 w-4 inline mr-1" /> {/* Application Type */}
Application Type <div>
</label> <label className="block text-sm font-medium text-gray-700 mb-2">
<div className="flex gap-4 mb-3"> <BeakerIcon className="h-4 w-4 inline mr-1" />
<label className="flex items-center"> Application Type
<input </label>
type="radio" <div className="flex gap-4">
name="applicationType" <label className="flex items-center">
value="granular" <input
checked={applicationType === 'granular'} type="radio"
onChange={(e) => handleApplicationTypeChange(e.target.value)} name="applicationType"
className="mr-2" value="granular"
/> checked={applicationType === 'granular'}
Granular (Spreader) onChange={(e) => handleApplicationTypeChange(e.target.value)}
</label> className="mr-2"
<label className="flex items-center"> />
<input Granular (Spreader)
type="radio" </label>
name="applicationType" <label className="flex items-center">
value="liquid" <input
checked={applicationType === 'liquid'} type="radio"
onChange={(e) => handleApplicationTypeChange(e.target.value)} name="applicationType"
className="mr-2" value="liquid"
/> checked={applicationType === 'liquid'}
Liquid (Sprayer) onChange={(e) => handleApplicationTypeChange(e.target.value)}
</label> className="mr-2"
/>
Liquid (Sprayer)
</label>
</div>
</div>
{/* Equipment Selection - Required for all */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<WrenchScrewdriverIcon className="h-4 w-4 inline mr-1" />
Equipment *
</label>
<select
value={selectedEquipmentId}
onChange={(e) => setSelectedEquipmentId(e.target.value)}
className="w-full border border-gray-300 rounded px-3 py-2"
required
>
<option value="">Select equipment</option>
{equipment
.filter(eq => !applicationType ||
(applicationType === 'granular' && (eq.equipment_type === 'spreader' || eq.type === 'spreader')) ||
(applicationType === 'liquid' && (eq.equipment_type === 'sprayer' || eq.type === 'sprayer'))
)
.map(eq => (
<option key={eq.id} value={eq.id}>
{eq.equipment_name || eq.name || eq.manufacturer || 'Unnamed Equipment'}
{eq.equipment_type || eq.type ? ` (${eq.equipment_type || eq.type})` : ''}
{eq.equipment_model || eq.model ? ` - ${eq.equipment_model || eq.model}` : ''}
</option>
))}
</select>
</div>
{/* Nozzle Selection - Required for liquid applications */}
{applicationType === 'liquid' && selectedEquipmentId && (
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Nozzle Selection *
<span className="text-xs text-gray-500 ml-1">(Required for spray calculations)</span>
</label>
<select
value={selectedNozzleId}
onChange={(e) => setSelectedNozzleId(e.target.value)}
className="w-full border border-gray-300 rounded px-3 py-2"
required={applicationType === 'liquid'}
>
<option value="">Select nozzle</option>
{nozzles.map(nozzle => (
<option key={nozzle.id} value={nozzle.id}>
{nozzle.nozzle_name || nozzle.name}
{nozzle.flow_rate && ` - ${nozzle.flow_rate} GPM`}
{nozzle.nozzle_type && ` (${nozzle.nozzle_type})`}
</option>
))}
</select>
</div>
)}
</div> </div>
</div> </div>
@@ -374,9 +398,26 @@ const ApplicationPlanModal = ({
updateProduct(index, 'productId', selectedProduct.isShared ? selectedProduct.id : null); updateProduct(index, 'productId', selectedProduct.isShared ? selectedProduct.id : null);
updateProduct(index, 'userProductId', !selectedProduct.isShared ? selectedProduct.id : null); updateProduct(index, 'userProductId', !selectedProduct.isShared ? selectedProduct.id : null);
updateProduct(index, 'isUserProduct', !selectedProduct.isShared); updateProduct(index, 'isUserProduct', !selectedProduct.isShared);
updateProduct(index, 'productName', selectedProduct.name); updateProduct(index, 'productName', selectedProduct.product_name || selectedProduct.name);
updateProduct(index, 'productBrand', selectedProduct.brand); updateProduct(index, 'productBrand', selectedProduct.product_brand || selectedProduct.brand);
updateProduct(index, 'productType', selectedProduct.productType); updateProduct(index, 'productType', selectedProduct.product_type || selectedProduct.productType);
// Pre-populate application rate if available
if (selectedProduct.applicationRate) {
updateProduct(index, 'rateAmount', selectedProduct.applicationRate);
} else if (selectedProduct.application_rate) {
updateProduct(index, 'rateAmount', selectedProduct.application_rate);
} else if (selectedProduct.recommendedRate) {
updateProduct(index, 'rateAmount', selectedProduct.recommendedRate);
}
// Set appropriate rate unit based on product type
const productType = selectedProduct.product_type || selectedProduct.productType;
if (productType === 'granular') {
updateProduct(index, 'rateUnit', 'lb/1000sqft');
} else if (productType === 'liquid') {
updateProduct(index, 'rateUnit', 'oz/1000sqft');
}
} }
}} }}
className="border border-gray-300 rounded px-3 py-2" className="border border-gray-300 rounded px-3 py-2"
@@ -384,10 +425,13 @@ const ApplicationPlanModal = ({
> >
<option value="">Select product</option> <option value="">Select product</option>
{products {products
.filter(prod => !applicationType || prod.productType === applicationType) .filter(prod => !applicationType || prod.productType === applicationType || prod.product_type === applicationType)
.map(prod => ( .map(prod => (
<option key={prod.uniqueId} value={prod.uniqueId}> <option key={prod.uniqueId} value={prod.uniqueId}>
{prod.name} {prod.brand && `(${prod.brand})`} {prod.isShared ? '' : '(Custom)'} {prod.product_name || prod.name}
{(prod.product_brand || prod.brand) && ` (${prod.product_brand || prod.brand})`}
{prod.isShared ? '' : ' (Custom)'}
{prod.activeIngredient && ` - ${prod.activeIngredient}`}
</option> </option>
))} ))}
</select> </select>