☰♭ Adding a Bluetooth Scanner to dev options

package.cordovabuild.json

@@ -96,7 +96,9 @@
       "cordova-plugin-androidx-adapter": {},
       "phonegap-plugin-barcodescanner": {
         "ANDROID_SUPPORT_V4_VERSION": "27.+"
-      }
+      },
+      "cordova-plugin-bluetooth-classic-serial-port": {},
+      "cordova-custom-config": {}
     }
   },
   "dependencies": {
@@ -132,6 +134,8 @@
     "cordova-plugin-ionic-webview": "5.0.0",
     "cordova-plugin-local-notification-12": "github:e-mission/cordova-plugin-local-notification-12#v0.1.4-fix-android-action",
     "cordova-plugin-x-socialsharing": "6.0.4",
+    "cordova-plugin-bluetooth-classic-serial-port": "git+https://github.com/louisg1337/cordova-plugin-bluetooth-classic-serial-port.git",
+    "cordova-custom-config": "^5.1.1",
     "core-js": "^2.5.7",
     "enketo-core": "^6.1.7",
     "enketo-transformer": "^4.0.0",

setup/autoreload/macos-index.js

@@ -2,6 +2,7 @@
 const os = require('os');
 
 const nameMap = new Map([
+	[23, ['Sonoma', '14.3.1']],
 	[22, ['Ventura', '13']],
 	[21, ['Monterey', '12']],
 	[20, ['Big Sur', '11']],

setup/setup_shared_native.sh

@@ -23,7 +23,7 @@ sed -i -e "s|/usr/bin/env node|/usr/bin/env node --unhandled-rejections=strict|"
 
 npx cordova prepare
 
-EXPECTED_COUNT=23
+EXPECTED_COUNT=25
 INSTALLED_COUNT=`npx cordova plugin list | wc -l`
 echo "Found $INSTALLED_COUNT plugins, expected $EXPECTED_COUNT"
 if [ $INSTALLED_COUNT -lt $EXPECTED_COUNT ];

www/i18n/en.json

@@ -29,6 +29,7 @@
     "user-data": "User data",
     "erase-data": "Erase data",
     "dev-zone": "Developer zone",
+    "bluetooth-scan": "Scan for Bluetooth",
     "refresh": "Refresh",
     "end-trip-sync": "End trip + sync",
     "check-consent": "Check consent",
@@ -230,6 +231,16 @@
   "list-datepicker-close": "Close",
   "list-datepicker-set": "Set",
 
+  "bluetooth": {
+    "scan-debug-title": "Bluetooth Scanner",
+    "scan-for-bluetooth": "Scan for Devices",
+    "is-scanning": "Scanning...",
+    "device-info": {
+      "id": "ID",
+      "name": "Name"
+    }
+  },
+
   "service": {
     "reading-server": "Reading from server...",
     "reading-unprocessed-data": "Reading unprocessed data..."
@@ -409,7 +420,8 @@
     "while-repopulating-entry": "While repopulating timeline entry: ",
     "while-loading-metrics": "While loading metrics: ",
     "while-log-messages": "While getting messages from the log ",
-    "while-max-index": "While getting max index "
+    "while-max-index": "While getting max index ",
+    "while-scanning-bluetooth": "While scanning for Bluetooth Devices: "
   },
   "consent-text": {
     "title": "NREL OPENPATH PRIVACY POLICY/TERMS OF USE",

www/js/bluetooth/BluetoothCard.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Card, List } from 'react-native-paper';
+import { StyleSheet } from 'react-native';
+
+type Props = any;
+const BluetoothCard = ({ deviceName, deviceData }: Props) => {
+  return (
+    <Card style={cardStyles.card}>
+      <Card.Title
+        title={deviceName}
+        titleVariant="titleLarge"
+        subtitle={deviceData}
+        left={() => <List.Icon icon="bluetooth" />}
+      />
+    </Card>
+  );
+};
+
+export const cardStyles = StyleSheet.create({
+  card: {
+    position: 'relative',
+    alignSelf: 'center',
+    marginVertical: 10,
+  },
+  cardContent: {
+    flex: 1,
+    width: '100%',
+  },
+});
+
+export default BluetoothCard;

www/js/bluetooth/BluetoothScanPage.tsx

@@ -0,0 +1,123 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { StyleSheet, Modal, ScrollView, SafeAreaView, View } from 'react-native';
+import gatherBluetoothData from './blueoothScanner';
+import { logWarn, displayError, displayErrorMsg } from '../plugin/logger';
+import BluetoothCard from './BluetoothCard';
+import { Appbar, useTheme, Button } from 'react-native-paper';
+
+/**
+ * The implementation of this scanner page follows the design of
+ * `www/js/survey/enketo/EnketoModal.tsx`!
+ *
+ * Future work may include refractoring these files to be implementations of a
+ * single base "pop-up page" component
+ */
+
+const BluetoothScanPage = ({ ...props }: any) => {
+  const { t } = useTranslation();
+  const [logs, setLogs] = useState<string[]>([]);
+  const [isScanning, setIsScanning] = useState(false);
+  const { colors } = useTheme();
+
+  // Function to run Bluetooth Classic test and update logs
+  const runBluetoothTest = async () => {
+    let permissionFunction;
+    // Depending on user platform, handle requesting the permissions differently
+    if (window['cordova'].platformId == 'android') {
+      permissionFunction = window['cordova'].plugins.BEMDataCollection.bluetoothScanPermissions();
+    } else {
+      permissionFunction = window['bluetoothClassicSerial'].initializeBluetooth();
+    }
+    if (!permissionFunction) {
+      displayErrorMsg('PlatformID Not Found', 'OSError');
+      return;
+    }
+
+    try {
+      const response = await permissionFunction();
+      if (response != 'OK') {
+        displayErrorMsg('Please Enable Bluetooth!', 'Insufficient Permissions');
+        return;
+      }
+      if (window['cordova'].platformId == 'iOS') {
+        displayErrorMsg('Sorry, iOS is not supported!', 'OSError');
+        return;
+      }
+    } catch (e) {
+      displayError(e, 'Insufficient Permissions');
+      return;
+    }
+
+    try {
+      setIsScanning(true);
+      const newLogs = await gatherBluetoothData(t);
+      setLogs(newLogs);
+    } catch (error) {
+      logWarn(error);
+    } finally {
+      setIsScanning(false);
+    }
+  };
+
+  const BluetoothCardList = ({ devices }) => (
+    <div>
+      {devices.map((device) => {
+        if (device) {
+          const deviceID = device.slice(0, 21);
+          const deviceName = device.slice(21);
+          return <BluetoothCard deviceName={deviceName} deviceData={deviceID} />;
+        }
+        return null;
+      })}
+    </div>
+  );
+
+  const BlueScanContent = () => (
+    <div style={{ height: '100%' }}>
+      <Appbar.Header
+        statusBarHeight={0}
+        elevated={true}
+        style={{ height: 46, backgroundColor: colors.surface }}>
+        <Appbar.BackAction
+          onPress={() => {
+            props.onDismiss?.();
+          }}
+        />
+        <Appbar.Content title={t('bluetooth.scan-debug-title')} titleStyle={{ fontSize: 17 }} />
+      </Appbar.Header>
+      <View style={s.btnContainer}>
+        <Button mode="elevated" onPress={runBluetoothTest} textColor={colors.primary} style={s.btn}>
+          {isScanning ? t('bluetooth.is-scanning') : t('bluetooth.scan-for-bluetooth')}
+        </Button>
+      </View>
+      <BluetoothCardList devices={logs} />
+    </div>
+  );
+
+  return (
+    <>
+      <Modal {...props} animationType="slide">
+        <SafeAreaView style={{ flex: 1 }}>
+          <ScrollView style={{ flex: 1 }} contentContainerStyle={{ flex: 1 }}>
+            <BlueScanContent />
+          </ScrollView>
+        </SafeAreaView>
+      </Modal>
+    </>
+  );
+};
+
+const s = StyleSheet.create({
+  btnContainer: {
+    padding: 16,
+    justifyContent: 'center',
+  },
+  btn: {
+    height: 38,
+    fontSize: 11,
+    margin: 4,
+  },
+});
+
+export default BluetoothScanPage;

www/js/bluetooth/blueoothScanner.ts

@@ -0,0 +1,66 @@
+import { logDebug, displayError } from '../plugin/logger';
+
+// Device data, as defined in BluetoothClassicSerial's docs
+type BluetoothClassicDevice = {
+  class: number;
+  id: string;
+  address: string;
+  name: string;
+};
+
+/**
+ * gatherBluetoothData scans for viewable Bluetooth Classic Devices
+ * @param t is the i18next translation function
+ * @returns an array of strings containing device data, formatted ['ID: id Name: name']
+ */
+export default function gatherBluetoothData(t): Promise<string[]> {
+  return new Promise((resolve, reject) => {
+    logDebug('Running bluetooth discovery test!');
+
+    // Device List "I/O"
+    function handleLogs(devices: Array<BluetoothClassicDevice>) {
+      let logs: string[] = [];
+      devices.forEach((device) => {
+        logs.push(
+          `${t('bluetooth.device-info.id')}: ${device.id} ${t('bluetooth.device-info.name')}: ${
+            device.name
+          }`,
+        );
+      });
+      return logs;
+    }
+
+    // Plugin Calls
+    const unpairedDevicesPromise = new Promise((res, rej) => {
+      window['bluetoothClassicSerial'].discoverUnpaired(
+        (devices: Array<BluetoothClassicDevice>) => {
+          res(handleLogs(devices));
+        },
+        (e: Error) => {
+          displayError(e, 'Error');
+          rej(e);
+        },
+      );
+    });
+
+    const pairedDevicesPromise = new Promise((res, rej) => {
+      window['bluetoothClassicSerial'].list(
+        (devices: Array<BluetoothClassicDevice>) => {
+          res(handleLogs(devices));
+        },
+        (e: Error) => {
+          displayError(e, 'Error');
+          rej(e);
+        },
+      );
+    });
+
+    Promise.all([unpairedDevicesPromise, pairedDevicesPromise])
+      .then((logs: Array<any>) => {
+        resolve(logs.flat());
+      })
+      .catch((e) => {
+        reject(e);
+      });
+  });
+}

www/js/control/BluetoothScanSettingRow.tsx

@@ -0,0 +1,23 @@
+import React, { useState } from 'react';
+import SettingRow from './SettingRow';
+import BluetoothScanPage from '../bluetooth/BluetoothScanPage';
+
+const BluetoothScanSettingRow = ({}) => {
+  const [bluePageVisible, setBluePageVisible] = useState<boolean>(false);
+
+  async function openPopover() {
+    setBluePageVisible(true);
+  }
+
+  return (
+    <>
+      <SettingRow
+        textKey="control.bluetooth-scan"
+        iconName="bluetooth-settings"
+        action={openPopover}></SettingRow>
+      <BluetoothScanPage visible={bluePageVisible} onDismiss={() => setBluePageVisible(false)} />
+    </>
+  );
+};
+
+export default BluetoothScanSettingRow;

www/js/control/ProfileSettings.tsx

@@ -6,6 +6,7 @@ import ExpansionSection from './ExpandMenu';
 import SettingRow from './SettingRow';
 import ControlDataTable from './ControlDataTable';
 import DemographicsSettingRow from './DemographicsSettingRow';
+import BluetoothScanSettingRow from './BluetoothScanSettingRow';
 import PopOpCode from './PopOpCode';
 import ReminderTime from './ReminderTime';
 import useAppConfig from '../useAppConfig';
@@ -433,8 +434,8 @@ const ProfileSettings = () => {
           textKey="control.email-log"
           iconName="email"
           action={() => sendEmail('loggerDB')}></SettingRow>
-
         <ExpansionSection sectionTitle="control.dev-zone">
+          <BluetoothScanSettingRow />
           <SettingRow
             textKey="control.refresh"
             iconName="refresh"