From b9fc68ec79b463ca696e8afe26b2c7a5f6b7faa3 Mon Sep 17 00:00:00 2001 From: pinardo88 Date: Fri, 6 Dec 2024 13:40:38 -0600 Subject: [PATCH 1/4] added functioning individual vertical sliders per route --- src/app/FrontendTypes.ts | 1 + .../components/TimeTravel/VerticalSlider.tsx | 73 +++++++++++++++++++ src/app/containers/ActionContainer.tsx | 35 +++++++-- src/app/containers/TravelContainer.tsx | 2 +- src/app/slices/mainSlice.ts | 4 +- 5 files changed, 105 insertions(+), 10 deletions(-) create mode 100644 src/app/components/TimeTravel/VerticalSlider.tsx diff --git a/src/app/FrontendTypes.ts b/src/app/FrontendTypes.ts index ceb834b5d..82d336bd7 100644 --- a/src/app/FrontendTypes.ts +++ b/src/app/FrontendTypes.ts @@ -250,6 +250,7 @@ export interface HandleProps { export interface MainSliderProps { className: string; snapshotsLength: number; + snapshots: any[]; } export interface DefaultMargin { diff --git a/src/app/components/TimeTravel/VerticalSlider.tsx b/src/app/components/TimeTravel/VerticalSlider.tsx new file mode 100644 index 000000000..6c0be6d61 --- /dev/null +++ b/src/app/components/TimeTravel/VerticalSlider.tsx @@ -0,0 +1,73 @@ +import React, { useState, useEffect } from 'react'; +import Slider from 'rc-slider'; +import Tooltip from 'rc-tooltip'; +import { changeSlider, pause } from '../../slices/mainSlice'; +import { useDispatch, useSelector } from 'react-redux'; +import { HandleProps, MainSliderProps, MainState, RootState } from '../../FrontendTypes'; + +const { Handle } = Slider; // component constructor of Slider that allows customization of the handle +//takes in snapshot length +const handle = (props: HandleProps): JSX.Element => { + const { value, dragging, index, ...restProps } = props; + + return ( + + + + ); +}; + +function VerticalSlider(props: MainSliderProps): JSX.Element { + const dispatch = useDispatch(); + const { snapshotsLength, snapshots } = props; // destructure props to get our total number of snapshots + const [sliderIndex, setSliderIndex] = useState(0); // create a local state 'sliderIndex' and set it to 0. + const { tabs, currentTab }: MainState = useSelector((state: RootState) => state.main); + const { currLocation } = tabs[currentTab]; // we destructure the currentTab object + + // useEffect(() => { + // if (currLocation) { + // // if we have a 'currLocation' + // //@ts-ignore + // setSliderIndex(currLocation.index); // set our slider thumb position to the 'currLocation.index' + // } else { + // setSliderIndex(0); // just set the thumb position to the beginning + // } + // }, [currLocation]); // if currLocation changes, rerun useEffect + + return ( + { + // when the slider position changes + setSliderIndex(index); // update the sliderIndex + dispatch(changeSlider(snapshots[index].props.index)); + }} + // onChangeComplete={() => { + // // after updating the sliderIndex + // console.log("sliderIndex", sliderIndex) + // dispatch(changeSlider(sliderIndex)); // updates currentTab's 'sliderIndex' and replaces our snapshot with the appropriate snapshot[sliderIndex] + // dispatch(pause()); // pauses playing and sets currentTab object'a intervalId to null + // }} + handle={handle} + /> + ); +} + +export default VerticalSlider; diff --git a/src/app/containers/ActionContainer.tsx b/src/app/containers/ActionContainer.tsx index 28d2acc4a..b36d052b0 100644 --- a/src/app/containers/ActionContainer.tsx +++ b/src/app/containers/ActionContainer.tsx @@ -2,13 +2,13 @@ import React, { useEffect, useState } from 'react'; import Action from '../components/Actions/Action'; import SwitchAppDropdown from '../components/Actions/SwitchApp'; -// Import new dropdown import { emptySnapshots, changeView, changeSlider } from '../slices/mainSlice'; import { useDispatch, useSelector } from 'react-redux'; import RouteDescription from '../components/Actions/RouteDescription'; -import DropDown from '../components/Actions/DropDown'; import { ActionContainerProps, CurrentTab, MainState, Obj, RootState } from '../FrontendTypes'; import { Button, Switch } from '@mui/material'; +import Slider from 'rc-slider'; +import VerticalSlider from '../components/TimeTravel/VerticalSlider'; /* This file renders the 'ActionContainer'. The action container is the leftmost column in the application. It includes the button that shrinks and expands the action container, a dropdown to select the active site, a clear button, the current selected Route, and a list of selectable snapshots with timestamps. @@ -223,8 +223,6 @@ function ActionContainer(props: ActionContainerProps): JSX.Element { {recordingActions ? : } - {/* add new component here for dropdown menu for useStae/ useReducer- ragad */} -
- {/* Rendering of route description components */} - {Object.keys(routes).map((route, i) => ( - - ))} +
+ {/*
+ +
*/} +
+ {/* Rendering of route description components */} + {Object.keys(routes).map((route, i) => ( +
+ + +
+ ))} +
+
) : null} diff --git a/src/app/containers/TravelContainer.tsx b/src/app/containers/TravelContainer.tsx index 7fc2506a2..fd117e487 100644 --- a/src/app/containers/TravelContainer.tsx +++ b/src/app/containers/TravelContainer.tsx @@ -85,7 +85,7 @@ function TravelContainer(props: TravelContainerProps): JSX.Element { > {playing ? 'Pause' : 'Play'} - + {/* */} - {/* */}