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

Overhaul (#83)

Browse Source 
* WIP Layout Refactor

* New Connection Dialog

* WIP form overhaul

* Fix remaining config pages
This commit is contained in:
Sacha Weatherstone
2023-02-12 15:31:25 +11:00
committed by GitHub
parent c184c5add6
commit e59fe138f1
121 changed files with 5358 additions and 4701 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/Peers.tsx
+44 -36
View File
@@ -2,49 +2,57 @@ import { base16 } from "rfc4648";
import { Mono } from "@components/generic/Mono.js";
import { Table } from "@components/generic/Table";
import { TimeAgo } from "@components/generic/Table/tmp/TimeAgo.js";
import { useDevice } from "@core/providers/useDevice.js";
import { useDevice } from "@core/stores/deviceStore.js";
import { Hashicon } from "@emeraldpay/hashicon-react";
import { Protobuf } from "@meshtastic/meshtasticjs";
import { Sidebar } from "@app/components/Sidebar.js";
export const PeersPage = (): JSX.Element => {
const { connection, nodes } = useDevice();
return (
<div className="w-full overflow-y-auto">
<Table
headings={[
{ title: "", type: "blank", sortable: false },
{ title: "Name", type: "normal", sortable: true },
{ title: "Model", type: "normal", sortable: true },
{ title: "MAC Address", type: "normal", sortable: true },
{ title: "Last Heard", type: "normal", sortable: true },
{ title: "SNR", type: "normal", sortable: true }
]}
rows={nodes.map((node) => [
<Hashicon size={24} value={node.data.num.toString()} />,
<h1>
{node.data.user?.longName ?? node.data.user?.macaddr
? `Meshtastic_${base16
.stringify(node.data.user?.macaddr.subarray(4, 6) ?? [])
.toLowerCase()}`
: `UNK: ${node.data.num}`}
</h1>,
<>
<Sidebar></Sidebar>
<div className="w-full overflow-y-auto">
<Table
headings={[
{ title: "", type: "blank", sortable: false },
{ title: "Name", type: "normal", sortable: true },
{ title: "Model", type: "normal", sortable: true },
{ title: "MAC Address", type: "normal", sortable: true },
{ title: "Last Heard", type: "normal", sortable: true },
{ title: "SNR", type: "normal", sortable: true }
]}
rows={nodes.map((node) => [
<Hashicon size={24} value={node.data.num.toString()} />,
<h1>
{node.data.user?.longName ?? node.data.user?.macaddr
? `Meshtastic_${base16
.stringify(node.data.user?.macaddr.subarray(4, 6) ?? [])
.toLowerCase()}`
: `UNK: ${node.data.num}`}
</h1>,
<Mono>{Protobuf.HardwareModel[node.data.user?.hwModel ?? 0]}</Mono>,
<Mono>
{base16
.stringify(node.data.user?.macaddr ?? [])
.match(/.{1,2}/g)
?.join(":") ?? "UNK"}
</Mono>,
<TimeAgo timestamp={node.data.lastHeard * 1000} />,
<Mono>
{node.data.snr}db/
{Math.min(Math.max((node.data.snr + 10) * 5, 0), 100)}%/
{(node.data.snr + 10) * 5}raw
</Mono>
])}
/>
</div>
<Mono>{Protobuf.HardwareModel[node.data.user?.hwModel ?? 0]}</Mono>,
<Mono>
{base16
.stringify(node.data.user?.macaddr ?? [])
.match(/.{1,2}/g)
?.join(":") ?? "UNK"}
</Mono>,
node.data.lastHeard === 0 ? (
<p>Never</p>
) : (
<TimeAgo timestamp={node.data.lastHeard * 1000} />
),
<Mono>
{node.data.snr}db/
{Math.min(Math.max((node.data.snr + 10) * 5, 0), 100)}%/
{(node.data.snr + 10) * 5}raw
</Mono>
])}
/>
</div>
</>
);
};