73 lines
2.6 KiB
HTML
73 lines
2.6 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Dashboard - SwitchBot Temps{% endblock %}
|
|
|
|
{% block content %}
|
|
<section class="hero">
|
|
<div>
|
|
<p class="eyebrow">Today so far</p>
|
|
<h1>Temperature dashboard</h1>
|
|
<p class="muted">Local timezone: {{ timezone }}. Collector interval: {{ collect_interval_seconds // 60 }} min.</p>
|
|
</div>
|
|
<a class="button" href="/reports">Make report</a>
|
|
</section>
|
|
|
|
{% if devices %}
|
|
<section class="cards">
|
|
{% for device in devices %}
|
|
{% set reading = latest.get(device.id) %}
|
|
{% set stat = stats.get(device.id) %}
|
|
{% set collected_age = latest_relative.get(device.id) %}
|
|
<a class="metric-card metric-link" href="/devices/{{ device.id }}">
|
|
<div class="card-heading">
|
|
<h2>{{ device.name }}</h2>
|
|
<span>{{ device.device_type }}</span>
|
|
</div>
|
|
{% if reading %}
|
|
<div class="reading-row">
|
|
<strong>{{ "%.1f"|format(reading.temperature) if reading.temperature is not none else "n/a" }}°C</strong>
|
|
<span>{{ reading.humidity if reading.humidity is not none else "n/a" }}% RH</span>
|
|
</div>
|
|
<p class="muted">{{ collected_age or "n/a" }}</p>
|
|
<dl class="mini-stats">
|
|
<div>
|
|
<dt>Day low</dt>
|
|
<dd>{{ "%.1f"|format(stat.low) if stat else "n/a" }}°C</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Day high</dt>
|
|
<dd>{{ "%.1f"|format(stat.high) if stat else "n/a" }}°C</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Battery</dt>
|
|
<dd>{{ reading.battery if reading.battery is not none else "n/a" }}%</dd>
|
|
</div>
|
|
</dl>
|
|
{% else %}
|
|
<p class="empty">Waiting for the first reading.</p>
|
|
{% endif %}
|
|
</a>
|
|
{% endfor %}
|
|
</section>
|
|
|
|
<section class="panel">
|
|
<div class="panel-heading">
|
|
<div>
|
|
<h2>Day graph</h2>
|
|
<p class="muted">Temperature readings from midnight to now.</p>
|
|
</div>
|
|
</div>
|
|
<div class="chart-wrap">
|
|
<canvas id="temperatureChart" height="360"></canvas>
|
|
</div>
|
|
<script id="chart-data" type="application/json">{{ chart_json|safe }}</script>
|
|
<script src="{{ url_for('static', filename='chart.js') }}"></script>
|
|
</section>
|
|
{% else %}
|
|
<section class="empty-state">
|
|
<h2>No devices yet</h2>
|
|
<p>Start the collector and it will populate device names from the SwitchBot API automatically.</p>
|
|
</section>
|
|
{% endif %}
|
|
{% endblock %}
|