Merge pull request #83 from ipnet-mesh/feat/js-filter-submit

Add auto-submit for filter controls on list pages

src/meshcore_hub/web/app.py

@@ -11,6 +11,7 @@ from fastapi.responses import HTMLResponse, PlainTextResponse, Response
 from fastapi.staticfiles import StaticFiles
 from fastapi.templating import Jinja2Templates
 from starlette.exceptions import HTTPException as StarletteHTTPException
+from uvicorn.middleware.proxy_headers import ProxyHeadersMiddleware
 
 from meshcore_hub import __version__
 from meshcore_hub.common.schemas import RadioConfig
@@ -98,6 +99,10 @@ def create_app(
         redoc_url=None,
     )
 
+    # Trust proxy headers (X-Forwarded-Proto, X-Forwarded-For) for HTTPS detection
+    # This ensures url_for() generates correct HTTPS URLs behind a reverse proxy
+    app.add_middleware(ProxyHeadersMiddleware, trusted_hosts="*")
+
     # Store configuration in app state (use args if provided, else settings)
     app.state.api_url = api_url or settings.api_base_url
     app.state.api_key = api_key or settings.api_key

src/meshcore_hub/web/static/js/utils.js

@@ -70,9 +70,35 @@ function populateRelativeTimeElements() {
     });
 }
 
+/**
+ * Initialize auto-submit behavior for filter forms
+ * Forms with data-auto-submit attribute will auto-submit on:
+ * - Change events on select and checkbox inputs
+ * - Enter key on text inputs
+ */
+function initAutoSubmitForms() {
+    document.querySelectorAll('form[data-auto-submit]').forEach(form => {
+        // Auto-submit on select/checkbox change
+        form.querySelectorAll('select, input[type="checkbox"]').forEach(el => {
+            el.addEventListener('change', () => form.submit());
+        });
+
+        // Submit on Enter key for text inputs
+        form.querySelectorAll('input[type="text"]').forEach(el => {
+            el.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter') {
+                    e.preventDefault();
+                    form.submit();
+                }
+            });
+        });
+    });
+}
+
 // Auto-populate when DOM is ready
 document.addEventListener('DOMContentLoaded', () => {
     populateRelativeTimestamps();
     populateReceiverTooltips();
     populateRelativeTimeElements();
+    initAutoSubmitForms();
 });

src/meshcore_hub/web/templates/advertisements.html

@@ -20,7 +20,7 @@
 <!-- Filters -->
 <div class="card bg-base-100 shadow mb-6">
     <div class="card-body py-4">
-        <form method="GET" action="/advertisements" class="flex gap-4 flex-wrap items-end">
+        <form method="GET" action="/advertisements" class="flex gap-4 flex-wrap items-end" data-auto-submit>
             <div class="form-control">
                 <label class="label py-1">
                     <span class="label-text">Search</span>

src/meshcore_hub/web/templates/messages.html

@@ -20,7 +20,7 @@
 <!-- Filters -->
 <div class="card bg-base-100 shadow mb-6">
     <div class="card-body py-4">
-        <form method="GET" action="/messages" class="flex gap-4 flex-wrap items-end">
+        <form method="GET" action="/messages" class="flex gap-4 flex-wrap items-end" data-auto-submit>
             <div class="form-control">
                 <label class="label py-1">
                     <span class="label-text">Type</span>

src/meshcore_hub/web/templates/nodes.html

@@ -20,7 +20,7 @@
 <!-- Filters -->
 <div class="card bg-base-100 shadow mb-6">
     <div class="card-body py-4">
-        <form method="GET" action="/nodes" class="flex gap-4 flex-wrap items-end">
+        <form method="GET" action="/nodes" class="flex gap-4 flex-wrap items-end" data-auto-submit>
             <div class="form-control">
                 <label class="label py-1">
                     <span class="label-text">Search</span>