ppfeiffer/MeshDD-Bot

Fork 0

Paket-Log: Filterung und Suche #6

New issue

Closed

opened 2026-02-20 21:20:12 +01:00 by ppfeiffer · 1 comment

ppfeiffer commented

2026-02-20 21:20:12 +01:00

Owner

Ziel

Die Paket-Liste erhält eine erweiterte Filterzeile (Von, An, Channel, Hops) sowie eine Freitextsuche über alle Spalten. Der bestehende Typ-Filter (Text, Position, Telemetry …) bleibt unverändert erhalten.

UI-Erweiterung

packets.html

Unterhalb des bestehenden Card-Headers eine zweite Filterzeile einfügen:

[ Von: __________ ] [ An: __________ ] [ Ch: [Alle ▾] ] [ Hops: __ ] [ 🔍 Suche __________ ] [ ✕ ]

Von – Texteingabe, matched auf Node-ID oder Name (Kurzname/Langname)
An – Texteingabe, matched auf Node-ID oder Name; Alle (Broadcast) als Sonderfall
Channel – Dropdown, befüllt aus bekannten Channels (analog Nachrichten-Filterbar)
Hops – Zahleingabe (0–9), filtert auf berechneten Hop-Wert (hop_start - hop_limit)
Suche – Freitext über alle sichtbaren Spalten (Von, An, Typ, Channel, Info-Text)
✕-Button – alle Zusatzfilter zurücksetzen

Implementierung

static/js/packets.js

State-Variablen ergänzen:

let filterFrom    = '';
let filterTo      = '';
let filterChannel = '';
let filterHops    = '';
let searchText    = '';

buildRow() erweitern:

data-from – Node-ID des Absenders + aufgelöster Name (für Suche)
data-to – Node-ID des Empfängers + aufgelöster Name
data-channel – Channel-Index als String
data-hops – berechneter Hop-Wert (hop_start - hop_limit) als String
data-search – Volltext aller relevanten Felder für die Freitextsuche

applyFilter() erweitern:
Jede Zeile wird angezeigt wenn ALLE aktiven Filter zutreffen:

typeFilter AND fromFilter AND toFilter AND channelFilter AND hopsFilter AND searchFilter

Event-Listener für alle neuen Inputs mit input-Event → applyFilter()

Channel-Dropdown wird beim channels-WS-Event befüllt (analog zur Nachrichten-Seite)

Reset-Button setzt alle State-Variablen zurück, leert die Inputs, ruft applyFilter() auf

static/packets.html

Filterzeile als <div id="pktAdvFilters"> direkt unter dem Card-Header einfügen
Inputs mit form-control-sm, Dropdown mit form-select-sm

Hinweise zur Implementierung

Von/An-Suche case-insensitiv, matched Teilstrings (Node-ID und Klarnamen)
Broadcast-Pakete (^all / 4294967295) beim An-Filter als alle oder broadcast suchbar
Hops: leeres Feld = kein Filter; Wert 0 filtert auf direkte Pakete
data-search Attribut beim Rendern befüllen, nicht beim Filtern berechnen (Performance)
Beim Pause-Modus: Filter auf ausstehende Rows anwenden sobald Pause aufgehoben wird

Betroffene Dateien

static/packets.html – Filterzeile
static/js/packets.js – State, buildRow, applyFilter, Event-Listener

## Ziel Die Paket-Liste erhält eine erweiterte Filterzeile (Von, An, Channel, Hops) sowie eine Freitextsuche über alle Spalten. Der bestehende Typ-Filter (Text, Position, Telemetry …) bleibt unverändert erhalten. ## UI-Erweiterung ### packets.html Unterhalb des bestehenden Card-Headers eine zweite Filterzeile einfügen: ``` [ Von: __________ ] [ An: __________ ] [ Ch: [Alle ▾] ] [ Hops: __ ] [ 🔍 Suche __________ ] [ ✕ ] ``` - **Von** – Texteingabe, matched auf Node-ID oder Name (Kurzname/Langname) - **An** – Texteingabe, matched auf Node-ID oder Name; `Alle` (Broadcast) als Sonderfall - **Channel** – Dropdown, befüllt aus bekannten Channels (analog Nachrichten-Filterbar) - **Hops** – Zahleingabe (0–9), filtert auf berechneten Hop-Wert (`hop_start - hop_limit`) - **Suche** – Freitext über alle sichtbaren Spalten (Von, An, Typ, Channel, Info-Text) - **✕-Button** – alle Zusatzfilter zurücksetzen ## Implementierung ### static/js/packets.js **State-Variablen ergänzen:** ```js let filterFrom = ''; let filterTo = ''; let filterChannel = ''; let filterHops = ''; let searchText = ''; ``` **`buildRow()` erweitern:** - `data-from` – Node-ID des Absenders + aufgelöster Name (für Suche) - `data-to` – Node-ID des Empfängers + aufgelöster Name - `data-channel` – Channel-Index als String - `data-hops` – berechneter Hop-Wert (`hop_start - hop_limit`) als String - `data-search` – Volltext aller relevanten Felder für die Freitextsuche **`applyFilter()` erweitern:** Jede Zeile wird angezeigt wenn ALLE aktiven Filter zutreffen: ``` typeFilter AND fromFilter AND toFilter AND channelFilter AND hopsFilter AND searchFilter ``` **Event-Listener** für alle neuen Inputs mit `input`-Event → `applyFilter()` **Channel-Dropdown** wird beim `channels`-WS-Event befüllt (analog zur Nachrichten-Seite) **Reset-Button** setzt alle State-Variablen zurück, leert die Inputs, ruft `applyFilter()` auf ### static/packets.html - Filterzeile als `<div id="pktAdvFilters">` direkt unter dem Card-Header einfügen - Inputs mit `form-control-sm`, Dropdown mit `form-select-sm` ## Hinweise zur Implementierung - Von/An-Suche case-insensitiv, matched Teilstrings (Node-ID und Klarnamen) - Broadcast-Pakete (`^all` / `4294967295`) beim An-Filter als `alle` oder `broadcast` suchbar - Hops: leeres Feld = kein Filter; Wert `0` filtert auf direkte Pakete - `data-search` Attribut beim Rendern befüllen, nicht beim Filtern berechnen (Performance) - Beim Pause-Modus: Filter auf ausstehende Rows anwenden sobald Pause aufgehoben wird ## Betroffene Dateien - `static/packets.html` – Filterzeile - `static/js/packets.js` – State, buildRow, applyFilter, Event-Listener

ppfeiffer referenced this issue from a commit

2026-02-20 22:42:05 +01:00

feat(packets): Erweiterte Filterzeile + Freitextsuche (closes #6)

ppfeiffer closed this issue

2026-02-20 22:42:05 +01:00

ppfeiffer commented

2026-02-20 22:42:12 +01:00

Author

Owner

Implementiert in v0.08.25:

Filterzeile (Von, An, Kanal-Dropdown, Hops ≤, Freitext) unterhalb des Typ-Filters
buildRow() befüllt data-from/to/channel/hops/search beim Rendern
rowVisible() prüft alle Filter kombiniert (AND-Logik)
Channel-Dropdown wird beim WS-channels-Event automatisch befüllt
Clear-Button (✕) setzt alle Zusatzfilter zurück

Implementiert in v0.08.25: - Filterzeile (Von, An, Kanal-Dropdown, Hops ≤, Freitext) unterhalb des Typ-Filters - `buildRow()` befüllt `data-from/to/channel/hops/search` beim Rendern - `rowVisible()` prüft alle Filter kombiniert (AND-Logik) - Channel-Dropdown wird beim WS-`channels`-Event automatisch befüllt - Clear-Button (✕) setzt alle Zusatzfilter zurück

No labels

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: ppfeiffer/MeshDD-Bot#6

No description provided.