Complete client UI

7 years ago · d382fdd8fa
commit d382fdd8fa
11 changed files with 574 additions and 0 deletions
--- a/.babelrc
+++ b/.babelrc
@ -0,0 +1,4 @@
+{
+    "presets": ["react"],
+    "plugins": ["transform-object-rest-spread", "react-hot-loader/babel"]
+}
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,31 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# Dependencies
+node_modules/
+
+# Compiled output
+bundle.js
+
+# Runtime data
+database.sqlite
+
+# Test coverage
+coverage
+.nyc_output
+
+# Logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editors and IDEs
+.idea
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+*.swp
+
+# Misc
+.DS_Store
--- a/dist/index.html
+++ b/dist/index.html
@ -0,0 +1,12 @@
+<html>
+    <head>
+        <title>LED Toggle Demo</title>
+        <link rel="stylesheet" href="semantic.min.css">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    </head>
+    <body>
+        <div id="root"></div>
+
+        <script src="./bundle.js"></script>
+    </body>
+</html>
--- a/dist/logo.png
+++ b/dist/logo.png
--- a/dist/semantic.min.css
+++ b/dist/semantic.min.css
--- a/dist/themes/default/assets/fonts/icons.woff2
+++ b/dist/themes/default/assets/fonts/icons.woff2
--- a/package.json
+++ b/package.json
@ -0,0 +1,28 @@
+{
+  "name": "criticaldemo",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "node server.js",
+    "build": "webpack",
+    "dev": "webpack-dev-server"
+  },
+  "author": "",
+  "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",
+    "webpack-dev-server": "^2.4.5"
+  },
+  "dependencies": {
+    "express": "^4.15.3",
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1",
+    "react-fastclick": "^3.0.2",
+    "socket.io": "^2.0.3"
+  }
+}
--- a/server.js
+++ b/server.js
@ -0,0 +1,20 @@
+const express = require('express');
+const app = express();
+
+const server = app.listen(3000, function () {
+    console.log('Example app listening on port 3000!');
+})
+
+const io = require('socket.io').listen(server);
+
+const update = data => {
+    console.log('recieved ' + data);
+}
+
+app.use('/', express.static('dist'))
+
+io.on('connection', socket => {
+    socket.on('update', data => {
+        update(data);
+    });
+});
--- a/src/app.js
+++ b/src/app.js
@ -0,0 +1,64 @@
+import React from 'react';
+import io from 'socket.io-client';
+
+export default class App extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            socket: io.connect()
+        }
+    }
+
+    componentDidMount() {
+        this.connect();
+
+    }
+
+    componentWillUnmount() {
+        this.setState({socket: this.state.socket.removeAllListeners()});
+    }
+
+    connect() {
+        let socket = this.state.socket;
+
+        socket.on('connect', () => {
+            console.log('Connected!');
+        });
+    }
+
+	sendOn() {
+        this.state.socket.emit('update', '1');
+		console.log('On sent.');
+	}
+
+	sendOff() {
+        this.state.socket.emit('update', '0');
+		console.log('Off sent.');
+	}
+
+    render() {
+        return (
+            <div className="ui text container">
+				<div className="ui basic center aligned segment">
+					<img className="ui centered image" src="logo.png" />
+					<h3 className="ui header">Remote Control Lightswitch</h3>
+					<p>Press the buttons to control the light.</p>
+				
+					<div className="ui compact raised segments">
+						<div className="ui segment">
+							<i onClick={() => this.sendOn()} className="bordered inverted yellow idea huge icon"></i>
+						</div>
+						<div className="ui segment">
+							<i onClick={() => this.sendOff()} className="bordered inverted disabled idea huge icon"></i>
+						</div>
+					</div>
+				</div>
+				<div className="ui basic center aligned segment">
+					<p>Created by Tanner Collin <br />
+					tannercollin.com</p>
+				</div>
+            </div>
+       );
+    }
+}
--- a/src/index.js
+++ b/src/index.js
@ -0,0 +1,24 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import 'react-hot-loader/patch';
+import { AppContainer } from 'react-hot-loader';
+
+import App from './app';
+
+import initReactFastclick from 'react-fastclick';
+initReactFastclick();
+
+const render = Component => {
+    ReactDOM.render(
+        <AppContainer>
+            <Component />
+        </AppContainer>,
+        document.getElementById('root')
+    )
+}
+
+render(App)
+
+if (module.hot) {
+    module.hot.accept('./app', () => { render(App) })
+}
--- a/webpack.config.js
+++ b/webpack.config.js
@ -0,0 +1,27 @@
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = {
+    entry: './src/index.js',
+    plugins: [
+        new webpack.HotModuleReplacementPlugin(),
+    ],
+    output: {
+        filename: 'bundle.js',
+        path: path.resolve(__dirname, 'dist'),
+        publicPath: '/'
+    },
+    module: {
+        rules: [
+        { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
+        ]
+    },
+    stats: "normal",
+    devServer: {
+        contentBase: path.join(__dirname, "dist"),
+        publicPath: '/',
+        hot: true,
+        host: '0.0.0.0',
+        disableHostCheck: true
+    },
+};