Météo dynamique pour Fakarava avec heure locale
- Intégration API Open-Meteo pour météo en temps réel - Coordonnées Fakarava (Rotoava): -16.3167, -145.6167 - Affichage heure locale (fuseau horaire Pacific/Tahiti) - Rafraîchissement automatique toutes les heures - Gestion des erreurs avec valeurs par défaut - Icônes dynamiques selon conditions météo - APK rebuild
This commit is contained in:
@ -1,35 +1,177 @@
|
||||
import { Cloud, Sun } from "lucide-react";
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { Cloud, Sun, CloudRain, Wind, Droplets, Loader2, Clock } from "lucide-react";
|
||||
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
|
||||
|
||||
interface WeatherData {
|
||||
temperature: number;
|
||||
condition: string;
|
||||
windSpeed: number;
|
||||
humidity: number;
|
||||
weatherCode: number;
|
||||
}
|
||||
|
||||
// Coordonnées de Fakarava (Rotoava)
|
||||
const FAKARAVA_LAT = -16.3167;
|
||||
const FAKARAVA_LON = -145.6167;
|
||||
|
||||
// Codes météo Open-Meteo vers descriptions
|
||||
const getWeatherCondition = (code: number): { text: string; icon: React.ReactNode } => {
|
||||
// Codes Open-Meteo WMO Weather interpretation codes
|
||||
if (code === 0) {
|
||||
return { text: "Ciel dégagé", icon: <Sun className="h-16 w-16 text-yellow-400" /> };
|
||||
} else if (code <= 3) {
|
||||
return { text: "Partiellement nuageux", icon: <Cloud className="h-16 w-16 text-gray-400" /> };
|
||||
} else if (code <= 48) {
|
||||
return { text: "Nuageux", icon: <Cloud className="h-16 w-16 text-gray-500" /> };
|
||||
} else if (code <= 55) {
|
||||
return { text: "Brouillard", icon: <Cloud className="h-16 w-16 text-gray-400" /> };
|
||||
} else if (code <= 67) {
|
||||
return { text: "Pluie", icon: <CloudRain className="h-16 w-16 text-blue-400" /> };
|
||||
} else if (code <= 77) {
|
||||
return { text: "Neige", icon: <CloudRain className="h-16 w-16 text-gray-300" /> };
|
||||
} else if (code <= 82) {
|
||||
return { text: "Averses", icon: <CloudRain className="h-16 w-16 text-blue-500" /> };
|
||||
} else if (code <= 86) {
|
||||
return { text: "Averses de neige", icon: <CloudRain className="h-16 w-16 text-gray-300" /> };
|
||||
} else {
|
||||
return { text: "Orage", icon: <CloudRain className="h-16 w-16 text-purple-500" /> };
|
||||
}
|
||||
};
|
||||
|
||||
export default function WeatherWidget() {
|
||||
const [weather, setWeather] = useState<WeatherData | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [localTime, setLocalTime] = useState<string>("");
|
||||
|
||||
// Mise à jour de l'heure locale chaque seconde
|
||||
useEffect(() => {
|
||||
const updateTime = () => {
|
||||
const now = new Date();
|
||||
// Fuseau horaire de Tahiti (UTC-10)
|
||||
const tahitiTime = new Date(now.toLocaleString("en-US", { timeZone: "Pacific/Tahiti" }));
|
||||
const hours = tahitiTime.getHours().toString().padStart(2, "0");
|
||||
const minutes = tahitiTime.getMinutes().toString().padStart(2, "0");
|
||||
setLocalTime(`${hours}:${minutes}`);
|
||||
};
|
||||
|
||||
updateTime();
|
||||
const timeInterval = setInterval(updateTime, 1000);
|
||||
return () => clearInterval(timeInterval);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchWeather = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
// API Open-Meteo (gratuit, pas de clé API nécessaire)
|
||||
const response = await fetch(
|
||||
`https://api.open-meteo.com/v1/forecast?latitude=${FAKARAVA_LAT}&longitude=${FAKARAVA_LON}¤t=temperature_2m,relative_humidity_2m,weather_code,wind_speed_10m&wind_speed_unit=kmh&timezone=Pacific/Tahiti`
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error("Erreur lors de la récupération de la météo");
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
const current = data.current;
|
||||
|
||||
setWeather({
|
||||
temperature: Math.round(current.temperature_2m),
|
||||
condition: getWeatherCondition(current.weather_code).text,
|
||||
windSpeed: Math.round(current.wind_speed_10m),
|
||||
humidity: current.relative_humidity_2m,
|
||||
weatherCode: current.weather_code,
|
||||
});
|
||||
} catch (err) {
|
||||
console.error("Erreur météo:", err);
|
||||
setError("Impossible de charger la météo");
|
||||
// Valeurs par défaut en cas d'erreur
|
||||
setWeather({
|
||||
temperature: 28,
|
||||
condition: "Ensoleillé",
|
||||
windSpeed: 15,
|
||||
humidity: 75,
|
||||
weatherCode: 0,
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchWeather();
|
||||
|
||||
// Rafraîchir toutes les heures
|
||||
const interval = setInterval(fetchWeather, 3600000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Card className="bg-gradient-to-br from-primary/10 to-secondary">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Sun className="h-6 w-6 text-primary" />
|
||||
Météo - Fakarava
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-primary" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
if (!weather) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const weatherInfo = getWeatherCondition(weather.weatherCode);
|
||||
|
||||
return (
|
||||
<Card className="bg-gradient-to-br from-primary/10 to-secondary">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Sun className="h-6 w-6 text-primary" />
|
||||
Météo
|
||||
<CardTitle className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Sun className="h-6 w-6 text-primary" />
|
||||
Météo - Fakarava
|
||||
</div>
|
||||
{localTime && (
|
||||
<div className="flex items-center gap-1 text-sm font-normal text-gray-600 dark:text-gray-400">
|
||||
<Clock className="h-4 w-4" />
|
||||
{localTime}
|
||||
</div>
|
||||
)}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-3xl font-bold text-primary">28°C</p>
|
||||
<p className="text-gray-600 mt-1">Ensoleillé</p>
|
||||
</div>
|
||||
<div className="text-6xl">
|
||||
<Sun className="h-16 w-16 text-yellow-400" />
|
||||
<p className="text-3xl font-bold text-primary">{weather.temperature}°C</p>
|
||||
<p className="text-gray-600 dark:text-gray-300 mt-1">{weather.condition}</p>
|
||||
{error && (
|
||||
<p className="text-xs text-orange-500 mt-1">Données en cache</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-6xl">{weatherInfo.icon}</div>
|
||||
</div>
|
||||
<div className="mt-4 flex gap-4 text-sm text-gray-600">
|
||||
<div>
|
||||
<span className="font-semibold">Vent:</span> 15 km/h
|
||||
<div className="mt-4 flex gap-4 text-sm text-gray-600 dark:text-gray-400">
|
||||
<div className="flex items-center gap-1">
|
||||
<Wind className="h-4 w-4" />
|
||||
<span className="font-semibold">Vent:</span> {weather.windSpeed} km/h
|
||||
</div>
|
||||
<div>
|
||||
<span className="font-semibold">Humidité:</span> 75%
|
||||
<div className="flex items-center gap-1">
|
||||
<Droplets className="h-4 w-4" />
|
||||
<span className="font-semibold">Humidité:</span> {weather.humidity}%
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user