This commit is contained in:
tuanvu
2025-12-11 21:19:17 +01:00
3 changed files with 338 additions and 105 deletions

View File

@@ -7,14 +7,15 @@ import { HapticTab } from '@/components/haptic-tab';
import { IconSymbol } from '@/components/ui/icon-symbol'; import { IconSymbol } from '@/components/ui/icon-symbol';
import { Colors } from '@/constants/theme'; import { Colors } from '@/constants/theme';
import { useColorScheme } from '@/hooks/use-color-scheme'; import { useColorScheme } from '@/hooks/use-color-scheme';
import AddChantier from './addChantier';
import GestionOuvrier from './gestion_ouvrier'; import GestionOuvrier from './gestion_ouvrier';
import ListMateriel from './gestionnaire_ressource'; import ListMateriel from './gestionnaire_ressource';
import Home from './home'; import Home from './home';
import MapScreen from './mapScreen'; import MapScreen from './mapScreen';
import AddChantier from './addChantier';
import AntDesign from '@expo/vector-icons/AntDesign'; import AntDesign from '@expo/vector-icons/AntDesign';
import { UserProvider } from '../ContextUser';
import { ChantierProvider } from '../ContextChantier';
import { RessourcesProvider } from '../ContextRessource';
const Tabs = createBottomTabNavigator(); const Tabs = createBottomTabNavigator();
@@ -22,59 +23,67 @@ export default function TabLayout() {
const colorScheme = useColorScheme(); const colorScheme = useColorScheme();
return ( return (
<Tabs.Navigator <UserProvider>
initialRouteName='explore' <ChantierProvider>
screenOptions={{ <RessourcesProvider>
tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint, <Tabs.Navigator
headerShown: false, initialRouteName='explore'
tabBarButton: HapticTab, screenOptions={{
}}> tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
<Tabs.Screen headerShown: false,
name="home" tabBarButton: HapticTab,
component={Home} }}>
options={{ <Tabs.Screen
title: 'Home', name="home"
tabBarIcon: ({ color }) => ( component={Home}
<IconSymbol size={28} name="house.fill" color={color} /> options={{
), title: 'Home',
}} tabBarIcon: ({ color }) => (
/> <IconSymbol size={28} name="house.fill" color={color} />
<Tabs.Screen ),
name="gestionnaire_ressource" }}
component={ListMateriel} />
options={{ <Tabs.Screen
title: 'Ressources', name="gestionnaire_ressource"
tabBarIcon: ({ color }) => ( component={ListMateriel}
<IconSymbol size={28} name="backpack.fill" color={color} /> options={{
), title: 'Ressources',
}} tabBarIcon: ({ color }) => (
/> <IconSymbol size={28} name="backpack.fill" color={color} />
<Tabs.Screen ),
name="gestionnaire_ouvrier" }}
component={GestionOuvrier} />
options={{ <Tabs.Screen
title: 'Ouvriers', name="GestionOuvrier"
tabBarIcon: ({ color }) => <IconSymbol size={28} name="person.fill" color={color} />, component={GestionOuvrier}
}} options={{
/> title: 'Bonjour',
<Tabs.Screen tabBarIcon: ({ color }) => <IconSymbol size={28} name="person.fill" color={color} />,
name="explore" }}
component={MapScreen} />
options={{ <Tabs.Screen
title: 'MapScreen', name="explore"
tabBarIcon: ({ color }) => <IconSymbol size={28} name="paperplane.fill" color={color} />, component={MapScreen}
}} options={{
> title: 'MapScreen',
</Tabs.Screen> tabBarIcon: ({ color }) => <IconSymbol size={28} name="paperplane.fill" color={color} />,
<Tabs.Screen }}
name="addChantier" >
component={AddChantier} </Tabs.Screen>
options={{ <Tabs.Screen
title: 'Ajouter', name="addChantier"
tabBarIcon: ({ color }) => (<AntDesign name="plus" size={28} color={color} />), component={AddChantier}
}} options={{
/> title: 'Ajouter',
tabBarIcon: ({ color }) => (
</Tabs.Navigator> <AntDesign name="plus" size={24} color="black" />
),
}}
/>
</Tabs.Navigator>
</RessourcesProvider>
</ChantierProvider>
</UserProvider>
); );
} }

View File

@@ -1,27 +1,201 @@
import ChantierSummary from '@/components/chantierSummary';
import SelectChantier from '@/components/selectChantier';
import SetStatus from '@/components/setStatus';
import { ThemedView } from '@/components/themed-view';
import React, { useEffect, useState } from 'react';
import { StyleSheet, ScrollView, Button, TextInput, Text } 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 } from '@/class/class';
import { ThemedText } from '@/components/themed-text'; import { ThemedText } from '@/components/themed-text';
import { ThemedView, } from '@/components/themed-view'; import { ThemedButton } from '@/components/themed-button';
import Constants from 'expo-constants'; //pour connaître la taille de la barre menu de l'OS en haut import { ThemedTextInput } from '@/components/themed-textinput';
import React from 'react';
import { StyleSheet, View } from 'react-native';
export default function AddChantier() { export default function AddChantier() {
const { chantier, setChantier } = useChantier();
const { user, setUser } = useUser();
const { ressources, setRessources } = useRessources();
const [loading, setLoading] = useState(false);
const [nom, setNom] = useState('');
const [chefChantier, setChefChantier] = useState('');
const [adresse, setAdresse] = useState('');
const [duree, setDuree] = useState('');
const [userSelect, setUserSelect] = useState<string[]>([]);
const [ressourcesSelect, setRessourcesSelect] = useState<string[]>([]);
return( // Charger les utilisateurs et ressources
<ThemedView lvl={3} style={styles.back}> useEffect(() => {
<View style={styles.container}> async function load() {
<ThemedText>TODO</ThemedText> setLoading(true);
</View> const usersDb = await getUsers();
</ThemedView> const ressourcesDb = await getRessources();
) setUser(usersDb);
setRessources(ressourcesDb);
setLoading(false);
}
load();
}, []);
async function handleAddChantier() {
setLoading(true);
// Vérification chef
const chefUser = user.find(u => u.id === chefChantier);
if (!chefUser) {
console.error("Chef introuvable !");
setLoading(false);
return;
}
// Trouver les Users de l'équipe
const equipeUsers = userSelect
.map(id => user.find(u => u.id === id))
.filter(Boolean) as typeof user;
// Trouver les ressources sélectionnées
const materielSelect = ressourcesSelect
.map(id => ressources.find(r => r.id.toString() === id))
.filter(Boolean) as Ressources[];
// Construire l'objet chantier complet
const chantierData: Omit<Chantier, 'id'> = {
chef: chefUser!,
adresse,
dateDep: new Date(),
equipe: equipeUsers,
materiel: materielSelect,
etat: 'En attente',
latitude: 0,
longitude: 0,
anomalies: [],
tempsEst: 0,
vehicules: [],
contact: "",
};
// Ajouter le chantier dans Firestore
const id = await addChantier(chantierData);
setLoading(false);
if (id) {
console.log("Chantier ajouté avec l'ID :", id);
setChantier({ ...chantierData, id });
}
}
return (
<ScrollView style= {styles.container}>
<ThemedView style = {styles.header}>
<ThemedText style = {styles.text}>Ajouter un nouveau chantier </ThemedText>
<ThemedTextInput lvl = {0} style = {styles.input} placeholder='Nom du chantier' value = {nom} onChangeText={setNom}/>
<ThemedTextInput lvl = {0} style = {styles.input} placeholder='Adresse du chantier' value = {adresse} onChangeText={setAdresse} />
<ThemedTextInput lvl = {0} style = {styles.input} placeholder='durée estimée (en jours)' value = {duree} onChangeText={setDuree} />
<ThemedTextInput lvl = {0} style = {styles.input} placeholder='chef de chantier' value= {chefChantier} onChangeText={setChefChantier}/>
<ThemedText style={{ fontWeight: "bold", marginTop: 15 }}>Équipe</ThemedText>
<SelectChantier
data={user}
multiple
selected={userSelect}
onChange={setUserSelect}
placeholder="Sélectionner l'équipe"
/>
<Text style={{ fontWeight: "bold", marginTop: 15 }}>Ressources</Text>
<SelectChantier
data={ressources}
multiple
selected={ressourcesSelect}
onChange={setRessourcesSelect}
placeholder="Sélectionner les ressources"
/>
<ThemedButton
lvl={1}
shadow={true}
style={{ padding: 10, borderRadius: 8, marginBottom: 10 }}
onPress={() => handleAddChantier()}
>
</ThemedButton>
</ThemedView>
</ScrollView>
);
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
back:{
height:"100%",
width:"100%",
},
container: { container: {
flex: 1, flex: 1,
marginTop: Constants.statusBarHeight, //pour la barre menu du haut marginTop: 60,
}, },
}); header: {
marginBottom: 20,
alignItems: "center",
paddingHorizontal: 20,
},
text: {
fontSize: 22,
fontWeight: "bold",
marginBottom: 10,
},
inputBack: {
width: "100%",
borderRadius: 10,
backgroundColor: "transparent",
},
input: {
width: "100%",
borderRadius: 10,
padding: 10,
fontSize: 16,
},
card: {
flexDirection: "row",
marginHorizontal: 20,
marginBottom: 15,
borderRadius: 10,
padding: 10,
},
image: {
width: 80,
height: 80,
borderRadius: 8,
marginRight: 10,
},
info: {
flex: 1,
justifyContent: "center",
},
footer: {
padding: 20,
},
empty: {
textAlign: "center",
marginTop: 30,
color: "#888",
},
filterMenuOverlay: {
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: "rgba(0,0,0,0.4)",
justifyContent: "center",
alignItems: "center",
zIndex: 999,
},
filterMenu: {
width: "80%",
borderRadius: 12,
padding: 20,
backgroundColor: "#fff",
},
filterTitle: {
fontSize: 18,
fontWeight: "bold",
marginBottom: 20,
textAlign: "center",
},
});

View File

@@ -1,10 +1,8 @@
import { useChantier } from "@/app/ContextChantier"; import { useChantier } from "@/app/ContextChantier";
import { Chantier } from "@/class/class"; import { Chantier } from "@/class/class";
import { getChantiers } from "@/services/ressourcesService"; import { getChantiers } from "@/services/ressourcesService";
import { useRouter } from "expo-router";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { import {
ActivityIndicator,
Dimensions, Dimensions,
Image, Image,
Pressable, Pressable,
@@ -31,15 +29,19 @@ const { width, height } = Dimensions.get("window");
*/ */
export default function SelectChantier() { export default function SelectChantier(props: {
data?: any[];
multiple?: boolean;
selected?: string[] | string | null;
onChange?: (val: any) => void;
placeholder?: string;
}) {
const { data: propData, multiple = false, selected, onChange, placeholder } = props || {};
const { chantier, setChantier } = useChantier(); const { chantier, setChantier } = useChantier();
const [search, setSearch] = useState(""); const [search, setSearch] = useState("");
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const [isLoaded, setIsLoaded] = useState(false); const [chantiers, setChantiers] = useState<any[]>([]);
const [chantiers, setChantiers] = useState<Chantier[]>([]);
const router = useRouter();
const AnimatedThemedView = Animated.createAnimatedComponent(ThemedView); const AnimatedThemedView = Animated.createAnimatedComponent(ThemedView);
const AnimatedThemedText = Animated.createAnimatedComponent(ThemedText); const AnimatedThemedText = Animated.createAnimatedComponent(ThemedText);
const AnimatedThemedButton = Animated.createAnimatedComponent(ThemedButton); const AnimatedThemedButton = Animated.createAnimatedComponent(ThemedButton);
@@ -47,21 +49,28 @@ export default function SelectChantier() {
Animated.createAnimatedComponent(ThemedTextInput); Animated.createAnimatedComponent(ThemedTextInput);
async function onPressOpen(){ async function onPressOpen(){
setIsLoaded(false);
setIsOpen(!isOpen); setIsOpen(!isOpen);
if(!isOpen){ if(!isOpen){
const updatedChantiers = await getChantiers(); if (propData && propData.length) {
setIsLoaded(true); setChantiers(propData as any[]);
setChantiers(updatedChantiers) } else {
const updatedChantiers = await getChantiers();
setChantiers(updatedChantiers);
}
} }
} }
function onPressAddChantier(){ function onPressAddChantier(){
router.push("/(tabs)/addChantier")
setIsOpen(false)
} }
useEffect(() => { useEffect(() => {
// If parent provided data, use it. Otherwise fetch chantiers.
if (propData && propData.length) {
setChantiers(propData as any[]);
return;
}
async function loadChantiers() { async function loadChantiers() {
const list = await getChantiers(); const list = await getChantiers();
setChantiers(list); setChantiers(list);
@@ -70,22 +79,56 @@ export default function SelectChantier() {
loadChantiers(); loadChantiers();
}, []); }, []);
function selectChantier(chantier: Chantier): void { function getId(item: any) {
setChantier(chantier); return (item && (item.id ?? item._id ?? item.uid ?? item.key)) ?? String(item);
}
function getLabel(item: any) {
if (!item) return String(item);
if (item.adresse) return item.adresse;
if (item.nom) return item.nom;
if (item.name && item.last_name) return `${item.last_name} ${item.name}`;
if (item.name) return item.name;
if (item.label) return item.label;
if (typeof item === 'string') return item;
return JSON.stringify(item);
}
function selectChantier(item: any): void {
const id = String(getId(item));
if (multiple) {
// for multiple selection toggle id in selected array
const current = Array.isArray(selected) ? [...selected] : [];
const idx = current.indexOf(id);
if (idx >= 0) current.splice(idx, 1);
else current.push(id);
onChange?.(current);
// keep menu open for multiple selection
return;
}
// single selection
if (onChange) {
onChange(id);
} else {
// fallback behavior for old usage: if selecting a Chantier, update context
setChantier(item as Chantier);
}
setIsOpen(false); setIsOpen(false);
} }
const renderChantier = (chantier: Chantier, index: number) => { const renderChantier = (item: any, index: number) => {
const label = getLabel(item);
const id = String(getId(item));
const isSelected = Array.isArray(selected) ? selected.includes(id) : selected === id;
return ( return (
<Pressable key={index} onPress={() => selectChantier(chantier)}> <Pressable key={index} onPress={() => selectChantier(item)}>
<ThemedView lvl={4} style={styles.chantier}> <ThemedView lvl={4} style={[styles.chantier, isSelected ? { borderWidth: 1 } : {}]}>
<View> <View>
<Image source={{ uri:"https://cdn.discordapp.com/attachments/1425108443571945644/1427207643180826757/raw.png?ex=69392bb2&is=6937da32&hm=dcc09e76d3dca89d2418947b46efbd38673b9dc559027724b2e51d493b173bc9&" /*chantier.urlImg*/ }} style={styles.image} /> <Image source={{ uri: "https://cdn.discordapp.com/attachments/1425108443571945644/1427207643180826757/raw.png?ex=69392bb2&is=6937da32&hm=dcc09e76d3dca89d2418947b46efbd38673b9dc559027724b2e51d493b173bc9&" }} style={styles.image} />
</View> </View>
<View> <View>
<ThemedText>Adresse: {chantier.adresse}</ThemedText> <ThemedText>{label}</ThemedText>
<ThemedText>Chef de chantier: {chantier.chef.last_name}{" "}{chantier.chef.name}</ThemedText>
<ThemedText>État: {chantier.etat}</ThemedText>
</View> </View>
</ThemedView> </ThemedView>
</Pressable> </Pressable>
@@ -98,7 +141,19 @@ export default function SelectChantier() {
<AnimatedThemedView layout={LinearTransition.duration(200)} lvl={2} shadow={true} style={styles.window}> <AnimatedThemedView layout={LinearTransition.duration(200)} lvl={2} shadow={true} style={styles.window}>
<AnimatedThemedButton style={isOpen ? styles.buttonOpen : styles.buttonClose} lvl={isOpen ? 1 : 1} onPress={() => onPressOpen()}> <AnimatedThemedButton style={isOpen ? styles.buttonOpen : styles.buttonClose} lvl={isOpen ? 1 : 1} onPress={() => onPressOpen()}>
<ThemedText style={styles.buttonText}> <ThemedText style={styles.buttonText}>
{isOpen ? "Fermer" : (chantier!=null ? chantier.adresse : "Chantier")} {isOpen
? "Fermer"
: (multiple
? (Array.isArray(selected) && selected.length ? `${selected.length} sélectionnés` : (placeholder ?? "Sélectionner"))
: (selected ? (() => {
// show label of selected single item if provided in propData
if (selected && propData) {
const found = propData.find((it: any) => String(getId(it)) === String(selected));
return found ? getLabel(found) : (chantier ? (chantier.adresse ?? getLabel(chantier)) : (placeholder ?? "Chantier"));
}
return chantier ? (chantier.adresse ?? getLabel(chantier)) : (placeholder ?? "Chantier");
})() : (placeholder ?? "Chantier"))
)}
</ThemedText> </ThemedText>
</AnimatedThemedButton> </AnimatedThemedButton>
{isOpen && ( {isOpen && (
@@ -111,16 +166,14 @@ export default function SelectChantier() {
+ +
</ThemedText> </ThemedText>
</ThemedButton> </ThemedButton>
<View style={styles.list}>
{isLoaded? <ThemedView lvl={2} style={styles.list}>
<ScrollView contentContainerStyle={styles.chantiersList}> <ScrollView contentContainerStyle={styles.chantiersList}>
{chantiers.map((chantier, index) => {chantiers.map((chantier, index) =>
renderChantier(chantier, index) renderChantier(chantier, index)
)} )}
</ScrollView> </ScrollView>
: <ActivityIndicator style={{height:"100%"}} color="#808080" size="large" />} </ThemedView>
</View>
</View> </View>
)} )}
</AnimatedThemedView> </AnimatedThemedView>
@@ -223,8 +276,5 @@ const styles = StyleSheet.create({
buttonAdd:{ buttonAdd:{
borderRadius: 10, borderRadius: 10,
marginBottom: 10, marginBottom: 10,
height: 30,
alignItems: 'center',
justifyContent: 'center',
} }
}); });