Graphs and Dark Mode

This commit is contained in:
madeofstown
2025-01-20 20:23:27 -08:00
parent 4c8a8245ca
commit 0c46891f13
8 changed files with 77 additions and 23 deletions
+1 -1
View File
@@ -1,5 +1,5 @@
<!doctype html>
<html lang="en">
<html lang="en" data-bs-theme="dark">
<head>
<title>MeshView - Bay Area Mesh - http://bayme.sh {% if node and node.short_name %}-- {{node.short_name}}{% endif %}</title>
<meta charset="utf-8">
+2 -2
View File
@@ -5,10 +5,10 @@
min-width:10em;
}
.chat-packet:nth-of-type(odd){
background-color:#CCC;
background-color:#1f1f1f;
}
.chat-packet:nth-of-type(even){
background-color:#EEE;
background-color:#181818;
}
{% endblock %}
+2 -2
View File
@@ -26,14 +26,14 @@
<input type="submit" class="col-2 m-2"/>
</form>
<div class="row">
<div class="col-6" id="packet_list" sse-swap="packet" hx-swap="afterbegin">
<div class="col-xs" id="packet_list" sse-swap="packet" hx-swap="afterbegin">
{% for packet in packets %}
{% include 'packet.html' %}
{% else %}
No packets found.
{% endfor %}
</div>
<div class="col-6 sticky-top" id="packet_details" style="height: 95vh; overflow: scroll">
<!-- <div class="col-6 sticky-top" id="packet_details" style="height: 95vh; overflow: scroll"> -->
</div>
</div>
{% endblock %}
+11 -8
View File
@@ -13,6 +13,9 @@
overflow: scroll;
top: 3em;
}
div.tab-pane > dl {
display: inline-block;
}
{% endblock %}
{% block body %}
@@ -27,7 +30,7 @@
{% endif %}
>
<div class="row">
<div class="col-md mb-3">
<div class="col mb-3">
<div class="card" id="node_info">
{% if node %}
<div class="card-header">
@@ -35,11 +38,11 @@
</div>
<div class="card-body">
<dl >
<dt>short name</dt>
<dt>ShortName</dt>
<dd>{{node.short_name}}</dd>
<dt>hw model</dt>
<dt>HW Model</dt>
<dd>{{node.hw_model}}</dd>
<dt>role</dt>
<dt>Role</dt>
<dd>{{node.role}}</dd>
</dl>
{% include "node_graphs.html" %}
@@ -51,8 +54,8 @@
{% endif %}
</div>
</div>
<div class="col-md mb-3">
<div id="map"/>
<div class="col mb-3">
<div id="map"></div>
</div>
</div>
@@ -63,10 +66,10 @@
</div>
<div class="row">
<div class="col">
{% include 'packet_list.html' %}
<div class="col-6 sticky-top" id="packet_details">
</div>
</div>
<!-- <div class="col sticky-top" id="packet_details"></div> -->
</div>
</div>
+35 -8
View File
@@ -11,7 +11,7 @@
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#neighbors" type="button" role="tab" >Neighbors</button>
</li>
<li>
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#weather" type="button" role="tab" >Weather</button>
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#weather" type="button" role="tab" >Environment</button>
</li>
<li>
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#power" type="button" role="tab" >Power</button>
@@ -20,17 +20,44 @@
<div class="tab-content">
<div class="tab-pane fade show active" id="overview" role="tabpanel">
{{ graph("power") }}
{{ graph("chutil") }}
<dl>
<dt>Power</dt>
<dd>{{ graph("power") }}</dd>
</dl>
<dl>
<dt>ChUtil</dt>
<dd>{{ graph("chutil") }}</dd>
</dl>
</div>
<div class="tab-pane fade" id="neighbors" role="tabpanel">
<a href="/graph/neighbors2/{{node_id}}"><img src="/graph/neighbors/{{node_id}}" height="200em" width="200em"/></a>
<a role="button" class="btn btn-primary mb-3" href="/graph/network?root={{node_id}}&depth=2">Network Graph</a>
<a style="display: block;" href="/graph/neighbors2/{{node_id}}"><img src="/graph/neighbors/{{node_id}}" height="200em" width="200em"/></a>
</div>
<div class="tab-pane fade" id="weather" role="tabpanel">
{{ graph("temperature") }}
{{ graph("humidity") }}
{{ graph("wind_speed") }}
{{ graph("wind_direction") }}
<dl>
<dt>Temperature</dt>
<dd>{{ graph("temperature") }}</dd>
</dl>
<dl>
<dt>Humidity</dt>
<dd>{{ graph("humidity") }}</dd>
</dl>
<dl>
<dt>Pressure</dt>
<dd>{{ graph("pressure") }}</dd>
</dl>
<dl>
<dt>Indoor Air Quality</dt>
<dd>{{ graph("iaq") }}</dd>
</dl>
<dl>
<dt>Wind Speed</dt>
<dd>{{ graph("wind_speed") }}</dd>
</dl>
<dl>
<dt>Wind Direction</dt>
<dd>{{ graph("wind_direction") }}</dd>
</dl>
</div>
<div class="tab-pane fade" id="power" role="tabpanel">
{{ graph("power_metrics") }}
+1 -1
View File
@@ -1,4 +1,4 @@
<div class="col-6" id="packet_list" sse-swap="{{packet_event | default('packet')}}" hx-swap="afterbegin">
<div class="col" id="packet_list" sse-swap="{{packet_event | default('packet')}}" hx-swap="afterbegin">
{% for packet in packets %}
{% include 'packet.html' %}
{% else %}
+25
View File
@@ -654,6 +654,31 @@ async def graph_humidity(request):
],
)
@routes.get("/graph/pressure/{node_id}")
async def graph_pressure(request):
return await graph_telemetry(
int(request.match_info['node_id']),
'environment_metrics',
[
{
'label': 'barometric pressure',
'fields': ['barometric_pressure'],
},
],
)
@routes.get("/graph/iaq/{node_id}")
async def graph_pressure(request):
return await graph_telemetry(
int(request.match_info['node_id']),
'environment_metrics',
[
{
'label': 'IAQ',
'fields': ['iaq'],
},
],
)
@routes.get("/graph/power_metrics/{node_id}")
async def graph_power_metrics(request):
-1
View File
@@ -11,4 +11,3 @@ asyncpg
seaborn
pydot
plotly
graphviz