41 lines
1.5 KiB
HTML
41 lines
1.5 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>Netatmo weather graphs</title>
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='dashboard.css') }}">
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<div><span class="eyebrow">GetNetatmoData v2</span><h1>Weather at home</h1></div>
|
|
<nav aria-label="Graph period">
|
|
<button data-period="day" class="active">1 day</button>
|
|
<button data-period="2weeks">2 weeks</button>
|
|
<button data-period="year">1 year</button>
|
|
</nav>
|
|
</header>
|
|
<main>
|
|
{% for name in rrd_names %}
|
|
<section class="card">
|
|
<h2>{{ name|title }}</h2>
|
|
<img src="{{ url_for('graph', rrd_name=name, period='day') }}" alt="{{ name|title }} measurements" data-name="{{ name }}">
|
|
</section>
|
|
{% endfor %}
|
|
</main>
|
|
<script>
|
|
const graphUrlTemplate = {{ graph_url_template|tojson }};
|
|
const buttons = document.querySelectorAll('button[data-period]');
|
|
buttons.forEach(button => button.addEventListener('click', () => {
|
|
buttons.forEach(item => item.classList.toggle('active', item === button));
|
|
document.querySelectorAll('img[data-name]').forEach(image => {
|
|
const graphUrl = graphUrlTemplate
|
|
.replace('__name__', encodeURIComponent(image.dataset.name))
|
|
.replace('__period__', encodeURIComponent(button.dataset.period));
|
|
image.src = `${graphUrl}?t=${Date.now()}`;
|
|
});
|
|
}));
|
|
</script>
|
|
</body>
|
|
</html>
|