tanner/lightswitch-server
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Complete client UI

Browse Source
This commit is contained in:
Tanner Collin 2017-10-27 23:45:10 -06:00
commit d382fdd8fa
11 changed files with 574 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.babelrc Normal file
View File

@ -0,0 +1,4 @@
{
"presets": ["react"],
"plugins": ["transform-object-rest-spread", "react-hot-loader/babel"]
}

31
.gitignore vendored Normal file
View File

@ -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

12
dist/index.html vendored Normal file
View File

@ -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>

BIN
dist/logo.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.5 KiB

364
dist/semantic.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

BIN
dist/themes/default/assets/fonts/icons.woff2 vendored Normal file
View File

Binary file not shown.

28
package.json Normal file
View File

@ -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"
}
}

20
server.js Normal file
View File

@ -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);
});
});

64
src/app.js Normal file
View File

@ -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>
);
}
}

24
src/index.js Normal file
View File

@ -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) })
}

27
webpack.config.js Normal file
View File

@ -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
},
};