251 lines
9.4 KiB
React
251 lines
9.4 KiB
React
import React, { useState } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
const AddFarm = () => {
|
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
const [farmName, setFarmName] = useState("");
|
|
const [location, setLocation] = useState("");
|
|
const [waterContent, setWaterContent] = useState("");
|
|
const [sizeContent, setSizeContent] = useState("");
|
|
const [soilType, setSoilType] = useState("");
|
|
const [error, setError] = useState(null);
|
|
const [success, setSuccess] = useState(false);
|
|
const navigator = useNavigate();
|
|
const handleSubmit = async (e) => {
|
|
e.preventDefault();
|
|
const farmData = {
|
|
name: farmName,
|
|
location,
|
|
waterContent,
|
|
soilType,
|
|
size: sizeContent,
|
|
};
|
|
|
|
console.log(farmData);
|
|
|
|
try {
|
|
const response = await fetch("http://localhost:8000/api/v1/farm", {
|
|
method: "POST",
|
|
credentials: "include",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify(farmData),
|
|
});
|
|
|
|
const data = await response.json();
|
|
console.log(data);
|
|
|
|
if (!response.ok) {
|
|
throw new Error("Failed to add farm");
|
|
}
|
|
|
|
navigator("farmpage");
|
|
setSuccess(true);
|
|
setError(null);
|
|
setIsModalOpen(false);
|
|
} catch (err) {
|
|
setError(err.message);
|
|
setSuccess(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<button
|
|
onClick={() => setIsModalOpen(true)}
|
|
className="block text-white bg-green-600 hover:bg-green-700 focus:ring-4 focus:outline-none focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center"
|
|
type="button"
|
|
>
|
|
Add New Farm
|
|
</button>
|
|
|
|
{isModalOpen && (
|
|
<div className="fixed inset-0 z-50 overflow-y-auto overflow-x-hidden flex items-center justify-center">
|
|
<div
|
|
className="fixed inset-0 bg-black bg-opacity-50 transition-opacity"
|
|
onClick={() => setIsModalOpen(false)}
|
|
></div>
|
|
|
|
<div className="relative w-full max-w-2xl mx-4">
|
|
<div className="relative bg-white rounded-xl shadow-lg">
|
|
{/* Decorative Leaves */}
|
|
<div className="absolute right-0 top-0 h-full w-48 overflow-hidden pointer-events-none">
|
|
<svg
|
|
viewBox="0 0 200 800"
|
|
className="absolute right-0 h-full transform translate-x-16 fill-green-100"
|
|
>
|
|
<path d="M0,0 Q100,200 0,400 Q100,600 0,800 L200,800 L200,0 Z" />
|
|
</svg>
|
|
<svg
|
|
viewBox="0 0 200 800"
|
|
className="absolute right-0 h-full transform translate-x-8 fill-green-200/40"
|
|
>
|
|
<path d="M0,0 Q80,200 0,400 Q80,600 0,800 L200,800 L200,0 Z" />
|
|
</svg>
|
|
|
|
<svg
|
|
viewBox="0 0 100 100"
|
|
className="absolute right-12 top-20 w-16 h-16 fill-green-300/30"
|
|
>
|
|
<path d="M50,0 Q100,50 50,100 Q0,50 50,0 Z" />
|
|
</svg>
|
|
<svg
|
|
viewBox="0 0 100 100"
|
|
className="absolute right-16 top-48 w-12 h-12 fill-green-400/20"
|
|
>
|
|
<path d="M50,0 Q100,50 50,100 Q0,50 50,0 Z" />
|
|
</svg>
|
|
</div>
|
|
|
|
{/* Modal Header */}
|
|
<div className="flex items-center justify-between p-4 md:p-5 border-b rounded-t border-gray-200">
|
|
<h3 className="text-2xl font-semibold text-gray-800">
|
|
Add New Farm
|
|
</h3>
|
|
<button
|
|
type="button"
|
|
onClick={() => setIsModalOpen(false)}
|
|
className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 inline-flex justify-center items-center"
|
|
>
|
|
<svg
|
|
className="w-3 h-3"
|
|
aria-hidden="true"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 14 14"
|
|
>
|
|
<path
|
|
stroke="currentColor"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="2"
|
|
d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
|
|
/>
|
|
</svg>
|
|
<span className="sr-only">Close modal</span>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Modal Body */}
|
|
<div className="p-4 md:p-5">
|
|
<form className="space-y-4" onSubmit={handleSubmit}>
|
|
<div>
|
|
<label
|
|
htmlFor="farmName"
|
|
className="block text-sm font-semibold text-gray-700 mb-2"
|
|
>
|
|
Farm Name
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="farmName"
|
|
value={farmName}
|
|
onChange={(e) => setFarmName(e.target.value)}
|
|
className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:ring-2 focus:ring-green-400 focus:border-transparent transition duration-200 ease-in-out bg-white/80"
|
|
placeholder="Enter farm name"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label
|
|
htmlFor="location"
|
|
className="block text-sm font-semibold text-gray-700 mb-2"
|
|
>
|
|
Location
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="location"
|
|
value={location}
|
|
onChange={(e) => setLocation(e.target.value)}
|
|
className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:ring-2 focus:ring-green-400 focus:border-transparent transition duration-200 ease-in-out bg-white/80"
|
|
placeholder="Enter location"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label
|
|
htmlFor="waterContent"
|
|
className="block text-sm font-semibold text-gray-700 mb-2"
|
|
>
|
|
Water Content
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="waterContent"
|
|
value={waterContent}
|
|
onChange={(e) => setWaterContent(e.target.value)}
|
|
className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:ring-2 focus:ring-green-400 focus:border-transparent transition duration-200 ease-in-out bg-white/80"
|
|
placeholder="Enter water content"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label
|
|
htmlFor="waterContent"
|
|
className="block text-sm font-semibold text-gray-700 mb-2"
|
|
>
|
|
Size of Land
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="waterContent"
|
|
value={sizeContent}
|
|
onChange={(e) => setSizeContent(e.target.value)}
|
|
className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:ring-2 focus:ring-green-400 focus:border-transparent transition duration-200 ease-in-out bg-white/80"
|
|
placeholder="Enter water content"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label
|
|
htmlFor="soilType"
|
|
className="block text-sm font-semibold text-gray-700 mb-2"
|
|
>
|
|
Soil Type
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="soilType"
|
|
value={soilType}
|
|
onChange={(e) => setSoilType(e.target.value)}
|
|
className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:ring-2 focus:ring-green-400 focus:border-transparent transition duration-200 ease-in-out bg-white/80"
|
|
placeholder="Enter soil type"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
className="w-full bg-green-600 hover:bg-green-700 text-white font-semibold py-3 px-6 rounded-lg transition duration-200 ease-in-out transform hover:scale-[1.02] focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2"
|
|
>
|
|
Add Farm
|
|
</button>
|
|
|
|
{error && (
|
|
<p className="mt-4 text-red-500 text-sm bg-red-50 p-3 rounded-lg">
|
|
{error}
|
|
</p>
|
|
)}
|
|
{success && (
|
|
<p className="mt-4 text-green-500 text-sm bg-green-50 p-3 rounded-lg">
|
|
Farm added successfully!
|
|
</p>
|
|
)}
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default AddFarm;
|