cm862sz/zkt26
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor MeteoInfos component and add ParticularMeteo for better data display

Browse Source
This commit is contained in:
Mathis 2025-04-06 15:03:29 +02:00
parent 22f11e254c
commit 04927fd87a
3 changed files with 81 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
Front-end/src/components/MeteoInfos.jsx
View File

@ -1,26 +1,21 @@
import { Thermometer, Sun, CircleGauge, Droplet } from "lucide-react";
import React, { useEffect, useState } from "react";
import axios from "axios";
import { API_BASE_URL } from "../config";
import BoutonGraphique from "./BoutonGraphique";
import AlertInactive from "./AlertInactive";
import ParticularMeteo from "./ParticularMeteo";
function MeteoInfos({
object,
graphStates,
setGraphStates,
graphRefs
}) {
function MeteoInfos({ object, graphStates, setGraphStates, graphRefs }) {
const [rawData, setRawData] = useState([]);
const [AffAlert,setAffAlert] = useState(false);
const [AffAlert, setAffAlert] = useState(false);
const [AffRegles, setAffRegles] = useState(false);
const identifiant = object.id;
useEffect(() => {
axios.get(`${API_BASE_URL}/meteo?id=${identifiant}`).then((response) => {
setRawData(response.data);
if(rawData.length <5){
if (rawData.length < 5) {
setAffAlert(true);
}
});
@ -29,7 +24,7 @@ function MeteoInfos({
const lastData = rawData.length > 0 ? rawData[rawData.length - 1] : null;
return (
<div key={object.id} className="bg-white p-6 rounded-xl min-w-5xl">
{(AffAlert&&(object.status==="active")) && (
{AffAlert && object.status === "active" && (
<AlertInactive affAlert={AffAlert} setAffAlert={setAffAlert} />
)}
<div className="flex align-items gap-6">
@ -40,83 +35,40 @@ function MeteoInfos({
</div>
{lastData ? (
<div className="flex flex-col items-center gap-4">
{lastData.temperature && (
<div className="bg-indigo-50 rounded-lg flex items-center w-full">
<div className="flex align-items gap-3 w-full justify-between">
<div className="flex align-items ml-3 gap-2">
<div className="flex items-center">
<Thermometer className="text-indigo-600" size={40} />
</div>
<div className="flex flex-col items-start">
<h1 className="text-indigo-600 text-xl font-bold ">
Température
</h1>
<h1 className="text-gray-700 text-4xl font-bold">
{lastData.temperature} <span className="text-lg">°C</span>
</h1>
</div>
</div>
<ParticularMeteo
type="temperature"
data={lastData}
Icon={Thermometer}
texte1="Température"
texte2="°C"
graphStates={graphStates}
setGraphStates={setGraphStates}
graphRefs={graphRefs}
/>
<BoutonGraphique
type="temperature"
graphStates={graphStates}
setGraphStates={setGraphStates}
graphCible={graphRefs.temperature}
{/* Pression */}
<ParticularMeteo
type="pressure"
data={lastData}
Icon={CircleGauge}
texte1="Pression"
texte2="hPa"
graphStates={graphStates}
setGraphStates={setGraphStates}
graphRefs={graphRefs}
/>
/>
</div>
</div>
)}
{lastData.pressure && (
<div className="bg-indigo-50 rounded-lg flex items-center w-full">
<div className="flex align-items gap-3 w-full justify-between">
<div className="flex align-items ml-3 gap-2">
<div className="flex items-center">
<CircleGauge className="text-indigo-600" size={40} />
</div>
<div className="flex flex-col items-start">
<h1 className="text-indigo-600 text-xl font-bold ">
Pression
</h1>
<h1 className="text-gray-700 text-4xl font-bold">
{lastData.pressure} <span className="text-lg">hPa</span>
</h1>
</div>
</div>
<BoutonGraphique
type="pressure"
graphStates={graphStates}
setGraphStates={setGraphStates}
graphCible={graphRefs.pressure}
/>
</div>
</div>
)}
{lastData.humidity && (
<div className="bg-indigo-50 rounded-lg flex items-center w-full">
<div className="flex align-items gap-3 w-full justify-between">
<div className="flex align-items ml-3 gap-2">
<div className="flex items-center">
<Droplet className="text-indigo-600" size={40} />
</div>
<div className="flex flex-col items-start">
<h1 className="text-indigo-600 text-xl font-bold ">
Humidité
</h1>
<h1 className="text-gray-700 text-4xl font-bold">
{lastData.humidity} <span className="text-lg">%</span>
</h1>
</div>
</div>
<BoutonGraphique
type="humidity"
graphStates={graphStates}
setGraphStates={setGraphStates}
graphCible={graphRefs.humidity}
/>
</div>
</div>
)}
{/* Humidité */}
<ParticularMeteo
type="humidity"
data={lastData}
Icon={Droplet}
texte1="Humidité"
texte2="%"
graphStates={graphStates}
setGraphStates={setGraphStates}
graphRefs={graphRefs}
/>
<h1 className="text-gray-500 text-sm">
Dernier enregistrement : {lastData.timestamp}
</h1>

42
Front-end/src/components/ParticularMeteo.jsx Normal file
View File

@ -0,0 +1,42 @@
import React from "react";
import BoutonGraphique from "./BoutonGraphique";
function ParticularMeteo({
type,
data,
Icon,
texte1,
texte2,
graphStates,
setGraphStates,
graphRefs,
}) {
if (data[type]) {
return (
<div className="bg-indigo-50 rounded-lg flex items-center w-full">
<div className="flex align-items gap-3 w-full justify-between">
<div className="flex align-items ml-3 gap-2">
<div className="flex items-center">
<Icon className="text-indigo-600" size={40} />
</div>
<div className="flex flex-col items-start">
<h1 className="text-indigo-600 text-xl font-bold ">
{texte1}
</h1>
<h1 className="text-gray-700 text-4xl font-bold">
{data[type]} <span className="text-lg">{texte2}</span>
</h1>
</div>
</div>
<BoutonGraphique
type={type}
graphStates={graphStates}
setGraphStates={setGraphStates}
graphCible={graphRefs[type]}
/>
</div>
</div>
);
}
}
export default ParticularMeteo;

2
Front-end/src/components/WindGraph.jsx
View File

@ -25,7 +25,7 @@ function WindGraph({ object,reference }) {
);
}
return null; // Si aucun point n'est survolé
return null;
};
useEffect(() => {
if (reference?.current) {