You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
86 lines
2.1 KiB
86 lines
2.1 KiB
import { useDevice } from "@core/stores/deviceStore.ts";
|
|
import type { Protobuf } from "@meshtastic/core";
|
|
import { numberToHexUnpadded } from "@noble/curves/abstract/utils";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
export interface TraceRouteProps {
|
|
from?: Protobuf.Mesh.NodeInfo;
|
|
to?: Protobuf.Mesh.NodeInfo;
|
|
route: Array<number>;
|
|
routeBack?: Array<number>;
|
|
snrTowards?: Array<number>;
|
|
snrBack?: Array<number>;
|
|
}
|
|
|
|
interface RoutePathProps {
|
|
title: string;
|
|
startNode?: Protobuf.Mesh.NodeInfo;
|
|
endNode?: Protobuf.Mesh.NodeInfo;
|
|
path: number[];
|
|
snr?: number[];
|
|
}
|
|
|
|
const RoutePath = (
|
|
{ title, startNode, endNode, path, snr }: RoutePathProps,
|
|
) => {
|
|
const { getNode } = useDevice();
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<span
|
|
id={title}
|
|
className="ml-4 border-l-2 pl-2 border-l-slate-900 text-slate-900 dark:text-slate-100 dark:border-l-slate-100"
|
|
>
|
|
<p className="font-semibold">{title}</p>
|
|
<p>{startNode?.user?.longName}</p>
|
|
<p>
|
|
↓ {snr?.[0] ?? t("traceRoute_snrUnknown")}
|
|
{t("common.dbUnit")}
|
|
</p>
|
|
{path.map((hop, i) => (
|
|
<span key={getNode(hop)?.num ?? hop}>
|
|
<p>
|
|
{getNode(hop)?.user?.longName ??
|
|
`${t("traceRoute_nodeUnknownPrefix")}${numberToHexUnpadded(hop)}`}
|
|
</p>
|
|
<p>
|
|
↓ {snr?.[i + 1] ?? t("traceRoute_snrUnknown")}
|
|
{t("common.dbUnit")}
|
|
</p>
|
|
</span>
|
|
))}
|
|
<p>{endNode?.user?.longName}</p>
|
|
</span>
|
|
);
|
|
};
|
|
|
|
export const TraceRoute = ({
|
|
from,
|
|
to,
|
|
route,
|
|
routeBack,
|
|
snrTowards,
|
|
snrBack,
|
|
}: TraceRouteProps) => {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<div className="ml-5 flex">
|
|
<RoutePath
|
|
title={t("traceRoute_routeToDestinationTitle")}
|
|
startNode={to}
|
|
endNode={from}
|
|
path={route}
|
|
snr={snrTowards}
|
|
/>
|
|
{routeBack && routeBack.length > 0 && (
|
|
<RoutePath
|
|
title={t("traceRoute_routeBackTitle")}
|
|
startNode={from}
|
|
endNode={to}
|
|
path={routeBack}
|
|
snr={snrBack}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|