selectEngins

app/(tabs)/addChantier.tsx

@@ -18,6 +18,7 @@ import DateTimePicker, { DateTimePickerEvent } from '@react-native-community/dat
 
 import Constants from 'expo-constants'; //pour connaître la taille de la barre menu de l'OS en haut
 import SelectChafChantier from '@/components/selectChefChantier';
+import SelectEngins from '@/components/selectEngins';
 
 //Uniquement accessible par le RESPONSSABLE du chantier
 //Pour créer ou modifier un chantier
@@ -36,7 +37,8 @@ export default function AddChantier() {
   const [adresse, setAdresse] = useState('');
   const [duree, setDuree] = useState('');
   const [contact, setContact] = useState('');
-  const [vehicule, setVehicule] = useState('');
+  const [engins, setEngins] = useState<Ressources[]>(); //de type enfin /!\
+  const [materiels, setMateriels] = useState<Ressources>(); //de type material (outils) /!\
 
   const [showDateSelect,setSowDateSelect] = useState(false);
   const [openConfirmation,setOpenConfirmation] = useState(false);
@@ -166,7 +168,10 @@ export default function AddChantier() {
             {renderInut("Estimation de la durée (en demi-journées)","14",duree,setDuree,false)}
             {renderInut("Adresse","1 Rue de la Coutellerie, Paris",adresse,setAdresse,false)}
             {renderInut("Contact client","07 01 02 03 04 05",contact,setContact,true)}
-            {renderInut("Vehicule","TODO Ouvrir un menu",vehicule,setVehicule,false)}
+            <View style = {styles.inputLine}>
+              <ThemedText style = {styles.inputName}>Engins:</ThemedText>
+              <SelectEngins style = {styles.input} sendEngins={setEngins}/>
+            </View>
             <View style = {styles.inputLine}>
               <ThemedText style = {styles.inputName}>Chef de chantier:</ThemedText>
               <SelectChafChantier style = {styles.input} sendChefChantier={setChefChantier}/>

components/selectChefChantier.tsx

@@ -18,11 +18,8 @@ type Props = {
 
 export default function SelectChafChantier({style,sendChefChantier , ...otherProps }: Props) {
 
-    const { chantier, setChantier} = useChantier();
     const [chefDeChantier, setChefDeChantier] = useState<User>();
-    const [tempStatus, setTempStatus] = useState("");
     const [isOpen,setIsOpen] = useState(false);
-    const [openConfirmation,setOpenConfirmation] = useState(false);
     const [users,setUsers] = useState<User[]>([]);
 
     const AnimatedThemedView = Animated.createAnimatedComponent(ThemedView);

components/selectEngins.tsx

@@ -0,0 +1,170 @@
+import { useChantier } from '@/app/ContextChantier';
+import { changeChantierStatus } from "@/services/ressourcesService";
+import { useEffect, useState } from 'react';
+import { Dimensions, FlatList, LayoutAnimation, Modal, Pressable, ScrollView, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import Animated, { LinearTransition } from 'react-native-reanimated';
+import { ThemedButton } from './theme/themed-button';
+import { ThemedText } from './theme/themed-text';
+import { ThemedView } from "./theme/themed-view";
+import { Ressources, User } from '@/class/class';
+import { getRessources } from "@/services/ressourcesService";
+
+const { width, height } = Dimensions.get("window");
+
+type Props = {
+    sendEngins: (engins: Ressources[]) => void;
+    style?: StyleProp<ViewStyle>;
+};
+
+export default function SelectEngins({style,sendEngins: sendEngins , ...otherProps }: Props) {
+
+    const { chantier, setChantier} = useChantier();
+    const [engins, setEngins] = useState<Ressources[]>([]);
+    const [tempStatus, setTempStatus] = useState("");
+    const [isOpen,setIsOpen] = useState(false);
+    const [openConfirmation,setOpenConfirmation] = useState(false);
+    const [listEngins,setListEngins] = useState<Ressources[]>([]);
+
+    const AnimatedThemedView = Animated.createAnimatedComponent(ThemedView);
+
+    useEffect(() => {
+      async function loadData() {
+        try {
+          const data = await getRessources();//TODO engin/vehicule uniquement
+          setListEngins(data);
+        } catch (error) {
+          console.error("Erreur lors du chargement :", error);
+        }
+      }
+      loadData();
+    }, []);
+  
+
+    function onPressOpen(): void {
+       setIsOpen(!isOpen);
+    }
+
+    function onPressRessource(engin: Ressources): void{
+      const exists = engins.some(item => item.name === engin.name);
+      if(exists){
+        setEngins(prev => prev.filter(item => item.name !== engin.name));
+      }
+      else{
+          setEngins(prevItem => [...prevItem, engin]);
+      }
+      sendEngins(engins);
+      //setIsOpen(false);
+    }
+
+    const EnginsSummary = ({ item }: { item: Ressources }) => {
+      if (!item) return null;
+      const exists = engins.some(i => i.name === item.name);
+      return(
+        <View style={{padding:10,width:"100%"}}>
+          <ThemedButton lvl={exists?2:0} border={exists?3:0} style={{padding:10,width:"100%",borderRadius:10}} onPress={() => {onPressRessource(item)}}>
+             <ThemedText>{item.id}</ThemedText>
+            <ThemedText>{item.name}</ThemedText>
+            <ThemedText>{item.quantity}</ThemedText>
+            <ThemedText>{item.type}</ThemedText>
+          </ThemedButton>
+        </View>
+      )
+    }
+
+
+    const EnginsSearch = () => {
+      return(
+        <Modal transparent={true}>
+          <View style={styles.overlay}>
+            <ThemedView style={styles.overlayView}>
+                <ThemedText style={{fontSize: 25}}>Rechercher un engin :</ThemedText>
+                <FlatList
+                  style={{width:"100%"}}
+                  data={listEngins}
+                  renderItem={EnginsSummary}
+                  keyExtractor={(_, index) => index.toString()}
+                />
+
+
+                <ThemedButton lvl={2} border={5} style={styles.buttonValid} onPress={() => setIsOpen(false)}>
+                  <ThemedText style={{fontSize: 25}}>Valider</ThemedText>
+                </ThemedButton>
+            </ThemedView>
+          </View>
+        </Modal>
+      )
+    }
+
+    return(
+            <ThemedButton style={style} lvl={1} onPress={() => onPressOpen()}>
+                <ThemedText style={styles.centeredText}>{engins?engins.length+" engin(s) sélectionné":"sélectionner des engin(s)"}</ThemedText>
+                {isOpen && EnginsSearch()}
+            </ThemedButton>
+            
+      
+    )
+}
+
+const styles = StyleSheet.create({
+
+  windowBox:{
+    zIndex: 2,
+    //backgroundColor: '#00FFFF40',
+    width:"100%",
+    padding: 10,
+    paddingLeft: 0,
+    //overflow: 'hidden',
+  },
+  window:{
+    borderRadius:15,
+    //backgroundColor: '#00FF00',
+    overflow: 'hidden',
+    position: 'relative',
+  },
+  autoClose: {
+    
+    position: 'absolute',
+    top: -height,
+    left: -width,
+    width:width*2,
+    height:height*2,
+    //backgroundColor: 'rgba(255, 0, 0, 0.5)',
+  },
+  button:{
+    width:'100%',
+    margin: 0,
+    borderRadius: 15,
+    padding: 10,
+    height:40,
+    justifyContent: 'center',
+  },
+  centeredText:{
+    textAlign: 'center',
+  },
+  overlay:{
+    backgroundColor:'#00000080',
+    padding:"5%",
+    paddingVertical:"20%",
+    width:"100%",
+    height:"100%",
+  },
+  overlayView:{
+    borderRadius: 20,
+    padding: 20,
+    alignItems: "center",
+    width: "100%",
+    height: "100%",
+    //backgroundColor:'#ff0000',
+  },
+  buttonValid:{
+    //borderWidth: 2,
+    width:'100%',
+    margin: 0,
+    borderRadius: 15,
+    padding: 10,
+    height:60,
+    alignItems: "center",
+    justifyContent: 'center',
+  },
+  
+});