From 77ea38ae19d6565ab4ebe5a735e075ed79108106 Mon Sep 17 00:00:00 2001 From: Daniel Pupius Date: Wed, 23 Apr 2025 09:59:30 -0700 Subject: [PATCH] Demo page for working on components --- web/fixtures/decode_error.json | 4 + web/fixtures/map_report.json | 4 + web/fixtures/nodeinfo.json | 4 + web/fixtures/position.json | 4 + web/fixtures/telemetry.json | 4 + web/fixtures/text_message.json | 4 + web/fixtures/waypoint.json | 4 + web/src/components/Nav.tsx | 18 ++++- web/src/components/PacketList.tsx | 2 +- web/src/components/packets/PacketCard.tsx | 2 +- web/src/routeTree.gen.ts | 29 +++++++- web/src/routes/demo.tsx | 91 +++++++++++++++++++++++ web/src/routes/index.ts | 22 ++++-- 13 files changed, 179 insertions(+), 13 deletions(-) create mode 100644 web/src/routes/demo.tsx diff --git a/web/fixtures/decode_error.json b/web/fixtures/decode_error.json index ff62422..d0696ca 100644 --- a/web/fixtures/decode_error.json +++ b/web/fixtures/decode_error.json @@ -15,7 +15,11 @@ "to": 4294967295, "hopLimit": 3, "hopStart": 3, + "wantAck": false, "priority": "DEFAULT", + "viaMqtt": true, + "nextHop": 0, + "relayNode": 0, "portNum": "UNKNOWN", "decodeError": "Failed to decrypt payload: invalid packet format", "binaryData": "SGVsbG8gV29ybGQh", diff --git a/web/fixtures/map_report.json b/web/fixtures/map_report.json index 8b0b4ca..b94040d 100644 --- a/web/fixtures/map_report.json +++ b/web/fixtures/map_report.json @@ -15,7 +15,11 @@ "to": 4294967295, "hopLimit": 3, "hopStart": 3, + "wantAck": false, "priority": "DEFAULT", + "viaMqtt": true, + "nextHop": 0, + "relayNode": 0, "portNum": "MAP_REPORT_APP", "mapReport": { "nodes": [ diff --git a/web/fixtures/nodeinfo.json b/web/fixtures/nodeinfo.json index 99e1807..eee0096 100644 --- a/web/fixtures/nodeinfo.json +++ b/web/fixtures/nodeinfo.json @@ -15,7 +15,11 @@ "to": 4294967295, "hopLimit": 3, "hopStart": 3, + "wantAck": true, "priority": "DEFAULT", + "viaMqtt": true, + "nextHop": 0, + "relayNode": 0, "portNum": "NODEINFO_APP", "nodeInfo": { "id": "!cdef3456", diff --git a/web/fixtures/position.json b/web/fixtures/position.json index 05b313e..70ca7ce 100644 --- a/web/fixtures/position.json +++ b/web/fixtures/position.json @@ -15,7 +15,11 @@ "to": 4294967295, "hopLimit": 3, "hopStart": 3, + "wantAck": false, "priority": "BACKGROUND", + "viaMqtt": true, + "nextHop": 0, + "relayNode": 0, "portNum": "POSITION_APP", "position": { "latitudeI": 373066340, diff --git a/web/fixtures/telemetry.json b/web/fixtures/telemetry.json index 1cb8095..0277223 100644 --- a/web/fixtures/telemetry.json +++ b/web/fixtures/telemetry.json @@ -15,7 +15,11 @@ "to": 4294967295, "hopLimit": 3, "hopStart": 3, + "wantAck": false, "priority": "UNSET", + "viaMqtt": true, + "nextHop": 0, + "relayNode": 0, "portNum": "TELEMETRY_APP", "telemetry": { "time": 1745300043, diff --git a/web/fixtures/text_message.json b/web/fixtures/text_message.json index ee054cd..76e1a0a 100644 --- a/web/fixtures/text_message.json +++ b/web/fixtures/text_message.json @@ -15,7 +15,11 @@ "to": 4294967295, "hopLimit": 3, "hopStart": 3, + "wantAck": false, "priority": "DEFAULT", + "viaMqtt": true, + "nextHop": 0, + "relayNode": 0, "portNum": "TEXT_MESSAGE_APP", "textMessage": "Hello from the Meshtastic network! This is a test message.", "requestId": 0, diff --git a/web/fixtures/waypoint.json b/web/fixtures/waypoint.json index ece48ad..193854b 100644 --- a/web/fixtures/waypoint.json +++ b/web/fixtures/waypoint.json @@ -15,7 +15,11 @@ "to": 4294967295, "hopLimit": 3, "hopStart": 3, + "wantAck": true, "priority": "RELIABLE", + "viaMqtt": true, + "nextHop": 0, + "relayNode": 0, "portNum": "WAYPOINT_APP", "waypoint": { "id": 12345, diff --git a/web/src/components/Nav.tsx b/web/src/components/Nav.tsx index d1d7806..efb012d 100644 --- a/web/src/components/Nav.tsx +++ b/web/src/components/Nav.tsx @@ -3,7 +3,7 @@ import { Link } from "@tanstack/react-router"; import { ConnectionStatus } from "./ConnectionStatus"; import { Separator } from "./Separator"; import { SITE_TITLE } from "../lib/config"; -import { Info, Layers, LayoutDashboard, Radio } from "lucide-react"; +import { Info, Layers, LayoutDashboard, Radio, Palette } from "lucide-react"; interface NavProps { connectionStatus: string; @@ -56,6 +56,22 @@ export const Nav: React.FC = ({ connectionStatus }) => { Stream +
  • + + + Component Demo + +
  • { return (
    -
    +
    {packets.length} packets received, since 6:00am
    diff --git a/web/src/components/packets/PacketCard.tsx b/web/src/components/packets/PacketCard.tsx index 2a34309..b25ca0f 100644 --- a/web/src/components/packets/PacketCard.tsx +++ b/web/src/components/packets/PacketCard.tsx @@ -19,7 +19,7 @@ export const PacketCard: React.FC = ({ const { data } = packet; return ( -
    +
    {icon}
    diff --git a/web/src/routeTree.gen.ts b/web/src/routeTree.gen.ts index 99eeb59..a6a587c 100644 --- a/web/src/routeTree.gen.ts +++ b/web/src/routeTree.gen.ts @@ -14,6 +14,7 @@ import { Route as rootRoute } from './routes/__root' import { Route as RootImport } from './routes/root' import { Route as PacketsImport } from './routes/packets' import { Route as HomeImport } from './routes/home' +import { Route as DemoImport } from './routes/demo' import { Route as IndexImport } from './routes/index' // Create/Update Routes @@ -36,6 +37,12 @@ const HomeRoute = HomeImport.update({ getParentRoute: () => rootRoute, } as any) +const DemoRoute = DemoImport.update({ + id: '/demo', + path: '/demo', + getParentRoute: () => rootRoute, +} as any) + const IndexRoute = IndexImport.update({ id: '/', path: '/', @@ -53,6 +60,13 @@ declare module '@tanstack/react-router' { preLoaderRoute: typeof IndexImport parentRoute: typeof rootRoute } + '/demo': { + id: '/demo' + path: '/demo' + fullPath: '/demo' + preLoaderRoute: typeof DemoImport + parentRoute: typeof rootRoute + } '/home': { id: '/home' path: '/home' @@ -81,6 +95,7 @@ declare module '@tanstack/react-router' { export interface FileRoutesByFullPath { '/': typeof IndexRoute + '/demo': typeof DemoRoute '/home': typeof HomeRoute '/packets': typeof PacketsRoute '/root': typeof RootRoute @@ -88,6 +103,7 @@ export interface FileRoutesByFullPath { export interface FileRoutesByTo { '/': typeof IndexRoute + '/demo': typeof DemoRoute '/home': typeof HomeRoute '/packets': typeof PacketsRoute '/root': typeof RootRoute @@ -96,6 +112,7 @@ export interface FileRoutesByTo { export interface FileRoutesById { __root__: typeof rootRoute '/': typeof IndexRoute + '/demo': typeof DemoRoute '/home': typeof HomeRoute '/packets': typeof PacketsRoute '/root': typeof RootRoute @@ -103,15 +120,16 @@ export interface FileRoutesById { export interface FileRouteTypes { fileRoutesByFullPath: FileRoutesByFullPath - fullPaths: '/' | '/home' | '/packets' | '/root' + fullPaths: '/' | '/demo' | '/home' | '/packets' | '/root' fileRoutesByTo: FileRoutesByTo - to: '/' | '/home' | '/packets' | '/root' - id: '__root__' | '/' | '/home' | '/packets' | '/root' + to: '/' | '/demo' | '/home' | '/packets' | '/root' + id: '__root__' | '/' | '/demo' | '/home' | '/packets' | '/root' fileRoutesById: FileRoutesById } export interface RootRouteChildren { IndexRoute: typeof IndexRoute + DemoRoute: typeof DemoRoute HomeRoute: typeof HomeRoute PacketsRoute: typeof PacketsRoute RootRoute: typeof RootRoute @@ -119,6 +137,7 @@ export interface RootRouteChildren { const rootRouteChildren: RootRouteChildren = { IndexRoute: IndexRoute, + DemoRoute: DemoRoute, HomeRoute: HomeRoute, PacketsRoute: PacketsRoute, RootRoute: RootRoute, @@ -135,6 +154,7 @@ export const routeTree = rootRoute "filePath": "__root.tsx", "children": [ "/", + "/demo", "/home", "/packets", "/root" @@ -143,6 +163,9 @@ export const routeTree = rootRoute "/": { "filePath": "index.ts" }, + "/demo": { + "filePath": "demo.tsx" + }, "/home": { "filePath": "home.tsx" }, diff --git a/web/src/routes/demo.tsx b/web/src/routes/demo.tsx new file mode 100644 index 0000000..c65b492 --- /dev/null +++ b/web/src/routes/demo.tsx @@ -0,0 +1,91 @@ +import { PageWrapper } from "../components/PageWrapper"; +import { TextMessagePacket } from "../components/packets/TextMessagePacket"; +import { PositionPacket } from "../components/packets/PositionPacket"; +import { NodeInfoPacket } from "../components/packets/NodeInfoPacket"; +import { TelemetryPacket } from "../components/packets/TelemetryPacket"; +import { ErrorPacket } from "../components/packets/ErrorPacket"; +import { GenericPacket } from "../components/packets/GenericPacket"; + +// Import sample data +import textMessageData from "../../fixtures/text_message.json"; +import positionData from "../../fixtures/position.json"; +import nodeInfoData from "../../fixtures/nodeinfo.json"; +import telemetryData from "../../fixtures/telemetry.json"; +import decodeErrorData from "../../fixtures/decode_error.json"; + +export function DemoPage() { + return ( + +
    +

    + Packet Card Variations +

    +

    + This page shows all the different packet card variations with sample + data. +

    +
    + +
    +
    +

    + Text Message Packet +

    + +
    + +
    +

    + Position Packet +

    + +
    + +
    +

    + Node Info Packet +

    + +
    + +
    +

    + Telemetry Packet +

    + +
    + +
    +

    + Error Packet +

    + +
    + +
    +

    + Generic Packet +

    + +
    +
    +     + ); +} diff --git a/web/src/routes/index.ts b/web/src/routes/index.ts index d7159b3..0021063 100644 --- a/web/src/routes/index.ts +++ b/web/src/routes/index.ts @@ -1,7 +1,8 @@ -import { Router, Route, RootRoute } from '@tanstack/react-router'; -import Root from './__root'; -import { IndexPage } from './home'; -import { PacketsRoute } from './packets'; +import { Router, Route, RootRoute } from "@tanstack/react-router"; +import Root from "./__root"; +import { IndexPage } from "./home"; +import { PacketsRoute } from "./packets"; +import { DemoPage } from "./demo"; const rootRoute = new RootRoute({ component: Root, @@ -9,24 +10,31 @@ const rootRoute = new RootRoute({ const indexRoute = new Route({ getParentRoute: () => rootRoute, - path: '/', + path: "/", component: IndexPage, }); const packetsRoute = new Route({ getParentRoute: () => rootRoute, - path: '/packets', + path: "/packets", component: PacketsRoute, }); +const demoRoute = new Route({ + getParentRoute: () => rootRoute, + path: "/demo", + component: DemoPage, +}); + export const routeTree = rootRoute.addChildren([ indexRoute, packetsRoute, + demoRoute, ]); export const router = new Router({ routeTree }); -declare module '@tanstack/react-router' { +declare module "@tanstack/react-router" { interface Register { router: typeof router; }