traveling-salesman-bangkok/src/components/MenuSolverControls.jsx
Nontouch Mukleemart 792b6279b9
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Add Navbar and remove some element
2025-03-04 23:28:28 +07:00

156 lines
4.5 KiB
JavaScript

import React from "react";
import {
ButtonGroup,
Button,
Slider,
Select,
ListSubheader,
MenuItem as SelectItem,
Typography,
Switch,
Grid,
IconButton
} from "@material-ui/core";
import { useDispatch, useSelector } from "react-redux";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
faPlay,
faStop,
faRedo,
faFastForward,
faPause
} from "@fortawesome/free-solid-svg-icons";
import { MenuSection } from "./MenuSection";
import { MenuItem } from "./MenuItem";
import { useAlgorithmInfo } from "../hooks";
import * as actions from "../store/actions";
import * as selectors from "../store/selectors";
export const MenuSolverControls = ({
onStart,
onPause,
onUnPause,
onFullSpeed,
onStop
}) => {
const dispatch = useDispatch();
const algorithms = useAlgorithmInfo();
const selectedAlgorithm = useSelector(selectors.selectAlgorithm);
const delay = useSelector(selectors.selectDelay);
const evaluatingDetailLevel = useSelector(
selectors.selectEvaluatingDetailLevel
);
const maxEvaluatingDetailLevel = useSelector(
selectors.selectMaxEvaluatingDetailLevel
);
const showBestPath = useSelector(selectors.selectShowBestPath);
const running = useSelector(selectors.selectRunning);
const fullSpeed = useSelector(selectors.selectFullSpeed);
const paused = useSelector(selectors.selectPaused);
const definingPoints = useSelector(selectors.selectDefiningPoints);
const onAlgorithmChange = event => {
event.persist();
onStop();
const solverKey = event.target.value;
const { defaults } = algorithms.find(alg => alg.solverKey === solverKey);
dispatch(actions.setAlgorithm(solverKey, defaults));
};
const onDelayChange = (_, newDelay) => {
dispatch(actions.setDelay(newDelay));
};
const onEvaluatingDetailLevelChange = (onLevel, offLevel) => event => {
const level = event.target.checked ? onLevel : offLevel;
dispatch(actions.setEvaluatingDetailLevel(level));
};
const onShowBestPathChange = event => {
dispatch(actions.setShowBestPath(event.target.checked));
};
const onReset = () => {
onStop();
dispatch(actions.resetSolverState());
};
const onShowAlgInfo = () => {
dispatch(actions.toggleAlgInfoOpen());
};
return (
<>
<MenuSection highlight>
<MenuItem title="Algorithm">
<Grid container alignItems="center">
<Grid item xs={11}>
<Select
value={selectedAlgorithm}
onChange={onAlgorithmChange}
disabled={running || paused || definingPoints}
variant="outlined"
fullWidth
margin="dense"
>
<ListSubheader>Heuristic Construction</ListSubheader>
{algorithms
.filter(alg => alg.type === "heuristic-construction")
.map(alg => (
<SelectItem value={alg.solverKey} key={alg.solverKey}>
{alg.friendlyName}
</SelectItem>
))}
<ListSubheader>Exhaustive</ListSubheader>
{algorithms
.filter(alg => alg.type === "exhaustive")
.map(alg => (
<SelectItem value={alg.solverKey} key={alg.solverKey}>
{alg.friendlyName}
</SelectItem>
))}
</Select>
</Grid>
</Grid>
</MenuItem>
<MenuItem title="Controls">
<ButtonGroup
fullWidth
variant="outlined"
color="secondary"
size="large"
>
<Button
onClick={paused ? onUnPause : running ? onPause : onStart}
disabled={definingPoints || fullSpeed}
>
<FontAwesomeIcon
icon={paused ? faPlay : running ? faPause : faPlay}
width="0"
/>
</Button>
<Button onClick={onReset} disabled={running || definingPoints}>
<FontAwesomeIcon icon={faRedo} width="0" />
</Button>
</ButtonGroup>
</MenuItem>
<MenuItem title="Delay">
<Slider
value={delay}
onChange={onDelayChange}
step={25}
min={0}
max={250}
valueLabelDisplay="auto"
color="secondary"
disabled={definingPoints || fullSpeed}
/>
</MenuItem>
</MenuSection>
</>
);
};