added excel reader.

package.json

@@ -4,7 +4,8 @@
   "private": true,
   "dependencies": {
     "react": "15.5.4",
-    "react-dom": "15.5.4"
+    "react-dom": "15.5.4",
+    "xlsx": "0.10.4"
   },
   "devDependencies": {
     "react-scripts": "1.0.7"
@@ -15,4 +16,4 @@
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }
-}
+}

src/App.js

@@ -1,21 +1,47 @@
-import React, { Component } from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React from 'react'
+import XLSX from 'xlsx'
+import PlayerList from './player/player-list'
+import MatchList from './match/match-list'
 
-class App extends Component {
-  render() {
+class App extends React.Component {
+  constructor () {
+    super()
+    this.state = { players: [], matches: [] }
+    this.handleChange = this.handleChange.bind(this)
+  }
+
+  handleChange (event) {
+    const f = event.target.files[0]
+    console.log(f)
+    const reader = new FileReader()
+    reader.onload = (e) => {
+      const data = e.target.result
+      const workbook = XLSX.read(data, {type: 'binary'})
+      const jsonWB = XLSX.utils.sheet_to_json(workbook.Sheets.Players, {header: 1})
+      console.log(jsonWB)
+      this.setState({ players: jsonWB.slice(4, jsonWB.length) })
+      console.log(this.state)
+    }
+    reader.readAsBinaryString(f)
+  }
+
+  render () {
     return (
-      <div className="App">
-        <div className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <h2>Welcome to React</h2>
-        </div>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
+      <div className='App'>
+        <form>
+          <label for='playerList'>Swisstennis playerList.xls</label>
+          <input type='file' id='playerList' accept='.xls' placeholder='playerList File' onChange={this.handleChange} />
+          <label for='Calendar'>Swisstennis Calendar.xls</label>
+          <input type='file' id='Calendar' accept='.xls' placeholder='Calendar File' onChange={this.handleChange} />
+          <label for='Date'>Datum</label>
+          <input type='date' />
+          <button>Excel-Files generieren.</button>
+        </form>
+        <PlayerList players={this.state.players} />
+        <MatchList matches={this.state.matches} />
       </div>
-    );
+    )
   }
 }
 
-export default App;
+export default App

src/index.js

@@ -1,8 +1,5 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
-import registerServiceWorker from './registerServiceWorker';
-import './index.css';
+import React from 'react'
+import { render } from 'react-dom'
+import App from './App'
 
-ReactDOM.render(<App />, document.getElementById('root'));
-registerServiceWorker();
+render(<App />, document.getElementById('root'))

src/match/match-list.js

@@ -0,0 +1,13 @@
+import React from 'react'
+
+class MatchList extends React.Component {
+  render () {
+    return (
+      <div>
+        <p>This is the match list</p>
+      </div>
+    )
+  }
+}
+
+export default MatchList

src/player/player-list.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import Player from './player'
+
+class PlayerList extends React.Component {
+  render () {
+    return (
+      <div>
+        <h2>Statistik</h2>
+        <table>
+          <tbody>
+            <tr><th>Spieler</th><td>{this.props.players.length}</td></tr>
+            <tr><th>Kategorien</th><td>{this.props.players.reduce(function (acc, val) {
+              console.log(acc, val)
+              acc.push(val[0])
+            }, [])}</td></tr>
+          </tbody>
+        </table>
+        <h2>Spielerliste</h2>
+        {this.props.players.map((player, key) => (
+          <Player key={key} details={player} />
+          ))}
+      </div>
+    )
+  }
+}
+
+export default PlayerList

src/player/player.js

@@ -0,0 +1,13 @@
+import React from 'react'
+
+class Player extends React.Component {
+  render () {
+    return (
+      <li>
+        <i>{this.props.details[0]}</i> <b>{this.props.details[5]}</b> {this.props.details[6]}
+      </li>
+    )
+  }
+}
+
+export default Player