-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
64e7a33
commit 0e8afb0
Showing
17 changed files
with
743 additions
and
84 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| import { createSlice } from '@reduxjs/toolkit'; | ||
| import { loadState } from '@/utils/state'; | ||
|
|
||
| const Steps = { | ||
| HOME_ARM: 'HOME_ARM', | ||
| MOVE_JOINT_3: 'MOVE_JOINT_3', | ||
| ADD_MOVE_TO_ACTION_LIST: 'ADD_MOVE_TO_ACTION_LIST', | ||
| }; | ||
|
|
||
| const evaluateStepMap = { | ||
| [Steps.HOME_ARM]: state => { | ||
| // The state passed holds all the store state | ||
| const armpose = state.armPose; | ||
| if (armpose === null) { | ||
| return false; | ||
| } | ||
| return armpose.isHomed; | ||
| }, | ||
| [Steps.MOVE_JOINT_3]: state => { | ||
| const armPose = state.armPose; | ||
| }, | ||
| [Steps.ADD_MOVE_TO_ACTION_LIST]: state => { | ||
| // The state passed holds all the store state | ||
| return true; | ||
| }, | ||
| }; | ||
|
|
||
| const initialState = { | ||
| steps: [ | ||
| { | ||
| name: 'Home the arm', | ||
| id: 0, | ||
| description: 'Home the arm', | ||
| completion: { | ||
| done: false, | ||
| timestamp: null, | ||
| }, | ||
| }, | ||
| { | ||
| name: 'Move joint 3', | ||
| id: 1, | ||
| description: 'Go to the control panel and move joint 3', | ||
| completion: { | ||
| done: false, | ||
| timestamp: null, | ||
| }, | ||
| }, | ||
| { | ||
| name: 'Add Move to action list', | ||
| id: 2, | ||
| description: 'Add the move to the action list', | ||
| completion: { | ||
| done: false, | ||
| timestamp: null, | ||
| }, | ||
| }, | ||
| ], | ||
| }; | ||
|
|
||
| const loadedState = loadState()?.activity; | ||
|
|
||
| if (loadedState && loadedState.steps) { | ||
| initialState.steps = loadedState.steps; | ||
| } | ||
| const ActivitySlice = createSlice({ | ||
| name: 'activity', | ||
| initialState, | ||
| reducers: {}, | ||
| }); | ||
|
|
||
| export const currentStepSelector = state => | ||
| state.activity.steps?.find(step => !step.completion.done); | ||
|
|
||
| export const activityActions = ActivitySlice.actions; | ||
| export default ActivitySlice.reducer; |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| import { Button } from '@/components/ui/button'; | ||
| import { Progress } from '@/components/ui/progress'; | ||
| import { currentStepSelector } from '@/redux/ActivitySlice'; | ||
| import { activityActions } from '@/redux/ActivitySlice'; | ||
| import QuizIcon from '@mui/icons-material/Quiz'; | ||
| import { useState, useEffect } from 'react'; | ||
| import { useSelector, useDispatch } from 'react-redux'; | ||
|
|
||
| const ActivityBox = () => { | ||
| const [isVisible, setIsVisible] = useState(false); | ||
| const dispatch = useDispatch(); | ||
| const steps = useSelector(state => state.activity.steps); | ||
| const currentStep = useSelector(currentStepSelector); | ||
|
|
||
| const numSteps = steps.length; | ||
| let num_done = 0; | ||
| for (let step of steps) { | ||
| if (step.completion.done) { | ||
| num_done++; | ||
| } else { | ||
| break; | ||
| } | ||
| } | ||
| const completion = Math.round((num_done / numSteps) * 100); | ||
| console.log(steps); | ||
|
|
||
| useEffect(() => { | ||
| const timer = setTimeout(() => { | ||
| setIsVisible(true); | ||
| }, 4000); | ||
|
|
||
| return () => clearTimeout(timer); | ||
| }, []); | ||
|
|
||
| const clearActivity = () => { | ||
| dispatch(activityActions.clearActivity()); | ||
| }; | ||
|
|
||
| return ( | ||
| <div | ||
| className={`absolute left-1/2 top-2 z-20 flex w-1/4 transform flex-col justify-center rounded-md border border-gray-700 bg-purple-700 bg-opacity-90 p-4 text-white transition-all duration-500 ${ | ||
| isVisible ? 'translate-y-0 opacity-100' : '-translate-y-full opacity-0' | ||
| }`} | ||
| > | ||
| <div className="mb-2 flex items-center gap-x-2"> | ||
| <QuizIcon className="animate-bounce" /> | ||
| <p className="whitespace-nowrap text-lg">Arm Activity!</p> | ||
| <Progress value={completion} /> | ||
| <div role="button" onClick={clearActivity}> | ||
| ✕ | ||
| </div> | ||
| </div> | ||
| {currentStep ? ( | ||
| <div className="flex flex-col gap-x-2"> | ||
| <p className="text-lg">Your current step is:</p> | ||
|
|
||
| <div className="rounded bg-slate-50 px-3 py-1 text-gray-800 shadow-sm shadow-white"> | ||
| <p className="text-xl">{currentStep.name}</p> | ||
| <p className="text-sm text-gray-600">{currentStep.description}</p> | ||
| </div> | ||
| </div> | ||
| ) : ( | ||
| <div>Activity Completed!</div> | ||
| )} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default ActivityBox; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| import * as React from "react" | ||
| import * as ProgressPrimitive from "@radix-ui/react-progress" | ||
|
|
||
| import { cn } from "@/lib/utils" | ||
|
|
||
| const Progress = React.forwardRef(({ className, value, ...props }, ref) => ( | ||
| <ProgressPrimitive.Root | ||
| ref={ref} | ||
| className={cn("relative h-4 w-full overflow-hidden rounded-full bg-secondary", className)} | ||
| {...props}> | ||
| <ProgressPrimitive.Indicator | ||
| className="h-full w-full flex-1 bg-primary transition-all" | ||
| style={{ transform: `translateX(-${100 - (value || 0)}%)` }} /> | ||
| </ProgressPrimitive.Root> | ||
| )) | ||
| Progress.displayName = ProgressPrimitive.Root.displayName | ||
|
|
||
| export { Progress } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.