From fa1135eaf921d44877c49a386c0ca18a4a1284d0 Mon Sep 17 00:00:00 2001
From: Mathis <mathis.balet@gmail.com>
Date: Fri, 4 Apr 2025 11:47:17 +0200
Subject: [PATCH] =?UTF-8?q?Ajout=20de=20la=20gestion=20des=20r=C3=A9f?=
 =?UTF-8?q?=C3=A9rences=20pour=20le=20d=C3=A9filement=20fluide=20dans=20le?=
 =?UTF-8?q?s=20composants=20graphiques=20et=20Clarrification=20du=20code?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Front-end/src/components/BoutonGraphique.jsx |  18 ++-
 Front-end/src/components/InfoObject.jsx      |   4 +-
 Front-end/src/components/MeteoGraph.jsx      |  10 +-
 Front-end/src/components/MeteoInfos.jsx      |  31 +++--
 Front-end/src/components/WindGraph.jsx       |   9 +-
 Front-end/src/components/WindInfo.jsx        |  15 ++-
 Front-end/src/pages/Gestion/Objet.jsx        | 128 ++++++++-----------
 7 files changed, 104 insertions(+), 111 deletions(-)

diff --git a/Front-end/src/components/BoutonGraphique.jsx b/Front-end/src/components/BoutonGraphique.jsx
index 932725f..04c7599 100644
--- a/Front-end/src/components/BoutonGraphique.jsx
+++ b/Front-end/src/components/BoutonGraphique.jsx
@@ -1,23 +1,21 @@
-import React, {useRef} from "react";
+import React from "react";
 import { ChartLine } from "lucide-react";
-function BoutonGraphique({ TypeAff, setAffichage,graphCible}) {
-  const handleClick = (newAffichage) =>{
-    setAffichage(newAffichage);
-    if(graphCible.current){
-      graphCible.current.scrollIntoView({ behavior: "smooth" });
-    }
+
+function BoutonGraphique({ type, setGraphStates, graphStates, graphCible }) {
+  const handleClick = () => {
+    setGraphStates((prev) => ({ ...prev, [type]: !prev[type] }));
   };
-  return !TypeAff ? (
+  return !graphStates[type] ? ( 
     <button
       className="bg-blue-200 py-2 my-2 px-4 rounded-full mr-2"
-      onClick={() => handleClick(true)}
+      onClick={handleClick}
     >
       <ChartLine className="text-indigo-600" size={24} />
     </button>
   ) : (
     <button
       className="bg-blue-400 py-2 my-2 px-4 rounded-full mr-2"
-      onClick={() => handleClick(false)}
+      onClick={handleClick}
     >
       <ChartLine className="text-indigo-600" size={24} />
     </button>
diff --git a/Front-end/src/components/InfoObject.jsx b/Front-end/src/components/InfoObject.jsx
index 9c16424..b838a53 100644
--- a/Front-end/src/components/InfoObject.jsx
+++ b/Front-end/src/components/InfoObject.jsx
@@ -3,8 +3,8 @@ import { Info } from "lucide-react";
 
 function InfoObject({ object,defafficherModif }) {
   return (
-    <div key={object.id} className="bg-white  p-6 rounded-xl min-w-5xl">
-      <div className="flex align-items gap-6">
+    <div key={object.id} className="bg-white p-6 rounded-xl min-w-5xl">
+      <div className="flex align-items gap-6 mb-6">
         <div className="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-1">
           <Info className="text-indigo-600" size={24} />
         </div>
diff --git a/Front-end/src/components/MeteoGraph.jsx b/Front-end/src/components/MeteoGraph.jsx
index ee957f4..0305881 100644
--- a/Front-end/src/components/MeteoGraph.jsx
+++ b/Front-end/src/components/MeteoGraph.jsx
@@ -15,7 +15,7 @@ import { Wind } from "lucide-react";
 import axios from "axios";
 import { API_BASE_URL } from "../config";
 
-function MeteoGraph({ object, categorie, Logo }) {
+function MeteoGraph({ object, categorie, Logo,reference}) {
   const [rawData, setRawData] = useState([]);
   const identifiant = object.id;
   useEffect(() => {
@@ -23,7 +23,11 @@ function MeteoGraph({ object, categorie, Logo }) {
       setRawData(response.data);
     });
   }, [object]);
-
+  useEffect(() => {
+    if (reference?.current) {
+      reference.current.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [reference]);
   function getAvg() {
     let moyenne = 0;
     rawData.forEach((element) => {
@@ -35,9 +39,11 @@ function MeteoGraph({ object, categorie, Logo }) {
   }
   return (
     <div
+      ref={reference}
       key={object.id}
       className="bg-white mb-6 p-6 rounded-xl min-w-5xl"
       style={{ width: "100%", height: "400px" }}
+
     >
       <div className="flex align-items gap-6">
         <div className="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
diff --git a/Front-end/src/components/MeteoInfos.jsx b/Front-end/src/components/MeteoInfos.jsx
index 1e2604b..428faee 100644
--- a/Front-end/src/components/MeteoInfos.jsx
+++ b/Front-end/src/components/MeteoInfos.jsx
@@ -8,13 +8,9 @@ import AlertInactive from "./AlertInactive";
 
 function MeteoInfos({
   object,
-  defAffTempGraph,
-  AffTempGraph,
-  defAffPressionGraph,
-  AffPressionGraph,
-  defAffHumiditeGraph,
-  AffHumiditeGraph,
-  graphCible
+  graphStates,
+  setGraphStates,  
+  graphRefs     
 }) {
   const [rawData, setRawData] = useState([]);
   const [AffAlert,setAffAlert] = useState(false);
@@ -30,7 +26,6 @@ function MeteoInfos({
   }, [object]);
 
   const lastData = rawData.length > 0 ? rawData[rawData.length - 1] : null;
-  console.log(rawData.length);
   return (
     <div key={object.id} className="bg-white  p-6 rounded-xl min-w-5xl">
       {(AffAlert&&(object.status==="active")) && (
@@ -61,9 +56,10 @@ function MeteoInfos({
                   </div>
                 </div>
                 <BoutonGraphique
-                  TypeAff={AffTempGraph}
-                  setAffichage={defAffTempGraph}
-                  graphCible={graphCible}
+                  type="temperature"
+                  graphStates={graphStates}
+                  setGraphStates={setGraphStates}
+                  graphCible={graphRefs.temperature}
 
                 />
               </div>
@@ -86,9 +82,10 @@ function MeteoInfos({
                   </div>
                 </div>
                 <BoutonGraphique
-                  TypeAff={AffPressionGraph}
-                  setAffichage={defAffPressionGraph}
-                  graphCible={graphCible}
+                  type="pressure"
+                  graphStates={graphStates}
+                  setGraphStates={setGraphStates}
+                  graphCible={graphRefs.pressure}
                 />
               </div>
             </div>
@@ -110,8 +107,10 @@ function MeteoInfos({
                   </div>
                 </div>
                 <BoutonGraphique
-                  TypeAff={AffHumiditeGraph}
-                  setAffichage={defAffHumiditeGraph}
+                  type="humidity"
+                  graphStates={graphStates}
+                  setGraphStates={setGraphStates}
+                  graphCible={graphRefs.humidity}
                 />
               </div>
             </div>
diff --git a/Front-end/src/components/WindGraph.jsx b/Front-end/src/components/WindGraph.jsx
index 575d8da..941cdcd 100644
--- a/Front-end/src/components/WindGraph.jsx
+++ b/Front-end/src/components/WindGraph.jsx
@@ -5,7 +5,7 @@ import { Wind } from "lucide-react";
 import axios from "axios";
 import { API_BASE_URL } from "../config";
 
-function WindGraph({ object }) {
+function WindGraph({ object,reference }) {
   const [rawData, setRawData] = useState([]);
   const identifiant = object.id;
   useEffect(() => {
@@ -27,8 +27,13 @@ function WindGraph({ object }) {
 
     return null; // Si aucun point n'est survolé
   };
+  useEffect(() => {
+      if (reference?.current) {
+        reference.current.scrollIntoView({ behavior: "smooth" });
+      }
+    }, [reference]);
   return (
-    <div key={object.id} className="bg-white mb-6 p-6 rounded-xl min-w-5xl" style={{width: "100%", height: "400px"}}>
+    <div key={object.id} ref={reference} className="bg-white mb-6 p-6 rounded-xl min-w-5xl" style={{width: "100%", height: "400px"}}>
       <div className="flex align-items gap-6">
         <div className="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
           <Wind className="text-indigo-600" size={24} />
diff --git a/Front-end/src/components/WindInfo.jsx b/Front-end/src/components/WindInfo.jsx
index ac479d5..8d94648 100644
--- a/Front-end/src/components/WindInfo.jsx
+++ b/Front-end/src/components/WindInfo.jsx
@@ -5,7 +5,7 @@ import axios from "axios";
 import { API_BASE_URL } from "../config";
 import BoutonGraphique from "./BoutonGraphique";
 
-function WindInfo({ object, defAffWindGraph, AffWindGraph }) {
+function WindInfo({ object, setGraphStates, graphStates, graphRefs, reference}) {
   const [rawData, setRawData] = useState([]);
   const identifiant = object.id;
   useEffect(() => {
@@ -13,6 +13,11 @@ function WindInfo({ object, defAffWindGraph, AffWindGraph }) {
       setRawData(response.data);
     });
   }, [object]);
+  useEffect(() => {
+    if (reference?.current) {
+      reference.current.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [reference]);
 
   const lastData = rawData.length > 0 ? rawData[rawData.length - 1] : null;
 
@@ -47,9 +52,11 @@ function WindInfo({ object, defAffWindGraph, AffWindGraph }) {
                   </h1>
                 </div>
               </div>
-              <BoutonGraphique
-                TypeAff={AffWindGraph}
-                setAffichage={defAffWindGraph}
+               <BoutonGraphique
+                type="wind"
+                graphStates={graphStates}
+                setGraphStates={setGraphStates}
+                graphCible={graphRefs.wind}
               />
             </div>
           </div>
diff --git a/Front-end/src/pages/Gestion/Objet.jsx b/Front-end/src/pages/Gestion/Objet.jsx
index c076b81..cd40f07 100644
--- a/Front-end/src/pages/Gestion/Objet.jsx
+++ b/Front-end/src/pages/Gestion/Objet.jsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { Thermometer, CircleGauge, Droplet } from "lucide-react";
 
-import { useEffect, useState, useRef} from "react";
+import { useEffect, useState, useRef } from "react";
 import axios from "axios";
 import { API_BASE_URL } from "../../config";
 
@@ -14,31 +14,27 @@ import MeteoGraph from "../../components/MeteoGraph";
 import BatterieInfo from "../../components/BatterieInfo";
 function Objet() {
   const identifiant = new URLSearchParams(window.location.search).get("id");
-  const [searchQuery, setSearchQuery] = useState("");
-  const [activeFilter, setActiveFilter] = useState("all");
   const [object, setObject] = useState({});
   const [graphStates, setGraphStates] = useState({
-    wind:false,
-    temperature:false,
-    pressure:false,
-    humidity:false,
-  })
+    wind: false,
+    temperature: false,
+    pressure: false,
+    humidity: false,
+  });
   const [afficherModif, defafficherModif] = useState(false);
-  const [AffWindGraph, defAffWindGraph] = useState(false);
-  const [AffTempGraph, defAffTempGraph] = useState(false);
-  const [AffPressionGraph, defAffPressionGraph] = useState(false);
-  const [AffHumiditeGraph, defAffHumideGraph] = useState(false);
-  const tempGraphRef = useRef(null);
-  const pressureGraphRef = useRef(null);
-  const humidityGraphRef = useRef(null);
-  const windGraphRef = useRef(null);
+  const graphRefs = {
+    temperature: useRef(null),
+    pressure: useRef(null),
+    humidity: useRef(null),
+    wind: useRef(null),
+  };
 
   useEffect(() => {
     axios.get(`${API_BASE_URL}/objet?id=${identifiant}`).then((response) => {
       setObject(response.data[0]);
     });
   }, [identifiant]);
-  return (
+  return object && object.id ? (
     <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-50">
       <div className=" max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
         <div className="text-center mb-5">
@@ -52,68 +48,50 @@ function Objet() {
           ) : (
             <ModifObject object={object} defafficherModif={defafficherModif} />
           )}
-
-          {object && object.id ? (
-            <WindInfo
-              object={object}
-              defAffWindGraph={defAffWindGraph}
-              AffWindGraph={AffWindGraph}
-            />
-          ) : (
-            <p>Chargement des données...</p>
-          )}
-          {object && object.id ? (
-            <MeteoInfos
-              object={object}
-              defAffTempGraph={defAffTempGraph}
-              AffTempGraph={AffTempGraph}
-              defAffPressionGraph={defAffPressionGraph}
-              AffPressionGraph={AffPressionGraph}
-              defAffHumiditeGraph={defAffHumideGraph}
-              AffHumiditeGraph={AffHumiditeGraph}
-              tempGraphRef={tempGraphRef}
-              pressureGraphRef={pressureGraphRef}
-              humidityGraphRef={humidityGraphRef}
-            />
-          ) : (
-            <p>Chargement des données...</p>
-          )}
+          <WindInfo
+            object={object}
+            setGraphStates={setGraphStates}
+            graphStates={graphStates}
+            graphRefs={graphRefs}
+          />
+          <MeteoInfos
+            object={object}
+            graphStates={graphStates}
+            setGraphStates={setGraphStates}
+            graphRefs={graphRefs}
+          />
           <BatterieInfo object={object} />
         </div>
-        {AffWindGraph &&
-          (object && object.id ? (
-            <WindGraph object={object} />
-          ) : (
-            <p>Chargement des données...</p>
-          ))}
-        {AffTempGraph &&
-          (object && object.id ? (
-            <MeteoGraph
-              object={object}
-              categorie={"temperature"}
-              Logo={Thermometer}
-            />
-          ) : (
-            <p>Chargement des données...</p>
-          ))}
-        {AffPressionGraph &&
-          (object && object.id ? (
-            <MeteoGraph
-              object={object}
-              categorie={"pressure"}
-              Logo={CircleGauge}
-            />
-          ) : (
-            <p>Chargement des données...</p>
-          ))}
-        {AffHumiditeGraph &&
-          (object && object.id ? (
-            <MeteoGraph object={object} categorie={"humidity"} Logo={Droplet} />
-          ) : (
-            <p>Chargement des données...</p>
-          ))}
+
+        {graphStates.wind && <WindGraph object={object} reference={graphRefs.wind} />}
+        {graphStates.temperature && (
+          <MeteoGraph
+            object={object}
+            categorie={"temperature"}
+            Logo={Thermometer}
+            reference={graphRefs.temperature}
+          />
+        )}
+        {graphStates.pressure && (
+          <MeteoGraph
+            object={object}
+            categorie={"pressure"}
+            Logo={CircleGauge}
+            reference={graphRefs.pressure}
+          />
+        )}
+        {graphStates.humidity && (
+          <MeteoGraph
+            object={object}
+            categorie={"humidity"}
+            Logo={Droplet}
+            reference={graphRefs.humidity}
+          />
+        )}
       </div>
     </div>
+  ) : (
+    <h1>Erreur de récupération de l'objet</h1>
   );
 }
 export default Objet;