Ajout de la gestion des références pour le défilement fluide dans les composants graphiques et Clarrification du code

2025-04-04 11:47:17 +02:00 · 2025-04-04 11:47:17 +02:00 · fa1135eaf9
commit fa1135eaf9
parent ffa19ba1ba
7 changed files with 104 additions and 111 deletions
--- 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>
--- a/Front-end/src/components/InfoObject.jsx
+++ b/Front-end/src/components/InfoObject.jsx
@ -4,7 +4,7 @@ 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 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>
--- 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">
--- 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>
--- 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} />
--- 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;

@ -48,8 +53,10 @@ function WindInfo({ object, defAffWindGraph, AffWindGraph }) {
                </div>
              </div>
               <BoutonGraphique
-                TypeAff={AffWindGraph}
-                setAffichage={defAffWindGraph}
+                type="wind"
+                graphStates={graphStates}
+                setGraphStates={setGraphStates}
+                graphCible={graphRefs.wind}
              />
            </div>
          </div>
--- 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}
+            setGraphStates={setGraphStates}
+            graphStates={graphStates}
+            graphRefs={graphRefs}
          />
-          ) : (
-            <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}
+            graphStates={graphStates}
+            setGraphStates={setGraphStates}
+            graphRefs={graphRefs}
          />
-          ) : (
-            <p>Chargement des données...</p>
-          )}
          <BatterieInfo object={object} />
        </div>
-        {AffWindGraph &&
-          (object && object.id ? (
-            <WindGraph object={object} />
-          ) : (
-            <p>Chargement des données...</p>
-          ))}
-        {AffTempGraph &&
-          (object && object.id ? (
+
+        {graphStates.wind && <WindGraph object={object} reference={graphRefs.wind} />}
+        {graphStates.temperature && (
          <MeteoGraph
            object={object}
            categorie={"temperature"}
            Logo={Thermometer}
+            reference={graphRefs.temperature}
          />
-          ) : (
-            <p>Chargement des données...</p>
-          ))}
-        {AffPressionGraph &&
-          (object && object.id ? (
+        )}
+        {graphStates.pressure && (
          <MeteoGraph
            object={object}
            categorie={"pressure"}
            Logo={CircleGauge}
+            reference={graphRefs.pressure}
          />
-          ) : (
-            <p>Chargement des données...</p>
-          ))}
-        {AffHumiditeGraph &&
-          (object && object.id ? (
-            <MeteoGraph object={object} categorie={"humidity"} Logo={Droplet} />
-          ) : (
-            <p>Chargement des données...</p>
-          ))}
+        )}
+        {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;