home

components/selectChantier.tsx

@@ -73,7 +73,7 @@ export default function SelectChantier() {
 
         <AnimatedThemedView layout={LinearTransition.duration(200)} lvl={2} shadow={true} style={styles.window}>
           <ThemedButton style={isOpen ? styles.buttonOpen : styles.buttonClose} lvl={isOpen ? 1 : 1} onPress={() => onPressOpen()}>
-            <ThemedText style={styles.buttonText}>{isOpen ? "Close" : "Open"}</ThemedText>
+            <ThemedText style={styles.buttonText}>{isOpen ? "Fermer" : "Chantiers"}</ThemedText>
           </ThemedButton>
           {isOpen &&
             <View style={styles.menu}>

components/setStatus.tsx

@@ -0,0 +1,121 @@
+import { useChantier } from '@/app/ContextChantier';
+import { useState } from 'react';
+import { Dimensions, LayoutAnimation, Pressable, StyleSheet, View } from 'react-native';
+import Animated, { LinearTransition } from 'react-native-reanimated';
+import { ThemedButton } from './themed-button';
+import { ThemedText } from './themed-text';
+import { ThemedTextInput } from './themed-textinput';
+import { ThemedView } from "./themed-view";
+
+const screenHeight = Dimensions.get("window").height;
+
+
+
+export default function SetStatus() {
+
+    const { chantier, setChantier} = useChantier();
+    const [currentSatus, setCurrentSearch] = useState("En cours");
+    const [isOpen,setIsOpen] = useState(false);
+
+    const AnimatedThemedView = Animated.createAnimatedComponent(ThemedView);
+    const AnimatedThemedText = Animated.createAnimatedComponent(ThemedText);
+    const AnimatedThemedButton = Animated.createAnimatedComponent(ThemedButton);
+    const AnimatedThemedTextInput = Animated.createAnimatedComponent(ThemedTextInput);
+
+    const choices = ["En cours","Interrompu","Terminé","Non réalisé"]
+
+    function onPressOpen(): void {
+        LayoutAnimation.configureNext(
+            LayoutAnimation.Presets.easeInEaseOut
+        );
+        setIsOpen(!isOpen);
+    }
+
+    function selectSatus(status: string): void {
+        setCurrentSearch(status);
+        setIsOpen(false);
+    }
+
+
+
+    const choice = (status:string, index: number)  => {
+      return(
+      <Pressable key={index} onPress={() => selectSatus(status)}>
+        <View style={styles.satus}>
+            <ThemedText style={styles.centeredText}>{status}</ThemedText>
+        </View >
+      </Pressable>
+      );
+    };
+
+
+    return(
+      <Animated.View 
+      layout={LinearTransition.duration(200)}
+      style={isOpen ? styles.windowOpean : styles.windowClose}>
+
+        <AnimatedThemedView layout={LinearTransition.duration(200)} lvl={2} shadow={true} style={styles.window}>
+          <ThemedButton style={styles.button} lvl={isOpen ? 1 : 1} onPress={() => onPressOpen()}>
+            <ThemedText style={styles.centeredText}>{currentSatus}</ThemedText>
+          </ThemedButton>
+          {isOpen &&
+            <View style={styles.menu}>
+                <View style={styles.list}>
+                        
+                    {choices.map((str, index) => (
+                            str!==currentSatus && choice(str, index)
+                    ))}
+                </View>
+            </View>
+          }
+        </AnimatedThemedView>
+      </Animated.View>
+    )
+    
+}
+
+const styles = StyleSheet.create({
+
+  windowClose:{
+    //backgroundColor: '#00FFFF',
+    //borderRadius:10,
+    padding: 10,
+    width:"50%",
+    //height:60,
+    overflow: 'hidden',    
+  },
+  windowOpean:{
+    width:"50%",
+    padding: 10,
+  },
+  window:{
+    borderRadius:15,
+    //backgroundColor: '#00FF00',
+    overflow: 'hidden',
+  },
+  menu:{
+    padding:0,
+    flex: 1, 
+    //backgroundColor:'#FF00FF',
+  },
+  list:{
+    flex: 1,
+    overflow: 'hidden',
+    borderRadius:10,
+
+  },
+  satus:{
+    padding:10,
+    flexDirection: 'row',
+  },
+  button:{
+    width:'100%',
+    margin: 0,
+    borderRadius: 15,
+    padding: 10,
+    height:40,
+  },
+  centeredText:{
+    textAlign: 'center',
+  }
+});