ca820b25fb
- Add sensor index badge (1/5, 2/5...) on each card - Add elapsed time display for processing sensors - Add auto-scroll to current active sensor - Add animated progress bar with success/error segments - Add stats row showing success/error/skipped counts - Improve visual feedback during batch WiFi setup 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
619 lines
17 KiB
TypeScript
619 lines
17 KiB
TypeScript
import React, { useRef, useEffect, useState } from 'react';
|
|
import {
|
|
View,
|
|
Text,
|
|
StyleSheet,
|
|
ScrollView,
|
|
TouchableOpacity,
|
|
ActivityIndicator,
|
|
Animated,
|
|
DimensionValue,
|
|
} from 'react-native';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import type { SensorSetupState, SensorSetupStep } from '@/types';
|
|
import {
|
|
AppColors,
|
|
BorderRadius,
|
|
FontSizes,
|
|
FontWeights,
|
|
Spacing,
|
|
Shadows,
|
|
} from '@/constants/theme';
|
|
|
|
interface BatchSetupProgressProps {
|
|
sensors: SensorSetupState[];
|
|
currentIndex: number;
|
|
ssid: string;
|
|
isPaused: boolean;
|
|
onRetry?: (deviceId: string) => void;
|
|
onSkip?: (deviceId: string) => void;
|
|
onCancelAll?: () => void;
|
|
}
|
|
|
|
// Format elapsed time as "Xs" or "Xm Xs"
|
|
function formatElapsedTime(startTime?: number, endTime?: number): string {
|
|
if (!startTime) return '';
|
|
const end = endTime || Date.now();
|
|
const elapsed = Math.floor((end - startTime) / 1000);
|
|
if (elapsed < 60) return `${elapsed}s`;
|
|
const minutes = Math.floor(elapsed / 60);
|
|
const seconds = elapsed % 60;
|
|
return `${minutes}m ${seconds}s`;
|
|
}
|
|
|
|
const STEP_LABELS: Record<SensorSetupStep['name'], string> = {
|
|
connect: 'Connecting',
|
|
unlock: 'Unlocking',
|
|
wifi: 'Setting WiFi',
|
|
attach: 'Registering',
|
|
reboot: 'Rebooting',
|
|
};
|
|
|
|
function StepIndicator({ step }: { step: SensorSetupStep }) {
|
|
const getIcon = () => {
|
|
switch (step.status) {
|
|
case 'completed':
|
|
return <Ionicons name="checkmark" size={12} color={AppColors.success} />;
|
|
case 'in_progress':
|
|
return <ActivityIndicator size={10} color={AppColors.primary} />;
|
|
case 'failed':
|
|
return <Ionicons name="close" size={12} color={AppColors.error} />;
|
|
default:
|
|
return <View style={styles.pendingDot} />;
|
|
}
|
|
};
|
|
|
|
const getTextColor = () => {
|
|
switch (step.status) {
|
|
case 'completed':
|
|
return AppColors.success;
|
|
case 'in_progress':
|
|
return AppColors.primary;
|
|
case 'failed':
|
|
return AppColors.error;
|
|
default:
|
|
return AppColors.textMuted;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<View style={styles.stepRow}>
|
|
<View style={styles.stepIcon}>{getIcon()}</View>
|
|
<Text style={[styles.stepLabel, { color: getTextColor() }]}>
|
|
{STEP_LABELS[step.name]}
|
|
</Text>
|
|
{step.error && (
|
|
<Text style={styles.stepError}>{step.error}</Text>
|
|
)}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
function SensorCard({
|
|
sensor,
|
|
isActive,
|
|
index,
|
|
total,
|
|
onRetry,
|
|
onSkip,
|
|
}: {
|
|
sensor: SensorSetupState;
|
|
isActive: boolean;
|
|
index: number;
|
|
total: number;
|
|
onRetry?: () => void;
|
|
onSkip?: () => void;
|
|
}) {
|
|
const [elapsedTime, setElapsedTime] = useState('');
|
|
|
|
// Update elapsed time for active sensors
|
|
useEffect(() => {
|
|
if (isActive && sensor.startTime && !sensor.endTime) {
|
|
const interval = setInterval(() => {
|
|
setElapsedTime(formatElapsedTime(sensor.startTime));
|
|
}, 1000);
|
|
return () => clearInterval(interval);
|
|
} else if (sensor.endTime && sensor.startTime) {
|
|
setElapsedTime(formatElapsedTime(sensor.startTime, sensor.endTime));
|
|
}
|
|
}, [isActive, sensor.startTime, sensor.endTime]);
|
|
const getStatusColor = () => {
|
|
switch (sensor.status) {
|
|
case 'success':
|
|
return AppColors.success;
|
|
case 'error':
|
|
return AppColors.error;
|
|
case 'skipped':
|
|
return AppColors.warning;
|
|
case 'pending':
|
|
return AppColors.textMuted;
|
|
default:
|
|
return AppColors.primary;
|
|
}
|
|
};
|
|
|
|
const getStatusIcon = () => {
|
|
switch (sensor.status) {
|
|
case 'success':
|
|
return <Ionicons name="checkmark-circle" size={24} color={AppColors.success} />;
|
|
case 'error':
|
|
return <Ionicons name="close-circle" size={24} color={AppColors.error} />;
|
|
case 'skipped':
|
|
return <Ionicons name="remove-circle" size={24} color={AppColors.warning} />;
|
|
case 'pending':
|
|
return <Ionicons name="ellipse-outline" size={24} color={AppColors.textMuted} />;
|
|
default:
|
|
return <ActivityIndicator size={20} color={AppColors.primary} />;
|
|
}
|
|
};
|
|
|
|
const showActions = sensor.status === 'error' && onRetry && onSkip;
|
|
const showProgress = sensor.status !== 'pending' && sensor.status !== 'skipped';
|
|
|
|
return (
|
|
<View style={[
|
|
styles.sensorCard,
|
|
isActive && styles.sensorCardActive,
|
|
sensor.status === 'success' && styles.sensorCardSuccess,
|
|
sensor.status === 'error' && styles.sensorCardError,
|
|
]}>
|
|
{/* Index Badge */}
|
|
<View style={[styles.indexBadge, { backgroundColor: getStatusColor() }]}>
|
|
<Text style={styles.indexBadgeText}>{index + 1}/{total}</Text>
|
|
</View>
|
|
|
|
<View style={styles.sensorHeader}>
|
|
<View style={[styles.sensorIcon, { backgroundColor: `${getStatusColor()}20` }]}>
|
|
<Ionicons name="water" size={20} color={getStatusColor()} />
|
|
</View>
|
|
<View style={styles.sensorInfo}>
|
|
<Text style={styles.sensorName}>{sensor.deviceName}</Text>
|
|
<View style={styles.sensorMetaRow}>
|
|
{sensor.wellId && (
|
|
<Text style={styles.sensorMeta}>Well ID: {sensor.wellId}</Text>
|
|
)}
|
|
{elapsedTime && showProgress && (
|
|
<Text style={styles.elapsedTime}>{elapsedTime}</Text>
|
|
)}
|
|
</View>
|
|
</View>
|
|
<View style={styles.statusIcon}>{getStatusIcon()}</View>
|
|
</View>
|
|
|
|
{/* Show steps for active or completed sensors */}
|
|
{(isActive || sensor.status === 'success' || sensor.status === 'error') && (
|
|
<View style={styles.stepsContainer}>
|
|
{sensor.steps.map((step, index) => (
|
|
<StepIndicator key={step.name} step={step} />
|
|
))}
|
|
</View>
|
|
)}
|
|
|
|
{/* Error message */}
|
|
{sensor.error && (
|
|
<View style={styles.errorContainer}>
|
|
<Ionicons name="alert-circle" size={16} color={AppColors.error} />
|
|
<Text style={styles.errorText}>{sensor.error}</Text>
|
|
</View>
|
|
)}
|
|
|
|
{/* Action buttons for failed sensors */}
|
|
{showActions && (
|
|
<View style={styles.actionButtons}>
|
|
<TouchableOpacity style={styles.retryButton} onPress={onRetry}>
|
|
<Ionicons name="refresh" size={16} color={AppColors.primary} />
|
|
<Text style={styles.retryText}>Retry</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity style={styles.skipButton} onPress={onSkip}>
|
|
<Ionicons name="arrow-forward" size={16} color={AppColors.textMuted} />
|
|
<Text style={styles.skipText}>Skip</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
)}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
export default function BatchSetupProgress({
|
|
sensors,
|
|
currentIndex,
|
|
ssid,
|
|
isPaused,
|
|
onRetry,
|
|
onSkip,
|
|
onCancelAll,
|
|
}: BatchSetupProgressProps) {
|
|
const scrollViewRef = useRef<ScrollView>(null);
|
|
const sensorCardRefs = useRef<{ [key: string]: View | null }>({});
|
|
const progressAnim = useRef(new Animated.Value(0)).current;
|
|
|
|
const completedCount = sensors.filter(s => s.status === 'success').length;
|
|
const failedCount = sensors.filter(s => s.status === 'error').length;
|
|
const skippedCount = sensors.filter(s => s.status === 'skipped').length;
|
|
const totalProcessed = completedCount + failedCount + skippedCount;
|
|
const progress = (totalProcessed / sensors.length) * 100;
|
|
|
|
// Animate progress bar
|
|
useEffect(() => {
|
|
Animated.timing(progressAnim, {
|
|
toValue: progress,
|
|
duration: 300,
|
|
useNativeDriver: false,
|
|
}).start();
|
|
}, [progress, progressAnim]);
|
|
|
|
// Auto-scroll to current sensor
|
|
useEffect(() => {
|
|
if (currentIndex >= 0 && scrollViewRef.current) {
|
|
// Calculate approximate scroll position (each card ~120px + spacing)
|
|
const cardHeight = 120;
|
|
const spacing = 12;
|
|
const scrollTo = currentIndex * (cardHeight + spacing);
|
|
|
|
setTimeout(() => {
|
|
scrollViewRef.current?.scrollTo({
|
|
y: Math.max(0, scrollTo - 20), // Small offset for visibility
|
|
animated: true,
|
|
});
|
|
}, 100);
|
|
}
|
|
}, [currentIndex]);
|
|
|
|
const animatedWidth = progressAnim.interpolate({
|
|
inputRange: [0, 100],
|
|
outputRange: ['0%', '100%'],
|
|
});
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
{/* Progress Header */}
|
|
<View style={styles.progressHeader}>
|
|
<View style={styles.progressTitleRow}>
|
|
<Text style={styles.progressTitle}>
|
|
Connecting to "{ssid}"
|
|
</Text>
|
|
{!isPaused && currentIndex < sensors.length && (
|
|
<View style={styles.currentSensorBadge}>
|
|
<Text style={styles.currentSensorBadgeText}>
|
|
{currentIndex + 1}/{sensors.length}
|
|
</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
<Text style={styles.progressSubtitle}>
|
|
{isPaused ? (
|
|
<Text style={styles.pausedText}>Paused - action required</Text>
|
|
) : totalProcessed === sensors.length ? (
|
|
'Setup complete!'
|
|
) : (
|
|
`Processing sensor ${currentIndex + 1} of ${sensors.length}...`
|
|
)}
|
|
</Text>
|
|
|
|
{/* Animated Progress bar */}
|
|
<View style={styles.progressBarContainer}>
|
|
<Animated.View style={[styles.progressBar, { width: animatedWidth }]} />
|
|
{/* Success/Error segments */}
|
|
<View style={styles.progressSegments}>
|
|
{sensors.map((sensor) => {
|
|
const segmentWidth: DimensionValue = `${100 / sensors.length}%`;
|
|
let backgroundColor = 'transparent';
|
|
if (sensor.status === 'success') backgroundColor = AppColors.success;
|
|
else if (sensor.status === 'error') backgroundColor = AppColors.error;
|
|
else if (sensor.status === 'skipped') backgroundColor = AppColors.warning;
|
|
return (
|
|
<View
|
|
key={sensor.deviceId}
|
|
style={[
|
|
styles.progressSegment,
|
|
{ width: segmentWidth, backgroundColor },
|
|
]}
|
|
/>
|
|
);
|
|
})}
|
|
</View>
|
|
</View>
|
|
|
|
{/* Stats Row */}
|
|
<View style={styles.statsRow}>
|
|
{completedCount > 0 && (
|
|
<View style={styles.statItem}>
|
|
<Ionicons name="checkmark-circle" size={14} color={AppColors.success} />
|
|
<Text style={[styles.statText, { color: AppColors.success }]}>{completedCount}</Text>
|
|
</View>
|
|
)}
|
|
{failedCount > 0 && (
|
|
<View style={styles.statItem}>
|
|
<Ionicons name="close-circle" size={14} color={AppColors.error} />
|
|
<Text style={[styles.statText, { color: AppColors.error }]}>{failedCount}</Text>
|
|
</View>
|
|
)}
|
|
{skippedCount > 0 && (
|
|
<View style={styles.statItem}>
|
|
<Ionicons name="remove-circle" size={14} color={AppColors.warning} />
|
|
<Text style={[styles.statText, { color: AppColors.warning }]}>{skippedCount}</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
</View>
|
|
|
|
{/* Sensors List */}
|
|
<ScrollView
|
|
ref={scrollViewRef}
|
|
style={styles.sensorsList}
|
|
contentContainerStyle={styles.sensorsListContent}
|
|
showsVerticalScrollIndicator={false}
|
|
>
|
|
{sensors.map((sensor, index) => (
|
|
<SensorCard
|
|
key={sensor.deviceId}
|
|
sensor={sensor}
|
|
isActive={index === currentIndex && !isPaused}
|
|
index={index}
|
|
total={sensors.length}
|
|
onRetry={onRetry ? () => onRetry(sensor.deviceId) : undefined}
|
|
onSkip={onSkip ? () => onSkip(sensor.deviceId) : undefined}
|
|
/>
|
|
))}
|
|
</ScrollView>
|
|
|
|
{/* Cancel button */}
|
|
{onCancelAll && (
|
|
<TouchableOpacity style={styles.cancelAllButton} onPress={onCancelAll}>
|
|
<Text style={styles.cancelAllText}>Cancel Setup</Text>
|
|
</TouchableOpacity>
|
|
)}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
},
|
|
progressHeader: {
|
|
marginBottom: Spacing.lg,
|
|
},
|
|
progressTitleRow: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
marginBottom: Spacing.xs,
|
|
},
|
|
progressTitle: {
|
|
fontSize: FontSizes.lg,
|
|
fontWeight: FontWeights.semibold,
|
|
color: AppColors.textPrimary,
|
|
flex: 1,
|
|
},
|
|
currentSensorBadge: {
|
|
backgroundColor: AppColors.primary,
|
|
paddingHorizontal: Spacing.sm,
|
|
paddingVertical: Spacing.xs,
|
|
borderRadius: BorderRadius.md,
|
|
},
|
|
currentSensorBadgeText: {
|
|
fontSize: FontSizes.xs,
|
|
fontWeight: FontWeights.bold,
|
|
color: AppColors.white,
|
|
},
|
|
progressSubtitle: {
|
|
fontSize: FontSizes.sm,
|
|
color: AppColors.textSecondary,
|
|
marginBottom: Spacing.md,
|
|
},
|
|
pausedText: {
|
|
color: AppColors.warning,
|
|
fontWeight: FontWeights.medium,
|
|
},
|
|
progressBarContainer: {
|
|
height: 6,
|
|
backgroundColor: AppColors.border,
|
|
borderRadius: 3,
|
|
overflow: 'hidden',
|
|
position: 'relative',
|
|
},
|
|
progressBar: {
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
height: '100%',
|
|
backgroundColor: AppColors.primary,
|
|
borderRadius: 3,
|
|
opacity: 0.3,
|
|
},
|
|
progressSegments: {
|
|
flexDirection: 'row',
|
|
height: '100%',
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
},
|
|
progressSegment: {
|
|
height: '100%',
|
|
},
|
|
statsRow: {
|
|
flexDirection: 'row',
|
|
marginTop: Spacing.sm,
|
|
gap: Spacing.md,
|
|
},
|
|
statItem: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 4,
|
|
},
|
|
statText: {
|
|
fontSize: FontSizes.xs,
|
|
fontWeight: FontWeights.medium,
|
|
},
|
|
sensorsList: {
|
|
flex: 1,
|
|
},
|
|
sensorsListContent: {
|
|
gap: Spacing.md,
|
|
paddingBottom: Spacing.lg,
|
|
},
|
|
sensorCard: {
|
|
backgroundColor: AppColors.surface,
|
|
borderRadius: BorderRadius.lg,
|
|
padding: Spacing.md,
|
|
position: 'relative',
|
|
overflow: 'hidden',
|
|
...Shadows.xs,
|
|
},
|
|
sensorCardActive: {
|
|
borderWidth: 2,
|
|
borderColor: AppColors.primary,
|
|
},
|
|
sensorCardSuccess: {
|
|
borderWidth: 1,
|
|
borderColor: AppColors.success,
|
|
},
|
|
sensorCardError: {
|
|
borderWidth: 1,
|
|
borderColor: AppColors.error,
|
|
},
|
|
indexBadge: {
|
|
position: 'absolute',
|
|
top: 0,
|
|
right: 0,
|
|
paddingHorizontal: Spacing.sm,
|
|
paddingVertical: 2,
|
|
borderBottomLeftRadius: BorderRadius.md,
|
|
},
|
|
indexBadgeText: {
|
|
fontSize: FontSizes.xs,
|
|
fontWeight: FontWeights.bold,
|
|
color: AppColors.white,
|
|
},
|
|
sensorHeader: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
},
|
|
sensorIcon: {
|
|
width: 40,
|
|
height: 40,
|
|
borderRadius: BorderRadius.md,
|
|
backgroundColor: AppColors.primaryLighter,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
marginRight: Spacing.sm,
|
|
},
|
|
sensorInfo: {
|
|
flex: 1,
|
|
},
|
|
sensorName: {
|
|
fontSize: FontSizes.base,
|
|
fontWeight: FontWeights.semibold,
|
|
color: AppColors.textPrimary,
|
|
},
|
|
sensorMetaRow: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: Spacing.sm,
|
|
},
|
|
sensorMeta: {
|
|
fontSize: FontSizes.xs,
|
|
color: AppColors.textMuted,
|
|
},
|
|
elapsedTime: {
|
|
fontSize: FontSizes.xs,
|
|
fontWeight: FontWeights.medium,
|
|
color: AppColors.primary,
|
|
},
|
|
statusIcon: {
|
|
marginLeft: Spacing.sm,
|
|
},
|
|
stepsContainer: {
|
|
marginTop: Spacing.md,
|
|
paddingTop: Spacing.sm,
|
|
borderTopWidth: 1,
|
|
borderTopColor: AppColors.border,
|
|
gap: Spacing.xs,
|
|
},
|
|
stepRow: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: Spacing.sm,
|
|
},
|
|
stepIcon: {
|
|
width: 16,
|
|
height: 16,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
pendingDot: {
|
|
width: 6,
|
|
height: 6,
|
|
borderRadius: 3,
|
|
backgroundColor: AppColors.textMuted,
|
|
},
|
|
stepLabel: {
|
|
fontSize: FontSizes.sm,
|
|
fontWeight: FontWeights.medium,
|
|
},
|
|
stepError: {
|
|
fontSize: FontSizes.xs,
|
|
color: AppColors.error,
|
|
flex: 1,
|
|
},
|
|
errorContainer: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
marginTop: Spacing.sm,
|
|
padding: Spacing.sm,
|
|
backgroundColor: AppColors.errorLight,
|
|
borderRadius: BorderRadius.sm,
|
|
gap: Spacing.xs,
|
|
},
|
|
errorText: {
|
|
fontSize: FontSizes.xs,
|
|
color: AppColors.error,
|
|
flex: 1,
|
|
},
|
|
actionButtons: {
|
|
flexDirection: 'row',
|
|
marginTop: Spacing.md,
|
|
gap: Spacing.md,
|
|
},
|
|
retryButton: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
paddingVertical: Spacing.xs,
|
|
paddingHorizontal: Spacing.md,
|
|
backgroundColor: AppColors.primaryLighter,
|
|
borderRadius: BorderRadius.md,
|
|
gap: Spacing.xs,
|
|
},
|
|
retryText: {
|
|
fontSize: FontSizes.sm,
|
|
fontWeight: FontWeights.medium,
|
|
color: AppColors.primary,
|
|
},
|
|
skipButton: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
paddingVertical: Spacing.xs,
|
|
paddingHorizontal: Spacing.md,
|
|
backgroundColor: AppColors.surfaceSecondary,
|
|
borderRadius: BorderRadius.md,
|
|
gap: Spacing.xs,
|
|
},
|
|
skipText: {
|
|
fontSize: FontSizes.sm,
|
|
fontWeight: FontWeights.medium,
|
|
color: AppColors.textMuted,
|
|
},
|
|
cancelAllButton: {
|
|
alignItems: 'center',
|
|
paddingVertical: Spacing.sm,
|
|
marginTop: Spacing.md,
|
|
},
|
|
cancelAllText: {
|
|
fontSize: FontSizes.sm,
|
|
fontWeight: FontWeights.medium,
|
|
color: AppColors.error,
|
|
},
|
|
});
|