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 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() {
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 (
<SafeAreaView>
<View>
<Text className="m-7 font-extrabold">Welcome to Exercice Screen </Text>
<Text>We will do it soon</Text>
</View>
</SafeAreaView>
<Screen>
<FlatList
ListHeaderComponent={
<>
<View>
<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 WelcomeComponent from "@/components/WelcomeComponent";
import ActivitiesComponent from "@/components/ActivitiesComponent";
import {Workout} from "@/model/Workout";
export default function HomeScreen() {
const exercise = new Workout("Développé couché", 25,"8 Series Workout", 412, "assets/images/Sigma-2.png","Intense" );
return (
<Screen>
<ScrollView>
<ScrollView className="h-full ">
<View >
<WelcomeComponent/>
<View className="h-1/6 justify-center">
<WelcomeComponent />
</View>
<View className="mt-2">
<View className="h-1/6 mt-2">
<View className="flex-row justify-between items-center mb-4">
<Text className="text-lg font-bold text-black">Fitness Metrics</Text>
<Text className="text-orange-500 font-semibold">See All</Text>
<Text className="text-lg font-bold text-black">
Fitness Metrics
</Text>
<Text className="text-orange-500 font-semibold">
See All
</Text>
</View>
<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>
<CalendarComponent />
</View>
<WorkoutCardComponent/>
</View>
<View className="mt-2">
<View className="h-1/5">
<View className="flex-row justify-between items-center mb-4">
<Text className="text-lg font-bold text-black">Activities</Text>
<Text className="text-orange-500 font-semibold">See All</Text>
<Text className="text-lg font-bold text-black">
Workout
</Text>
<Text className="text-orange-500 font-semibold">
See All
</Text>
</View>
<ActivitiesComponent/>
<WorkoutCardComponent exercise={exercise} background="bg-black" />
</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>
</Screen>

3
app/_layout.tsx
Unescape View File

@ -6,9 +6,6 @@ import { SessionProvider } from "@/ctx";
import {Slot, Stack} from "expo-router";
import "@/global.css";
import "@/global.css";
// Prevent the splash screen from auto-hiding before asset loading is complete.
SplashScreen.preventAutoHideAsync();
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 (
<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">
{months.map((item, index) => {
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 React from "react";
import {useSession} from "@/ctx";
export default function WelcomeComponent() {
const date = new Date();
@ -9,25 +10,31 @@ export default function WelcomeComponent() {
month: 'long',
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 ">
<Ionicons name="calendar" size={24} color="white" />
<Text className="text-gray-400 text-2xl mb-2 ml-1">{formattedDate}</Text>
return (
<View className="rounded-2xl overflow-hidden shadow-lg h-full bg-black justify-center">
<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 className="flex-row items-center">
<Image className="h-20 w-24 rounded-2xl"
source={require("assets/images/sigma-profile.jpeg")}
/>
<Text className="text-white text-4xl font-extrabold ml-2 ">Hello, Tata Yoyo!</Text>
<View>
<Text className="text-gray-500 font-semibold ml-4">{formattedDate}</Text>
<Text className="text-white text-4xl ml-4 mt-0.5">Hello {session} !</Text>
</View>
</View>
</View>
</View>
</ImageBackground>
</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 {AntDesign, MaterialCommunityIcons} from "@expo/vector-icons";
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 (
<View>
<View className="rounded-2xl overflow-hidden shadow-lg h-72">
<ImageBackground
source={require("assets/images/Sigma-2.jpg")}
className="w-full h-full"
>
<View className="flex-row justify-between items-center p-4">
<View className="flex-row space-x-4">
<View className="flex-row items-center">
<Text className="text-white text-sm ml-1">{exercise.duration} min</Text>
</View>
<View className="justify-center ml-0.5">
<MaterialCommunityIcons name="square-rounded" size={8}color="white" />
</View>
<View className="flex-row items-center">
<Text className="text-white text-sm ml-1">{exercise.calories} kcal</Text>
</View>
<View className={style()}>
<ImageBackground
source={require("assets/images/Sigma-2.png")}
className='h-full w-full'
>
<View className="flex-row justify-between p-4">
<View className="flex-row space-x-4 h-44 items-top justify-center ">
<View className="flex-row items-top">
<Text className="text-white text-sm ml-1">{exercise.duration} min</Text>
</View>
<View className="flex-row justify-center">
<MaterialCommunityIcons name="square-rounded" size={8} color="white"/>
</View>
<View className="flex-row">
<Text className="text-white text-sm ml-1">{exercise.calories} kcal</Text>
</View>
</View>
</View>
<View className="absolute bottom-0 left-0 right-0 p-4 bg-black bg-opacity-50">
<Text className="text-white text-lg font-bold">{exercise.name}</Text>
<Text className="text-gray-300 text-sm">{exercise.repetitions}</Text>
<View className="flex-row items-center mt-2">
<Text className="text-white text-xs bg-gray-800 py-1 px-3 rounded-full">
Intense
</Text>
</View>
<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-gray-300 text-sm">{exercise.repetitions}</Text>
<View className="flex-row items-center mt-2">
<Text className="text-white text-xs bg-gray-800 py-1 px-3 rounded-full">
{exercise.level}
</Text>
</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">
<AntDesign name="play" size={50} color="orange" />
</TouchableOpacity>
</ImageBackground>
</View>
</View>
</View>
);
}

2
model/Workout.ts
Unescape View File

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