Improve the dahboard 6

This commit is contained in:
Urtzi Alfaro
2025-08-18 21:14:42 +02:00
parent 954f9a3c3f
commit d6fd53e461
3 changed files with 87 additions and 12 deletions

View File

@@ -200,6 +200,36 @@ const WeatherContext: React.FC<WeatherContextProps> = ({ className = '' }) => {
);
}
// Warning for unavailable/error weather data
if (weatherData && (weatherData.source === 'unavailable' || weatherData.source === 'error')) {
return (
<Card className={`p-6 border-yellow-200 bg-yellow-50 ${className}`}>
<div className="text-center">
<AlertTriangle className="h-12 w-12 text-yellow-600 mx-auto mb-4" />
<h3 className="text-lg font-medium text-yellow-800 mb-2">
{weatherData.source === 'unavailable' ? '⚠️ Servicio Meteorológico No Disponible' : '❌ Error en Datos Meteorológicos'}
</h3>
<p className="text-yellow-700 text-sm mb-4">
{weatherData.source === 'unavailable'
? 'AEMET está experimentando problemas temporales. Los datos meteorológicos no están disponibles en este momento.'
: 'Se ha producido un error al obtener los datos meteorológicos. Por favor, inténtalo de nuevo más tarde.'
}
</p>
<div className="text-xs text-yellow-600 mb-4">
<strong>Estado:</strong> {weatherData.description}
</div>
<button
onClick={loadWeatherContext}
disabled={isRefreshing}
className="px-4 py-2 bg-yellow-100 hover:bg-yellow-200 text-yellow-800 rounded-lg transition-colors disabled:opacity-50"
>
{isRefreshing ? 'Verificando AEMET...' : 'Reintentar Conexión'}
</button>
</div>
</Card>
);
}
// Warning for synthetic data
if (weatherData && weatherData.source === 'synthetic') {
return (
@@ -451,7 +481,7 @@ const WeatherContext: React.FC<WeatherContextProps> = ({ className = '' }) => {
)}
{/* Hourly Forecast Preview */}
{hourlyForecast.length > 0 && (
{hourlyForecast.length > 0 ? (
<div className="mb-6">
<h4 className="font-medium text-gray-800 mb-3">Pronóstico por Horas (Próximas 8 horas)</h4>
<div className="grid grid-cols-4 gap-2">
@@ -475,10 +505,22 @@ const WeatherContext: React.FC<WeatherContextProps> = ({ className = '' }) => {
))}
</div>
</div>
) : (
<div className="mb-6">
<h4 className="font-medium text-gray-800 mb-3">Pronóstico por Horas</h4>
<div className="bg-gray-50 rounded-lg p-4 text-center">
<div className="text-sm text-gray-600">
Pronóstico por horas no disponible temporalmente
</div>
<div className="text-xs text-gray-500 mt-1">
Problemas de conectividad con AEMET
</div>
</div>
</div>
)}
{/* Weather Forecast */}
{weatherForecast.length > 0 && (
{weatherForecast.length > 0 ? (
<div>
<h4 className="font-medium text-gray-800 mb-3">Pronóstico (Próximos Días)</h4>
<div className="space-y-2">
@@ -505,6 +547,18 @@ const WeatherContext: React.FC<WeatherContextProps> = ({ className = '' }) => {
))}
</div>
</div>
) : (
<div>
<h4 className="font-medium text-gray-800 mb-3">Pronóstico (Próximos Días)</h4>
<div className="bg-gray-50 rounded-lg p-4 text-center">
<div className="text-sm text-gray-600">
Pronóstico diario no disponible temporalmente
</div>
<div className="text-xs text-gray-500 mt-1">
Problemas de conectividad con AEMET
</div>
</div>
</div>
)}
{/* Data Source Info & Controls */}