Fixes

src/App.tsx

@@ -7,7 +7,7 @@ import { ThemeToggle } from '@components/menu/buttons/ThemeToggle';
 import { Logo } from '@components/menu/Logo';
 import { MobileNav } from '@components/menu/MobileNav';
 import { Navigation } from '@components/menu/Navigation';
-import { connection } from '@core/connection';
+import { connection, setConnection } from '@core/connection';
 import { useRoute } from '@core/router';
 import {
   addChannel,
@@ -20,14 +20,19 @@ import {
   setReady,
   setUser,
 } from '@core/slices/meshtasticSlice';
-import { Protobuf, SettingsManager, Types } from '@meshtastic/meshtasticjs';
+import {
+  IHTTPConnection,
+  Protobuf,
+  SettingsManager,
+  Types,
+} from '@meshtastic/meshtasticjs';
 import { About } from '@pages/About';
 import { Messages } from '@pages/Messages';
 import { Nodes } from '@pages/Nodes/Index';
 import { Settings } from '@pages/settings/Index';
 
 import { NotFound } from './pages/NotFound';
-import { Plugins } from './pages/Plugins/Index.jsx';
+import { Plugins } from './pages/Plugins/Index';
 
 const App = (): JSX.Element => {
   const dispatch = useAppDispatch();
@@ -38,6 +43,7 @@ const App = (): JSX.Element => {
   const hostOverrideEnabled = useAppSelector(
     (state) => state.meshtastic.hostOverrideEnabled,
   );
+
   const hostOverride = useAppSelector((state) => state.meshtastic.hostOverride);
 
   const connectionURL = hostOverrideEnabled
@@ -50,6 +56,7 @@ const App = (): JSX.Element => {
   React.useEffect(() => {
     SettingsManager.debugMode = Protobuf.LogRecord_Level.TRACE;
 
+    setConnection(new IHTTPConnection());
     void connection.connect({
       address: connectionURL,
       tls: false,
@@ -74,8 +81,13 @@ const App = (): JSX.Element => {
       dispatch(setMyNodeInfo(nodeInfo));
     });
 
-    connection.onUserDataPacket.subscribe((user) => {
-      dispatch(setUser(user));
+    connection.onUserPacket.subscribe((user) => {
+      dispatch(
+        setUser({
+          nodeNum: user.packet.from,
+          user: user.data,
+        }),
+      );
     });
 
     connection.onNodeInfoPacket.subscribe((nodeInfoPacket) =>
@@ -117,7 +129,6 @@ const App = (): JSX.Element => {
     return (): void => {
       connection.onDeviceStatus.cancelAll();
       connection.onMyNodeInfo.cancelAll();
-      connection.onUserDataPacket.cancelAll();
       connection.onNodeInfoPacket.cancelAll();
       connection.onAdminPacket.cancelAll();
       connection.onMeshHeartbeat.cancelAll();

src/components/generic/IconButton.tsx

@@ -1,47 +1,23 @@
 import React from 'react';
 
-import { FiCheck } from 'react-icons/fi';
-
 type DefaulButtonProps = JSX.IntrinsicElements['button'];
 
 export interface IconButtonProps extends DefaulButtonProps {
   icon: React.ReactNode;
-  confirmAction?: () => void;
 }
 
 export const IconButton = ({
   icon,
-  confirmAction,
   ...props
 }: IconButtonProps): JSX.Element => {
-  const [hasConfirmed, setHasConfirmed] = React.useState(false);
-
-  const handleConfirm = (): void => {
-    if (confirmAction) {
-      if (hasConfirmed) {
-        void confirmAction();
-      }
-      setHasConfirmed(true);
-      setTimeout(() => {
-        setHasConfirmed(false);
-      }, 3000);
-    }
-  };
   return (
-    <div
-      className="my-auto text-gray-500 dark:text-gray-400"
-      onClick={handleConfirm}
-    >
+    <div className="my-auto text-gray-500 dark:text-gray-400">
       <button
         type="button"
-        className={`p-2 rounded-md active:scale-95 ${
-          hasConfirmed
-            ? 'bg-red-500'
-            : 'hover:bg-gray-200 dark:hover:bg-gray-600'
-        }`}
+        className="p-2 rounded-md active:scale-95 hover:bg-gray-200 dark:hover:bg-gray-600"
         {...props}
       >
-        {hasConfirmed ? <FiCheck /> : icon}
+        {icon}
         <span className="sr-only">Refresh</span>
       </button>
     </div>

src/core/connection.ts

@@ -4,6 +4,10 @@ import {
   ISerialConnection,
 } from '@meshtastic/meshtasticjs';
 
-export const connection = new IHTTPConnection();
-export const bleConnection = new IBLEConnection();
-export const serialConnection = new ISerialConnection();
+type connectionType = IBLEConnection | IHTTPConnection | ISerialConnection;
+
+export let connection: connectionType = new IHTTPConnection();
+
+export const setConnection = (conn: connectionType): void => {
+  connection = conn;
+};

src/core/slices/meshtasticSlice.ts

@@ -10,6 +10,11 @@ export interface MessageWithAck {
   isSender: boolean;
   received: Date;
 }
+enum connType {
+  HTTP,
+  BLE,
+  SERIAL,
+}
 
 interface MeshtasticState {
   deviceStatus: Types.DeviceStatusEnum;
@@ -24,6 +29,7 @@ interface MeshtasticState {
   messages: MessageWithAck[];
   hostOverrideEnabled: boolean;
   hostOverride: string;
+  connectionType: connType;
 }
 
 const initialState: MeshtasticState = {
@@ -40,6 +46,7 @@ const initialState: MeshtasticState = {
   hostOverrideEnabled:
     localStorage.getItem('hostOverrideEnabled') === 'true' ?? false,
   hostOverride: localStorage.getItem('hostOverride') ?? '',
+  connectionType: parseInt(localStorage.getItem('connectionType') ?? '0'),
 };
 
 export const meshtasticSlice = createSlice({
@@ -58,8 +65,21 @@ export const meshtasticSlice = createSlice({
     setMyNodeInfo: (state, action: PayloadAction<Protobuf.MyNodeInfo>) => {
       state.myNodeInfo = action.payload;
     },
-    setUser: (state, action: PayloadAction<Protobuf.User>) => {
-      state.user = action.payload;
+    setUser: (
+      state,
+      action: PayloadAction<{
+        nodeNum: number;
+        user: Protobuf.User;
+      }>,
+    ) => {
+      if (action.payload.nodeNum === state.myNodeInfo.myNodeNum) {
+        state.user = action.payload.user;
+      } else {
+        const num = state.nodes.findIndex(
+          (node) => node.num === action.payload.nodeNum,
+        );
+        state.nodes[num].user = action.payload.user;
+      }
     },
     addPositionPacket: (state, action: PayloadAction<Types.PositionPacket>) => {
       state.positionPackets.push(action.payload);
@@ -75,7 +95,6 @@ export const meshtasticSlice = createSlice({
         state.nodes.push(action.payload);
       }
     },
-
     addChannel: (state, action: PayloadAction<Protobuf.Channel>) => {
       if (
         state.channels.findIndex(
@@ -121,6 +140,13 @@ export const meshtasticSlice = createSlice({
         connection.disconnect();
       }
     },
+    setConnectionType: (state, action: PayloadAction<connType>) => {
+      state.connectionType = action.payload;
+      localStorage.setItem('connectionType', String(action.payload));
+      if (state.connectionType !== action.payload) {
+        connection.disconnect();
+      }
+    },
   },
 });
 

src/pages/Plugins/Files.tsx

@@ -118,14 +118,14 @@ export const Files = ({ navOpen, setNavOpen }: RangeTestProps): JSX.Element => {
                   </div>
                   <IconButton
                     className="mx-2 my-auto"
-                    confirmAction={async (): Promise<void> => {
-                      await fetch(
-                        `http://${connectionURL}/json/spiffs/delete/static?remove=${file.name}`,
-                        {
-                          method: 'DELETE',
-                        },
-                      );
-                    }}
+                    // confirmAction={async (): Promise<void> => {
+                    //   await fetch(
+                    //     `http://${connectionURL}/json/spiffs/delete/static?remove=${file.name}`,
+                    //     {
+                    //       method: 'DELETE',
+                    //     },
+                    //   );
+                    // }}
                     icon={<FiTrash className="w-5 h-5" />}
                   />
                 </div>

src/pages/Plugins/Index.tsx

@@ -34,7 +34,6 @@ export const Plugins = (): JSX.Element => {
               <div className="md:hidden">
                 <IconButton
                   icon={<FiXCircle className="w-5 h-5" />}
-                  circle
                   onClick={(): void => {
                     setNavOpen(false);
                   }}

src/pages/settings/Connection.tsx

@@ -2,39 +2,125 @@ import React from 'react';
 
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { FiLink2, FiMenu, FiSave } from 'react-icons/fi';
+import { FiCheck, FiMenu, FiSave } from 'react-icons/fi';
 
 import { Card } from '@app/components/generic/Card';
+import { EnumSelect } from '@app/components/generic/form/EnumSelect';
 import { Input } from '@app/components/generic/form/Input';
-import { IconButton } from '@app/components/generic/IconButton.jsx';
-import { Tabs } from '@app/components/generic/Tabs';
+import { IconButton } from '@app/components/generic/IconButton';
 import { Toggle } from '@app/components/generic/Toggle';
-import { bleConnection, serialConnection } from '@app/core/connection';
-import { useAppSelector } from '@app/hooks/redux';
+import { connection, setConnection } from '@app/core/connection';
+import { useAppDispatch, useAppSelector } from '@app/hooks/redux';
 import { Button } from '@components/generic/Button';
 import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
-import type { Protobuf } from '@meshtastic/meshtasticjs';
+import {
+  IBLEConnection,
+  IHTTPConnection,
+  ISerialConnection,
+} from '@meshtastic/meshtasticjs';
+import type {
+  BLEConnectionParameters,
+  HTTPConnectionParameters,
+  SerialConnectionParameters,
+} from '@meshtastic/meshtasticjs/dist/types';
 
 export interface ConnectionProps {
   navOpen: boolean;
   setNavOpen: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
+enum connType {
+  HTTP,
+  BLE,
+  SERIAL,
+}
+
 export const Connection = ({
   navOpen,
   setNavOpen,
 }: ConnectionProps): JSX.Element => {
+  const dispatch = useAppDispatch();
+  const [selectedConnType, setSelectedConnType] = React.useState(connType.HTTP);
+  const [bleDevices, setBleDevices] = React.useState<BluetoothDevice[]>([]);
+  const [serialDevices, setSerialDevices] = React.useState<SerialPort[]>([]);
+  const [httpIpSource, setHttpIpSource] = React.useState<'local' | 'remote'>(
+    'local',
+  );
   const { t } = useTranslation();
-  const user = useAppSelector((state) => state.meshtastic.user);
+  const hostOverrideEnabled = useAppSelector(
+    (state) => state.meshtastic.hostOverrideEnabled,
+  );
+  const hostOverride = useAppSelector((state) => state.meshtastic.hostOverride);
 
-  const { register, handleSubmit, formState } = useForm<Protobuf.User>({
-    defaultValues: user,
+  const { register, handleSubmit, formState } = useForm<{
+    method: connType;
+  }>({
+    defaultValues: {
+      method: connType.HTTP,
+    },
   });
 
+  const connect = (
+    connectionType: connType,
+    params:
+      | HTTPConnectionParameters
+      | SerialConnectionParameters
+      | BLEConnectionParameters,
+  ): void => {
+    connection.complete();
+    connection.disconnect();
+
+    if (connectionType === connType.BLE) {
+      setConnection(new IBLEConnection());
+    } else if (connectionType === connType.HTTP) {
+      setConnection(new IHTTPConnection());
+    } else {
+      setConnection(new ISerialConnection());
+    }
+
+    console.log(params);
+
+    // @ts-ignore
+    connection.connect(params);
+
+    console.log(connection);
+  };
+
+  const updateBleDeviceList = async (): Promise<void> => {
+    const devices = await ble.getDevices();
+    setBleDevices(devices);
+  };
+
+  const updateSerialDeviceList = async (): Promise<void> => {
+    const devices = await serial.getPorts();
+    console.log(devices);
+
+    setSerialDevices(devices);
+  };
+
+  React.useEffect(() => {
+    if (selectedConnType === connType.BLE) {
+      updateBleDeviceList();
+    }
+    if (selectedConnType === connType.SERIAL) {
+      updateSerialDeviceList();
+    }
+  }, [selectedConnType]);
+
   const onSubmit = handleSubmit((data) => {
     // void connection.setOwner(data);
   });
 
+  const connectionURL: string = hostOverrideEnabled
+    ? hostOverride
+    : import.meta.env.NODE_ENV === 'production'
+    ? window.location.hostname
+    : (import.meta.env.SNOWPACK_PUBLIC_DEVICE_IP as string) ??
+      'http://meshtastic.local';
+
+  const ble = new IBLEConnection();
+  const serial = new ISerialConnection();
+
   return (
     <PrimaryTemplate
       title="Connection"
@@ -64,73 +150,127 @@ export const Connection = ({
         description="Device name and user parameters"
       >
         <div className="w-full max-w-3xl p-10 md:max-w-xl">
-          <div className="flex w-full p-2 mb-2 border dark:border-gray-600 rounded-3xl">
-            Current connection method:
-            <div className="px-1 my-auto ml-2 text-sm bg-gray-400 rounded-full dark:bg-primaryDark">
-              BLE
-            </div>
-          </div>
           <form className="space-y-2" onSubmit={onSubmit}>
-            <Tabs
-              className="mb-10 h-60"
-              tabs={[
-                {
-                  name: 'HTTP',
-                  body: (
-                    <div className="space-y-2">
-                      <Input label={'Device URL'} />
-                      <Toggle label="Use TLS?" />
-                    </div>
-                  ),
-                },
-                {
-                  name: 'Bluetooth',
-                  body: (
-                    <div className="space-y-2">
-                      Devices:
-                      <Button
-                        onClick={async (): Promise<void> => {
-                          console.log(await bleConnection.getDevices());
-                        }}
-                      >
-                        Get Devices
-                      </Button>
-                      <div className="flex justify-between p-2 border rounded-3xl dark:border-600">
-                        Device Name
-                        <FiLink2 className="w-5 h-5 my-auto mr-2 text-gray-300" />
-                      </div>
-                      <div className="flex justify-between p-2 border rounded-3xl dark:border-600">
-                        Device Name
-                        <FiLink2 className="w-5 h-5 my-auto mr-2 text-gray-600" />
-                      </div>
-                    </div>
-                  ),
-                },
-                {
-                  name: 'Serial',
-                  body: (
-                    <div className="space-y-2">
-                      Devices:
-                      <Button
-                        onClick={async (): Promise<void> => {
-                          console.log(await serialConnection.getPorts());
-                        }}
-                      >
-                        Get Devices
-                      </Button>
-                      <div className="flex justify-between p-2 border rounded-3xl dark:border-600">
-                        Device Name
-                        <FiLink2 className="w-5 h-5 my-auto mr-2 text-gray-300" />
-                      </div>
-                      <div className="flex justify-between p-2 border rounded-3xl dark:border-600">
-                        Device Name
-                        <FiLink2 className="w-5 h-5 my-auto mr-2 text-gray-600" />
-                      </div>
-                    </div>
-                  ),
-                },
-              ]}
+            <EnumSelect
+              label="Method"
+              optionsEnum={connType}
+              value={selectedConnType}
+              onChange={(e): void => {
+                setSelectedConnType(parseInt(e.target.value));
+              }}
             />
+            {selectedConnType === connType.HTTP && (
+              <>
+                <EnumSelect
+                  label="Host Source"
+                  options={[
+                    {
+                      name: 'Local',
+                      value: 'local',
+                    },
+                    {
+                      name: 'Remote',
+                      value: 'remote',
+                    },
+                  ]}
+                  value={httpIpSource}
+                  onChange={(e): void => {
+                    setHttpIpSource(e.target.value as 'local' | 'remote');
+                  }}
+                />
+                {httpIpSource === 'local' ? (
+                  <Input label="Host" value={connectionURL} disabled />
+                ) : (
+                  <Input label="Host" />
+                )}
+                <Toggle label="Use TLS?" />
+              </>
+            )}
+            {selectedConnType === connType.BLE && (
+              <div>
+                <div className="flex space-x-2">
+                  <Button border onClick={updateBleDeviceList}>
+                    Refresh List
+                  </Button>
+                  <Button
+                    border
+                    onClick={() => {
+                      ble.getDevice();
+                    }}
+                  >
+                    New Device
+                  </Button>
+                </div>
+                <div className="space-y-2">
+                  <div>Previously connected devices</div>
+                  {bleDevices.map((device) => (
+                    <div
+                      onClick={() => {
+                        console.log('clicked');
+
+                        connect(connType.BLE, {
+                          device: device,
+                        });
+                      }}
+                      className="flex justify-between p-2 bg-gray-700 rounded-md"
+                      key={device.id}
+                    >
+                      <div className="my-auto">{device.name}</div>
+                      <IconButton
+                        onClick={() => {
+                          console.log('clicked');
+
+                          connect(connType.BLE, {
+                            device: device,
+                          });
+                        }}
+                        icon={<FiCheck />}
+                      />
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+            {selectedConnType === connType.SERIAL && (
+              <div>
+                <div className="flex space-x-2">
+                  <Button border onClick={updateBleDeviceList}>
+                    Refresh List
+                  </Button>
+                  <Button
+                    border
+                    onClick={() => {
+                      serial.getPort();
+                    }}
+                  >
+                    New Device
+                  </Button>
+                </div>
+                <div className="space-y-2">
+                  <div>Previously connected devices</div>
+                  {serialDevices.map((device) => (
+                    <div
+                      className="flex justify-between p-2 bg-gray-700 rounded-md"
+                      key={device.getInfo().usbProductId}
+                    >
+                      <div className="my-auto">
+                        {device.getInfo().usbProductId}
+                        {device.getInfo().usbVendorId}
+                      </div>
+                      <IconButton
+                        onClick={() => {
+                          connect(connType.SERIAL, {
+                            // @ts-ignore
+                            device: device,
+                          });
+                        }}
+                        icon={<FiCheck />}
+                      />
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
           </form>
         </div>
       </Card>