155 lines
3.9 KiB
TypeScript
155 lines
3.9 KiB
TypeScript
import { useState } from 'react';
|
|
import { Button, GestureResponderEvent, Pressable, ScrollView, StyleSheet, View } from 'react-native';
|
|
import { ThemedTextInput } from './themed-textinpute';
|
|
import { ThemedView } from "./themed-view";
|
|
import { ThemedText } from './themed-text';
|
|
import { ThemedButton } from './themed-button';
|
|
import { Chantier, Chef, exempleChantier } from '@/class/class';
|
|
import {BlurView} from 'expo-blur';
|
|
import { Dimensions } from "react-native";
|
|
|
|
const screenHeight = Dimensions.get("window").height;
|
|
|
|
export default function SelectChantier() {
|
|
|
|
const [search, setSearch] = useState('');
|
|
const [isOpen,setIsOpen] = useState(false);
|
|
const [chantiers,setChantiers] = useState<Chantier[]>([exempleChantier,exempleChantier,exempleChantier,exempleChantier,exempleChantier,exempleChantier]);
|
|
|
|
|
|
function onPressOpen(event: GestureResponderEvent): void {
|
|
setIsOpen(!isOpen);
|
|
}
|
|
|
|
|
|
const renderChantier = (chantier:Chantier, index: number) => {
|
|
return(
|
|
<ThemedView key={index} lvl={3} style={styles.chantier}>
|
|
<ThemedText>adresse: {chantier.adresse}</ThemedText>
|
|
<ThemedText>chef de chantier: {chantier.chef.prenom} {chantier.chef.nom}</ThemedText>
|
|
<ThemedText>date de début: {chantier.dateDep}</ThemedText>
|
|
<ThemedText>etat: {chantier.etat}</ThemedText>
|
|
</ThemedView>
|
|
);
|
|
};
|
|
|
|
if(!isOpen){
|
|
return (
|
|
<View style={styles.closedSelectZone}>
|
|
<ThemedButton style={styles.button} lvl={2} onPress={onPressOpen}>
|
|
<ThemedText style={styles.buttonText}>Open</ThemedText>
|
|
</ThemedButton>
|
|
</View>
|
|
)
|
|
}
|
|
else{
|
|
return(
|
|
<View style={styles.openedSelectZone}>
|
|
<BlurView intensity={1} blurReductionFactor={0.2} experimentalBlurMethod='dimezisBlurView' style={styles.blur}>
|
|
<ThemedView lvl={0} opacity="40">
|
|
|
|
<ThemedButton style={styles.buttonOpen} lvl={3} onPress={onPressOpen}>
|
|
<ThemedText style={styles.buttonText}>Close</ThemedText>
|
|
</ThemedButton>
|
|
|
|
<View style={styles.searchZone}>
|
|
<ThemedTextInput
|
|
lvl={1}
|
|
border={4}
|
|
style={styles.input}
|
|
placeholder='Rechercher un chantier'
|
|
value={search}
|
|
onChangeText={setSearch}
|
|
/>
|
|
</View>
|
|
|
|
|
|
<ScrollView>
|
|
{chantiers.map((chantier, index) => (
|
|
renderChantier(chantier, index)
|
|
))
|
|
}
|
|
</ScrollView>
|
|
|
|
|
|
</ThemedView>
|
|
|
|
</BlurView>
|
|
</View>
|
|
|
|
|
|
)
|
|
};
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
openedSelectZone:{
|
|
position: 'absolute',
|
|
width: "100%",
|
|
borderRadius: 10,
|
|
zIndex: 9999,
|
|
elevation: 9999,
|
|
overflow: "hidden",
|
|
paddingTop:25,
|
|
height: screenHeight/2,
|
|
},
|
|
blur:{
|
|
/*flex: 1,*/
|
|
/*backgroundColor: "rgba(255,255,255,0.0001)",*/
|
|
},
|
|
closedSelectZone:{
|
|
position: 'absolute',
|
|
width: "50%",
|
|
borderRadius: 10,
|
|
zIndex: 9999,
|
|
elevation: 9999,
|
|
},
|
|
titleContainer: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 8,
|
|
},
|
|
searchMenu:{
|
|
color:'#FFAAAA',
|
|
borderRadius: 5,
|
|
width: "100%",
|
|
margin: 0,
|
|
|
|
|
|
},
|
|
searchZone:{
|
|
width: "100%",
|
|
padding:10,
|
|
marginTop:10,
|
|
alignItems: 'center',
|
|
},
|
|
chantier:{
|
|
padding:10,
|
|
margin:10,
|
|
borderRadius:10,
|
|
//borderWidth: 1,
|
|
},
|
|
input: {
|
|
width: '100%',
|
|
borderWidth: 1,
|
|
borderRadius: 10,
|
|
padding: 10,
|
|
fontSize: 16,
|
|
},
|
|
button:{
|
|
width:'100%',
|
|
margin: 5,
|
|
borderRadius: 10,
|
|
padding: 10,
|
|
},
|
|
buttonOpen:{
|
|
width:'50%',
|
|
margin: 5,
|
|
borderRadius: 10,
|
|
padding: 10,
|
|
},
|
|
buttonText:{
|
|
textAlign: 'center',
|
|
}
|
|
});
|