From 0958cd67d9b3aaa554b2e2a9f3800d7e8573a6bd Mon Sep 17 00:00:00 2001 From: zojgame Date: Mon, 29 Jul 2024 14:59:35 +0500 Subject: [PATCH 1/6] fix clouds --- client/src/api/urls.ts | 1 + client/src/api/weather.ts | 0 client/src/components/masterplanPage/map/Clouds.tsx | 6 +++--- client/src/index.css | 13 +------------ 4 files changed, 5 insertions(+), 15 deletions(-) create mode 100644 client/src/api/weather.ts diff --git a/client/src/api/urls.ts b/client/src/api/urls.ts index ddb8774..62259d3 100644 --- a/client/src/api/urls.ts +++ b/client/src/api/urls.ts @@ -1,6 +1,7 @@ // const serverApi = "http://192.168.56.1:3000"; const serverApi = "http://194.26.138.94:4002"; // const serverApi = import.meta.env.VITE_SERVER_API; +const weatherApi = ""; const apartmentsApi = `${serverApi}/apartments`; diff --git a/client/src/api/weather.ts b/client/src/api/weather.ts new file mode 100644 index 0000000..e69de29 diff --git a/client/src/components/masterplanPage/map/Clouds.tsx b/client/src/components/masterplanPage/map/Clouds.tsx index d4984e9..6328571 100644 --- a/client/src/components/masterplanPage/map/Clouds.tsx +++ b/client/src/components/masterplanPage/map/Clouds.tsx @@ -11,14 +11,14 @@ function Clouds() { return (
Date: Mon, 29 Jul 2024 15:09:46 +0500 Subject: [PATCH 2/6] fix --- client/src/index.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/index.css b/client/src/index.css index 46404f4..bdb9e8c 100644 --- a/client/src/index.css +++ b/client/src/index.css @@ -50,7 +50,7 @@ body { @layer components { .infinite-animation { - animation: infiniter 5s linear infinite; + animation: infiniter 75s linear infinite; } @keyframes infiniter { From 354d0e7d2db345b44ba7ad5d46e84b9c65b6a216 Mon Sep 17 00:00:00 2001 From: zojgame Date: Mon, 29 Jul 2024 15:44:25 +0500 Subject: [PATCH 3/6] weather get request --- client/src/api/urls.ts | 7 +- client/src/api/weather.ts | 72 +++++++++++++++++++ .../src/components/masterplanPage/map/Map.tsx | 8 +++ 3 files changed, 85 insertions(+), 2 deletions(-) diff --git a/client/src/api/urls.ts b/client/src/api/urls.ts index 62259d3..09939a2 100644 --- a/client/src/api/urls.ts +++ b/client/src/api/urls.ts @@ -1,7 +1,10 @@ // const serverApi = "http://192.168.56.1:3000"; const serverApi = "http://194.26.138.94:4002"; // const serverApi = import.meta.env.VITE_SERVER_API; -const weatherApi = ""; +const city = "Dubai"; +const contry = "UAE"; +const weatherApiKey = "908ad75f36452c11ff4306cd53162218"; +const weatherApi = `https://api.openweathermap.org/data/2.5/forecast?q=${city},${contry}&units=metric&appid=${weatherApiKey}`; const apartmentsApi = `${serverApi}/apartments`; @@ -9,4 +12,4 @@ const currentApartmentApi = `${serverApi}/apartment`; const updateAccessTokenApi = `${serverApi}/updateAccessToken`; -export { apartmentsApi, updateAccessTokenApi, currentApartmentApi }; +export { apartmentsApi, updateAccessTokenApi, currentApartmentApi, weatherApi }; diff --git a/client/src/api/weather.ts b/client/src/api/weather.ts index e69de29..c1b196d 100644 --- a/client/src/api/weather.ts +++ b/client/src/api/weather.ts @@ -0,0 +1,72 @@ +import { weatherApi } from "./urls"; + +/** + * + * + */ + +type WeatherRes = { + cod: string; + message: number; + cnt: number; + list: { + dt: number; + 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; + }; + weather: { + id: number; + main: string; + description: string; + icon: string; + }[]; + clouds: { + all: number; + }; + wind: { + speed: number; + deg: number; + gust: number; + }; + visibility: number; + pop: number; + sys: { + pod: string; + }; + dt_txt: string; + }[]; + city: { + id: number; + name: string; + coord: { + lat: number; + lon: number; + }; + country: string; + population: number; + timezone: number; + sunrise: number; + sunset: number; + }; +}; + +async function getWeather() { + const response = await fetch(weatherApi); + const fetchedData: WeatherRes = await response.json(); + + const listByDay = fetchedData.list.filter((day) => + day.dt_txt.endsWith("15:00:00") + ); + + return listByDay; +} + +export { getWeather }; diff --git a/client/src/components/masterplanPage/map/Map.tsx b/client/src/components/masterplanPage/map/Map.tsx index 65f2f97..785f1b6 100644 --- a/client/src/components/masterplanPage/map/Map.tsx +++ b/client/src/components/masterplanPage/map/Map.tsx @@ -6,6 +6,8 @@ import { markers } from "../../../consts/markers"; import useMarker from "../../../store/useMarker"; import ZoomControlls from "./ZoomControlls"; import { Clouds } from "./Clouds"; +import { getWeather } from "../../../api/weather"; +import { useEffect } from "react"; const Map = () => { const { hoveredMarker } = useMarker(); @@ -18,6 +20,12 @@ const Map = () => { }; }); + useEffect(() => { + getWeather().then((data) => { + console.log(data); + }); + }, []); + return (
Date: Tue, 30 Jul 2024 11:32:29 +0500 Subject: [PATCH 4/6] weather widget --- .../src/components/masterplanPage/map/Map.tsx | 2 + .../masterplanPage/map/WeatherWidget.tsx | 49 +++++++++++++++++++ 2 files changed, 51 insertions(+) create mode 100644 client/src/components/masterplanPage/map/WeatherWidget.tsx diff --git a/client/src/components/masterplanPage/map/Map.tsx b/client/src/components/masterplanPage/map/Map.tsx index 785f1b6..3636a47 100644 --- a/client/src/components/masterplanPage/map/Map.tsx +++ b/client/src/components/masterplanPage/map/Map.tsx @@ -8,6 +8,7 @@ import ZoomControlls from "./ZoomControlls"; import { Clouds } from "./Clouds"; import { getWeather } from "../../../api/weather"; import { useEffect } from "react"; +import WeatherWidget from "./WeatherWidget"; const Map = () => { const { hoveredMarker } = useMarker(); @@ -40,6 +41,7 @@ const Map = () => { animationTime: 500, }} > + { + const [temperature, setTemperature] = useState(0); + + const date = new Date(); + + const day = date.toLocaleDateString("en-US", { + weekday: "short", + }); + const month = date.toLocaleDateString("en-US", { + month: "short", + }); + + const hours = date.getHours() > 12 ? date.getHours() - 12 : date.getHours(); + const minutes = String(date.getMinutes()).padStart(2, "0"); + const dayPart = `${date.getHours() >= 12 ? "PM" : "AM"}`; + const formattedTime = `${hours}:${minutes}`; + + useEffect(() => { + getWeather().then((data) => { + const temp = Math.round(data[0].main.temp); + setTemperature(temp); + }); + + return () => {}; + }, []); + + return ( +
+
+

{day}

+

{formattedTime}

+
+
+

+ {date.getDate()} {month} +

+

{dayPart}

+
+
+

{temperature}°C

+
+
+ ); +}; + +export default WeatherWidget; From 7bb5e0575cae749a60ba7ad4d191e99a2efe0c36 Mon Sep 17 00:00:00 2001 From: zojgame Date: Tue, 30 Jul 2024 11:39:14 +0500 Subject: [PATCH 5/6] weather widget fix --- .../components/masterplanPage/map/WeatherWidget.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/client/src/components/masterplanPage/map/WeatherWidget.tsx b/client/src/components/masterplanPage/map/WeatherWidget.tsx index 7a13a97..212aa0b 100644 --- a/client/src/components/masterplanPage/map/WeatherWidget.tsx +++ b/client/src/components/masterplanPage/map/WeatherWidget.tsx @@ -23,23 +23,21 @@ const WeatherWidget = () => { const temp = Math.round(data[0].main.temp); setTemperature(temp); }); - - return () => {}; }, []); return ( -
-
+
+

{day}

{formattedTime}

-
+

{date.getDate()} {month}

{dayPart}

-
+

{temperature}°C

From cb6a603d018377110f792c9c378076a4301bad47 Mon Sep 17 00:00:00 2001 From: zojgame Date: Tue, 30 Jul 2024 11:40:41 +0500 Subject: [PATCH 6/6] fix --- client/src/components/masterplanPage/map/WeatherWidget.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/client/src/components/masterplanPage/map/WeatherWidget.tsx b/client/src/components/masterplanPage/map/WeatherWidget.tsx index 212aa0b..a74ab84 100644 --- a/client/src/components/masterplanPage/map/WeatherWidget.tsx +++ b/client/src/components/masterplanPage/map/WeatherWidget.tsx @@ -26,18 +26,18 @@ const WeatherWidget = () => { }, []); return ( -
+

{day}

{formattedTime}

-
+

{date.getDate()} {month}

{dayPart}

-
+

{temperature}°C