heliox/old-monorepo
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add conditional styling

Browse source
This commit is contained in:
GHOSCHT 2020-08-01 17:13:38 +02:00
parent 968b13b1dc
commit aff418f890
2 changed files with 17 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
Dashboard/app/renderer/components/LampButtonList.js
View file

@ -5,16 +5,18 @@ import LampButtonAbsolute from './LampButtonAbsolute';
export default function LampButtonList() {
return (
<div>
<div style={{ display: 'flex', margin: 20 }}>
<LampButtonAbsolute title="on" />
<LampButtonAbsolute title="off" />
<div style={{ display: 'flex', justifyContent: 'center' }}>
<div style={{ display: 'flex', margin: 20 }}>
<LampButtonAbsolute title="on" />
<LampButtonAbsolute title="off" />
</div>
</div>
<div style={{ display: 'flex', margin: 20 }}>
<LampButtonToggle lampnumber={0} lampEnabled={true} />
<LampButtonToggle lampnumber={1} lampEnabled={true} />
<LampButtonToggle lampnumber={2} lampEnabled={true} />
<LampButtonToggle lampnumber={3} lampEnabled={true} />
<LampButtonToggle lampnumber={0} />
<LampButtonToggle lampnumber={1} />
<LampButtonToggle lampnumber={2} />
<LampButtonToggle lampnumber={3} />
</div>
</div>
);

14
Dashboard/app/renderer/components/LampButtonToggle.js
View file

@ -1,19 +1,21 @@
import React from 'react';
import React, { useState } 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 [comData, setComData] = useState('');
comConnection.parser.on('data', (data) => {
setComData(data);
});
const lampEnabled = comData[props.lampnumber] === '1';
return (
<div>
<Button
style={{ height: 130, width: 130, marginRight: 20 }}
style={{ height: 130, width: 130, marginRight: 20, userSelect: 'none' }}
variant="contained"
color={props.lampEnabled ? 'secondary' : 'primary'}
href="#contained-buttons"
size="large"
color={lampEnabled ? 'secondary' : 'primary'}
endIcon={<EmojiObjectsIcon />}
onClick={() => {
comConnection.port.write(String(props.lampnumber));