fix: use IMGW Hybrid for current weather
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
|
||||
## Projekt
|
||||
|
||||
`wtr.` to mobilna PWA pogodowa dla Polski. Pokazuje bieżące pomiary synoptyczne, dane hydrologiczne i ostrzeżenia z publicznego API IMGW oraz oddzielnie oznaczoną prognozę modelową Open-Meteo. Open-Meteo Geocoding służy także do wyszukiwania miejscowości, a Nominatim / OpenStreetMap do opcjonalnego reverse geocodingu po zgodzie GPS użytkownika.
|
||||
`wtr.` to mobilna PWA pogodowa dla Polski. Pokazuje bieżącą analizę IMGW Hybrid, pomiary synoptyczne, dane hydrologiczne i ostrzeżenia z publicznych API IMGW oraz oddzielnie oznaczoną prognozę modelową Open-Meteo. Open-Meteo Geocoding służy także do wyszukiwania miejscowości, a Nominatim / OpenStreetMap do opcjonalnego reverse geocodingu po zgodzie GPS użytkownika.
|
||||
|
||||
Stack: Next.js App Router, React, TypeScript, Tailwind CSS, TanStack Query, Zustand, Framer Motion, Recharts i Lucide React. PWA korzysta z manifestu oraz własnego service workera.
|
||||
|
||||
@@ -37,6 +37,7 @@ Repozytorium nie ma obecnie skryptu testów, osobnego skryptu type-check ani for
|
||||
- Dodawaj `"use client"` tylko tam, gdzie komponent lub moduł korzysta z hooków, stanu przeglądarki albo interakcji.
|
||||
- Dane zewnętrzne pobieraj przez route handlery Next.js. Nie omijaj allowlisty w `app/api/imgw/[...path]/route.ts`.
|
||||
- Traktuj IMGW jako źródło bieżących pomiarów, hydro i ostrzeżeń. Prognozę Open-Meteo pokazuj oddzielnie jako prognozę modelową. Nie generuj fikcyjnych danych ani nie przedstawiaj prognozy jako pomiaru IMGW.
|
||||
- Dashboard hero korzysta z publicznego endpointu Hybrid oficjalnego portalu IMGW przez `app/api/imgw-current/route.ts`, z fallbackiem do godzinowego `synop`. Hybrid ma krótki cache i dostarcza m.in. opad 10-minutowy; nie przedstawiaj go jako akumulowanej sumy opadu stacji.
|
||||
- Route handler prognozy pobiera godzinowe dane Open-Meteo dla pełnych 7 dni. Dashboard pokazuje najbliższe 24 przyszłe godziny oraz wykresy pełnego bieżącego dnia, a widok szczegółowy dnia korzysta z pełnego zestawu godzin dla wybranej daty.
|
||||
- `synop.suma_opadu` jest akumulowaną sumą opadu. Nie używaj jej jako sygnału, że pada w tej chwili, ani do sterowania animacją deszczu.
|
||||
- Ostrzeżenia hydro zawierają jawne województwa, a ostrzeżenia meteo kody powiatów TERYT. Normalizuj oba warianty przez `lib/provinces.ts`; nie filtruj ostrzeżeń wyłącznie po opisach tekstowych.
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
**Pogoda z danych IMGW. Prosto. Pięknie. Aktualnie.**
|
||||
|
||||
`wtr.` to nowoczesna pogodowa PWA dla Polski oparta o publiczne dane IMGW i jawnie oznaczoną prognozę modelową Open-Meteo. Aplikacja prezentuje bieżące odczyty synoptyczne, prognozę godzinową i 7-dniową, stacje hydrologiczne oraz ostrzeżenia w spokojnym, mobilnym interfejsie z gradientami, kartami glassmorphism i subtelnymi animacjami. Dashboard pokazuje rozszerzony desktopowy podgląd godzin z podsumowaniem najbliższej doby, a także wykresy temperatury i opadu dla bieżącego dnia. Każdy dzień prognozy można także otworzyć w animowanym widoku szczegółowym z przebiegiem godzinowym oraz wykresami.
|
||||
`wtr.` to nowoczesna pogodowa PWA dla Polski oparta o publiczne dane IMGW i jawnie oznaczoną prognozę modelową Open-Meteo. Aplikacja prezentuje bieżącą analizę pogody IMGW Hybrid, odczyty synoptyczne, prognozę godzinową i 7-dniową, stacje hydrologiczne oraz ostrzeżenia w spokojnym, mobilnym interfejsie z gradientami, kartami glassmorphism i subtelnymi animacjami. Dashboard pokazuje rozszerzony desktopowy podgląd godzin z podsumowaniem najbliższej doby, a także wykresy temperatury i opadu dla bieżącego dnia. Każdy dzień prognozy można także otworzyć w animowanym widoku szczegółowym z przebiegiem godzinowym oraz wykresami.
|
||||
|
||||
Interfejs jest dostępny po polsku i angielsku. Wybrany język jest zapisywany lokalnie w przeglądarce. Oryginalne treści ostrzeżeń oraz nazwy stacji pochodzą bezpośrednio z API IMGW i nie są automatycznie tłumaczone.
|
||||
|
||||
@@ -46,6 +46,7 @@ npm run start
|
||||
|
||||
Bieżące pomiary i komunikaty pochodzą z rzeczywistych publicznych danych IMGW:
|
||||
|
||||
- bieżąca analiza IMGW Hybrid używana przez oficjalny portal: `https://meteo.imgw.pl/api/v1/forecast/fcapi`
|
||||
- dane synoptyczne: `https://danepubliczne.imgw.pl/api/data/synop`
|
||||
- pojedyncza stacja synoptyczna: `https://danepubliczne.imgw.pl/api/data/synop/id/{id}`
|
||||
- dane hydrologiczne: `https://danepubliczne.imgw.pl/api/data/hydro/`
|
||||
@@ -60,11 +61,13 @@ Do wyszukiwania nazw miejscowości używany jest endpoint `https://geocoding-api
|
||||
|
||||
Opcjonalny reverse geocoding dla GPS korzysta z publicznego endpointu Nominatim: `https://nominatim.openstreetmap.org/reverse`. Wywołanie następuje wyłącznie po zgodzie użytkownika. Interfejs pokazuje atrybucję OpenStreetMap. Przed wdrożeniem o większym ruchu należy sprawdzić aktualną politykę użycia publicznej instancji Nominatim lub zastąpić ją własną usługą.
|
||||
|
||||
Przeglądarka pobiera dane przez route handlery Next.js. Proxy IMGW w `app/api/imgw/[...path]/route.ts` pozwala ujednolicić cache, błędy API i bezpiecznie obsłużyć hydro bez mixed content. Prognozę obsługuje `app/api/forecast/route.ts`, a reverse geocoding GPS `app/api/locations/reverse/route.ts`.
|
||||
Przeglądarka pobiera dane przez route handlery Next.js. Proxy IMGW w `app/api/imgw/[...path]/route.ts` pozwala ujednolicić cache, błędy API i bezpiecznie obsłużyć hydro bez mixed content. Bieżącą analizę pogody obsługuje `app/api/imgw-current/route.ts`, prognozę `app/api/forecast/route.ts`, a reverse geocoding GPS `app/api/locations/reverse/route.ts`.
|
||||
|
||||
## Ograniczenia API
|
||||
|
||||
Publiczny endpoint synoptyczny IMGW udostępnia najnowszy pomiar, a nie pełną prognozę godzinową lub wielodniową i nie historię odczytów. Dlatego prognoza pochodzi z Open-Meteo i jest wyraźnie oddzielona od pomiarów IMGW. `wtr.` nie generuje fikcyjnych prognoz. Widok stacji prezentuje aktualne parametry i jawnie opisany snapshot pomiarowy. Brakujące wartości są oznaczane jako `Brak danych`.
|
||||
Dashboard korzysta z publicznego endpointu IMGW Hybrid używanego przez oficjalny portal `meteo.imgw.pl`. Dzięki temu bieżące warunki są aktualizowane częściej niż godzinowe dane synoptyczne i mogą pokazać rzeczywisty opad z ostatnich 10 minut. Jeśli usługa Hybrid nie odpowiada, hero zachowuje pomiar `synop` jako fallback. Endpoint Hybrid jest częścią publicznego frontendu IMGW, ale nie jest opisany w stabilnej dokumentacji `danepubliczne.imgw.pl`, więc integrację należy monitorować przy zmianach portalu.
|
||||
|
||||
Publiczny endpoint synoptyczny IMGW udostępnia najnowszy pomiar, a nie pełną prognozę godzinową lub wielodniową i nie historię odczytów. Dlatego prognoza pochodzi z Open-Meteo i jest wyraźnie oddzielona od pomiarów IMGW oraz bieżącej analizy Hybrid. `wtr.` nie generuje fikcyjnych prognoz. Widok stacji prezentuje aktualne parametry i jawnie opisany snapshot pomiarowy. Brakujące wartości są oznaczane jako `Brak danych`.
|
||||
|
||||
Pole `suma_opadu` z endpointu synoptycznego jest prezentowane jako akumulowana suma opadu. Nie służy do wnioskowania, że w danej chwili pada, ani do uruchamiania animacji deszczu.
|
||||
|
||||
|
||||
37
app/api/imgw-current/route.ts
Normal file
37
app/api/imgw-current/route.ts
Normal file
@@ -0,0 +1,37 @@
|
||||
import { NextResponse } from "next/server";
|
||||
|
||||
const IMGW_HYBRID_URL = "https://meteo.imgw.pl/api/v1/forecast/fcapi";
|
||||
// This browser token is published by the official meteo.imgw.pl frontend.
|
||||
const IMGW_HYBRID_TOKEN = "p4DXKjsYadfBV21TYrDk";
|
||||
|
||||
function parseCoordinate(value: string | null, min: number, max: number) {
|
||||
if (!value?.trim()) return null;
|
||||
const coordinate = Number(value);
|
||||
return Number.isFinite(coordinate) && coordinate >= min && coordinate <= max ? coordinate : null;
|
||||
}
|
||||
|
||||
export async function GET(request: Request) {
|
||||
const { searchParams } = new URL(request.url);
|
||||
const latitude = parseCoordinate(searchParams.get("latitude"), -90, 90);
|
||||
const longitude = parseCoordinate(searchParams.get("longitude"), -180, 180);
|
||||
if (latitude === null || longitude === null) {
|
||||
return NextResponse.json({ error: "Invalid coordinates." }, { status: 400 });
|
||||
}
|
||||
|
||||
const params = new URLSearchParams({
|
||||
token: IMGW_HYBRID_TOKEN,
|
||||
lat: String(latitude),
|
||||
lon: String(longitude),
|
||||
m: "hybrid",
|
||||
});
|
||||
|
||||
try {
|
||||
const response = await fetch(`${IMGW_HYBRID_URL}?${params}`, { next: { revalidate: 120 } });
|
||||
if (!response.ok) return NextResponse.json({ error: "IMGW Hybrid service is unavailable." }, { status: 502 });
|
||||
return NextResponse.json(await response.json(), {
|
||||
headers: { "Cache-Control": "public, s-maxage=120, stale-while-revalidate=300" },
|
||||
});
|
||||
} catch {
|
||||
return NextResponse.json({ error: "IMGW Hybrid service is unavailable." }, { status: 502 });
|
||||
}
|
||||
}
|
||||
@@ -11,6 +11,7 @@ import { PageLoadingSkeleton } from "@/components/states/loading-skeleton";
|
||||
import { ErrorState } from "@/components/states/error-state";
|
||||
import { useI18n } from "@/lib/i18n";
|
||||
import { useMeteoStationPositions } from "@/hooks/use-meteo-stations";
|
||||
import { useCurrentWeather } from "@/hooks/use-current-weather";
|
||||
import { ForecastPanel } from "@/components/forecast/forecast-panel";
|
||||
import { locateSynopStations } from "@/lib/location-utils";
|
||||
|
||||
@@ -20,23 +21,26 @@ export function DashboardPage() {
|
||||
const { data: positions = [] } = useMeteoStationPositions();
|
||||
const selectedStationId = useWeatherStore((state) => state.selectedStationId);
|
||||
const selectedLocation = useWeatherStore((state) => state.selectedLocation);
|
||||
if (isPending) return <PageLoadingSkeleton />;
|
||||
if (isError || !stations?.length) return <ErrorState onRetry={() => refetch()} description={t("dashboard.error")} />;
|
||||
const selectedStation = stations.find((station) => station.id === selectedStationId)
|
||||
?? stations.find((station) => station.name === DEFAULT_STATION_NAME)
|
||||
?? stations[0];
|
||||
const activeLocation = selectedLocation?.stationId === selectedStation.id ? selectedLocation : null;
|
||||
const stationPosition = locateSynopStations(stations, positions).find((station) => station.id === selectedStation.id);
|
||||
const selectedStation = stations?.find((station) => station.id === selectedStationId)
|
||||
?? stations?.find((station) => station.name === DEFAULT_STATION_NAME)
|
||||
?? stations?.[0];
|
||||
const activeLocation = selectedLocation?.stationId === selectedStation?.id ? selectedLocation : null;
|
||||
const stationPosition = selectedStation
|
||||
? locateSynopStations(stations ?? [], positions).find((station) => station.id === selectedStation.id)
|
||||
: null;
|
||||
const hasActiveLocationCoordinates = Number.isFinite(activeLocation?.latitude) && Number.isFinite(activeLocation?.longitude);
|
||||
const forecastLatitude = hasActiveLocationCoordinates ? activeLocation?.latitude : stationPosition?.latitude;
|
||||
const forecastLongitude = hasActiveLocationCoordinates ? activeLocation?.longitude : stationPosition?.longitude;
|
||||
const forecastLocationName = hasActiveLocationCoordinates ? activeLocation?.name ?? selectedStation.name : selectedStation.name;
|
||||
const forecastLocationName = hasActiveLocationCoordinates ? activeLocation?.name ?? selectedStation?.name : selectedStation?.name;
|
||||
const { data: currentWeather } = useCurrentWeather(forecastLatitude, forecastLongitude);
|
||||
if (isPending) return <PageLoadingSkeleton />;
|
||||
if (isError || !stations?.length || !selectedStation) return <ErrorState onRetry={() => refetch()} description={t("dashboard.error")} />;
|
||||
|
||||
return (
|
||||
<div className="space-y-10">
|
||||
<LocationSearch stations={stations} positions={positions} />
|
||||
<WeatherHero station={selectedStation} locationName={activeLocation?.name} distanceKm={activeLocation?.distanceKm} />
|
||||
<ForecastPanel latitude={forecastLatitude} longitude={forecastLongitude} locationName={forecastLocationName} />
|
||||
<WeatherHero station={selectedStation} currentWeather={currentWeather} locationName={activeLocation?.name} distanceKm={activeLocation?.distanceKm} />
|
||||
<ForecastPanel latitude={forecastLatitude} longitude={forecastLongitude} locationName={forecastLocationName ?? selectedStation.name} />
|
||||
<FavoritesSection stations={stations} />
|
||||
<FeaturedStationsSection stations={stations} />
|
||||
</div>
|
||||
|
||||
@@ -15,9 +15,16 @@ const stars = Array.from({ length: 16 }, (_, index) => ({
|
||||
delay: (index % 6) * 0.35,
|
||||
}));
|
||||
|
||||
export function WeatherEffects({ station, mood }: { station: SynopStation; mood: WeatherMood }) {
|
||||
const rainDrops = Array.from({ length: 22 }, (_, index) => ({
|
||||
left: `${(index * 43 + 7) % 101}%`,
|
||||
delay: (index % 9) * 0.18,
|
||||
duration: 0.8 + (index % 4) * 0.14,
|
||||
}));
|
||||
|
||||
export function WeatherEffects({ station, mood, precipitation10m, thunderstorm = false }: { station: SynopStation; mood: WeatherMood; precipitation10m?: number | null; thunderstorm?: boolean }) {
|
||||
const reduceMotion = useReducedMotion();
|
||||
const isWindy = (station.windSpeed ?? 0) >= 8;
|
||||
const isRaining = (precipitation10m ?? 0) > 0;
|
||||
|
||||
return (
|
||||
<div aria-hidden="true" className="pointer-events-none absolute inset-0 z-[1] overflow-hidden">
|
||||
@@ -63,6 +70,23 @@ export function WeatherEffects({ station, mood }: { station: SynopStation; mood:
|
||||
style={{ top: line.top, width: line.width }}
|
||||
/>
|
||||
))}
|
||||
{isRaining && rainDrops.map((drop, index) => (
|
||||
<motion.span
|
||||
key={`rain-${index}`}
|
||||
initial={{ y: "-12vh", opacity: 0 }}
|
||||
animate={reduceMotion ? { opacity: 0.36 } : { y: ["-12vh", "115vh"], opacity: [0, 0.55, 0] }}
|
||||
transition={{ duration: drop.duration, delay: drop.delay, repeat: Infinity, ease: "linear" }}
|
||||
className="absolute -top-8 h-14 w-px rotate-[8deg] rounded-full bg-gradient-to-b from-transparent via-white/55 to-transparent blur-[0.35px]"
|
||||
style={{ left: drop.left }}
|
||||
/>
|
||||
))}
|
||||
{thunderstorm && (
|
||||
<motion.div
|
||||
animate={reduceMotion ? { opacity: 0.12 } : { opacity: [0, 0, 0.34, 0, 0.18, 0] }}
|
||||
transition={{ duration: 6, repeat: Infinity, repeatDelay: 2.5 }}
|
||||
className="absolute inset-0 bg-white"
|
||||
/>
|
||||
)}
|
||||
{mood === "cold" && (
|
||||
<div className="absolute inset-x-0 bottom-0 h-28 bg-gradient-to-t from-cyan-100/20 to-transparent" />
|
||||
)}
|
||||
|
||||
@@ -15,19 +15,30 @@ import {
|
||||
moodGradient,
|
||||
} from "@/lib/weather-utils";
|
||||
import type { SynopStation } from "@/types/imgw";
|
||||
import type { ImgwCurrentWeather } from "@/types/imgw-current";
|
||||
import { WeatherIcon } from "@/components/weather/weather-icon";
|
||||
import { WeatherEffects } from "@/components/weather/weather-effects";
|
||||
import { useI18n } from "@/lib/i18n";
|
||||
|
||||
export function WeatherHero({ station, locationName, distanceKm }: { station: SynopStation; locationName?: string; distanceKm?: number }) {
|
||||
export function WeatherHero({ station, currentWeather, locationName, distanceKm }: { station: SynopStation; currentWeather?: ImgwCurrentWeather | null; locationName?: string; distanceKm?: number }) {
|
||||
const { language, t } = useI18n();
|
||||
const mood = getWeatherMoodFromData(station);
|
||||
const feelsLike = calculateFeelsLike(station.temperature, station.humidity, station.windSpeed);
|
||||
const displayedStation = currentWeather ? {
|
||||
...station,
|
||||
measuredAt: currentWeather.measuredAt,
|
||||
temperature: currentWeather.temperature,
|
||||
windSpeed: currentWeather.windSpeed,
|
||||
windDirection: currentWeather.windDirection,
|
||||
humidity: currentWeather.humidity,
|
||||
pressure: currentWeather.pressure,
|
||||
rainfall: currentWeather.precipitation10m,
|
||||
} : station;
|
||||
const mood = getWeatherMoodFromData(displayedStation);
|
||||
const feelsLike = currentWeather?.feelsLike ?? calculateFeelsLike(displayedStation.temperature, displayedStation.humidity, displayedStation.windSpeed);
|
||||
const metrics = [
|
||||
{ icon: Droplets, label: t("weather.humidity"), value: formatHumidity(station.humidity, language) },
|
||||
{ icon: Wind, label: t("weather.wind"), value: formatWind(station.windSpeed, null, language) },
|
||||
{ icon: Umbrella, label: t("weather.rainfallTotal"), value: formatRainfall(station.rainfall, language) },
|
||||
{ icon: Gauge, label: t("weather.pressure"), value: formatPressure(station.pressure, language) },
|
||||
{ icon: Droplets, label: t("weather.humidity"), value: formatHumidity(displayedStation.humidity, language) },
|
||||
{ icon: Wind, label: t("weather.wind"), value: formatWind(displayedStation.windSpeed, null, language) },
|
||||
{ icon: Umbrella, label: currentWeather ? t("weather.rainfall10m") : t("weather.rainfallTotal"), value: formatRainfall(displayedStation.rainfall, language) },
|
||||
{ icon: Gauge, label: t("weather.pressure"), value: formatPressure(displayedStation.pressure, language) },
|
||||
];
|
||||
|
||||
return (
|
||||
@@ -37,7 +48,7 @@ export function WeatherHero({ station, locationName, distanceKm }: { station: Sy
|
||||
transition={{ duration: 0.55, ease: "easeOut" }}
|
||||
className={`relative isolate overflow-hidden rounded-[2rem] bg-gradient-to-br ${moodGradient(mood)} px-5 py-6 text-white shadow-[0_24px_75px_rgba(15,23,42,0.24)] sm:px-8 sm:py-8 lg:px-10`}
|
||||
>
|
||||
<WeatherEffects station={station} mood={mood} />
|
||||
<WeatherEffects station={displayedStation} mood={mood} precipitation10m={currentWeather?.precipitation10m} thunderstorm={currentWeather?.condition === "thunderstorm"} />
|
||||
<div className="absolute -right-20 -top-20 size-72 rounded-full bg-white/15 blur-3xl" />
|
||||
<div className="absolute -bottom-24 -left-16 size-72 rounded-full bg-cyan-200/15 blur-3xl" />
|
||||
<div className="relative z-10">
|
||||
@@ -48,12 +59,12 @@ export function WeatherHero({ station, locationName, distanceKm }: { station: Sy
|
||||
<div className="mt-8 flex items-end justify-between gap-3 sm:mt-10">
|
||||
<div>
|
||||
<div className="text-[5.8rem] font-medium leading-[0.85] tracking-[-0.11em] drop-shadow-[0_10px_24px_rgba(15,23,42,0.16)] sm:text-[8rem]">
|
||||
{formatTemperature(station.temperature, language)}
|
||||
{formatTemperature(displayedStation.temperature, language)}
|
||||
</div>
|
||||
<p className="mt-5 text-xl font-medium tracking-tight sm:text-2xl">{getWeatherDescription(station, language)}</p>
|
||||
<p className="mt-1 text-sm text-white/75">{t("weather.feelsLike")} {formatTemperature(feelsLike, language)} · {t("weather.measurement")} {formatDateTime(station.measuredAt, language)}</p>
|
||||
<p className="mt-5 text-xl font-medium tracking-tight sm:text-2xl">{getWeatherDescription(displayedStation, language, currentWeather?.condition)}</p>
|
||||
<p className="mt-1 text-sm text-white/75">{t("weather.feelsLike")} {formatTemperature(feelsLike, language)} · {t("weather.measurement")} {formatDateTime(displayedStation.measuredAt, language)}{currentWeather ? ` · ${t("weather.hybridAnalysis")}` : ""}</p>
|
||||
</div>
|
||||
<WeatherIcon mood={mood} className="mb-4 size-20 text-white/80 sm:size-28" />
|
||||
<WeatherIcon mood={mood} condition={currentWeather?.condition} className="mb-4 size-20 text-white/80 sm:size-28" />
|
||||
</div>
|
||||
<div className="mt-8 grid grid-cols-2 gap-2.5 sm:mt-10 lg:grid-cols-4">
|
||||
{metrics.map(({ icon: Icon, label, value }) => (
|
||||
@@ -63,10 +74,10 @@ export function WeatherHero({ station, locationName, distanceKm }: { station: Sy
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{station.windDirection !== null && (
|
||||
{displayedStation.windDirection !== null && (
|
||||
<p className="mt-4 flex items-center gap-1.5 text-xs text-white/70">
|
||||
<Navigation className="size-3.5" style={{ transform: `rotate(${station.windDirection}deg)` }} />
|
||||
{t("weather.windDirection")}: {station.windDirection}°
|
||||
<Navigation className="size-3.5" style={{ transform: `rotate(${displayedStation.windDirection}deg)` }} />
|
||||
{t("weather.windDirection")}: {displayedStation.windDirection}°
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
import { Cloud, CloudSun, MoonStar, Snowflake, ThermometerSun, Wind } from "lucide-react";
|
||||
import { Cloud, CloudLightning, CloudRain, CloudSun, MoonStar, Snowflake, ThermometerSun, Wind } from "lucide-react";
|
||||
import type { WeatherMood } from "@/types/imgw";
|
||||
import type { CurrentWeatherCondition } from "@/types/imgw-current";
|
||||
|
||||
export function WeatherIcon({ mood, className = "" }: { mood: WeatherMood; className?: string }) {
|
||||
const Icon = {
|
||||
export function WeatherIcon({ mood, condition, className = "" }: { mood: WeatherMood; condition?: CurrentWeatherCondition; className?: string }) {
|
||||
const Icon = condition === "thunderstorm" ? CloudLightning : condition === "rain" ? CloudRain : condition === "snow" ? Snowflake : {
|
||||
warm: ThermometerSun,
|
||||
cloudy: Cloud,
|
||||
wind: Wind,
|
||||
|
||||
18
hooks/use-current-weather.ts
Normal file
18
hooks/use-current-weather.ts
Normal file
@@ -0,0 +1,18 @@
|
||||
"use client";
|
||||
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { fetchImgwCurrentWeather } from "@/lib/imgw-current-api";
|
||||
import { QUERY_GC_TIME } from "@/lib/constants";
|
||||
|
||||
const CURRENT_WEATHER_STALE_TIME = 2 * 60 * 1000;
|
||||
|
||||
export function useCurrentWeather(latitude?: number, longitude?: number) {
|
||||
return useQuery({
|
||||
queryKey: ["imgw-current-weather", latitude, longitude],
|
||||
queryFn: ({ signal }) => fetchImgwCurrentWeather(latitude as number, longitude as number, signal),
|
||||
staleTime: CURRENT_WEATHER_STALE_TIME,
|
||||
gcTime: QUERY_GC_TIME,
|
||||
retry: 1,
|
||||
enabled: Number.isFinite(latitude) && Number.isFinite(longitude),
|
||||
});
|
||||
}
|
||||
10
lib/i18n.tsx
10
lib/i18n.tsx
@@ -61,6 +61,7 @@ const translations = {
|
||||
"weather.humidity": "Wilgotność",
|
||||
"weather.wind": "Wiatr",
|
||||
"weather.rainfall": "Suma opadu",
|
||||
"weather.rainfall10m": "Opad 10 min",
|
||||
"weather.pressure": "Ciśnienie",
|
||||
"weather.feelsLike": "Odczuwalna",
|
||||
"weather.measurement": "pomiar",
|
||||
@@ -68,6 +69,10 @@ const translations = {
|
||||
"weather.calm": "Spokojne warunki",
|
||||
"weather.humid": "Wilgotno",
|
||||
"weather.strongWind": "Silny wiatr",
|
||||
"weather.currentRain": "Opady deszczu",
|
||||
"weather.currentSnow": "Opady śniegu",
|
||||
"weather.thunderstorm": "Burza",
|
||||
"weather.hybridAnalysis": "analiza IMGW Hybrid",
|
||||
"weather.airTemperature": "Temperatura",
|
||||
"weather.windSpeed": "Prędkość wiatru",
|
||||
"weather.rainfallTotal": "Suma opadu",
|
||||
@@ -228,6 +233,7 @@ const translations = {
|
||||
"weather.humidity": "Humidity",
|
||||
"weather.wind": "Wind",
|
||||
"weather.rainfall": "Rainfall total",
|
||||
"weather.rainfall10m": "Rainfall 10 min",
|
||||
"weather.pressure": "Pressure",
|
||||
"weather.feelsLike": "Feels like",
|
||||
"weather.measurement": "measurement",
|
||||
@@ -235,6 +241,10 @@ const translations = {
|
||||
"weather.calm": "Calm conditions",
|
||||
"weather.humid": "Humid",
|
||||
"weather.strongWind": "Strong wind",
|
||||
"weather.currentRain": "Rain",
|
||||
"weather.currentSnow": "Snow",
|
||||
"weather.thunderstorm": "Thunderstorm",
|
||||
"weather.hybridAnalysis": "IMGW Hybrid analysis",
|
||||
"weather.airTemperature": "Temperature",
|
||||
"weather.windSpeed": "Wind speed",
|
||||
"weather.rainfallTotal": "Rainfall total",
|
||||
|
||||
77
lib/imgw-current-api.ts
Normal file
77
lib/imgw-current-api.ts
Normal file
@@ -0,0 +1,77 @@
|
||||
import { toNumber } from "@/lib/weather-utils";
|
||||
import type { ImgwCurrentWeather, RawImgwHybridWeatherResponse, RawImgwHybridWeatherRow } from "@/types/imgw-current";
|
||||
|
||||
function toCelsius(value: unknown) {
|
||||
const temperature = toNumber(value);
|
||||
if (temperature === null) return null;
|
||||
return temperature > 150 ? temperature - 273.15 : temperature;
|
||||
}
|
||||
|
||||
function toHectopascals(value: unknown) {
|
||||
const pressure = toNumber(value);
|
||||
if (pressure === null) return null;
|
||||
return pressure > 2_000 ? pressure / 100 : pressure;
|
||||
}
|
||||
|
||||
function normalizeDate(value: unknown) {
|
||||
if (typeof value !== "string") return null;
|
||||
const date = new Date(value);
|
||||
return Number.isNaN(date.getTime()) ? null : date.toISOString();
|
||||
}
|
||||
|
||||
function getWeatherCode(iconCode: unknown) {
|
||||
if (typeof iconCode !== "string") return null;
|
||||
const match = iconCode.match(/z(\d{2})/i);
|
||||
return match ? Number(match[1]) : null;
|
||||
}
|
||||
|
||||
function getCondition(weatherCode: number | null, rainfall10m: number | null, snowfall10m: number | null) {
|
||||
if (weatherCode !== null && weatherCode >= 95) return "thunderstorm" as const;
|
||||
if ((snowfall10m ?? 0) > 0) return "snow" as const;
|
||||
if ((rainfall10m ?? 0) > 0) return "rain" as const;
|
||||
return null;
|
||||
}
|
||||
|
||||
export function normalizeImgwCurrentWeather(payload: RawImgwHybridWeatherResponse): ImgwCurrentWeather | null {
|
||||
if (!payload.data?.Valid || !Array.isArray(payload.data.Data)) return null;
|
||||
|
||||
const row = payload.data.Data
|
||||
.filter((candidate): candidate is RawImgwHybridWeatherRow => {
|
||||
if (!candidate || typeof candidate !== "object") return false;
|
||||
return candidate.Type === "Type_Ten_Minutes"
|
||||
&& typeof candidate.MODEL === "string"
|
||||
&& candidate.MODEL.includes("AROME")
|
||||
&& normalizeDate(candidate.Date) !== null;
|
||||
})
|
||||
.sort((left, right) => String(right.Date).localeCompare(String(left.Date)))[0];
|
||||
if (!row) return null;
|
||||
|
||||
const measuredAt = normalizeDate(row.Date);
|
||||
if (!measuredAt) return null;
|
||||
const rainfall10m = toNumber(row.Rain10m);
|
||||
const snowfall10m = toNumber(row.Snow10m);
|
||||
const weatherCode = getWeatherCode(row.Icon10);
|
||||
|
||||
return {
|
||||
measuredAt,
|
||||
temperature: toCelsius(row.Temperature),
|
||||
feelsLike: toCelsius(row.Chill),
|
||||
windSpeed: toNumber(row.Wind_Speed),
|
||||
windDirection: toNumber(row.Wind_Dir),
|
||||
humidity: toNumber(row.Humidity),
|
||||
pressure: toHectopascals(row.PressureMSL),
|
||||
precipitation10m: toNumber(row.Precipitation10m),
|
||||
rainfall10m,
|
||||
snowfall10m,
|
||||
cloudCover: toNumber(row.Cloud),
|
||||
weatherCode,
|
||||
condition: getCondition(weatherCode, rainfall10m, snowfall10m),
|
||||
};
|
||||
}
|
||||
|
||||
export async function fetchImgwCurrentWeather(latitude: number, longitude: number, signal?: AbortSignal) {
|
||||
const params = new URLSearchParams({ latitude: String(latitude), longitude: String(longitude) });
|
||||
const response = await fetch(`/api/imgw-current?${params}`, { signal });
|
||||
if (!response.ok) throw new Error("Nie udało się pobrać bieżącej analizy IMGW Hybrid.");
|
||||
return normalizeImgwCurrentWeather(await response.json() as RawImgwHybridWeatherResponse);
|
||||
}
|
||||
@@ -10,6 +10,7 @@ import type {
|
||||
} from "@/types/imgw";
|
||||
import { translate, type Language } from "@/lib/i18n";
|
||||
import { getProvinceFromTeryt, normalizeProvinceName } from "@/lib/provinces";
|
||||
import type { CurrentWeatherCondition } from "@/types/imgw-current";
|
||||
|
||||
const locales: Record<Language, string> = { pl: "pl-PL", en: "en-GB" };
|
||||
|
||||
@@ -174,7 +175,10 @@ export function getWeatherMoodFromData(station: SynopStation, date = new Date())
|
||||
return "mild";
|
||||
}
|
||||
|
||||
export function getWeatherDescription(station: SynopStation, language: Language = "pl") {
|
||||
export function getWeatherDescription(station: SynopStation, language: Language = "pl", condition?: CurrentWeatherCondition) {
|
||||
if (condition === "thunderstorm") return translate(language, "weather.thunderstorm");
|
||||
if (condition === "snow") return translate(language, "weather.currentSnow");
|
||||
if (condition === "rain") return translate(language, "weather.currentRain");
|
||||
if ((station.windSpeed ?? 0) >= 8) return translate(language, "weather.strongWind");
|
||||
if ((station.humidity ?? 0) >= 90) return translate(language, "weather.humid");
|
||||
return translate(language, "weather.calm");
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
const CACHE_NAME = "wtr-shell-v1";
|
||||
const CACHE_NAME = "wtr-shell-v2";
|
||||
const SHELL = ["/", "/offline", "/manifest.json", "/icons/icon.svg", "/icons/maskable.svg", "/icons/icon-192.png", "/icons/icon-512.png", "/icons/maskable-512.png"];
|
||||
|
||||
self.addEventListener("install", (event) => {
|
||||
@@ -16,7 +16,7 @@ self.addEventListener("activate", (event) => {
|
||||
self.addEventListener("fetch", (event) => {
|
||||
if (event.request.method !== "GET") return;
|
||||
const url = new URL(event.request.url);
|
||||
if (url.pathname.startsWith("/api/imgw/")) {
|
||||
if (url.pathname.startsWith("/api/imgw/") || url.pathname === "/api/imgw-current") {
|
||||
event.respondWith(
|
||||
fetch(event.request)
|
||||
.then((response) => {
|
||||
|
||||
41
types/imgw-current.ts
Normal file
41
types/imgw-current.ts
Normal file
@@ -0,0 +1,41 @@
|
||||
export interface RawImgwHybridWeatherRow {
|
||||
Icon10?: unknown;
|
||||
Wind_Dir?: unknown;
|
||||
Temperature?: unknown;
|
||||
Chill?: unknown;
|
||||
Rain10m?: unknown;
|
||||
Snow10m?: unknown;
|
||||
Wind_Speed?: unknown;
|
||||
MODEL?: unknown;
|
||||
Date?: unknown;
|
||||
Precipitation10m?: unknown;
|
||||
Type?: unknown;
|
||||
Humidity?: unknown;
|
||||
Cloud?: unknown;
|
||||
PressureMSL?: unknown;
|
||||
}
|
||||
|
||||
export interface RawImgwHybridWeatherResponse {
|
||||
data?: {
|
||||
Valid?: unknown;
|
||||
Data?: unknown;
|
||||
};
|
||||
}
|
||||
|
||||
export type CurrentWeatherCondition = "rain" | "snow" | "thunderstorm" | null;
|
||||
|
||||
export interface ImgwCurrentWeather {
|
||||
measuredAt: string;
|
||||
temperature: number | null;
|
||||
feelsLike: number | null;
|
||||
windSpeed: number | null;
|
||||
windDirection: number | null;
|
||||
humidity: number | null;
|
||||
pressure: number | null;
|
||||
precipitation10m: number | null;
|
||||
rainfall10m: number | null;
|
||||
snowfall10m: number | null;
|
||||
cloudCover: number | null;
|
||||
weatherCode: number | null;
|
||||
condition: CurrentWeatherCondition;
|
||||
}
|
||||
Reference in New Issue
Block a user