Progress bar v1 beta

src/App.tsx

@@ -11,7 +11,6 @@ import { MyExercises } from "./assets/components/MyExercises";
 import PersonalLinks from "./assets/components/Navigation/PersonalLinks";
 import { PageExerciseDetails } from "./assets/components/My-list/Page-Exercise-Details/PageExerciseDetails";
 import { RoutinePage } from "./assets/components/My-list/RoutinePage/RoutinePage";
-import { v4 as uuidv4 } from "uuid";
 
 // import addNotification from "react-push-notification";
 

src/assets/Styles/Page-exercise-details.scss

@@ -90,6 +90,21 @@
   width: 70px;
   height: 70px;
   border-radius: 50%;
+  position: relative;
+  .progress-bar-date {
+    position: absolute;
+    top: 5px;
+    left: 0;
+    right: 0;
+    font-weight: 700;
+  }
+  .progress-bar-date__today {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: -35px;
+    font-weight: 700;
+  }
 }
 
 .routine-ender {

src/assets/components/My-list/RoutinePage/ProgressTracker.tsx

@@ -1,6 +1,4 @@
 import React, { useContext, useEffect } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faTrash } from "@fortawesome/free-solid-svg-icons";
 import { RoutineContext } from "../../../../App";
 
 interface exerciseIT {
@@ -16,29 +14,69 @@ interface doneDataDetails {
   completedSets: number;
 }
 
+interface ITRoutine {
+  routineID: string;
+  isEditing: boolean;
+  routineName: string;
+  routineImage: string;
+  routineCompletion: number[];
+  routineExercises: ITroutineSets[];
+}
+interface ITroutineSets {
+  isEditing: boolean;
+  name: string;
+  muscles: string[];
+  linkImage: string;
+  myExerciseID: string;
+  objective: string;
+  routine: string;
+  type: string;
+  sets: ITset[];
+}
+
+interface ITset {
+  setCompleted: boolean;
+  reps: number;
+  weight: number;
+  distance: number;
+  time: number;
+}
+
 export const ProgressTracker = (props: exerciseIT) => {
-  const {
-    myRoutines = [],
-    doneActivities = [],
-    setDoneActivities = () => {},
-  } = useContext(RoutineContext) || {}; //getting the colors from the context
+  const { myRoutines = [], doneActivities = [] } =
+    useContext(RoutineContext) || {}; //getting the colors from the context
 
   const { routineID } = props;
 
-  // Create an array of the last four days
-  const currentDate = new Date();
-  const lastFourDays = Array.from({ length: 4 }, (_, i) => {
-    const date = new Date();
-    date.setDate(currentDate.getDate() - i);
-    return date.toLocaleDateString();
-  });
+  const currentDate = new Date(); // Define the currentDate here
+
+  // Calculate the unique dates from doneActivities for the given routine and exercise, excluding the current day
+  const uniqueDates = Array.from(
+    new Set(
+      doneActivities
+        .filter(
+          (activity) =>
+            activity.routineID === routineID &&
+            activity.date !== currentDate.toLocaleDateString()
+        )
+        .map((activity) => activity.date)
+    )
+  );
+  // Sort the unique dates in descending order
+  const sortedUniqueDates = uniqueDates.sort(
+    (a, b) => new Date(b).getTime() - new Date(a).getTime()
+  );
+
+  // Get the last 4 registered dates
+  const lastFourDays = sortedUniqueDates.slice(0, 4);
 
   // Create a map to group activities by date
   const groupedActivities = new Map<string, doneDataDetails[]>();
   doneActivities.forEach((activity) => {
     if (activity.routineID === routineID) {
       const dateGroup = groupedActivities.get(activity.date) || [];
       dateGroup.push(activity);
+
       groupedActivities.set(activity.date, dateGroup);
     }
   });
@@ -62,14 +100,40 @@ export const ProgressTracker = (props: exerciseIT) => {
     };
   });
 
+  //Data used for the last BAR that is going to be the current day when the activities are being done
+  const countAllSetsInRoutine = (
+    ThisRoutineID: string,
+    whatAreWeCounting: string
+  ) => {
+    let count = 0;
+    const routineIndex = myRoutines.findIndex(
+      (routine: ITRoutine) => routine.routineID === ThisRoutineID
+    );
+    const TheSelectedRoutine = myRoutines[routineIndex] as ITRoutine;
+    TheSelectedRoutine.routineExercises.forEach((exercise: ITroutineSets) => {
+      whatAreWeCounting === "completedSets"
+        ? (count += exercise.sets.filter(
+            (set) => set.setCompleted === true
+          ).length)
+        : (count += exercise.sets.length);
+    });
+    return count;
+  };
+
+  const completedSets = countAllSetsInRoutine(routineID, "completedSets");
+  const totalSets = countAllSetsInRoutine(routineID, "totalSets");
+  const CurrentCounter = Math.round((completedSets / totalSets) * 100);
+
   return (
     <div className="routine-tracker">
       {progressData.map((data, index) => (
         <div
           key={index}
-          className="progress-bar"
+          className={`progress-bar ${data.date}`}
           style={{
-            background: `radial-gradient(closest-side, white 79%, transparent 80% 100%), conic-gradient(hotpink ${data.progress}%, pink 0)`,
+            background: `radial-gradient(closest-side, white 79%, transparent 80% 100%), conic-gradient(${
+              data.progress === 100 ? "#5fe782" : "#d72536"
+            } ${data.progress}%, #b1b2c3 0)`,
           }}
         >
           <progress
@@ -84,8 +148,40 @@ export const ProgressTracker = (props: exerciseIT) => {
           >
             {data.progress.toFixed(2)}%
           </progress>
+          <p className="progress-bar-date">{data.progress}%</p>
+          <p className="progress-bar-date__today">
+            {
+              //Transfor Date to only MONTH and DAY only for Display
+              new Date(data.date).toLocaleDateString(undefined, {
+                month: "short",
+                day: "numeric",
+              })
+            }
+          </p>
         </div>
       ))}
+      <div
+        key={`current-bar-${routineID}`}
+        className="progress-bar"
+        style={{
+          background: `radial-gradient(closest-side, white 79%, transparent 80% 100%), conic-gradient(#646cff ${CurrentCounter}%, #b1b2c3 0)`,
+        }}
+      >
+        <progress
+          value={CurrentCounter}
+          max-content={100}
+          min-content={0}
+          style={{
+            visibility: "hidden",
+            height: "0",
+            width: "0",
+          }}
+        >
+          {CurrentCounter.toFixed(2)}%
+        </progress>
+        <p className="progress-bar-date">{CurrentCounter}%</p>
+        <p className="progress-bar-date__today">Today</p>
+      </div>
     </div>
   );
 };

src/assets/components/My-list/RoutinePage/RoutinePage.tsx

@@ -53,7 +53,6 @@ export const RoutinePage = () => {
 
   const { routineID } = useParams<{ routineID?: string }>();
 
-  const [showStarter, setShowStarter] = useState(true);
   const validRoutineID = routineID ?? "";
   const TheRoutine = myRoutines?.find(
     (routine) => routine.routineID === validRoutineID
@@ -118,14 +117,10 @@ export const RoutinePage = () => {
 
         return updatedDoneActivities;
       });
-
-      setShowStarter(false);
     };
 
-    if (showStarter) {
-      updateDoneActivities();
-    }
-  }, [showStarter, setDoneActivities, TheRoutine, validRoutineID]);
+    updateDoneActivities();
+  }, [setDoneActivities, validRoutineID]);
 
   useEffect(() => {
     // Update localStorage whenever routines change

src/styles.scss

@@ -126,6 +126,7 @@ body {
 
 .all-exercises-list {
   padding: 0;
+  margin-top: 25px;
 }
 
 .Item-exercise {
@@ -216,7 +217,7 @@ body {
 
 .item-my-exercise {
   justify-content: space-between;
-  align-items: center;
+  align-items: stretch;
   margin: 0px 0.5rem 10px;
   display: flex;
   flex-direction: column;
@@ -230,7 +231,7 @@ body {
     min-width: 15rem;
     justify-content: space-between;
     align-items: center;
-    padding: 20px 15px 8px 15px;
+    padding: 25px 15px 8px 15px;
     border: 1.5px solid black;
     box-shadow: 3px 3px 2px 2px rgba(44, 44, 44, 0.2);
     position: relative;