113 lines
4.2 KiB
JavaScript
113 lines
4.2 KiB
JavaScript
import React from 'react';
|
|
import { Image, Pressable, Text, TextInput, View } from 'react-native';
|
|
import Field from '../components/Field';
|
|
import { styles } from '../styles';
|
|
|
|
function DateField({ label, value, onPress }) {
|
|
return (
|
|
<Field label={label}>
|
|
<Pressable style={styles.dateInput} onPress={onPress}>
|
|
<Text style={styles.dateInputText}>{value}</Text>
|
|
</Pressable>
|
|
</Field>
|
|
);
|
|
}
|
|
|
|
export default function TripsTab({
|
|
tripForm,
|
|
updateTripForm,
|
|
pickTripImage,
|
|
templateTrip,
|
|
createTrip,
|
|
trips,
|
|
selectedTripId,
|
|
chooseTrip,
|
|
setTripAsTemplate,
|
|
deleteTrip,
|
|
onInputFocus,
|
|
defaultTemplateTripId,
|
|
openDatePicker,
|
|
}) {
|
|
return (
|
|
<View style={styles.section}>
|
|
<Text style={styles.sectionTitle}>Trips</Text>
|
|
|
|
<View style={styles.cardSoft}>
|
|
<Field label="Name">
|
|
<TextInput
|
|
style={styles.input}
|
|
value={tripForm.name}
|
|
onChangeText={(v) => updateTripForm('name', v)}
|
|
placeholder="Summer Weekend"
|
|
placeholderTextColor="#6b7280"
|
|
onFocus={onInputFocus}
|
|
/>
|
|
</Field>
|
|
|
|
<Field label="Location">
|
|
<TextInput
|
|
style={styles.input}
|
|
value={tripForm.location}
|
|
onChangeText={(v) => updateTripForm('location', v)}
|
|
placeholder="Berlin"
|
|
placeholderTextColor="#6b7280"
|
|
onFocus={onInputFocus}
|
|
/>
|
|
</Field>
|
|
|
|
<DateField label="Start Date" value={tripForm.startDate} onPress={() => openDatePicker('startDate')} />
|
|
<DateField label="End Date" value={tripForm.endDate} onPress={() => openDatePicker('endDate')} />
|
|
|
|
<Pressable style={styles.secondaryBtn} onPress={pickTripImage}>
|
|
<Text style={styles.secondaryBtnText}>{tripForm.imageUri ? 'Change trip image' : 'Add trip image'}</Text>
|
|
</Pressable>
|
|
|
|
{tripForm.imageUri ? <Image source={{ uri: tripForm.imageUri }} style={styles.previewImage} /> : null}
|
|
|
|
{templateTrip ? (
|
|
<Pressable style={styles.inlineToggle} onPress={() => updateTripForm('copyDefaultTemplate', !tripForm.copyDefaultTemplate)}>
|
|
<Text style={styles.inlineToggleText}>
|
|
{tripForm.copyDefaultTemplate ? '☑' : '☐'} Copy items from template ({templateTrip.name})
|
|
</Text>
|
|
</Pressable>
|
|
) : null}
|
|
|
|
<Pressable style={styles.inlineToggle} onPress={() => updateTripForm('setAsDefaultTemplate', !tripForm.setAsDefaultTemplate)}>
|
|
<Text style={styles.inlineToggleText}>{tripForm.setAsDefaultTemplate ? '☑' : '☐'} Set as default template</Text>
|
|
</Pressable>
|
|
|
|
<Pressable style={styles.primaryBtn} onPress={createTrip}>
|
|
<Text style={styles.primaryBtnText}>Create Trip</Text>
|
|
</Pressable>
|
|
</View>
|
|
|
|
{trips
|
|
.slice()
|
|
.sort((a, b) => b.startDate.localeCompare(a.startDate))
|
|
.map((trip) => (
|
|
<View key={trip.id} style={[styles.card, selectedTripId === trip.id && styles.cardActive]}>
|
|
<View style={styles.cardRow}>
|
|
<View style={styles.flex}>
|
|
<Text style={styles.cardTitle}>{trip.name}</Text>
|
|
<Text style={styles.cardMeta}>{trip.location || 'No location'} · {trip.startDate} → {trip.endDate}</Text>
|
|
<Text style={styles.cardMeta}>{defaultTemplateTripId === trip.id ? 'Default template' : ' '}</Text>
|
|
</View>
|
|
<View style={styles.stackButtons}>
|
|
<Pressable style={styles.miniBtn} onPress={() => chooseTrip(trip.id)}>
|
|
<Text style={styles.miniBtnText}>Select</Text>
|
|
</Pressable>
|
|
<Pressable style={styles.miniBtn} onPress={() => setTripAsTemplate(trip.id)}>
|
|
<Text style={styles.miniBtnText}>Template</Text>
|
|
</Pressable>
|
|
<Pressable style={styles.miniBtnDanger} onPress={() => deleteTrip(trip.id)}>
|
|
<Text style={styles.miniBtnText}>Delete</Text>
|
|
</Pressable>
|
|
</View>
|
|
</View>
|
|
{trip.imageUri ? <Image source={{ uri: trip.imageUri }} style={styles.previewImageSmall} /> : null}
|
|
</View>
|
|
))}
|
|
</View>
|
|
);
|
|
}
|