Add a location map on the node page.

meshview/store.py

@@ -136,6 +136,13 @@ async def get_packet(packet_id):
         return result.scalar_one_or_none()
 
 
+async def get_position(node_id):
+    async with database.async_session() as session:
+        q = select(Packet).where((Packet.from_node_id == node_id) & (Packet.portnum == PortNum.POSITION_APP)).order_by(Packet.import_time.desc())
+        result = await session.execute(q)
+        return result.scalar()
+
+
 async def get_uplinked_packets(node_id):
     async with database.async_session() as session:
         result = await session.execute(

meshview/templates/base.html

@@ -8,6 +8,9 @@
         <script src="https://unpkg.com/htmx.org@1.9.11/dist/ext/sse.js" crossorigin="anonymous"></script>
         <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
         <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+        {% block head %}
+        {% endblock %}
+
         <style>
                .htmx-indicator{
                     opacity:0;

meshview/templates/node.html

@@ -1,6 +1,18 @@
 {% extends "base.html" %}
 
+{% block head %}
+     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
+     <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
+{% endblock %}
+
+{% block css %}
+    #map{
+        height:90%;
+    }
+{% endblock %}
+
 {% block body %}
+
 {% include "search_form.html" %}
 <div id="node" class="container text-center">
     <div class="container"
@@ -30,6 +42,11 @@
                     {% endif %}
                 </div>
             </div>
+            <div class="col">
+                <div id="map"/>
+            </div>
+
+        </div>
 
         <div class="row">
             <div class="col">
@@ -44,4 +61,17 @@
         </div>
     </div>
 </div>
+
+{% if position and position.raw_payload.latitude_i %}
+<script>
+    var pos = [{{position.raw_payload.latitude_i * 1e-7}}, {{position.raw_payload.longitude_i * 1e-7}}];
+    var map = L.map('map').setView(pos, 13);
+    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        maxZoom: 19,
+        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+    }).addTo(map);
+    var marker = L.marker(pos).addTo(map);
+</script>
+{% endif %}
+
 {% endblock %}

meshview/web.py

@@ -57,6 +57,7 @@ class Packet:
     to_node_id: int
     to_node: models.Node
     data: str
+    raw_payload: object
     payload: str
     pretty_payload: Markup
     import_time: datetime.datetime
@@ -105,6 +106,7 @@ class Packet:
             payload=text_payload,
             pretty_payload=pretty_payload,
             import_time=packet.import_time,
+            raw_payload=payload,
         )
 
 
@@ -151,17 +153,22 @@ async def node_search(request):
         if node_id:
             node_task = tg.create_task(store.get_node(node_id))
             packets_task = tg.create_task(store.get_packets(node_id, portnum=portnum))
+            position_task = tg.create_task(store.get_position(node_id))
         else:
             loop = asyncio.get_running_loop()
             node_task = loop.create_future()
             node_task.set_result(None)
             packets_task = loop.create_future()
             packets_task.set_result(())
+            position_task = loop.create_future()
+            position_task.set_result(None)
+
         node_options_task = tg.create_task(store.get_fuzzy_nodes(raw_node_id))
 
     packets = (Packet.from_model(p) for p in packets_task.result())
     template = env.get_template("node.html")
     options = list(node_options_task.result())
+    position = Packet.from_model(position_task.result()) if position_task.result() else None
 
     return web.Response(
         text=template.render(
@@ -172,6 +179,7 @@ async def node_search(request):
             packet_event="packet",
             node_options=options,
             portnum=portnum,
+            position=position,
         ),
         content_type="text/html",
     )
@@ -197,6 +205,7 @@ async def node_match(request):
 async def packet_list(request):
     node_id = int(request.match_info["node_id"])
     raw_packets = await store.get_packets(node_id)
+    position = await store.get_position(node_id)
     packets = (Packet.from_model(p) for p in raw_packets)
 
     template = env.get_template("node.html")
@@ -208,6 +217,7 @@ async def packet_list(request):
             node=node,
             packets=packets,
             packet_event="packet",
+            position=Packet.from_model(position) if position else None,
         ),
         content_type="text/html",
     )
@@ -218,6 +228,7 @@ async def uplinked_list(request):
     node_id = int(request.match_info["node_id"])
     raw_packets = await store.get_uplinked_packets(node_id)
     packets = (Packet.from_model(p) for p in raw_packets)
+    position = await store.get_position(node_id)
 
     node = await store.get_node(node_id)
     template = env.get_template("node.html")
@@ -229,6 +240,7 @@ async def uplinked_list(request):
             node=node,
             packets=packets,
             packet_event="uplinked",
+            position=Packet.from_model(position) if position else None,
         ),
         content_type="text/html",
     )