add AdminPanel

.babelrc

@@ -0,0 +1,5 @@
+{
+  "presets": [
+    "env", "stage-0", "react"
+  ]
+}

.gitignore

@@ -12,3 +12,8 @@ images/*
 
 .DS_Store
 
+bundle.js
+
+.env
+
+.idea/

README.md

@@ -37,6 +37,25 @@ Alias=kiosk.service
 WantedBy=multi-user.target
 ```
 
+### /lib/systemd/system/kiosk-uploader.service
+
+```conf
+[Unit]
+Description=Kiosk Uploader
+After=systemd-user-sessions.service
+Requires=redis.service
+
+[Service]
+WorkingDirectory=/home/pi/services/
+ExecStart=/home/pi/services/uploader --watch-dir /home/pi/services/data --log-file /home/pi/services/logs/uploader.log
+IgnoreSIGPIPE=false
+Type=simple
+
+[Install]
+Alias=kiosk-uploader.service
+WantedBy=multi-user.target
+```
+
 Enable & start services:
 
 ```bash

client/components/Animation.jsx → client/components/Animation.js

@@ -1,29 +1,33 @@
 import React from 'react'
+import random from 'lodash/random'
 
 export default class Animation extends React.Component {
-
   _setAnimation(position) {
     const rollerElement = document.querySelector(`.roller.${position}`)
     rollerElement.classList.remove('animate')
-    setTimeout(() => rollerElement.classList.add('animate'))
+    rollerElement.offsetWidth // reflow hack
+    rollerElement.classList.add('animate')
   }
 
   render() {
-    const { position, animationTime, rotations, angle, offset, startingIndex } = this.props
+    const { position, rotations, angle, startingIndex } = this.props
 
     const startingRotationInDegree = startingIndex * angle
-    const rotationInDegree = startingRotationInDegree + (rotations * angle)
+    const rotationInDegree = startingRotationInDegree + rotations * angle
+    const animationTime = random(3, 6, true)
+    const offset = random(1, 7)
+
     const animation = `roller-${position} ${animationTime}s ease forwards`
 
     this._setAnimation(position)
 
     return (
       <style>
-        {`.roller.animate.${position}{ animation: ${animation}; }` +
-          `@keyframes roller-${position} {` +
-          `0% { transform: rotateX(${startingRotationInDegree}deg); }` +
-          `90% { transform: rotateX(${rotationInDegree + offset}deg); }` +
-          `100% { transform: rotateX(${rotationInDegree}deg); }`}
+        {`@keyframes roller-${position} {` +
+          `0% { transform: rotateX(${startingRotationInDegree}deg); } ` +
+          `90% { transform: rotateX(${rotationInDegree + offset}deg); } ` +
+          `100% { transform: rotateX(${rotationInDegree}deg); } }` +
+          `.roller.animate.${position}{ animation: ${animation}; }`}
       </style>
     )
   }

client/components/Game.jsx → client/components/Game.js

@@ -1,17 +1,15 @@
 import React from 'react'
 import Roller from './Roller'
-import socketIOClient from 'socket.io-client'
-import { logResult, resultResponse } from '../modules/result'
-import { ToastContainer, toast } from 'react-toastify'
+import { resultResponse } from '../modules/result'
+import { Link } from 'react-router-dom'
 
 const ROLLERS = ['left', 'center', 'right']
 
 export default class Game extends React.Component {
   constructor(props) {
     super(props)
-
     this.state = {}
-    this.socket = socketIOClient('http://localhost:3000')
+    this.socket = props.socket
 
     ROLLERS.forEach(roller => {
       this[roller] = React.createRef()
@@ -20,11 +18,9 @@ export default class Game extends React.Component {
 
   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
-    // });
+    this.socket.on('ADMIN', () => {
+      props.history.push('/adminpanel')
+    })
   }
 
   _spinMachine(forcedSpinTo) {
@@ -33,7 +29,6 @@ export default class Game extends React.Component {
     Promise.all(spins).then(results => {
       const state = Object.values(results).reduce((a, v) => ({ ...a, ...v }), {})
       this.setState(state)
-
       this.socket.emit('SPIN_ENDED', resultResponse(state))
     })
   }
@@ -53,10 +48,21 @@ export default class Game extends React.Component {
 
   render() {
     return (
-      <div className="rollers">
-        <ToastContainer autoClose={5000} position={toast.POSITION.TOP_CENTER} />
-        <div className="overlay" />
-        {this._createRollers()}
+      <div id="game">
+        <div className="rollers">
+          <div className="overlay" />
+          {this._createRollers()}
+          <div
+              style={{
+                'z-index': '9999',
+                position: 'absolute',
+                background: 'rgba(255,12,34,0.5)',
+                padding: '12px'
+              }}
+          >
+            <Link to="/adminpanel">AdminPanel</Link>
+          </div>
+        </div>
       </div>
     )
   }

client/components/Roller.jsx → client/components/Roller.js

@@ -3,7 +3,8 @@ import ReactDOM from 'react-dom'
 import Slot from './Slot'
 import Animation from './Animation'
 import Polygon, { getR } from '../modules/polygon'
-import { times, random } from 'lodash'
+import times from 'lodash/times'
+import random from 'lodash/random'
 
 export default class Roller extends React.Component {
   constructor(props) {
@@ -16,26 +17,26 @@ export default class Roller extends React.Component {
   spin(startingIndex = 0, forcedSpinTo) {
     return new Promise(resolve => {
       const { count, position } = this.props
-
       let rotations = random(30, 50)
-      const animationTime = random(3, 6, true)
 
       if (isFinite(forcedSpinTo)) {
         rotations = 3 * count + forcedSpinTo - startingIndex
       }
 
-      setTimeout(() => {
-        resolve({ [position]: (startingIndex + rotations) % count })
-      }, animationTime * 1000 + 500)
+      document.querySelector(`.roller.${position}`).addEventListener(
+        'animationend',
+        () => {
+          resolve({ [position]: (startingIndex + rotations) % count })
+        },
+        { once: true }
+      )
 
       ReactDOM.render(
         <Animation
           startingIndex={startingIndex}
           position={position}
-          animationTime={animationTime}
           rotations={rotations}
           angle={this.polygon.angle}
-          offset={5}
         />,
         document.querySelector(`.styles-roller-${position}`)
       )

client/components/Slot.jsx → client/components/Slot.js

@@ -1,7 +1,6 @@
 import React from 'react'
 
 class Slot extends React.Component {
-
   _getStyles() {
     const { polygon, number } = this.props
     const { translateZ, translateY, rotateX } = polygon.valuesFor(number)
@@ -17,8 +16,8 @@ class Slot extends React.Component {
 
   render() {
     return (
-      <div style={this._getStyles()} className='slot'>
-        <img src={ this._getIcon() } />
+      <div style={this._getStyles()} className="slot">
+        <img src={this._getIcon()} />
       </div>
     )
   }

client/containers/AdminPanel/LastUser.js

@@ -0,0 +1,13 @@
+import React from 'react'
+
+const LastUser =  ({user})  => {
+  return (
+    <div className="last-user">
+      <p>
+        Last user: {user}
+      </p>
+    </div>
+  )
+}
+
+export default LastUser

client/containers/AdminPanel/Panel.js

@@ -0,0 +1,60 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+import LastUser from './LastUser'
+
+class Panel extends Component {
+  constructor(props) {
+    super(props)
+    this.socket = props.socket
+    this.state = { lastUser: '' }
+  }
+
+  componentDidMount() {
+    this.socket.emit('GET_LAST_USER', user => {
+      console.log('user: ', user)
+      this.setState({ lastUser: user })
+    })
+  }
+
+  render() {
+    return (
+      <div id="panel">
+        <div className="sidebar">
+          <button
+            className="btn"
+            onClick={() => {
+              this.socket.emit('TEST', 'win')
+            }}
+          >
+            Test win
+          </button>
+          <button
+            className="btn"
+            onClick={() => {
+              this.socket.emit('TEST', 'win7')
+            }}
+          >
+            Test 7 win
+          </button>
+          <button
+            className="btn"
+            onClick={() => {
+              this.socket.emit('TEST', 'servo')
+            }}
+          >
+            Test servo
+          </button>
+        </div>
+        <Link to="/" className="btn btn-exit">
+          Exit
+        </Link>
+        <Link to="/adminPanel/stats" className="btn btn-stats">
+          Stats
+        </Link>
+        <LastUser user={this.state.lastUser} />
+      </div>
+    )
+  }
+}
+
+export default Panel

client/containers/AdminPanel/Stats/UsersTable.js

@@ -0,0 +1,30 @@
+import React from 'react'
+
+const UsersTable = ({ users }) => {
+  return (
+    <div className="users-table">
+      <table>
+        <thead>
+          <tr>
+            <th>User</th>
+            <th>777</th>
+            <th>Win</th>
+            <th>Rolls</th>
+          </tr>
+        </thead>
+        <tbody>
+          {users.map(user => (
+            <tr key={user.id}>
+              <td>{user.userName}</td>
+              <td>{user.wins7}</td>
+              <td>{user.wins}</td>
+              <td>{user.rolls}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+export default UsersTable

client/containers/AdminPanel/Stats/index.js

@@ -0,0 +1,65 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+import UsersTable from './UsersTable'
+
+const Stats = props => {
+  const users = [
+    {
+      id: 1,
+      userName: 'TC',
+      wins7: 0,
+      wins: 3,
+      rolls: 75
+    },
+    {
+      id: 2,
+      userName: 'TC',
+      wins7: 15,
+      wins: 75,
+      rolls: 7500
+    },
+    {
+      id: 3,
+      userName: 'TC',
+      wins7: 0,
+      wins: 0,
+      rolls: 13
+    },
+    {
+      id: 4,
+      userName: 'TC',
+      wins7: 1,
+      wins: 0,
+      rolls: 1
+    },
+    {
+      id: 5,
+      userName: 'TC',
+      wins7: 15,
+      wins: 122,
+      rolls: 5741
+    },
+    {
+      id: 6,
+      userName: 'TC',
+      wins7: 0,
+      wins: 0,
+      rolls: 124
+    }
+  ]
+
+  const rollsCount = users.reduce((sum, { rolls }) => sum + rolls, 0)
+
+  return (
+    <div id="stats">
+      <h1 className="rolls-count">Rolls: {rollsCount}</h1>
+      <h1 className="users-header">Users:</h1>
+      <UsersTable users={users} />
+      <Link to="/adminpanel" className="btn btn-back">
+        Back
+      </Link>
+    </div>
+  )
+}
+
+export default Stats