Use Headless UI & get visual message ack's working

2021-05-09 19:23:13 +10:00
parent d6be17a789
commit 50c276b9bc
21 changed files with 831 additions and 9433 deletions
@@ -0,0 +1,56 @@
+import React from 'react';
+
+import { Disclosure } from '@headlessui/react';
+import {
+  ChevronDownIcon,
+  ChevronRightIcon,
+  UsersIcon,
+} from '@heroicons/react/outline';
+import type { Types } from '@meshtastic/meshtasticjs';
+
+import type { languageTemplate } from '../../../App';
+import Node from './Node';
+
+interface NodesProps {
+  isReady: boolean;
+  nodes: Types.NodeInfoPacket[];
+  translations: languageTemplate;
+  myId: number;
+}
+
+const Nodes = (props: NodesProps) => {
+  return (
+    <Disclosure>
+      {({ open }) => (
+        <>
+          <Disclosure.Button className="flex rounded-t-md w-full text-lg font-medium justify-between p-3 border-b hover:bg-gray-200 cursor-pointer">
+            <div className="flex">
+              <UsersIcon className="my-auto mr-2 w-5 h-5" />
+              {props.translations.nodes_title}
+            </div>
+            {open ? (
+              <ChevronDownIcon className="my-auto group-hover:text-gray-700 w-5 h-5" />
+            ) : (
+              <ChevronRightIcon className="my-auto group-hover:text-gray-700 w-5 h-5" />
+            )}
+          </Disclosure.Button>
+          <Disclosure.Panel className="shadow-inner">
+            {props.nodes.length ? (
+              props.nodes.map((node, index) => (
+                <Node key={index} node={node} myId={props.myId} />
+              ))
+            ) : (
+              <div className="flex border-b border-gray-300">
+                <div className="m-auto p-3 text-gray-500">
+                  {props.translations.no_nodes_message}
+                </div>
+              </div>
+            )}
+          </Disclosure.Panel>
+        </>
+      )}
+    </Disclosure>
+  );
+};
+
+export default Nodes;
@@ -0,0 +1,82 @@
+import React from 'react';
+
+import { Disclosure } from '@headlessui/react';
+import {
+  ClockIcon,
+  DesktopComputerIcon,
+  FlagIcon,
+  GlobeIcon,
+  LightningBoltIcon,
+} from '@heroicons/react/outline';
+import type { Types } from '@meshtastic/meshtasticjs';
+
+export interface NodeProps {
+  node: Types.NodeInfoPacket;
+  myId: number;
+}
+
+const Node = (props: NodeProps) => {
+  return (
+    <Disclosure>
+      {({ open }) => (
+        <>
+          <Disclosure.Button className="flex w-full text-lg font-medium justify-between p-3 border-b hover:bg-gray-200 cursor-pointer">
+            <div className="flex">
+              {props.node.data.num === props.myId ? (
+                <FlagIcon className="text-yellow-500 my-auto mr-2 w-5 h-5" />
+              ) : (
+                <DesktopComputerIcon className="my-auto mr-2 w-5 h-5" />
+              )}
+              <div className="m-auto">{props.node.data.user?.longName}</div>
+            </div>
+          </Disclosure.Button>
+          <Disclosure.Panel>
+            <div>
+              <p>
+                SNR:{' '}
+                {props.node.packet?.rxSnr ? props.node.packet.rxSnr : 'Unknown'}
+              </p>
+              <p>
+                RSSI:{' '}
+                {props.node.packet?.rxRssi
+                  ? props.node.packet.rxRssi
+                  : 'Unknown'}
+              </p>
+              <p>
+                {`Last heard: ${
+                  props.node.data?.lastHeard
+                    ? new Date(props.node.data.lastHeard).toLocaleString()
+                    : 'Unknown'
+                }`}{' '}
+                {}
+              </p>
+              <div className="flex">
+                <GlobeIcon className="my-auto mr-2 w-5 h-5" />
+                <p>
+                  {props.node.data.position?.latitudeI},
+                  {props.node.data.position?.longitudeI}
+                </p>
+              </div>
+
+              <div className="flex">
+                <GlobeIcon className="my-auto mr-2 w-5 h-5" />
+                <p>{props.node.data.position?.altitude}</p>
+              </div>
+
+              <div className="flex">
+                <ClockIcon className="my-auto mr-2 w-5 h-5" />
+                <p>{props.node.data.position?.time}</p>
+              </div>
+              <div className="flex">
+                <LightningBoltIcon className="my-auto mr-2 w-5 h-5" />
+                <p>{props.node.data.position?.batteryLevel}</p>
+              </div>
+            </div>
+          </Disclosure.Panel>
+        </>
+      )}
+    </Disclosure>
+  );
+};
+
+export default Node;