Feat: Ajout de la page pour nouveau chantier ( A CORRIGER)

app/(tabs)/_layout.tsx

@@ -7,14 +7,15 @@ import { HapticTab } from '@/components/haptic-tab';
 import { IconSymbol } from '@/components/ui/icon-symbol';
 import { Colors } from '@/constants/theme';
 import { useColorScheme } from '@/hooks/use-color-scheme';
-import AddChantier from './addChantier';
 import GestionOuvrier from './gestion_ouvrier';
 import ListMateriel from './gestionnaire_ressource';
 import Home from './home';
 import MapScreen from './mapScreen';
-
-
+import AddChantier from './addChantier';
 import AntDesign from '@expo/vector-icons/AntDesign';
+import { UserProvider } from '../ContextUser';
+import { ChantierProvider } from '../ContextChantier';
+import { RessourcesProvider } from '../ContextRessource';
 
 const Tabs = createBottomTabNavigator();
 
@@ -22,59 +23,67 @@ export default function TabLayout() {
   const colorScheme = useColorScheme();
 
   return (
-    <Tabs.Navigator
-      initialRouteName='explore'
-      screenOptions={{
-        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
-        headerShown: false,
-        tabBarButton: HapticTab,
-    }}>
-      <Tabs.Screen
-        name="home"
-        component={Home}
-        options={{
-          title: 'Home',
-          tabBarIcon: ({ color }) => (
-            <IconSymbol size={28} name="house.fill" color={color} />
-          ),
-        }}
-      />  
-      <Tabs.Screen
-        name="gestionnaire_ressource"
-        component={ListMateriel}
-        options={{
-          title: 'Ressources',
-          tabBarIcon: ({ color }) => (
-            <IconSymbol size={28} name="backpack.fill" color={color} />
-          ),
-        }}
-      />
-      <Tabs.Screen
-        name="gestionnaire_ouvrier"
-        component={GestionOuvrier}
-        options={{
-          title: 'Ouvriers',
-          tabBarIcon: ({ color }) => <IconSymbol size={28} name="person.fill" color={color} />,
-        }}
-      />
-      <Tabs.Screen
-        name="explore"
-        component={MapScreen}
-        options={{
-          title: 'MapScreen',
-          tabBarIcon: ({ color }) => <IconSymbol size={28} name="paperplane.fill" color={color} />,
-        }}
-      >
-      </Tabs.Screen>
-      <Tabs.Screen
-        name="addChantier"
-        component={AddChantier}
-        options={{
-          title: 'Ajouter',
-          tabBarIcon: ({ color }) => (<AntDesign name="plus" size={28} color={color} />),
-        }}
-      />              
-      
-    </Tabs.Navigator>
+    <UserProvider>
+      <ChantierProvider>
+        <RessourcesProvider>
+          <Tabs.Navigator
+            initialRouteName='explore'
+            screenOptions={{
+              tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
+              headerShown: false,
+              tabBarButton: HapticTab,
+            }}>
+            <Tabs.Screen
+              name="home"
+              component={Home}
+              options={{
+                title: 'Home',
+                tabBarIcon: ({ color }) => (
+                  <IconSymbol size={28} name="house.fill" color={color} />
+                ),
+              }}
+            />
+            <Tabs.Screen
+              name="gestionnaire_ressource"
+              component={ListMateriel}
+              options={{
+                title: 'Ressources',
+                tabBarIcon: ({ color }) => (
+                  <IconSymbol size={28} name="backpack.fill" color={color} />
+                ),
+              }}
+            />
+            <Tabs.Screen
+              name="GestionOuvrier"
+              component={GestionOuvrier}
+              options={{
+                title: 'Bonjour',
+                tabBarIcon: ({ color }) => <IconSymbol size={28} name="person.fill" color={color} />,
+              }}
+            />
+            <Tabs.Screen
+              name="explore"
+              component={MapScreen}
+              options={{
+                title: 'MapScreen',
+                tabBarIcon: ({ color }) => <IconSymbol size={28} name="paperplane.fill" color={color} />,
+              }}
+            >
+            </Tabs.Screen>
+            <Tabs.Screen
+              name="addChantier"
+              component={AddChantier}
+              options={{
+                title: 'Ajouter',
+                tabBarIcon: ({ color }) => (
+                  <AntDesign name="plus" size={24} color="black" />
+                ),
+              }}
+            />
+
+          </Tabs.Navigator>
+        </RessourcesProvider>
+      </ChantierProvider>
+    </UserProvider>
   );
 }

app/(tabs)/addChantier.tsx

@@ -1,27 +1,201 @@
+import ChantierSummary from '@/components/chantierSummary';
+import SelectChantier from '@/components/selectChantier';
+import SetStatus from '@/components/setStatus';
+import { ThemedView } from '@/components/themed-view';
+import React, { useEffect, useState } from 'react';
+import { StyleSheet, ScrollView, Button, TextInput, Text } from 'react-native';
+import { useChantier } from '../ContextChantier';
+import { useRessources } from '../ContextRessource';
+import { useUser } from '../ContextUser';
+import { getRessources, getUsers, addChantier } from '@/services/ressourcesService';
+import { Chantier, Ressources } from '@/class/class';
 import { ThemedText } from '@/components/themed-text';
-import { ThemedView, } from '@/components/themed-view';
-import Constants from 'expo-constants'; //pour connaître la taille de la barre menu de l'OS en haut
-import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { ThemedButton } from '@/components/themed-button';
+import { ThemedTextInput } from '@/components/themed-textinput';
 
 export default function AddChantier() {
+  const { chantier, setChantier } = useChantier();
+  const { user, setUser } = useUser();
+  const { ressources, setRessources } = useRessources();
+  
+  const [loading, setLoading] = useState(false);
+  const [nom, setNom] = useState('');
+  const [chefChantier, setChefChantier] = useState('');
+  const [adresse, setAdresse] = useState('');
+  const [duree, setDuree] = useState('');
+  const [userSelect, setUserSelect] = useState<string[]>([]);
+  const [ressourcesSelect, setRessourcesSelect] = useState<string[]>([]);
 
-    return(
-        <ThemedView lvl={3} style={styles.back}>
-          <View style={styles.container}>
-            <ThemedText>TODO</ThemedText>
-          </View>
-        </ThemedView>
-      )
+  // Charger les utilisateurs et ressources
+  useEffect(() => {
+    async function load() {
+      setLoading(true);
+      const usersDb = await getUsers();
+      const ressourcesDb = await getRessources();
+      setUser(usersDb);
+      setRessources(ressourcesDb);
+      setLoading(false);
+    }
+    load();
+  }, []);
+
+  async function handleAddChantier() {
+    setLoading(true);
+
+    // Vérification chef
+    const chefUser = user.find(u => u.id === chefChantier);
+    if (!chefUser) {
+      console.error("Chef introuvable !");
+      setLoading(false);
+      return;
+    }
+
+    // Trouver les Users de l'équipe
+    const equipeUsers = userSelect
+      .map(id => user.find(u => u.id === id))
+      .filter(Boolean) as typeof user;
+
+    // Trouver les ressources sélectionnées
+    const materielSelect = ressourcesSelect
+  .map(id => ressources.find(r => r.id.toString() === id))
+  .filter(Boolean) as Ressources[];
+
+
+    // Construire l'objet chantier complet
+    const chantierData: Omit<Chantier, 'id'> = {
+  chef: chefUser!,
+  adresse,
+  dateDep: new Date(),
+  equipe: equipeUsers,
+  materiel: materielSelect,
+  etat: 'En attente',
+  latitude: 0,
+  longitude: 0,
+  anomalies: [],
+  tempsEst: 0,
+  vehicules: [],
+  contact: "",
+};
+
+    // Ajouter le chantier dans Firestore
+    const id = await addChantier(chantierData);
+    setLoading(false);
+
+    if (id) {
+      console.log("Chantier ajouté avec l'ID :", id);
+      setChantier({ ...chantierData, id });
+    }
+  }
+  return (
+    <ScrollView style= {styles.container}>
+      <ThemedView style = {styles.header}>
+        <ThemedText style = {styles.text}>Ajouter un nouveau chantier </ThemedText>
+        <ThemedTextInput lvl = {0} style = {styles.input} placeholder='Nom du chantier' value = {nom} onChangeText={setNom}/>
+        <ThemedTextInput lvl = {0} style = {styles.input} placeholder='Adresse du chantier' value = {adresse} onChangeText={setAdresse} />
+        <ThemedTextInput lvl = {0} style = {styles.input} placeholder='durée estimée (en jours)' value = {duree} onChangeText={setDuree} />
+        <ThemedTextInput lvl = {0} style = {styles.input} placeholder='chef de chantier' value= {chefChantier} onChangeText={setChefChantier}/>
+        <ThemedText style={{ fontWeight: "bold", marginTop: 15 }}>Équipe</ThemedText>
+        <SelectChantier
+        data={user}
+        multiple
+        selected={userSelect}
+        onChange={setUserSelect}
+        placeholder="Sélectionner l'équipe"
+      />
+      <Text style={{ fontWeight: "bold", marginTop: 15 }}>Ressources</Text>
+      <SelectChantier
+        data={ressources}
+        multiple
+        selected={ressourcesSelect}
+        onChange={setRessourcesSelect}
+        placeholder="Sélectionner les ressources"
+      />
+      <ThemedButton
+        lvl={1}
+        shadow={true}
+        style={{ padding: 10, borderRadius: 8, marginBottom: 10 }}
+        onPress={() => handleAddChantier()}
+        >
+
+      </ThemedButton>
+      </ThemedView>
+
+    </ScrollView>
+  );
 }
 
 const styles = StyleSheet.create({
-  back:{
-    height:"100%",
-    width:"100%",
-  },
   container: {
     flex: 1,
-    marginTop: Constants.statusBarHeight, //pour la barre menu du haut
+    marginTop: 60,
   },
-});
+  header: {
+    marginBottom: 20,
+    alignItems: "center",
+    paddingHorizontal: 20,
+  },
+  text: {
+    fontSize: 22,
+    fontWeight: "bold",
+    marginBottom: 10,
+  },
+  inputBack: {
+    width: "100%",
+    borderRadius: 10,
+    backgroundColor: "transparent",
+  },
+  input: {
+    width: "100%",
+    borderRadius: 10,
+    padding: 10,
+    fontSize: 16,
+  },
+  card: {
+    flexDirection: "row",
+    marginHorizontal: 20,
+    marginBottom: 15,
+    borderRadius: 10,
+    padding: 10,
+  },
+  image: {
+    width: 80,
+    height: 80,
+    borderRadius: 8,
+    marginRight: 10,
+  },
+  info: {
+    flex: 1,
+    justifyContent: "center",
+  },
+  footer: {
+    padding: 20,
+  },
+  empty: {
+    textAlign: "center",
+    marginTop: 30,
+    color: "#888",
+  },
+  filterMenuOverlay: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: "rgba(0,0,0,0.4)",
+    justifyContent: "center",
+    alignItems: "center",
+    zIndex: 999,
+  },
+  filterMenu: {
+    width: "80%",
+    borderRadius: 12,
+    padding: 20,
+    backgroundColor: "#fff",
+  },
+  filterTitle: {
+    fontSize: 18,
+    fontWeight: "bold",
+    marginBottom: 20,
+    textAlign: "center",
+  },
+});

components/selectChantier.tsx

@@ -40,11 +40,11 @@ export default function SelectChantier() {
   const router = useRouter();
 
   
-  const AnimatedThemedView = Animated.createAnimatedComponent(ThemedView);
-  const AnimatedThemedText = Animated.createAnimatedComponent(ThemedText);
-  const AnimatedThemedButton = Animated.createAnimatedComponent(ThemedButton);
-  const AnimatedThemedTextInput =
-    Animated.createAnimatedComponent(ThemedTextInput);
+  // cast to any to avoid strict Animated typing issues for custom props like `lvl`/`border`
+  const AnimatedThemedView: any = Animated.createAnimatedComponent(ThemedView as any);
+  const AnimatedThemedText: any = Animated.createAnimatedComponent(ThemedText as any);
+  const AnimatedThemedButton: any = Animated.createAnimatedComponent(ThemedButton as any);
+  const AnimatedThemedTextInput: any = Animated.createAnimatedComponent(ThemedTextInput as any);
 
   async function onPressOpen(){
     setIsLoaded(false);
@@ -57,7 +57,7 @@ export default function SelectChantier() {
   }
 
   function onPressAddChantier(){
-    router.push("/(tabs)/addChantier")
+    router.push('/(tabs)/ajoute_chantier')
     setIsOpen(false)
   }