feat: add the foundation files with a working script
This commit is contained in:
80
templates/index.html.j2
Normal file
80
templates/index.html.j2
Normal file
@ -0,0 +1,80 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Home Assistant Sensor Readings</title>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/2.3.1/list.min.js"></script>
|
||||
<style>
|
||||
body { font-family: sans-serif; }
|
||||
table { border-collapse: collapse; width: 100%; }
|
||||
th, td { border: 1px solid #ddd; padding: 8px; }
|
||||
th { background-color: #f2f2f2; }
|
||||
.sort:hover { cursor: pointer; background-color: #e6e6e6; }
|
||||
input { padding: 8px; margin-bottom: 10px; width: 100%; box-sizing: border-box; }
|
||||
.temp-row { background-color: #ffe0b2; } /* Light orange for temperature */
|
||||
.humidity-row { background-color: #b3e5fc; } /* Light blue for humidity */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Last updated: {{ last_updated_time }}</p>
|
||||
|
||||
<h1>Recent Sensor Readings</h1>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Entity ID</th>
|
||||
<th>Friendly Name</th>
|
||||
<th>State</th>
|
||||
<th>Unit</th>
|
||||
<th>Last Updated</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for sensor in recent_data %}
|
||||
<tr class="{% if sensor.attributes.unit_of_measurement == '°C' %}temp-row{% elif sensor.attributes.unit_of_measurement == '%' %}humidity-row{% endif %}">
|
||||
<td>{{ sensor.entity_id }}</td>
|
||||
<td>{{ sensor.attributes.friendly_name }}</td>
|
||||
<td>{{ sensor.state }}</td>
|
||||
<td>{{ sensor.attributes.unit_of_measurement }}</td>
|
||||
<td>{{ sensor.last_updated }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h1>Historical Sensor Readings</h1>
|
||||
<div id="historical-data">
|
||||
<input class="search" placeholder="Search" />
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="sort" data-sort="entity_id">Entity ID</th>
|
||||
<th class="sort" data-sort="friendly_name">Friendly Name</th>
|
||||
<th class="sort" data-sort="state">State</th>
|
||||
<th class="sort" data-sort="unit">Unit</th>
|
||||
<th class="sort" data-sort="timestamp">Timestamp</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="list">
|
||||
{% for reading in historical_data %}
|
||||
<tr class="{% if reading.unit == '°C' %}temp-row{% elif reading.unit == '%' %}humidity-row{% endif %}">
|
||||
<td class="entity_id">{{ reading.entity_id }}</td>
|
||||
<td class="friendly_name">{{ reading.friendly_name }}</td>
|
||||
<td class="state">{{ reading.state }}</td>
|
||||
<td class="unit">{{ reading.unit }}</td>
|
||||
<td class="timestamp">{{ reading.timestamp }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var options = {
|
||||
valueNames: [ 'entity_id', 'friendly_name', 'state', 'unit', 'timestamp' ]
|
||||
};
|
||||
var historicalList = new List('historical-data', options);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user