Skip to content

Commit 180f7ec

Browse files
pariaspepariaspe
authored
Merge pull request #1966 from ango1994/issue-1964
Minor frontend refinements
2 parents 2eb6b2d + 60a1595 commit 180f7ec

File tree

15 files changed

+299
-50
lines changed

15 files changed

+299
-50
lines changed

‎react_frontend/src/components/buttons/ConsoleButton.js‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,32 @@ const ConsoleButton = (props) => {
77
const { changeVisualization, visualization } = React.useContext(
88
props.context
99
);
10+
const [disabled, setDisabled] = React.useState(true);
11+
12+
React.useEffect(() => {
13+
const callback = (message) => {
14+
if (message.data.state === "ready") {
15+
setDisabled(false);
16+
}
17+
};
18+
19+
window.RoboticsExerciseComponents.commsManager.subscribe(
20+
[window.RoboticsExerciseComponents.commsManager.events.STATE_CHANGED],
21+
callback
22+
);
23+
24+
return () => {
25+
window.RoboticsExerciseComponents.commsManager.unsubscribe(
26+
[window.RoboticsExerciseComponents.commsManager.events.STATE_CHANGED],
27+
callback
28+
);
29+
};
30+
}, []);
1031
return (
1132
<Button
1233
id={"console_button"}
1334
size={"medium"}
35+
disabled={disabled}
1436
variant="contained"
1537
color={"secondary"}
1638
component="span"
@@ -24,7 +46,7 @@ const ConsoleButton = (props) => {
2446
}}
2547
startIcon={<TerminalOutlinedIcon />}
2648
>
27-
View Console
49+
Console
2850
</Button>
2951
);
3052
};

‎react_frontend/src/components/buttons/GazeboButton.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,34 @@ const GazeboButton = (props) => {
77
const { changeVisualization, visualization } = React.useContext(
88
props.context
99
);
10+
11+
const [disabled, setDisabled] = React.useState(true);
12+
13+
React.useEffect(() => {
14+
const callback = (message) => {
15+
if (message.data.state === "ready") {
16+
setDisabled(false);
17+
}
18+
};
19+
20+
window.RoboticsExerciseComponents.commsManager.subscribe(
21+
[window.RoboticsExerciseComponents.commsManager.events.STATE_CHANGED],
22+
callback
23+
);
24+
25+
return () => {
26+
window.RoboticsExerciseComponents.commsManager.unsubscribe(
27+
[window.RoboticsExerciseComponents.commsManager.events.STATE_CHANGED],
28+
callback
29+
);
30+
};
31+
}, []);
1032
return (
1133
<Button
1234
id={"gazebo_button"}
1335
size={"medium"}
1436
variant="contained"
37+
disabled={disabled}
1538
color={"secondary"}
1639
component="span"
1740
sx={{ m: 1 }}

‎react_frontend/src/components/buttons/RAM/RAMExerciseConfiguration.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useEffect, useState } from "react";
22

33
import MenuItem from "@mui/material/MenuItem";
4-
import SettingsIcon from "@mui/icons-material/Settings";
4+
import LandscapeIcon from "@mui/icons-material/Landscape";
55

66
import { FormControl, InputLabel, Select } from "@mui/material";
77

@@ -51,7 +51,7 @@ export default function CircuitSelector() {
5151
<>
5252
<FormControl>
5353
<InputLabel id={"circuit-selector-label"}>
54-
<SettingsIcon></SettingsIcon>
54+
<LandscapeIcon></LandscapeIcon>
5555
</InputLabel>
5656
<Select
5757
disabled={disabled}

‎react_frontend/src/components/buttons/RAM/RAMPlayPause.js‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
import LoadingButton from "@mui/lab/LoadingButton";
2+
import React, { useContext, useEffect, useState } from "react";
3+
import PropTypes from "prop-types";
4+
import PlayArrowIcon from "@mui/icons-material/PlayArrow";
5+
import { Button } from "@mui/material";
6+
import PauseIcon from "@mui/icons-material/Pause";
7+
8+
export const PlayPause = (props) => {
9+
const { editorCode, setLinterMessage } = useContext(props.context);
10+
const [disabledPlay, setDisabledPlay] = useState(true);
11+
const [disabledPause, setDisabledPause] = useState(true);
12+
13+
const [buttonShow, setButtonShow] = useState("play");
14+
const [loading, setLoading] = useState(false);
15+
16+
useEffect(() => {
17+
const callback = (message) => {
18+
if (message.data.state === "running") {
19+
setButtonShow("pause");
20+
setDisabledPlay(true);
21+
setDisabledPause(false);
22+
} else if (
23+
message.data.state === "idle" ||
24+
message.data.state === "connected"
25+
) {
26+
setButtonShow("play");
27+
setDisabledPlay(true);
28+
setDisabledPause(true);
29+
} else {
30+
setButtonShow("play");
31+
setDisabledPlay(false);
32+
setDisabledPause(true);
33+
}
34+
};
35+
36+
window.RoboticsExerciseComponents.commsManager.subscribe(
37+
[window.RoboticsExerciseComponents.commsManager.events.STATE_CHANGED],
38+
callback
39+
);
40+
41+
return () => {
42+
window.RoboticsExerciseComponents.commsManager.unsubscribe(
43+
[window.RoboticsExerciseComponents.commsManager.events.STATE_CHANGED],
44+
callback
45+
);
46+
};
47+
}, []);
48+
49+
const loadCode = () => {
50+
setLoading(true);
51+
window.RoboticsExerciseComponents.commsManager
52+
.send("load", {
53+
code: editorCode,
54+
})
55+
.then(() => {
56+
runCode();
57+
setLoading(false);
58+
})
59+
.catch((response) => {
60+
let linterMessage = JSON.stringify(response.data.message).split("\\n");
61+
setLinterMessage(linterMessage);
62+
setLoading(false);
63+
});
64+
};
65+
66+
const runCode = () => {
67+
window.RoboticsExerciseComponents.commsManager
68+
.run()
69+
.then(() => {
70+
console.log("running");
71+
})
72+
.catch((response) => {
73+
console.error(response);
74+
setLoading(false);
75+
});
76+
};
77+
78+
if (buttonShow === "play") {
79+
return (
80+
<LoadingButton
81+
disabled={disabledPlay}
82+
id={"loadIntoRobot"}
83+
loading={loading}
84+
color={"secondary"}
85+
onClick={() => {
86+
loadCode();
87+
}}
88+
sx={{ m: 0.5 }}
89+
variant={"outlined"}
90+
>
91+
{loading ? "_" : <PlayArrowIcon />}
92+
</LoadingButton>
93+
);
94+
} else {
95+
return (
96+
<Button
97+
disabled={disabledPause}
98+
id={"play"}
99+
color={"secondary"}
100+
onClick={() => {
101+
window.RoboticsExerciseComponents.commsManager
102+
.pause()
103+
.then(() => {
104+
console.log("paused");
105+
})
106+
.catch((response) => console.log(response));
107+
}}
108+
sx={{ m: 0.5 }}
109+
variant={"outlined"}
110+
>
111+
<PauseIcon />
112+
</Button>
113+
);
114+
}
115+
};
116+
PlayPause.propTypes = {
117+
context: PropTypes.any,
118+
};

‎react_frontend/src/components/buttons/RAM/RAMStop.js‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useEffect, useState } from "react";
22
import PropTypes from "prop-types";
33
import LoadingButton from "@mui/lab/LoadingButton";
4-
import StopIcon from "@mui/icons-material/Stop";
4+
import ReplayIcon from "@mui/icons-material/Replay";
55

66
const RAMReset = () => {
77
const [disabled, setDisabled] = useState(true);
@@ -34,7 +34,6 @@ const RAMReset = () => {
3434
id={"play"}
3535
loading={loading}
3636
color={"secondary"}
37-
loadingPosition="start"
3837
onClick={() => {
3938
setLoading(true);
4039
window.RoboticsExerciseComponents.commsManager
@@ -44,11 +43,10 @@ const RAMReset = () => {
4443
})
4544
.catch((response) => console.log(response));
4645
}}
47-
startIcon={<StopIcon />}
4846
sx={{ m: 0.5 }}
4947
variant={"outlined"}
5048
>
51-
Stop
49+
<ReplayIcon />
5250
</LoadingButton>
5351
);
5452
};

‎react_frontend/src/components/buttons/RAMVisualizatorButton.js‎

Lines changed: 26 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,40 @@
11
import { Button } from "@mui/material";
22
import * as React from "react";
33
import PropTypes from "prop-types";
4-
import TerminalOutlinedIcon from "@mui/icons-material/TerminalOutlined";
4+
import PreviewIcon from "@mui/icons-material/Preview";
55

66
const CameraButton = (props) => {
77
const { changeVisualization, visualization } = React.useContext(
88
props.context
99
);
10+
11+
const [disabled, setDisabled] = React.useState(true);
12+
13+
React.useEffect(() => {
14+
const callback = (message) => {
15+
if (message.data.state === "ready") {
16+
setDisabled(false);
17+
}
18+
};
19+
20+
window.RoboticsExerciseComponents.commsManager.subscribe(
21+
[window.RoboticsExerciseComponents.commsManager.events.STATE_CHANGED],
22+
callback
23+
);
24+
25+
return () => {
26+
window.RoboticsExerciseComponents.commsManager.unsubscribe(
27+
[window.RoboticsExerciseComponents.commsManager.events.STATE_CHANGED],
28+
callback
29+
);
30+
};
31+
}, []);
1032
return (
1133
<Button
1234
id={"console_button"}
1335
size={"medium"}
1436
variant="contained"
37+
disabled={disabled}
1538
color={"secondary"}
1639
component="span"
1740
sx={{ m: 1 }}
@@ -22,9 +45,9 @@ const CameraButton = (props) => {
2245
specific: !visualization.specific,
2346
});
2447
}}
25-
startIcon={<TerminalOutlinedIcon />}
48+
startIcon={<PreviewIcon />}
2649
>
27-
View Camera
50+
GUI
2851
</Button>
2952
);
3053
};

‎react_frontend/src/components/common/MainAppBar.js‎

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -57,21 +57,22 @@ function MainAppBar(props) {
5757
}}
5858
>
5959
<Image src="/static/common/img/logo.gif" fit={"cover"} width={50} />
60-
<Box sx={{ display: "flex", gap: "10px", marginLeft: "10px" }}>
60+
<Box
61+
sx={{
62+
display: "flex",
63+
gap: "10px",
64+
marginLeft: "10px",
65+
alignItems: "center",
66+
justifyContent: "center",
67+
}}
68+
>
6169
<ConnectionIndicator></ConnectionIndicator>
6270
<LaunchIndicator></LaunchIndicator>
71+
{props.specificConfiguration}
6372
</Box>
6473
</Box>
6574
<Typography variant="h5">{props.exerciseName}</Typography>
6675
<ButtonGroup color={"loading"} variant={"contained"}>
67-
<IconButton
68-
component={"span"}
69-
id={"open-theory"}
70-
onClick={openTheory}
71-
color={theoryMode ? "success" : "secondary"}
72-
>
73-
<SchoolOutlinedIcon />
74-
</IconButton>
7576
<IconButton
7677
component={"span"}
7778
id={"open-exercise"}
@@ -80,6 +81,14 @@ function MainAppBar(props) {
8081
>
8182
<CodeOutlinedIcon />
8283
</IconButton>
84+
<IconButton
85+
component={"span"}
86+
id={"open-theory"}
87+
onClick={openTheory}
88+
color={theoryMode ? "success" : "secondary"}
89+
>
90+
<SchoolOutlinedIcon />
91+
</IconButton>
8392
<IconButton
8493
id={"open-forum"}
8594
onClick={openForum}
@@ -98,6 +107,7 @@ function MainAppBar(props) {
98107
MainAppBar.propTypes = {
99108
context: PropTypes.any,
100109
exerciseName: PropTypes.string,
110+
specificConfiguration: PropTypes.any,
101111
};
102112

103113
export default MainAppBar;

0 commit comments

Comments
 (0)