ajout de la classe de la gestion des ressources.
This commit is contained in:
@@ -8,7 +8,9 @@ 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 TabTwoScreen from './index';
|
import TabTwoScreen from './index';
|
||||||
import HomeScreen from './bonjourFL';
|
import HomeScreen from './explore';
|
||||||
|
import ListMateriel from './gestionnaire_ressource';
|
||||||
|
import BonjourScreen from './bonjourFL';
|
||||||
|
|
||||||
const Tabs = createBottomTabNavigator();
|
const Tabs = createBottomTabNavigator();
|
||||||
|
|
||||||
@@ -17,14 +19,26 @@ export default function TabLayout() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Tabs.Navigator
|
<Tabs.Navigator
|
||||||
|
initialRouteName='explore'
|
||||||
screenOptions={{
|
screenOptions={{
|
||||||
tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
|
tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
|
||||||
headerShown: false,
|
headerShown: false,
|
||||||
tabBarButton: HapticTab,
|
tabBarButton: HapticTab,
|
||||||
}}>
|
}}>
|
||||||
|
|
||||||
|
<Tabs.Screen
|
||||||
|
name="gestionnaire_ressource"
|
||||||
|
component={ListMateriel}
|
||||||
|
options={{
|
||||||
|
title: 'Ressources',
|
||||||
|
tabBarIcon: ({ color }) => (
|
||||||
|
<IconSymbol size={28} name="hammer.fill" color={color} />
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
<Tabs.Screen
|
<Tabs.Screen
|
||||||
name="bonjourFL"
|
name="bonjourFL"
|
||||||
component={HomeScreen}
|
component={BonjourScreen}
|
||||||
options={{
|
options={{
|
||||||
title: 'Bonjour',
|
title: 'Bonjour',
|
||||||
tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
|
tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
|
||||||
@@ -32,12 +46,13 @@ export default function TabLayout() {
|
|||||||
/>
|
/>
|
||||||
<Tabs.Screen
|
<Tabs.Screen
|
||||||
name="explore"
|
name="explore"
|
||||||
|
component={HomeScreen}
|
||||||
options={{
|
options={{
|
||||||
title: 'Explore',
|
title: 'Explore',
|
||||||
tabBarIcon: ({ color }) => <IconSymbol size={28} name="paperplane.fill" color={color} />,
|
tabBarIcon: ({ color }) => <IconSymbol size={28} name="paperplane.fill" color={color} />,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{() => <TabTwoScreen/>}
|
|
||||||
</Tabs.Screen>
|
</Tabs.Screen>
|
||||||
</Tabs.Navigator>
|
</Tabs.Navigator>
|
||||||
);
|
);
|
||||||
|
|||||||
134
app/(tabs)/gestionnaire_ressource.tsx
Normal file
134
app/(tabs)/gestionnaire_ressource.tsx
Normal file
@@ -0,0 +1,134 @@
|
|||||||
|
import { useRouter , useLocalSearchParams} from "expo-router";
|
||||||
|
import React, {useState} from 'react';
|
||||||
|
import { Button,FlatList,Image, Text, TextInput,View, StyleSheet } from 'react-native';
|
||||||
|
|
||||||
|
export default function GestionnaireRessource() {
|
||||||
|
const { nom, prenom } = useLocalSearchParams(); // Recup data ecran precedent
|
||||||
|
const [search, setSearch] = useState('');
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
type Ressource ={
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
type: string;
|
||||||
|
Image: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const data: Ressource[] = [
|
||||||
|
{ id: 1, name: 'Marteau', type: 'Outil', Image: '' },
|
||||||
|
{ id: 2, name: 'Scie', type: 'Outil' , Image: ''},
|
||||||
|
{ id: 3, name: 'Pelle', type: 'Outil' , Image: '' },
|
||||||
|
{ id: 4, name: 'Grue', type: 'Machine',Image: 'https://media.discordapp.net/attachments/1425108443571945644/1427207643180826757/raw.png?ex=68ee0632&is=68ecb4b2&hm=1efc51065c6abfb1af75b8382f9924c2eb177c7d7672f7ed9837e96ef3076d16&=&format=webp&quality=lossless&width=421&height=632'},
|
||||||
|
{ id: 5, name: 'Bulldozer', type: 'Machine', Image: ''},
|
||||||
|
];
|
||||||
|
|
||||||
|
|
||||||
|
const renderRessource = ({ item, index }: { item?: Ressource; index: number }) => {
|
||||||
|
if (!item) {
|
||||||
|
// optionnel : afficher un placeholder pour debug
|
||||||
|
// return <View style={styles.card}><Text>Item manquant</Text></View>;
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
return(
|
||||||
|
<View style={styles.card}>
|
||||||
|
<View style={styles.info}>
|
||||||
|
<Image source={{ uri: item.Image }} style={styles.image} />
|
||||||
|
<Text>{item.id}</Text>
|
||||||
|
<Text>{item.name}</Text>
|
||||||
|
<Text>{item.type}</Text>
|
||||||
|
</View>
|
||||||
|
</View>);
|
||||||
|
};
|
||||||
|
|
||||||
|
return(
|
||||||
|
<View style={styles.container}>
|
||||||
|
<FlatList
|
||||||
|
data={data}
|
||||||
|
renderItem={renderRessource}
|
||||||
|
keyExtractor={(_, index) => index.toString()}
|
||||||
|
contentContainerStyle={{ paddingBottom: 40 }}
|
||||||
|
ListHeaderComponent={
|
||||||
|
<View style={styles.header}>
|
||||||
|
<Text style={styles.text}>
|
||||||
|
Bonjour {prenom} {nom}
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
{/* 🔍 Champ de recherche */}
|
||||||
|
<TextInput
|
||||||
|
style={styles.input}
|
||||||
|
placeholder="Rechercher une ressource..."
|
||||||
|
value={search}
|
||||||
|
onChangeText={setSearch}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
}
|
||||||
|
ListEmptyComponent={
|
||||||
|
<Text style={styles.empty}>Aucun résultat trouvé 😕</Text>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<View style={styles.footer}>
|
||||||
|
<Button title="Retour" onPress={() => router.back()} />
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
flex: 1,
|
||||||
|
backgroundColor: '#fff',
|
||||||
|
},
|
||||||
|
header: {
|
||||||
|
marginTop: 60,
|
||||||
|
marginBottom: 20,
|
||||||
|
alignItems: 'center',
|
||||||
|
paddingHorizontal: 20,
|
||||||
|
},
|
||||||
|
text: {
|
||||||
|
fontSize: 22,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
marginBottom: 10,
|
||||||
|
},
|
||||||
|
input: {
|
||||||
|
width: '100%',
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: '#ccc',
|
||||||
|
borderRadius: 10,
|
||||||
|
padding: 10,
|
||||||
|
fontSize: 16,
|
||||||
|
},
|
||||||
|
card: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
marginHorizontal: 20,
|
||||||
|
marginBottom: 15,
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: '#ddd',
|
||||||
|
borderRadius: 10,
|
||||||
|
padding: 10,
|
||||||
|
backgroundColor: '#fafafa',
|
||||||
|
},
|
||||||
|
image: {
|
||||||
|
width: 80,
|
||||||
|
height: 80,
|
||||||
|
borderRadius: 8,
|
||||||
|
marginRight: 10,
|
||||||
|
},
|
||||||
|
info: {
|
||||||
|
flex: 1,
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
group: {
|
||||||
|
fontWeight: 'bold',
|
||||||
|
fontSize: 16,
|
||||||
|
marginBottom: 5,
|
||||||
|
},
|
||||||
|
footer: {
|
||||||
|
padding: 20,
|
||||||
|
},
|
||||||
|
empty: {
|
||||||
|
textAlign: 'center',
|
||||||
|
marginTop: 30,
|
||||||
|
color: '#888',
|
||||||
|
},
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user