iarv/meshstream
1
0
Fork 1
mirror of https://github.com/dpup/meshstream.git synced 2026-03-28 17:42:37 +01:00
Code Issues Packages Projects Releases Wiki Activity

Demo page for working on components

Browse Source
This commit is contained in:
Daniel Pupius
2025-04-23 09:59:30 -07:00
parent 7c46944fb6
commit 77ea38ae19
13 changed files with 179 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/fixtures/decode_error.json
View File

@@ -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",

4
web/fixtures/map_report.json
View File

@@ -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": [

4
web/fixtures/nodeinfo.json
View File

@@ -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",

4
web/fixtures/position.json
View File

@@ -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,

4
web/fixtures/telemetry.json
View File

@@ -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,

4
web/fixtures/text_message.json
View File

@@ -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,

4
web/fixtures/waypoint.json
View File

@@ -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,

18
web/src/components/Nav.tsx
View File

@@ -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<NavProps> = ({ connectionStatus }) => {
Stream
</Link>
</li>
<li>
<Link
to="/demo"
className="flex items-center px-4 py-2.5 transition-colors "
inactiveProps={{
className: "text-neutral-400 hover:text-neutral-200 font-thin",
}}
activeProps={{
exact: true,
className: "text-neutral-200 font-normal",
}}
>
<Palette className="h-4 w-4 mr-3" />
Component Demo
</Link>
</li>
<li>
<Link
to="/info"

2
web/src/components/PacketList.tsx
View File

@@ -100,7 +100,7 @@ export const PacketList: React.FC = () => {
return (
<div>
<div className="flex justify-between items-end mb-2">
<div className="flex justify-between items-center mb-2">
<div className="text-sm text-neutral-400 px-2">
{packets.length} packets received, since 6:00am
</div>

2
web/src/components/packets/PacketCard.tsx
View File

@@ -19,7 +19,7 @@ export const PacketCard: React.FC<PacketCardProps> = ({
const { data } = packet;
return (
<div className="p-4 effect-inset bg-neutral-500/5 rounded-lg border border-neutral-950/60">
<div className="max-w-4xl p-4 effect-inset bg-neutral-500/5 rounded-lg border border-neutral-950/60">
<div className="flex justify-between items-start mb-3">
<div className="flex items-center">
<div className={`rounded-md ${iconBgColor} p-1.5 mr-3`}>{icon}</div>

29
web/src/routeTree.gen.ts
View File

@@ -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"
},

91
web/src/routes/demo.tsx Normal file
View File

@@ -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 (
<PageWrapper>
<div className="mb-6">
<h2 className="text-lg font-medium mb-2 text-neutral-200">
Packet Card Variations
</h2>
<p className="text-neutral-400 mb-4">
This page shows all the different packet card variations with sample
data.
</p>
</div>
<div className="space-y-8">
<section>
<h3 className="text-md font-medium mb-4 text-neutral-300">
Text Message Packet
</h3>
<TextMessagePacket packet={textMessageData} />
</section>
<section>
<h3 className="text-md font-medium mb-4 text-neutral-300">
Position Packet
</h3>
<PositionPacket packet={positionData} />
</section>
<section>
<h3 className="text-md font-medium mb-4 text-neutral-300">
Node Info Packet
</h3>
<NodeInfoPacket packet={nodeInfoData} />
</section>
<section>
<h3 className="text-md font-medium mb-4 text-neutral-300">
Telemetry Packet
</h3>
<TelemetryPacket packet={telemetryData} />
</section>
<section>
<h3 className="text-md font-medium mb-4 text-neutral-300">
Error Packet
</h3>
<ErrorPacket packet={decodeErrorData} />
</section>
<section>
<h3 className="text-md font-medium mb-4 text-neutral-300">
Generic Packet
</h3>
<GenericPacket
packet={{
...textMessageData,
data: {
...textMessageData.data,
portNum: "WAYPOINT_APP",
textMessage: undefined,
waypoint: {
id: 12345,
latitudeI: 373066340,
longitudeI: -1220381680,
name: "Trailhead",
description: "Mountain trail entrance point",
icon: 128204,
},
},
}}
/>
</section>
</div>
</PageWrapper>
);
}

22
web/src/routes/index.ts
View File

@@ -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;
}