Fixed #9 - new tile: hourly forecast

src/logic/tile/tiles/HourlyForecastTile.html

+<style>
+    .hourlyForecastTile {
+        background-color: #2F2F2F;
+        flex-direction: row;
+    }
+
+    .hourlyForecastTile .icon {
+        font-size: 10vmin;
+    }
+
+    .hourlyForecastTile .content {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        width: 95%;
+        height: 85%;
+    }
+
+    .hourlyForecastTile .entry {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-between;
+        flex: 1;
+        height: 100%;
+    }
+
+    .hourlyForecastTile .icon {
+        font-size: 4vmin;
+    }
+
+    .hourlyForecastTile .hour {
+        font-size: 1.5vmin;
+    }
+
+    .hourlyForecastTile .temperature {
+        font-size: 2vmin;
+        font-weight: bold;
+    }
+
+    .hourlyForecastTile .rain {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        font-size: 1.5vmin;
+    }
+
+    .hourlyForecastTile .rain i {
+        font-size: 3vmin;
+    }
+
+    .hourlyForecastTile .rainProbability {
+        padding-left: 1vmin;
+    }
+
+    .hourlyForecastTile .windSpeed{
+        font-size: 1.3vmin;
+    }
+</style>
+
+<div class="hourlyForecastTile">
+    <div class="content">
+        {% for item in data %}
+            <div class="entry">
+                <div class="hour">{{ item['hour'] }} Uhr</div>
+                <i class="wi wi-owm-{{ item['icon'] }} icon"></i>
+                <div class="temperature" style="color: {{ item['temperatureColor'] }}">{{ item['temperature'] }}&deg;C</div>
+                <div class="rain">
+                    <i class="wi wi-raindrops"></i>
+                    <div class="rainProbability">{{ item['rainProbability'] }}</div>
+                </div>
+                <div class="windSpeed" style="color: {{ item['windSpeedColor'] }}">{{ item['windSpeed'] }}</div>
+            </div>
+        {% endfor %}
+    </div>
+</div>

src/logic/tile/tiles/HourlyForecastTile.py

+import os
+from datetime import datetime
+from typing import Dict
+
+import pytz
+from flask import Blueprint
+
+from logic import Helpers
+from logic.service.ServiceManager import ServiceManager
+from logic.tile.Tile import Tile
+
+
+class HourlyForecastTile(Tile):
+    EXAMPLE_SETTINGS = {
+        "lat": "51.012825",
+        "lon": "13.666365",
+        "apiKey": "myApiKey",
+        "timeZone": "Europe/Berlin"
+    }
+
+    def __init__(self, uniqueName: str, settings: Dict, intervalInSeconds: int):
+        super().__init__(uniqueName, settings, intervalInSeconds)
+
+    def fetch(self, pageName: str) -> Dict:
+        weatherService = ServiceManager.get_instance().get_service_by_type_name('WeatherService')
+
+        fetchIntervalInSeconds = 60 * 10  # query api less often
+
+        timeZone = pytz.timezone(self._settings['timeZone'])
+
+        # cache key will be determined in service
+        weatherData = weatherService.get_data('', fetchIntervalInSeconds, self._settings)
+
+        hourData = []
+        hourlyForecast = weatherData['hourly']
+        for entry in hourlyForecast[:12]:
+            timestamp = entry['dt']
+            timestamp = datetime.utcfromtimestamp(timestamp)
+            timestamp = timeZone.fromutc(timestamp)
+
+            temperature = 21.3
+            icon = entry['weather'][0]['id']
+            rainProbability = entry['pop'] * 100
+            windSpeed = entry['wind_speed'] * 3.6
+
+            hourData.append({
+                'hour': timestamp.strftime('%H'),
+                'temperature': Helpers.round_to_decimals(temperature, 1),
+                'temperatureColor': Helpers.determine_color_for_temperature(temperature),
+                'icon': icon,
+                'windSpeed': f'{Helpers.round_to_decimals(windSpeed, 1)} km/h',
+                'windSpeedColor': Helpers.determine_color_for_wind(windSpeed),
+                'rainProbability': f'{Helpers.round_to_decimals(rainProbability, 0)} %'
+            })
+
+        return {
+            'hours': hourData
+        }
+
+    def render(self, data: Dict) -> str:
+        return Tile.render_template(os.path.dirname(__file__), __class__.__name__, data=data['hours'])
+
+    def construct_blueprint(self, pageName: str, *args, **kwargs):
+        return Blueprint(f'{pageName}_{__class__.__name__}_{self.get_uniqueName()}', __name__)