Add peers page

2022-10-07 15:33:22 +10:30
parent a884fe28b3
commit d23fe966aa
6 changed files with 227 additions and 116 deletions
@@ -0,0 +1,101 @@
+import type React from "react";
+
+import { base16 } from "rfc4648";
+
+import { IconButton } from "@app/components/IconButton.js";
+import { Mono } from "@app/components/Mono.js";
+import { useDevice } from "@core/providers/useDevice.js";
+import { Hashicon } from "@emeraldpay/hashicon-react";
+import { EllipsisHorizontalIcon } from "@heroicons/react/24/outline";
+import { Protobuf } from "@meshtastic/meshtasticjs";
+
+export const PeersPage = (): JSX.Element => {
+  const { hardware, nodes } = useDevice();
+
+  return (
+    <div className="w-full overflow-y-auto">
+      <div className="overflow-hidden ring-1 ring-black ring-opacity-5">
+        <table className="min-w-full divide-y divide-gray-300">
+          <thead className="bg-gray-50">
+            <tr>
+              <th
+                scope="col"
+                className="py-3.5 pr-3 pl-6 text-left text-sm font-semibold text-gray-900"
+              >
+                Name
+              </th>
+              <th
+                scope="col"
+                className="py-3.5 text-left text-sm font-semibold text-gray-900"
+              >
+                Model
+              </th>
+              <th
+                scope="col"
+                className="py-3.5 text-left text-sm font-semibold text-gray-900"
+              >
+                MAC Address
+              </th>
+              <th
+                scope="col"
+                className="py-3.5 text-left text-sm font-semibold text-gray-900"
+              >
+                Last Heard
+              </th>
+              <th
+                scope="col"
+                className="py-3.5 text-left text-sm font-semibold text-gray-900"
+              >
+                SNR
+              </th>
+              <th scope="col" className="relative py-3.5 pl-3 pr-4 sm:pr-6">
+                <span className="sr-only">Edit</span>
+              </th>
+            </tr>
+          </thead>
+          <tbody className="bg-white">
+            {nodes.map((node, index) => (
+              <tr
+                key={index}
+                className={index % 2 === 0 ? undefined : "bg-gray-50"}
+              >
+                <td className="flex gap-2 whitespace-nowrap py-2 pr-3 pl-6 text-sm font-medium text-gray-900">
+                  <Hashicon size={24} value={node.data.num.toString()} />
+                  <span className="my-auto">{node.data.user?.longName}</span>
+                </td>
+                <td className="whitespace-nowrap py-2 text-sm text-gray-500">
+                  <span className="rounded-md bg-slate-200 p-1">
+                    <Mono>
+                      {Protobuf.HardwareModel[node.data.user?.hwModel ?? 0]}
+                    </Mono>
+                  </span>
+                </td>
+                <td className="whitespace-nowrap py-2 text-sm text-gray-500">
+                  <Mono>
+                    {base16
+                      .stringify(node.data.user?.macaddr ?? [])
+                      .match(/.{1,2}/g)
+                      ?.join(":") ?? ""}
+                  </Mono>
+                </td>
+                <td className="whitespace-nowrap py-2 text-sm text-gray-500">
+                  {new Date(node.data.lastHeard).toLocaleTimeString()}
+                </td>
+                <td className="whitespace-nowrap py-2 text-sm text-gray-500">
+                  <Mono>{node.data.snr}db</Mono>
+                </td>
+                <td className="relative whitespace-nowrap pl-3 pr-4 text-right text-sm font-medium">
+                  <IconButton
+                    size="sm"
+                    variant="secondary"
+                    icon={<EllipsisHorizontalIcon className="h-4" />}
+                  />
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};