Récupération de la liste des trains empruntés
This commit is contained in:
@ -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 />
|
||||
</>
|
||||
}
|
||||
|
Reference in New Issue
Block a user