Simon/wetterapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

modified: app.py

Browse Source 
modified:   requirements.txt
	modified:   templates/index.html
This commit is contained in:
SimolZimol
2024-09-10 11:49:02 +02:00
parent 9b480d9528
commit 08db5a8a8f
3 changed files with 45 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
app.py
View File

@@ -16,7 +16,6 @@ def download_and_extract(url):
decompressed_content = bz2.decompress(compressed_content) decompressed_content = bz2.decompress(compressed_content)
return decompressed_content return decompressed_content
else: else:
print(f"Fehler beim Abrufen der Datei: {response.status_code}")
return None return None
# Funktion zum Extrahieren der relevanten Wetterdaten # Funktion zum Extrahieren der relevanten Wetterdaten
@@ -50,20 +49,20 @@ def extract_weather_data(messages):
return weather_info return weather_info
# Flask-Route, die die Wetterdaten bereitstellt # API-Route zum Bereitstellen der Wetterdaten
@app.route('/weather') @app.route('/weather')
def weather(): def weather():
data = download_and_extract(url) data = download_and_extract(url)
if data: if data:
weather_data_json = json.loads(data) weather_data = json.loads(data)
weather_data = extract_weather_data(weather_data_json["messages"]) extracted_data = extract_weather_data(weather_data['messages'])
return jsonify(weather_data) return jsonify(extracted_data)
else: else:
return jsonify({"error": "Fehler beim Abrufen der Wetterdaten"}), 500 return jsonify({"error": "Fehler beim Abrufen der Wetterdaten"}), 500
# Route für die Hauptseite # Route für die Website
@app.route('/') @app.route('/')
def home(): def index():
return render_template('index.html') return render_template('index.html')
if __name__ == '__main__': if __name__ == '__main__':

3
requirements.txt
View File

@@ -1,5 +1,2 @@
Flask Flask
requests requests
geojson
lxml
beautifulsoup4

79
templates/index.html
View File

@@ -8,61 +8,60 @@
body { body {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
background-color: #f4f4f4; background-color: #f4f4f4;
margin: 0;
padding: 20px;
text-align: center; text-align: center;
padding: 20px;
}
.weather-card {
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
margin: 10px;
padding: 20px;
display: inline-block;
width: 300px;
} }
h1 { h1 {
color: #333; color: #333;
} }
.weather-container {
max-width: 800px;
margin: 0 auto;
}
.station {
padding: 10px;
border: 1px solid #ddd;
margin-bottom: 10px;
background-color: white;
text-align: left;
}
</style> </style>
</head> </head>
<body> <body>
<h1>Aktuelle Wetterdaten von DWD</h1> <h1>Aktuelle Wetterdaten</h1>
<div id="weather-container"> <div id="weather-container" class="weather-container">
<p>Daten werden geladen...</p> <p>Daten werden geladen...</p>
</div> </div>
<script> <script>
// Funktion zum Abrufen und Anzeigen der Wetterdaten // Funktion zum Abrufen der Wetterdaten von der Flask-API
async function fetchWeatherData() { async function fetchWeatherData() {
try { const response = await fetch('/weather');
const response = await fetch('/weather'); const data = await response.json();
const data = await response.json(); displayWeatherData(data);
const container = document.getElementById('weather-container');
container.innerHTML = ''; // Leere den Container
// Iteriere durch die Wetterdaten und erstelle HTML-Elemente für jede Station
data.forEach(station => {
const stationDiv = document.createElement('div');
stationDiv.className = 'weather-card';
stationDiv.innerHTML = `
<h2>${station.station}</h2>
<p>Temperatur: ${station.temperature.toFixed(2)}°C</p>
<p>Luftdruck: ${station.pressure} hPa</p>
<p>Windgeschwindigkeit: ${station.wind_speed} m/s</p>
<p>Wolkenbedeckung: ${station.cloud_cover}%</p>
`;
container.appendChild(stationDiv);
});
} catch (error) {
console.error('Fehler beim Abrufen der Wetterdaten:', error);
document.getElementById('weather-container').innerHTML = '<p>Fehler beim Abrufen der Daten.</p>';
}
} }
// Daten beim Laden der Seite abrufen // Funktion zum Anzeigen der Wetterdaten
function displayWeatherData(data) {
const container = document.getElementById('weather-container');
container.innerHTML = ''; // Lösche den Lade-Text
data.forEach(station => {
const stationDiv = document.createElement('div');
stationDiv.className = 'station';
stationDiv.innerHTML = `
<h3>${station.station}</h3>
<p>Temperatur: ${station.temperature.toFixed(2)}°C</p>
<p>Luftdruck: ${station.pressure} hPa</p>
<p>Windgeschwindigkeit: ${station.wind_speed} m/s</p>
<p>Wolkenbedeckung: ${station.cloud_cover}%</p>
`;
container.appendChild(stationDiv);
});
}
// Rufe die Wetterdaten ab, wenn die Seite geladen ist
window.onload = fetchWeatherData; window.onload = fetchWeatherData;
</script> </script>
</body> </body>