38 lines
1.1 KiB
JavaScript
38 lines
1.1 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import { useSelector } from 'react-redux/';
|
|
import Button from '@material-ui/core/Button';
|
|
import EmojiObjectsIcon from '@material-ui/icons/EmojiObjects';
|
|
|
|
export default function LampButtonToggle(props) {
|
|
//const comConnection = useSelector((state) => state.comConnectionReducer);
|
|
const comConnection = null;
|
|
const [comData, setComData] = useState('');
|
|
|
|
const comDataListener = (data) => {
|
|
setComData(data);
|
|
};
|
|
|
|
useEffect(() => {
|
|
comConnection.parser.on('data', comDataListener);
|
|
return () => {
|
|
comConnection.parser.removeListener('data', comDataListener);
|
|
};
|
|
}, []);
|
|
|
|
const lampEnabled = comData[props.lampnumber] === '1';
|
|
|
|
return (
|
|
<div>
|
|
<Button
|
|
style={{ height: 130, width: 130, marginLeft: 10, marginRight: 10 }}
|
|
variant="contained"
|
|
color={lampEnabled ? 'secondary' : 'primary'}
|
|
endIcon={<EmojiObjectsIcon />}
|
|
onClick={() => {
|
|
comConnection.port.write(String(props.lampnumber));
|
|
}}>
|
|
{`Lamp ${props.lampnumber}`}
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|