Improve the dahboard 6
This commit is contained in:
@@ -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 */}
|
||||
|
||||
Reference in New Issue
Block a user