Initial Commit
This commit is contained in:
@@ -0,0 +1,21 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{% block title %}SwitchBot Temps{% endblock %}</title>
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
|
||||
</head>
|
||||
<body>
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/">SwitchBot Temps</a>
|
||||
<nav class="nav">
|
||||
<a href="/" {% if request.path == "/" %}aria-current="page"{% endif %}>Dashboard</a>
|
||||
<a href="/reports" {% if request.path == "/reports" %}aria-current="page"{% endif %}>Reports</a>
|
||||
</nav>
|
||||
</header>
|
||||
<main class="page">
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,70 @@
|
||||
{% 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) %}
|
||||
<article class="metric-card">
|
||||
<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>
|
||||
<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 %}
|
||||
</article>
|
||||
{% 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 %}
|
||||
@@ -0,0 +1,72 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Reports - SwitchBot Temps{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="hero">
|
||||
<div>
|
||||
<p class="eyebrow">Reports</p>
|
||||
<h1>Build a temperature report</h1>
|
||||
<p class="muted">Choose a date range and export the summary as CSV.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<form class="report-form" method="get" action="/reports">
|
||||
<label>
|
||||
Start
|
||||
<input type="date" name="start" value="{{ start }}">
|
||||
</label>
|
||||
<label>
|
||||
End
|
||||
<input type="date" name="end" value="{{ end }}">
|
||||
</label>
|
||||
<label>
|
||||
Device
|
||||
<select name="device_id">
|
||||
<option value="">All devices</option>
|
||||
{% for device in devices %}
|
||||
<option value="{{ device.id }}" {% if device.id == device_id %}selected{% endif %}>{{ device.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</label>
|
||||
<button class="button" type="submit">Run report</button>
|
||||
<a class="button secondary" href="/reports.csv?start={{ start }}&end={{ end }}&device_id={{ device_id }}">Download CSV</a>
|
||||
</form>
|
||||
|
||||
<section class="panel">
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Device</th>
|
||||
<th>Samples</th>
|
||||
<th>Low temp</th>
|
||||
<th>High temp</th>
|
||||
<th>Avg temp</th>
|
||||
<th>Low RH</th>
|
||||
<th>High RH</th>
|
||||
<th>Avg RH</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for row in rows %}
|
||||
<tr>
|
||||
<td>{{ row.device_name }}</td>
|
||||
<td>{{ row.samples }}</td>
|
||||
<td>{{ row.low_temp if row.low_temp is not none else "n/a" }}°C</td>
|
||||
<td>{{ row.high_temp if row.high_temp is not none else "n/a" }}°C</td>
|
||||
<td>{{ row.avg_temp if row.avg_temp is not none else "n/a" }}°C</td>
|
||||
<td>{{ row.low_humidity if row.low_humidity is not none else "n/a" }}%</td>
|
||||
<td>{{ row.high_humidity if row.high_humidity is not none else "n/a" }}%</td>
|
||||
<td>{{ row.avg_humidity if row.avg_humidity is not none else "n/a" }}%</td>
|
||||
</tr>
|
||||
{% else %}
|
||||
<tr>
|
||||
<td colspan="8" class="empty">No readings found for this range.</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user