Add Buttons

Dashboard/app/renderer/components/LampButtonAbsolute.js

@@ -0,0 +1,25 @@
+import React 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);
+
+  return (
+    <div>
+      <Button
+        style={{ height: 130, width: 130, marginRight: 20 }}
+        variant="contained"
+        color="primary"
+        href="#contained-buttons"
+        size="large"
+        endIcon={<EmojiObjectsIcon />}
+        onClick={() => {
+          comConnection.port.write(props.title);
+        }}>
+        {props.title}
+      </Button>
+    </div>
+  );
+}

Dashboard/app/renderer/components/LampButtonList.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import LampButtonToggle from './LampButtonToggle';
+import LampButtonAbsolute from './LampButtonAbsolute';
+
+export default function LampButtonList() {
+  return (
+    <div>
+      <div style={{ display: 'flex', margin: 20 }}>
+        <LampButtonAbsolute title="on" />
+        <LampButtonAbsolute title="off" />
+      </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} />
+      </div>
+    </div>
+  );
+}

Dashboard/app/renderer/components/LampButtonToggle.js

@@ -0,0 +1,25 @@
+import React 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);
+
+  return (
+    <div>
+      <Button
+        style={{ height: 130, width: 130, marginRight: 20 }}
+        variant="contained"
+        color={props.lampEnabled ? 'secondary' : 'primary'}
+        href="#contained-buttons"
+        size="large"
+        endIcon={<EmojiObjectsIcon />}
+        onClick={() => {
+          comConnection.port.write(String(props.lampnumber));
+        }}>
+        {`Lamp ${props.lampnumber}`}
+      </Button>
+    </div>
+  );
+}