From 23d10df83ad8ed697adcb97ad3beddd7983bce97 Mon Sep 17 00:00:00 2001
From: Tanner Collin <git@tannercollin.com>
Date: Mon, 19 Jun 2017 21:59:25 +0000
Subject: [PATCH] Toggle icon locally with on / off buttons

---
 .babelrc     |  2 +-
 package.json |  1 +
 src/app.js   | 30 +++++++++++++++++++++++++-----
 3 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/.babelrc b/.babelrc
index e557992..9d11d2c 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,4 +1,4 @@
 {
     "presets": ["react"],
-    "plugins": ["react-hot-loader/babel"]
+    "plugins": ["transform-object-rest-spread", "react-hot-loader/babel"]
 }
diff --git a/package.json b/package.json
index 6d7f5db..86e8150 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
   "devDependencies": {
     "babel-core": "^6.25.0",
     "babel-loader": "^7.0.0",
+    "babel-plugin-transform-object-rest-spread": "^6.23.0",
     "babel-preset-react": "^6.24.1",
     "react-hot-loader": "^3.0.0-beta.6",
     "webpack": "^3.0.0",
diff --git a/src/app.js b/src/app.js
index cee9b8f..a209484 100644
--- a/src/app.js
+++ b/src/app.js
@@ -1,6 +1,25 @@
 import React from 'react';
 
-export default class Site extends React.Component {
+export default class App extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            ioState: {
+                dout: [false],
+            },
+        }
+    }
+
+    doutSet(pin, value) {
+        this.setState({
+            ioState: {
+                ...this.state.ioState,
+                dout: this.state.ioState.dout.map((x, i) => i == pin ? value : x),
+            },
+        });
+    }
+
     render() {
         return (
             <div className="ui text container">
@@ -16,18 +35,19 @@ export default class Site extends React.Component {
                     <div className="column">
                         <div className="ui segment">
                             <div className="ui top attached label">Digital Out</div>
-                            <div className="ui two column grid">
+                            <div className="ui two column middle aligned grid">
                                 <div className="twelve wide column">
                                     <div className="ui right pointing label">
                                           DO1
                                     </div>
                                     <div className="ui buttons">
-                                      <button className="ui red button">On</button>
-                                      <button className="ui button">Off</button>
+                                      <button onClick={() => this.doutSet(0, true)} className="ui red button">On</button>
+                                      <button onClick={() => this.doutSet(0, false)} className="ui button">Off</button>
                                     </div>
                                 </div>
                                 <div className="four wide right aligned column">
-                                    <i className="red idea big icon"></i>
+                                    {!this.state.ioState.dout[0] && <i className="bordered inverted disabled idea big icon"></i>}
+                                    {this.state.ioState.dout[0] && <i className="bordered inverted red idea big icon"></i>}
                                 </div>
                             </div>
                         </div>