Enregistrement de trajet en train

client/app/(tabs)/_layout.tsx

@@ -33,7 +33,7 @@ export default function TabLayout() {
       <Tabs.Screen
         name="train"
         options={{
-          title: 'Ajouter un trajet',
+          title: 'Trains',
           headerTitleStyle: {fontSize: 32},
           tabBarIcon: ({ color }) => <FontAwesome6 name="train" size={24} color={color} />,
         }}

client/app/(tabs)/index.tsx

@@ -27,7 +27,7 @@ export default function MapScreen() {
           visible={game.gameStarted || game.money > 0}
           size='small'
           color='black'
-          icon={game.currentRunner ? 'run-fast' : 'police-badge'}
+          icon={game.currentRunner ? 'run-fast' : () => <FontAwesome6 name='cat' size={20} />}
           label={game.currentRunner ? "Coureuse" : "Poursuiveuse"} />
     </Surface>
   )

client/app/(tabs)/train.tsx

@@ -1,10 +1,65 @@
-import { ScrollView } from 'react-native'
-import { Surface, Text } from 'react-native-paper'
+import { useAddTrainMutation } from '@/hooks/mutations/useTrainMutation'
+import { useAuth } from '@/hooks/useAuth'
+import { useMemo, useState } from 'react'
+import { StyleSheet } from 'react-native'
+import { Button, Dialog, FAB, HelperText, 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)
+  })
+
   return (
-    <Surface>
-      <Text>Ici on aura la page pour ajouter un trajet en train depuis Rail Planner</Text>
+    <Surface style={{ flex: 1 }}>
+      <Text variant='bodyMedium'>Ici on aura la page pour ajouter un trajet en train depuis Rail Planner</Text>
+      <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,
+  }
+})