304 lines
11 KiB
TypeScript
304 lines
11 KiB
TypeScript
import ChantierSummary from '@/components/chantierSummary';
|
|
import SelectChantier from '@/components/selectChantier';
|
|
|
|
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 '../../app/ContextChantier';
|
|
import { useRessources } from '../../app/ContextRessource';
|
|
import { useUser } from '../../app/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/add/select/selectChefChantier';
|
|
import SelectRessource from '@/components/add/select/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>
|
|
<View style = {styles.inputLine}>
|
|
<ThemedText style = {styles.inputName}>Outils:</ThemedText>
|
|
<SelectRessource style={styles.input} sendRessources={setOuviers} ressourceType="Outil"/>
|
|
</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,
|
|
},
|
|
header: {
|
|
marginTop:30,
|
|
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,
|
|
}
|
|
});
|