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,23 +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))
+    const { socket } = this.props;
+    socket.on('SPIN_REQUEST', forcedSpinTo => this._spinMachine(forcedSpinTo))
+    socket.on('NOTIFY', (type, message) => toast[type](message))
   }
 
   _spinMachine(forcedSpinTo) {
@@ -51,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!')
+  }
+}

src/users.js

@@ -2,6 +2,7 @@ const USERS = {
   5501512322897: {
     mention: 'czana',
     email: '[email protected]',
+    admin: true
   },
   4402038631408: {
     mention: 'bart',
@@ -13,7 +14,8 @@ const USERS = {
   },
   4402038648119: {
     mention: 'm.polakowski',
-    email: '[email protected]'
+    email: '[email protected]',
+    admin: true
   },
   5501557468263: {
     mention: 'apawlicka',

src/utils/raspberryOnly.js

@@ -0,0 +1,7 @@
+require('dotenv').config()
+
+export default (theFunction) => {
+  if (process.env.RASPBERRY === '1') {
+    theFunction()
+  }
+}

webpack.config.js

@@ -1,10 +1,16 @@
 import HtmlWebpackPlugin from 'html-webpack-plugin'
+import path from 'path'
 
 export default {
   mode: 'development',
   entry: './client/index.jsx',
   resolve: {
-    extensions: ['.js', '.jsx', '.scss']
+    extensions: ['.js', '.jsx', '.scss'],
+    alias: {
+      '@components': path.resolve(__dirname, 'client/components'),
+      '@styles': path.resolve(__dirname, 'client/styles'),
+      '@wrappers': path.resolve(__dirname, 'client/wrappers')
+    }
   },
   output: {
     path: '/',