narrow_casting_system/client/js/weather.js

// Weather Widget Management for SnowWorld Client
class WeatherManager {
    constructor() {
        this.weatherData = null;
        this.updateInterval = null;
        this.lastUpdate = null;
        this.updateFrequency = 5 * 60 * 1000; // 5 minutes
        this.init();
    }

    init() {
        this.loadWeatherData();
        this.startAutoUpdate();
        this.updateTimeDisplay();
        this.startTimeUpdate();
    }

    async loadWeatherData() {
        try {
            // Try to get weather data from server
            const response = await fetch('http://localhost:3000/api/weather');
            if (response.ok) {
                this.weatherData = await response.json();
                this.lastUpdate = new Date().toISOString();
                this.updateWeatherDisplay();
                console.log('Weather data loaded:', this.weatherData);
            } else {
                throw new Error('Failed to fetch weather data');
            }
        } catch (error) {
            console.error('Error loading weather data:', error);
            this.useFallbackWeatherData();
        }
    }

    useFallbackWeatherData() {
        // Fallback to mock weather data
        this.weatherData = {
            temperature: -5,
            snowCondition: 'Frisse sneeuw',
            slopeCondition: 'Perfect',
            humidity: 65,
            windSpeed: 8,
            lastUpdated: new Date().toISOString()
        };
        
        this.lastUpdate = new Date().toISOString();
        this.updateWeatherDisplay();
        console.log('Using fallback weather data');
    }

    updateWeatherDisplay() {
        if (!this.weatherData) return;

        const elements = {
            temperature: document.getElementById('temperature'),
            snowCondition: document.getElementById('snowCondition'),
            humidity: document.getElementById('humidity'),
            windSpeed: document.getElementById('windSpeed')
        };

        // Update temperature
        if (elements.temperature) {
            elements.temperature.textContent = this.weatherData.temperature;
        }

        // Update snow condition
        if (elements.snowCondition) {
            elements.snowCondition.textContent = this.weatherData.snowCondition;
        }

        // Update humidity
        if (elements.humidity) {
            elements.humidity.textContent = `${this.weatherData.humidity}%`;
        }

        // Update wind speed
        if (elements.windSpeed) {
            elements.windSpeed.textContent = this.weatherData.windSpeed;
        }

        // Update weather condition icon
        this.updateWeatherIcon();
    }

    updateWeatherIcon() {
        const condition = this.weatherData.snowCondition.toLowerCase();
        const iconElement = document.querySelector('.weather-condition i');
        
        if (!iconElement) return;

        let iconClass = 'fa-snowflake';
        
        if (condition.includes('fris')) {
            iconClass = 'fa-snowflake';
        } else if (condition.includes('poeder')) {
            iconClass = 'fa-skiing';
        } else if (condition.includes('nat')) {
            iconClass = 'fa-tint';
        } else if (condition.includes('ijzig')) {
            iconClass = 'fa-icicles';
        } else if (condition.includes('storm')) {
            iconClass = 'fa-wind';
        }

        iconElement.className = `fas ${iconClass}`;
    }

    updateTimeDisplay() {
        const now = new Date();
        
        // Update time
        const timeElement = document.getElementById('currentTime');
        if (timeElement) {
            timeElement.textContent = now.toLocaleTimeString('nl-NL', {
                hour: '2-digit',
                minute: '2-digit'
            });
        }

        // Update date
        const dateElement = document.getElementById('currentDate');
        if (dateElement) {
            dateElement.textContent = now.toLocaleDateString('nl-NL', {
                day: 'numeric',
                month: 'long',
                year: 'numeric'
            });
        }
    }

    startTimeUpdate() {
        // Update time every second
        setInterval(() => {
            this.updateTimeDisplay();
        }, 1000);
    }

    startAutoUpdate() {
        // Update weather every 5 minutes
        this.updateInterval = setInterval(() => {
            this.loadWeatherData();
        }, this.updateFrequency);
        
        console.log(`Weather auto-update started with frequency: ${this.updateFrequency}ms`);
    }

    stopAutoUpdate() {
        if (this.updateInterval) {
            clearInterval(this.updateInterval);
            this.updateInterval = null;
            console.log('Weather auto-update stopped');
        }
    }

    // Simulate weather changes for demo purposes
    simulateWeatherChange() {
        const conditions = [
            { temperature: -8, snowCondition: 'Poedersneeuw', humidity: 45, windSpeed: 12 },
            { temperature: -3, snowCondition: 'Natte sneeuw', humidity: 85, windSpeed: 6 },
            { temperature: -12, snowCondition: 'IJzige sneeuw', humidity: 35, windSpeed: 15 },
            { temperature: -1, snowCondition: 'Koude regen', humidity: 90, windSpeed: 8 },
            { temperature: -6, snowCondition: 'Frisse sneeuw', humidity: 65, windSpeed: 8 }
        ];

        const randomCondition = conditions[Math.floor(Math.random() * conditions.length)];
        
        this.weatherData = {
            ...this.weatherData,
            ...randomCondition,
            lastUpdated: new Date().toISOString()
        };
        
        this.updateWeatherDisplay();
        console.log('Weather simulation updated:', this.weatherData);
    }

    // Get weather-based background gradient
    getWeatherBackground() {
        if (!this.weatherData) return 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)';

        const temp = this.weatherData.temperature;
        const condition = this.weatherData.snowCondition.toLowerCase();

        // Temperature-based gradients
        if (temp <= -10) {
            return 'linear-gradient(135deg, #1e3c72 0%, #2a5298 100%)'; // Very cold - dark blue
        } else if (temp <= -5) {
            return 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)'; // Cold - light blue
        } else if (temp <= 0) {
            return 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'; // Near freezing - purple
        } else {
            return 'linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%)'; // Above freezing - light
        }
    }

    // Update display background based on weather
    updateBackground() {
        const background = this.getWeatherBackground();
        document.body.style.background = background;
        
        // Also update the display container if it exists
        const displayContainer = document.querySelector('.display-container');
        if (displayContainer) {
            displayContainer.style.background = background;
        }
    }

    // Get current weather data
    getCurrentWeather() {
        return {
            ...this.weatherData,
            lastUpdate: this.lastUpdate
        };
    }

    // Get weather summary for display
    getWeatherSummary() {
        if (!this.weatherData) return 'Geen weersdata beschikbaar';
        
        return `${this.weatherData.temperature}°C, ${this.weatherData.snowCondition}`;
    }

    // Check if weather data is stale
    isWeatherDataStale() {
        if (!this.lastUpdate) return true;
        
        const lastUpdate = new Date(this.lastUpdate);
        const now = new Date();
        const staleThreshold = 10 * 60 * 1000; // 10 minutes
        
        return (now - lastUpdate) > staleThreshold;
    }

    // Force weather update
    async refreshWeather() {
        console.log('Force refreshing weather data...');
        await this.loadWeatherData();
    }

    // Set custom weather data (for testing/demo)
    setWeatherData(data) {
        this.weatherData = {
            ...this.weatherData,
            ...data,
            lastUpdated: new Date().toISOString()
        };
        
        this.lastUpdate = new Date().toISOString();
        this.updateWeatherDisplay();
        this.updateBackground();
        
        console.log('Custom weather data set:', this.weatherData);
    }

    // Get weather icon for condition
    getWeatherIcon(condition) {
        const conditionLower = condition.toLowerCase();
        
        if (conditionLower.includes('fris')) return 'fa-snowflake';
        if (conditionLower.includes('poeder')) return 'fa-skiing';
        if (conditionLower.includes('nat')) return 'fa-tint';
        if (conditionLower.includes('ijzig')) return 'fa-icicles';
        if (conditionLower.includes('storm')) return 'fa-wind';
        if (conditionLower.includes('koud')) return 'fa-temperature-low';
        
        return 'fa-snowflake';
    }

    // Get temperature color based on value
    getTemperatureColor(temp) {
        if (temp <= -10) return '#1e3c72'; // Very cold - dark blue
        if (temp <= -5) return '#4facfe'; // Cold - blue
        if (temp <= 0) return '#667eea'; // Near freezing - purple
        if (temp <= 5) return '#89f7fe'; // Cold - light blue
        return '#66a6ff'; // Cool - light
    }

    // Cleanup
    destroy() {
        this.stopAutoUpdate();
        console.log('Weather manager destroyed');
    }
}

// Create global weather manager instance
window.weatherManager = new WeatherManager();