Skip to content

Commit fb4ea52

Browse files
AnyandsiSystemsPurge
Anyandsi
authored and
SystemsPurge
committed
Update Button Widget
Implement toggle mode Adjust size of the box for the WidgetPlayer fix: missing data after merge/rebase Signed-off-by: Andrii Podriez <andrey5577990@gmail.com> Signed-off-by: SystemsPurge <naktiyoussef@proton.me>
1 parent cad50bb commit fb4ea52

18 files changed

Lines changed: 188 additions & 160 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@
7272
"test": "react-scripts test --env=jsdom",
7373
"eject": "react-scripts eject"
7474
},
75-
"proxy": "https://slew.k8s.eonerc.rwth-aachen.de/",
75+
"proxy": "https://villas.k8s.eonerc.rwth-aachen.de/",
7676
"browserslist": {
7777
"production": [
7878
">0.2%",

‎src/app.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,16 @@ const App = () => {
4949
return decodedToken.exp < timeNow;
5050
};
5151

52+
const notificationSystem = useRef(null);
53+
54+
useEffect(() => {
55+
NotificationsDataManager.setSystem(notificationSystem.current);
56+
57+
return () => {
58+
NotificationsDataManager.setSystem(null);
59+
};
60+
}, []);
61+
5262
const { isAuthenticated, token, user } = useSelector((state) => state.auth);
5363

5464
if (!isAuthenticated || isTokenExpired(token)) {

‎src/common/api/websocket-api.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,13 +54,12 @@ class WebSocketManager {
5454
}
5555

5656
send(id, message) {
57-
console.log("MESSAGE", message);
5857
const socket = this.sockets.find((s) => s.id === id);
5958
if (socket == null) {
6059
return false;
6160
}
6261
const data = this.messageToBuffer(message);
63-
console.log("📤 Sending binary buffer to server:", new Uint8Array(data));
62+
console.log("📤 Sending binary buffer to server:", message.values);
6463
socket.socket.send(data);
6564

6665
return true;

‎src/pages/dashboards/dashboard.jsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,6 @@ import useWebSocketConnection from "./hooks/use-websocket-connection.js";
3636

3737
import {
3838
useGetDashboardQuery,
39-
useGetICSQuery,
4039
useLazyGetWidgetsQuery,
4140
useLazyGetFilesQuery,
4241
useAddWidgetMutation,
@@ -48,9 +47,7 @@ import {
4847
useAddFileMutation,
4948
useUpdateFileMutation,
5049
} from "../../store/apiSlice";
51-
import { useState } from "react";
52-
import DashboardLayout from "./dashboard-layout";
53-
import ErrorBoundary from "./dashboard-error-boundry";
50+
import { Spinner } from "react-bootstrap";
5451

5552
const startUpdaterWidgets = new Set(["Slider", "Button", "NumberInput"]);
5653

@@ -612,4 +609,4 @@ const Dashboard = ({ isFullscreen, toggleFullscreen }) => {
612609
);
613610
};
614611

615-
export default Dashboard;
612+
export default Fullscreenable()(Dashboard);

‎src/pages/dashboards/hooks/use-dashboard-data.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,6 @@ export const useDashboardData = (scenarioID) => {
5252

5353
// Fetch configs and signals
5454
const configsRes = await triggerGetConfigs(scenarioID).unwrap();
55-
console.log("GOT CONFIGS", configsRes);
5655
if (configsRes?.configs) {
5756
setConfigs(configsRes.configs);
5857

‎src/pages/dashboards/hooks/use-websocket-connection.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,12 +51,14 @@ const useWebSocketConnection = (activeICS, signals, widgets) => {
5151
);
5252
if (
5353
matchingSignal &&
54-
typeof matchingSignal.index === "number" &&
54+
!isNaN(matchingSignal.index) &&
5555
matchingSignal.index < inputValues.length
5656
) {
5757
if (widget.type == "Button") {
58-
inputValues[matchingSignal.index] =
59-
widget.customProperties.off_value;
58+
inputValues[matchingSignal.index] = widget.customProperties
59+
.pressed
60+
? widget.customProperties.on_value
61+
: widget.customProperties.off_value;
6062
} else {
6163
inputValues[matchingSignal.index] =
6264
widget.customProperties.value;

‎src/pages/dashboards/widget/widget-factory.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -204,8 +204,8 @@ const widgetsMap = {
204204
Player: {
205205
minWidth: 144,
206206
minHeight: 226,
207-
width: 400,
208-
height: 606,
207+
width: 144,
208+
height: 226,
209209
customProperties: {
210210
configIDs: [],
211211
uploadResults: false,

‎src/pages/dashboards/widget/widget.js‎

Lines changed: 0 additions & 28 deletions
This file was deleted.

‎src/pages/dashboards/widget/widgets/button.jsx‎

Lines changed: 31 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -15,73 +15,26 @@
1515
* along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
1616
******************************************************************************/
1717

18-
import React, { useState, useEffect } from "react";
18+
import React, { useState, useEffect, useRef } from "react";
1919
import { Button } from "react-bootstrap";
20-
21-
const WidgetButton = ({ widget, editing }) => {
20+
import { useUpdateWidgetMutation } from "../../../../store/apiSlice";
21+
const WidgetButton = ({ widget, editing, onInputChanged }) => {
2222
const [pressed, setPressed] = useState(widget.customProperties.pressed);
23+
const [toggle, setToggle] = useState(widget.customProperties.toggle);
24+
const [updateWidget] = useUpdateWidgetMutation();
2325

24-
// useEffect(() => {
25-
// let widget = props.widget;
26-
// widget.customProperties.simStartedSendValue = false;
27-
// widget.customProperties.pressed = false;
28-
29-
// // AppDispatcher.dispatch({
30-
// // type: 'widgets/start-edit',
31-
// // token: props.token,
32-
// // data: widget
33-
// // });
34-
35-
// // Effect cleanup
36-
// return () => {
37-
// // Clean up if needed
38-
// };
39-
// }, [props.token, props.widget]);
40-
41-
// useEffect(() => {
42-
// if (props.widget.customProperties.simStartedSendValue) {
43-
// let widget = props.widget;
44-
// widget.customProperties.simStartedSendValue = false;
45-
// widget.customProperties.pressed = false;
46-
// AppDispatcher.dispatch({
47-
// type: 'widgets/start-edit',
48-
// token: props.token,
49-
// data: widget
50-
// });
51-
52-
// props.onInputChanged(widget.customProperties.off_value, '', false, false);
53-
// }
54-
// }, [props, setPressed]);
55-
56-
// useEffect(() => {
57-
// setPressed(props.widget.customProperties.pressed);
58-
// }, [props.widget.customProperties.pressed]);
26+
//this ref is used for capturing last value of pressed so that it can be saved and sent on unmount
27+
const pressedRef = useRef(pressed);
5928

60-
// const onPress = (e) => {
61-
// if (e.button === 0 && !props.widget.customProperties.toggle) {
62-
// valueChanged(props.widget.customProperties.on_value, true);
63-
// }
64-
// };
65-
66-
// const onRelease = (e) => {
67-
// if (e.button === 0) {
68-
// let nextState = false;
69-
// if (props.widget.customProperties.toggle) {
70-
// nextState = !pressed;
71-
// }
72-
// valueChanged(nextState ? props.widget.customProperties.on_value : props.widget.customProperties.off_value, nextState);
73-
// }
74-
// };
75-
76-
// const valueChanged = (newValue, newPressed) => {
77-
// if (props.onInputChanged) {
78-
// props.onInputChanged(newValue, 'pressed', newPressed, true);
79-
// }
80-
// setPressed(newPressed);
81-
// };
29+
useEffect(() => {
30+
return () => {
31+
//if button is in toggle-mode, we want to save its pressed state for future reloads of dashboard
32+
if (toggle) updateSimStartedAndPressedValues(false, pressedRef.current);
33+
};
34+
}, []);
8235

8336
useEffect(() => {
84-
updateSimStartedAndPressedValues(false, false);
37+
setToggle(widget.customProperties.toggle);
8538
}, [widget]);
8639

8740
const updateSimStartedAndPressedValues = async (isSimStarted, isPressed) => {
@@ -105,13 +58,16 @@ const WidgetButton = ({ widget, editing }) => {
10558
};
10659

10760
useEffect(() => {
108-
if (widget.customProperties.simStartedSendValue) {
109-
let widgetCopy = { ...widget };
110-
widgetCopy.customProperties.simStartedSendValue = false;
111-
widgetCopy.customProperties.pressed = false;
112-
113-
onInputChanged(widget.customProperties.off_value, "", false, false);
114-
}
61+
pressedRef.current = pressed;
62+
63+
onInputChanged(
64+
pressed
65+
? widget.customProperties.on_value
66+
: widget.customProperties.off_value,
67+
"",
68+
false,
69+
false
70+
);
11571
}, [pressed]);
11672

11773
let opacity = widget.customProperties.background_color_opacity;
@@ -129,8 +85,13 @@ const WidgetButton = ({ widget, editing }) => {
12985
style={buttonStyle}
13086
active={pressed}
13187
disabled={editing}
132-
onMouseDown={(e) => setPressed(true)}
133-
onMouseUp={(e) => setPressed(false)}
88+
onMouseDown={(e) => {
89+
if (!toggle) setPressed(true);
90+
else setPressed(!pressed);
91+
}}
92+
onMouseUp={(e) => {
93+
if (!toggle) setPressed(false);
94+
}}
13495
>
13596
{widget.name}
13697
</Button>

‎src/pages/dashboards/widget/widgets/input.jsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,9 @@ const WidgetInput = ({ signals, widget, editing, onInputChanged }) => {
3333
useEffect(() => {
3434
if (widget.customProperties.simStartedSendValue) {
3535
widget.customProperties.simStartedSendValue = false;
36-
if(props.onInputChanged && props.signals && props.signals.length > 0){
37-
props.onInputChanged(widget.customProperties.value, "", "", false);
36+
if(onInputChanged && signals && signals.length > 0){
37+
onInputChanged(widget.customProperties.value, "", "", false);
3838
}
39-
}, [props.widget]);
40-
4139
updateWidgetSimStatus(false);
4240

4341
onInputChanged(Number(value), "", false, false);

0 commit comments

Comments
 (0)