David Fencl
198 lines
8.9 KiB
TypeScript
198 lines
8.9 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import { FiWind, FiSunrise, FiSunset, FiThermometer, FiAlertCircle } from 'react-icons/fi';
|
|
|
|
interface WeatherProps {
|
|
lat: number;
|
|
lng: number;
|
|
language: 'cs' | 'en';
|
|
sensorTemp?: number;
|
|
windUnit?: 'kmh' | 'ms';
|
|
}
|
|
|
|
interface WeatherData {
|
|
temp: number;
|
|
windSpeed: number; // m/s
|
|
windGusts: number; // m/s
|
|
windDir: number; // degrees
|
|
sunrise: string;
|
|
sunset: string;
|
|
time?: string;
|
|
}
|
|
|
|
const getCompassDirection = (degrees: number, language: 'cs' | 'en') => {
|
|
const directionsEn = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW'];
|
|
const directionsCs = ['S', 'SV', 'V', 'JV', 'J', 'JZ', 'Z', 'SZ'];
|
|
const directions = language === 'cs' ? directionsCs : directionsEn;
|
|
const index = Math.round(((degrees %= 360) < 0 ? degrees + 360 : degrees) / 45) % 8;
|
|
return directions[index];
|
|
};
|
|
|
|
const formatTime = (isoString: string) => {
|
|
if (!isoString) return '--:--';
|
|
try {
|
|
const match = isoString.match(/T(\d{2}:\d{2})/);
|
|
if (match) return match[1];
|
|
const date = new Date(isoString);
|
|
if (isNaN(date.getTime())) {
|
|
return isoString;
|
|
}
|
|
return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
|
} catch (e) {
|
|
return '--:--';
|
|
}
|
|
};
|
|
|
|
export const WeatherWidget = ({ lat, lng, language, sensorTemp, windUnit = 'kmh' }: WeatherProps) => {
|
|
const [data, setData] = useState<WeatherData | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (data) {
|
|
console.log("Weather data loaded:", data);
|
|
}
|
|
}, [data]);
|
|
|
|
useEffect(() => {
|
|
if (!lat || !lng) {
|
|
setLoading(false);
|
|
setError(true);
|
|
return;
|
|
}
|
|
|
|
const fetchWeather = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const res = await fetch(`https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lng}¤t=temperature_2m,wind_speed_10m,wind_direction_10m,wind_gusts_10m&daily=sunrise,sunset&timezone=auto&wind_speed_unit=${windUnit}`);
|
|
if (!res.ok) throw new Error('Failed to fetch weather');
|
|
|
|
const json = await res.json();
|
|
setData({
|
|
temp: json.current.temperature_2m,
|
|
windSpeed: json.current.wind_speed_10m,
|
|
windGusts: json.current.wind_gusts_10m,
|
|
windDir: json.current.wind_direction_10m,
|
|
sunrise: json.daily.sunrise[0],
|
|
sunset: json.daily.sunset[0],
|
|
time: json.current.time
|
|
});
|
|
setError(false);
|
|
} catch (err) {
|
|
console.error('Weather fetch error:', err);
|
|
setError(true);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchWeather();
|
|
|
|
// Refresh weather every 15 minutes
|
|
const interval = setInterval(fetchWeather, 15 * 60 * 1000);
|
|
return () => clearInterval(interval);
|
|
}, [lat, lng, windUnit]);
|
|
|
|
const dict = {
|
|
cs: { title: 'POČASÍ A VÍTR', error: 'Data nedostupná', wind: 'Vítr', gusts: 'Nárazy', temp: 'Teplota' },
|
|
en: { title: 'WEATHER & WIND', error: 'Data unavailable', wind: 'Wind', gusts: 'Gusts', temp: 'Temp' }
|
|
}[language];
|
|
|
|
if (loading) {
|
|
return <div className="kpi-card" style={{ minHeight: '120px', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--text-muted)' }}>Loading weather...</div>;
|
|
}
|
|
|
|
if (error || !data) {
|
|
return (
|
|
<div className="kpi-card" style={{ opacity: 0.7 }}>
|
|
<h3 style={{ fontSize: '1rem', color: 'var(--text-muted)', margin: '0 0 0.5rem 0' }}>{dict.title}</h3>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', color: 'var(--color-red)' }}>
|
|
<FiAlertCircle /> {dict.error}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="kpi-card" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
|
|
<div style={{ fontSize: '1rem', color: 'var(--text-muted)', marginBottom: '1rem' }}>
|
|
{dict.title} {data.time ? `(${formatTime(data.time)})` : ''}
|
|
</div>
|
|
|
|
<div style={{ position: 'relative', display: 'flex', justifyContent: 'center', alignItems: 'center', height: '160px', marginTop: '-1rem', width: '100%' }}>
|
|
|
|
{/* Compass and Wind Info Wrapper */}
|
|
<div style={{ position: 'absolute', width: '160px', height: '160px', top: '44%', left: '50%', transform: 'translate(-50%, -50%)' }}>
|
|
{/* SVG Compass Ring */}
|
|
<svg width="160" height="160" viewBox="0 0 260 260" style={{ position: 'absolute', top: 0, left: 0 }}>
|
|
<circle cx="130" cy="130" r="100" fill="transparent" stroke="rgba(255,255,255,0.03)" strokeWidth="30" />
|
|
|
|
{/* Generate Ticks */}
|
|
{Array.from({ length: 72 }).map((_, i) => {
|
|
const angle = i * 5;
|
|
const isMajor = angle % 90 === 0;
|
|
const isMedium = angle % 45 === 0;
|
|
const innerR = isMajor ? 90 : isMedium ? 100 : 105;
|
|
const outerR = 115;
|
|
const rad = (angle - 90) * (Math.PI / 180);
|
|
const x1 = 130 + innerR * Math.cos(rad);
|
|
const y1 = 130 + innerR * Math.sin(rad);
|
|
const x2 = 130 + outerR * Math.cos(rad);
|
|
const y2 = 130 + outerR * Math.sin(rad);
|
|
|
|
if (isMajor) return null; // Put text here instead
|
|
|
|
return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="rgba(255,255,255,0.15)" strokeWidth={isMedium ? 2 : 1} />;
|
|
})}
|
|
|
|
<text x="130" y="25" fill="var(--text-muted)" fontSize="18" fontWeight="bold" textAnchor="middle" alignmentBaseline="middle">{language === 'cs' ? 'S' : 'N'}</text>
|
|
<text x="235" y="130" fill="var(--text-muted)" fontSize="18" fontWeight="bold" textAnchor="middle" alignmentBaseline="middle">{language === 'cs' ? 'V' : 'E'}</text>
|
|
<text x="130" y="235" fill="var(--text-muted)" fontSize="18" fontWeight="bold" textAnchor="middle" alignmentBaseline="middle">{language === 'cs' ? 'J' : 'S'}</text>
|
|
<text x="25" y="130" fill="var(--text-muted)" fontSize="18" fontWeight="bold" textAnchor="middle" alignmentBaseline="middle">{language === 'cs' ? 'Z' : 'W'}</text>
|
|
|
|
{/* Direction Indicator */}
|
|
{(() => {
|
|
const dirRad = (data.windDir + 180 - 90) * (Math.PI / 180);
|
|
const x = 130 + 94 * Math.cos(dirRad);
|
|
const y = 130 + 94 * Math.sin(dirRad);
|
|
return (
|
|
<g transform={`translate(${x}, ${y}) rotate(${data.windDir})`}>
|
|
<path d="M-5,-5 L0,5 L5,-5 L0,-3 Z" fill="var(--color-cyan)" />
|
|
</g>
|
|
);
|
|
})()}
|
|
</svg>
|
|
|
|
{/* Center Data */}
|
|
<FiWind size={20} color="var(--color-cyan)" style={{ position: 'absolute', top: '28px', left: '50%', transform: 'translateX(-50%)', zIndex: 10 }} />
|
|
|
|
<div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', marginTop: '-6px', zIndex: 10, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
|
|
<span style={{ fontSize: '1.9rem', fontWeight: 'bold', color: 'var(--text-main)', lineHeight: 1, textShadow: '0 2px 10px rgba(0,0,0,0.5)' }}>{data.windSpeed.toFixed(1)}</span>
|
|
<span style={{ position: 'absolute', left: '100%', bottom: '0.3rem', marginLeft: '0.2rem', fontSize: '0.75rem', color: 'var(--text-main)', whiteSpace: 'nowrap' }}>{windUnit === 'kmh' ? 'km/h' : 'm/s'}</span>
|
|
</div>
|
|
|
|
<div style={{ position: 'absolute', bottom: '42px', left: '50%', transform: 'translateX(-50%)', zIndex: 10, fontSize: '0.6rem', color: 'var(--color-purple)', whiteSpace: 'nowrap' }}>
|
|
{dict.gusts}: {data.windGusts.toFixed(1)} {windUnit === 'kmh' ? 'km/h' : 'm/s'}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Corner Elements */}
|
|
<div style={{ position: 'absolute', bottom: '0px', left: '0px', display: 'flex', alignItems: 'center', gap: '0.3rem', fontSize: '0.9rem' }} title={sensorTemp !== undefined ? (language === 'cs' ? 'Měřeno přímo senzorem na hrázi' : 'Measured by sensor at the dam') : 'OpenMeteo API'}>
|
|
<FiThermometer color="var(--color-orange)" size={15} />
|
|
<span style={{ fontWeight: 'bold', color: 'var(--text-main)' }}>{sensorTemp !== undefined ? sensorTemp.toFixed(1) : data.temp.toFixed(1)} °C</span>
|
|
</div>
|
|
|
|
<div style={{ position: 'absolute', bottom: '0px', right: '0px', display: 'flex', flexDirection: 'column', gap: '0.2rem', fontSize: '0.8rem' }}>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '0.3rem', color: 'var(--text-main)' }}>
|
|
<FiSunrise color="var(--color-orange)" size={14} />
|
|
<span style={{ fontWeight: 'bold' }}>{formatTime(data.sunrise)}</span>
|
|
</div>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '0.3rem', color: 'var(--text-main)' }}>
|
|
<FiSunset color="var(--color-orange)" size={14} />
|
|
<span style={{ fontWeight: 'bold' }}>{formatTime(data.sunset)}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|