From 26c388d2d2ee84926c7bff2104d58bbd64695ee4 Mon Sep 17 00:00:00 2001
From: "K. Shankari" <shankari@eecs.berkeley.edu>
Date: Mon, 1 Apr 2024 15:52:36 -0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=8B=20Prep=20for=20saving=20new=20BLE?=
 =?UTF-8?q?=20Bluetooth=20objects?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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:
https://github.com/e-mission/e-mission-docs/issues/1062#issuecomment-2027849093
---
 www/js/bluetooth/BluetoothCard.tsx     | 28 +++++++++++++++++---------
 www/js/bluetooth/BluetoothScanPage.tsx | 22 +++++++++++---------
 2 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/www/js/bluetooth/BluetoothCard.tsx b/www/js/bluetooth/BluetoothCard.tsx
index e212121a2..561bf9045 100644
--- a/www/js/bluetooth/BluetoothCard.tsx
+++ b/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>
   );
diff --git a/www/js/bluetooth/BluetoothScanPage.tsx b/www/js/bluetooth/BluetoothScanPage.tsx
index bb96943c7..6e2387ad3 100644
--- a/www/js/bluetooth/BluetoothScanPage.tsx
+++ b/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>