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

83
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,16 +37,15 @@ 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}>
@@ -60,13 +55,11 @@ export default function BonjourScreen() {
<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",
}, },
}); });

11
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;
}; };

215
class/class.tsx
View File

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

187
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 { chantier, setChantier } = useChantier();
const [search, setSearch] = useState(''); const [search, setSearch] = useState("");
const [isOpen,setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const [chantiers,setChantiers] = useState<Chantier[]>([exempleChantier,exempleChantier,exempleChantier,exempleChantier,exempleChantier,exempleChantier]); const [chantiers, setChantiers] = useState<Chantier[]>([]);
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);
const AnimatedThemedTextInput = Animated.createAnimatedComponent(ThemedTextInput); 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 (
const renderChantier = (chantier:Chantier, index: number) => { <ScrollView>
return( {chantiers
.filter((c) => c.adresse.toLowerCase().includes(search.toLowerCase()))
.map((chantier, index) => (
<Pressable key={index} onPress={() => selectChantier(chantier)}> <Pressable key={index} onPress={() => selectChantier(chantier)}>
<ThemedView lvl={4} style={styles.chantier}> <ThemedView lvl={4} style={styles.chantier}>
<ThemedText>adresse: {chantier.adresse}</ThemedText> <ThemedText>Adresse: {chantier.adresse}</ThemedText>
<ThemedText>chef de chantier: {chantier.chef.prenom} {chantier.chef.nom}</ThemedText> <ThemedText>
<ThemedText >date de début: {chantier.dateDep}</ThemedText> Chef de chantier: {chantier.chef.last_name}{" "}
<ThemedText>etat: {chantier.etat}</ThemedText> {chantier.chef.name}
</ThemedView > </ThemedText>
<ThemedText>
Date de début: {chantier.dateDep.toLocaleDateString()}
</ThemedText>
<ThemedText>État: {chantier.etat}</ThemedText>
</ThemedView>
</Pressable> </Pressable>
))}
</ScrollView>
); );
}; };
return (
return(
<Animated.View <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}
shadow={true}
style={styles.window}
>
<ThemedButton
style={isOpen ? styles.buttonOpen : styles.buttonClose}
lvl={isOpen ? 1 : 1}
onPress={() => onPressOpen()}
>
<ThemedText style={styles.buttonText}>
{isOpen ? "Close" : "Open"}
</ThemedText>
</ThemedButton> </ThemedButton>
{isOpen && {isOpen && (
<View style={styles.menu}> <View style={styles.menu}>
<ThemedTextInput <ThemedTextInput
lvl={1} lvl={1}
border={4} border={4}
style={styles.input} style={styles.input}
placeholder='Rechercher un chantier' placeholder="Rechercher un chantier"
value={search} value={search}
onChangeText={setSearch} onChangeText={setSearch}
/> />
<ThemedView lvl={2} style={styles.list}> <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>
</ThemedView> </ThemedView>
</View> </View>
} )}
</AnimatedThemedView> </AnimatedThemedView>
</Animated.View> </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 = {