Optifit
/
Mobile
5
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Passage View Responsive + View Exercice + Workout component data externe

Browse Source
pull/13/head
Tony Fages 4 months ago
parent 85537fa8a0
commit eecd1c36cf
16 changed files with 169 additions and 84 deletions
Show Stats Download Patch File Download Diff File

41
app/(tabs)/(exercice)/ExerciceScreen.tsx
Unescape View File

@ -1,13 +1,40 @@
import {SafeAreaView, Text, View} from "react-native"; import {FlatList, Text, View} from "react-native";
import React from "react"; import React from "react";
import HeaderProfileComponent from "@/components/HeaderProfileComponent";
import Screen from "@/components/ui/Screen";
import WorkoutCardComponent from "@/components/WorkoutCardComponent";
import {useSession} from "@/ctx";
import {Workout} from "@/model/Workout";
export default function ExerciceScreen() { export default function ExerciceScreen() {
const [text, onChangeText] = React.useState("");
const exercise = [new Workout("Développé couché", 25,"8 Series Workout", 412, "assets/images/Sigma-2.png","Intense" ),
new Workout("Curl halterné", 30, "8 Series Workout", 342, "assets/images/Sigma.jpg","Medium" ),
new Workout("Tirage Vertival", 29, "8 Series Workout", 793, "assets/images/Sigma.jpg","Easy" )];
return ( return (
<SafeAreaView> <Screen>
<View> <FlatList
<Text className="m-7 font-extrabold">Welcome to Exercice Screen </Text> ListHeaderComponent={
<Text>We will do it soon</Text> <>
</View> <View>
</SafeAreaView> <HeaderProfileComponent/>
</View>
<View className="mt-4">
<View className="flex-row justify-between items-center mb-4">
<Text className="text-lg font-bold text-black">Séance du jour</Text>
</View>
</View>
</>
}
data={exercise}
className="h-full"
renderItem={({ item }: { item: Workout }) =>
<View className="mt-2 h-52">
<WorkoutCardComponent exercise={item}/>
</View>
}
/>
</Screen>
); );
} }

55
app/(tabs)/(home)/HomeScreen.tsx
Unescape View File

@ -5,46 +5,55 @@ import Screen from "@/components/ui/Screen";
import CalendarComponent from "@/components/CalendarComponent"; import CalendarComponent from "@/components/CalendarComponent";
import WelcomeComponent from "@/components/WelcomeComponent"; import WelcomeComponent from "@/components/WelcomeComponent";
import ActivitiesComponent from "@/components/ActivitiesComponent"; import ActivitiesComponent from "@/components/ActivitiesComponent";
import {Workout} from "@/model/Workout";
export default function HomeScreen() { export default function HomeScreen() {
const exercise = new Workout("Développé couché", 25,"8 Series Workout", 412, "assets/images/Sigma-2.png","Intense" );
return ( return (
<Screen> <Screen>
<ScrollView> <ScrollView className="h-full ">
<View > <View className="h-1/6 justify-center">
<WelcomeComponent/> <WelcomeComponent />
</View> </View>
<View className="h-1/6 mt-2">
<View className="mt-2">
<View className="flex-row justify-between items-center mb-4"> <View className="flex-row justify-between items-center mb-4">
<Text className="text-lg font-bold text-black">Fitness Metrics</Text> <Text className="text-lg font-bold text-black">
<Text className="text-orange-500 font-semibold">See All</Text> Fitness Metrics
</Text>
<Text className="text-orange-500 font-semibold">
See All
</Text>
</View> </View>
<CalendarComponent/> <CalendarComponent />
</View>
<View className="mt-2">
<View className="flex-row justify-between items-center mb-4">
<Text className="text-lg font-bold text-black">Workout</Text>
<Text className="text-orange-500 font-semibold">See All</Text>
</View> </View>
<WorkoutCardComponent/>
</View>
<View className="h-1/5">
<View className="mt-2">
<View className="flex-row justify-between items-center mb-4"> <View className="flex-row justify-between items-center mb-4">
<Text className="text-lg font-bold text-black">Activities</Text> <Text className="text-lg font-bold text-black">
<Text className="text-orange-500 font-semibold">See All</Text> Workout
</Text>
<Text className="text-orange-500 font-semibold">
See All
</Text>
</View> </View>
<ActivitiesComponent/> <WorkoutCardComponent exercise={exercise} background="bg-black" />
</View> </View>
<View className="h-1/5 mt-8">
<View className="flex-row justify-between items-center mb-4 mt-6 ">
<Text className="text-lg font-bold text-black">
Activities
</Text>
<Text className="text-orange-500 font-semibold">
See All
</Text>
</View>
<ActivitiesComponent />
</View>
</ScrollView> </ScrollView>
</Screen> </Screen>

3
app/_layout.tsx
Unescape View File

@ -6,9 +6,6 @@ import { SessionProvider } from "@/ctx";
import {Slot, Stack} from "expo-router"; import {Slot, Stack} from "expo-router";
import "@/global.css"; import "@/global.css";
import "@/global.css";
// Prevent the splash screen from auto-hiding before asset loading is complete.
SplashScreen.preventAutoHideAsync(); SplashScreen.preventAutoHideAsync();
export default function RootLayout() { export default function RootLayout() {

BIN
assets/images/Gestion de projet OptiFit/Optifit_Gantt.mpp
View File

Binary file not shown.

BIN
assets/images/Gestion de projet OptiFit/Optifit_Gantt.pdf
View File

Binary file not shown.

BIN
assets/images/Gestion de projet OptiFit/Optifit_Kanban.pdf
View File

Binary file not shown.

BIN
assets/images/Gestion de projet OptiFit/Optifit_Planification_Individuelle.xlsx
View File

Binary file not shown.

BIN
assets/images/Gestion de projet OptiFit/Optifit_WBS.pdf
View File

Binary file not shown.

BIN
assets/images/Gestion de projet OptiFit/Rapport de gestion de projet.pdf
View File

Binary file not shown.

BIN
assets/images/Sigma-2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 108 KiB

BIN
assets/images/black-back.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 258 KiB

2
components/ActivitiesComponent.tsx
Unescape View File

@ -80,7 +80,7 @@ export default function ActivitiesComponent() {
}; };
return ( return (
<View className="bg-gray-200 rounded-2xl p-1"> <View className="bg-gray-200 rounded-2xl p-1 h-full">
<View className=" m-2 flex-row justify-center rounded-2xl bg-white"> <View className=" m-2 flex-row justify-center rounded-2xl bg-white">
{months.map((item, index) => { {months.map((item, index) => {
return ( return (

28
components/HeaderProfileComponent.tsx
Unescape View File

@ -0,0 +1,28 @@
import {Image, Text, TouchableOpacity, View} from "react-native";
import {Ionicons} from "@expo/vector-icons";
import React from "react";
import {useSession} from "@/ctx";
export default function HeaderProfileComponent() {
const {session} = useSession();
return (
<View className="rounded-2xl overflow-hidden shadow-lg h-auto p-4">
<View className="flex-row items-center justify-between">
<View className="flex-row items-center w-full">
<Image className="h-16 w-16 rounded-2xl"
source={require("assets/images/sigma-profile.jpeg")}
/>
<View>
<Text className="text-gray-500 font-semibold ml-4">Prêt pour t'entrainer ?</Text>
<Text className="text-black text-4xl ml-4 mt-0.5">{session}</Text>
</View>
</View>
</View>
</View>
);
}

35
components/WelcomeComponent.tsx
Unescape View File

@ -1,6 +1,7 @@
import {Image, Text, TouchableOpacity, View} from "react-native"; import {Image, ImageBackground, Text, TouchableOpacity, View} from "react-native";
import {Ionicons} from "@expo/vector-icons"; import {Ionicons} from "@expo/vector-icons";
import React from "react"; import React from "react";
import {useSession} from "@/ctx";
export default function WelcomeComponent() { export default function WelcomeComponent() {
const date = new Date(); const date = new Date();
@ -9,25 +10,31 @@ export default function WelcomeComponent() {
month: 'long', month: 'long',
day: 'numeric', day: 'numeric',
}); });
const {session} = useSession();
return (
<View className="rounded-2xl overflow-hidden shadow-lg h-auto bg-black pb-4">
<View className="flex-row m-4 "> return (
<Ionicons name="calendar" size={24} color="white" /> <View className="rounded-2xl overflow-hidden shadow-lg h-full bg-black justify-center">
<Text className="text-gray-400 text-2xl mb-2 ml-1">{formattedDate}</Text> <ImageBackground
source={require("assets/images/black-back.png")}
className="w-full h-full justify-center"
>
</View> <View className="flex-row items-center justify-between">
<View className="flex-row items-center w-full">
<Image className="h-16 w-16 rounded-2xl"
source={require("assets/images/sigma-profile.jpeg")}
/>
<View className="flex-row items-center justify-between m-2"> <View>
<View className="flex-row items-center"> <Text className="text-gray-500 font-semibold ml-4">{formattedDate}</Text>
<Image className="h-20 w-24 rounded-2xl" <Text className="text-white text-4xl ml-4 mt-0.5">Hello {session} !</Text>
source={require("assets/images/sigma-profile.jpeg")} </View>
/> </View>
<Text className="text-white text-4xl font-extrabold ml-2 ">Hello, Tata Yoyo!</Text>
</View> </View>
</View>
</ImageBackground>
</View> </View>
); );
} }

87
components/WorkoutCardComponent.tsx
Unescape View File

@ -1,51 +1,68 @@
import {ImageBackground, SafeAreaView,Text, TouchableOpacity, View} from "react-native"; import {ImageBackground, Text, TouchableOpacity, View} from "react-native";
import React from "react"; import React from "react";
import {AntDesign, MaterialCommunityIcons} from "@expo/vector-icons"; import {AntDesign, MaterialCommunityIcons} from "@expo/vector-icons";
import {Workout} from "@/model/Workout"; import {Workout} from "@/model/Workout";
export default function WorkoutCardComponent() { interface WorkoutCardComponentProps {
exercise: Workout,
background?: String,
height?: number,
const exercise = new Workout("Développé couché", 25,"8 Series Workout", 412, "assets/images/Sigma-2.jpg","Intense" ); }
export default function WorkoutCardComponent({exercise, height, background}: WorkoutCardComponentProps) {
const style = () => {
return `rounded-2xl overflow-hidden ${background ?? "bg-black"}`
}
const styleImage = () => {
return `w-full h `
}
console.log(styleImage())
console.log(style())
return ( return (
<View> <View className={style()}>
<View className="rounded-2xl overflow-hidden shadow-lg h-72">
<ImageBackground <ImageBackground
source={require("assets/images/Sigma-2.jpg")} source={require("assets/images/Sigma-2.png")}
className="w-full h-full" className='h-full w-full'
> >
<View className="flex-row justify-between items-center p-4"> <View className="flex-row justify-between p-4">
<View className="flex-row space-x-4"> <View className="flex-row space-x-4 h-44 items-top justify-center ">
<View className="flex-row items-center"> <View className="flex-row items-top">
<Text className="text-white text-sm ml-1">{exercise.duration} min</Text> <Text className="text-white text-sm ml-1">{exercise.duration} min</Text>
</View> </View>
<View className="justify-center ml-0.5"> <View className="flex-row justify-center">
<MaterialCommunityIcons name="square-rounded" size={8}color="white" /> <MaterialCommunityIcons name="square-rounded" size={8} color="white"/>
</View> </View>
<View className="flex-row items-center"> <View className="flex-row">
<Text className="text-white text-sm ml-1">{exercise.calories} kcal</Text> <Text className="text-white text-sm ml-1">{exercise.calories} kcal</Text>
</View>
</View> </View>
</View> </View>
</View>
<View className="absolute bottom-0 left-0 right-0 p-4 bg-black bg-opacity-50"> <View className="absolute bottom-0 left-0 right-0 p-4 bg-opacity-50">
<Text className="text-white text-lg font-bold">{exercise.name}</Text> <Text className="text-white text-lg font-bold">{exercise.name}</Text>
<Text className="text-gray-300 text-sm">{exercise.repetitions}</Text> <Text className="text-gray-300 text-sm">{exercise.repetitions}</Text>
<View className="flex-row items-center mt-2"> <View className="flex-row items-center mt-2">
<Text className="text-white text-xs bg-gray-800 py-1 px-3 rounded-full"> <Text className="text-white text-xs bg-gray-800 py-1 px-3 rounded-full">
Intense {exercise.level}
</Text> </Text>
</View>
</View> </View>
</View>
<TouchableOpacity className="absolute bottom-2 right-4 p-4 rounded-full">
<AntDesign name="play" size={50} color="orange"/>
</TouchableOpacity>
</ImageBackground>
<TouchableOpacity className="absolute bottom-2 right-4 p-4 rounded-full"> </View>
<AntDesign name="play" size={50} color="orange" />
</TouchableOpacity>
</ImageBackground>
</View>
</View>
); );
} }

2
model/Workout.ts
Unescape View File

@ -40,4 +40,4 @@ export class Workout {
this._image = image; this._image = image;
this._level = level; this._level = level;
} }
} }
Write Preview
Loading…
Cancel
Save