Gallardo7761/contaminus
Archived
1
0
Fork 0
Code Pull Requests Activity

Refactor HistoryCharts and PollutionMap components for improved date handling; update SummaryCards data mapping and Card component prop types.

Browse Source
This commit is contained in:
Jose
2025-05-18 19:58:58 +02:00
parent cdff306ca1
commit 934ac521a3
5 changed files with 58 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/components/HistoryCharts.jsx
View File

@@ -23,7 +23,7 @@ const HistoryCharts = ({ groupId, deviceId }) => {
const ENDPOINT = config.appConfig.endpoints.GET_DEVICE_HISTORY;
const endp = ENDPOINT
.replace(':groupId', groupId)
.replace(':deviceId', deviceId); // si tu endpoint lo necesita
.replace(':deviceId', deviceId);
const reqConfig = {
baseUrl: `${BASE}${endp}`,
@@ -56,22 +56,14 @@ const HistoryChartsContent = () => {
carbonMonoxide: []
};
const threeDaysAgo = new Date();
threeDaysAgo.setDate(threeDaysAgo.getDate() - 3);
const isToday = (timestamp) => {
const date = new Date(timestamp * 1000);
return (
date.getUTCFullYear() >= threeDaysAgo.getUTCFullYear() &&
date.getUTCMonth() >= threeDaysAgo.getUTCMonth() &&
date.getUTCDate() >= threeDaysAgo.getUTCDate()
);
};
const threeDaysAgo = Date.now() - (3 * 24 * 60 * 60 * 1000); // hace 3 días en ms
const isRecent = (timestamp) => (timestamp * 1000) >= threeDaysAgo;
data?.forEach(sensor => {
if (
sensor.value != null &&
grouped[sensor.valueType] &&
isToday(sensor.timestamp)
isRecent(sensor.timestamp)
) {
grouped[sensor.valueType].push({
timestamp: sensor.timestamp * 1000,
@@ -81,6 +73,8 @@ const HistoryChartsContent = () => {
});
console.log("Grouped data:", grouped);
const sortAndExtract = (entries) => {
const sorted = entries.sort((a, b) => a.timestamp - b.timestamp);

80
frontend/src/components/PollutionMap.jsx
View File

@@ -11,28 +11,28 @@ import "leaflet.heat";
import { useEffect } from 'react';
const PollutionMap = ({ groupId, deviceId }) => {
const { config, configLoading, configError } = useConfig();
const { config, configLoading, configError } = useConfig();
if (configLoading) return <p>Cargando configuración...</p>;
if (configError) return <p>Error al cargar configuración: {configError}</p>;
if (!config) return <p>Configuración no disponible.</p>;
if (configLoading) return <p>Cargando configuración...</p>;
if (configError) return <p>Error al cargar configuración: {configError}</p>;
if (!config) return <p>Configuración no disponible.</p>;
const BASE = config.appConfig.endpoints.LOGIC_URL;
const ENDPOINT = config.appConfig.endpoints.GET_DEVICE_POLLUTION_MAP;
const endp = ENDPOINT
.replace(':groupId', groupId)
.replace(':deviceId', deviceId);
const BASE = config.appConfig.endpoints.LOGIC_URL;
const ENDPOINT = config.appConfig.endpoints.GET_DEVICE_POLLUTION_MAP;
const endp = ENDPOINT
.replace(':groupId', groupId)
.replace(':deviceId', deviceId);
const reqConfig = {
baseUrl: `${BASE}${endp}`,
params: {}
};
const reqConfig = {
baseUrl: `${BASE}${endp}`,
params: {}
};
return (
<DataProvider config={reqConfig}>
<PollutionMapContent />
</DataProvider>
);
return (
<DataProvider config={reqConfig}>
<PollutionMapContent />
</DataProvider>
);
};
const PollutionMapContent = () => {
@@ -40,28 +40,42 @@ const PollutionMapContent = () => {
const { data, dataLoading, dataError } = useDataContext();
useEffect(() => {
if (!data || !config) return;
if (!data || !config) return;
const mapContainer = document.getElementById("map");
if (!mapContainer) return;
const isToday = (timestamp) => {
const today = new Date();
const date = new Date(timestamp * 1000); // si viene en segundos
const SEVILLA = config.userConfig.city;
return (
today.getFullYear() === date.getFullYear() &&
today.getMonth() === date.getMonth() &&
today.getDate() === date.getDate()
);
};
const map = L.map(mapContainer).setView(SEVILLA, 12);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution:
'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
const mapContainer = document.getElementById("map");
if (!mapContainer) return;
const points = data.map((p) => [p.lat, p.lon, p.carbonMonoxide]);
const SEVILLA = config.userConfig.city;
L.heatLayer(points, { radius: 25 }).addTo(map);
const map = L.map(mapContainer).setView(SEVILLA, 12);
return () => {
map.remove();
};
}, [data, config]);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution:
'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
const points = data
.filter(p => isToday(p.timestamp))
.map(p => [p.lat, p.lon, p.carbonMonoxide]);
L.heatLayer(points, { radius: 25 }).addTo(map);
return () => {
map.remove();
};
}, [data, config]);
if (configLoading) return <p>Cargando configuración...</p>;
if (configError) return <p>Error al cargar configuración: {configError}</p>;

4
frontend/src/components/SummaryCards.jsx
View File

@@ -86,8 +86,8 @@ const SummaryCardsContent = () => {
if (data) {
let coData = data[2];
let tempData = data[1];
let coData = data[1];
let tempData = data[2];
CardsData[0].content = tempData.temperature + "°C";
CardsData[0].status = "Temperatura actual";

10
frontend/src/components/layout/Card.jsx
View File

@@ -82,15 +82,7 @@ Card.propTypes = {
link: PropTypes.bool,
to: PropTypes.string,
text: PropTypes.bool,
};
Card.defaultProps = {
styleMode: "",
className: "",
style: {},
link: false,
to: "",
text: false,
marquee: PropTypes.bool,
};
export default Card;

2
frontend/src/pages/GroupView.jsx
View File

@@ -110,7 +110,7 @@ const GroupViewContent = () => {
link: gpsSensor != undefined,
text: gpsSensor == undefined,
marquee: gpsSensor == undefined,
content: gpsSensor == undefined ? "SOLO VEHICULOS ELECTRICOS" : mapPreview,
content: gpsSensor == undefined ? "TODO TIPO DE VEHICULOS" : mapPreview,
to: `/groups/${groupId}/devices/${device.deviceId}`,
className: `col-12 col-md-6 col-lg-4 ${gpsSensor == undefined ? "led" : ""}`,
};