From 2e46971896553a04bcb07ee7d4c8eb67e6bf45e1 Mon Sep 17 00:00:00 2001
From: Jason Michalski <armooo@armooo.new>
Date: Thu, 9 May 2024 22:44:02 -0700
Subject: [PATCH] Add a UI for the portnum filter.

There was some code to filter by portnum around in the node search so
put a quick UI on it. It currently breaks if you click the TX/RX and
Uplinked buttons.
---
 meshview/templates/base.html        |  3 ++
 meshview/templates/datalist.html    |  2 +-
 meshview/templates/search_form.html | 57 ++++++++++++++++++++---------
 meshview/web.py                     |  1 +
 4 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/meshview/templates/base.html b/meshview/templates/base.html
index 3116d95..ad75c83 100644
--- a/meshview/templates/base.html
+++ b/meshview/templates/base.html
@@ -16,6 +16,9 @@
                 .htmx-request .htmx-indicator{
                     opacity:1
                 }
+                #search_form {
+                    z-index: 4000;
+                }
                 {% block css %}
                 {% endblock %}
         </style>
diff --git a/meshview/templates/datalist.html b/meshview/templates/datalist.html
index 61a036b..5c65c4b 100644
--- a/meshview/templates/datalist.html
+++ b/meshview/templates/datalist.html
@@ -2,6 +2,6 @@
     id="node_options"
 >
     {% for option in node_options %}
-    <option value="{{option.id}}">{{option.id}} -- {{option.long_name}} ({{option.short_name}})</option)>
+    <option value="{{option.id}}">{{option.id}} -- {{option.long_name}} ({{option.short_name}})</option>
     {% endfor %}
 </datalist>
diff --git a/meshview/templates/search_form.html b/meshview/templates/search_form.html
index 9ea4fb9..9825952 100644
--- a/meshview/templates/search_form.html
+++ b/meshview/templates/search_form.html
@@ -1,23 +1,44 @@
 <form
-    class="container-fluid p-2 sticky-top mx-auto"
+    class="container p-2 sticky-top mx-auto"
     id="search_form"
-    style="width: 80%;"
     action="/node_search"
 >
-    <input
-        id="q"
-        type="text"
-        name="q"
-        placeholder="Node id"
-        autocomplete="off"
-        size="100"
-        list="node_options"
-        value="{{raw_node_id}}"
-        hx-trigger="input delay:100ms"
-        hx-get="/node_match"
-        hx-target="#node_options"
-    />
-    {% include "datalist.html" %}
-    <input type="submit"/>
-    <input type="reset"/>
+    <div class="row">
+        <input
+            class="col m-2"
+            id="q"
+            type="text"
+            name="q"
+            placeholder="Node id"
+            autocomplete="off"
+            list="node_options"
+            value="{{raw_node_id}}"
+            hx-trigger="input delay:100ms"
+            hx-get="/node_match"
+            hx-target="#node_options"
+        />
+        {% include "datalist.html" %}
+        {% set options = {
+                1: "Text Message",
+                3: "Position",
+                4: "Node Info",
+                67: "Telemetry",
+                71: "Neighbor Info",
+            }
+        %}
+        <select name="portnum" class="col-2 m-2">
+            <option
+                value = ""
+                {% if portnum not in options %}selected{% endif %}
+            >All</option>
+            {% for value, name in options.items() %}
+            <option
+                value="{{value}}"
+                {% if value == portnum %}selected{% endif %}
+            >{{ name }}</option>
+            {% endfor %}
+        </select>
+        <input type="submit" class="col-2 m-2"/>
+        <input type="reset" class="col-2 m-2"/>
+    </div>
 </form>
diff --git a/meshview/web.py b/meshview/web.py
index 3c654c5..e9ac19e 100644
--- a/meshview/web.py
+++ b/meshview/web.py
@@ -170,6 +170,7 @@ async def node_search(request):
             packets=packets,
             packet_event="packet",
             node_options=options,
+            portnum=portnum,
         ),
         content_type="text/html",
     )