From 266d1605d48303f7f28d0367ac1bb0a31a0909d8 Mon Sep 17 00:00:00 2001 From: Pablo Ferreiro Date: Thu, 17 Oct 2024 20:14:05 +0200 Subject: [PATCH] conectado nearby --- src/helpers/Api.ts | 4 +++ src/helpers/OpenWeather.ts | 36 +++++++++++++++++++ src/interfaces/OWMResponse.ts | 68 +++++++++++++++++++++++++++++++++++ src/views/Embalse.tsx | 27 +++++++++++--- src/views/Finder.tsx | 13 +++++-- 5 files changed, 141 insertions(+), 7 deletions(-) create mode 100644 src/helpers/OpenWeather.ts create mode 100644 src/interfaces/OWMResponse.ts diff --git a/src/helpers/Api.ts b/src/helpers/Api.ts index 4bfec87..a925ede 100644 --- a/src/helpers/Api.ts +++ b/src/helpers/Api.ts @@ -11,6 +11,10 @@ export default class Api { return Api._makeReq(`/embalses/${id}`); } + static async embalsesNearby(lat: string, lon: string): Promise { + return Api._makeReq(`/embalsesCercanos/${lat}/${lon}`); + } + static async _makeReq(endpoint: string): Promise { let hasMore = true; diff --git a/src/helpers/OpenWeather.ts b/src/helpers/OpenWeather.ts new file mode 100644 index 0000000..4bf91c8 --- /dev/null +++ b/src/helpers/OpenWeather.ts @@ -0,0 +1,36 @@ +import OWMResponse from "../interfaces/OWMResponse"; + +/** + * Wrapper para recibir los datos del clima de OpenWeatherMap + */ +export default class OpenWeather { + static async week(lat: string, lon: string): Promise { + const res = await fetch('https://api.openweathermap.org/data/2.5/forecast?lat=' + lat + '&lon=' + lon + '&appid=' + import.meta.env.VITE_OWM_KEY); + if (!res.ok) { + throw new Error("API Error"); + } + + const json = await res.json() as OWMResponse; + + let rains = 0; + + json.list.forEach((el) => { + if (el.weather[0].id === 500) { + rains++; + } + }); + + let probability = ''; + + if (rains > json.list.length / 2) { + // Bien + probability = 'Sabiendo que ha llovido un total de ' + rains + ' días, podemos predecir que el caudal será alto'; + } else { + // Mal + probability = 'Sabiendo que ha llovido un total de ' + rains + ' días, podemos predecir que el caudal será bajo'; + + } + + return probability; + } +} diff --git a/src/interfaces/OWMResponse.ts b/src/interfaces/OWMResponse.ts new file mode 100644 index 0000000..3ac3cd4 --- /dev/null +++ b/src/interfaces/OWMResponse.ts @@ -0,0 +1,68 @@ +export default interface OWMResponse { + cod: string + message: number + cnt: number + list: Weather[] + city: City +} + +export interface Weather { + dt: number + main: Main + weather: Weather[] + clouds: Clouds + wind: Wind + visibility: number + pop: number + sys: Sys + dt_txt: string +} + +export interface Main { + temp: number + feels_like: number + temp_min: number + temp_max: number + pressure: number + sea_level: number + grnd_level: number + humidity: number + temp_kf: number +} + +export interface Weather { + id: number + main: string + description: string + icon: string +} + +export interface Clouds { + all: number +} + +export interface Wind { + speed: number + deg: number + gust: number +} + +export interface Sys { + pod: string +} + +export interface City { + id: number + name: string + coord: Coord + country: string + population: number + timezone: number + sunrise: number + sunset: number +} + +export interface Coord { + lat: number + lon: number +} diff --git a/src/views/Embalse.tsx b/src/views/Embalse.tsx index a8a25d3..bbec1be 100644 --- a/src/views/Embalse.tsx +++ b/src/views/Embalse.tsx @@ -5,19 +5,22 @@ import Navbar from "../partials/Navbar"; import Loader from "../partials/Loader"; import Api from "../helpers/Api"; import Card from "../partials/Card"; -import { FaSolidLocationDot, FaSolidLocationPin, FaSolidMapLocationDot, FaSolidWater } from "solid-icons/fa"; +import { FaSolidCircleInfo, FaSolidLocationDot, FaSolidMapLocationDot, FaSolidWater } from "solid-icons/fa"; +import OpenWeather from "../helpers/OpenWeather"; interface CustomParams extends Params { id: string; } function Embalse() { - const params = useParams(); const [embalse, setEmbalse] = createSignal(); + const [prediction, setPrediction] = createSignal(''); onMount(() => { - getEmbalse(); + getEmbalse().then(async () => { + setPrediction(await OpenWeather.week(embalse()!.x, embalse()!.y)); + }); }); const getEmbalse = async () => { @@ -26,6 +29,17 @@ function Embalse() { setEmbalse(res[0]); } + const getPercentage = () => { + const perc = Math.round(embalse()!.agua_actual / embalse()!.agua_total * 100); + return ( + 50 && perc < 70, + 'has-text-success': perc >= 70 + }}>{perc}% + ) + } + return ( <> @@ -59,10 +73,15 @@ function Embalse() { <>

Actual: {embalse()!.agua_actual} l/m2

Total: {embalse()!.agua_total} l/m2

-

Porcentaje: {embalse()!.agua_actual / embalse()!.agua_total * 100}%

+

Porcentaje: {getPercentage()}

+
+ }> +

{prediction()}

+ +
diff --git a/src/views/Finder.tsx b/src/views/Finder.tsx index e717687..a868e9d 100644 --- a/src/views/Finder.tsx +++ b/src/views/Finder.tsx @@ -1,9 +1,12 @@ import { createSignal, onCleanup, onMount } from "solid-js"; -import L from 'leaflet'; +import { useNavigate } from "@solidjs/router"; +import L, { Icon } from 'leaflet'; import { FaSolidLocationPin } from "solid-icons/fa"; import Navbar from "../partials/Navbar"; +import Api from "../helpers/Api"; function Finder() { + const navigate = useNavigate(); const [pos, setPos] = createSignal<[number, number]>([0, 0]); const [geo, setGeo] = createSignal(true); @@ -73,7 +76,7 @@ function Finder() { * Escribe los puntos relevantes * (Mi ubicación y los embalses cercanos) */ - const handleLocation = () => { + const handleLocation = async () => { me.setLatLng(pos()); if (first) { map.setView(pos(), 9); @@ -90,7 +93,11 @@ function Finder() { markers = []; } - // TODO: Hacer petición y sacar markers + const res = await Api.embalsesNearby(pos()[0].toString(), pos()[1].toString()); + + res.forEach((c) => { + L.marker([parseFloat(c.x), parseFloat(c.y)]).on("click", () => navigate('/embalses/' + c.id)).addTo(map); + }) } /**