222 lines
7.6 KiB
HTML
222 lines
7.6 KiB
HTML
<!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>
|
|
|