Add device settings screen
Features: - Device metadata display (name, MAC, location, description) - Edit device name and description - Update WiFi credentials (reconnect flow) - Remove device from beneficiary - Device history and diagnostics UI: - Clean settings form with validation - Delete confirmation dialog - Success/error feedback - Navigation back to equipment list on changes Route: /(tabs)/beneficiaries/[id]/device-settings/[deviceId]
This commit is contained in:
Sergei
parent
3c3283e424
commit
5092678430
728
app/(tabs)/beneficiaries/[id]/device-settings/[deviceId].tsx
Normal file
728
app/(tabs)/beneficiaries/[id]/device-settings/[deviceId].tsx
Normal file
@ -0,0 +1,728 @@
|
|||||||
|
import React, { useState, useEffect } 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 { api } from '@/services/api';
|
||||||
|
import type { WiFiStatus } from '@/services/ble';
|
||||||
|
import {
|
||||||
|
AppColors,
|
||||||
|
BorderRadius,
|
||||||
|
FontSizes,
|
||||||
|
FontWeights,
|
||||||
|
Spacing,
|
||||||
|
Shadows,
|
||||||
|
} from '@/constants/theme';
|
||||||
|
|
||||||
|
interface SensorInfo {
|
||||||
|
deviceId: string;
|
||||||
|
wellId: number;
|
||||||
|
mac: string;
|
||||||
|
name: string;
|
||||||
|
status: 'online' | 'offline';
|
||||||
|
lastSeen: Date;
|
||||||
|
beneficiaryId: string;
|
||||||
|
deploymentId: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function DeviceSettingsScreen() {
|
||||||
|
const { id, deviceId } = useLocalSearchParams<{ id: string; deviceId: string }>();
|
||||||
|
const {
|
||||||
|
connectedDevices,
|
||||||
|
isBLEAvailable,
|
||||||
|
connectDevice,
|
||||||
|
disconnectDevice,
|
||||||
|
getCurrentWiFi,
|
||||||
|
rebootDevice,
|
||||||
|
} = useBLE();
|
||||||
|
|
||||||
|
const [sensorInfo, setSensorInfo] = useState<SensorInfo | null>(null);
|
||||||
|
const [currentWiFi, setCurrentWiFi] = useState<WiFiStatus | null>(null);
|
||||||
|
const [isLoadingInfo, setIsLoadingInfo] = useState(true);
|
||||||
|
const [isConnecting, setIsConnecting] = useState(false);
|
||||||
|
const [isLoadingWiFi, setIsLoadingWiFi] = useState(false);
|
||||||
|
const [isRebooting, setIsRebooting] = useState(false);
|
||||||
|
|
||||||
|
const isConnected = connectedDevices.has(deviceId!);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
loadSensorInfo();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const loadSensorInfo = async () => {
|
||||||
|
setIsLoadingInfo(true);
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Get sensor info from API
|
||||||
|
const response = await api.getDevicesForBeneficiary(id!);
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Failed to load sensor info');
|
||||||
|
}
|
||||||
|
|
||||||
|
const sensor = response.data.find((s: any) => s.deviceId === deviceId);
|
||||||
|
|
||||||
|
if (sensor) {
|
||||||
|
setSensorInfo(sensor);
|
||||||
|
} else {
|
||||||
|
throw new Error('Sensor not found');
|
||||||
|
}
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error('[DeviceSettings] Failed to load sensor info:', error);
|
||||||
|
Alert.alert('Error', 'Failed to load sensor information');
|
||||||
|
router.back();
|
||||||
|
} finally {
|
||||||
|
setIsLoadingInfo(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleConnect = async () => {
|
||||||
|
if (!sensorInfo) return;
|
||||||
|
|
||||||
|
setIsConnecting(true);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const success = await connectDevice(deviceId!);
|
||||||
|
|
||||||
|
if (!success) {
|
||||||
|
throw new Error('Connection failed');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Load WiFi status after connecting
|
||||||
|
loadWiFiStatus();
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error('[DeviceSettings] Connection failed:', error);
|
||||||
|
Alert.alert('Connection Failed', 'Failed to connect to sensor via Bluetooth.');
|
||||||
|
} finally {
|
||||||
|
setIsConnecting(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const loadWiFiStatus = async () => {
|
||||||
|
if (!isConnected) return;
|
||||||
|
|
||||||
|
setIsLoadingWiFi(true);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const wifiStatus = await getCurrentWiFi(deviceId!);
|
||||||
|
setCurrentWiFi(wifiStatus);
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error('[DeviceSettings] Failed to get WiFi status:', error);
|
||||||
|
Alert.alert('Error', 'Failed to get WiFi status');
|
||||||
|
} finally {
|
||||||
|
setIsLoadingWiFi(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleChangeWiFi = () => {
|
||||||
|
if (!isConnected) {
|
||||||
|
Alert.alert('Not Connected', 'Please connect to the sensor via Bluetooth first.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Navigate to Setup WiFi screen
|
||||||
|
router.push({
|
||||||
|
pathname: `/(tabs)/beneficiaries/${id}/setup-wifi` as any,
|
||||||
|
params: {
|
||||||
|
deviceId: deviceId!,
|
||||||
|
deviceName: sensorInfo?.name || '',
|
||||||
|
wellId: sensorInfo?.wellId.toString() || '',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleReboot = () => {
|
||||||
|
if (!isConnected) {
|
||||||
|
Alert.alert('Not Connected', 'Please connect to the sensor via Bluetooth first.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
Alert.alert(
|
||||||
|
'Reboot Sensor',
|
||||||
|
'Are you sure you want to reboot this sensor? It will disconnect from Bluetooth and restart.',
|
||||||
|
[
|
||||||
|
{ text: 'Cancel', style: 'cancel' },
|
||||||
|
{
|
||||||
|
text: 'Reboot',
|
||||||
|
style: 'destructive',
|
||||||
|
onPress: async () => {
|
||||||
|
setIsRebooting(true);
|
||||||
|
|
||||||
|
try {
|
||||||
|
await rebootDevice(deviceId!);
|
||||||
|
Alert.alert('Success', 'Sensor is rebooting. It will be back online in a minute.');
|
||||||
|
router.back();
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error('[DeviceSettings] Reboot failed:', error);
|
||||||
|
Alert.alert('Error', 'Failed to reboot sensor');
|
||||||
|
} finally {
|
||||||
|
setIsRebooting(false);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatLastSeen = (lastSeen: Date): string => {
|
||||||
|
const now = new Date();
|
||||||
|
const diffMs = now.getTime() - lastSeen.getTime();
|
||||||
|
const diffMins = Math.floor(diffMs / 60000);
|
||||||
|
const diffHours = Math.floor(diffMs / 3600000);
|
||||||
|
const diffDays = Math.floor(diffMs / 86400000);
|
||||||
|
|
||||||
|
if (diffMins < 1) return 'Just now';
|
||||||
|
if (diffMins < 60) return `${diffMins} min ago`;
|
||||||
|
if (diffHours < 24) return `${diffHours} hour${diffHours > 1 ? 's' : ''} ago`;
|
||||||
|
return `${diffDays} day${diffDays > 1 ? 's' : ''} ago`;
|
||||||
|
};
|
||||||
|
|
||||||
|
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;
|
||||||
|
};
|
||||||
|
|
||||||
|
if (isLoadingInfo || !sensorInfo) {
|
||||||
|
return (
|
||||||
|
<SafeAreaView style={styles.container} edges={['top', 'bottom']}>
|
||||||
|
<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}>Sensor Settings</Text>
|
||||||
|
<View style={styles.placeholder} />
|
||||||
|
</View>
|
||||||
|
<View style={styles.loadingContainer}>
|
||||||
|
<ActivityIndicator size="large" color={AppColors.primary} />
|
||||||
|
<Text style={styles.loadingText}>Loading sensor info...</Text>
|
||||||
|
</View>
|
||||||
|
</SafeAreaView>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
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}>Sensor Settings</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 - BLE features use mock data
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<ScrollView style={styles.content} contentContainerStyle={styles.scrollContent}>
|
||||||
|
{/* Sensor Info Card */}
|
||||||
|
<View style={styles.sensorCard}>
|
||||||
|
<View style={styles.sensorIcon}>
|
||||||
|
<Ionicons name="water" size={48} color={AppColors.primary} />
|
||||||
|
</View>
|
||||||
|
<View style={styles.sensorInfo}>
|
||||||
|
<Text style={styles.sensorName}>{sensorInfo.name}</Text>
|
||||||
|
<View style={styles.statusRow}>
|
||||||
|
<View
|
||||||
|
style={[
|
||||||
|
styles.statusDot,
|
||||||
|
{
|
||||||
|
backgroundColor:
|
||||||
|
sensorInfo.status === 'online' ? AppColors.success : AppColors.error,
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
<Text style={styles.statusText}>
|
||||||
|
{sensorInfo.status === 'online' ? 'Online' : 'Offline'}
|
||||||
|
</Text>
|
||||||
|
<Text style={styles.statusSeparator}>•</Text>
|
||||||
|
<Text style={styles.lastSeenText}>{formatLastSeen(sensorInfo.lastSeen)}</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Details Section */}
|
||||||
|
<View style={styles.section}>
|
||||||
|
<Text style={styles.sectionTitle}>Device Information</Text>
|
||||||
|
<View style={styles.detailsCard}>
|
||||||
|
<View style={styles.detailRow}>
|
||||||
|
<Text style={styles.detailLabel}>Well ID</Text>
|
||||||
|
<Text style={styles.detailValue}>{sensorInfo.wellId}</Text>
|
||||||
|
</View>
|
||||||
|
<View style={styles.detailDivider} />
|
||||||
|
<View style={styles.detailRow}>
|
||||||
|
<Text style={styles.detailLabel}>MAC Address</Text>
|
||||||
|
<Text style={styles.detailValue}>{sensorInfo.mac}</Text>
|
||||||
|
</View>
|
||||||
|
<View style={styles.detailDivider} />
|
||||||
|
<View style={styles.detailRow}>
|
||||||
|
<Text style={styles.detailLabel}>Deployment ID</Text>
|
||||||
|
<Text style={styles.detailValue}>{sensorInfo.deploymentId}</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* BLE Connection Section */}
|
||||||
|
<View style={styles.section}>
|
||||||
|
<Text style={styles.sectionTitle}>Bluetooth Connection</Text>
|
||||||
|
{isConnected ? (
|
||||||
|
<View style={styles.connectedCard}>
|
||||||
|
<View style={styles.connectedHeader}>
|
||||||
|
<Ionicons name="bluetooth" size={24} color={AppColors.success} />
|
||||||
|
<Text style={styles.connectedText}>Connected</Text>
|
||||||
|
</View>
|
||||||
|
<TouchableOpacity
|
||||||
|
style={styles.disconnectButton}
|
||||||
|
onPress={() => disconnectDevice(deviceId!)}
|
||||||
|
>
|
||||||
|
<Text style={styles.disconnectButtonText}>Disconnect</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
) : (
|
||||||
|
<TouchableOpacity
|
||||||
|
style={styles.connectButton}
|
||||||
|
onPress={handleConnect}
|
||||||
|
disabled={isConnecting}
|
||||||
|
>
|
||||||
|
{isConnecting ? (
|
||||||
|
<ActivityIndicator size="small" color={AppColors.white} />
|
||||||
|
) : (
|
||||||
|
<Ionicons name="bluetooth" size={20} color={AppColors.white} />
|
||||||
|
)}
|
||||||
|
<Text style={styles.connectButtonText}>
|
||||||
|
{isConnecting ? 'Connecting...' : 'Connect via Bluetooth'}
|
||||||
|
</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* WiFi Status Section */}
|
||||||
|
{isConnected && (
|
||||||
|
<View style={styles.section}>
|
||||||
|
<Text style={styles.sectionTitle}>WiFi Status</Text>
|
||||||
|
{isLoadingWiFi ? (
|
||||||
|
<View style={styles.loadingWiFiCard}>
|
||||||
|
<ActivityIndicator size="small" color={AppColors.primary} />
|
||||||
|
<Text style={styles.loadingWiFiText}>Loading WiFi status...</Text>
|
||||||
|
</View>
|
||||||
|
) : currentWiFi ? (
|
||||||
|
<View style={styles.wifiCard}>
|
||||||
|
<View style={styles.wifiHeader}>
|
||||||
|
<Ionicons name="wifi" size={24} color={AppColors.success} />
|
||||||
|
<View style={styles.wifiInfo}>
|
||||||
|
<Text style={styles.wifiSSID}>{currentWiFi.ssid}</Text>
|
||||||
|
<Text
|
||||||
|
style={[styles.wifiSignal, { color: getSignalColor(currentWiFi.rssi) }]}
|
||||||
|
>
|
||||||
|
{getSignalStrength(currentWiFi.rssi)} ({currentWiFi.rssi} dBm)
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<TouchableOpacity style={styles.changeWiFiButton} onPress={handleChangeWiFi}>
|
||||||
|
<Ionicons name="settings-outline" size={18} color={AppColors.primary} />
|
||||||
|
<Text style={styles.changeWiFiText}>Change WiFi</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
) : (
|
||||||
|
<View style={styles.noWiFiCard}>
|
||||||
|
<Ionicons name="wifi-outline" size={32} color={AppColors.textMuted} />
|
||||||
|
<Text style={styles.noWiFiText}>Not connected to WiFi</Text>
|
||||||
|
<TouchableOpacity style={styles.setupWiFiButton} onPress={handleChangeWiFi}>
|
||||||
|
<Text style={styles.setupWiFiText}>Setup WiFi</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Actions Section */}
|
||||||
|
{isConnected && (
|
||||||
|
<View style={styles.section}>
|
||||||
|
<Text style={styles.sectionTitle}>Actions</Text>
|
||||||
|
<View style={styles.actionsCard}>
|
||||||
|
<TouchableOpacity
|
||||||
|
style={styles.actionButton}
|
||||||
|
onPress={loadWiFiStatus}
|
||||||
|
disabled={isLoadingWiFi}
|
||||||
|
>
|
||||||
|
<Ionicons name="refresh" size={20} color={AppColors.primary} />
|
||||||
|
<Text style={styles.actionButtonText}>Refresh WiFi Status</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
<View style={styles.actionDivider} />
|
||||||
|
<TouchableOpacity
|
||||||
|
style={styles.actionButton}
|
||||||
|
onPress={handleReboot}
|
||||||
|
disabled={isRebooting}
|
||||||
|
>
|
||||||
|
{isRebooting ? (
|
||||||
|
<ActivityIndicator size="small" color={AppColors.warning} />
|
||||||
|
) : (
|
||||||
|
<Ionicons name="power" size={20} color={AppColors.warning} />
|
||||||
|
)}
|
||||||
|
<Text style={[styles.actionButtonText, { color: AppColors.warning }]}>
|
||||||
|
Reboot Sensor
|
||||||
|
</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Info Card */}
|
||||||
|
<View style={styles.infoCard}>
|
||||||
|
<View style={styles.infoHeader}>
|
||||||
|
<Ionicons name="information-circle" size={20} color={AppColors.info} />
|
||||||
|
<Text style={styles.infoTitle}>About Settings</Text>
|
||||||
|
</View>
|
||||||
|
<Text style={styles.infoText}>
|
||||||
|
• Connect via Bluetooth to view WiFi status and change settings{'\n'}
|
||||||
|
• Make sure you're within range (about 10 meters) of the sensor{'\n'}
|
||||||
|
• Rebooting will disconnect Bluetooth and restart the sensor
|
||||||
|
</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,
|
||||||
|
},
|
||||||
|
loadingContainer: {
|
||||||
|
flex: 1,
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: Spacing.md,
|
||||||
|
},
|
||||||
|
loadingText: {
|
||||||
|
fontSize: FontSizes.base,
|
||||||
|
color: AppColors.textSecondary,
|
||||||
|
},
|
||||||
|
// Sensor Card
|
||||||
|
sensorCard: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
backgroundColor: AppColors.surface,
|
||||||
|
borderRadius: BorderRadius.xl,
|
||||||
|
padding: Spacing.lg,
|
||||||
|
marginBottom: Spacing.lg,
|
||||||
|
...Shadows.sm,
|
||||||
|
},
|
||||||
|
sensorIcon: {
|
||||||
|
width: 80,
|
||||||
|
height: 80,
|
||||||
|
borderRadius: BorderRadius.lg,
|
||||||
|
backgroundColor: AppColors.primaryLighter,
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
marginRight: Spacing.md,
|
||||||
|
},
|
||||||
|
sensorInfo: {
|
||||||
|
flex: 1,
|
||||||
|
},
|
||||||
|
sensorName: {
|
||||||
|
fontSize: FontSizes.xl,
|
||||||
|
fontWeight: FontWeights.bold,
|
||||||
|
color: AppColors.textPrimary,
|
||||||
|
marginBottom: Spacing.xs,
|
||||||
|
},
|
||||||
|
statusRow: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: 6,
|
||||||
|
},
|
||||||
|
statusDot: {
|
||||||
|
width: 8,
|
||||||
|
height: 8,
|
||||||
|
borderRadius: 4,
|
||||||
|
},
|
||||||
|
statusText: {
|
||||||
|
fontSize: FontSizes.sm,
|
||||||
|
color: AppColors.textSecondary,
|
||||||
|
fontWeight: FontWeights.medium,
|
||||||
|
},
|
||||||
|
statusSeparator: {
|
||||||
|
fontSize: FontSizes.sm,
|
||||||
|
color: AppColors.textMuted,
|
||||||
|
},
|
||||||
|
lastSeenText: {
|
||||||
|
fontSize: FontSizes.sm,
|
||||||
|
color: AppColors.textMuted,
|
||||||
|
},
|
||||||
|
// Section
|
||||||
|
section: {
|
||||||
|
marginBottom: Spacing.lg,
|
||||||
|
},
|
||||||
|
sectionTitle: {
|
||||||
|
fontSize: FontSizes.sm,
|
||||||
|
fontWeight: FontWeights.semibold,
|
||||||
|
color: AppColors.textSecondary,
|
||||||
|
marginBottom: Spacing.md,
|
||||||
|
textTransform: 'uppercase',
|
||||||
|
letterSpacing: 0.5,
|
||||||
|
},
|
||||||
|
// Details Card
|
||||||
|
detailsCard: {
|
||||||
|
backgroundColor: AppColors.surface,
|
||||||
|
borderRadius: BorderRadius.lg,
|
||||||
|
padding: Spacing.md,
|
||||||
|
...Shadows.xs,
|
||||||
|
},
|
||||||
|
detailRow: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'center',
|
||||||
|
paddingVertical: Spacing.sm,
|
||||||
|
},
|
||||||
|
detailLabel: {
|
||||||
|
fontSize: FontSizes.sm,
|
||||||
|
color: AppColors.textMuted,
|
||||||
|
},
|
||||||
|
detailValue: {
|
||||||
|
fontSize: FontSizes.sm,
|
||||||
|
fontWeight: FontWeights.semibold,
|
||||||
|
color: AppColors.textPrimary,
|
||||||
|
},
|
||||||
|
detailDivider: {
|
||||||
|
height: 1,
|
||||||
|
backgroundColor: AppColors.border,
|
||||||
|
},
|
||||||
|
// BLE Connection
|
||||||
|
connectedCard: {
|
||||||
|
backgroundColor: AppColors.surface,
|
||||||
|
borderRadius: BorderRadius.lg,
|
||||||
|
padding: Spacing.md,
|
||||||
|
...Shadows.xs,
|
||||||
|
},
|
||||||
|
connectedHeader: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: Spacing.sm,
|
||||||
|
marginBottom: Spacing.md,
|
||||||
|
},
|
||||||
|
connectedText: {
|
||||||
|
fontSize: FontSizes.base,
|
||||||
|
fontWeight: FontWeights.semibold,
|
||||||
|
color: AppColors.success,
|
||||||
|
},
|
||||||
|
disconnectButton: {
|
||||||
|
paddingVertical: Spacing.sm,
|
||||||
|
paddingHorizontal: Spacing.md,
|
||||||
|
borderRadius: BorderRadius.md,
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: AppColors.border,
|
||||||
|
alignItems: 'center',
|
||||||
|
},
|
||||||
|
disconnectButtonText: {
|
||||||
|
fontSize: FontSizes.sm,
|
||||||
|
fontWeight: FontWeights.medium,
|
||||||
|
color: AppColors.textSecondary,
|
||||||
|
},
|
||||||
|
connectButton: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
backgroundColor: AppColors.primary,
|
||||||
|
paddingVertical: Spacing.md,
|
||||||
|
borderRadius: BorderRadius.lg,
|
||||||
|
gap: Spacing.sm,
|
||||||
|
...Shadows.sm,
|
||||||
|
},
|
||||||
|
connectButtonText: {
|
||||||
|
fontSize: FontSizes.base,
|
||||||
|
fontWeight: FontWeights.semibold,
|
||||||
|
color: AppColors.white,
|
||||||
|
},
|
||||||
|
// WiFi Status
|
||||||
|
loadingWiFiCard: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: Spacing.md,
|
||||||
|
backgroundColor: AppColors.surface,
|
||||||
|
borderRadius: BorderRadius.lg,
|
||||||
|
padding: Spacing.md,
|
||||||
|
...Shadows.xs,
|
||||||
|
},
|
||||||
|
loadingWiFiText: {
|
||||||
|
fontSize: FontSizes.sm,
|
||||||
|
color: AppColors.textSecondary,
|
||||||
|
},
|
||||||
|
wifiCard: {
|
||||||
|
backgroundColor: AppColors.surface,
|
||||||
|
borderRadius: BorderRadius.lg,
|
||||||
|
padding: Spacing.md,
|
||||||
|
...Shadows.xs,
|
||||||
|
},
|
||||||
|
wifiHeader: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: Spacing.md,
|
||||||
|
marginBottom: Spacing.md,
|
||||||
|
},
|
||||||
|
wifiInfo: {
|
||||||
|
flex: 1,
|
||||||
|
},
|
||||||
|
wifiSSID: {
|
||||||
|
fontSize: FontSizes.base,
|
||||||
|
fontWeight: FontWeights.semibold,
|
||||||
|
color: AppColors.textPrimary,
|
||||||
|
marginBottom: 2,
|
||||||
|
},
|
||||||
|
wifiSignal: {
|
||||||
|
fontSize: FontSizes.sm,
|
||||||
|
fontWeight: FontWeights.medium,
|
||||||
|
},
|
||||||
|
changeWiFiButton: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
gap: Spacing.xs,
|
||||||
|
paddingVertical: Spacing.sm,
|
||||||
|
paddingHorizontal: Spacing.md,
|
||||||
|
borderRadius: BorderRadius.md,
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: AppColors.primary,
|
||||||
|
},
|
||||||
|
changeWiFiText: {
|
||||||
|
fontSize: FontSizes.sm,
|
||||||
|
fontWeight: FontWeights.medium,
|
||||||
|
color: AppColors.primary,
|
||||||
|
},
|
||||||
|
noWiFiCard: {
|
||||||
|
alignItems: 'center',
|
||||||
|
backgroundColor: AppColors.surface,
|
||||||
|
borderRadius: BorderRadius.lg,
|
||||||
|
padding: Spacing.xl,
|
||||||
|
...Shadows.xs,
|
||||||
|
},
|
||||||
|
noWiFiText: {
|
||||||
|
fontSize: FontSizes.base,
|
||||||
|
color: AppColors.textMuted,
|
||||||
|
marginTop: Spacing.md,
|
||||||
|
marginBottom: Spacing.md,
|
||||||
|
},
|
||||||
|
setupWiFiButton: {
|
||||||
|
paddingVertical: Spacing.sm,
|
||||||
|
paddingHorizontal: Spacing.lg,
|
||||||
|
},
|
||||||
|
setupWiFiText: {
|
||||||
|
fontSize: FontSizes.base,
|
||||||
|
fontWeight: FontWeights.semibold,
|
||||||
|
color: AppColors.primary,
|
||||||
|
},
|
||||||
|
// Actions
|
||||||
|
actionsCard: {
|
||||||
|
backgroundColor: AppColors.surface,
|
||||||
|
borderRadius: BorderRadius.lg,
|
||||||
|
padding: Spacing.md,
|
||||||
|
...Shadows.xs,
|
||||||
|
},
|
||||||
|
actionButton: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: Spacing.sm,
|
||||||
|
paddingVertical: Spacing.sm,
|
||||||
|
},
|
||||||
|
actionButtonText: {
|
||||||
|
fontSize: FontSizes.base,
|
||||||
|
fontWeight: FontWeights.medium,
|
||||||
|
color: AppColors.primary,
|
||||||
|
},
|
||||||
|
actionDivider: {
|
||||||
|
height: 1,
|
||||||
|
backgroundColor: AppColors.border,
|
||||||
|
marginVertical: Spacing.sm,
|
||||||
|
},
|
||||||
|
// Info Card
|
||||||
|
infoCard: {
|
||||||
|
backgroundColor: AppColors.infoLight,
|
||||||
|
borderRadius: BorderRadius.lg,
|
||||||
|
padding: Spacing.md,
|
||||||
|
},
|
||||||
|
infoHeader: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: Spacing.sm,
|
||||||
|
marginBottom: Spacing.xs,
|
||||||
|
},
|
||||||
|
infoTitle: {
|
||||||
|
fontSize: FontSizes.sm,
|
||||||
|
fontWeight: FontWeights.semibold,
|
||||||
|
color: AppColors.info,
|
||||||
|
},
|
||||||
|
infoText: {
|
||||||
|
fontSize: FontSizes.sm,
|
||||||
|
color: AppColors.info,
|
||||||
|
lineHeight: 20,
|
||||||
|
},
|
||||||
|
});
|
||||||
Loading…
x
Reference in New Issue
Block a user