64 lines
2.5 KiB
JavaScript
64 lines
2.5 KiB
JavaScript
import React from 'react';
|
|
import { Alert, Pressable, Text, View } from 'react-native';
|
|
import { styles } from '../styles';
|
|
|
|
export default function HistoryTab({
|
|
selectedTrip,
|
|
selectedTripCheckups,
|
|
selectedCheckupId,
|
|
setSelectedCheckupId,
|
|
onDeleteCheckup,
|
|
}) {
|
|
function askDelete(checkup) {
|
|
Alert.alert('Delete check-up?', 'This snapshot will be removed from history.', [
|
|
{ text: 'Cancel', style: 'cancel' },
|
|
{
|
|
text: 'Delete',
|
|
style: 'destructive',
|
|
onPress: () => onDeleteCheckup(checkup.id),
|
|
},
|
|
]);
|
|
}
|
|
|
|
return (
|
|
<View style={styles.section}>
|
|
<Text style={styles.sectionTitle}>History</Text>
|
|
|
|
{!selectedTrip ? <Text style={styles.muted}>Select a trip first.</Text> : null}
|
|
{selectedTrip ? <Text style={styles.tripHistoryLabel}>Check-ups for: {selectedTrip.name}</Text> : null}
|
|
{selectedTrip && selectedTripCheckups.length === 0 ? <Text style={styles.muted}>No check-ups saved yet.</Text> : null}
|
|
|
|
{selectedTripCheckups.map((checkup) => (
|
|
<View key={checkup.id} style={styles.cardSoft}>
|
|
<Pressable
|
|
onPress={() => setSelectedCheckupId((prev) => (prev === checkup.id ? null : checkup.id))}
|
|
onLongPress={() => askDelete(checkup)}
|
|
delayLongPress={280}
|
|
>
|
|
<Text style={styles.cardTitle}>{new Date(checkup.createdAt).toLocaleString()}</Text>
|
|
<Text style={styles.cardMeta}>
|
|
{checkup.snapshot.length} items · correct: {checkup.stats?.correct ?? checkup.snapshot.filter((x) => x.result === 'correct').length} · bad:{' '}
|
|
{checkup.stats?.bad ?? checkup.snapshot.filter((x) => x.result === 'bad').length}
|
|
</Text>
|
|
<Text style={styles.cardMeta}>{selectedCheckupId === checkup.id ? 'Tap to collapse' : 'Tap to open'} · long hold to delete</Text>
|
|
</Pressable>
|
|
|
|
{selectedCheckupId === checkup.id ? (
|
|
<View style={styles.snapshotWrap}>
|
|
{checkup.snapshot.map((entry) => (
|
|
<View key={entry.itemId} style={styles.snapshotRow}>
|
|
<Text style={styles.snapshotTitle}>{entry.name}</Text>
|
|
<Text style={styles.cardMeta}>
|
|
{entry.status} · {entry.placement}
|
|
{entry.status === 'lent-to' && entry.lentTo ? ` · ${entry.lentTo}` : ''}
|
|
</Text>
|
|
</View>
|
|
))}
|
|
</View>
|
|
) : null}
|
|
</View>
|
|
))}
|
|
</View>
|
|
);
|
|
}
|