diff --git a/src/src/assets/img/bg-home1.jpg b/src/src/assets/img/bg-home1.jpg new file mode 100644 index 0000000..3267ad6 Binary files /dev/null and b/src/src/assets/img/bg-home1.jpg differ diff --git a/src/src/components/stationCard/StationCard.js b/src/src/components/stationCard/StationCard.js index adccb94..af62606 100644 --- a/src/src/components/stationCard/StationCard.js +++ b/src/src/components/stationCard/StationCard.js @@ -3,41 +3,43 @@ import "./StationCard.css"; import { Card, Col, Spinner } from "react-bootstrap"; import { IconDroplet, IconMapPin, IconSun } from "@tabler/icons-react"; import Services from "../../services/Services"; +import { getDayOfWeek } from "../../utils/Utilities"; function StationCard({ loading, msgError, station }) { const [lastDataStation, setLastDataStation] = useState(); - console.log(station); - useEffect(() => { if (!station) return; const fetchLastDailyWeather = async () => { try { - const idStations = station.id; - const response = await Services.getLastDailyWeather(idStations); + const response = await Services.getLastDailyWeather(station.id); setLastDataStation(response); - console.log(response); } catch (error) { console.error( "Error al cargar la última información de las estaciones:", error ); - } finally { } }; fetchLastDailyWeather(); }, [station]); - const getDayOfWeek = (dateString) => { - const date = new Date(dateString); - return date.toLocaleDateString("es-ES", { weekday: "long" }); - }; + const renderClimaticData = (measure, icon, unit) => ( + + {icon} + {lastDataStation?.climaticData + ? lastDataStation.climaticData + .find((item) => item.measure === measure) + ?.value.toFixed(1) ?? "N/A" + : "N/A"}{" "} + {unit} + + ); return ( - - {/* Onda SVG */} +
@@ -70,9 +72,9 @@ function StationCard({ loading, msgError, station }) {

{msgError}

) : station ? ( - +
-
+

{station.name}

@@ -90,24 +92,16 @@ function StationCard({ loading, msgError, station }) {
- - - {lastDataStation?.climaticData - ? lastDataStation.climaticData - .find((item) => item.measure === "prec") - ?.value.toFixed(1) ?? "N/A" - : "N/A"}{" "} - mm - - - - {lastDataStation?.climaticData - ? lastDataStation.climaticData - .find((item) => item.measure === "sol_rad") - ?.value.toFixed(1) ?? "N/A" - : "N/A"}{" "} - M/J - + {renderClimaticData( + "prec", + , + "mm" + )} + {renderClimaticData( + "sol_rad", + , + "M/J" + )}
@@ -122,7 +116,7 @@ function StationCard({ loading, msgError, station }) {
- {station.municipality}, {station.state} + {station.municipality}, {station.state}
diff --git a/src/src/pages/home/Home.css b/src/src/pages/home/Home.css index 39d7033..a5a8f6e 100644 --- a/src/src/pages/home/Home.css +++ b/src/src/pages/home/Home.css @@ -1,10 +1,10 @@ .header-bg { background: linear-gradient( - 180deg, + 270deg, rgba(255, 255, 255, 0) 0%, - rgba(255, 255, 255, 0.199) 100% + rgba(40, 54, 24, 0.76) 100% ), - url("../../assets/img/bg-home.jpg"); + url("../../assets/img/bg-home1.jpg"); background-size: cover; background-position: center; min-height: 90vh; diff --git a/src/src/pages/home/Home.js b/src/src/pages/home/Home.js index abba0ac..b7c4f33 100644 --- a/src/src/pages/home/Home.js +++ b/src/src/pages/home/Home.js @@ -10,14 +10,14 @@ import { } from "@tabler/icons-react"; import StationCard from "../../components/stationCard/StationCard"; import Services from "../../services/Services"; +import { findNearestStation } from "../../utils/Utilities"; -function Home() { - // Definir colores en una variable para facilitar ajustes globales +const Home = () => { const green = "green"; const white = "white"; const [stations, setStations] = useState([]); - const [nearestStation, setNearestStation] = useState([]); + const [nearestStation, setNearestStation] = useState(null); const [error, setError] = useState(null); const [loading, setLoading] = useState(true); @@ -47,11 +47,15 @@ function Home() { (position) => { const userLat = position.coords.latitude; const userLon = position.coords.longitude; - findNearestStation(userLat, userLon); + const nearest = findNearestStation(userLat, userLon, stations); + setNearestStation(nearest); + setLoading(false); }, (error) => { console.error("Error al obtener la ubicación del usuario:", error); - setError("Error al obtener la ubicación del usuario"); + setError( + "Error al obtener la ubicación del usuario, por favor activa la geolocalización en tu navegador y si ya esta activa, intenta en otro navegador." + ); setLoading(false); } ); @@ -62,45 +66,6 @@ function Home() { } }; - const findNearestStation = (userLat, userLon) => { - let minDistance = Infinity; - let nearest = null; - - stations.forEach((station) => { - const distance = getDistanceFromLatLonInKm( - userLat, - userLon, - station.latitude, - station.longitude - ); - if (distance < minDistance) { - minDistance = distance; - nearest = station; - } - }); - - setNearestStation(nearest); - setLoading(false); - }; - - const getDistanceFromLatLonInKm = (lat1, lon1, lat2, lon2) => { - const R = 6371; // Radio de la Tierra en km - const dLat = deg2rad(lat2 - lat1); - const dLon = deg2rad(lon2 - lon1); - const a = - Math.sin(dLat / 2) * Math.sin(dLat / 2) + - Math.cos(deg2rad(lat1)) * - Math.cos(deg2rad(lat2)) * - Math.sin(dLon / 2) * - Math.sin(dLon / 2); - const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); - const distance = R * c; // Distancia en km - return distance; - }; - - const deg2rad = (deg) => { - return deg * (Math.PI / 180); - }; getUserLocation(); }, [stations]); @@ -127,8 +92,12 @@ function Home() { - - + +
@@ -156,6 +125,6 @@ function Home() {
); -} +}; export default Home; diff --git a/src/src/utils/Utilities.js b/src/src/utils/Utilities.js new file mode 100644 index 0000000..6b6ed84 --- /dev/null +++ b/src/src/utils/Utilities.js @@ -0,0 +1,40 @@ +export const getDistanceFromLatLonInKm = (lat1, lon1, lat2, lon2) => { + const R = 6371; // Radius of the Earth in km + const dLat = deg2rad(lat2 - lat1); + const dLon = deg2rad(lon2 - lon1); + const a = + Math.sin(dLat / 2) * Math.sin(dLat / 2) + + Math.cos(deg2rad(lat1)) * + Math.cos(deg2rad(lat2)) * + Math.sin(dLon / 2) * + Math.sin(dLon / 2); + const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); + return R * c; // Distance in km +}; + +export const deg2rad = (deg) => deg * (Math.PI / 180); + +export const findNearestStation = (userLat, userLon, stations) => { + let minDistance = Infinity; + let nearest = null; + + stations.forEach((station) => { + const distance = getDistanceFromLatLonInKm( + userLat, + userLon, + station.latitude, + station.longitude + ); + if (distance < minDistance) { + minDistance = distance; + nearest = station; + } + }); + + return nearest; +}; + +export const getDayOfWeek = (dateString) => { + const date = new Date(dateString); + return date.toLocaleDateString("es-ES", { weekday: "long" }); +};