Skip to content

Commit

Permalink
AC-258 Weather card added
Browse files Browse the repository at this point in the history
  • Loading branch information
Minotriz02 authored and Minotriz02 committed Nov 13, 2024
1 parent 2d5e43f commit 16cbc1a
Show file tree
Hide file tree
Showing 5 changed files with 89 additions and 86 deletions.
Binary file added src/src/assets/img/bg-home1.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
66 changes: 30 additions & 36 deletions src/src/components/stationCard/StationCard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) => (
<span className="d-flex">
{icon}
{lastDataStation?.climaticData
? lastDataStation.climaticData
.find((item) => item.measure === measure)
?.value.toFixed(1) ?? "N/A"
: "N/A"}{" "}
{unit}
</span>
);

return (
<Col className="col-12 col-md-6 col-xl-4">
<Card className="position-relative overflow-hidden border-0">
{/* Onda SVG */}
<Card className="position-relative overflow-hidden border-0 bg-dark rounded-3 shadow text-white">
<div className="wave1">
<svg
width="177"
Expand All @@ -48,15 +50,15 @@ function StationCard({ loading, msgError, station }) {
>
<path
d="M385.398 12.4147L0 4.31812C14.6818 32.8181 56.8561 96.2594 104.446 99.3181C141.061 103.276 257.166 119.359 282.031 136.832C311.989 157.883 368.035 187.301 385.398 190V12.4147Z"
fill="#411010"
fill="#364110"
/>
<path
d="M434.517 9.71582L444.503 158.963C357.599 136.832 302.812 121.449 256.932 89.3323C211.051 57.2158 149.787 82.0454 103.097 71.2499C65.7443 62.6135 54.0672 29.6874 52.8977 14.3039L434.517 9.71582Z"
fill="#8D5D33"
fill="#758D33"
/>
<path
d="M398.082 0H32.926C47.6078 28.5 146.458 41.7424 194.048 44.8011C230.663 48.7595 308.102 62.1818 324.943 84.2046C341.784 106.227 380.72 117.131 398.082 119.83V0Z"
fill="#D2A859"
fill="#C0D259"
/>
</svg>
</div>
Expand All @@ -70,9 +72,9 @@ function StationCard({ loading, msgError, station }) {
<p>{msgError}</p>
</div>
) : station ? (
<Card.Body className="position-relative">
<Card.Body className="position-relative text-white">
<div className="d-flex justify-content-between">
<div className="">
<div>
<div className="mb-4">
<h4 className="mb-0">{station.name}</h4>
<span>
Expand All @@ -90,24 +92,16 @@ function StationCard({ loading, msgError, station }) {
</span>
</div>
<div className="d-flex flex-column gap-1">
<span className="d-flex ">
<IconDroplet size={24} className="me-2" />
{lastDataStation?.climaticData
? lastDataStation.climaticData
.find((item) => item.measure === "prec")
?.value.toFixed(1) ?? "N/A"
: "N/A"}{" "}
mm
</span>
<span className="d-flex">
<IconSun size={24} className="me-2" />
{lastDataStation?.climaticData
? lastDataStation.climaticData
.find((item) => item.measure === "sol_rad")
?.value.toFixed(1) ?? "N/A"
: "N/A"}{" "}
M/J
</span>
{renderClimaticData(
"prec",
<IconDroplet size={24} className="me-2" />,
"mm"
)}
{renderClimaticData(
"sol_rad",
<IconSun size={24} className="me-2" />,
"M/J"
)}
</div>
</div>
<div className="d-flex flex-column justify-content-between align-items-end">
Expand All @@ -122,7 +116,7 @@ function StationCard({ loading, msgError, station }) {
<div>
<span>
<IconMapPin size={24} className="me-2" />
{station.municipality}, {station.state}
{station.municipality}, {station.state}
</span>
</div>
</div>
Expand Down
6 changes: 3 additions & 3 deletions src/src/pages/home/Home.css
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
63 changes: 16 additions & 47 deletions src/src/pages/home/Home.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down Expand Up @@ -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);
}
);
Expand All @@ -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]);

Expand All @@ -127,8 +92,12 @@ function Home() {
</Link>
</Col>
</Row>
<Row className="mt-4 justify-content-around gy-4">
<StationCard loading={loading} msgError={error} station={nearestStation} />
<Row className="mt-4 gy-4">
<StationCard
loading={loading}
msgError={error}
station={nearestStation}
/>
</Row>
</Container>
</div>
Expand Down Expand Up @@ -156,6 +125,6 @@ function Home() {
</Row>
</div>
);
}
};

export default Home;
40 changes: 40 additions & 0 deletions src/src/utils/Utilities.js
View file
Original file line number Diff line number Diff line change
@@ -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" });
};

0 comments on commit 16cbc1a

Please sign in to comment.