Merge pull request #136 from tahmid-saj/dev-general-cleanup-2

adding fitness to dashboard

src/components/signed-out/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-out/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-out/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-out/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-out/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-out/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%;
+}

src/pages/signed-out/dashboard/dashboard.component.jsx

@@ -14,12 +14,16 @@ import { selectNutritionTrackedDays, selectScheduledNutritionTrackedDaysView,
 import { selectScheduledNutritionTrackedDayHelper, setScheduledNutritionTrackedDaysView } from "../../../store/signed-out/nutrition-tracker/nutrition-tracker.action"
 
 import { CaloriesBurnedContext } from "../../../contexts/signed-out/calories-burned/calories-burned.context"
+import { FitnessContext } from "../../../contexts/signed-out/fitness/fitness.context"
 import ChatBot from "../../shared/chatbot/chatbot.component"
+import { Divider } from "@mui/material"
 
 import ScheduleCalendarNutritionTracker from "../../../components/signed-out/dashboard/nutrition-tracker/schedule/schedule-calendar/schedule-calendar.component"
 import ScheduleDayInfoNutritionTracker from "../../../components/signed-out/dashboard/nutrition-tracker/schedule/schedule-day-info/schedule-day-info.component"
 import ScheduleCalendarCaloriesBurned from "../../../components/signed-out/dashboard/calories-burned/schedule/schedule-calendar/schedule-calendar.component"
 import ScheduleDayInfoCaloriesBurned from "../../../components/signed-out/dashboard/calories-burned/schedule/schedule-day-info/schedule-day-info.component"
+import ScheduleCalendarFitness from "../../../components/signed-out/dashboard/fitness/schedule/schedule-calendar/schedule-calendar.component"
+import ScheduleDayInfoFitness from "../../../components/signed-out/dashboard/fitness/schedule/schedule-day-info/schedule-day-info.component"
 
 const Dashboard = () => {
  const dispatch = useDispatch()
@@ -28,6 +32,7 @@ const Dashboard = () => {
  const selectedNutritionTrackedDay = useSelector(selectSelectedNutritionTrackedDay)
 
  const { trackedCaloriesBurned, scheduledTrackedCaloriesBurnedView } = useContext(CaloriesBurnedContext)
+ const { exercises, selectedSearchedExercise } = useContext(FitnessContext)
 
  // update scheduledNutritionTrackedDaysView when nutritionTrackedDays or selectedNutritionTrackedDay change
  useEffect(() => {
@@ -90,6 +95,25 @@ const Dashboard = () => {
  </div>
  </Fragment>
  }
+
+ {
+ exercises.length !== 0 &&
+ <Fragment>
+ <div className="fitness-dashboard-container">
+ <div className="dashboard-separator-container">
+ <hr className="rounded"/>
+ </div>
+ <h3>Fitness</h3>
+ <ScheduleCalendarFitness></ScheduleCalendarFitness>
+
+ <br/>
+ <Divider/>
+ <br/>
+
+ <ScheduleDayInfoFitness></ScheduleDayInfoFitness>
+ </div>
+ </Fragment>
+ }
  </div>
  )
 }