111 lines
3.5 KiB
JavaScript
111 lines
3.5 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";
|
|
import { useAuth } from "../../AuthContext";
|
|
import UserInfosObject from "../../components/UserInfosObject";
|
|
function Objet() {
|
|
const {user} =useAuth();
|
|
const identifiant = new URLSearchParams(window.location.search).get("id");
|
|
const [object, setObject] = useState({});
|
|
const [graphStates, setGraphStates] = useState({
|
|
wind: false,
|
|
temperature: false,
|
|
pressure: false,
|
|
humidity: false,
|
|
});
|
|
const [afficherModif, defafficherModif] = useState(false);
|
|
const graphRefs = {
|
|
temperature: useRef(null),
|
|
pressure: useRef(null),
|
|
humidity: useRef(null),
|
|
wind: useRef(null),
|
|
};
|
|
useEffect(() => {
|
|
axios
|
|
.post(`${API_BASE_URL}/objet`, {
|
|
id: identifiant,
|
|
userId:user.id,
|
|
shouldUpdatePoints:true,
|
|
})
|
|
.then((response) => {
|
|
setObject(response.data[0]);
|
|
})
|
|
.catch((error) => {
|
|
console.error("Erreur lors de la récupération :", error);
|
|
});
|
|
}, [user]);
|
|
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">
|
|
<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} />
|
|
)}
|
|
<WindInfo
|
|
object={object}
|
|
setGraphStates={setGraphStates}
|
|
graphStates={graphStates}
|
|
graphRefs={graphRefs}
|
|
/>
|
|
<MeteoInfos
|
|
object={object}
|
|
graphStates={graphStates}
|
|
setGraphStates={setGraphStates}
|
|
graphRefs={graphRefs}
|
|
/>
|
|
<BatterieInfo object={object} />
|
|
<UserInfosObject user={object.proprio_id}/>
|
|
|
|
</div>
|
|
|
|
{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;
|