Récupération de la liste des trains empruntés

This commit is contained in:
2024-12-12 14:56:17 +01:00
parent 33ee18d7e2
commit 38117ade07
4 changed files with 88 additions and 33 deletions

View File

@ -1,8 +1,11 @@
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 { StyleSheet } from 'react-native'
import { Button, Dialog, FAB, HelperText, Portal, Surface, Text, TextInput } from 'react-native-paper'
import { FlatList, StyleSheet } from 'react-native'
import { Badge, Button, Dialog, Divider, FAB, HelperText, List, Portal, Surface, Text, TextInput } from 'react-native-paper'
export default function TrainScreen() {
const [addTrainVisible, setAddTrainVisible] = useState(false)
@ -15,9 +18,13 @@ export default function TrainScreen() {
onPostSuccess: () => setAddTrainVisible(false)
})
const trains = useTrain()
return (
<Surface style={{ flex: 1 }}>
<Text variant='bodyMedium'>Ici on aura la page pour ajouter un trajet en train depuis Rail Planner</Text>
<FlatList
data={trains.trains}
renderItem={(item) => <TrainListItem train={item.item} />} />
<FAB
icon='plus'
style={styles.addTrainButton}
@ -63,3 +70,23 @@ const styles = StyleSheet.create({
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' /></>}
/>
<Divider />
</>
}