worked on new layout

src/Main.js

@@ -371,12 +371,6 @@ class Main extends React.Component {
   }
 
   render () {
-    const PlayerTable = playerList.components.PlayerTable
-    const MatchTable = matchList.components.MatchTable
-    const places = this.props.matchList.places || []
-    const dates = this.props.matchList.dates || {}
-    const matchCategories = this.props.matchList.categories || []
-    const playerCategories = this.props.playerList.categories || []
     const AppLayout = layout.components.AppLayout
 
     return (
@@ -386,55 +380,10 @@ class Main extends React.Component {
           layoutActions={this.props.layoutActions}
           state={this.props}
           components={{
-            PlayerTable: playerList.components.PlayerTable,
+            PlayerList: playerList.components.PlayerList,
             MatchTable: matchList.components.MatchTable
           }}
         />
-        <form>
-          <label htmlFor='PlayerList'>Swisstennis PlayerList.xls</label>
-          <input type='file' id='PlayerList' ref={(input) => { this.playerList = input }} accept='.xls' placeholder='PlayerList File' onChange={this.handlePlayerList} />
-          <label htmlFor='Calendar'>Swisstennis Calendar.xls</label>
-          <input type='file' id='Calendar' ref={(input) => { this.calendar = input }} accept='.xls' placeholder='Calendar File' onChange={this.handleCalendar} />
-          <label htmlFor='Date'>Datum</label>
-          <select id='Date' ref={(input) => { this.matchDate = input }} onChange={this.filterMatches}>
-            <option>{FILTER_OFF}</option>
-            {Object.keys(dates).map((key) => (
-              <option key={key} value={dates[key]}>{key}</option>
-            ))}
-          </select>
-          <label htmlFor='Place'>Ort</label>
-          <select id='Place' ref={(input) => { this.matchPlace = input }} onChange={this.filterMatches}>
-            <option>{FILTER_OFF}</option>
-            {places.map((place, key) => (
-              <option key={key}>{place}</option>
-            ))}
-          </select>
-          <label htmlFor='MatchCategory'>Match Konkurrenz</label>
-          <select id='MatchCategory' ref={(input) => { this.matchCategory = input }} onChange={this.filterMatches}>
-            <option>{FILTER_OFF}</option>
-            {matchCategories.map((category, key) => (
-              <option key={key}>{category}</option>
-            ))}
-          </select>
-          <label htmlFor='Junior'>Junior</label>
-          <input id='Junior' ref={(input) => { this.playerJunior = input }} type='checkbox' onChange={this.filterPlayers} />
-          <label htmlFor='Paid'>Bezahlt</label>
-          <input id='Paid' ref={(input) => { this.playerPaid = input }} type='checkbox' onChange={this.filterPlayers} />
-          <label htmlFor='PlayerCategory'>Spieler Konkurrenz</label>
-          <select id='PlayerCategory' ref={(input) => { this.playerCategory = input }} onChange={this.filterPlayers}>
-            <option>{FILTER_OFF}</option>
-            {playerCategories.map((category, key) => (
-              <option key={key}>{category}</option>
-            ))}
-          </select>
-          <button onClick={this.generateSchedule} disabled={!this.props.matchList.filteredMatches.length}>Spielliste generieren</button>
-          <button onClick={this.generatePayTable} disabled={(!this.props.matchList.filteredMatches.length | !this.props.playerList.filteredPlayers.length)}>Zahlliste generieren</button>
-          <button onClick={this.generatePhoneList} disabled={!this.props.playerList.allPlayers.length}>Telefonliste generieren</button>
-        </form>
-        <MatchTable match={this.props.matchList} />
-        <PhoneList filtered={this.props.matchList.filteredMatches} players={this.props.playerList.allPlayers} />
-        <EmailList filtered={this.props.matchList.filteredMatches} players={this.props.playerList.allPlayers} />
-        <PlayerTable player={this.props.playerList} />
       </div>
     )
   }

src/calendar/index.js

@@ -1,4 +1,4 @@
-import { actions, reducer, state } from './state'
+import { actions, reducer, state, saga } from './state'
 import components from './components'
 import { normalize } from '../helpers.js'
 
@@ -28,4 +28,4 @@ class MatchClass {
   }
 }
 
-export default { MatchClass, actions, components, filters, selectors, reducer, state }
+export default { MatchClass, actions, components, filters, selectors, reducer, state, saga }

src/index.js

@@ -6,6 +6,7 @@ import ReactDOM from 'react-dom'
 import { createStore, applyMiddleware, combineReducers, bindActionCreators, compose } from 'redux'
 import { Provider, connect } from 'react-redux'
 import createSagaMiddleware from 'redux-saga'
+import { all } from 'redux-saga/effects'
 
 /** react-router is not used in this project.
 import { browserHistory, Router, Route, IndexRoute } from 'react-router'
@@ -40,23 +41,29 @@ const defaultState = {
 }
 console.log('Default state:', defaultState)
 
+/** The root saga, calling all other sagas */
+function * rootSaga () {
+  console.log('rootSaga called')
+  yield all([
+    playerList.saga(),
+    matchList.saga(),
+    layout.saga()
+  ])
+}
+
 /** Create the saga middleware */
 const sagaMiddleware = createSagaMiddleware()
 
 /** The enhancer allows to use Redux development tools in Chrome */
 const enhancers = compose(
-  window.devToolsExtension ? window.devToolsExtension() : f => f,
-  applyMiddleware(sagaMiddleware)
+  applyMiddleware(sagaMiddleware),
+  window.devToolsExtension ? window.devToolsExtension() : f => f
 )
 console.log('Enhancers:', enhancers)
 
 /** Build the Redux store from the rootReducer, the defualtState and the enhancers. */
 const store = createStore(rootReducer, defaultState, enhancers)
-sagaMiddleware.run(function * () {
-  yield playerList.saga()
-  yield matchList.saga()
-  yield layout.saga()
-})
+sagaMiddleware.run(rootSaga)
 console.log('Store:', store)
 /** react-route is not used in this project.
 const history = syncHistoryWithStore(browserHistory, store)

src/layout/components/AppLayout.js

@@ -7,13 +7,13 @@ class AppLayout extends React.Component {
     const { activeTab } = this.props.layout
     const { changeTab } = this.props.layoutActions
     const { state } = this.props
-    const { PlayerTable, MatchTable } = this.props.components
+    const { PlayerList, MatchTable } = this.props.components
 
     return (
       <div>
         <Tabs activeKey={activeTab} onSelect={changeTab} id='layout-tabs'>
-          <Tab eventKey={1} title='PlayerList'><PlayerTable state={state.playerList} /></Tab>
-          <Tab eventKey={2} title='Calendar'><MatchTable state={state.matchList} /></Tab>
+          <Tab eventKey={1} title='PlayerList'><PlayerList state={state.playerList} actions={state.playerListActions} /></Tab>
+          <Tab eventKey={2} title='Calendar'><MatchTable state={state.matchList} actions={state.matchListActions} /></Tab>
           <Tab eventKey={3} title='Spielplan' />
           <Tab eventKey={4} title='Zahlliste' />
         </Tabs>

src/layout/index.js

@@ -1,4 +1,4 @@
-import { actions, reducer, state } from './state'
+import { actions, reducer, state, saga } from './state'
 import components from './components'
 
 const filters = {
@@ -7,4 +7,4 @@ const filters = {
 
 const selectors = {}
 
-export default { actions, components, filters, selectors, reducer, state }
+export default { actions, components, filters, selectors, reducer, state, saga }

src/matchList/index.js

@@ -1,4 +1,4 @@
-import { actions, reducer, state } from './state'
+import { actions, reducer, state, saga } from './state'
 import components from './components'
 
 const filters = {
@@ -7,4 +7,4 @@ const filters = {
 
 const selectors = {}
 
-export default { actions, components, filters, selectors, reducer, state }
+export default { actions, components, filters, selectors, reducer, state, saga }

src/playerList/components/PlayerFilter.js

@@ -1,5 +1,15 @@
 import React from 'react'
-import { FieldGroup } from 'react-bootstrap'
+import { FormGroup, ControlLabel, FormControl, HelpBlock } from 'react-bootstrap'
+
+function FieldGroup ({ id, label, help, ...props }) {
+  return (
+    <FormGroup controlId={id}>
+      <ControlLabel>{label}</ControlLabel>
+      <FormControl {...props} />
+      {help && <HelpBlock>{help}</HelpBlock>}
+    </FormGroup>
+  )
+}
 
 class PlayerFilter extends React.Component {
   render () {

src/playerList/components/PlayerForm.js

@@ -1,9 +1,30 @@
 import React from 'react'
-import { FieldGroup, Panel } from 'react-bootstrap'
+import { Panel, FormGroup, ControlLabel, FormControl, HelpBlock } from 'react-bootstrap'
+
+function FieldGroup ({ id, label, help, ...props }) {
+  return (
+    <FormGroup controlId={id}>
+      <ControlLabel>{label}</ControlLabel>
+      <FormControl {...props} />
+      {help && <HelpBlock>{help}</HelpBlock>}
+    </FormGroup>
+  )
+}
 
 class PlayerForm extends React.Component {
+  constructor () {
+    super()
+    this.handleFileUpload = this.handleFileUpload.bind(this)
+  }
+
+  handleFileUpload () {
+    const file = this.playerListFile
+    const { fileUploadStart } = this.props.actions
+    fileUploadStart(file)
+  }
+
   render () {
-    const fileUpload = this.props.fileUpload
+    const { fileUpload } = this.props.state
 
     return (
       <div>
@@ -14,8 +35,10 @@ class PlayerForm extends React.Component {
           <FieldGroup
             id='playerListFile'
             type='file'
-            label='playerList.xls File'
+            label='PlayerList.xls File'
             help='Die Datei wird von der Swisstennis Turniersoftware generiert.'
+            ref={input => { this.playerListFile = input }}
+            onChange={this.handleFileUpload}
           />
         </form>
       </div>

src/playerList/components/PlayerList.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import PlayerForm from './PlayerForm'
+import PlayerTable from './PlayerTable'
+import PlayerFilter from './PlayerFilter'
+
+class PlayerList extends React.Component {
+  render () {
+    const { state, actions } = this.props
+    return (
+      <div>
+        <h1>Spielerliste</h1>
+        <PlayerForm state={state} actions={actions} />
+        <PlayerFilter state={state} actions={actions} />
+        <PlayerTable state={state} actions={actions} />
+      </div>
+    )
+  }
+}
+
+export default PlayerList

src/playerList/components/index.js

@@ -1,3 +1,6 @@
+import PlayerList from './PlayerList'
+import PlayerForm from './PlayerForm'
 import PlayerTable from './PlayerTable'
+import PlayerFilter from './PlayerFilter'
 
-export default { PlayerTable }
+export default { PlayerList, PlayerForm, PlayerTable, PlayerFilter }

src/playerList/functions.js

@@ -1,3 +1,11 @@
+import Excel from '../excel'         // Helper files to create Excel files
+import Player from '../classes/player'
+
+function handlePlayerList (event) {
+  const file = this.playerList.files[0]
+  Excel.readWorkbook(file, this.generatePlayerList)
+}
+
 export function generatePlayerList (worksheet) {
   console.log('About to read the player list.')
     /* const worksheets = { ...this.state.worksheets }

src/playerList/index.js

@@ -1,4 +1,4 @@
-import { actions, reducer, state } from './state'
+import { actions, reducer, state, saga } from './state'
 import components from './components'
 
 const filters = {
@@ -7,4 +7,4 @@ const filters = {
 
 const selectors = {}
 
-export default { actions, components, filters, selectors, reducer, state }
+export default { actions, components, filters, selectors, reducer, state, saga }

src/playerList/state.js

@@ -1,5 +1,6 @@
 /** @module player/state */
-import { call, put, takeEvery, takeLatest } from 'redux-saga/effects'
+import { put, takeEvery } from 'redux-saga/effects'
+import { generatePlayerList } from './functions'
 
 /**
  * state.js
@@ -15,9 +16,10 @@ export const actions = {
       players
     }
   },
-  fileUploadStart: () => {
+  fileUploadStart: event => {
     return {
-      type: 'PLAYER_FILE_UPLOAD_START'
+      type: 'PLAYER_FILE_UPLOAD_START',
+      event
     }
   },
   fileUploadSuccess: () => {
@@ -59,7 +61,10 @@ export function reducer (state = [], action) {
 }
 
 function * uploadFile (action) {
+  console.log('PlayerList uploadFile')
   try {
+    console.log(action.event)
+    generatePlayerList(action)
     yield put(actions.fileUploadSuccess())
   } catch (e) {
     yield put(actions.fileUploadFailure())
@@ -68,5 +73,6 @@ function * uploadFile (action) {
 
 /** sagas are asynchronous workers (JS generators) to handle the state. */
 export function * saga () {
+  console.log('Player saga started.')
   yield takeEvery('PLAYER_FILE_UPLOAD_START', uploadFile)
 }