Update static/js/script.js

static/js/script.js

@@ -1,96 +1,201 @@
-document.getElementById('search-button').addEventListener('click', function() {
-    let city = document.getElementById('city-input').value;
-    fetchWeatherData(city);
-});
-
-document.getElementById('location-button').addEventListener('click', function() {
-    if (navigator.geolocation) {
-        navigator.geolocation.getCurrentPosition(position => {
-            let lat = position.coords.latitude;
-            let lon = position.coords.longitude;
-            fetchWeatherDataByLocation(lat, lon);
-        });
-    } else {
-        alert('Geolocation is not supported by this browser.');
-    }
-});
-
-function fetchWeatherData(city) {
-    fetch(`/weather?city=${city}`)
-        .then(response => response.json())
-        .then(data => {
-            if (data.error) {
-                alert(data.error);
-            } else {
-                displayWeatherData(data);
-            }
-        })
-        .catch(error => console.error('Error:', error));
-}
-
-function fetchWeatherDataByLocation(lat, lon) {
-    fetch(`/weatherlocation?lat=${lat}&lon=${lon}`)
-        .then(response => response.json())
-        .then(data => {
-            if (data.error) {
-                alert(data.error);
-            } else {
-                displayWeatherData(data);
-            }
-        })
-        .catch(error => console.error('Error:', error));
-}
-
-function displayWeatherData(data) {
-    let currentWeather = document.getElementById('current-weather');
-    currentWeather.innerHTML = `
-        <div class="weather-details">
-            <h2>${data.location.name} (${data.current.last_updated})</h2>
-            <p>Temperature: ${data.current.temp_c}°C</p>
-            <p>Wind: ${data.current.wind_kph} KPH</p>
-            <p>Humidity: ${data.current.humidity}%</p>
-        </div>
-        <div class="weather-icon">
-            <img src="${data.current.condition.icon}" alt="${data.current.condition.text}">
-            <p>${data.current.condition.text}</p>
-        </div>
-    `;
-    
-    let forecast = document.getElementById('forecast');
-    forecast.innerHTML = '';
-    
-    let lastFourDays = data.forecast.forecastday.slice(-4);
-    lastFourDays.forEach(day => {
-        forecast.innerHTML += `
-            <div class="forecast-day">
-                <h3>${day.date}</h3>
-                <img src="${day.day.condition.icon}" alt="${day.day.condition.text}">
-                <p>Temp: ${day.day.avgtemp_c}°C</p>
-                <p>Wind: ${day.day.maxwind_kph} KPH</p>
-                <p>Humidity: ${day.day.avghumidity}%</p>
-            </div>
-        `;
-    });
-}
-
-
-document.getElementById('subscribe-form').addEventListener('submit', function(event) {
-    event.preventDefault();
-    let email = document.getElementById('email-input').value;
-    fetch('/subscribe', {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-               },
-        body: JSON.stringify({ email: email })
-    })
-    .then(response => response.json())
-    .then(data => {
-        if (data.error) {
-            alert(data.error);
-        } else {
-            alert(data.message);
-        }
-    })
-    .catch(error => console.error('Error:', error));
+document.getElementById('search-button').addEventListener('click', function() {
+    let city = document.getElementById('city-input').value;
+    fetchWeatherData(city);
+    addToCityHistory(city);
+});
+document.getElementById('clear-history-button').addEventListener('click', function() {
+    clearCityHistory();
+});
+let cityHistory = [];
+
+
+function clearCityHistory() {
+    cityHistory = [];
+    displayCityHistory();
+    toggleClearHistoryButton();
+}
+
+function toggleClearHistoryButton() {
+    let clearHistoryButton = document.getElementById('clear-history-button');
+    if (cityHistory.length > 0) {
+        clearHistoryButton.style.display = 'block';
+    } else {
+        clearHistoryButton.style.display = 'none';
+    }
+}
+
+function addToCityHistory(city) {
+    if (!cityHistory.includes(city)) {
+        cityHistory.push(city);
+    }
+    displayCityHistory();
+    toggleClearHistoryButton();
+}
+
+function displayCityHistory() {
+    let historyContainer = document.getElementById('city-history');
+    historyContainer.innerHTML = '<strong>City History:</strong> ';
+    
+    cityHistory.forEach((city, index) => {
+        let link = document.createElement('span');
+        link.classList.add('city-history-item');
+        link.textContent = city;
+        link.addEventListener('click', function() {
+            // console.log('City clicked:', city);
+            fetchWeatherData(city);
+        });
+        
+        if (index < cityHistory.length - 1) {
+            historyContainer.appendChild(link);
+            historyContainer.innerHTML += ', ';
+        } else {
+            historyContainer.appendChild(link);
+        }
+    });
+}
+
+
+document.getElementById('location-button').addEventListener('click', function() {
+    if (navigator.geolocation) {
+        navigator.geolocation.getCurrentPosition(position => {
+            let lat = position.coords.latitude;
+            let lon = position.coords.longitude;
+            fetchWeatherDataByLocation(lat, lon);
+            addToCityHistory("Current Location");
+        });
+    } else {
+        alert('Geolocation is not supported by this browser.');
+    }
+});
+
+function fetchWeatherData(city) {
+    fetch(`/weather?city=${city}`)
+        .then(response => response.json())
+        .then(data => {
+            if (data.error) {
+                alert(data.error);
+            } else {
+                displayWeatherData(data);
+            }
+        })
+        .catch(error => console.error('Error:', error));
+}
+
+function fetchWeatherDataByLocation(lat, lon) {
+    fetch(`/weatherlocation?lat=${lat}&lon=${lon}`)
+        .then(response => response.json())
+        .then(data => {
+            if (data.error) {
+                alert(data.error);
+            } else {
+                displayWeatherData(data);
+            }
+        })
+        .catch(error => console.error('Error:', error));
+}
+
+function loadMoreForecast() {
+    fetch(`/load_more_forecast`)
+        .then(response => response.json())
+        .then(data => {
+	    if (data.error) {
+                alert(data.error);
+            } else {
+                renderForecast(data, true); // Append new forecast data
+            } 
+    
+        })
+        .catch(error => console.error('Error loading more forecast:', error));
+}
+
+function displayWeatherData(data) {
+    let currentWeather = document.getElementById('current-weather');
+    currentWeather.innerHTML = `
+        <div class="weather-details">
+            <h2>${data.location.name} (${data.current.last_updated})</h2>
+            <p>Temperature: ${data.current.temp_c}°C</p>
+            <p>Wind: ${data.current.wind_kph} KPH</p>
+            <p>Humidity: ${data.current.humidity}%</p>
+        </div>
+        <div class="weather-icon">
+            <img src="${data.current.condition.icon}" alt="${data.current.condition.text}">
+            <p>${data.current.condition.text}</p>
+        </div>
+    `;
+    
+    let forecast = document.getElementById('forecast');
+    forecast.innerHTML = '';
+    
+    let lastFourDays = data.forecast.forecastday.slice(1, 5);
+    lastFourDays.forEach(day => {
+        forecast.innerHTML += `
+            <div class="forecast-day">
+                <h3>${day.date}</h3>
+                <img src="${day.day.condition.icon}" alt="${day.day.condition.text}">
+                <p>Temp: ${day.day.avgtemp_c}°C</p>
+                <p>Wind: ${day.day.maxwind_kph} KPH</p>
+                <p>Humidity: ${day.day.avghumidity}%</p>
+            </div>
+        `;
+    });
+
+    if (forecast.innerHTML != '') {
+        document.getElementById('load-more-btn').style.display = 'block';
+    }
+}
+
+
+function renderForecast(data, append = false) {
+    const forecastContainer = document.getElementById('forecast');
+    if (!append) {
+        forecastContainer.innerHTML = '';
+    }
+    let forecast  = data.forecast.forecastday.slice(-4);
+
+    let rows = Math.ceil(forecast.length / 4);
+    for (let i = 0; i < rows; i++) {
+        const row = document.createElement('div');
+        row.className = 'forecast-row';
+        row.style.display = 'flex';
+        row.style.justifyContent = 'space-between';
+        for (let j = 0; j < 4; j++) {
+            let dayIndex = i * 4 + j;
+            if (dayIndex < forecast.length) {
+                const day = forecast[dayIndex];
+                const forecastElement = document.createElement('div');
+                forecastElement.className = 'forecast-day';
+                forecastElement.innerHTML = `
+                    <h3>${day.date}</h3>
+                    <img src="${day.day.condition.icon}" alt="${day.day.condition.text}">
+                    <p>Temp: ${day.day.avgtemp_c}°C</p>
+                    <p>Wind: ${day.day.maxwind_kph} KPH</p>
+                    <p>Humidity: ${day.day.avghumidity}%</p>
+                `;
+                row.appendChild(forecastElement);
+            }
+        }
+        forecastContainer.appendChild(row);
+    }
+}
+
+
+document.getElementById('subscribe-form').addEventListener('submit', function(event) {
+    event.preventDefault();
+    let email = document.getElementById('email-input').value;
+    fetch('/subscribe', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+               },
+        body: JSON.stringify({ email: email })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.error) {
+            alert(data.error);
+        } else {
+            alert(data.message);
+        }
+    })
+    .catch(error => console.error('Error:', error));
 });