adding calendars to dashboard

src/components/signed-in/dashboard/calories-burned/schedule/schedule-calendar/schedule-calendar.component.jsx

@@ -0,0 +1,68 @@
+import "./schedule-calendar.styles.scss"
+import 'rsuite/Calendar/styles/index.css';
+import { Fragment, useContext, useState } from "react";
+import { Calendar, Whisper, Popover, Badge } from 'rsuite';
+import { Typography } from "@mui/material";
+import { COLOR_CODES } from "../../../../../../utils/constants/shared.constants";
+
+import { CaloriesBurnedContext } from "../../../../../../contexts/signed-in/calories-burned/calories-burned.context";
+
+function getScheduledData(date, trackedCaloriesBurned) {
+  date = date.toISOString().split('T')[0]
+
+  let scheduledTrackedCaloriesBurnedForDate = []
+  trackedCaloriesBurned.map((trackedDay) => {
+    if (trackedDay.dateTracked === date) {
+      scheduledTrackedCaloriesBurnedForDate.push({
+        caloriesBurned: trackedDay.totalCaloriesBurned
+      })
+    }
+  })
+
+  return scheduledTrackedCaloriesBurnedForDate
+}
+
+const ScheduleCalendar = () => {
+  const { trackedCaloriesBurned, selectScheduledTrackedCaloriesBurned } = useContext(CaloriesBurnedContext)
+
+  function renderCell(date) {
+    const list = getScheduledData(date, trackedCaloriesBurned);
+    const displayList = list.filter((item, index) => index < 1);
+
+    if (list.length) {
+      const moreCount = list.length - displayList.length;
+
+      return (
+        <Fragment>
+          <ul className="calendar-todo-list">
+            {displayList.map((item, index) => (
+              <li key={index}>
+                <Badge /> <b>{`Calories: ${item.caloriesBurned}`}</b>
+              </li>
+            ))}
+            {moreCount ? `${moreCount} more` : null}
+          </ul>
+          {/* {moreCount} more */}
+        </Fragment>
+      );
+    }
+
+    return null;
+  }
+
+  const onSelectDate = (date) => {
+    const selectedDate = date.toISOString().split('T')[0]
+    console.log(selectedDate)
+    selectScheduledTrackedCaloriesBurned(selectedDate)
+  }
+
+  return (
+    <div className="calories-burned-schedule-calendar-container" style={{ backgroundColor: COLOR_CODES.general["0"] }}>
+      <Typography sx={{ display: "flex", marginLeft: "1%" }} 
+        variant="h6">{`Calories burned calendar`}</Typography>
+      <Calendar bordered renderCell={ renderCell } onSelect={ onSelectDate } style={{ backgroundColor: COLOR_CODES.general["0"] }}/>
+    </div>
+  )
+}
+
+export default ScheduleCalendar

src/components/signed-in/dashboard/calories-burned/schedule/schedule-calendar/schedule-calendar.styles.scss

@@ -0,0 +1,26 @@
+.calendar-todo-list {
+  text-align: left;
+  padding: 0;
+  list-style: none;
+}
+
+.calendar-todo-list li {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.calendar-todo-item-badge {
+  vertical-align: top;
+  margin-top: 8px;
+  width: 6px;
+  height: 6px;
+}  
+
+.calories-burned-calendar-container {
+  display: block;
+  justify-content: center;
+  align-items: center;
+  margin: 2%;
+  padding: 1%;
+}

src/components/signed-in/dashboard/calories-burned/schedule/schedule-day-info/schedule-day-info.component.jsx

@@ -0,0 +1,42 @@
+import "./schedule-day-info.styles.scss"
+import { Typography, Divider } from "@mui/material"
+import { Fragment, useContext } from "react"
+import SimplePaper from "../../../../../shared/mui/paper/paper.component"
+import { COLOR_CODES } from "../../../../../../utils/constants/shared.constants"
+import { CaloriesBurnedContext } from "../../../../../../contexts/signed-in/calories-burned/calories-burned.context"
+
+const paperStyles = {
+  backgroundColor: COLOR_CODES.general["1"],
+  width: 400
+}
+
+const ScheduleDayInfo = () => {
+  const { scheduledTrackedCaloriesBurnedView } = useContext(CaloriesBurnedContext)
+
+  if (!scheduledTrackedCaloriesBurnedView.length) return <Fragment/>
+
+  return (
+    <div className="calories-burned-schedule-day-info">
+    {
+      scheduledTrackedCaloriesBurnedView.map((trackedCaloriesBurned) => {
+        return (
+          <SimplePaper styles={ paperStyles }>
+            <Typography sx={{ display: "flex", justifyContent: "center" }} variant="h6">{`${trackedCaloriesBurned.dateTracked}`}</Typography>
+            <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`Activity - ${trackedCaloriesBurned.activity}`}</Typography>
+            <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`Total calories burned - ${trackedCaloriesBurned.totalCaloriesBurned}`}</Typography>
+
+            <br/>
+            <Divider/>
+            <br/>
+
+            <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`Duration (mins) - ${trackedCaloriesBurned.durationMinutes}`}</Typography>
+            <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`Calories burned / hr - ${trackedCaloriesBurned.caloriesBurnedPerHour}`}</Typography>
+          </SimplePaper>
+        )
+      })
+    }
+    </div>
+  )
+}
+
+export default ScheduleDayInfo

src/components/signed-in/dashboard/calories-burned/schedule/schedule-day-info/schedule-day-info.styles.scss

@@ -0,0 +1,6 @@
+.calories-burned-schedule-day-info {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 2% 2% 2% 2%;
+}

src/components/signed-in/dashboard/fitness/schedule/schedule-calendar/schedule-calendar.component.jsx

@@ -0,0 +1,107 @@
+import "./schedule-calendar.styles.scss"
+import 'rsuite/Calendar/styles/index.css';
+import { Fragment, useContext, useState } from "react";
+import { Calendar, Whisper, Popover, Badge } from 'rsuite';
+import { Typography } from "@mui/material";
+import { FitnessContext } from "../../../../../../contexts/signed-in/fitness/fitness.context";
+import { COLOR_CODES } from "../../../../../../utils/constants/shared.constants";
+
+function getScheduledData(date, exercises) {
+  // const day = date.getDate();
+  date = date.toISOString().split('T')[0]
+
+  // switch (day) {
+  //   case 10:
+  //     return [
+  //       { time: '10:30 am', title: 'Meeting' },
+  //       { time: '12:00 pm', title: 'Lunch' }
+  //     ];
+  //   case 15:
+  //     return [
+  //       { time: '09:30 pm', title: 'Products Introduction Meeting' },
+  //       { time: '12:30 pm', title: 'Client entertaining' },
+  //       { time: '02:00 pm', title: 'Product design discussion' },
+  //       { time: '05:00 pm', title: 'Product test and acceptance' },
+  //       { time: '06:30 pm', title: 'Reporting' },
+  //       { time: '10:00 pm', title: 'Going home to walk the dog' }
+  //     ];
+  //   default:
+  //     return [];
+  // }
+
+  let scheduledExercisesForDate = []
+  exercises.map((exercise) => {
+    if (exercise.exerciseDate === date) {
+      scheduledExercisesForDate.push({
+        type: exercise.exerciseType,
+        name: exercise.exerciseName
+      })
+    }
+  })
+
+  return scheduledExercisesForDate
+}
+
+const ScheduleCalendar = () => {
+  const { exercises, selectScheduledExercise } = useContext(FitnessContext)
+
+  function renderCell(date) {
+    const list = getScheduledData(date, exercises);
+    const displayList = list.filter((item, index) => index < 1);
+
+    if (list.length) {
+      const moreCount = list.length - displayList.length;
+      // const moreItem = (
+      //   <li>
+      //     <Whisper
+      //       placement="top"
+      //       trigger="click"
+      //       speaker={
+      //         <Popover>
+      //           {list.map((item, index) => (
+      //             <p key={index}>
+      //               <b>{item.time}</b> - {item.title}
+      //             </p>
+      //           ))}
+      //         </Popover>
+      //       }
+      //     >
+      //       <h10>{moreCount} more</h10>
+      //     </Whisper>
+      //   </li>
+      // );
+
+      return (
+        <Fragment>
+          <ul className="calendar-todo-list">
+            {displayList.map((item, index) => (
+              <li key={index}>
+                <Badge /> <b>{item.type}</b> - {item.name}
+              </li>
+            ))}
+            {moreCount ? `${moreCount} more` : null}
+          </ul>
+          {/* {moreCount} more */}
+        </Fragment>
+      );
+    }
+
+    return null;
+  }
+
+  const onSelectDate = (date) => {
+    const selectedDate = date.toISOString().split('T')[0]
+    console.log(selectedDate)
+    selectScheduledExercise(selectedDate)
+  }
+
+  return (
+    <div className="fitness-schedule-calendar-container" style={{ backgroundColor: COLOR_CODES.general["0"] }}>
+      <Typography sx={{ display: "flex", marginLeft: "1%" }} 
+        variant="h6">{`Exercises calendar`}</Typography>
+      <Calendar bordered renderCell={ renderCell } onSelect={ onSelectDate } style={{ backgroundColor: COLOR_CODES.general["0"] }}/>
+    </div>
+  )
+}
+
+export default ScheduleCalendar

src/components/signed-in/dashboard/fitness/schedule/schedule-calendar/schedule-calendar.styles.scss

@@ -0,0 +1,27 @@
+.calendar-todo-list {
+  text-align: left;
+  padding: 0;
+  list-style: none;
+}
+
+.calendar-todo-list li {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.calendar-todo-item-badge {
+  vertical-align: top;
+  margin-top: 8px;
+  width: 6px;
+  height: 6px;
+}  
+
+.fitness-schedule-calendar-container {
+  display: block;
+  justify-content: center;
+  align-items: center;
+  background-color: lightblue;
+  margin: 2%;
+  padding: 1%;
+}

src/components/signed-in/dashboard/fitness/schedule/schedule-day-info/schedule-day-info.component.jsx

@@ -0,0 +1,82 @@
+import "./schedule-day-info.styles.scss"
+import { useState, useContext, Fragment } from "react"
+import { Typography } from "@mui/material";
+
+import { AgGridReact } from 'ag-grid-react'; // React Data Grid Component
+import "ag-grid-community/styles/ag-grid.css"; // Mandatory CSS required by the grid
+import "ag-grid-community/styles/ag-theme-quartz.css"; // Optional Theme applied to the grid
+
+import SimplePaper from "../../../../../shared/mui/paper/paper.component";
+import { COLOR_CODES } from "../../../../../../utils/constants/shared.constants";
+import { FitnessContext } from "../../../../../../contexts/signed-in/fitness/fitness.context";
+import Button from "../../../../../shared/button/button.component";
+import { ButtonsContainer } from "../../../../../shared/button/button.styles";
+
+const paperStyles = {
+  backgroundColor: COLOR_CODES.general["8"],
+  height: 600
+}
+
+const ScheduleDayInfo = () => {
+  const { exercisesView, removeExercise, unselectScheduledExercise } = useContext(FitnessContext)
+  console.log(exercisesView)
+
+  const rowData = exercisesView.map((exercise) => {
+    return {
+      // AddToExpenses: "",
+      Date: exercise.exerciseDate,
+      Exercise: exercise.exerciseName,
+      Sets: exercise.exerciseSets,
+      Reps: exercise.exerciseReps,
+      Type: exercise.exerciseType,
+      Muscle: exercise.exerciseMuscle,
+      Equipment: exercise.exerciseEquipment,
+      Difficulty: exercise.exerciseDifficulty,
+      Instructions: exercise.exerciseInstructions,
+      Tag: exercise.exerciseTag
+    }
+  })
+
+  // column definitions
+  const [columnDefs, setColumnDefs] = useState([
+    { field: "Date" },
+    { field: "Exercise" },
+    { field: "Sets" },
+    { field: "Reps" },
+    { field: "Type" },
+    { field: "Muscle" },
+    { field: "Equipment" },
+    { field: "Difficulty" },
+    { field: "Instructions" },
+    { field: "Tag" },
+  ])
+
+  const handleUnselect = (event) => {
+    event.preventDefault()
+    unselectScheduledExercise()
+  }
+
+  return (
+    <div className="fitness-schedule-day-info-container">
+      <Typography sx={{ display: "flex", marginLeft: "2%" }} 
+        variant="h6">{`Exercises planned`}</Typography>
+
+      <SimplePaper styles={ paperStyles }>
+        <div className="ag-theme-quartz-dark fitness-schedule-day-info" // applying the grid theme
+          style={{ height: 500, width: '100%' }} // the grid will fill the size of the parent container
+          >
+          <AgGridReact 
+            rowData={ rowData } 
+            columnDefs={ columnDefs } rowSelection={ "multiple" }/>
+            <ButtonsContainer>
+              <div className="unselect-exercise-button">
+                <Button type="button" onClick={ (e) => handleUnselect(e) }>Unselect</Button>
+              </div>
+            </ButtonsContainer>
+        </div>
+      </SimplePaper>
+    </div>
+  )
+}
+
+export default ScheduleDayInfo

src/components/signed-in/dashboard/fitness/schedule/schedule-day-info/schedule-day-info.styles.scss

@@ -0,0 +1,15 @@
+.fitness-schedule-day-info-container {
+  margin-bottom: 2%;
+}
+
+.fitness-schedule-day-info {
+  display: block;
+  justify-content: center;
+  align-items: center;
+  padding: 1% 1% 0% 1%;
+}
+
+.remove-exercise-selected-button,
+.unselect-exercise-button {
+  margin: 1%;
+}