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

test with firebase

Browse Source
This commit is contained in:
tuanvu
2025-12-09 13:32:09 +01:00
parent b0be1e98d9
commit 3bd08147e3
5 changed files with 307 additions and 297 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
app/(tabs)/bonjourFL.tsx
View File

@@ -1,16 +1,15 @@
import SelectChantier from '@/components/selectChantier'; import SelectChantier from "@/components/selectChantier";
import { ThemedText } from '@/components/themed-text'; import { ThemedText } from "@/components/themed-text";
import { ThemedTextInput } from '@/components/themed-textinpute'; import { ThemedTextInput } from "@/components/themed-textinpute";
import { ThemedView } from '@/components/themed-view'; import { ThemedView } from "@/components/themed-view";
import { useLocalSearchParams, useRouter } from 'expo-router'; import { useLocalSearchParams, useRouter } from "expo-router";
import React, { useMemo, useState } from 'react'; import React, { useMemo, useState } from "react";
import { Button, FlatList, Image, StyleSheet, Text } from 'react-native'; import { Button, FlatList, Image, StyleSheet, Text } from "react-native";
import rawConcerts from '../../data/concerts.json'; import rawConcerts from "../../data/concerts.json";
import Constants from 'expo-constants' //pour connaître la taille de la barre menu de l'OS en haut import Constants from "expo-constants"; //pour connaître la taille de la barre menu de l'OS en haut
import Example from '@/components/example';
import { useChantier } from '../Context';
import Example from "@/components/example";
import { useChantier } from "../Context";
type Concert = { type Concert = {
group: string; group: string;
@@ -24,14 +23,11 @@ type Concert = {
}; };
export default function BonjourScreen() { export default function BonjourScreen() {
const router = useRouter(); const router = useRouter();
const { nom, prenom } = useLocalSearchParams(); // Recup data ecran precedent const { nom, prenom } = useLocalSearchParams(); // Recup data ecran precedent
const [search, setSearch] = useState(''); const [search, setSearch] = useState("");
const { chantier, setChantier } = useChantier(); const { chantier, setChantier } = useChantier();
const concertsData: Concert[] = Array.isArray(rawConcerts) const concertsData: Concert[] = Array.isArray(rawConcerts)
? (rawConcerts as Concert[]) ? (rawConcerts as Concert[])
: []; : [];
@@ -41,32 +37,29 @@ export default function BonjourScreen() {
const q = search.trim().toLowerCase(); const q = search.trim().toLowerCase();
if (!q) return concertsData; if (!q) return concertsData;
return concertsData.filter( return concertsData.filter(
(item) => !!item && (item.group ?? '').toLowerCase().includes(q) (item) => !!item && (item.group ?? "").toLowerCase().includes(q)
); );
}, [concertsData, search]); }, [concertsData, search]);
const renderItem = ({ item, index }: { item?: Concert; index: number }) => {
const renderItem = ({ item, index }: { item?: Concert; index: number }) => {
if (!item) { if (!item) {
return null; return null;
} }
return( return (
<ThemedView lvl={1} shadow={true} style={styles.card}> <ThemedView lvl={1} shadow={true} style={styles.card}>
<Image source={{ uri: item.Image }} style={styles.image} /> <Image source={{ uri: item.Image }} style={styles.image} />
<ThemedView lvl={1} style={styles.info}> <ThemedView lvl={1} style={styles.info}>
<ThemedText style={styles.group}>{item.group}</ThemedText> <ThemedText style={styles.group}>{item.group}</ThemedText>
<ThemedText>{item.date}</ThemedText> <ThemedText>{item.date}</ThemedText>
<ThemedText>{item.location}</ThemedText> <ThemedText>{item.location}</ThemedText>
<ThemedText>Prix : {item.price} €</ThemedText> <ThemedText>Prix : {item.price} €</ThemedText>
<ThemedText>Places restantes : {item.ticketsLeft}</ThemedText> <ThemedText>Places restantes : {item.ticketsLeft}</ThemedText>
</ThemedView>
</ThemedView> </ThemedView>
</ThemedView>); );
}; };
return (
return(
<ThemedView lvl={3} style={styles.container}> <ThemedView lvl={3} style={styles.container}>
<FlatList <FlatList
data={filteredData} data={filteredData}
@@ -76,7 +69,7 @@ export default function BonjourScreen() {
ListHeaderComponent={ ListHeaderComponent={
<ThemedView opacity="00" style={styles.header}> <ThemedView opacity="00" style={styles.header}>
<ThemedText style={styles.text}> <ThemedText style={styles.text}>
Bonjour {prenom} {nom} {chantier&&chantier.chef.nom} Bonjour {prenom} {nom} {chantier && chantier.chef.name}
</ThemedText> </ThemedText>
<ThemedView style={styles.inputBack} shadow={true}> <ThemedView style={styles.inputBack} shadow={true}>
@@ -95,14 +88,17 @@ export default function BonjourScreen() {
} }
/> />
<ThemedView
style={{
<ThemedView style={{width:"100%", position: 'absolute', backgroundColor:'transparent',}}> width: "100%",
<SelectChantier ></SelectChantier> position: "absolute",
backgroundColor: "transparent",
}}
>
<SelectChantier></SelectChantier>
</ThemedView> </ThemedView>
</ThemedView> </ThemedView>
) );
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
@@ -114,21 +110,21 @@ const styles = StyleSheet.create({
header: { header: {
marginTop: 60, marginTop: 60,
marginBottom: 20, marginBottom: 20,
alignItems: 'center', alignItems: "center",
paddingHorizontal: 20, paddingHorizontal: 20,
}, },
text: { text: {
fontSize: 22, fontSize: 22,
fontWeight: 'bold', fontWeight: "bold",
marginBottom: 10, marginBottom: 10,
}, },
inputBack:{ inputBack: {
width:"100%", width: "100%",
borderRadius:10, borderRadius: 10,
backgroundColor:'transparent' backgroundColor: "transparent",
}, },
input: { input: {
width: '100%', width: "100%",
//borderWidth: 1, //borderWidth: 1,
//borderColor: '#ccc', //borderColor: '#ccc',
borderRadius: 10, borderRadius: 10,
@@ -136,7 +132,7 @@ const styles = StyleSheet.create({
fontSize: 16, fontSize: 16,
}, },
card: { card: {
flexDirection: 'row', flexDirection: "row",
marginHorizontal: 20, marginHorizontal: 20,
marginBottom: 15, marginBottom: 15,
//borderWidth: 1, //borderWidth: 1,
@@ -144,7 +140,6 @@ const styles = StyleSheet.create({
borderRadius: 10, borderRadius: 10,
padding: 10, padding: 10,
//backgroundColor: '#fafafa', //backgroundColor: '#fafafa',
}, },
image: { image: {
width: 80, width: 80,
@@ -154,10 +149,10 @@ const styles = StyleSheet.create({
}, },
info: { info: {
flex: 1, flex: 1,
justifyContent: 'center', justifyContent: "center",
}, },
group: { group: {
fontWeight: 'bold', fontWeight: "bold",
fontSize: 16, fontSize: 16,
marginBottom: 5, marginBottom: 5,
}, },
@@ -165,8 +160,8 @@ const styles = StyleSheet.create({
padding: 20, padding: 20,
}, },
empty: { empty: {
textAlign: 'center', textAlign: "center",
marginTop: 30, marginTop: 30,
color: '#888', color: "#888",
}, },
}); });

13
app/Context.tsx
View File

@@ -1,5 +1,5 @@
import { Chantier, Chef, exempleChantier } from '@/class/class'; import { Chantier } from "@/class/class";
import { createContext, ReactNode, useContext, useMemo, useState } from 'react'; import { createContext, ReactNode, useContext, useMemo, useState } from "react";
type ChantierContextType = { type ChantierContextType = {
chantier: Chantier | null; chantier: Chantier | null;
@@ -15,10 +15,7 @@ type ChantierProviderProps = {
export const ChantierProvider = ({ children }: ChantierProviderProps) => { export const ChantierProvider = ({ children }: ChantierProviderProps) => {
const [chantier, setChantier] = useState<Chantier | null>(null); const [chantier, setChantier] = useState<Chantier | null>(null);
const value = useMemo( const value = useMemo(() => ({ chantier, setChantier }), [chantier]);
() => ({ chantier, setChantier }),
[chantier]
);
return ( return (
<ChantierContext.Provider value={value}> <ChantierContext.Provider value={value}>
@@ -30,7 +27,7 @@ export const ChantierProvider = ({ children }: ChantierProviderProps) => {
export const useChantier = () => { export const useChantier = () => {
const context = useContext(ChantierContext); const context = useContext(ChantierContext);
if (!context) { if (!context) {
throw new Error('useChantier doit être utilisé dans <ChantierProvider>'); throw new Error("useChantier doit être utilisé dans <ChantierProvider>");
} }
return context; return context;
}; };

245
class/class.tsx
View File

@@ -1,139 +1,126 @@
export class Chantier{ import { collection, getDocs, doc, updateDoc } from "firebase/firestore";
id: number; import { db } from "../firebase_config";
adresse: string; import { Timestamp } from "firebase/firestore";
etat: string;
contact: string;
chef: Chef;
equipe : Equipier[];
materiel : Materiel[];
dateDep : string;
tempsEst : number;
vehicules : Vehicule[];
anomalies : string[];
constructor( export type Chantier = {
id: number, id: number;
adresse: string, adresse: string;
etat: string, etat: string;
contact: string, contact: string;
chef: Chef, chef: User;
equipe: Equipier[], equipe: User[];
materiel: Materiel[], materiel: Ressources[];
dateDep: string, dateDep: Date;
tempsEst: number, tempsEst: number;
vehicules: Vehicule[], vehicules: Ressources[];
anomalies: string[] anomalies: string[];
) { };
this.id = id;
this.adresse = adresse; export async function getChantiers(): Promise<Chantier[]> {
this.etat = etat; try {
this.contact = contact; const colRef = collection(db, "chantiers");
this.chef = chef; const snapshot = await getDocs(colRef);
this.equipe = equipe; return snapshot.docs.map((doc) => {
this.materiel = materiel; const data = doc.data() as any;
this.dateDep = dateDep; return {
this.tempsEst = tempsEst; ...data,
this.vehicules = vehicules; chef: {
this.anomalies = anomalies; ...data.chef,
} allocation: data.chef?.allocation?.map(convertReservation) || [],
},
equipe:
data.equipe?.map((u: any) => ({
...u,
allocation: u.allocation?.map(convertReservation) || [],
})) || [],
materiel:
data.materiel?.map((m: any) => ({
...m,
allocation: m.allocation?.map(convertReservation) || [],
})) || [],
vehicules:
data.vehicules?.map((v: any) => ({
...v,
allocation: v.allocation?.map(convertReservation) || [],
})) || [],
anomalies: data.anomalies || [],
} as Chantier;
});
} catch (err) {
console.error("Firestore Chantiers Error:", err);
return [];
}
} }
export abstract class Equipier{ export type User = {
id: number; id: string;
nom: string; name: string;
prenom: string; last_name: string;
allocation: Reservation[]; allocation: Reservation[];
role: string;
qualifications: string;
};
constructor(id: number, nom:string, prenom:string, allocation: Reservation[]){ export async function getUsers(): Promise<User[]> {
this.id = id; try {
this.nom = nom; const colRef = collection(db, "users");
this.prenom = prenom; const snapshot = await getDocs(colRef);
this.allocation = allocation; return snapshot.docs.map((doc) => {
} const data = doc.data();
return {
...data,
allocation: data.allocation?.map(convertReservation) || [],
} as User;
});
} catch (err) {
console.error("Firestore Users Error:", err);
return [];
}
} }
export class Chef extends Equipier{ export type Ressources = {
constructor(id: number, nom:string, prenom:string, allocation: Reservation[]){ id: number;
super(id,nom,prenom,allocation); name: string;
} type: string;
Image: string;
quantity: number;
available_quantity: number;
allocation: Reservation[];
};
export async function getRessources(): Promise<Ressources[]> {
try {
const colRef = collection(db, "ressources");
const snapshot = await getDocs(colRef);
return snapshot.docs.map((doc) => {
const data = doc.data();
return {
...data,
allocation: data.allocation?.map(convertReservation) || [],
} as Ressources;
});
} catch (err) {
console.error("Firestore Ressources Error:", err);
return [];
}
} }
export class Ouvrier extends Equipier{ export type Reservation = {
qualification : string; id: string;
dateChantier: Date;
dateFin: Date;
};
constructor(id: number, nom:string, prenom:string, allocation: Reservation[], qualification: string){ function convertReservation(res: any): Reservation {
super(id,nom,prenom,allocation); return {
this.qualification=qualification; id: res.id,
} dateChantier:
res.dateChantier instanceof Timestamp
? res.dateChantier.toDate()
: new Date(res.dateChantier),
dateFin:
res.dateFin instanceof Timestamp
? res.dateFin.toDate()
: new Date(res.dateFin),
};
} }
export class ResponsableChantier extends Equipier{
constructor(id: number, nom:string, prenom:string, allocation: Reservation[]){
super(id,nom,prenom,allocation);
}
}
export class Materiel {
id: number;
nom: string;
prenom: string;
type: string;
allocation: Reservation[];
constructor(
id: number,
nom: string,
prenom: string,
type: string,
allocation: Reservation[]
) {
this.id = id;
this.nom = nom;
this.prenom = prenom;
this.type = type;
this.allocation = allocation;
}
}
export class Reservation {
id: string;
dateChantier: Date;
dateFin: Date;
duree: number;
constructor(
id: string,
dateChantier: Date,
dateFin: Date,
duree: number
) {
this.id = id;
this.dateChantier = dateChantier;
this.dateFin = dateFin;
this.duree = duree;
}
}
export class Vehicule {
id: number;
nom: string;
type: string;
allocation: Reservation[];
constructor(
id: number,
nom: string,
type: string,
allocation: Reservation[]
) {
this.id = id;
this.nom = nom;
this.type = type;
this.allocation = allocation;
}
}
export const exempleChantier = new Chantier(1,"Rennes","en cours","contact",new Chef(1,"Chyeef","YEE",[]),[],[],"01/01/25",10,[],["YEE"])

241
components/selectChantier.tsx
View File

@@ -1,17 +1,30 @@
import { useState } from 'react'; import { useState, useEffect } from "react";
import { Button, GestureResponderEvent, Pressable, ScrollView, StyleSheet, View, LayoutAnimation } from 'react-native'; import {
import { ThemedTextInput } from './themed-textinpute'; Button,
GestureResponderEvent,
Pressable,
ScrollView,
StyleSheet,
View,
LayoutAnimation,
} from "react-native";
import { ThemedTextInput } from "./themed-textinpute";
import { ThemedView } from "./themed-view"; import { ThemedView } from "./themed-view";
import { ThemedText } from './themed-text'; import { ThemedText } from "./themed-text";
import { ThemedButton } from './themed-button'; import { ThemedButton } from "./themed-button";
import { Chantier, Chef, exempleChantier } from '@/class/class'; import { Chantier, User } from "@/class/class";
import { Dimensions } from "react-native"; import { Dimensions } from "react-native";
import Animated, { Layout,LinearTransition,Easing,runOnJS } from 'react-native-reanimated'; import Animated, {
import { useChantier } from '@/app/Context'; Layout,
LinearTransition,
Easing,
runOnJS,
} from "react-native-reanimated";
import { useChantier } from "@/app/Context";
import { getChantiers } from "@/class/class";
const screenHeight = Dimensions.get("window").height; const screenHeight = Dimensions.get("window").height;
/* /*
<ThemedView style={{width:"100%", position: 'absolute', backgroundColor:'transparent',}}> <ThemedView style={{width:"100%", position: 'absolute', backgroundColor:'transparent',}}>
@@ -21,156 +34,174 @@ const screenHeight = Dimensions.get("window").height;
*/ */
export default function SelectChantier() { export default function SelectChantier() {
const { chantier, setChantier } = useChantier();
const [search, setSearch] = useState("");
const [isOpen, setIsOpen] = useState(false);
const [chantiers, setChantiers] = useState<Chantier[]>([]);
const { chantier, setChantier } = useChantier(); const AnimatedThemedView = Animated.createAnimatedComponent(ThemedView);
const [search, setSearch] = useState(''); const AnimatedThemedText = Animated.createAnimatedComponent(ThemedText);
const [isOpen,setIsOpen] = useState(false); const AnimatedThemedButton = Animated.createAnimatedComponent(ThemedButton);
const [chantiers,setChantiers] = useState<Chantier[]>([exempleChantier,exempleChantier,exempleChantier,exempleChantier,exempleChantier,exempleChantier]); const AnimatedThemedTextInput =
Animated.createAnimatedComponent(ThemedTextInput);
const AnimatedThemedView = Animated.createAnimatedComponent(ThemedView);
const AnimatedThemedText = Animated.createAnimatedComponent(ThemedText);
const AnimatedThemedButton = Animated.createAnimatedComponent(ThemedButton);
const AnimatedThemedTextInput = Animated.createAnimatedComponent(ThemedTextInput);
function onPressOpen(): void { function onPressOpen(): void {
LayoutAnimation.configureNext( LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
LayoutAnimation.Presets.easeInEaseOut
);
setIsOpen(!isOpen); setIsOpen(!isOpen);
} }
useEffect(() => {
async function loadChantiers() {
const list = await getChantiers();
setChantiers(list);
}
loadChantiers();
}, []);
function selectChantier(chantier: Chantier): void { function selectChantier(chantier: Chantier): void {
setChantier(chantier); setChantier(chantier);
setIsOpen(false); setIsOpen(false);
} }
const renderChantier = (chantier: Chantier, index: number) => {
return (
<ScrollView>
{chantiers
.filter((c) => c.adresse.toLowerCase().includes(search.toLowerCase()))
.map((chantier, index) => (
<Pressable key={index} onPress={() => selectChantier(chantier)}>
<ThemedView lvl={4} style={styles.chantier}>
<ThemedText>Adresse: {chantier.adresse}</ThemedText>
<ThemedText>
Chef de chantier: {chantier.chef.last_name}{" "}
{chantier.chef.name}
</ThemedText>
<ThemedText>
Date de début: {chantier.dateDep.toLocaleDateString()}
</ThemedText>
<ThemedText>État: {chantier.etat}</ThemedText>
</ThemedView>
</Pressable>
))}
</ScrollView>
);
};
return (
const renderChantier = (chantier:Chantier, index: number) => { <Animated.View
return(
<Pressable key={index} onPress={() => selectChantier(chantier)}>
<ThemedView lvl={4} 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 >
</Pressable>
);
};
return(
<Animated.View
layout={LinearTransition.duration(200)} layout={LinearTransition.duration(200)}
style={isOpen ? styles.windowOpean : styles.windowClose}> style={isOpen ? styles.windowOpean : styles.windowClose}
>
<AnimatedThemedView layout={LinearTransition.duration(200)} lvl={2} shadow={true} style={styles.window}> <AnimatedThemedView
<ThemedButton style={isOpen ? styles.buttonOpen : styles.buttonClose} lvl={isOpen ? 1 : 1} onPress={() => onPressOpen()}> layout={LinearTransition.duration(200)}
<ThemedText style={styles.buttonText}>{isOpen ? "Close" : "Open"}</ThemedText> lvl={2}
</ThemedButton> shadow={true}
{isOpen && style={styles.window}
<View style={styles.menu}> >
<ThemedTextInput <ThemedButton
lvl={1} style={isOpen ? styles.buttonOpen : styles.buttonClose}
border={4} lvl={isOpen ? 1 : 1}
style={styles.input} onPress={() => onPressOpen()}
placeholder='Rechercher un chantier' >
value={search} <ThemedText style={styles.buttonText}>
onChangeText={setSearch} {isOpen ? "Close" : "Open"}
/> </ThemedText>
<ThemedView lvl={2} style={styles.list}> </ThemedButton>
<ScrollView contentContainerStyle={styles.chantiersList} > {isOpen && (
<View style={styles.menu}>
{chantiers.map((chantier, index) => ( <ThemedTextInput
renderChantier(chantier, index) lvl={1}
)) border={4}
} style={styles.input}
</ScrollView> placeholder="Rechercher un chantier"
</ThemedView> value={search}
</View> onChangeText={setSearch}
} />
</AnimatedThemedView> <ThemedView lvl={2} style={styles.list}>
</Animated.View> <ScrollView contentContainerStyle={styles.chantiersList}>
) {chantiers.map((chantier, index) =>
renderChantier(chantier, index)
)}
</ScrollView>
</ThemedView>
</View>
)}
</AnimatedThemedView>
</Animated.View>
);
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
windowClose: {
windowClose:{
//backgroundColor: '#00FFFF', //backgroundColor: '#00FFFF',
//borderRadius:10, //borderRadius:10,
padding: 10, padding: 10,
width:"50%", width: "50%",
height:60, height: 60,
overflow: 'hidden', overflow: "hidden",
}, },
windowOpean:{ windowOpean: {
//backgroundColor: '#00FFFF', //backgroundColor: '#00FFFF',
//borderRadius:10, //borderRadius:10,
width:"100%", width: "100%",
height: screenHeight/2, height: screenHeight / 2,
padding: 10, padding: 10,
}, },
window:{ window: {
borderRadius:15, borderRadius: 15,
height: "100%", height: "100%",
//backgroundColor: '#00FF00', //backgroundColor: '#00FF00',
overflow: 'hidden', overflow: "hidden",
}, },
menu:{ menu: {
padding:5, padding: 5,
flex: 1, flex: 1,
minHeight: 0, minHeight: 0,
//backgroundColor:'#FF00FF', //backgroundColor:'#FF00FF',
}, },
list:{ list: {
flex: 1, flex: 1,
overflow: 'hidden', overflow: "hidden",
borderRadius:10, borderRadius: 10,
}, },
chantiersList:{ chantiersList: {
//padding:5, //padding:5,
//backgroundColor:'0000FF', //backgroundColor:'0000FF',
//flexDirection: 'row', //flexDirection: 'row',
//alignItems: 'center', //alignItems: 'center',
gap: 8, gap: 8,
}, },
chantier:{ chantier: {
padding:5, padding: 5,
//marginTop:5, //marginTop:5,
//margin:5, //margin:5,
borderRadius:10, borderRadius: 10,
//borderWidth: 1, //borderWidth: 1,
}, },
input: { input: {
width: '100%', width: "100%",
borderWidth: 1, borderWidth: 1,
borderRadius: 10, borderRadius: 10,
padding: 10, padding: 10,
fontSize: 16, fontSize: 16,
marginBottom:10, marginBottom: 10,
}, },
buttonClose:{ buttonClose: {
width:'100%', width: "100%",
margin: 0, margin: 0,
borderRadius: 15, borderRadius: 15,
padding: 10, padding: 10,
height:40, height: 40,
}, },
buttonOpen:{ buttonOpen: {
width:'50%', width: "50%",
margin: 5, margin: 5,
borderRadius: 10, borderRadius: 10,
padding: 10, padding: 10,
height:40, height: 40,
},
buttonText: {
textAlign: "center",
}, },
buttonText:{
textAlign: 'center',
}
}); });

2
services/ressourcesService.ts
View File

@@ -1,4 +1,4 @@
import { collection, getDocs } from "firebase/firestore"; import { collection, getDocs, doc, updateDoc } from "firebase/firestore";
import { db } from "../firebase_config"; import { db } from "../firebase_config";
export type Ressource = { export type Ressource = {