hermes/meshtastic-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make all raw data accordion in node details dialog

Browse Source
This commit is contained in:
Tilen Komel
2025-02-02 12:58:35 +01:00
parent 4abc78fff3
commit 0c8901b5b2
1 changed files with 22 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Dialog/NodeDetailsDialog.tsx
+22 -44
View File
@@ -1,16 +1,21 @@
import { useAppStore } from "@app/core/stores/appStore"; import { useAppStore } from "@app/core/stores/appStore";
import { useDevice } from "@app/core/stores/deviceStore"; import { useDevice } from "@app/core/stores/deviceStore";
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@components/UI/Accordion";
import { import {
Dialog, Dialog,
DialogContent, DialogContent,
DialogFooter, DialogFooter,
DialogHeader, DialogHeader,
DialogTitle, DialogTitle,
} from "@components/UI/Dialog.tsx"; } from "@components/UI/Dialog";
import { Protobuf } from "@meshtastic/js"; import { Protobuf } from "@meshtastic/js";
import { numberToHexUnpadded } from "@noble/curves/abstract/utils"; import { numberToHexUnpadded } from "@noble/curves/abstract/utils";
import { useEffect } from "react"; import { useEffect, useState } from "react";
import { useState } from "react";
import { DeviceImage } from "../generic/DeviceImage"; import { DeviceImage } from "../generic/DeviceImage";
import { TimeAgo } from "../generic/TimeAgo"; import { TimeAgo } from "../generic/TimeAgo";
import { Uptime } from "../generic/Uptime"; import { Uptime } from "../generic/Uptime";
@@ -138,49 +143,22 @@ export const NodeDetailsDialog = ({
</div> </div>
) : null} ) : null}
{device.environmentMetrics ? (
<div className="mt-5 bg-gray-100 dark:bg-slate-800 p-3 rounded-lg mt-3">
<p className="text-lg font-semibold text-slate-900 dark:text-slate-50">
Environment Metrics:
</p>
{device.deviceMetrics.airUtilTx ? (
<p>
Air TX utilization:{" "}
{device.deviceMetrics.airUtilTx.toFixed(2)}%
</p>
) : null}
{device.deviceMetrics.channelUtilization ? (
<p>
Channel utilization:{" "}
{device.deviceMetrics.channelUtilization.toFixed(2)}%
</p>
) : null}
{device.deviceMetrics.batteryLevel ? (
<p>
Battery level:{" "}
{device.deviceMetrics.batteryLevel.toFixed(2)}%
</p>
) : null}
{device.deviceMetrics.voltage ? (
<p>Voltage: {device.deviceMetrics.voltage.toFixed(2)}V</p>
) : null}
{device.deviceMetrics.uptimeSeconds ? (
<p>
Uptime:{" "}
<Uptime seconds={device.deviceMetrics.uptimeSeconds} />
</p>
) : null}
</div>
) : null}
{device ? ( {device ? (
<div className="mt-5 w-full max-w-[464px] bg-gray-100 dark:bg-slate-800 p-3 rounded-lg mt-3"> <div className="mt-5 w-full max-w-[464px] bg-gray-100 dark:bg-slate-800 p-3 rounded-lg mt-3">
<p className="text-lg font-semibold text-slate-900 dark:text-slate-50"> <Accordion className="AccordionRoot" type="single" collapsible>
All Raw Metrics: <AccordionItem className="AccordionItem" value="item-1">
</p> <AccordionTrigger>
<pre className="text-xs w-full"> <p className="text-lg font-semibold text-slate-900 dark:text-slate-50">
{JSON.stringify(device, null, 2)} All Raw Metrics:
</pre> </p>
</AccordionTrigger>
<AccordionContent>
<pre className="text-xs w-full">
{JSON.stringify(device, null, 2)}
</pre>
</AccordionContent>
</AccordionItem>
</Accordion>
</div> </div>
) : null} ) : null}
</div> </div>