96 lines
3.9 KiB
TypeScript
96 lines
3.9 KiB
TypeScript
import PenaltyBanner from '@/components/PenalyBanner'
|
|
import { useAddTrainMutation } from '@/hooks/mutations/useTrainMutation'
|
|
import { useAuth } from '@/hooks/useAuth'
|
|
import { useTrain } from '@/hooks/useTrain'
|
|
import { TrainTrip } from '@/utils/features/train/trainSlice'
|
|
import { FontAwesome6 } from '@expo/vector-icons'
|
|
import { useMemo, useState } from 'react'
|
|
import { FlatList, StyleSheet } from 'react-native'
|
|
import { Button, Dialog, Divider, FAB, HelperText, List, Portal, Surface, Text, TextInput } from 'react-native-paper'
|
|
|
|
export default function TrainScreen() {
|
|
const [addTrainVisible, setAddTrainVisible] = useState(false)
|
|
const [addTrainUrl, setAddTrainUrl] = useState("")
|
|
const trainId = useMemo(() => /[0-9A-F]{8}-[0-9A-F]{4}-[0-9A-F]{4}-[0-9A-F]{4}-[0-9A-F]{12}/.exec(addTrainUrl)?.[0], [addTrainUrl])
|
|
|
|
const auth = useAuth()
|
|
const addTrainMutation = useAddTrainMutation({
|
|
auth,
|
|
onPostSuccess: () => setAddTrainVisible(false)
|
|
})
|
|
|
|
const trains = useTrain()
|
|
|
|
return (
|
|
<Surface style={{ flex: 1 }}>
|
|
<PenaltyBanner />
|
|
<FlatList
|
|
data={trains.trains}
|
|
keyExtractor={(train) => train.id}
|
|
ItemSeparatorComponent={() => <Divider />}
|
|
renderItem={(item) => <TrainListItem train={item.item} />} />
|
|
<FAB
|
|
icon='plus'
|
|
style={styles.addTrainButton}
|
|
onPress={() => setAddTrainVisible(true)} />
|
|
<Portal>
|
|
<Dialog visible={addTrainVisible} onDismiss={() => setAddTrainVisible(false)}>
|
|
<Dialog.Title>Ajout d'un train</Dialog.Title>
|
|
<Dialog.Content>
|
|
<TextInput
|
|
label="URL de partage RailPlanner"
|
|
autoComplete='url'
|
|
inputMode='url'
|
|
defaultValue={addTrainUrl}
|
|
multiline={true}
|
|
onChangeText={setAddTrainUrl}
|
|
error={!trainId}
|
|
onEndEditing={() => {
|
|
if (trainId !== undefined)
|
|
addTrainMutation.mutate(trainId)
|
|
}}
|
|
placeholder="https://eurailapp.com/share/journey?id=XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX&type=list&brand=interrail" />
|
|
<HelperText type='error' visible={!trainId && addTrainVisible}>
|
|
Le champ doit contenir l'identifiant d'un voyage au format UUID. {trainId}
|
|
</HelperText>
|
|
</Dialog.Content>
|
|
<Dialog.Actions>
|
|
<Button onPress={() => setAddTrainVisible(false)}>Annuler</Button>
|
|
<Button onPress={() => {
|
|
if (trainId !== undefined)
|
|
addTrainMutation.mutate(trainId)
|
|
}} disabled={trainId === undefined || addTrainMutation.isPending}>Ajouter</Button>
|
|
</Dialog.Actions>
|
|
</Dialog>
|
|
</Portal>
|
|
</Surface>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
addTrainButton: {
|
|
position: 'absolute',
|
|
right: 25,
|
|
bottom: 25,
|
|
}
|
|
})
|
|
|
|
function TrainListItem({ train }: { train: TrainTrip }) {
|
|
const depDateTime = new Date(train.departureTime)
|
|
const depDate = depDateTime.toLocaleDateString()
|
|
const depTime = depDateTime.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })
|
|
const arrDateTime = new Date(train.arrivalTime)
|
|
const arrTime = arrDateTime.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })
|
|
const durationInMinutes = (arrDateTime.getTime() - depDateTime.getTime()) / 1000 / 60
|
|
const duration = `${Math.floor(durationInMinutes / 60).toString().padStart(2, '0')}:${Math.floor(durationInMinutes % 60).toString().padStart(2, '0')}`
|
|
const title = `${train.from} ${depTime} => ${train.to} ${arrTime} (${depDate})`
|
|
const distanceKm = Math.ceil(train.distance / 1000)
|
|
const cost = 10 * distanceKm
|
|
return <>
|
|
<List.Item
|
|
title={title}
|
|
description={<><Text>Durée : {duration}, distance : {distanceKm} km, coût : {cost}</Text> <FontAwesome6 name='coins' /></>}
|
|
/>
|
|
</>
|
|
}
|