113 lines
3.2 KiB
JavaScript
113 lines
3.2 KiB
JavaScript
import PropTypes from 'prop-types';
|
|
import CardContainer from './layout/CardContainer';
|
|
|
|
import { DataProvider } from '@/context/DataContext';
|
|
import { useDataContext } from '@/hooks/useDataContext';
|
|
|
|
import { useConfig } from '@/hooks/useConfig.js';
|
|
|
|
const SummaryCards = ({ groupId, deviceId }) => {
|
|
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>;
|
|
|
|
const BASE = config.appConfig.endpoints.LOGIC_URL;
|
|
const ENDPOINT = config.appConfig.endpoints.GET_DEVICE_LATEST_VALUES;
|
|
const endp = ENDPOINT
|
|
.replace(':groupId', groupId)
|
|
.replace(':deviceId', deviceId);
|
|
|
|
const reqConfig = {
|
|
baseUrl: `${BASE}${endp}`,
|
|
params: {}
|
|
};
|
|
|
|
return (
|
|
<DataProvider config={reqConfig}>
|
|
<SummaryCardsContent />
|
|
</DataProvider>
|
|
);
|
|
};
|
|
|
|
const SummaryCardsContent = () => {
|
|
const { data, dataLoading, dataError } = useDataContext();
|
|
|
|
if (dataLoading) return <p>Cargando datos...</p>;
|
|
if (dataError) return <p>Error al cargar datos: {dataError}</p>;
|
|
if (!data) return <p>Datos no disponibles.</p>;
|
|
|
|
const CardsData = [
|
|
{
|
|
id: 1,
|
|
title: "Temperatura",
|
|
content: "N/A",
|
|
status: "Esperando datos...",
|
|
titleIcon: '🌡 ',
|
|
className: "col-12 col-md-6 col-lg-3",
|
|
link: false,
|
|
text: true
|
|
},
|
|
|
|
{
|
|
id: 2,
|
|
title: "Humedad",
|
|
content: "N/A",
|
|
status: "Esperando datos...",
|
|
titleIcon: '💦 ',
|
|
className: "col-12 col-md-6 col-lg-3",
|
|
link: false,
|
|
text: true
|
|
},
|
|
|
|
{
|
|
id: 3,
|
|
title: "Presión",
|
|
content: "N/A",
|
|
status: "Esperando datos...",
|
|
titleIcon: '⏲ ',
|
|
className: "col-12 col-md-6 col-lg-3",
|
|
link: false,
|
|
text: true
|
|
},
|
|
|
|
{
|
|
id: 4,
|
|
title: "Nivel de CO",
|
|
content: "N/A",
|
|
status: "Esperando datos...",
|
|
titleIcon: '☁ ',
|
|
className: "col-12 col-md-6 col-lg-3",
|
|
link: false,
|
|
text: true
|
|
}
|
|
];
|
|
|
|
|
|
if (data) {
|
|
let coData = data[2];
|
|
let tempData = data[1];
|
|
|
|
CardsData[0].content = tempData.temperature + "°C";
|
|
CardsData[0].status = "Temperatura actual";
|
|
CardsData[1].content = tempData.humidity + "%";
|
|
CardsData[1].status = "Humedad actual";
|
|
CardsData[3].content = coData.carbonMonoxide + " ppm";
|
|
CardsData[3].status = "Nivel de CO actual";
|
|
CardsData[2].content = tempData.pressure + " hPa";
|
|
CardsData[2].status = "Presión actual";
|
|
|
|
}
|
|
|
|
return (
|
|
<CardContainer cards={CardsData} />
|
|
);
|
|
}
|
|
|
|
SummaryCards.propTypes = {
|
|
groupId: PropTypes.string.isRequired,
|
|
deviceId: PropTypes.number.isRequired
|
|
};
|
|
|
|
export default SummaryCards; |