;
const CardsData = [
{ id: 1, title: "Temperatura", content: "N/A", status: "Esperando datos...", titleIcon: },
{ id: 2, title: "Humedad", content: "N/A", status: "Esperando datos...", titleIcon: },
- { id: 3, title: "Contaminación", content: "N/A", status: "Esperando datos...", titleIcon: },
- { id: 4, title: "Presión", content: "N/A", status: "Esperando datos...", titleIcon: }
+ { id: 3, title: "Nivel de CO", content: "N/A", status: "Esperando datos...", titleIcon: },
+ { id: 4, title: "Actualizado a las", content: "N/A", status: "Esperando datos...", titleIcon: }
];
if (data) {
- data.forEach((sensor) => {
- if (sensor.sensor_type === "MQ-135") {
- CardsData[2].content = `${sensor.value} µg/m³`;
- CardsData[2].status = sensor.value > 100 ? "Alta contaminación 😷" : "Aire moderado 🌤️";
- } else if (sensor.sensor_type === "DHT-11") {
- CardsData[1].content = `${sensor.humidity}%`;
- CardsData[1].status = sensor.humidity > 70 ? "Humedad alta 🌧️" : "Nivel normal 🌤️";
- CardsData[0].content = `${sensor.temperature}°C`;
- CardsData[0].status = sensor.temperature > 30 ? "Calor intenso ☀️" : "Clima agradable 🌤️";
- }
- });
+ let coData = data[1];
+ let tempData = data[2];
+
+ let lastTime = timestampToTime(coData.airValuesTimestamp);
+ let lastDate = new Date(coData.airValuesTimestamp);
+
+ CardsData[0].content = tempData.temperature + "°C";
+ CardsData[0].status = "Temperatura actual";
+ CardsData[1].content = tempData.humidity + "%";
+ CardsData[1].status = "Humedad actual";
+ CardsData[2].content = coData.carbonMonoxide + " ppm";
+ CardsData[2].status = "Nivel de CO actual";
+ CardsData[3].content = lastTime.slice(0, 5);
+ CardsData[3].status = "Día " + lastDate.toLocaleDateString();
+
}
return (
@@ -87,7 +94,7 @@ const SummaryCardsContent = () => {
}
SummaryCards.propTypes = {
- data: PropTypes.array
+ deviceId: PropTypes.number.isRequired
};
export default SummaryCards;
\ No newline at end of file
diff --git a/frontend/src/css/Home.css b/frontend/src/css/Home.css
new file mode 100644
index 0000000..1a8fd92
--- /dev/null
+++ b/frontend/src/css/Home.css
@@ -0,0 +1,67 @@
+.home-container {
+ font-family: Arial, sans-serif;
+ text-align: center;
+ background-color: #f4f4f4;
+ padding: 20px;
+}
+
+.hero-section {
+ background: #4CAF50;
+ color: white;
+ padding: 50px 20px;
+ border-radius: 8px;
+}
+
+.hero-title {
+ font-size: 3em;
+ margin-bottom: 10px;
+}
+
+.hero-description {
+ font-size: 1.2em;
+ margin-bottom: 20px;
+}
+
+.cta-button {
+ background-color: #fff;
+ color: #4CAF50;
+ border: none;
+ padding: 15px 30px;
+ font-size: 1.1em;
+ cursor: pointer;
+ border-radius: 5px;
+ transition: background-color 0.3s ease;
+}
+
+.cta-button:hover {
+ background-color: #388E3C;
+ color: white;
+}
+
+.about-section {
+ margin-top: 50px;
+}
+
+.features {
+ display: flex;
+ justify-content: space-around;
+ margin-top: 30px;
+}
+
+.feature {
+ background-color: #ffffff;
+ padding: 20px;
+ border-radius: 8px;
+ width: 30%;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.feature h3 {
+ font-size: 1.5em;
+ color: #333;
+}
+
+.feature p {
+ font-size: 1.1em;
+ color: #666;
+}
diff --git a/frontend/src/css/SideMenu.css b/frontend/src/css/SideMenu.css
index 28c7b39..6428305 100644
--- a/frontend/src/css/SideMenu.css
+++ b/frontend/src/css/SideMenu.css
@@ -4,14 +4,22 @@
left: -350px;
width: 350px;
height: 100%;
- background-color: #333;
- color: white;
transition: left 0.3s ease;
padding: 30px;
box-shadow: 2px 0 5px rgba(0,0,0,0.5);
z-index: 1000;
}
+.side-menu.light {
+ background-color: white;
+ color: black;
+}
+
+.side-menu.dark {
+ background-color: #333;
+ color: white;
+}
+
.side-menu.open {
left: 0;
}
@@ -27,11 +35,18 @@
right: 20px;
background: none;
border: none;
- color: white;
font-size: 30px;
cursor: pointer;
}
+.side-menu .close-btn.light {
+ color: black;
+}
+
+.side-menu .close-btn.dark {
+ color: white;
+}
+
.side-menu .close-btn .fa-times {
width: 30px;
height: 30px;
@@ -39,25 +54,4 @@
.side-menu .close-btn:hover {
color: var(--primary-color);
-}
-
-.side-menu ul {
- list-style: none;
- padding: 0;
-}
-
-.side-menu ul li {
- margin: 20px 0;
-}
-
-.side-menu ul li a:hover {
- color: var(--primary-color);
-}
-
-.side-menu ul li a {
- color: white;
- text-decoration: none;
- font-size: 30px;
- font-weight: 600;
- /*text-transform: uppercase;*/
}
\ No newline at end of file
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index 7d4e405..452ec5e 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -1,5 +1,6 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
+import { BrowserRouter } from 'react-router-dom'
import './css/index.css'
import App from './components/App.jsx'
@@ -29,7 +30,9 @@ createRoot(document.getElementById('root')).render(
-
+
+
+ ,
diff --git a/frontend/src/pages/Dashboard.jsx b/frontend/src/pages/Dashboard.jsx
new file mode 100644
index 0000000..9c56e17
--- /dev/null
+++ b/frontend/src/pages/Dashboard.jsx
@@ -0,0 +1,35 @@
+import PollutionMap from '../components/PollutionMap.jsx'
+import HistoryCharts from '../components/HistoryCharts.jsx'
+import SummaryCards from '../components/SummaryCards.jsx'
+
+import { useParams } from 'react-router-dom';
+
+/**
+ * Dashboard.jsx
+ *
+ * Este archivo define el componente Dashboard, que es el panel de control de un device.
+ *
+ * Importaciones:
+ * - PollutionMap: Un componente que muestra un mapa de la contaminación.
+ * - HistoryCharts: Un componente que muestra gráficos históricos de la contaminación.
+ * - SummaryCards: Un componente que muestra tarjetas resumen con información relevante.
+ *
+ * Funcionalidad:
+ * - El componente Home utiliza una estructura de JSX para organizar y renderizar los componentes importados.
+ * - El componente Dashboard contiene los componentes SummaryCards, PollutionMap y HistoryCharts.
+ *
+ */
+
+const Dashboard = () => {
+ const { deviceId } = useParams();
+
+ return (
+
+
+
+
+
+ );
+}
+
+export default Dashboard;
diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx
index 4efaad5..e2ba2cd 100644
--- a/frontend/src/pages/Home.jsx
+++ b/frontend/src/pages/Home.jsx
@@ -1,35 +1,41 @@
-import Dashboard from '../components/Dashboard.jsx'
-import PollutionMap from '../components/PollutionMap.jsx'
-import HistoryCharts from '../components/HistoryCharts.jsx'
-import SummaryCards from '../components/SummaryCards.jsx'
-
-/**
- * Home.jsx
- *
- * Este archivo define el componente Home, que es una página principal de la aplicación.
- *
- * Importaciones:
- * - Dashboard: Un componente que actúa como contenedor para los componentes principales de la página.
- * - PollutionMap: Un componente que muestra un mapa de la contaminación.
- * - HistoryCharts: Un componente que muestra gráficos históricos de la contaminación.
- * - SummaryCards: Un componente que muestra tarjetas resumen con información relevante.
- *
- * Funcionalidad:
- * - El componente Home utiliza una estructura de JSX para organizar y renderizar los componentes importados.
- * - El componente Dashboard contiene los componentes SummaryCards, PollutionMap y HistoryCharts.
- *
- */
+import '../css/Home.css';
const Home = () => {
return (
- <>
-
-
-
-
-
-
- )
+
+
+
ContaminUS
+
+ Proyecto universitario para monitorear la calidad del aire usando sensores IoT.
+
+
+
+
+
+
Sobre el Proyecto
+
+ ContaminUS es una solución basada en tecnologías IoT para medir la calidad del aire en tiempo real.
+ Este proyecto busca crear una herramienta accesible para estudiantes, investigadores y comunidades
+ interesadas en el monitoreo ambiental.
+
+
+
+
Medición en tiempo real
+
Monitorea la calidad del aire con sensores MQ-135 y DHT11, mostrando datos precisos y actualizados.
+
+
+
Aplicación web interactiva
+
Visualiza los datos de calidad del aire mediante mapas interactivos y gráficos.
+
+
+
Colaboración en la universidad
+
El proyecto está orientado a estudiantes que deseen aprender y colaborar con el análisis de datos ambientales.
+
+
+
+
+ );
}
-export default Home;
+
+export default Home;
\ No newline at end of file
diff --git a/frontend/src/util/date.js b/frontend/src/util/date.js
new file mode 100644
index 0000000..eec9bc7
--- /dev/null
+++ b/frontend/src/util/date.js
@@ -0,0 +1,11 @@
+const timestampToTime = (timestamp) => {
+ const date = new Date(timestamp);
+ return date.toLocaleTimeString();
+}
+
+const timestampToDate = (timestamp) => {
+ const date = new Date(timestamp);
+ return date.toLocaleDateString();
+}
+
+export { timestampToTime, timestampToDate };
\ No newline at end of file
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index 14bdcc6..7eb7a81 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -3,6 +3,9 @@ import react from '@vitejs/plugin-react'
// https://vite.dev/config/
export default defineConfig({
+ server: {
+ port: 8080,
+ },
plugins: [react()],
build: {
rollupOptions: {