[OAB-18] create admin panel

.env.example

@@ -0,0 +1,3 @@
+SLACK_WEBHOOK=https://hooks.slack.com/123/456/789
+SLACK_LOG_WEBHOOK=https://hooks.slack.com/123/456/789
+RASPBERRY=0|1

.gitignore

@@ -12,3 +12,4 @@ images/*
 
 .DS_Store
 
+.env

client/components/Game.jsx

@@ -4,27 +4,26 @@ import socketIOClient from 'socket.io-client'
 import { logResult, resultResponse } from '../modules/result'
 import { ToastContainer, toast } from 'react-toastify'
 
+import withSocket from '@wrappers/withSocket'
+import AdminPanel from '@components/admin-panel/AdminPanel'
+
 const ROLLERS = ['left', 'center', 'right']
 
-export default class Game extends React.Component {
+class Game extends React.Component {
  constructor(props) {
  super(props)
 
  this.state = {}
- this.socket = socketIOClient('http://localhost:3000')
 
  ROLLERS.forEach(roller => {
  this[roller] = React.createRef()
  })
  }
 
  componentDidMount() {
- this.socket.on('SPIN_REQUEST', forcedSpinTo => this._spinMachine(forcedSpinTo))
- this.socket.on('NOTIFY', (type, message) => toast[type](message))
-
- // toast.success("Success Notification!", {
- // position: toast.POSITION.TOP_CENTER
- // });
+ const { socket } = this.props;
+ socket.on('SPIN_REQUEST', forcedSpinTo => this._spinMachine(forcedSpinTo))
+ socket.on('NOTIFY', (type, message) => toast[type](message))
  }
 
  _spinMachine(forcedSpinTo) {
@@ -55,9 +54,12 @@ export default class Game extends React.Component {
  return (
  <div className="rollers">
  <ToastContainer autoClose={5000} position={toast.POSITION.TOP_CENTER} />
+ <AdminPanel />
  <div className="overlay" />
  {this._createRollers()}
  </div>
  )
  }
 }
+
+export default withSocket(Game);

client/components/admin-panel/ActionButton.jsx

@@ -0,0 +1,28 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+import withSocket from '@wrappers/withSocket'
+
+class ActionButton extends Component {
+ _onClick(message) {
+ this.props.socket.emit(message)
+ }
+
+ render() {
+ const { text, socketAction } = this.props
+
+ return (
+ <a href='#' onClick={() => this._onClick(socketAction)}>{text}</a>
+ )
+ }
+}
+
+ActionButton.propTypes = {
+ text: PropTypes.string.isRequired,
+ socketAction: PropTypes.string.isRequired,
+ socket: PropTypes.shape({
+ emit: PropTypes.func.isRequired
+ }).isRequired
+}
+
+export default withSocket(ActionButton)

client/components/admin-panel/AdminPanel.jsx

@@ -0,0 +1,53 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+import ActionButton from '@components/admin-panel/ActionButton'
+import withSocket from '@wrappers/withSocket'
+import '@styles/admin_panel'
+
+class AdminPanel extends Component {
+ constructor(props) {
+ super(props)
+ this.state = { active: false }
+ this._setActive = this._setActive.bind(this)
+ }
+
+ componentDidMount() {
+ this.props.socket.on('SET_ADMIN_PANEL_ACTIVE', this._setActive)
+ }
+
+ _setActive(value) {
+ this.setState({ active: value })
+ }
+
+ _getWrapperClass(active) {
+ const classes = ['admin-panel']
+ if (active) { classes.push('active') }
+ return classes.join(' ')
+ }
+
+ render() {
+ const { active } = this.state
+
+ return (
+ <div className={this._getWrapperClass(active)}>
+ <div className='admin-panel__actions'>
+ <ActionButton text='Reboot' socketAction='@admin/REBOOT' />
+ <ActionButton text='Shutdown' socketAction='@admin/SHUTDOWN' />
+ <ActionButton text='Trigger servo' socketAction='@admin/TRIGGER_SERVO' />
+ <a className='close' onClick={() => this._setActive(false)}>
+ Close
+ </a>
+ </div>
+ </div>
+ )
+ }
+}
+
+AdminPanel.propTypes = {
+ socket: PropTypes.shape({
+ on: PropTypes.func.isRequired
+ }).isRequired
+}
+
+export default withSocket(AdminPanel)

client/styles/admin_panel.scss

@@ -0,0 +1,43 @@
+.admin-panel {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ z-index: 10;
+ padding: 15px;
+ box-sizing: border-box;
+ will-change: top;
+ transition: top 0.6s cubic-bezier(0.4, 0.2, 0, 1);
+ top: -100%;
+ background: #30373f;
+
+ &.active {
+ top: 0%;
+ }
+
+ &__actions {
+ margin: 0 -10px 20px;
+ display: flex;
+
+ a {
+ font-family: Helvetica, sans-serif;
+ margin: 0 10px 20px;
+ padding: 0 20px;
+ background: #cccccc;
+ border: 1px solid #b1b2b3;
+ color: #6d6972;
+ border-radius: 3px;
+ font-size: 0.8em;
+ text-transform: uppercase;
+ line-height: 2.25em;
+ font-weight: bold;
+ }
+
+ a, a:hover, a:active, a:focus, a:visited {
+ text-decoration: none;
+ }
+
+ a.close {
+ margin-left: auto;
+ }
+ }
+}

client/styles/game.scss

@@ -14,6 +14,7 @@ body {
  display: flex;
  align-items: center;
  justify-content: center;
+ position: relative;
  }
 
  .roller-wrapper {

client/wrappers/withSocket.jsx

@@ -0,0 +1,26 @@
+import React, { Component } from 'react'
+import socketIOClient from 'socket.io-client'
+
+let socket
+
+export default function withSocket(WrappedComponent) {
+ class WithSocket extends Component {
+ constructor(props) {
+ super(props)
+
+ if (!socket) {
+ socket = socketIOClient('http://localhost:3000')
+ }
+ }
+
+ render() {
+ return (
+ <WrappedComponent socket={socket} {...this.props} />
+ )
+ }
+ }
+
+ WithSocket.displayName = `WithSocket(${WrappedComponent.name})`
+
+ return WithSocket;
+}

package.json

@@ -21,6 +21,7 @@
  "react-toastify": "^4.1.0",
  "redis": "^2.8.0",
  "serialport": "^6.2.1",
+ "shelljs": "^0.8.2",
  "slack-webhook": "^1.0.0",
  "socket.io": "^2.1.1",
  "socket.io-client": "^2.1.1"

src/server.js

@@ -6,7 +6,6 @@ import http from 'http'
 import reader, { parseData } from './rfid'
 import redis from 'redis'
 import moment from 'moment'
-import servo from './servo'
 import sendPhoto from './queue'
 import Slack from './slack'
 import socketIO from 'socket.io'
@@ -27,12 +26,13 @@ let readyForSpin = false
 let socketClient = null
 let user = null
 
+import handleAdminPanelBroadcasts from './serverModules/handleAdminPanelBroadcasts'
+import handleSpinResult from './serverModules/handleSpinResult'
+
 app.use(webpackMiddleware(webpack(webpackConfig)))
 server.listen(3000)
 
 function _rollRequest(userId) {
- user = getUser(userId)
-
  if (user === undefined) {
  slack.log(userId)
  socketClient.emit('NOTIFY', 'error', 'please go to @czana')
@@ -82,15 +82,20 @@ io.on('connection', client => {
 
  client.on('SPIN_ENDED', result => {
  readyForSpin = true
-
- if (result.win) {
- if (result.cashPrize) servo.move()
- slack.post(user.mention, result.icon, result.cashPrize ? '$$$' : '2 Kudos!')
- }
+ handleSpinResult(result, user);
  })
+
+ handleAdminPanelBroadcasts(client);
 })
 
 reader.on('data', data => {
  const userId = parseData(data)
- _rollRequest(userId)
+ user = getUser(userId)
+
+ if (user && user.admin) {
+ socketClient.emit('SET_ADMIN_PANEL_ACTIVE', true);
+ } else {
+ socketClient.emit('SET_ADMIN_PANEL_ACTIVE', false);
+ _rollRequest(userId)
+ }
 })

src/serverModules/handleAdminPanelBroadcasts.js

@@ -0,0 +1,32 @@
+import shell from 'shelljs'
+
+import raspberryOnly from '../utils/raspberryOnly'
+
+let servo
+
+raspberryOnly(() => {
+ servo = require('../servo')['default']
+})
+
+export default (client) => {
+ client.on('@admin/REBOOT', () => {
+ raspberryOnly(() => {
+ shell.exec('sudo reboot')
+ client.emit('SET_ADMIN_PANEL_ACTIVE', false);
+ })
+ })
+
+ client.on('@admin/SHUTDOWN', () => {
+ raspberryOnly(() => {
+ shell.exec('sudo shutdown -P now')
+ client.emit('SET_ADMIN_PANEL_ACTIVE', false);
+ })
+ })
+
+ client.on('@admin/TRIGGER_SERVO', () => {
+ raspberryOnly(() => {
+ servo.move()
+ client.emit('SET_ADMIN_PANEL_ACTIVE', false);
+ })
+ })
+}

src/serverModules/handleSpinResult.js

@@ -0,0 +1,16 @@
+import raspberryOnly from '../utils/raspberryOnly'
+
+let servo
+
+raspberryOnly(() => {
+ servo = require('../servo')
+})
+
+export default (result, user) => {
+ if (result.win) {
+ raspberryOnly(() => {
+ if (result.cashPrize) { servo.move() }
+ })
+ slack.post(user.mention, result.icon, result.cashPrize ? '$$$' : '2 Kudos!')
+ }
+}