From 934ac521a37696a534c59929f1ebfe07e140b757 Mon Sep 17 00:00:00 2001
From: Jose <jomaamga@outlook.es>
Date: Sun, 18 May 2025 19:58:58 +0200
Subject: [PATCH] Refactor HistoryCharts and PollutionMap components for
 improved date handling; update SummaryCards data mapping and Card component
 prop types.

---
 frontend/src/components/HistoryCharts.jsx | 18 ++---
 frontend/src/components/PollutionMap.jsx  | 82 +++++++++++++----------
 frontend/src/components/SummaryCards.jsx  |  4 +-
 frontend/src/components/layout/Card.jsx   | 10 +--
 frontend/src/pages/GroupView.jsx          |  2 +-
 5 files changed, 58 insertions(+), 58 deletions(-)

diff --git a/frontend/src/components/HistoryCharts.jsx b/frontend/src/components/HistoryCharts.jsx
index 5a980e4..e534600 100644
--- a/frontend/src/components/HistoryCharts.jsx
+++ b/frontend/src/components/HistoryCharts.jsx
@@ -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);
 
diff --git a/frontend/src/components/PollutionMap.jsx b/frontend/src/components/PollutionMap.jsx
index ac2d762..94a2815 100644
--- a/frontend/src/components/PollutionMap.jsx
+++ b/frontend/src/components/PollutionMap.jsx
@@ -11,57 +11,71 @@ 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 = () => {
   const { config, configLoading, configError } = useConfig();
   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>;
diff --git a/frontend/src/components/SummaryCards.jsx b/frontend/src/components/SummaryCards.jsx
index 2a2fb58..9da88d6 100644
--- a/frontend/src/components/SummaryCards.jsx
+++ b/frontend/src/components/SummaryCards.jsx
@@ -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";
diff --git a/frontend/src/components/layout/Card.jsx b/frontend/src/components/layout/Card.jsx
index 4c9c235..438702e 100644
--- a/frontend/src/components/layout/Card.jsx
+++ b/frontend/src/components/layout/Card.jsx
@@ -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;
diff --git a/frontend/src/pages/GroupView.jsx b/frontend/src/pages/GroupView.jsx
index 1f85910..f686909 100644
--- a/frontend/src/pages/GroupView.jsx
+++ b/frontend/src/pages/GroupView.jsx
@@ -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" : ""}`,
                 };