vuminh224/mmm-projet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add en un seul écran, composant lié aux add dans un dossier /composants/add

Browse Source
This commit is contained in:
Rochas
2025-12-13 18:48:54 +01:00
parent b5c751cada
commit bcf9907007
9 changed files with 133 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
app/(tabs)/_layout.tsx
View File

@@ -9,13 +9,8 @@ import GestionOuvrier from './gestion_ouvrier';
import ListMateriel from './gestionnaire_ressource';
import Home from './home';
import MapScreen from './mapScreen';
import AddChantier from './addChantier';
import AddRessource from './addRessource';
import AddArtisant from './addArtisant';
import AntDesign from '@expo/vector-icons/AntDesign';
import { UserProvider } from '../ContextUser';
import { ChantierProvider } from '../ContextChantier';
import { RessourcesProvider } from '../ContextRessource';
import AddScreen from './addScreen';
const Tabs = createBottomTabNavigator();
@@ -68,8 +63,8 @@ export default function TabLayout() {
>
</Tabs.Screen>
<Tabs.Screen
name="addChantier"
component={AddChantier}
name="Ajouter"
component={AddScreen}
options={{
title: 'Ajouter',
tabBarIcon: ({ color }) => (
@@ -78,28 +73,6 @@ export default function TabLayout() {
}}
/>
<Tabs.Screen
name="addRessource"
component={AddRessource}
options={{
title: 'Ressources',
tabBarIcon: ({ color }) => (
<AntDesign name="plus" size={24} color={color} />
),
}}
/>
<Tabs.Screen
name="addArtisant"
component={AddArtisant}
options={{
title: 'Artisants',
tabBarIcon: ({ color }) => (
<AntDesign name="plus" size={24} color={color} />
),
}}
/>
</Tabs.Navigator>
);

247
app/(tabs)/addArtisant.tsx
View File

@@ -1,247 +0,0 @@
import ChantierSummary from '@/components/chantierSummary';
import SelectChantier from '@/components/selectChantier';
import SetStatus from '@/components/setStatus';
import { ThemedView } from '@/components/theme/themed-view';
import React, { useEffect, useState } from 'react';
import { StyleSheet, ScrollView, Button, TextInput, Text, View, Modal } 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, User } from '@/class/class';
import { ThemedText } from '@/components/theme/themed-text';
import { ThemedButton } from '@/components/theme/themed-button';
import { ThemedTextInput } from '@/components/theme/themed-textinput';
import DateTimePicker, { DateTimePickerEvent } from '@react-native-community/datetimepicker';
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 SelectMachine from '@/components/selectMachine';
//Uniquement accessible par le RESPONSSABLE du chantier
//Pour créer ou modifier un chantier
export default function AddArtisant() {
const { chantier, setChantier } = useChantier();
const { user, setUser } = useUser();
const { ressources, setRessources } = useRessources();
const [editMode,setEditMode] = useState(false);
const [loading, setLoading] = useState(false);
const [nom, setNom] = useState('');
const [qualifications, setQualifications] = useState('');
const [date, setDate] = useState(new Date());
const [contact, setContact] = useState('');
const [showDateSelect,setSowDateSelect] = useState(false);
const [openConfirmation,setOpenConfirmation] = useState(false);
const [userSelect, setUserSelect] = useState<string[]>([]);
const [ressourcesSelect, setRessourcesSelect] = useState<string[]>([]);
async function handleAddArtisant() {
setLoading(true);
setOpenConfirmation(true);
}
const onSelectDate = (event: DateTimePickerEvent, selectedDate?: Date) => {
setSowDateSelect(false);
if (selectedDate) {
setDate(selectedDate);
}
};
async function onConfirm(): Promise<void> {
//TODO
//await changeChantierStatus(chantier.id,tempStatus)
//Il faut changer le UX
//setChantier({...chantier,etat: tempStatus})
if(isValidChantier()){
setOpenConfirmation(false);
}
}
function onCancel(): void {
setOpenConfirmation(false);
}
function isValidChantier(): boolean {
return nom=="" && qualifications!=='' && contact!==''
}
const renderValidationScreen = () => {
return(
<Modal transparent={true} >
<View style={styles.overlay}>
<ThemedView style={styles.overlayView}>
<ThemedText style={{fontSize: 25}}>Créer le nouveau chantier suivant ? :</ThemedText>
<ThemedView lvl={2} style={styles.summaryNewChantier}>
<ThemedText style={{fontSize: 20}}>Nom: {nom===''?"NONE":nom}</ThemedText>
<ThemedText style={{fontSize: 20}}>Qualifications : {qualifications===''?"NONE":qualifications}</ThemedText>
<ThemedText style={{fontSize: 20}}>Date: {date.toLocaleDateString()}</ThemedText>
<ThemedText style={{fontSize: 20}}>Contact {contact===''?"NONE":contact}</ThemedText>
</ThemedView>
<View style={styles.overlayView}>
<ThemedButton lvl={2} border={5} style={styles.buttonValid} onPress={() => onConfirm()}>
<ThemedText style={{fontSize: 25}}>Confirmer</ThemedText>
</ThemedButton>
</View>
<View style={styles.overlayView}>
<ThemedButton lvl={2} border={5} style={styles.buttonValid} onPress={() => onCancel()}>
<ThemedText style={{fontSize: 25}}>Annuler</ThemedText>
</ThemedButton>
</View>
</ThemedView>
</View>
</Modal>
)
}
const renderInutDate = (name : string) => {
return (
<View style = {styles.inputLine}>
<ThemedText style = {styles.inputName}>{name}:</ThemedText>
<View style={{flexDirection: 'row', gap: "4%",}}>
<ThemedView style = {[styles.input,{width:"100%"}]}>
<ThemedButton>
<ThemedText onPress={() => setSowDateSelect(true)} style = {{borderRadius:10}}>{date.toLocaleDateString()}</ThemedText>
</ThemedButton>
</ThemedView>
{showDateSelect && (
<DateTimePicker
value={date}
mode="date" // "time" ou "datetime" selon les besoins
display="default"
onChange={onSelectDate}
/>
)}
</View>
</View>
);
};
const renderInut = (name : string, preFill : string, value : string, setValue : ((text:string) => void),numeric:boolean) => {
return (
<View style = {styles.inputLine}>
<ThemedText style = {styles.inputName}>{name}:</ThemedText>
<ThemedTextInput lvl = {1} style = {styles.input} placeholder={preFill} value = {value} keyboardType={numeric ? "numeric" : "default"} onChangeText={setValue} />
</View>
);
};
return (
<ThemedView lvl={3} style={styles.back}>
<View style={styles.container}>
{editMode &&
<View style={{width:"100%", position: 'absolute'}}>
<SelectChantier></SelectChantier>
</View>
}
<ScrollView>
<View style = {styles.header}>
<ThemedText style = {styles.text}>
{editMode? "Edition d'un chantier"
:"Ajouter un nouvel artisant"}
</ThemedText>
{renderInut("Nom","Jean Dupont",nom,setNom,false)}
{//renderInut("Date de départ","TOTO : JOUR + Demi journé",date,setDate)
}
{renderInut("Qualifications","Plombier",qualifications,setQualifications,false)}
{renderInutDate("Date d'arrivée")}
{renderInut("Contact artisant","07 01 02 03 04 05",contact,setContact,true)}
<ThemedButton
lvl={1}
shadow={true}
style={{ padding: 15, borderRadius: 8, marginTop: 10 }}
onPress={() => handleAddArtisant()}
>
<ThemedText>Valider</ThemedText>
</ThemedButton>
{openConfirmation && renderValidationScreen()}
</View>
</ScrollView>
</View>
</ThemedView>
);
}
const styles = StyleSheet.create({
back:{
height:"100%",
width:"100%",
},
container: {
flex: 1,
marginTop: Constants.statusBarHeight, //pour la barre menu du haut
},
header: {
marginTop:60,
alignItems: "center",
paddingHorizontal: 20,
},
text: {
fontSize: 22,
fontWeight: "bold",
marginBottom: 10,
},
inputBack: {
width: "100%",
borderRadius: 10,
backgroundColor: "transparent",
},
inputLine:{
width: "100%",
//flexDirection: 'row',
paddingVertical: 5,
//alignItems: "center",
},
inputName: {
fontSize: 16,
},
input: {
width: "100%",
borderRadius: 10,
padding: 10,
fontSize: 16,
},
overlay:{
backgroundColor:'#00000080',
padding:"5%",
paddingVertical:"20%",
width:"100%",
height:"100%",
},
overlayView:{
borderRadius: 20,
padding: 20,
alignItems: "center",
width: "100%",
gap:5,
//backgroundColor:'#ff0000',
},
buttonValid:{
//borderWidth: 2,
width:'100%',
margin: 0,
borderRadius: 15,
padding: 10,
height:60,
alignItems: "center",
justifyContent: 'center',
},
summaryNewChantier:{
width:'100%',
borderRadius: 15,
padding:10,
}
});

302
app/(tabs)/addChantier.tsx
View File

@@ -1,302 +0,0 @@
import ChantierSummary from '@/components/chantierSummary';
import SelectChantier from '@/components/selectChantier';
import SetStatus from '@/components/setStatus';
import { ThemedView } from '@/components/theme/themed-view';
import React, { useEffect, useState } from 'react';
import { StyleSheet, ScrollView, Button, TextInput, Text, View, Modal } 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, User } from '@/class/class';
import { ThemedText } from '@/components/theme/themed-text';
import { ThemedButton } from '@/components/theme/themed-button';
import { ThemedTextInput } from '@/components/theme/themed-textinput';
import DateTimePicker, { DateTimePickerEvent } from '@react-native-community/datetimepicker';
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 SelectRessource from '@/components/selectRessource';
import { db } from '@/firebase_config';
import { doc } from 'firebase/firestore';
type RessourcesQte = [Ressources, number];
//Uniquement accessible par le RESPONSSABLE du chantier
//Pour créer ou modifier un chantier
export default function AddChantier() {
const { chantier, setChantier } = useChantier();
const { user, setUser } = useUser();
const { ressources, setRessources } = useRessources();
const [editMode,setEditMode] = useState(false);
const [loading, setLoading] = useState(false);
const [objet, setObjet] = useState('');
const [date, setDate] = useState(new Date());
const [morning, setMorning] = useState(true);
const [chefChantier, setChefChantier] = useState<User>();
const [adresse, setAdresse] = useState('');
const [duree, setDuree] = useState('');
const [contact, setContact] = useState('');
const [machines, setMachines] = useState<RessourcesQte[]>();
const [ouvriers, setOuviers] = useState<RessourcesQte[]>();
const [showDateSelect,setSowDateSelect] = useState(false);
const [openConfirmation,setOpenConfirmation] = useState(false);
const [userSelect, setUserSelect] = useState<string[]>([]);
const [ressourcesSelect, setRessourcesSelect] = useState<string[]>([]);
async function handleAddChantier() {
setLoading(true);
setOpenConfirmation(true);
}
const onSelectDate = (event: DateTimePickerEvent, selectedDate?: Date) => {
setSowDateSelect(false);
if (selectedDate) {
setDate(selectedDate);
}
};
async function onConfirm(): Promise<void> {
if (!isValidChantier() || !chefChantier) return;
const chantierDate = new Date(date);
chantierDate.setHours(morning ? 0 : 12, 0, 0, 0);
//CREATE NEW TYPE CHANTIER FOR FIRESTORE
const chantierFirestore = {
adresse,
etat: "En cours",
contact,
chef: doc(db, "user", chefChantier.id),
equipe: [],
/*materiel: materiels
? [doc(db, "ressources", String(materiels.id))]
: [],*/
vehicules: machines?.map(e =>
doc(db, "ressources", String(e[0].id))
) || [],
anomalies: [],
dateDep: chantierDate,
tempsEst: parseInt(duree) || 1,
latitude: 0, //TODO
longitude: 0, //TODO
};
const id = await addChantier(chantierFirestore as any);
if (id) {
//console.log("Chantier created with ID:", id);
setChantier({ ...chantierFirestore,
id,
chef: chefChantier,
equipe: [],
materiel: [],//materiels ? [materiels] : [],
vehicules: [], //data.map(([ressource]) => ressource)|| []
} as Chantier);
setOpenConfirmation(false);
}
}
function onCancel(): void {
setOpenConfirmation(false);
}
function isValidChantier(): boolean {
return objet!=="" && duree!=='' && adresse!=='' && contact!=='' && chefChantier!==undefined; //TODO
}
const renderValidationScreen = () => {
return(
<Modal transparent={true} >
<View style={styles.overlay}>
<ThemedView style={styles.overlayView}>
<ThemedText style={{fontSize: 25}}>Créer le nouveau chantier suivant ? :</ThemedText>
<ThemedView lvl={2} style={styles.summaryNewChantier}>
<ThemedText style={{fontSize: 20}}>Objet: {objet===''?"NONE":objet}</ThemedText>
<ThemedText style={{fontSize: 20}}>Date: {date.toLocaleDateString()} {morning ? "matin" : "après-midi"}</ThemedText>
<ThemedText style={{fontSize: 20}}>Durée: {duree===''?"0":duree} demi-journées</ThemedText>
<ThemedText style={{fontSize: 20}}>Adresse: {adresse===''?"NONE":adresse}</ThemedText>
<ThemedText style={{fontSize: 20}}>Contact client: {contact===''?"NONE":contact}</ThemedText>
<ThemedText style={{fontSize: 20}}>Chef de chantier: {chefChantier===undefined?"NONE":chefChantier.name}</ThemedText>
</ThemedView>
<View style={styles.overlayView}>
<ThemedButton lvl={2} border={5} style={styles.buttonValid} onPress={() => onConfirm()}>
<ThemedText style={{fontSize: 25}}>Confirmer</ThemedText>
</ThemedButton>
</View>
<View style={styles.overlayView}>
<ThemedButton lvl={2} border={5} style={styles.buttonValid} onPress={() => onCancel()}>
<ThemedText style={{fontSize: 25}}>Annuler</ThemedText>
</ThemedButton>
</View>
</ThemedView>
</View>
</Modal>
)
}
const renderInutDate = (name : string) => {
return (
<View style = {styles.inputLine}>
<ThemedText style = {styles.inputName}>{name}:</ThemedText>
<View style={{flexDirection: 'row', gap: "4%",}}>
<ThemedView style = {[styles.input,{width:"48%"}]}>
<ThemedButton>
<ThemedText onPress={() => setSowDateSelect(true)} style = {{borderRadius:10}}>{date.toLocaleDateString()}</ThemedText>
</ThemedButton>
</ThemedView>
<ThemedView style = {[styles.input,{width:"48%"}]}>
<ThemedButton>
<ThemedText onPress={() => setMorning(!morning)} style = {{borderRadius:10}}>{morning ? "matin" : "après-midi"}</ThemedText>
</ThemedButton>
</ThemedView>
{showDateSelect && (
<DateTimePicker
value={date}
mode="date" // "time" ou "datetime" selon les besoins
display="default"
onChange={onSelectDate}
/>
)}
</View>
</View>
);
};
const renderInut = (name : string, preFill : string, value : string, setValue : ((text:string) => void),numeric:boolean) => {
return (
<View style = {styles.inputLine}>
<ThemedText style = {styles.inputName}>{name}:</ThemedText>
<ThemedTextInput lvl = {1} style = {styles.input} placeholder={preFill} value = {value} keyboardType={numeric ? "numeric" : "default"} onChangeText={setValue} />
</View>
);
};
return (
<ThemedView lvl={3} style={styles.back}>
<View style={styles.container}>
{editMode &&
<View style={{width:"100%", position: 'absolute'}}>
<SelectChantier></SelectChantier>
</View>
}
<ScrollView>
<View style = {styles.header}>
<ThemedText style = {styles.text}>
{editMode? "Edition d'un chantier"
:"Ajouter un nouveau chantier"}
</ThemedText>
{renderInut("Objet","Renovation",objet,setObjet,false)}
{//renderInut("Date de départ","TOTO : JOUR + Demi journé",date,setDate)
}
{renderInutDate("Date de départ")}
{renderInut("Estimation de la durée (en demi-journées)","14",duree,setDuree,true)}
{renderInut("Adresse","1 Rue de la Coutellerie, Paris",adresse,setAdresse,false)}
{renderInut("Contact client","07 01 02 03 04 05",contact,setContact,true)}
<View style = {styles.inputLine}>
<ThemedText style = {styles.inputName}>Chef de chantier:</ThemedText>
<SelectChafChantier style = {styles.input} sendChefChantier={setChefChantier}/>
</View>
<View style = {styles.inputLine}>
<ThemedText style = {styles.inputName}>Vehicules et machines:</ThemedText>
<SelectRessource style={styles.input} sendRessources={setMachines} ressourceType="Machine"/>
</View>
<View style = {styles.inputLine}>
<ThemedText style = {styles.inputName}>Ouvriers:</ThemedText>
<SelectRessource style={styles.input} sendRessources={setOuviers} ressourceType="Ouvrier"/>
</View>
<ThemedButton
lvl={1}
shadow={true}
style={{ padding: 15, borderRadius: 8, marginTop: 10 }}
onPress={() => handleAddChantier()}
>
<ThemedText>Valider</ThemedText>
</ThemedButton>
{openConfirmation && renderValidationScreen()}
</View>
</ScrollView>
</View>
</ThemedView>
);
}
const styles = StyleSheet.create({
back:{
height:"100%",
width:"100%",
},
container: {
flex: 1,
marginTop: Constants.statusBarHeight, //pour la barre menu du haut
},
header: {
marginTop:60,
alignItems: "center",
paddingHorizontal: 20,
},
text: {
fontSize: 22,
fontWeight: "bold",
marginBottom: 10,
},
inputBack: {
width: "100%",
borderRadius: 10,
backgroundColor: "transparent",
},
inputLine:{
width: "100%",
//flexDirection: 'row',
paddingVertical: 5,
//alignItems: "center",
},
inputName: {
fontSize: 16,
},
input: {
width: "100%",
borderRadius: 10,
padding: 10,
fontSize: 16,
},
overlay:{
backgroundColor:'#00000080',
padding:"5%",
paddingVertical:"20%",
width:"100%",
height:"100%",
},
overlayView:{
borderRadius: 20,
padding: 20,
alignItems: "center",
width: "100%",
gap:5,
//backgroundColor:'#ff0000',
},
buttonValid:{
//borderWidth: 2,
width:'100%',
margin: 0,
borderRadius: 15,
padding: 10,
height:60,
alignItems: "center",
justifyContent: 'center',
},
summaryNewChantier:{
width:'100%',
borderRadius: 15,
padding:10,
}
});

203
app/(tabs)/addRessource.tsx
View File

@@ -1,203 +0,0 @@
import ChantierSummary from '@/components/chantierSummary';
import SelectChantier from '@/components/selectChantier';
import SetStatus from '@/components/setStatus';
import { ThemedView } from '@/components/theme/themed-view';
import React, { useEffect, useState } from 'react';
import { StyleSheet, ScrollView, Button, TextInput, Text, View, Modal } 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, User } from '@/class/class';
import { ThemedText } from '@/components/theme/themed-text';
import { ThemedButton } from '@/components/theme/themed-button';
import { ThemedTextInput } from '@/components/theme/themed-textinput';
import DateTimePicker, { DateTimePickerEvent } from '@react-native-community/datetimepicker';
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 SelectMachine from '@/components/selectMachine';
//Uniquement accessible par le RESPONSSABLE du chantier
//Pour créer ou modifier un chantier
export default function AddRessource() {
const { ressources, setRessources } = useRessources();
const [editMode,setEditMode] = useState(false);
const [loading, setLoading] = useState(false);
const [nom, setNom] = useState('');
const [type, setType] = useState('');
const [quantite, setQuantite] = useState('');
const [quantiteDisponible,setQuantiteDisponible] = useState('');
const [openConfirmation,setOpenConfirmation] = useState(false);
async function handleAddRessource() {
setLoading(true);
setOpenConfirmation(true);
}
async function onConfirm(): Promise<void> {
//TODO
//await changeChantierStatus(chantier.id,tempStatus)
//Il faut changer le UX
//setChantier({...chantier,etat: tempStatus})
if(isValidRessource()){
setOpenConfirmation(false);
}
}
function onCancel(): void {
setOpenConfirmation(false);
}
function isValidRessource():Boolean{
return nom!= "" && type!= "" && quantite != "" && quantiteDisponible != ""
}
const renderValidationScreen = () => {
return(
<Modal transparent={true} >
<View style={styles.overlay}>
<ThemedView style={styles.overlayView}>
<ThemedText style={{fontSize: 25}}>Créer la nouvelle ressource suivante ? :</ThemedText>
<ThemedView lvl={2} style={styles.summaryNewChantier}>
<ThemedText style={{fontSize: 20}}>Nom: {nom===''?"NONE":nom}</ThemedText>
<ThemedText style={{fontSize: 20}}>Type: {type===''?"NONE":type}</ThemedText>
<ThemedText style={{fontSize: 20}}>quantite: {quantite===''?"0":quantite} </ThemedText>
<ThemedText style={{fontSize: 20}}>quantite disponible: {quantiteDisponible===''?"NONE":quantiteDisponible}</ThemedText>
</ThemedView>
<View style={styles.overlayView}>
<ThemedButton lvl={2} border={5} style={styles.buttonValid} onPress={() => onConfirm()}>
<ThemedText style={{fontSize: 25}}>Confirmer</ThemedText>
</ThemedButton>
</View>
<View style={styles.overlayView}>
<ThemedButton lvl={2} border={5} style={styles.buttonValid} onPress={() => onCancel()}>
<ThemedText style={{fontSize: 25}}>Annuler</ThemedText>
</ThemedButton>
</View>
</ThemedView>
</View>
</Modal>
)
}
const renderInut = (name : string, preFill : string, value : string, setValue : ((text:string) => void),numeric:boolean) => {
return (
<View style = {styles.inputLine}>
<ThemedText style = {styles.inputName}>{name}:</ThemedText>
<ThemedTextInput lvl = {1} style = {styles.input} placeholder={preFill} value = {value} keyboardType={numeric ? "numeric" : "default"} onChangeText={setValue} />
</View>
);
};
return (
<ThemedView lvl={3} style={styles.back}>
<View style={styles.container}>
{editMode &&
<View style={{width:"100%", position: 'absolute'}}>
<SelectChantier></SelectChantier>
</View>
}
<ScrollView>
<View style = {styles.header}>
<ThemedText style = {styles.text}>
{editMode? "Edition d'un chantier"
:"Ajouter une nouvelle ressource"}
</ThemedText>
{renderInut("Nom","Marteau",nom,setNom,false)}
{renderInut("Type","outil",type,setType,false)}
{renderInut("Quantité ","14",quantite,setQuantite,true)}
{renderInut("Quantité disponible","14",quantiteDisponible,setQuantiteDisponible,true)}
<ThemedButton
lvl={1}
shadow={true}
style={{ padding: 15, borderRadius: 8, marginTop: 10 }}
onPress={() => handleAddRessource()}
>
<ThemedText>Valider</ThemedText>
</ThemedButton>
{openConfirmation && renderValidationScreen()}
</View>
</ScrollView>
</View>
</ThemedView>
);
}
const styles = StyleSheet.create({
back:{
height:"100%",
width:"100%",
},
container: {
flex: 1,
marginTop: Constants.statusBarHeight, //pour la barre menu du haut
},
header: {
marginTop:60,
alignItems: "center",
paddingHorizontal: 20,
},
text: {
fontSize: 22,
fontWeight: "bold",
marginBottom: 10,
},
inputBack: {
width: "100%",
borderRadius: 10,
backgroundColor: "transparent",
},
inputLine:{
width: "100%",
//flexDirection: 'row',
paddingVertical: 5,
//alignItems: "center",
},
inputName: {
fontSize: 16,
},
input: {
width: "100%",
borderRadius: 10,
padding: 10,
fontSize: 16,
},
overlay:{
backgroundColor:'#00000080',
padding:"5%",
paddingVertical:"20%",
width:"100%",
height:"100%",
},
overlayView:{
borderRadius: 20,
padding: 20,
alignItems: "center",
width: "100%",
gap:5,
//backgroundColor:'#ff0000',
},
buttonValid:{
//borderWidth: 2,
width:'100%',
margin: 0,
borderRadius: 15,
padding: 10,
height:60,
alignItems: "center",
justifyContent: 'center',
},
summaryNewChantier:{
width:'100%',
borderRadius: 15,
padding:10,
}
});

96
app/(tabs)/addScreen.tsx
View File

@@ -1,35 +1,81 @@
import { ThemedButton } from "@/components/theme/themed-button";
import { ThemedText } from "@/components/theme/themed-text";
import { useState } from "react";
import { View } from "react-native";
import { View,StyleSheet } from "react-native";
import AddChantier from "@/components/add/addChantier";
import AddRessource from "@/components/add/addRessource";
import AddArtisant from "@/components/add/addArtisant";
import Constants from 'expo-constants'; //pour connaître la taille de la barre menu de l'OS en haut
import { ThemedView } from "@/components/theme/themed-view";
export default function AddScreen() {
const [typeAdd, setTypeAdd] = useState('');
return(
<View>
<ThemedButton>
<ThemedText>
Ajouter un chantier
</ThemedText>
</ThemedButton>
<ThemedButton>
<ThemedText>
Ajouter un équipement
</ThemedText>
</ThemedButton>
<ThemedButton>
<ThemedText>
Ajouter un vehicule ou machine
</ThemedText>
</ThemedButton>
<ThemedButton>
<ThemedText>
Ajouter un ouvrier
</ThemedText>
</ThemedButton>
</View>
<ThemedView lvl={3} style={styles.back}>
<View style={styles.container}>
{typeAdd===""? (
<View style={styles.selectTypeAdd} >
<ThemedButton style={styles.button} onPress={() => setTypeAdd("Chantier")}>
<ThemedText>
Ajouter un chantier
</ThemedText>
</ThemedButton>
<ThemedButton style={styles.button} onPress={() => setTypeAdd("Outil")}>
<ThemedText>
Ajouter un équipement
</ThemedText>
</ThemedButton>
<ThemedButton style={styles.button} onPress={() => setTypeAdd("Machine")}>
<ThemedText>
Ajouter un vehicule ou machine
</ThemedText>
</ThemedButton>
<ThemedButton style={styles.button} onPress={() => setTypeAdd("Ouvrier")}>
<ThemedText>
Ajouter un ouvrier
</ThemedText>
</ThemedButton>
</View>
):
<View>
<ThemedButton style={styles.button} onPress={() => setTypeAdd("")}>
<ThemedText>
Retour
</ThemedText>
</ThemedButton>
{typeAdd==="Chantier"? (
<AddChantier/>
):
(
<AddRessource ressourceType={typeAdd as 'Outil' | 'Machine' | 'Ouvrier'}/>
)}
</View>
}
</View>
</ThemedView>
)
}
}
const styles = StyleSheet.create({
back:{
height:"100%",
width:"100%",
},
container: {
flex: 1,
marginTop: Constants.statusBarHeight, //pour la barre menu du haut
},
button:{
padding:10,
borderRadius:10,
},
selectTypeAdd:{
gap:30,
padding:20
}
});