parent
eecd1c36cf
commit
e906211b66
@ -1,40 +0,0 @@
|
|||||||
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 (
|
|
||||||
<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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -0,0 +1,47 @@
|
|||||||
|
import {FlatList, SafeAreaView, 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";
|
||||||
|
import LinearTimer from "react-native-linear-timer";
|
||||||
|
|
||||||
|
export default function ExercicesScreen() {
|
||||||
|
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 (
|
||||||
|
<View className="h-full p-2 mt-11">
|
||||||
|
|
||||||
|
<FlatList
|
||||||
|
ListHeaderComponent={
|
||||||
|
<>
|
||||||
|
<View className="">
|
||||||
|
<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>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
</View>
|
||||||
|
|
||||||
|
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
import * as React from 'react';
|
||||||
|
import LinearTimer from 'react-native-linear-timer';
|
||||||
|
import {Button, Image, ImageBackground, SafeAreaView, Text, TouchableOpacity, View} from "react-native";
|
||||||
|
import Screen from "@/components/ui/Screen";
|
||||||
|
import {Background} from "@react-navigation/elements";
|
||||||
|
import {AntDesign} from "@expo/vector-icons";
|
||||||
|
import {router, useRouter} from "expo-router";
|
||||||
|
import WelcomeComponent from "@/components/WelcomeComponent";
|
||||||
|
import WorkoutPresentationComponent from "@/components/WorkoutPresentationComponent";
|
||||||
|
|
||||||
|
|
||||||
|
export default function WorkoutScreen() {
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
return (
|
||||||
|
|
||||||
|
<View className=" h-full rounded-2xl ">
|
||||||
|
<WorkoutPresentationComponent/>
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
@ -0,0 +1,58 @@
|
|||||||
|
import React, { useEffect, useRef, useState } from 'react';
|
||||||
|
import { View, Text, Animated, TouchableOpacity } from 'react-native';
|
||||||
|
|
||||||
|
export default function LinearProgressBar({ duration = 10 }) {
|
||||||
|
const [timeLeft, setTimeLeft] = useState(duration);
|
||||||
|
const [isRunning, setIsRunning] = useState(false);
|
||||||
|
const progress = useRef(new Animated.Value(0)).current;
|
||||||
|
const intervalRef = useRef(null);
|
||||||
|
|
||||||
|
const startAnimation = () => {
|
||||||
|
setIsRunning(true);
|
||||||
|
progress.setValue(0);
|
||||||
|
setTimeLeft(duration);
|
||||||
|
|
||||||
|
Animated.timing(progress, {
|
||||||
|
toValue: 1,
|
||||||
|
duration: duration * 1000,
|
||||||
|
useNativeDriver: false,
|
||||||
|
}).start(() => setIsRunning(false));
|
||||||
|
|
||||||
|
//@ts-ignore
|
||||||
|
intervalRef.current = setInterval(() => {
|
||||||
|
setTimeLeft((prev) => (prev > 0 ? prev - 1 : 0));
|
||||||
|
}, 1000);
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
//@ts-ignore
|
||||||
|
return () => clearInterval(intervalRef.current);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const progressWidth = progress.interpolate({
|
||||||
|
inputRange: [0, 1],
|
||||||
|
outputRange: ["0%", "100%"],
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View className="w-full p-4 items-center">
|
||||||
|
<Text className="text-center mb-2">Temps restant : {timeLeft}s</Text>
|
||||||
|
<View className="w-full h-4 bg-gray-200 rounded-full overflow-hidden mb-4">
|
||||||
|
<Animated.View
|
||||||
|
style={{ width: progressWidth }}
|
||||||
|
className="h-full bg-orange-400"
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<TouchableOpacity
|
||||||
|
onPress={startAnimation}
|
||||||
|
disabled={isRunning}
|
||||||
|
className={`px-4 py-2 rounded-full ${isRunning ? 'bg-orange-400' : 'bg-orange-400'}`}
|
||||||
|
>
|
||||||
|
<Text className="text-white font-bold">
|
||||||
|
{isRunning ? 'En cours...' : 'Play'}
|
||||||
|
</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,28 @@
|
|||||||
|
import {ImageBackground, TouchableOpacity, View} from "react-native";
|
||||||
|
import Screen from "@/components/ui/Screen";
|
||||||
|
import * as React from "react";
|
||||||
|
import {Ionicons} from "@expo/vector-icons";
|
||||||
|
import {useRouter} from "expo-router";
|
||||||
|
import LinearProgressBar from "@/components/LinearProgressBar";
|
||||||
|
|
||||||
|
export default function WorkoutPresentationComponent() {
|
||||||
|
const router = useRouter()
|
||||||
|
return (
|
||||||
|
<ImageBackground className="h-full w-full"
|
||||||
|
source={require("assets/images/sigmaC.jpeg")}>
|
||||||
|
<Screen>
|
||||||
|
<View>
|
||||||
|
<TouchableOpacity
|
||||||
|
onPress={() => {
|
||||||
|
router.replace("/ExercicesScreen");
|
||||||
|
}}>
|
||||||
|
<Ionicons name="chevron-back-circle-outline" size={50} color="white"/>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<LinearProgressBar duration={12}/>
|
||||||
|
</Screen>
|
||||||
|
|
||||||
|
</ImageBackground>
|
||||||
|
)
|
||||||
|
}
|
||||||
Loading…
Reference in new issue