From aff418f890982501ad598bffe967ffafd8503bae Mon Sep 17 00:00:00 2001
From: Ghost <31184695+GHOSCHT@users.noreply.github.com>
Date: Sat, 1 Aug 2020 17:13:38 +0200
Subject: [PATCH] Add conditional styling

---
 .../app/renderer/components/LampButtonList.js    | 16 +++++++++-------
 .../app/renderer/components/LampButtonToggle.js  | 14 ++++++++------
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/Dashboard/app/renderer/components/LampButtonList.js b/Dashboard/app/renderer/components/LampButtonList.js
index 55021ff..6146b6c 100644
--- a/Dashboard/app/renderer/components/LampButtonList.js
+++ b/Dashboard/app/renderer/components/LampButtonList.js
@@ -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>
   );
diff --git a/Dashboard/app/renderer/components/LampButtonToggle.js b/Dashboard/app/renderer/components/LampButtonToggle.js
index b65b16e..969fa9d 100644
--- a/Dashboard/app/renderer/components/LampButtonToggle.js
+++ b/Dashboard/app/renderer/components/LampButtonToggle.js
@@ -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));