Add WiFi setup flow for WP sensors
Sensor onboarding screens: - add-sensor.tsx: BLE scanning + device selection - setup-wifi.tsx: WiFi credentials + ESP32 provisioning Flow: 1. Scan for nearby sensors via BLE 2. Select device from list 3. Enter WiFi credentials (SSID + password) 4. Send config over BLE using ESP IDF provisioning protocol 5. Verify connection and activate in backend ESP Provisioning: - services/espProvisioning.ts: ESP32 BLE provisioning implementation - Protocol: custom-data exchange via BLE characteristics - Security: WiFi password encrypted over BLE - Timeout handling: 30s for provisioning, 60s for activation User experience: - Clear step-by-step wizard UI - Loading states for BLE operations - Success/error feedback - Navigation to equipment screen on success
This commit is contained in:
Sergei
parent
86e73f004d
commit
3c3283e424
529
app/(tabs)/beneficiaries/[id]/add-sensor.tsx
Normal file
529
app/(tabs)/beneficiaries/[id]/add-sensor.tsx
Normal file
@ -0,0 +1,529 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
StyleSheet,
|
||||
ScrollView,
|
||||
TouchableOpacity,
|
||||
Alert,
|
||||
ActivityIndicator,
|
||||
} from 'react-native';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import { router, useLocalSearchParams } from 'expo-router';
|
||||
import * as Device from 'expo-device';
|
||||
import { useBLE } from '@/contexts/BLEContext';
|
||||
import { useBeneficiary } from '@/contexts/BeneficiaryContext';
|
||||
import type { WPDevice } from '@/services/ble';
|
||||
import {
|
||||
AppColors,
|
||||
BorderRadius,
|
||||
FontSizes,
|
||||
FontWeights,
|
||||
Spacing,
|
||||
Shadows,
|
||||
} from '@/constants/theme';
|
||||
|
||||
export default function AddSensorScreen() {
|
||||
const { id } = useLocalSearchParams<{ id: string }>();
|
||||
const { currentBeneficiary } = useBeneficiary();
|
||||
const {
|
||||
foundDevices,
|
||||
isScanning,
|
||||
connectedDevices,
|
||||
isBLEAvailable,
|
||||
scanDevices,
|
||||
stopScan,
|
||||
connectDevice,
|
||||
} = useBLE();
|
||||
|
||||
const [selectedDevice, setSelectedDevice] = useState<WPDevice | null>(null);
|
||||
const [isConnecting, setIsConnecting] = useState(false);
|
||||
|
||||
const beneficiaryName = currentBeneficiary?.name || 'this person';
|
||||
|
||||
const handleScan = async () => {
|
||||
try {
|
||||
await scanDevices();
|
||||
} catch (error: any) {
|
||||
console.error('[AddSensor] Scan failed:', error);
|
||||
Alert.alert('Scan Failed', error.message || 'Failed to scan for sensors. Please try again.');
|
||||
}
|
||||
};
|
||||
|
||||
const handleConnect = async (device: WPDevice) => {
|
||||
setIsConnecting(true);
|
||||
setSelectedDevice(device);
|
||||
|
||||
try {
|
||||
const success = await connectDevice(device.id);
|
||||
|
||||
if (success) {
|
||||
// Navigate to Setup WiFi screen
|
||||
router.push({
|
||||
pathname: `/(tabs)/beneficiaries/${id}/setup-wifi` as any,
|
||||
params: {
|
||||
deviceId: device.id,
|
||||
deviceName: device.name,
|
||||
wellId: device.wellId?.toString() || '',
|
||||
},
|
||||
});
|
||||
} else {
|
||||
throw new Error('Connection failed');
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('[AddSensor] Connection failed:', error);
|
||||
Alert.alert(
|
||||
'Connection Failed',
|
||||
`Failed to connect to ${device.name}. Please make sure the sensor is powered on and nearby.`
|
||||
);
|
||||
} finally {
|
||||
setIsConnecting(false);
|
||||
setSelectedDevice(null);
|
||||
}
|
||||
};
|
||||
|
||||
const getSignalIcon = (rssi: number) => {
|
||||
if (rssi >= -50) return 'cellular';
|
||||
if (rssi >= -60) return 'cellular-outline';
|
||||
if (rssi >= -70) return 'cellular';
|
||||
return 'cellular-outline';
|
||||
};
|
||||
|
||||
const getSignalColor = (rssi: number) => {
|
||||
if (rssi >= -50) return AppColors.success;
|
||||
if (rssi >= -60) return AppColors.info;
|
||||
if (rssi >= -70) return AppColors.warning;
|
||||
return AppColors.error;
|
||||
};
|
||||
|
||||
return (
|
||||
<SafeAreaView style={styles.container} edges={['top', 'bottom']}>
|
||||
{/* Header */}
|
||||
<View style={styles.header}>
|
||||
<TouchableOpacity style={styles.backButton} onPress={() => router.back()}>
|
||||
<Ionicons name="arrow-back" size={24} color={AppColors.textPrimary} />
|
||||
</TouchableOpacity>
|
||||
<Text style={styles.headerTitle}>Add Sensor</Text>
|
||||
<View style={styles.placeholder} />
|
||||
</View>
|
||||
|
||||
{/* Simulator Warning */}
|
||||
{!isBLEAvailable && (
|
||||
<View style={styles.simulatorWarning}>
|
||||
<Ionicons name="information-circle" size={18} color={AppColors.warning} />
|
||||
<Text style={styles.simulatorWarningText}>
|
||||
Running in Simulator - showing mock sensors
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
<ScrollView style={styles.content} contentContainerStyle={styles.scrollContent}>
|
||||
{/* Instructions */}
|
||||
<View style={styles.instructionsCard}>
|
||||
<Text style={styles.instructionsTitle}>How to Add a Sensor</Text>
|
||||
<View style={styles.step}>
|
||||
<View style={styles.stepNumber}>
|
||||
<Text style={styles.stepNumberText}>1</Text>
|
||||
</View>
|
||||
<Text style={styles.stepText}>Make sure the WP sensor is powered on and nearby</Text>
|
||||
</View>
|
||||
<View style={styles.step}>
|
||||
<View style={styles.stepNumber}>
|
||||
<Text style={styles.stepNumberText}>2</Text>
|
||||
</View>
|
||||
<Text style={styles.stepText}>Tap "Scan for Sensors" to search for available devices</Text>
|
||||
</View>
|
||||
<View style={styles.step}>
|
||||
<View style={styles.stepNumber}>
|
||||
<Text style={styles.stepNumberText}>3</Text>
|
||||
</View>
|
||||
<Text style={styles.stepText}>Select your sensor from the list to connect</Text>
|
||||
</View>
|
||||
<View style={styles.step}>
|
||||
<View style={styles.stepNumber}>
|
||||
<Text style={styles.stepNumberText}>4</Text>
|
||||
</View>
|
||||
<Text style={styles.stepText}>Configure WiFi settings to complete setup</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Scan Button */}
|
||||
{!isScanning && foundDevices.length === 0 && (
|
||||
<TouchableOpacity style={styles.scanButton} onPress={handleScan}>
|
||||
<Ionicons name="scan" size={24} color={AppColors.white} />
|
||||
<Text style={styles.scanButtonText}>Scan for Sensors</Text>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
|
||||
{/* Scanning Indicator */}
|
||||
{isScanning && (
|
||||
<View style={styles.scanningCard}>
|
||||
<ActivityIndicator size="large" color={AppColors.primary} />
|
||||
<Text style={styles.scanningText}>Scanning for WP sensors...</Text>
|
||||
<TouchableOpacity style={styles.stopScanButton} onPress={stopScan}>
|
||||
<Text style={styles.stopScanText}>Stop Scan</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* Found Devices */}
|
||||
{foundDevices.length > 0 && !isScanning && (
|
||||
<>
|
||||
<View style={styles.sectionHeader}>
|
||||
<Text style={styles.sectionTitle}>Found Sensors ({foundDevices.length})</Text>
|
||||
<TouchableOpacity style={styles.rescanButton} onPress={handleScan}>
|
||||
<Ionicons name="refresh" size={18} color={AppColors.primary} />
|
||||
<Text style={styles.rescanText}>Rescan</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<View style={styles.devicesList}>
|
||||
{foundDevices.map((device) => {
|
||||
const isConnected = connectedDevices.has(device.id);
|
||||
const isConnectingThis = isConnecting && selectedDevice?.id === device.id;
|
||||
|
||||
return (
|
||||
<TouchableOpacity
|
||||
key={device.id}
|
||||
style={[
|
||||
styles.deviceCard,
|
||||
isConnected && styles.deviceCardConnected,
|
||||
]}
|
||||
onPress={() => handleConnect(device)}
|
||||
disabled={isConnectingThis || isConnected}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<View style={styles.deviceInfo}>
|
||||
<View style={styles.deviceIcon}>
|
||||
<Ionicons name="water" size={24} color={AppColors.primary} />
|
||||
</View>
|
||||
<View style={styles.deviceDetails}>
|
||||
<Text style={styles.deviceName}>{device.name}</Text>
|
||||
{device.wellId && (
|
||||
<Text style={styles.deviceMeta}>Well ID: {device.wellId}</Text>
|
||||
)}
|
||||
<View style={styles.signalRow}>
|
||||
<Ionicons
|
||||
name={getSignalIcon(device.rssi)}
|
||||
size={14}
|
||||
color={getSignalColor(device.rssi)}
|
||||
/>
|
||||
<Text style={[styles.signalText, { color: getSignalColor(device.rssi) }]}>
|
||||
{device.rssi} dBm
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{isConnectingThis ? (
|
||||
<ActivityIndicator size="small" color={AppColors.primary} />
|
||||
) : isConnected ? (
|
||||
<View style={styles.connectedBadge}>
|
||||
<Ionicons name="checkmark-circle" size={20} color={AppColors.success} />
|
||||
</View>
|
||||
) : (
|
||||
<Ionicons name="chevron-forward" size={20} color={AppColors.textMuted} />
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Empty State (after scan completed, no devices found) */}
|
||||
{!isScanning && foundDevices.length === 0 && (
|
||||
<View style={styles.emptyState}>
|
||||
<View style={styles.emptyIconContainer}>
|
||||
<Ionicons name="search-outline" size={48} color={AppColors.textMuted} />
|
||||
</View>
|
||||
<Text style={styles.emptyTitle}>No Sensors Found</Text>
|
||||
<Text style={styles.emptyText}>
|
||||
Make sure your WP sensor is powered on and within range, then try scanning again.
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* Help Card */}
|
||||
<View style={styles.helpCard}>
|
||||
<View style={styles.helpHeader}>
|
||||
<Ionicons name="help-circle" size={20} color={AppColors.info} />
|
||||
<Text style={styles.helpTitle}>Troubleshooting</Text>
|
||||
</View>
|
||||
<Text style={styles.helpText}>
|
||||
• Sensor not showing up? Make sure it's powered on and the LED is blinking{'\n'}
|
||||
• Weak signal? Move closer to the sensor{'\n'}
|
||||
• Connection fails? Try restarting the sensor{'\n'}
|
||||
• Still having issues? Contact support for assistance
|
||||
</Text>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: AppColors.background,
|
||||
},
|
||||
header: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
paddingHorizontal: Spacing.md,
|
||||
paddingVertical: Spacing.sm,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: AppColors.border,
|
||||
},
|
||||
backButton: {
|
||||
padding: Spacing.xs,
|
||||
},
|
||||
headerTitle: {
|
||||
fontSize: FontSizes.lg,
|
||||
fontWeight: FontWeights.semibold,
|
||||
color: AppColors.textPrimary,
|
||||
},
|
||||
placeholder: {
|
||||
width: 32,
|
||||
},
|
||||
simulatorWarning: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: AppColors.warningLight,
|
||||
paddingVertical: Spacing.xs,
|
||||
paddingHorizontal: Spacing.md,
|
||||
gap: Spacing.xs,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: AppColors.warning,
|
||||
},
|
||||
simulatorWarningText: {
|
||||
fontSize: FontSizes.xs,
|
||||
color: AppColors.warning,
|
||||
fontWeight: FontWeights.medium,
|
||||
flex: 1,
|
||||
},
|
||||
content: {
|
||||
flex: 1,
|
||||
},
|
||||
scrollContent: {
|
||||
padding: Spacing.lg,
|
||||
paddingBottom: Spacing.xxl,
|
||||
},
|
||||
// Instructions
|
||||
instructionsCard: {
|
||||
backgroundColor: AppColors.surface,
|
||||
borderRadius: BorderRadius.xl,
|
||||
padding: Spacing.lg,
|
||||
marginBottom: Spacing.lg,
|
||||
...Shadows.sm,
|
||||
},
|
||||
instructionsTitle: {
|
||||
fontSize: FontSizes.base,
|
||||
fontWeight: FontWeights.semibold,
|
||||
color: AppColors.textPrimary,
|
||||
marginBottom: Spacing.md,
|
||||
},
|
||||
step: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'flex-start',
|
||||
marginBottom: Spacing.sm,
|
||||
gap: Spacing.sm,
|
||||
},
|
||||
stepNumber: {
|
||||
width: 24,
|
||||
height: 24,
|
||||
borderRadius: 12,
|
||||
backgroundColor: AppColors.primary,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
stepNumberText: {
|
||||
fontSize: FontSizes.xs,
|
||||
fontWeight: FontWeights.bold,
|
||||
color: AppColors.white,
|
||||
},
|
||||
stepText: {
|
||||
flex: 1,
|
||||
fontSize: FontSizes.sm,
|
||||
color: AppColors.textSecondary,
|
||||
lineHeight: 20,
|
||||
paddingTop: 2,
|
||||
},
|
||||
// Scan Button
|
||||
scanButton: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: AppColors.primary,
|
||||
paddingVertical: Spacing.md,
|
||||
borderRadius: BorderRadius.lg,
|
||||
marginBottom: Spacing.lg,
|
||||
gap: Spacing.sm,
|
||||
...Shadows.md,
|
||||
},
|
||||
scanButtonText: {
|
||||
fontSize: FontSizes.base,
|
||||
fontWeight: FontWeights.semibold,
|
||||
color: AppColors.white,
|
||||
},
|
||||
// Scanning
|
||||
scanningCard: {
|
||||
backgroundColor: AppColors.surface,
|
||||
borderRadius: BorderRadius.xl,
|
||||
padding: Spacing.xl,
|
||||
alignItems: 'center',
|
||||
marginBottom: Spacing.lg,
|
||||
...Shadows.sm,
|
||||
},
|
||||
scanningText: {
|
||||
fontSize: FontSizes.base,
|
||||
color: AppColors.textSecondary,
|
||||
marginTop: Spacing.md,
|
||||
marginBottom: Spacing.md,
|
||||
},
|
||||
stopScanButton: {
|
||||
paddingVertical: Spacing.sm,
|
||||
paddingHorizontal: Spacing.lg,
|
||||
},
|
||||
stopScanText: {
|
||||
fontSize: FontSizes.sm,
|
||||
fontWeight: FontWeights.medium,
|
||||
color: AppColors.error,
|
||||
},
|
||||
// Section Header
|
||||
sectionHeader: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
marginBottom: Spacing.md,
|
||||
},
|
||||
sectionTitle: {
|
||||
fontSize: FontSizes.sm,
|
||||
fontWeight: FontWeights.semibold,
|
||||
color: AppColors.textSecondary,
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 0.5,
|
||||
},
|
||||
rescanButton: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 4,
|
||||
},
|
||||
rescanText: {
|
||||
fontSize: FontSizes.sm,
|
||||
fontWeight: FontWeights.medium,
|
||||
color: AppColors.primary,
|
||||
},
|
||||
// Devices List
|
||||
devicesList: {
|
||||
gap: Spacing.md,
|
||||
marginBottom: Spacing.lg,
|
||||
},
|
||||
deviceCard: {
|
||||
backgroundColor: AppColors.surface,
|
||||
borderRadius: BorderRadius.lg,
|
||||
padding: Spacing.md,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
...Shadows.xs,
|
||||
},
|
||||
deviceCardConnected: {
|
||||
borderWidth: 2,
|
||||
borderColor: AppColors.success,
|
||||
},
|
||||
deviceInfo: {
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: Spacing.md,
|
||||
},
|
||||
deviceIcon: {
|
||||
width: 48,
|
||||
height: 48,
|
||||
borderRadius: BorderRadius.lg,
|
||||
backgroundColor: AppColors.primaryLighter,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
deviceDetails: {
|
||||
flex: 1,
|
||||
},
|
||||
deviceName: {
|
||||
fontSize: FontSizes.base,
|
||||
fontWeight: FontWeights.semibold,
|
||||
color: AppColors.textPrimary,
|
||||
marginBottom: 2,
|
||||
},
|
||||
deviceMeta: {
|
||||
fontSize: FontSizes.xs,
|
||||
color: AppColors.textMuted,
|
||||
marginBottom: 4,
|
||||
},
|
||||
signalRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 4,
|
||||
},
|
||||
signalText: {
|
||||
fontSize: FontSizes.xs,
|
||||
fontWeight: FontWeights.medium,
|
||||
},
|
||||
connectedBadge: {
|
||||
padding: Spacing.xs,
|
||||
},
|
||||
// Empty State
|
||||
emptyState: {
|
||||
alignItems: 'center',
|
||||
padding: Spacing.xl,
|
||||
backgroundColor: AppColors.surface,
|
||||
borderRadius: BorderRadius.xl,
|
||||
marginBottom: Spacing.lg,
|
||||
...Shadows.sm,
|
||||
},
|
||||
emptyIconContainer: {
|
||||
width: 80,
|
||||
height: 80,
|
||||
borderRadius: 40,
|
||||
backgroundColor: AppColors.surfaceSecondary,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
marginBottom: Spacing.md,
|
||||
},
|
||||
emptyTitle: {
|
||||
fontSize: FontSizes.lg,
|
||||
fontWeight: FontWeights.semibold,
|
||||
color: AppColors.textPrimary,
|
||||
marginBottom: Spacing.xs,
|
||||
},
|
||||
emptyText: {
|
||||
fontSize: FontSizes.sm,
|
||||
color: AppColors.textMuted,
|
||||
textAlign: 'center',
|
||||
lineHeight: 20,
|
||||
},
|
||||
// Help Card
|
||||
helpCard: {
|
||||
backgroundColor: AppColors.infoLight,
|
||||
borderRadius: BorderRadius.lg,
|
||||
padding: Spacing.md,
|
||||
},
|
||||
helpHeader: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: Spacing.sm,
|
||||
marginBottom: Spacing.xs,
|
||||
},
|
||||
helpTitle: {
|
||||
fontSize: FontSizes.sm,
|
||||
fontWeight: FontWeights.semibold,
|
||||
color: AppColors.info,
|
||||
},
|
||||
helpText: {
|
||||
fontSize: FontSizes.sm,
|
||||
color: AppColors.info,
|
||||
lineHeight: 20,
|
||||
},
|
||||
});
|
||||
563
app/(tabs)/beneficiaries/[id]/setup-wifi.tsx
Normal file
563
app/(tabs)/beneficiaries/[id]/setup-wifi.tsx
Normal file
@ -0,0 +1,563 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
StyleSheet,
|
||||
ScrollView,
|
||||
TouchableOpacity,
|
||||
Alert,
|
||||
ActivityIndicator,
|
||||
TextInput,
|
||||
} from 'react-native';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import { router, useLocalSearchParams } from 'expo-router';
|
||||
import * as Device from 'expo-device';
|
||||
import { useBLE } from '@/contexts/BLEContext';
|
||||
import { api } from '@/services/api';
|
||||
import type { WiFiNetwork } from '@/services/ble';
|
||||
import {
|
||||
AppColors,
|
||||
BorderRadius,
|
||||
FontSizes,
|
||||
FontWeights,
|
||||
Spacing,
|
||||
Shadows,
|
||||
} from '@/constants/theme';
|
||||
|
||||
export default function SetupWiFiScreen() {
|
||||
const { id, deviceId, deviceName, wellId } = useLocalSearchParams<{
|
||||
id: string;
|
||||
deviceId: string;
|
||||
deviceName: string;
|
||||
wellId: string;
|
||||
}>();
|
||||
|
||||
const { getWiFiList, setWiFi, disconnectDevice } = useBLE();
|
||||
|
||||
const [networks, setNetworks] = useState<WiFiNetwork[]>([]);
|
||||
const [isLoadingNetworks, setIsLoadingNetworks] = useState(false);
|
||||
const [selectedNetwork, setSelectedNetwork] = useState<WiFiNetwork | null>(null);
|
||||
const [password, setPassword] = useState('');
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [isConnecting, setIsConnecting] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
loadWiFiNetworks();
|
||||
}, []);
|
||||
|
||||
const loadWiFiNetworks = async () => {
|
||||
setIsLoadingNetworks(true);
|
||||
|
||||
try {
|
||||
const wifiList = await getWiFiList(deviceId!);
|
||||
setNetworks(wifiList);
|
||||
} catch (error: any) {
|
||||
console.error('[SetupWiFi] Failed to get WiFi list:', error);
|
||||
Alert.alert('Error', error.message || 'Failed to get WiFi networks. Please try again.');
|
||||
} finally {
|
||||
setIsLoadingNetworks(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSelectNetwork = (network: WiFiNetwork) => {
|
||||
setSelectedNetwork(network);
|
||||
setPassword('');
|
||||
};
|
||||
|
||||
const handleConnect = async () => {
|
||||
if (!selectedNetwork) {
|
||||
Alert.alert('Error', 'Please select a WiFi network');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!password) {
|
||||
Alert.alert('Error', 'Please enter WiFi password');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsConnecting(true);
|
||||
|
||||
try {
|
||||
// Step 1: Set WiFi on the device via BLE
|
||||
const success = await setWiFi(deviceId!, selectedNetwork.ssid, password);
|
||||
|
||||
if (!success) {
|
||||
throw new Error('Failed to configure WiFi on sensor');
|
||||
}
|
||||
|
||||
// Step 2: Attach device to beneficiary via API (skip in simulator/mock mode)
|
||||
const isSimulator = !Device.isDevice;
|
||||
|
||||
if (!isSimulator) {
|
||||
const attachResponse = await api.attachDeviceToBeneficiary(
|
||||
id!,
|
||||
parseInt(wellId!, 10),
|
||||
selectedNetwork.ssid,
|
||||
password
|
||||
);
|
||||
|
||||
if (!attachResponse.ok) {
|
||||
throw new Error('Failed to attach sensor to beneficiary');
|
||||
}
|
||||
} else {
|
||||
console.log('[SetupWiFi] Simulator mode - skipping API attach');
|
||||
}
|
||||
|
||||
// Step 3: Disconnect BLE connection (sensor will reboot and connect to WiFi)
|
||||
await disconnectDevice(deviceId!);
|
||||
|
||||
// Success!
|
||||
Alert.alert(
|
||||
'Success!',
|
||||
`${deviceName} has been configured and attached.\n\nThe sensor will now reboot and connect to "${selectedNetwork.ssid}". This may take a minute.`,
|
||||
[
|
||||
{
|
||||
text: 'Done',
|
||||
onPress: () => {
|
||||
// Navigate back to Equipment screen
|
||||
router.replace(`/(tabs)/beneficiaries/${id}/equipment` as any);
|
||||
},
|
||||
},
|
||||
]
|
||||
);
|
||||
} catch (error: any) {
|
||||
console.error('[SetupWiFi] Failed to connect:', error);
|
||||
Alert.alert(
|
||||
'Connection Failed',
|
||||
error.message || 'Failed to configure WiFi. Please check the password and try again.'
|
||||
);
|
||||
} finally {
|
||||
setIsConnecting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const getSignalStrength = (rssi: number): string => {
|
||||
if (rssi >= -50) return 'Excellent';
|
||||
if (rssi >= -60) return 'Good';
|
||||
if (rssi >= -70) return 'Fair';
|
||||
return 'Weak';
|
||||
};
|
||||
|
||||
const getSignalColor = (rssi: number) => {
|
||||
if (rssi >= -50) return AppColors.success;
|
||||
if (rssi >= -60) return AppColors.info;
|
||||
if (rssi >= -70) return AppColors.warning;
|
||||
return AppColors.error;
|
||||
};
|
||||
|
||||
const getSignalIcon = (rssi: number) => {
|
||||
if (rssi >= -50) return 'wifi';
|
||||
if (rssi >= -60) return 'wifi';
|
||||
if (rssi >= -70) return 'wifi-outline';
|
||||
return 'wifi-outline';
|
||||
};
|
||||
|
||||
return (
|
||||
<SafeAreaView style={styles.container} edges={['top', 'bottom']}>
|
||||
{/* Header */}
|
||||
<View style={styles.header}>
|
||||
<TouchableOpacity
|
||||
style={styles.backButton}
|
||||
onPress={() => {
|
||||
// Disconnect BLE before going back
|
||||
disconnectDevice(deviceId!);
|
||||
router.back();
|
||||
}}
|
||||
>
|
||||
<Ionicons name="arrow-back" size={24} color={AppColors.textPrimary} />
|
||||
</TouchableOpacity>
|
||||
<Text style={styles.headerTitle}>Setup WiFi</Text>
|
||||
<View style={styles.placeholder} />
|
||||
</View>
|
||||
|
||||
<ScrollView style={styles.content} contentContainerStyle={styles.scrollContent}>
|
||||
{/* Device Info Card */}
|
||||
<View style={styles.deviceCard}>
|
||||
<View style={styles.deviceIcon}>
|
||||
<Ionicons name="water" size={32} color={AppColors.primary} />
|
||||
</View>
|
||||
<View style={styles.deviceInfo}>
|
||||
<Text style={styles.deviceName}>{deviceName}</Text>
|
||||
<Text style={styles.deviceMeta}>Well ID: {wellId}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Instructions */}
|
||||
<View style={styles.instructionsCard}>
|
||||
<Text style={styles.instructionsText}>
|
||||
Select the WiFi network your sensor should connect to. Make sure the network has internet access.
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* WiFi Networks List */}
|
||||
{isLoadingNetworks ? (
|
||||
<View style={styles.loadingContainer}>
|
||||
<ActivityIndicator size="large" color={AppColors.primary} />
|
||||
<Text style={styles.loadingText}>Scanning for WiFi networks...</Text>
|
||||
</View>
|
||||
) : (
|
||||
<>
|
||||
<View style={styles.sectionHeader}>
|
||||
<Text style={styles.sectionTitle}>Available Networks ({networks.length})</Text>
|
||||
<TouchableOpacity style={styles.refreshButton} onPress={loadWiFiNetworks}>
|
||||
<Ionicons name="refresh" size={18} color={AppColors.primary} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{networks.length === 0 ? (
|
||||
<View style={styles.emptyState}>
|
||||
<Ionicons name="wifi-outline" size={48} color={AppColors.textMuted} />
|
||||
<Text style={styles.emptyText}>No WiFi networks found</Text>
|
||||
<TouchableOpacity style={styles.retryButton} onPress={loadWiFiNetworks}>
|
||||
<Text style={styles.retryText}>Try Again</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
) : (
|
||||
<View style={styles.networksList}>
|
||||
{networks.map((network, index) => {
|
||||
const isSelected = selectedNetwork?.ssid === network.ssid;
|
||||
|
||||
return (
|
||||
<TouchableOpacity
|
||||
key={`${network.ssid}-${index}`}
|
||||
style={[
|
||||
styles.networkCard,
|
||||
isSelected && styles.networkCardSelected,
|
||||
]}
|
||||
onPress={() => handleSelectNetwork(network)}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<View style={styles.networkInfo}>
|
||||
<Ionicons
|
||||
name={getSignalIcon(network.rssi)}
|
||||
size={24}
|
||||
color={getSignalColor(network.rssi)}
|
||||
/>
|
||||
<View style={styles.networkDetails}>
|
||||
<Text style={styles.networkName}>{network.ssid}</Text>
|
||||
<Text style={[styles.signalText, { color: getSignalColor(network.rssi) }]}>
|
||||
{getSignalStrength(network.rssi)} ({network.rssi} dBm)
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
{isSelected && (
|
||||
<Ionicons name="checkmark-circle" size={24} color={AppColors.primary} />
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Password Input (shown when network selected) */}
|
||||
{selectedNetwork && (
|
||||
<View style={styles.passwordCard}>
|
||||
<Text style={styles.passwordLabel}>WiFi Password</Text>
|
||||
<View style={styles.passwordInputContainer}>
|
||||
<TextInput
|
||||
style={styles.passwordInput}
|
||||
value={password}
|
||||
onChangeText={setPassword}
|
||||
placeholder="Enter password"
|
||||
secureTextEntry={!showPassword}
|
||||
autoCapitalize="none"
|
||||
autoCorrect={false}
|
||||
/>
|
||||
<TouchableOpacity
|
||||
style={styles.togglePasswordButton}
|
||||
onPress={() => setShowPassword(!showPassword)}
|
||||
>
|
||||
<Ionicons
|
||||
name={showPassword ? 'eye-off' : 'eye'}
|
||||
size={20}
|
||||
color={AppColors.textMuted}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{/* Connect Button */}
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
styles.connectButton,
|
||||
(!password || isConnecting) && styles.connectButtonDisabled,
|
||||
]}
|
||||
onPress={handleConnect}
|
||||
disabled={!password || isConnecting}
|
||||
>
|
||||
{isConnecting ? (
|
||||
<>
|
||||
<ActivityIndicator size="small" color={AppColors.white} />
|
||||
<Text style={styles.connectButtonText}>Connecting...</Text>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Ionicons name="checkmark" size={20} color={AppColors.white} />
|
||||
<Text style={styles.connectButtonText}>Connect & Complete Setup</Text>
|
||||
</>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* Help Card */}
|
||||
<View style={styles.helpCard}>
|
||||
<View style={styles.helpHeader}>
|
||||
<Ionicons name="information-circle" size={20} color={AppColors.info} />
|
||||
<Text style={styles.helpTitle}>Important</Text>
|
||||
</View>
|
||||
<Text style={styles.helpText}>
|
||||
• The sensor will reboot after WiFi is configured{'\n'}
|
||||
• It may take up to 1 minute for the sensor to connect{'\n'}
|
||||
• Make sure the WiFi password is correct{'\n'}
|
||||
• The network must have internet access
|
||||
</Text>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: AppColors.background,
|
||||
},
|
||||
header: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
paddingHorizontal: Spacing.md,
|
||||
paddingVertical: Spacing.sm,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: AppColors.border,
|
||||
},
|
||||
backButton: {
|
||||
padding: Spacing.xs,
|
||||
},
|
||||
headerTitle: {
|
||||
fontSize: FontSizes.lg,
|
||||
fontWeight: FontWeights.semibold,
|
||||
color: AppColors.textPrimary,
|
||||
},
|
||||
placeholder: {
|
||||
width: 32,
|
||||
},
|
||||
content: {
|
||||
flex: 1,
|
||||
},
|
||||
scrollContent: {
|
||||
padding: Spacing.lg,
|
||||
paddingBottom: Spacing.xxl,
|
||||
},
|
||||
// Device Card
|
||||
deviceCard: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: AppColors.surface,
|
||||
borderRadius: BorderRadius.xl,
|
||||
padding: Spacing.lg,
|
||||
marginBottom: Spacing.lg,
|
||||
...Shadows.sm,
|
||||
},
|
||||
deviceIcon: {
|
||||
width: 60,
|
||||
height: 60,
|
||||
borderRadius: BorderRadius.lg,
|
||||
backgroundColor: AppColors.primaryLighter,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
marginRight: Spacing.md,
|
||||
},
|
||||
deviceInfo: {
|
||||
flex: 1,
|
||||
},
|
||||
deviceName: {
|
||||
fontSize: FontSizes.lg,
|
||||
fontWeight: FontWeights.semibold,
|
||||
color: AppColors.textPrimary,
|
||||
marginBottom: 2,
|
||||
},
|
||||
deviceMeta: {
|
||||
fontSize: FontSizes.sm,
|
||||
color: AppColors.textMuted,
|
||||
},
|
||||
// Instructions
|
||||
instructionsCard: {
|
||||
backgroundColor: AppColors.infoLight,
|
||||
borderRadius: BorderRadius.lg,
|
||||
padding: Spacing.md,
|
||||
marginBottom: Spacing.lg,
|
||||
},
|
||||
instructionsText: {
|
||||
fontSize: FontSizes.sm,
|
||||
color: AppColors.info,
|
||||
lineHeight: 20,
|
||||
},
|
||||
// Loading
|
||||
loadingContainer: {
|
||||
alignItems: 'center',
|
||||
padding: Spacing.xl,
|
||||
backgroundColor: AppColors.surface,
|
||||
borderRadius: BorderRadius.xl,
|
||||
...Shadows.sm,
|
||||
},
|
||||
loadingText: {
|
||||
fontSize: FontSizes.base,
|
||||
color: AppColors.textSecondary,
|
||||
marginTop: Spacing.md,
|
||||
},
|
||||
// Section Header
|
||||
sectionHeader: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
marginBottom: Spacing.md,
|
||||
},
|
||||
sectionTitle: {
|
||||
fontSize: FontSizes.sm,
|
||||
fontWeight: FontWeights.semibold,
|
||||
color: AppColors.textSecondary,
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 0.5,
|
||||
},
|
||||
refreshButton: {
|
||||
padding: Spacing.xs,
|
||||
},
|
||||
// Empty State
|
||||
emptyState: {
|
||||
alignItems: 'center',
|
||||
padding: Spacing.xl,
|
||||
backgroundColor: AppColors.surface,
|
||||
borderRadius: BorderRadius.xl,
|
||||
...Shadows.sm,
|
||||
},
|
||||
emptyText: {
|
||||
fontSize: FontSizes.base,
|
||||
color: AppColors.textMuted,
|
||||
marginTop: Spacing.md,
|
||||
marginBottom: Spacing.md,
|
||||
},
|
||||
retryButton: {
|
||||
paddingVertical: Spacing.sm,
|
||||
paddingHorizontal: Spacing.lg,
|
||||
},
|
||||
retryText: {
|
||||
fontSize: FontSizes.base,
|
||||
fontWeight: FontWeights.semibold,
|
||||
color: AppColors.primary,
|
||||
},
|
||||
// Networks List
|
||||
networksList: {
|
||||
gap: Spacing.sm,
|
||||
marginBottom: Spacing.lg,
|
||||
},
|
||||
networkCard: {
|
||||
backgroundColor: AppColors.surface,
|
||||
borderRadius: BorderRadius.lg,
|
||||
padding: Spacing.md,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
...Shadows.xs,
|
||||
},
|
||||
networkCardSelected: {
|
||||
borderWidth: 2,
|
||||
borderColor: AppColors.primary,
|
||||
},
|
||||
networkInfo: {
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: Spacing.md,
|
||||
},
|
||||
networkDetails: {
|
||||
flex: 1,
|
||||
},
|
||||
networkName: {
|
||||
fontSize: FontSizes.base,
|
||||
fontWeight: FontWeights.semibold,
|
||||
color: AppColors.textPrimary,
|
||||
marginBottom: 2,
|
||||
},
|
||||
signalText: {
|
||||
fontSize: FontSizes.xs,
|
||||
fontWeight: FontWeights.medium,
|
||||
},
|
||||
// Password Input
|
||||
passwordCard: {
|
||||
backgroundColor: AppColors.surface,
|
||||
borderRadius: BorderRadius.xl,
|
||||
padding: Spacing.lg,
|
||||
marginBottom: Spacing.lg,
|
||||
...Shadows.sm,
|
||||
},
|
||||
passwordLabel: {
|
||||
fontSize: FontSizes.sm,
|
||||
fontWeight: FontWeights.semibold,
|
||||
color: AppColors.textSecondary,
|
||||
marginBottom: Spacing.sm,
|
||||
},
|
||||
passwordInputContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: AppColors.background,
|
||||
borderRadius: BorderRadius.md,
|
||||
borderWidth: 1,
|
||||
borderColor: AppColors.border,
|
||||
marginBottom: Spacing.md,
|
||||
},
|
||||
passwordInput: {
|
||||
flex: 1,
|
||||
paddingVertical: Spacing.sm,
|
||||
paddingHorizontal: Spacing.md,
|
||||
fontSize: FontSizes.base,
|
||||
color: AppColors.textPrimary,
|
||||
},
|
||||
togglePasswordButton: {
|
||||
padding: Spacing.md,
|
||||
},
|
||||
// Connect Button
|
||||
connectButton: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: AppColors.primary,
|
||||
paddingVertical: Spacing.md,
|
||||
borderRadius: BorderRadius.lg,
|
||||
gap: Spacing.sm,
|
||||
...Shadows.md,
|
||||
},
|
||||
connectButtonDisabled: {
|
||||
opacity: 0.5,
|
||||
},
|
||||
connectButtonText: {
|
||||
fontSize: FontSizes.base,
|
||||
fontWeight: FontWeights.semibold,
|
||||
color: AppColors.white,
|
||||
},
|
||||
// Help Card
|
||||
helpCard: {
|
||||
backgroundColor: AppColors.infoLight,
|
||||
borderRadius: BorderRadius.lg,
|
||||
padding: Spacing.md,
|
||||
},
|
||||
helpHeader: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: Spacing.sm,
|
||||
marginBottom: Spacing.xs,
|
||||
},
|
||||
helpTitle: {
|
||||
fontSize: FontSizes.sm,
|
||||
fontWeight: FontWeights.semibold,
|
||||
color: AppColors.info,
|
||||
},
|
||||
helpText: {
|
||||
fontSize: FontSizes.sm,
|
||||
color: AppColors.info,
|
||||
lineHeight: 20,
|
||||
},
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user