Add conditional styling
This commit is contained in:
parent
968b13b1dc
commit
aff418f890
2 changed files with 17 additions and 13 deletions
|
@ -5,16 +5,18 @@ import LampButtonAbsolute from './LampButtonAbsolute';
|
||||||
export default function LampButtonList() {
|
export default function LampButtonList() {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<div style={{ display: 'flex', margin: 20 }}>
|
<div style={{ display: 'flex', justifyContent: 'center' }}>
|
||||||
<LampButtonAbsolute title="on" />
|
<div style={{ display: 'flex', margin: 20 }}>
|
||||||
<LampButtonAbsolute title="off" />
|
<LampButtonAbsolute title="on" />
|
||||||
|
<LampButtonAbsolute title="off" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style={{ display: 'flex', margin: 20 }}>
|
<div style={{ display: 'flex', margin: 20 }}>
|
||||||
<LampButtonToggle lampnumber={0} lampEnabled={true} />
|
<LampButtonToggle lampnumber={0} />
|
||||||
<LampButtonToggle lampnumber={1} lampEnabled={true} />
|
<LampButtonToggle lampnumber={1} />
|
||||||
<LampButtonToggle lampnumber={2} lampEnabled={true} />
|
<LampButtonToggle lampnumber={2} />
|
||||||
<LampButtonToggle lampnumber={3} lampEnabled={true} />
|
<LampButtonToggle lampnumber={3} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,19 +1,21 @@
|
||||||
import React from 'react';
|
import React, { useState } from 'react';
|
||||||
import { useSelector } from 'react-redux/';
|
import { useSelector } from 'react-redux/';
|
||||||
import Button from '@material-ui/core/Button';
|
import Button from '@material-ui/core/Button';
|
||||||
import EmojiObjectsIcon from '@material-ui/icons/EmojiObjects';
|
import EmojiObjectsIcon from '@material-ui/icons/EmojiObjects';
|
||||||
|
|
||||||
export default function LampButtonToggle(props) {
|
export default function LampButtonToggle(props) {
|
||||||
const comConnection = useSelector((state) => state.comConnectionReducer);
|
const comConnection = useSelector((state) => state.comConnectionReducer);
|
||||||
|
const [comData, setComData] = useState('');
|
||||||
|
comConnection.parser.on('data', (data) => {
|
||||||
|
setComData(data);
|
||||||
|
});
|
||||||
|
const lampEnabled = comData[props.lampnumber] === '1';
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<Button
|
<Button
|
||||||
style={{ height: 130, width: 130, marginRight: 20 }}
|
style={{ height: 130, width: 130, marginRight: 20, userSelect: 'none' }}
|
||||||
variant="contained"
|
variant="contained"
|
||||||
color={props.lampEnabled ? 'secondary' : 'primary'}
|
color={lampEnabled ? 'secondary' : 'primary'}
|
||||||
href="#contained-buttons"
|
|
||||||
size="large"
|
|
||||||
endIcon={<EmojiObjectsIcon />}
|
endIcon={<EmojiObjectsIcon />}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
comConnection.port.write(String(props.lampnumber));
|
comConnection.port.write(String(props.lampnumber));
|
||||||
|
|
Reference in a new issue