120 lines
4.1 KiB
JavaScript
120 lines
4.1 KiB
JavaScript
import React from "react";
|
|
import { Thermometer, CircleGauge, Droplet } from "lucide-react";
|
|
|
|
import { useEffect, useState, useRef} from "react";
|
|
import axios from "axios";
|
|
import { API_BASE_URL } from "../../config";
|
|
|
|
import InfoObjet from "../../components/InfoObject";
|
|
import ModifObject from "../../components/ModifObject";
|
|
import WindGraph from "../../components/WindGraph";
|
|
import WindInfo from "../../components/WindInfo";
|
|
import MeteoInfos from "../../components/MeteoInfos";
|
|
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,
|
|
})
|
|
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);
|
|
|
|
useEffect(() => {
|
|
axios.get(`${API_BASE_URL}/objet?id=${identifiant}`).then((response) => {
|
|
setObject(response.data[0]);
|
|
});
|
|
}, [identifiant]);
|
|
return (
|
|
<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">
|
|
<h2 className="text-4xl font-bold text-gray-900 mb-12">
|
|
Tableau de bord - {object.name}
|
|
</h2>
|
|
</div>
|
|
<div className="grid md:grid-cols-1 lg:grid-cols-3 gap-8 mb-5">
|
|
{!afficherModif ? (
|
|
<InfoObjet object={object} defafficherModif={defafficherModif} />
|
|
) : (
|
|
<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>
|
|
)}
|
|
<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>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
export default Objet;
|