📋 Prep for saving new BLE Bluetooth objects

- Move the major and minor boxes to the same row to take up less space
- Split the fake callbacks into enter, exit and range
- generalize `fakeMonitorCallback` to work for both enter and exit
- do not call rangeCallback directly from monitor callback since there
  are now separate buttons
- for the range callback, use the device major and minor values if they
  exist
- for the range callback, reset monitor and range results to avoid
  duplicates

This is the first step for testing the data models defined in:
e-mission/e-mission-docs#1062 (comment)

www/js/bluetooth/BluetoothCard.tsx

@@ -23,7 +23,7 @@ const BluetoothCard = ({ device, isClassic, isScanningBLE }: Props) => {
     bgColor = device.in_range ? `rgba(200,250,200,1)` : `rgba(250,200,200,1)`;
   }
 
-  async function fakeMonitorCallback() {
+  async function fakeMonitorCallback(state: String) {
     // If we don't do this, the results start accumulating in the device object
     // first call, we put a result into the device
     // second call, the device already has a result, so we put another one in...
@@ -33,16 +33,16 @@ const BluetoothCard = ({ device, isClassic, isScanningBLE }: Props) => {
     window['cordova'].plugins.locationManager.getDelegate().didDetermineStateForRegion({
       region: deviceWithoutResult,
       eventType: 'didDetermineStateForRegion',
-      state: 'CLRegionStateInside',
+      state: state,
     });
-    let timer: ReturnType<typeof setTimeout> = setTimeout(fakeRangeCallback, 500);
   }
 
   async function fakeRangeCallback() {
-    // If we don't do this, the results start accumulating in the device object
-    // first call, we put a result into the device
-    // second call, the device already has a result, so we put another one in...
-    const deviceWithMajorMinor = { ...device, major: 1234, minor: 4567 };
+    const deviceWithMajorMinor = { ...device };
+    deviceWithMajorMinor.major = device.major | 1234;
+    deviceWithMajorMinor.minor = device.minor | 4567;
+    deviceWithMajorMinor.monitorResult = undefined;
+    deviceWithMajorMinor.rangeResult = undefined;
     window['cordova'].plugins.locationManager.getDelegate().didRangeBeaconsInRegion({
       region: deviceWithMajorMinor,
       eventType: 'didRangeBeaconsInRegion',
@@ -65,9 +65,17 @@ const BluetoothCard = ({ device, isClassic, isScanningBLE }: Props) => {
         <Text style={{ backgroundColor: colors.secondaryContainer }} variant="bodyMedium">
           {device.rangeResult}
         </Text>
-        <Button mode="elevated" onPress={fakeMonitorCallback}>
-          Fake callback
-        </Button>
+        <Card.Actions>
+          <Button mode="elevated" onPress={() => fakeMonitorCallback('CLRegionStateInside')}>
+            Enter
+          </Button>
+          <Button mode="elevated" onPress={fakeRangeCallback}>
+            Range
+          </Button>
+          <Button mode="elevated" onPress={() => fakeMonitorCallback('CLRegionStateOutside')}>
+            Exit
+          </Button>
+        </Card.Actions>
       </Card.Content>
     </Card>
   );

www/js/bluetooth/BluetoothScanPage.tsx

@@ -317,16 +317,18 @@ const BluetoothScanPage = ({ ...props }: any) => {
             value={newUUID || ''}
             onChangeText={(t) => setNewUUID(t.toUpperCase())}
           />
-          <TextInput
-            label="Major (optional)"
-            value={newMajor || ''}
-            onChangeText={(t) => setNewMajor(t)}
-          />
-          <TextInput
-            label="Minor (optional)"
-            value={newMinor || ''}
-            onChangeText={(t) => setNewMinor(t)}
-          />
+          <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+            <TextInput
+              label="Major (optional)"
+              value={newMajor || ''}
+              onChangeText={(t) => setNewMajor(t)}
+            />
+            <TextInput
+              label="Minor (optional)"
+              value={newMinor || ''}
+              onChangeText={(t) => setNewMinor(t)}
+            />
+          </View>
           <Button disabled={!newUUID} onPress={() => addNewUUID(newUUID, newMajor, newMinor)}>
             Add New Beacon To Scan
           </Button>