class métier + selectChanter toujours en cours

This commit is contained in:
Rochas
2025-11-16 19:24:46 +01:00
parent 7d38286bb7
commit a10b2fa953
9 changed files with 242 additions and 46 deletions

View File

@@ -4,12 +4,17 @@ 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([]);
const [chantiers,setChantiers] = useState<Chantier[]>([exempleChantier,exempleChantier,exempleChantier,exempleChantier,exempleChantier,exempleChantier]);
function onPressOpen(event: GestureResponderEvent): void {
@@ -17,45 +22,62 @@ export default function SelectChantier() {
}
const renderChantier = () => {
const renderChantier = (chantier:Chantier, index: number) => {
return(
<ThemedView lvl={0} style={styles.chantier}>
<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){
if(!isOpen){
return (
<View style={styles.closedSelectZone}>
<ThemedButton style={styles.button} lvl={2} onPress={onPressOpen}>
<ThemedText style={styles.buttonText}>Open</ThemedText>
</ThemedButton>
<ThemedButton style={styles.button} lvl={2} onPress={onPressOpen}>
<ThemedText style={styles.buttonText}>Open</ThemedText>
</ThemedButton>
</View>
)
}
else{
return(
<ThemedView lvl={2} style={styles.openedSelectZone}>
<ScrollView>
<ThemedButton style={styles.buttonOpen} lvl={3} onPress={onPressOpen}>
<ThemedText style={styles.buttonText}>Close</ThemedText>
</ThemedButton>
<View style={styles.searchZone}>
<ThemedTextInput
lvl={1}
border={5}
style={styles.input}
placeholder='Rechercher un chantier'
value={search}
onChangeText={setSearch}
/>
</View>
<View style={styles.openedSelectZone}>
<BlurView intensity={1} blurReductionFactor={0.2} experimentalBlurMethod='dimezisBlurView' style={styles.blur}>
<ThemedView lvl={0} opacity="40">
<View>
<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>
</View>
</ScrollView>
</ThemedView>
)
};
}
@@ -67,6 +89,13 @@ const styles = StyleSheet.create({
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',
@@ -90,11 +119,15 @@ const styles = StyleSheet.create({
},
searchZone:{
width: "100%",
padding:20,
marginTop:50,
padding:10,
marginTop:10,
alignItems: 'center',
},
chantier:{
padding:10,
margin:10,
borderRadius:10,
//borderWidth: 1,
},
input: {
width: '100%',

View File

@@ -7,9 +7,11 @@ export type ThemedPressableProps = PressableProps & {
darkColor?: string;
lvl?:number;
border?:number;
opacity?:string;
};
export function ThemedButton({ style, lightColor, darkColor,lvl=1,border=-1, ...otherProps }: ThemedPressableProps) {
//nb : pour border ne pas oublier de mettre en plus "borderWidth" dans le style du composant /!\
export function ThemedButton({ style, lightColor, darkColor,lvl=1,border=-1,opacity="FF", ...otherProps }: ThemedPressableProps) {
var lvlStr:string = "background";
var borderColor ="";
if(lvl>=0 && lvl<6){
@@ -17,7 +19,7 @@ export function ThemedButton({ style, lightColor, darkColor,lvl=1,border=-1, ...
}
else lvlStr+='5';
const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor },lvlStr as 'background0'|'background1'|'background2'|'background3'|'background4'|'background5');
const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor },lvlStr as 'background0'|'background1'|'background2'|'background3'|'background4'|'background5')+opacity;
if(border!=-1){

View File

@@ -8,10 +8,12 @@ export type ThemedTextInputProps = TextInputProps & {
reverse?:boolean;
lvl?:number;
border?:number;
opacity?:string;
type?: 'default' | 'title' | 'defaultSemiBold' | 'subtitle' | 'link';
};
export function ThemedTextInput({style, lightColor, darkColor, reverse=false, lvl=1,border=-1,type = 'default', ...rest}: ThemedTextInputProps) {
//nb : pour border ne pas oublier de mettre en plus "borderWidth" dans le style du composant /!\
export function ThemedTextInput({style, lightColor, darkColor, reverse=false, lvl=1,border=-1,opacity="FF",type = 'default', ...rest}: ThemedTextInputProps) {
var text:string = 'text'
if(reverse){
@@ -26,7 +28,7 @@ export function ThemedTextInput({style, lightColor, darkColor, reverse=false, lv
}
else lvlStr+='5';
const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor },lvlStr as 'background0'|'background1'|'background2'|'background3'|'background4'|'background5');
const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor },lvlStr as 'background0'|'background1'|'background2'|'background3'|'background4'|'background5')+opacity;
if(border!=-1){

View File

@@ -7,9 +7,12 @@ export type ThemedViewProps = ViewProps & {
darkColor?: string;
lvl?:number;
border?:number;
opacity?:string;
};
export function ThemedView({ style, lightColor, darkColor,lvl=1,border=-1, ...otherProps }: ThemedViewProps) {
//nb : pour border ne pas oublier de mettre en plus "borderWidth" dans le style du composant /!\
export function ThemedView({ style, lightColor, darkColor,lvl=1,border=-1,opacity="FF", ...otherProps }: ThemedViewProps) {
var lvlStr:string = "background";
var borderColor ="";
if(lvl>=0 && lvl<6){
@@ -17,7 +20,7 @@ export function ThemedView({ style, lightColor, darkColor,lvl=1,border=-1, ...ot
}
else lvlStr+='5';
const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor },lvlStr as 'background0'|'background1'|'background2'|'background3'|'background4'|'background5');
const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor },lvlStr as 'background0'|'background1'|'background2'|'background3'|'background4'|'background5')+opacity;
if(border!=-1){