fegger
834025e560
Replace live countdown with formatted leave time in headers and list items Remove ticking interval and calculateCountdown import from EventHeader Update EventListScreen to derive leave countdown and labels and adjust badge, dot color, status logic and fallbacks Update tests to expect 'Losgehen in'
77 lines
3.0 KiB
TypeScript
77 lines
3.0 KiB
TypeScript
import { StyleSheet, Text, View } from 'react-native';
|
|
import type { Event } from '@timetoleave/core';
|
|
import type { AppColors } from '../hooks/useColors';
|
|
|
|
/** Props for the event detail header showing title, destination, times, and buffers. */
|
|
interface Props {
|
|
event: Event;
|
|
leaveByTime: Date | null;
|
|
arrivalBufferMinutes: number;
|
|
colors: AppColors;
|
|
}
|
|
|
|
/**
|
|
* Renders the event title, destination, leave-by time, data source, and a
|
|
* three-column grid with leave-by time, arrive-by time, and buffer.
|
|
*/
|
|
export function EventHeader({ event, leaveByTime, arrivalBufferMinutes, colors }: Props) {
|
|
const arriveByTime = new Date(event.eventTime.getTime() - arrivalBufferMinutes * 60_000);
|
|
|
|
return (
|
|
<View style={[styles.container, { backgroundColor: colors.card }]}>
|
|
<Text style={[styles.title, { color: colors.text }]}>{event.title}</Text>
|
|
<Text style={[styles.destination, { color: colors.subtext }]}>{event.destination}</Text>
|
|
<Text style={[styles.leaveTime, { color: leaveByTime ? colors.accent : colors.subtext }]}>
|
|
{leaveByTime
|
|
? `Losgehen um ${leaveByTime.toLocaleTimeString('de-AT', { hour: '2-digit', minute: '2-digit' })}`
|
|
: 'Losgehzeit wird berechnet'}
|
|
</Text>
|
|
<Text style={[styles.source, { color: colors.subtext }]}>Quelle: {event.source}</Text>
|
|
|
|
<View style={[styles.infoGrid, { borderTopColor: colors.border }]}>
|
|
<View style={styles.infoBox}>
|
|
<Text style={[styles.infoLabel, { color: colors.subtext }]}>Losgehen um</Text>
|
|
<Text style={[styles.infoValue, { color: colors.text }]}>
|
|
{leaveByTime
|
|
? leaveByTime.toLocaleTimeString('de-AT', { hour: '2-digit', minute: '2-digit' })
|
|
: '—'}
|
|
</Text>
|
|
</View>
|
|
<View style={styles.infoBox}>
|
|
<Text style={[styles.infoLabel, { color: colors.subtext }]}>Ankommen um</Text>
|
|
<Text style={[styles.infoValue, { color: colors.text }]}>
|
|
{arriveByTime.toLocaleTimeString('de-AT', { hour: '2-digit', minute: '2-digit' })}
|
|
</Text>
|
|
</View>
|
|
<View style={styles.infoBox}>
|
|
<Text style={[styles.infoLabel, { color: colors.subtext }]}>Puffer</Text>
|
|
<Text style={[styles.infoValue, { color: colors.text }]}>{arrivalBufferMinutes} min</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: { padding: 20, marginBottom: 12 },
|
|
title: { fontSize: 22, fontWeight: '700' },
|
|
destination: { fontSize: 16, marginTop: 4 },
|
|
leaveTime: { fontSize: 18, fontWeight: '700', marginTop: 10 },
|
|
source: { fontSize: 12, marginTop: 4 },
|
|
infoGrid: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
marginTop: 16,
|
|
paddingTop: 16,
|
|
borderTopWidth: 1,
|
|
},
|
|
infoBox: { alignItems: 'center' },
|
|
infoLabel: {
|
|
fontSize: 11,
|
|
fontWeight: '600',
|
|
textTransform: 'uppercase',
|
|
letterSpacing: 1,
|
|
},
|
|
infoValue: { fontSize: 16, fontWeight: '700', marginTop: 4 },
|
|
});
|