Merge pull request #123 from tahmid-saj/dev-fitness-components

exercise components

src/components/shared/drop-button/drop-button.styles.jsx

@@ -0,0 +1,9 @@
+import styled from "styled-components";
+
+export const DropButton = styled.select`
+  background-color: #04AA6D;
+  color: white;
+  padding: 16px;
+  font-size: 16px;
+  border: none;
+`

src/components/signed-out/fitness/add-exercise-form/add-exercise-form-info/add-exercise-form-info.component.jsx

@@ -0,0 +1,25 @@
+import "./add-exercise-form-info.styles.scss"
+import { Typography } from "@mui/material"
+
+const AddExerciseFormInfo = () => {
+  return (
+    <div className="fitness-add-exercise-form-info">
+      <Typography sx={{ display: "flex" }} 
+        variant="body1">{`Name`}</Typography>
+      <Typography sx={{ display: "flex" }} 
+        variant="body1">{`Type`}</Typography>
+
+      <Typography sx={{ display: "flex" }} 
+        variant="body1">{`Muscle`}</Typography>
+      <Typography sx={{ display: "flex" }} 
+        variant="body1">{`Equipment`}</Typography>
+      <Typography sx={{ display: "flex" }} 
+            variant="body1">{`Difficulty`}</Typography>
+
+      <Typography sx={{ display: "flex" }} 
+            variant="body1">{`Instructions`}</Typography>
+    </div>
+  )
+}
+
+export default AddExerciseFormInfo

src/components/signed-out/fitness/add-exercise-form/add-exercise-form.component.jsx

@@ -1,7 +1,72 @@
+import { useState } from "react"
 import "./add-exercise-form.styles.scss"
+import { Typography } from "@mui/material"
+import FormInput from "../../../shared/form-input/form-input.component"
+import { ButtonsContainer } from "../../../shared/button/button.styles"
+import Button from "../../../shared/button/button.component"
+import SimplePaper from "../../../shared/mui/paper/paper.component"
+import { COLOR_CODES } from "../../../../utils/constants/shared.constants"
+import AddExerciseFormInfo from "./add-exercise-form-info/add-exercise-form-info.component"
+
+const defaultFormFields = {
+  exerciseDate: "",
+  exerciseSets: "",
+  exerciseReps: ""
+}
+
+const paperStyles = {
+  backgroundColor: COLOR_CODES.paper.formPaper,
+}
 
 const AddExerciseForm = () => {
-
+  const [formFields, setFormFields] = useState(defaultFormFields)
+
+  const resetFormFields = () => {
+    setFormFields(defaultFormFields)
+  }
+
+  const handleSubmit = (event) => {
+    event.preventDefault()
+
+    if (!formFields.exerciseDate || formFields.exerciseDate === "") {
+      console.log("please fill in all info")
+      return
+    }
+
+    resetFormFields()
+  }
+
+  const handleChange = (event) => {
+    const { name, value } = event.target
+
+    setFormFields({ ...formFields, [name]: value })
+  }
+
+  return (
+    <div className="fitness-add-exercise-form-container">
+      <Typography variant="h6">Add exercise to the schedule</Typography>
+
+      <SimplePaper styles={ paperStyles }>
+        <AddExerciseFormInfo></AddExerciseFormInfo>
+
+        <form onSubmit={ handleSubmit } className="fitness-add-exercise-form">
+          <FormInput label="Scheduled date" type="date" required onChange={ handleChange }
+              name="exerciseDate" value={ formFields.exerciseDate }></FormInput>
+
+          <FormInput label="Sets" type="text" onChange={ handleChange }
+              name="exerciseSets" value={ formFields.exerciseSets }></FormInput>
+
+          <FormInput label="Reps" type="text" onChange={ handleChange }
+              name="exerciseReps" value={ formFields.exerciseReps }></FormInput>
+
+          <ButtonsContainer>
+              <Button type="submit">Add</Button>
+              <Button type="button" onClick={ resetFormFields }>Clear</Button>
+          </ButtonsContainer>
+        </form>
+      </SimplePaper>
+    </div>
+  )
 }
 
 export default AddExerciseForm

src/components/signed-out/fitness/add-exercise-form/add-exercise-form.styles.scss

@@ -0,0 +1,13 @@
+.fitness-add-exercise-form-container {
+  display: block;
+  justify-content: center;
+  align-items: center;
+  padding: 0% 10% 2% 10%;
+  width: 50%;
+}
+
+.fitness-add-exercise-form {
+  display: block;
+  justify-content: center;
+  align-items: center;
+}

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

@@ -45,7 +45,7 @@ const ScheduleDayInfo = () => {
   }
 
   return (
-    <Fragment>
+    <div className="fitness-schedule-day-info-container">
       <Typography sx={{ display: "flex", marginLeft: "2%" }} 
         variant="h6">{`Exercises planned`}</Typography>
 
@@ -63,7 +63,7 @@ const ScheduleDayInfo = () => {
             </ButtonsContainer>
         </div>
       </SimplePaper>
-    </Fragment>
+    </div>
   )
 }
 

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

@@ -1,3 +1,7 @@
+.fitness-schedule-day-info-container {
+  margin-bottom: 2%;
+}
+
 .fitness-schedule-day-info {
   display: block;
   justify-content: center;

src/components/signed-out/fitness/search-exercise-form/search-exercise-form.component.jsx

@@ -1,7 +1,112 @@
+import { Fragment, useState } from "react"
 import "./search-exercise-form.styles.scss"
+import { Typography } from "@mui/material"
+import FormInput from "../../../shared/form-input/form-input.component"
+import { DropButton } from "../../../shared/drop-button/drop-button.styles"
+import Button from "../../../shared/button/button.component"
+import { ButtonsContainer } from "../../../shared/button/button.styles"
+import SimplePaper from "../../../shared/mui/paper/paper.component"
+import { COLOR_CODES } from "../../../../utils/constants/shared.constants"
+
+const defaultFormFields = {
+  exerciseName: "",
+  exerciseType: "",
+  exerciseMuscle: "",
+  exerciseDifficulty: "",
+}
+
+const paperStyles = {
+  backgroundColor: COLOR_CODES.paper.formPaper,
+}
 
 const SearchExerciseForm = () => {
+  const [formFields, setFormFields] = useState(defaultFormFields)
+
+  const resetFormFields = () => {
+    setFormFields(defaultFormFields)
+  }
+
+  const handleSubmit = (event) => {
+    event.preventDefault()
+
+    if (!formFields.exerciseName || formFields.exerciseName === "") {
+      console.log("please fill in all info")
+      return
+    }
+
+    resetFormFields()
+  }
+
+  const handleChange = (event) => {
+    const { name, value } = event.target
+
+    setFormFields({ ...formFields, [name]: value })
+  }
+
+  return (
+    <div className="fitness-search-exercise-form-container">
+      <Typography variant="h6">Search exercises</Typography>
+
+      <SimplePaper styles={ paperStyles }>
+        <form onSubmit={ handleSubmit } className="fitness-search-exercise-form">
+          <FormInput label="Name of exercise" type="text" required onChange={ handleChange }
+            name="exerciseName" value={ formFields.exerciseName }></FormInput>
+
+          <div className="fitness-search-exercise-form-dropdown">
+            <Typography sx={{ display: "inline-block", position: "relative", marginRight: "2%" }} paragraph>Type</Typography>
+            <DropButton name="exerciseType" id="exerciseType" 
+                    onChange={ handleChange } value={ formFields.exerciseType }>
+              <option value="cardio">Cardio</option>
+              <option value="strength">Strength</option>
+              <option value="powerlifting">Powerlifting</option>
+              <option value="stretching">Stretching</option>
+              <option value="plyometrics">Plyometrics</option>
+              <option value="strongman">Strongman</option>
+              <option value="olympic_weightlifting">Olympic Weightlifting</option>
+            </DropButton>
+          </div>
+
+          <div className="fitness-search-exercise-form-dropdown">
+            <Typography sx={{ display: "inline-block", position: "relative", marginRight: "2%" }} paragraph>Muscle</Typography>
+            <DropButton name="exerciseMuscle" id="exerciseMuscle" 
+                    onChange={ handleChange } value={ formFields.exerciseMuscle }>
+              <option value="abdominals">Abdominals</option>
+              <option value="abductors">Abductors</option>
+              <option value="biceps">Biceps</option>
+              <option value="calves">Calves</option>
+              <option value="chest">Chest</option>
+              <option value="forearms">Forearms</option>
+              <option value="glutes">Glutes</option>
+              <option value="hamstrings">Hamstrings</option>
+              <option value="lats">Lats</option>
+              <option value="lower_back">Lower back</option>
+              <option value="middle_back">Middle back</option>
+              <option value="neck">Neck</option>
+              <option value="quadriceps">Quadriceps</option>
+              <option value="traps">Traps</option>
+              <option value="triceps">Triceps</option>
+            </DropButton>
+          </div>
+
+          <div className="fitness-search-exercise-form-dropdown">
+            <Typography sx={{ display: "inline-block", position: "relative", marginRight: "2%" }} paragraph>Difficulty</Typography>
+            <DropButton name="exerciseDifficulty" id="exerciseDifficulty" 
+                    onChange={ handleChange } value={ formFields.exerciseDifficulty }>
+              <option value="beginner">Beginner</option>
+              <option value="intermediate">Intermediate</option>
+              <option value="expert">Expert</option>
+            </DropButton>
+          </div>
+
+          <ButtonsContainer>
+            <Button type="submit">Search</Button>
+            <Button type="button" onClick={ resetFormFields }>Clear</Button>
+          </ButtonsContainer>
+        </form>
 
+      </SimplePaper>
+    </div>
+  )
 }
 
 export default SearchExerciseForm

src/components/signed-out/fitness/search-exercise-form/search-exercise-form.styles.scss

@@ -0,0 +1,19 @@
+.fitness-search-exercise-form-container {
+  display: block;
+  justify-content: center;
+  align-items: center;
+  padding: 0% 10% 2% 10%;
+}
+
+.fitness-search-exercise-form {
+  display: block;
+  justify-content: center;
+  align-items: center;
+}
+
+.fitness-search-exercise-form-dropdown {
+  display: block;
+  justify-content: center;
+  align-items: center;
+  padding-bottom: 2%;
+}

src/components/signed-out/fitness/search-exercise-result/search-exercise-result.component.jsx

@@ -1,7 +1,35 @@
+import OutlinedCard from "../../../shared/mui/card/card.component"
+import { Typography } from "@mui/material"
 import "./search-exercise-result.styles.scss"
+import { COLOR_CODES } from "../../../../utils/constants/shared.constants"
+
+const outlinedCardStyles = {
+  backgroundColor: COLOR_CODES.card.infoCard
+}
 
 const SearchExerciseResult = () => {
+  return (
+    <div className="fitness-search-exercise-result">
+      <OutlinedCard styles={ outlinedCardStyles }>
+        <div className="fitness-search-result-info">
+          <Typography sx={{ display: "flex" }} 
+            variant="body1">{`Name`}</Typography>
+
+          <Typography sx={{ display: "flex" }} 
+            variant="body1">{`Type`}</Typography>
+
+          <Typography sx={{ display: "flex" }} 
+            variant="body2">{`Muscle`}</Typography>
+
+          <Typography sx={{ display: "flex" }} 
+            variant="body2">{`Equipment`}</Typography>
 
+          <Typography sx={{ display: "flex" }} 
+            variant="body2">{`Difficulty`}</Typography>
+        </div>
+      </OutlinedCard>
+    </div>
+  )
 }
 
 export default SearchExerciseResult

src/components/signed-out/fitness/search-exercise-result/search-exercise-result.styles.scss

@@ -0,0 +1,5 @@
+.fitness-search-result-info {
+  display: block;
+  justify-content: center;
+  align-items: center;
+}

src/components/signed-out/fitness/search-exercise-results/search-exercise-results.component.jsx

@@ -1,7 +1,25 @@
+import OutlinedCard from "../../../shared/mui/card/card.component"
+import SimplePaper from "../../../shared/mui/paper/paper.component"
 import "./search-exercise-results.styles.scss"
+import { COLOR_CODES } from "../../../../utils/constants/shared.constants"
+import { Typography } from "@mui/material"
+import SearchExerciseResult from "../search-exercise-result/search-exercise-result.component"
+
+const paperStyles = {
+  backgroundColor: COLOR_CODES.paper.formPaper,
+}
 
 const SearchExerciseResults = () => {
+  return (
+    <div className="fitness-search-exercise-results">
+      <Typography variant="h6">Search results</Typography>
 
+      <SimplePaper styles={ paperStyles }>
+        <SearchExerciseResult></SearchExerciseResult>
+        <SearchExerciseResult></SearchExerciseResult>
+      </SimplePaper>
+    </div>
+  )
 }
 
 export default SearchExerciseResults