87 lines
3.6 KiB
JavaScript
87 lines
3.6 KiB
JavaScript
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const refreshButton = document.getElementById('refresh-weather-btn');
|
|
const weatherContent = document.getElementById('weather-content');
|
|
const weatherLoading = document.getElementById('weather-loading');
|
|
const weatherError = document.getElementById('weather-error');
|
|
|
|
const weatherIcon = document.getElementById('weather-icon');
|
|
const weatherTemp = document.getElementById('weather-temp');
|
|
const weatherFeelsLike = document.getElementById('weather-feels-like');
|
|
const weatherDesc = document.getElementById('weather-desc');
|
|
const weatherLastUpdated = document.getElementById('weather-last-updated');
|
|
const weatherAlerts = document.getElementById('weather-alerts');
|
|
const weatherPlaceholder = document.getElementById('weather-placeholder');
|
|
|
|
async function fetchWeather() {
|
|
// Show loading state
|
|
weatherContent.style.display = 'none';
|
|
weatherError.style.display = 'none';
|
|
weatherLoading.style.display = 'block';
|
|
refreshButton.disabled = true;
|
|
|
|
try {
|
|
const response = await fetch('api/weather-fetch.php');
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP error! status: ${response.status}`);
|
|
}
|
|
|
|
const data = await response.json();
|
|
|
|
if (data.error) {
|
|
throw new Error(data.error);
|
|
}
|
|
|
|
// Update UI
|
|
if (weatherPlaceholder) {
|
|
weatherPlaceholder.style.display = 'none';
|
|
}
|
|
weatherIcon.src = `https://openweathermap.org/img/wn/${data[':weather_icon']}@2x.png`;
|
|
weatherTemp.innerHTML = `${Math.round(data[':temperature_f'])}°F`;
|
|
weatherFeelsLike.innerHTML = `Feels like ${Math.round(data[':feels_like_f'])}°F`;
|
|
weatherDesc.textContent = data[':weather_description'].charAt(0).toUpperCase() + data[':weather_description'].slice(1);
|
|
|
|
const observationDate = new Date(data[':observation_time'].replace(/-/g, '/'));
|
|
weatherLastUpdated.textContent = observationDate.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' });
|
|
|
|
// Clear and build alerts
|
|
weatherAlerts.innerHTML = '';
|
|
if (data[':is_extreme_heat'] == 1) {
|
|
weatherAlerts.innerHTML += `
|
|
<div class="alert alert-danger mt-3 mb-0" role="alert">
|
|
<i class="bi bi-fire"></i> <strong>High AC Demand Expected:</strong> Temp > 95°F.
|
|
</div>`;
|
|
}
|
|
if (data[':is_extreme_cold'] == 1) {
|
|
weatherAlerts.innerHTML += `
|
|
<div class="alert alert-info mt-3 mb-0" role="alert">
|
|
<i class="bi bi-snow"></i> <strong>High Heating Demand Expected:</strong> Temp < 32°F.
|
|
</div>`;
|
|
}
|
|
|
|
|
|
weatherContent.style.display = 'block';
|
|
|
|
} catch (error) {
|
|
console.error("Error fetching weather:", error);
|
|
weatherError.textContent = 'Failed to fetch weather data. Please try again.';
|
|
weatherError.style.display = 'block';
|
|
} finally {
|
|
// Hide loading state
|
|
weatherLoading.style.display = 'none';
|
|
refreshButton.disabled = false;
|
|
}
|
|
}
|
|
|
|
// --- Event Listeners ---
|
|
if(refreshButton) {
|
|
refreshButton.addEventListener('click', fetchWeather);
|
|
}
|
|
|
|
|
|
// --- Auto-refresh Timer ---
|
|
// Auto-refresh every 30 minutes (1800000 milliseconds)
|
|
setInterval(fetchWeather, 1800000);
|
|
});
|