Added Busy dialog

Author: kcq888

src/components/dialogs/busydlg.tsx

@@ -0,0 +1,23 @@
+import XRPBusyImage from '@assets/images/logo_x_rotate_in_place.gif';
+
+type BusyDlgProps = {
+    title: string;
+}
+
+/**
+ * Busy Dialog component
+ * @param title
+ * @returns 
+ */
+function BusyDialog({title}: BusyDlgProps) {
+  return (
+    <div className="flex flex-col gap-4 items-center p-4">
+        <h2 className='text-lg font-bold text-mountain-mist-700 dark:text-mountain-mist-300'>{title}</h2>
+        <div className="flex flex-col items-center border-shark-800 dark:border-shark-500 dark:bg-shark-950 h-48 rounded-md border p-8 md:w-[500px] xl:w-[600px]">
+            <img src={XRPBusyImage} alt="busy" className="self-center h-32 w-auto" />
+        </div>
+    </div>
+  )
+}
+
+export default BusyDialog;

src/components/navbar.tsx

@@ -65,6 +65,7 @@ import { fireGoogleUserTree, getUsernameFromEmail } from '@/utils/google-utils';
 import XRPDriverInstallDlg from './dialogs/driver-installs';
 import powerswitch_standard from '@assets/images/XRP-nonbeta-controller-power.jpg';
 import powerswitch_beta from '@assets/images/XRP_Controller-Power.jpg';
+import BusyDialog from './dialogs/busydlg';
 
 type NavBarProps = {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -233,6 +234,16 @@ function NavBar({ layoutref }: NavBarProps) {
                 }
             });
 
+            AppMgr.getInstance().on(EventType.EVENT_SHOWBLUETOOTH_CONNECTING, () => {
+                setDialogContent(<BusyDialog title={t('connecting-bluetooth')} />);
+                toggleDialog();
+            });
+
+            AppMgr.getInstance().on(EventType.EVENT_HIDE_BLUETOOTH_CONNECTING, () => {
+                toggleDialog();
+                setDialogContent(<div />);
+            });
+
             hasSubscribed = true;
         }
     });
@@ -805,6 +816,7 @@ function NavBar({ layoutref }: NavBarProps) {
                 setRunning(false);
                 setIsStopping(false);
                 broadcastRunningState(false);
+                toggleDialog();
                 AppMgr.getInstance().eventOff(EventType.EVENT_PROGRAM_EXECUTED);
             });
         }
@@ -918,6 +930,8 @@ function NavBar({ layoutref }: NavBarProps) {
         } else {
             setIsStopping(true);
             CommandToXRPMgr.getInstance().stopProgram();
+            setDialogContent(<BusyDialog title={t('stopRunningProgram')} />);
+            toggleDialog();
         }
     }
 

src/connections/bluetoothconnection.ts

@@ -2,6 +2,7 @@ import ConnectionMgr from '@/managers/connectionmgr';
 import { ConnectionType } from '@/utils/types';
 import Connection, { ConnectionState } from '@connections/connection';
 import TableMgr from '@/managers/tablemgr';
+import AppMgr, { EventType } from '@/managers/appmgr';
 
 /**
  * BluetoothConnection class
@@ -350,7 +351,8 @@ export class BluetoothConnection extends Connection {
             })
             .then(async (device) => {
                 this.connLogger.info('Connecting to device...');
-                //TODO: Put up a spinner until connection is fully complete, including reading the directory.
+                // show a dialog that the bluetooth is connecting
+                AppMgr.getInstance().emit(EventType.EVENT_SHOWBLUETOOTH_CONNECTING, 'show-bluetooth-connecting');
                 this.bleDevice = device;
                 if (device.gatt?.connected) {
                     console.log("Reconnecting...");

src/managers/appmgr.ts

@@ -47,7 +47,9 @@ export enum EventType {
     EVENT_ALERT = 'alert', // Alert dialog event
     EVENT_ISRUNNING = 'is-running', // XRP is running user code
     EVENT_LOGIN_STATUS = 'login-status', // Google login status
-    EVENT_PROGRAM_EXECUTED = 'runstop-complete' // Run/Stop command complete
+    EVENT_PROGRAM_EXECUTED = 'runstop-complete', // Run/Stop command complete
+    EVENT_SHOWBLUETOOTH_CONNECTING = 'show-bluetooth-connecting', // Show Bluetooth connecting dialog
+    EVENT_HIDE_BLUETOOTH_CONNECTING = 'hide-bluetooth-connecting', // Hide Bluetooth connecting dialog
 }
 
 type Events = {
@@ -82,6 +84,8 @@ type Events = {
     [EventType.EVENT_ISRUNNING]: string;
     [EventType.EVENT_LOGIN_STATUS]: string;
     [EventType.EVENT_PROGRAM_EXECUTED]: string;
+    [EventType.EVENT_SHOWBLUETOOTH_CONNECTING]: string;
+    [EventType.EVENT_HIDE_BLUETOOTH_CONNECTING]: string;
 };
 
 /**

src/managers/connectionmgr.ts

@@ -75,7 +75,10 @@ export default class ConnectionMgr {
                 // Check for plugins after connection is established
                 await this.pluginMgr.pluginCheck();
 
-                //TODO: if this was a bluetooth connection this is where to take down the spinner.
+                // After successufully connected to the bluetooth, hide the connecting dialog
+                if (connType === ConnectionType.BLUETOOTH) {
+                    AppMgr.getInstance().emit(EventType.EVENT_HIDE_BLUETOOTH_CONNECTING, 'hide-bluetooth-connecting');
+                }
             }
         } else if (state === ConnectionState.Disconnected) {
             this.appMgr.emit(

src/utils/i18n/locales/en/en.json

@@ -23,6 +23,7 @@
     "okButton": "OK",
     "cancelButton": "Cancel",
     "connections": "Connections",
+    "connecting-bluetooth": "Connecting via Bluetooth...",
     "selectConnection": "Please select your desired connection to begin...",
     "usbConnection": "USB Connection",
     "bluetoothConnection": "Bluetooth Connection",
@@ -153,6 +154,7 @@
     "connectXRP": "CONNECT XRP",
     "run": "RUN",
     "stop": "STOP",
+    "stopRunningProgram": "Stop Running Program...",
     "aiChat": {
         "buddyName": "XRPCode Buddy",
         "poweredBy": "Powered by Gemini",

src/utils/i18n/locales/es/es.json

@@ -23,6 +23,7 @@
     "okButton": "Aceptar",
     "cancelButton": "Cancelar",
     "connections": "Conexiones",
+    "connecting-bluetooth": "Conectando vía Bluetooth...",
     "selectConnection": "Por favor seleccione su conexión deseada para comenzar...",
     "usbConnection": "Conexión USB",
     "bluetoothConnection": "Conexión Bluetooth",
@@ -153,6 +154,7 @@
     "connectXRP": "CONECTAR XRP",
     "run": "EJECUTAR",
     "stop": "DETENER",
+    "stopRunningProgram": "Detener Programa en Ejecución...",
     "aiChat": {
         "buddyName": "Compañero de Código XRP",
         "poweredBy": "Impulsado por Gemini",