1
0
Fork 0
mirror of https://git.rwth-aachen.de/acs/public/villas/web/ synced 2025-03-09 00:00:01 +01:00
VILLASweb/src/pages/dashboards/widget/widgets/button.jsx
Andrii Podriez 6d2cabb268 implemented websockets and finished dashboard migration
Signed-off-by: Andrii Podriez <andrey5577990@gmail.com>
2024-09-05 10:39:02 +02:00

107 lines
3.2 KiB
JavaScript

/**
* This file is part of VILLASweb.
*
* VILLASweb is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* VILLASweb is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
******************************************************************************/
import React, { useState, useEffect } from 'react';
import { Button } from 'react-bootstrap';
const WidgetButton = (props) => {
const [pressed, setPressed] = useState(props.widget.customProperties.pressed);
useEffect(() => {
let widget = props.widget;
widget.customProperties.simStartedSendValue = false;
widget.customProperties.pressed = false;
// AppDispatcher.dispatch({
// type: 'widgets/start-edit',
// token: props.token,
// data: widget
// });
// Effect cleanup
return () => {
// Clean up if needed
};
}, [props.token, props.widget]);
useEffect(() => {
if (props.widget.customProperties.simStartedSendValue) {
let widget = props.widget;
widget.customProperties.simStartedSendValue = false;
widget.customProperties.pressed = false;
AppDispatcher.dispatch({
type: 'widgets/start-edit',
token: props.token,
data: widget
});
props.onInputChanged(widget.customProperties.off_value, '', false, false);
}
}, [props, setPressed]);
useEffect(() => {
setPressed(props.widget.customProperties.pressed);
}, [props.widget.customProperties.pressed]);
const onPress = (e) => {
if (e.button === 0 && !props.widget.customProperties.toggle) {
valueChanged(props.widget.customProperties.on_value, true);
}
};
const onRelease = (e) => {
if (e.button === 0) {
let nextState = false;
if (props.widget.customProperties.toggle) {
nextState = !pressed;
}
valueChanged(nextState ? props.widget.customProperties.on_value : props.widget.customProperties.off_value, nextState);
}
};
const valueChanged = (newValue, newPressed) => {
if (props.onInputChanged) {
props.onInputChanged(newValue, 'pressed', newPressed, true);
}
setPressed(newPressed);
};
let opacity = props.widget.customProperties.background_color_opacity;
const buttonStyle = {
backgroundColor: props.widget.customProperties.background_color,
borderColor: props.widget.customProperties.border_color,
color: props.widget.customProperties.font_color,
opacity: pressed ? (opacity + 1) / 4 : opacity,
};
return (
<div className="button-widget full">
<Button
className="full"
style={buttonStyle}
active={pressed}
disabled={props.editing}
onMouseDown={(e) => onPress(e)}
onMouseUp={(e) => onRelease(e)}
>
{props.widget.name}
</Button>
</div>
);
};
export default WidgetButton;