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