feat:Added forms to add,update,delete the farm

2025-02-22 19:16:35 +05:30
parent c41d788328
commit bf03fa12f6
5 changed files with 284 additions and 2 deletions
@@ -23,6 +23,8 @@ import ScheduleMeeting from "./pages/UserPanel/ScheduleMeeting.jsx";
 import Support from "./pages/UserPanel/Support.jsx";
 import FeedBackAndRatings from "./pages/UserPanel/FeedBackAndRatings.jsx";
 import Monitoring from "./pages/UserPanel/Monitoring.jsx";
+import AddFarm from "./pages/UserPanel/AddFarm.jsx";
+import UpdateFarm from "./pages/UserPanel/UpdateForm.jsx";

 createRoot(document.getElementById("root")).render(
  <StrictMode>
@@ -55,6 +57,8 @@ createRoot(document.getElementById("root")).render(
                <Route path="support" element={<Support />} />
                <Route path="feedback" element={<FeedBackAndRatings />} />
                <Route path="monitoring" element={<Monitoring />} />
+                <Route path="addfarm" element={<AddFarm />} />
+                <Route path="updatefarm" element={<UpdateFarm />} />
              </Route>
            </Route>
          </Routes>
@@ -0,0 +1,131 @@
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+const AddFarm = () => {
+  const [farmName, setFarmName] = useState("");
+  const [location, setLocation] = useState("");
+  const [waterContent, setWaterContent] = useState("");
+  const [soilType, setSoilType] = useState("");
+  const [error, setError] = useState(null);
+  const [success, setSuccess] = useState(false);
+  const navigate = useNavigate();
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    const farmData = {
+      name: farmName,
+      location,
+      waterContent,
+      soilType,
+    };
+
+    try {
+      const response = await fetch("http://localhost:8000/api/v1/farm", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(farmData),
+      });
+
+      if (!response.ok) {
+        throw new Error("Failed to add farm");
+      }
+
+      setSuccess(true);
+      setError(null);
+      // navigate to the dashboard:
+      navigate("/dashboard");
+    } catch (err) {
+      setError(err.message);
+      setSuccess(false);
+    }
+  };
+
+  return (
+    <div className="w-full bg-white rounded-lg shadow p-4">
+      <h1 className="w-full text-center text-2xl font-bold my-5">Add Farm</h1>
+      <div className="mb-4 flex justify-end space-x-4">
+        <form className="max-w-md mx-auto w-80" onSubmit={handleSubmit}>
+          <div className="mb-5">
+            <label
+              htmlFor="farmName"
+              className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+            >
+              Farm Name
+            </label>
+            <input
+              type="text"
+              id="farmName"
+              value={farmName}
+              onChange={(e) => setFarmName(e.target.value)}
+              className="shadow-xs bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white"
+              required
+            />
+          </div>
+          <div className="mb-5">
+            <label
+              htmlFor="location"
+              className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+            >
+              Location
+            </label>
+            <input
+              type="text"
+              id="location"
+              value={location}
+              onChange={(e) => setLocation(e.target.value)}
+              className="shadow-xs bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white"
+              required
+            />
+          </div>
+          <div className="mb-5">
+            <label
+              htmlFor="waterContent"
+              className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+            >
+              Water Content
+            </label>
+            <input
+              type="text"
+              id="waterContent"
+              value={waterContent}
+              onChange={(e) => setWaterContent(e.target.value)}
+              className="shadow-xs bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white"
+              required
+            />
+          </div>
+          <div className="mb-5">
+            <label
+              htmlFor="soilType"
+              className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+            >
+              Soil Type
+            </label>
+            <input
+              type="text"
+              id="soilType"
+              value={soilType}
+              onChange={(e) => setSoilType(e.target.value)}
+              className="shadow-xs bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white"
+              required
+            />
+          </div>
+          <button
+            type="submit"
+            className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+          >
+            Add Farm
+          </button>
+          {error && <p className="mt-4 text-red-500 text-sm">{error}</p>}
+          {success && (
+            <p className="mt-4 text-green-500 text-sm">
+              Farm added successfully!
+            </p>
+          )}
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default AddFarm;
@@ -1,15 +1,19 @@
 import React from "react";
+import { useNavigate } from "react-router-dom";
 import Piechart from "../../components/monitoring charts/Piechart";
 import TotalSpent from "../../components/TotalSpent";
 import FarmList from "../../components/FarmList";

 const Dashboard = () => {
+  const navigate = useNavigate();
+
  return (
    <div className="w-full bg-white rounded-lg shadow p-4">
      <div className="mb-4 flex justify-end space-x-4">
        <button
          type="button"
-          className="text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:ring-blue-300 font-semibold rounded-xl text-md px-6 py-3  mr-2 mb-2 dark:bg-gradient-to-r dark:from-blue-600 dark:via-blue-700 dark:to-blue-800 dark:hover:bg-gradient-to-br focus:outline-none dark:focus:ring-blue-800 float-right shadow-lg transform transition-transform hover:scale-105"
+          className="text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:ring-blue-300 font-semibold rounded-xl text-md px-6 py-3 mr-2 mb-2 dark:bg-gradient-to-r dark:from-blue-600 dark:via-blue-700 dark:to-blue-800 dark:hover:bg-gradient-to-br focus:outline-none dark:focus:ring-blue-800 float-right shadow-lg transform transition-transform hover:scale-105"
+          onClick={() => navigate("addfarm")}
        >
          <img
            src="/images/add.svg"
@@ -24,7 +28,7 @@ const Dashboard = () => {
        <Piechart />
        <TotalSpent />
      </div>
-      <FarmList></FarmList>
+      <FarmList />
    </div>
  );
 };
@@ -0,0 +1,6 @@
+const DeleteFarm = () => {
+    return (
+        
+    )
+};
+export default DeleteFarm;
@@ -0,0 +1,137 @@
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+const UpdateFarm = () => {
+  const [farmName, setFarmName] = useState("");
+  const [location, setLocation] = useState("");
+  const [waterContent, setWaterContent] = useState("");
+  const [soilType, setSoilType] = useState("");
+  const [error, setError] = useState(null);
+  const [success, setSuccess] = useState(false);
+  const navigate = useNavigate();
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    const farmData = {
+      name: farmName,
+      location,
+      waterContent,
+      soilType,
+    };
+
+    try {
+      const response = await fetch(
+        "http://localhost:8000/api/v1/farm/67b9b3a1b68365aa35ae0e5f",
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(farmData),
+        }
+      );
+
+      if (!response.ok) {
+        throw new Error("Failed to Update the farm");
+      }
+
+      setSuccess(true);
+      setError(null);
+      // navigate to the dashboard:
+      navigate("/dashboard");
+    } catch (err) {
+      setError(err.message);
+      setSuccess(false);
+    }
+  };
+
+  return (
+    <div className="w-full bg-white rounded-lg shadow p-4">
+      <h1 className="w-full text-center text-2xl font-bold my-5">
+        Update farm
+      </h1>
+
+      <div className="mb-4 flex justify-end space-x-4">
+        <form className="max-w-md mx-auto w-80" onSubmit={handleSubmit}>
+          <div className="mb-5">
+            <label
+              htmlFor="farmName"
+              className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+            >
+              Farm Name
+            </label>
+            <input
+              type="text"
+              id="farmName"
+              value={farmName}
+              onChange={(e) => setFarmName(e.target.value)}
+              className="shadow-xs bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white"
+              required
+            />
+          </div>
+          <div className="mb-5">
+            <label
+              htmlFor="location"
+              className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+            >
+              Location
+            </label>
+            <input
+              type="text"
+              id="location"
+              value={location}
+              onChange={(e) => setLocation(e.target.value)}
+              className="shadow-xs bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white"
+              required
+            />
+          </div>
+          <div className="mb-5">
+            <label
+              htmlFor="waterContent"
+              className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+            >
+              Water Content
+            </label>
+            <input
+              type="text"
+              id="waterContent"
+              value={waterContent}
+              onChange={(e) => setWaterContent(e.target.value)}
+              className="shadow-xs bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white"
+              required
+            />
+          </div>
+          <div className="mb-5">
+            <label
+              htmlFor="soilType"
+              className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+            >
+              Soil Type
+            </label>
+            <input
+              type="text"
+              id="soilType"
+              value={soilType}
+              onChange={(e) => setSoilType(e.target.value)}
+              className="shadow-xs bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white"
+              required
+            />
+          </div>
+          <button
+            type="submit"
+            className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+          >
+            Add Farm
+          </button>
+          {error && <p className="mt-4 text-red-500 text-sm">{error}</p>}
+          {success && (
+            <p className="mt-4 text-green-500 text-sm">
+              Farm Updated successfully!
+            </p>
+          )}
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default UpdateFarm;