Connection method work

2021-11-22 15:56:45 +11:00
parent 074f9a7210
commit 7f93d51089
8 changed files with 102 additions and 136 deletions
@@ -6,6 +6,7 @@ import { Button } from '@components/generic/Button';
 import { Card } from '@components/generic/Card';
 import { Select } from '@components/generic/form/Select';
 import { Modal } from '@components/generic/Modal';
+import { DeviceStatus } from '@components/menu/buttons/DeviceStatus';
 import {
  cleanupListeners,
  connection,
@@ -18,6 +19,7 @@ import {
  setConnectionParams,
  setConnType,
 } from '@core/slices/appSlice';
+import { resetState } from '@core/slices/meshtasticSlice';
 import { Types } from '@meshtastic/meshtasticjs';

 import { BLE } from './connection/BLE';
@@ -61,32 +63,28 @@ export const Connection = (): JSX.Element => {
    >
      <Card>
        <div className="w-full max-w-3xl p-10">
-          <div className="flex justify-between w-full bg-gray-100 rounded-md">
+          <div className="flex justify-between w-full border rounded-md">
            <div className="p-2">
-              <h1>
-                {`Connected to: ${
-                  state.nodes.find(
-                    (node) => node.number === state.radio.hardware.myNodeNum,
-                  )?.user?.longName ?? 'Unknown'
-                }`}
-              </h1>
-              <p>{`Via: ${connType[appState.connType]}`}</p>
+              <DeviceStatus />
            </div>
            <div className="p-2 my-auto">
              {state.deviceStatus ===
              Types.DeviceStatusEnum.DEVICE_DISCONNECTED ? (
                <Button
+                  padding={2}
                  border
                  onClick={async (): Promise<void> => {
-                    await setConnection();
+                    await setConnection(appState.connType);
                  }}
                >
                  Connect
                </Button>
              ) : (
                <Button
+                  padding={2}
                  border
                  onClick={async (): Promise<void> => {
+                    dispatch(resetState());
                    await connection.disconnect();
                    cleanupListeners();
                  }}
@@ -96,19 +94,24 @@ export const Connection = (): JSX.Element => {
              )}
            </div>
          </div>
-          <form className="space-y-2">
-            <Select
-              label="Method"
-              optionsEnum={connType}
-              value={appState.connType}
-              onChange={(e): void => {
-                dispatch(setConnType(e.target.value as unknown as connType));
-              }}
-            />
-            {appState.connType === connType.HTTP && <HTTP />}
-            {appState.connType === connType.BLE && <BLE />}
-            {appState.connType === connType.SERIAL && <Serial />}
-          </form>
+          {state.deviceStatus ===
+            Types.DeviceStatusEnum.DEVICE_DISCONNECTED && (
+            <form className="space-y-2">
+              <Select
+                label="Method"
+                optionsEnum={connType}
+                value={appState.connType}
+                onChange={(e): void => {
+                  console.log(e.target.value);
+
+                  dispatch(setConnType(parseInt(e.target.value)));
+                }}
+              />
+              {appState.connType === connType.HTTP && <HTTP />}
+              {appState.connType === connType.BLE && <BLE />}
+              {appState.connType === connType.SERIAL && <Serial />}
+            </form>
+          )}
        </div>
      </Card>
    </Modal>
@@ -3,7 +3,6 @@ import React from 'react';
 import { FiCheck } from 'react-icons/fi';

 import { connType } from '@app/core/slices/appSlice';
-import { Button } from '@components/generic/Button';
 import { IconButton } from '@components/generic/IconButton';
 import { ble, setConnection } from '@core/connection';

@@ -20,45 +19,24 @@ export const BLE = (): JSX.Element => {
  }, [updateBleDeviceList]);

  return (
-    <div>
-      <div className="flex space-x-2">
-        <Button type="button" border onClick={updateBleDeviceList}>
-          Refresh List
-        </Button>
-        <Button
-          type="button"
-          border
+    <div className="space-y-2">
+      {bleDevices.map((device, index) => (
+        <div
          onClick={async (): Promise<void> => {
-            await ble.getDevice();
+            await setConnection(connType.BLE);
          }}
+          className="flex justify-between p-2 bg-gray-700 rounded-md"
+          key={index}
        >
-          New Device
-        </Button>
-      </div>
-      <div className="space-y-2">
-        <div>Previously connected devices</div>
-        {bleDevices.map((device, index) => (
-          <div
+          <div className="my-auto">{device.name}</div>
+          <IconButton
            onClick={async (): Promise<void> => {
-              await setConnection(connType.BLE, {
-                device: device,
-              });
+              await setConnection(connType.BLE);
            }}
-            className="flex justify-between p-2 bg-gray-700 rounded-md"
-            key={index}
-          >
-            <div className="my-auto">{device.name}</div>
-            <IconButton
-              onClick={async (): Promise<void> => {
-                await setConnection(connType.BLE, {
-                  device: device,
-                });
-              }}
-              icon={<FiCheck />}
-            />
-          </div>
-        ))}
-      </div>
+            icon={<FiCheck />}
+          />
+        </div>
+      ))}
    </div>
  );
 };
@@ -1,14 +1,15 @@
 import React from 'react';

 import { FiCheck } from 'react-icons/fi';
-import JSONPretty from 'react-json-pretty';

-import { Button } from '@components/generic/Button';
+import { useAppDispatch } from '@app/hooks/redux';
 import { IconButton } from '@components/generic/IconButton';
 import { serial, setConnection } from '@core/connection';
 import { connType } from '@core/slices/appSlice';

 export const Serial = (): JSX.Element => {
+  const dispatch = useAppDispatch();
+
  const [serialDevices, setSerialDevices] = React.useState<SerialPort[]>([]);

  const updateSerialDeviceList = React.useCallback(async (): Promise<void> => {
@@ -21,45 +22,29 @@ export const Serial = (): JSX.Element => {
  }, [updateSerialDeviceList]);

  return (
-    <div>
-      <div className="flex space-x-2">
-        <Button type="button" border onClick={updateSerialDeviceList}>
-          Refresh List
-        </Button>
-        <Button
-          type="button"
-          border
-          onClick={async (): Promise<void> => {
-            console.log(await serial.getPort());
-          }}
+    <div className="space-y-2">
+      {serialDevices.map((device, index) => (
+        <div
+          className="flex justify-between p-2 bg-gray-700 rounded-md"
+          key={index}
        >
-          New Device
-        </Button>
-      </div>
-      <div className="space-y-2">
-        <div>Previously connected devices</div>
-        {serialDevices.map((device, index) => (
-          <div
-            className="flex justify-between p-2 bg-gray-700 rounded-md"
-            key={index}
-          >
-            <div className="my-auto">
-              {device.getInfo().usbProductId}
-              {device.getInfo().usbVendorId}
-            </div>
-            <IconButton
-              onClick={async (): Promise<void> => {
-                await setConnection(connType.SERIAL, {
-                  // @ts-ignore tmp
-                  device: device,
-                });
-              }}
-              icon={<FiCheck />}
-            />
-            <JSONPretty data={device.getInfo()} />
+          <div className="flex gap-4 my-auto">
+            <p>
+              Vendor: <small>{device.getInfo().usbVendorId}</small>
+            </p>
+            <p>
+              Device: <small>{device.getInfo().usbProductId}</small>
+            </p>
          </div>
-        ))}
-      </div>
+          <IconButton
+            onClick={async (): Promise<void> => {
+              dispatch(setConnType(parseInt(e.target.value)));
+              await setConnection(connType.SERIAL);
+            }}
+            icon={<FiCheck />}
+          />
+        </div>
+      ))}
    </div>
  );
 };
@@ -20,26 +20,24 @@ export const Modal = ({
 }: ModalProps): JSX.Element => {
  const darkMode = useAppSelector((state) => state.app.darkMode);
  return (
-    <>
-      <Dialog
-        as="div"
-        className={`fixed inset-0 z-30 ${darkMode ? 'dark' : ''}`}
-        open={open}
-        onClose={onClose}
-      >
-        <Dialog.Overlay className="fixed w-full h-full backdrop-filter backdrop-blur-sm" />
-        <div className="text-center ">
-          <span
-            className="inline-block h-screen align-middle "
-            aria-hidden="true"
-          >
-            &#8203;
-          </span>
-          <div className={`inline-block align-middle ${className}`} {...props}>
-            {children}
-          </div>
+    <Dialog
+      as="div"
+      className={`fixed inset-0 z-30 ${darkMode ? 'dark' : ''}`}
+      open={open}
+      onClose={onClose}
+    >
+      <Dialog.Overlay className="fixed w-full h-full backdrop-filter backdrop-blur-sm" />
+      <div className="text-center ">
+        <span
+          className="inline-block h-screen align-middle "
+          aria-hidden="true"
+        >
+          &#8203;
+        </span>
+        <div className={`inline-block align-middle ${className}`} {...props}>
+          {children}
        </div>
-      </Dialog>
-    </>
+      </div>
+    </Dialog>
  );
 };
@@ -1,14 +1,15 @@
 import type React from 'react';

-import { FiWifi, FiWifiOff } from 'react-icons/fi';
+import { FiBluetooth, FiCpu, FiWifi } from 'react-icons/fi';

 import { useAppDispatch, useAppSelector } from '@app/hooks/redux';
 import { Button } from '@components/generic/Button';
-import { openConnectionModal } from '@core/slices/appSlice';
+import { connType, openConnectionModal } from '@core/slices/appSlice';
 import { Types } from '@meshtastic/meshtasticjs';

 export const DeviceStatus = (): JSX.Element => {
  const dispatch = useAppDispatch();
+  const appState = useAppSelector((state) => state.app);
  const state = useAppSelector((state) => state.meshtastic);
  const ready = useAppSelector((state) => state.meshtastic.ready);

@@ -41,13 +42,15 @@ export const DeviceStatus = (): JSX.Element => {
        <div className="my-auto">
          {state.nodes.find(
            (node) => node.number === state.radio.hardware.myNodeNum,
-          )?.user?.longName ?? 'Unknown'}
+          )?.user?.longName ?? 'Disconnected'}
        </div>
        <div className="py-2">
-          {ready ? (
-            <FiWifi className="w-5 h-5" />
+          {appState.connType === connType.BLE ? (
+            <FiBluetooth className="w-5 h-5" />
+          ) : appState.connType === connType.SERIAL ? (
+            <FiCpu className="w-5 h-5" />
          ) : (
-            <FiWifiOff className="w-5 h-5 animate-pulse" />
+            <FiWifi className="w-5 h-5" />
          )}
        </div>
      </div>