Upload 8 files

Dockerfile

@@ -0,0 +1,20 @@
+# Use an official Python runtime as a parent image
+FROM python:3.9-slim
+
+# Set the working directory
+WORKDIR /app
+
+# Copy the current directory contents into the container at /app
+COPY . /app
+
+# Install any needed packages specified in requirements.txt
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Make port 7860 available to the world outside this container
+EXPOSE 7860
+
+# Define environment variable
+ENV NAME WeatherDashboard
+
+# Run app.py when the container launches
+CMD ["python", "app.py"]

app.py

@@ -0,0 +1,70 @@
+from flask import Flask, render_template, request, jsonify
+from weather_api import get_weather_data, save_weather_data, get_cached_weather_data
+from flask_mail import Mail, Message
+
+app = Flask(__name__)
+
+app.config['MAIL_SERVER'] = 'smtp.gmail.com'
+app.config['MAIL_PORT'] = 587
+app.config['MAIL_USE_TLS'] = True
+app.config['MAIL_USERNAME'] = '[email protected]'
+app.config['MAIL_PASSWORD'] = 'your_password'
+
+mail = Mail(app)
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/weather', methods=['GET'])
+def weather():
+    city = request.args.get('city')
+    if city:
+        # Check cache first
+        cached_data = get_cached_weather_data(city)
+        if cached_data:
+            return jsonify(cached_data)
+        
+        # If not in cache, fetch from API
+        data = get_weather_data(city = city)
+        if data:
+            save_weather_data(city, data)
+            return jsonify(data)
+        else:
+            return jsonify({'error': 'City not found'}), 404
+    else:
+        return jsonify({'error': 'No city provided'}), 400
+
+@app.route('/weatherlocation', methods=['GET'])
+def weatherlocation():
+    lat = request.args.get('lat')
+    lon = request.args.get('lon')
+    if lat and lon:
+        # Check cache first
+        cached_data = get_cached_weather_data(lat+lon)
+        if cached_data:
+            return jsonify(cached_data)
+        
+        # If not in cache, fetch from API
+        data = get_weather_data(lat = lat, lon = lon)
+        if data:
+            save_weather_data(lat+lon, data)
+            return jsonify(data)
+        else:
+            return jsonify({'error': 'City not found'}), 404
+    else:
+        return jsonify({'error': 'No city provided'}), 400
+
+@app.route('/subscribe', methods=['POST'])
+def subscribe():
+    email = request.json.get('email')
+    if email:
+        msg = Message('Weather Subscription', sender='[email protected]', recipients=[email])
+        msg.body = 'Thank you for subscribing to daily weather updates!'
+        mail.send(msg)
+        return jsonify({'message': 'Subscription successful, please check your email to confirm.'})
+    else:
+        return jsonify({'error': 'No email provided'}), 400
+
+if __name__ == '__main__':
+    app.run(debug=True, host='0.0.0.0', port=7860)

docker-compose.yml

@@ -0,0 +1,14 @@
+version: '3'
+
+services:
+  web:
+    build: .
+    ports:
+      - "7860:7860"
+    environment:
+      - FLASK_ENV=development
+      - MAIL_SERVER=smtp.example.com
+      - MAIL_PORT=587
+      - MAIL_USE_TLS=true
+      - [email protected]
+      - MAIL_PASSWORD=your_password

requirements.txt

@@ -0,0 +1,5 @@
+Flask
+requests
+Flask-Mail
+beautifulsoup4
+Werkzeug

static/css/style.css

@@ -0,0 +1,125 @@
+html, body {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    font-family: Arial, sans-serif;
+    background-color: #e0f7fa;
+    color: #333;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+header {
+    text-align: center;
+    background-color: #42a5f5;
+    color: white;
+    padding: 10px;
+    border-radius: 5px;
+}
+
+main {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding: 20px;
+    overflow-y: auto;
+}
+
+.content {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+}
+
+.search-section, .subscribe-section {
+    text-align: center;
+    margin: 20px 0;
+}
+
+.search-section {
+    flex: 0 0 30%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.search-section input, .subscribe-section input {
+    padding: 10px;
+    width: 80%;
+    margin: 5px 0;
+}
+
+.search-section button, .subscribe-section button {
+    padding: 10px 20px;
+    margin: 5px;
+    background-color: #42a5f5;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.search-section button#location-button {
+    background-color: #757575;
+}
+
+.weather-section {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.current-weather, .forecast {
+    background-color: #bbdefb;
+    padding: 20px;
+    margin: 10px 0;
+    border-radius: 5px;
+}
+
+.current-weather {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.current-weather .weather-details {
+    flex: 1;
+}
+
+.current-weather .weather-details p {
+    margin: 5px 0;
+}
+
+.weather-icon {
+    text-align: center;
+    flex: 0 0 400px; 
+}
+
+.weather-icon img {
+    width: 50px;
+    height: 50px;
+}
+
+.forecast {
+    display: flex;
+    justify-content: space-between;
+}
+
+.forecast-day {
+    background-color: #eceff1;
+    padding: 10px;
+    border-radius: 5px;
+    text-align: center;
+    width: 23%;
+}
+
+.forecast-day img {
+    width: 40px;
+    height: 40px;
+}

static/js/script.js

@@ -0,0 +1,96 @@
+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));
+});

templates/index.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Weather Dashboard</title>
+    <link rel="stylesheet" href="/static/css/style.css">
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>Weather Dashboard</h1>
+        </header>
+        <main>
+            <div class="content">
+                <section class="search-section">
+                    <input type="text" id="city-input" placeholder="E.g., New York, London, Tokyo">
+                    <button id="search-button">Search</button>
+                    <p>or</p>
+                    <button id="location-button">Use Current Location</button>
+                </section>
+                <section class="weather-section">
+                    <div class="current-weather" id="current-weather">
+                        <!-- Current weather data will be displayed here -->
+                    </div>
+			<h2>4-Day Forecast</h2>
+                    <div class="forecast" id="forecast">
+                    <!-- <h2>4-Day Forecast</h2> -->
+                        <!-- Forecast data will be displayed here -->
+                    </div>
+                </section>
+            </div>
+            <section class="subscribe-section">
+                <h2>Subscribe to Daily Weather Updates</h2>
+                <form id="subscribe-form">
+                    <input type="email" id="email-input" placeholder="Enter your email">
+                    <button type="submit">Subscribe</button>
+                </form>
+            </section>
+        </main>
+    </div>
+    <script src="/static/js/script.js"></script>
+</body>
+</html>

weather_api.py

@@ -0,0 +1,54 @@
+import requests
+from datetime import datetime, timedelta
+
+
+def is_time_difference_greater_than_one_hour(time1, time2):
+    datetime1 = datetime.strptime(time1, "%Y-%m-%d %H:%M:%S")
+    datetime2 = datetime.strptime(time2, "%Y-%m-%d %H:%M:%S")
+    
+    difference = abs(datetime1 - datetime2)
+    
+    return difference >= timedelta(hours=1)
+
+API_KEY = '0eab9492e3024ce4969105357241507'
+weather_cache = {}
+date_check = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
+
+def get_weather_data(city = "",lat = "",lon = ""):
+    if city !="":
+        url = f'http://api.weatherapi.com/v1/forecast.json?key={API_KEY}&q={city}&days=5'
+        response = requests.get(url)
+        if response.status_code == 200:
+            return response.json()
+        else:
+            return None
+    elif lat != "" and lon != "":
+        url = f'http://api.weatherapi.com/v1/forecast.json?key={API_KEY}&q={lat},{lon}&days=5'
+        response = requests.get(url)
+        if response.status_code == 200:
+            return response.json()
+        else:
+            return None
+    return None
+
+def save_weather_data(city, data):
+    global weather_cache
+    timestamp = datetime.now()
+    weather_cache[city] = {
+        'data': data,
+        'timestamp': timestamp
+    }
+
+def get_cached_weather_data(city):
+    global weather_cache, date_check
+    #Remove all weather_cache when more than 50 caches or There's a one-hour time difference.
+    if len(weather_cache) >= 50 or is_time_difference_greater_than_one_hour(date_check,datetime.now().strftime("%Y-%m-%d %H:%M:%S")):
+        weather_cache = {}
+        date_check = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
+
+    cached_data = weather_cache.get(city)
+    if cached_data:
+        # Check if the cached data is from today
+        if cached_data['timestamp'].date() == datetime.now().date():
+            return cached_data['data']
+    return None