265 lines
9.0 KiB
TypeScript
265 lines
9.0 KiB
TypeScript
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';
|
|
|
|
//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 [vehicule, setVehicule] = useState('');
|
|
|
|
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> {
|
|
//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 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,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}>Chef de chantier:</ThemedText>
|
|
<SelectChafChantier style = {styles.input} sendChefChantier={setChefChantier}/>
|
|
</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,
|
|
}
|
|
});
|