Ajout des messages de retour ajout objet

Front-end/src/components/MeteoInfos.jsx

@@ -31,7 +31,7 @@ function MeteoInfos({
   console.log(rawData.length);
   return (
     <div key={object.id} className="bg-white  p-6 rounded-xl min-w-5xl">
-      {(AffAlert) && (
+      {(AffAlert&&(object.status==="active")) && (
         <AlertInactive affAlert={AffAlert} setAffAlert={setAffAlert} />
       )}
       <div className="flex align-items gap-6">

Front-end/src/pages/Gestion/AddObject.jsx

@@ -12,40 +12,49 @@ function AddObject() {
   const [Response, setResponse] = useState(null);
   const [isActive, setActive] = useState(true);
   const [verif, setVerif] = useState(false);
-
+  const [enregistre, setEnregistre] = useState(false);
+  const [messRequete, setMessRequete] = useState("");
   function handleSubmit(event) {
     event.preventDefault();
 
     if (verif) {
-        console.log("Envoi requete");
+      console.log("Envoi requete");
-      axios
+        axios
-        .post(`${API_BASE_URL}/addObject`, {
+          .post(`${API_BASE_URL}/addObject`, {
-          nom,
+            nom,
-          description,
+            description,
-          type,
+            type,
-          location,
+            location,
-          status,
+            status,
-        })
+          })
-        .then((response) => {
+          .then((response) => {
-          console.log("Modification réussie :", response.data);
+            setMessRequete("Votre objet à bien été enregistré !");
-        })
+            setEnregistre(true);
-        .catch((error) => {
+            console.log("Ajout de l'objet réussit :", response.data);
-          console.error("Erreur lors de la modification :", error);
+          })
-        });
+          .catch((error) => {
-    }else{
+            setMessRequete("Il y a eu une erreur dans l'ajout de votre objet !");
-        setVerif(true);
+            console.error("Erreur lors de l'ajout de l'objet :", error);
+          });
+      setVerif(false);
+      resetForm();
+    } else {
+      setVerif(true);
     }
   }
+  function resetForm() {
+    setNom("");
+    setStatus("");
+    setDescription("");
+    setType("");
+    setLocalisation("");
+    setActive(true);
+  }
   function handleCancel() {
-    if(verif){
+    if (verif) {
-        setVerif(false);
+      setVerif(false);
-    }else{
+    } else {
-        setNom("");
+      resetForm();
-        setStatus("");
-        setDescription("");
-        setType("");
-        setLocalisation("");
-        setActive(true);
     }
   }
 
@@ -74,7 +83,9 @@ function AddObject() {
               <BadgePlus className="text-indigo-600" size={24} />
             </div>
             <h1 className="text-black text-2xl font-bold mb-1">
-                {(!verif)?("Entrez les données de votre nouvel objet"):("Êtes-vous sûr de ces données ?")}
+              {!verif
+                ? "Entrez les données de votre nouvel objet"
+                : "Êtes-vous sûr de ces données ?"}
             </h1>
           </div>
           <div className="mb-5">
@@ -187,16 +198,19 @@ function AddObject() {
               type={"submit"}
               className="text-blue-500 hover:cursor-pointer hover:underline mb-2"
             >
-              {(!verif)?("Confirmer les informations"):("Oui je suis sûr !")}
+              {!verif ? "Confirmer les informations" : "Oui je suis sûr !"}
             </button>
             <button
               type="button"
               className="text-red-500 hover:cursor-pointer hover:underline"
               onClick={handleCancel}
             >
-              {(!verif)?("Supprimer les informations"):("Non je veux changer !")}
+              {!verif ? "Supprimer les informations" : "Non je veux changer !"}
-              </button>
+            </button>
           </div>
+            <p className={(enregistre)?("text-green-700"):("text-red-700")}>
+              {messRequete}
+            </p>
         </form>
       </div>
     </div>

Front-end/src/pages/Gestion/ObjectManagement.jsx

@@ -1,17 +1,5 @@
 import React from "react";
-import {
+import { Search, ArrowRight, RadioTower,Plus } from "lucide-react";
-  Search,
-  MapPin,
-  Calendar,
-  Bus,
-  ArrowRight,
-  LogIn,
-  UserPlus,
-  RadioTower,
-  Binoculars,
-  Settings,
-  ChartArea,
-} from "lucide-react";
 import { useEffect, useState } from "react";
 import axios from "axios";
 
@@ -19,7 +7,7 @@ function ObjectManagement() {
   const [searchQuery, setSearchQuery] = useState("");
   const [activeFilter, setActiveFilter] = useState("");
   const [objects, setObjects] = useState([]);
-
+  const [nbAffObject,setnbAffObject] = useState(6);
   const filteredDATA = objects.filter((node) => {
     const matchesSearchQuery =
       searchQuery === "" ||
@@ -29,19 +17,12 @@ function ObjectManagement() {
     const matchesTag =
       activeFilter === "" ||
       node.name.toLowerCase().includes(activeFilter.toLowerCase()) ||
-      node.description.includes(activeFilter.toLowerCase())||
+      node.description.includes(activeFilter.toLowerCase()) ||
-      (activeFilter=== "Active" && node.status.toLowerCase()==="active")||
+      (activeFilter === "Active" && node.status.toLowerCase() === "active") ||
-      (activeFilter=== "Inactive" && node.status.toLowerCase()==="inactive");
+      (activeFilter === "Inactive" && node.status.toLowerCase() === "inactive");
     return matchesSearchQuery && matchesTag;
-    
   });
-  const handleSearchChange = (event) => {
-    setSearchQuery(event.target.value);
-  };
 
-  const handleTagFilterChange = (selectedTags) => {
-    setFilterTags(selectedTags);
-  };
   useEffect(() => {
     axios.get("http://localhost:8888/objets").then((response) => {
       setObjects(response.data);
@@ -126,19 +107,19 @@ function ObjectManagement() {
           {filteredDATA.length === 0 ? (
             <p>Aucun objet trouvé</p>
           ) : (
-            filteredDATA.map((object) => (
+            filteredDATA.slice(0,nbAffObject).map((object) => (
               <div
                 key={object.id}
                 className="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow "
               >
-                {(object.status==="active")?(
+                {object.status === "active" ? (
                   <div className="relative w-full">
                     <span className="absolute right-0 flex size-3">
                       <span className="absolute inline-flex h-full w-full rounded-full animate-ping bg-green-400 opacity-75"></span>
                       <span className="relative inline-flex size-3 rounded-full bg-green-500"></span>
                     </span>
                   </div>
-                ):(
+                ) : (
                   <div className="relative w-full">
                     <span className="absolute right-0 flex size-3">
                       <span className="relative inline-flex size-3 rounded-full bg-red-600"></span>
@@ -161,6 +142,12 @@ function ObjectManagement() {
             ))
           )}
         </div>
+        {(nbAffObject<filteredDATA.length)&&(
+          <div className="flex items-center flex-col mt-6">
+            <button onClick={()=>{setnbAffObject((prev)=>prev+6 )}}><Plus size={40}/></button>
+            <label>Voir plus</label>
+          </div>
+        )}
       </div>
     </div>
   );