diff --git a/frontend/package-lock.json b/frontend/package-lock.json index de08ec1..ec0fc7d 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -8,6 +8,11 @@ "name": "mi-app", "version": "0.0.0", "dependencies": { + "@fortawesome/fontawesome-svg-core": "^6.7.2", + "@fortawesome/free-brands-svg-icons": "^6.7.2", + "@fortawesome/free-regular-svg-icons": "^6.7.2", + "@fortawesome/free-solid-svg-icons": "^6.7.2", + "@fortawesome/react-fontawesome": "^0.2.2", "bootstrap": "^5.3.3", "chart.js": "^4.4.8", "leaflet": "^1.9.4", @@ -891,6 +896,76 @@ "node": "^18.18.0 || ^20.9.0 || >=21.1.0" } }, + "node_modules/@fortawesome/fontawesome-common-types": { + "version": "6.7.2", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.7.2.tgz", + "integrity": "sha512-Zs+YeHUC5fkt7Mg1l6XTniei3k4bwG/yo3iFUtZWd/pMx9g3fdvkSK9E0FOC+++phXOka78uJcYb8JaFkW52Xg==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/fontawesome-svg-core": { + "version": "6.7.2", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.7.2.tgz", + "integrity": "sha512-yxtOBWDrdi5DD5o1pmVdq3WMCvnobT0LU6R8RyyVXPvFRd2o79/0NCuQoCjNTeZz9EzA9xS3JxNWfv54RIHFEA==", + "license": "MIT", + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.7.2" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-brands-svg-icons": { + "version": "6.7.2", + "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.7.2.tgz", + "integrity": "sha512-zu0evbcRTgjKfrr77/2XX+bU+kuGfjm0LbajJHVIgBWNIDzrhpRxiCPNT8DW5AdmSsq7Mcf9D1bH0aSeSUSM+Q==", + "license": "(CC-BY-4.0 AND MIT)", + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.7.2" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-regular-svg-icons": { + "version": "6.7.2", + "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.7.2.tgz", + "integrity": "sha512-7Z/ur0gvCMW8G93dXIQOkQqHo2M5HLhYrRVC0//fakJXxcF1VmMPsxnG6Ee8qEylA8b8Q3peQXWMNZ62lYF28g==", + "license": "(CC-BY-4.0 AND MIT)", + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.7.2" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-solid-svg-icons": { + "version": "6.7.2", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.7.2.tgz", + "integrity": "sha512-GsBrnOzU8uj0LECDfD5zomZJIjrPhIlWU82AHwa2s40FKH+kcxQaBvBo3Z4TxyZHIyX8XTDxsyA33/Vx9eFuQA==", + "license": "(CC-BY-4.0 AND MIT)", + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.7.2" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/react-fontawesome": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz", + "integrity": "sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==", + "license": "MIT", + "dependencies": { + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "@fortawesome/fontawesome-svg-core": "~1 || ~6", + "react": ">=16.3" + } + }, "node_modules/@humanfs/core": { "version": "0.19.1", "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz", @@ -3279,7 +3354,6 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", - "dev": true, "license": "MIT" }, "node_modules/js-yaml": { @@ -3415,7 +3489,6 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", - "dev": true, "license": "MIT", "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" @@ -3501,7 +3574,6 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", - "dev": true, "license": "MIT", "engines": { "node": ">=0.10.0" @@ -3772,7 +3844,6 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", - "dev": true, "license": "MIT", "dependencies": { "loose-envify": "^1.4.0", @@ -3825,7 +3896,6 @@ "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "dev": true, "license": "MIT" }, "node_modules/react-leaflet": { diff --git a/frontend/package.json b/frontend/package.json index 8ca1bf0..8bc8875 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -11,6 +11,11 @@ "deploy": "vite build && scp -r ./dist/* jomaa@192.168.1.200:/var/www/contaminus/" }, "dependencies": { + "@fortawesome/fontawesome-svg-core": "^6.7.2", + "@fortawesome/free-brands-svg-icons": "^6.7.2", + "@fortawesome/free-regular-svg-icons": "^6.7.2", + "@fortawesome/free-solid-svg-icons": "^6.7.2", + "@fortawesome/react-fontawesome": "^0.2.2", "bootstrap": "^5.3.3", "chart.js": "^4.4.8", "leaflet": "^1.9.4", diff --git a/frontend/src/components/App.jsx b/frontend/src/components/App.jsx index 2a7fc6a..a68288c 100644 --- a/frontend/src/components/App.jsx +++ b/frontend/src/components/App.jsx @@ -4,6 +4,12 @@ import 'bootstrap/dist/css/bootstrap.min.css' import 'bootstrap/dist/js/bootstrap.bundle.min.js' import Home from '../pages/Home.jsx' +import MenuButton from './MenuButton.jsx' +import SideMenu from './SideMenu.jsx' +import ThemeButton from '../components/ThemeButton.jsx' +import Header from '../components/Header.jsx' + +import { useState } from 'react' /** * App.jsx @@ -15,19 +21,40 @@ import Home from '../pages/Home.jsx' * - 'leaflet/dist/leaflet.css': Archivo CSS que contiene los estilos para los mapas de Leaflet. * - 'bootstrap/dist/css/bootstrap.min.css': Archivo CSS que contiene los estilos de Bootstrap. * - 'bootstrap/dist/js/bootstrap.bundle.min.js': Archivo JS que contiene los scripts de Bootstrap. + * - Header: Componente que representa el encabezado de la página. * - Home: Componente que representa la página principal de la aplicación. + * - MenuButton: Componente que representa el botón del menú lateral. + * - SideMenu: Componente que representa el menú lateral. + * - ThemeButton: Componente que representa el botón de cambio de tema. * * Funcionalidad: * - App: Componente principal que renderiza la página Home. * - Planea añadir un React Router en el futuro. + * - El componente Header muestra el título y subtítulo de la página. + * - El componente MenuButton muestra un botón para abrir el menú lateral. + * - El componente SideMenu muestra un menú lateral con opciones de navegación. + * - El componente ThemeButton muestra un botón para cambiar el tema de la aplicación. + * - El componente Home contiene el contenido principal de la aplicación. * */ const App = () => { + const [isSideMenuOpen, setIsSideMenuOpen] = useState(false); + + const toggleSideMenu = () => { + setIsSideMenuOpen(!isSideMenuOpen); + }; + return ( <> {/* Planeo añadir un React Router */} - +
+ + + +
+ +
); } diff --git a/frontend/src/components/MenuButton.jsx b/frontend/src/components/MenuButton.jsx new file mode 100644 index 0000000..643c0b4 --- /dev/null +++ b/frontend/src/components/MenuButton.jsx @@ -0,0 +1,35 @@ +import "../css/MenuButton.css"; + +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faBars } from '@fortawesome/free-solid-svg-icons'; +import PropTypes from "prop-types"; + +/** ⚠️ EN PRUEBAS ⚠️ + * MenuButton.jsx + * + * Este archivo define el componente MenuButton, que muestra un botón de menú con un icono de barras. + * + * Importaciones: + * - "../css/MenuButton.css": Archivo CSS que contiene los estilos para el botón de menú. + * - FontAwesomeIcon, faBars: Componentes e iconos de FontAwesome para mostrar el icono de barras. + * - PropTypes: Librería para la validación de tipos de propiedades en componentes de React. + * + * Funcionalidad: + * - MenuButton: Componente que renderiza un botón con un icono de barras. + * - Utiliza la propiedad `onClick` para manejar el evento de clic del botón. + * + * PropTypes: + * - MenuButton espera una propiedad `onClick` que es una función requerida. + * ⚠️ EN PRUEBAS ⚠️ **/ + +export default function MenuButton({ onClick }) { + return ( + + ); +} + +MenuButton.propTypes = { + onClick: PropTypes.func.isRequired, +}; \ No newline at end of file diff --git a/frontend/src/components/SideMenu.jsx b/frontend/src/components/SideMenu.jsx new file mode 100644 index 0000000..4bf77ef --- /dev/null +++ b/frontend/src/components/SideMenu.jsx @@ -0,0 +1,46 @@ +import "../css/SideMenu.css"; +import PropTypes from 'prop-types'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faTimes } from '@fortawesome/free-solid-svg-icons'; + +/** ⚠️ EN PRUEBAS ⚠️ + * SideMenu.jsx + * + * Este archivo define el componente SideMenu, que muestra un menú lateral con enlaces de navegación. + * + * Importaciones: + * - "../css/SideMenu.css": Archivo CSS que contiene los estilos para el menú lateral. + * - PropTypes: Librería para la validación de tipos de propiedades en componentes de React. + * - FontAwesomeIcon, faTimes: Componentes e iconos de FontAwesome para mostrar el icono de cerrar. + * + * Funcionalidad: + * - SideMenu: Componente que renderiza un menú lateral con enlaces de navegación. + * - Utiliza la propiedad `isOpen` para determinar si el menú debe estar visible. + * - Utiliza la propiedad `onClose` para manejar el evento de cierre del menú. + * + * PropTypes: + * - SideMenu espera una propiedad `isOpen` que es un booleano requerido. + * - SideMenu espera una propiedad `onClose` que es una función requerida. + * ⚠️ EN PRUEBAS ⚠️ **/ + +const SideMenu = ({ isOpen, onClose }) => { + return ( +
+ + +
+ ); +}; + +SideMenu.propTypes = { + isOpen: PropTypes.bool.isRequired, + onClose: PropTypes.func.isRequired +} + +export default SideMenu; \ No newline at end of file diff --git a/frontend/src/css/MenuButton.css b/frontend/src/css/MenuButton.css new file mode 100644 index 0000000..5c7f2f5 --- /dev/null +++ b/frontend/src/css/MenuButton.css @@ -0,0 +1,26 @@ +.menuBtn { + position: fixed; + top: 20px; + right: 20px; + z-index: 1000; + border: none; + width: 50px; + height: 50px; + font-size: 24px; /* Aumenta el tamaño del icono */ + display: flex; + align-items: center; + justify-content: center; + color: var(--primary-color); + background-color: transparent; + cursor: pointer; + transition: background-color 0.3s, transform 0.3s; +} + +.menuBtn .fa-bars { + width: 30px; /* Ajusta el ancho del icono */ + height: 30px; /* Ajusta la altura del icono */ +} + +.menuBtn:hover { + color: var(--secondary-color); +} \ No newline at end of file diff --git a/frontend/src/css/SideMenu.css b/frontend/src/css/SideMenu.css new file mode 100644 index 0000000..088f75b --- /dev/null +++ b/frontend/src/css/SideMenu.css @@ -0,0 +1,63 @@ +.side-menu { + position: fixed; + top: 0; + right: -350px; + width: 350px; + height: 100%; + background-color: #333; + color: white; + transition: right 0.3s ease; + padding: 30px; + box-shadow: 2px 0 5px rgba(0,0,0,0.5); + z-index: 1000; +} + +.side-menu.open { + right: 0; +} + +.blur { + filter: blur(5px); + transition: filter 0.3s ease; +} + +.side-menu .close-btn { + position: absolute; + top: 20px; + right: 20px; + background: none; + border: none; + color: white; + font-size: 30px; + cursor: pointer; +} + +.side-menu .close-btn .fa-times { + width: 30px; + height: 30px; +} + +.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/pages/Home.jsx b/frontend/src/pages/Home.jsx index c53c879..4efaad5 100644 --- a/frontend/src/pages/Home.jsx +++ b/frontend/src/pages/Home.jsx @@ -1,8 +1,6 @@ -import Header from '../components/Header.jsx' import Dashboard from '../components/Dashboard.jsx' import PollutionMap from '../components/PollutionMap.jsx' import HistoryCharts from '../components/HistoryCharts.jsx' -import ThemeButton from '../components/ThemeButton.jsx' import SummaryCards from '../components/SummaryCards.jsx' /** @@ -11,31 +9,25 @@ import SummaryCards from '../components/SummaryCards.jsx' * Este archivo define el componente Home, que es una página principal de la aplicación. * * Importaciones: - * - Header: Un componente que muestra el encabezado de la página. * - 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. - * - ThemeButton: Un componente que permite cambiar el tema de la aplicació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 Header muestra el título y subtítulo de la página. * - El componente Dashboard contiene los componentes SummaryCards, PollutionMap y HistoryCharts. - * - El componente ThemeButton se renderiza al final para permitir el cambio de tema. * */ const Home = () => { return ( <> -
- ) }