Add templates/hourly_forecast.html
This commit is contained in:
221
templates/hourly_forecast.html
Normal file
221
templates/hourly_forecast.html
Normal file
@ -0,0 +1,221 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="pl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Prognoza godzinowa - {{ city }}</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@2.0.1/dist/chartjs-plugin-zoom.min.js"></script>
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
background-color: #eef2f3;
|
||||
color: #222;
|
||||
padding: 30px;
|
||||
transition: background 0.3s, color 0.3s;
|
||||
}
|
||||
body.dark {
|
||||
background-color: #121212;
|
||||
color: #f0f0f0;
|
||||
}
|
||||
h1 {
|
||||
color: #2a2a72;
|
||||
text-align: center;
|
||||
}
|
||||
.dark h1 {
|
||||
color: #90caf9;
|
||||
}
|
||||
.controls {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.controls input, .controls button {
|
||||
margin: 0 5px;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
.error {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
table {
|
||||
margin: 20px auto;
|
||||
border-collapse: collapse;
|
||||
width: 95%;
|
||||
}
|
||||
th, td {
|
||||
border: 1px solid #aaa;
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
th {
|
||||
background-color: #2a6ebb;
|
||||
color: #fff;
|
||||
}
|
||||
.dark table {
|
||||
background-color: #1e1e1e;
|
||||
color: #ddd;
|
||||
}
|
||||
.dark th {
|
||||
background-color: #37474f;
|
||||
}
|
||||
canvas {
|
||||
display: block;
|
||||
margin: 40px auto;
|
||||
max-width: 95%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Prognoza godzinowa dla {{ city }}</h1>
|
||||
|
||||
<div class="controls">
|
||||
<label>Od godziny: <input type="time" id="startHour"></label>
|
||||
<label>Do godziny: <input type="time" id="endHour"></label>
|
||||
<button onclick="filterByHour()">Filtruj</button>
|
||||
<button onclick="toggleDarkMode()">🌜 Przełącz tryb nocny</button>
|
||||
</div>
|
||||
|
||||
{% if error %}
|
||||
<p class="error">{{ error }}</p>
|
||||
{% elif hourly_forecast %}
|
||||
<table id="hourlyTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Godzina</th><th>Temp. (°C)</th><th>Wiatr (km/h)</th><th>Opady (mm)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for i in range(hourly_forecast["time"]|length) %}
|
||||
<tr>
|
||||
<td>{{ hourly_forecast["time"][i] }}</td>
|
||||
<td>{{ hourly_forecast["temperature_2m"][i] }}</td>
|
||||
<td>{{ hourly_forecast["windspeed_10m"][i] }}</td>
|
||||
<td>{{ hourly_forecast["precipitation"][i] }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<canvas id="hourlyChart" width="800" height="400"></canvas>
|
||||
|
||||
<script>
|
||||
const originalData = {
|
||||
labels: {{ hourly_forecast["time"]|tojson }},
|
||||
temperature: {{ hourly_forecast["temperature_2m"]|tojson }},
|
||||
wind: {{ hourly_forecast["windspeed_10m"]|tojson }},
|
||||
precipitation: {{ hourly_forecast["precipitation"]|tojson }}
|
||||
};
|
||||
|
||||
const ctx = document.getElementById('hourlyChart').getContext('2d');
|
||||
let chart;
|
||||
|
||||
function renderChart(data) {
|
||||
if (chart) chart.destroy();
|
||||
chart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: data.labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Temperatura (°C)',
|
||||
data: data.temperature,
|
||||
borderColor: 'rgba(255,99,132,1)',
|
||||
backgroundColor: 'rgba(255,99,132,0.2)',
|
||||
tension: 0.3,
|
||||
yAxisID: 'y'
|
||||
},
|
||||
{
|
||||
label: 'Wiatr (km/h)',
|
||||
data: data.wind,
|
||||
borderColor: 'rgba(255,159,64,1)',
|
||||
backgroundColor: 'rgba(255,159,64,0.2)',
|
||||
tension: 0.3,
|
||||
yAxisID: 'y'
|
||||
},
|
||||
{
|
||||
label: 'Opady (mm)',
|
||||
data: data.precipitation,
|
||||
borderColor: 'rgba(75,192,192,1)',
|
||||
backgroundColor: 'rgba(75,192,192,0.2)',
|
||||
fill: true,
|
||||
yAxisID: 'y1',
|
||||
tension: 0.3
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
interaction: {
|
||||
mode: 'index',
|
||||
intersect: false
|
||||
},
|
||||
plugins: {
|
||||
legend: { position: 'top' },
|
||||
title: { display: true, text: 'Prognoza godzinowa' },
|
||||
zoom: {
|
||||
pan: {
|
||||
enabled: true,
|
||||
mode: 'x',
|
||||
},
|
||||
zoom: {
|
||||
wheel: {
|
||||
enabled: true,
|
||||
},
|
||||
pinch: {
|
||||
enabled: true
|
||||
},
|
||||
mode: 'x'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
position: 'left',
|
||||
title: { display: true, text: 'Temperatura / Wiatr' }
|
||||
},
|
||||
y1: {
|
||||
position: 'right',
|
||||
title: { display: true, text: 'Opady (mm)' },
|
||||
grid: { drawOnChartArea: false }
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function filterByHour() {
|
||||
const start = document.getElementById('startHour').value;
|
||||
const end = document.getElementById('endHour').value;
|
||||
if (!start || !end) return;
|
||||
|
||||
const filtered = {
|
||||
labels: [],
|
||||
temperature: [],
|
||||
wind: [],
|
||||
precipitation: []
|
||||
};
|
||||
|
||||
originalData.labels.forEach((time, i) => {
|
||||
const hour = time.slice(11, 16);
|
||||
if (hour >= start && hour <= end) {
|
||||
filtered.labels.push(time);
|
||||
filtered.temperature.push(originalData.temperature[i]);
|
||||
filtered.wind.push(originalData.wind[i]);
|
||||
filtered.precipitation.push(originalData.precipitation[i]);
|
||||
}
|
||||
});
|
||||
|
||||
renderChart(filtered);
|
||||
}
|
||||
|
||||
function toggleDarkMode() {
|
||||
document.body.classList.toggle('dark');
|
||||
renderChart(chart.data);
|
||||
}
|
||||
|
||||
renderChart(originalData);
|
||||
</script>
|
||||
{% endif %}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user