changed player generation.

src/App.js

@@ -2,6 +2,7 @@ import React from 'react'
 import XLSX from 'xlsx'
 import PlayerList from './player/player-list'
 import MatchList from './match/match-list'
+import Player from './player/player.js'
 
 class App extends React.Component {
   constructor () {
@@ -11,6 +12,7 @@ class App extends React.Component {
   }
 
   handleChange (event) {
+    console.log(event.target)
     const f = event.target.files[0]
     console.log(f)
     const reader = new FileReader()
@@ -19,7 +21,13 @@ class App extends React.Component {
       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) })
+      if (jsonWB[3][0] != 'Konkurrenz' & jsonWB[3][11] != 'bezahlt') {
+        throw Error('Wrong file.')
+      }
+      const players = jsonWB.slice(4, jsonWB.length) // .map((playerData) => Player(playerData))
+      console.log(players)
+      this.setState({ players })
+      console.log('state')
       console.log(this.state)
     }
     reader.readAsBinaryString(f)
@@ -37,7 +45,7 @@ class App extends React.Component {
           <input type='date' />
           <button>Excel-Files generieren.</button>
         </form>
-        <PlayerList players={this.state.players} />
+        {/* <PlayerList players={this.state.players} /> */}
         <MatchList matches={this.state.matches} />
       </div>
     )

src/player/player-list.js

@@ -3,22 +3,36 @@ import Player from './player'
 
 class PlayerList extends React.Component {
   render () {
+    const stats = {}
+
+    stats.categories = []
+    this.props.players.forEach((player, key) => {
+      if (!stats.categories.includes(player[0])) {
+        stats.categories.push(player[0])
+      }
+    })
+
     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>
+            <tr><th>Konkurrenzen</th><td>{stats.categories.length}</td></tr>
           </tbody>
         </table>
+        <h2>Konkurrenzen</h2>
+        <ul>
+          {stats.categories.map((category, key) => (
+            <li key={key}>{category}</li>
+          ))}
+        </ul>
         <h2>Spielerliste</h2>
-        {this.props.players.map((player, key) => (
-          <Player key={key} details={player} />
+        <ul>
+          {this.props.players.map((player, key) => (
+            <Player key={key} details={player} />
           ))}
+        </ul>
       </div>
     )
   }

src/player/player.js

@@ -1,10 +1,34 @@
 import React from 'react'
 
 class Player extends React.Component {
+  constructor (dataList) {
+    super()
+
+    if (dataList.length !== 32) {
+      throw Error('Wrong number of columns. Have you loaded the right file?')
+    }
+    this.__dataList__ = dataList
+
+    // Give dataList items meaningful names
+    this.Konkurrenz = dataList[0]
+    this.Lizenz = dataList[2]
+    this.Name = dataList[5]
+    this.Vorname = dataList[6]
+    this.Geburtsdatum = dataList[7]
+    this.Klassierung = dataList[17]
+    this.LizenzDP = dataList[23]
+    this.NameDP = dataList[24]
+    this.VornameDP = dataList[25]
+    this.GeburtsdatumDP = dataList[26]
+    this.KlassierungDP = dataList[27]
+    this.Bestaetigt = dataList[29]
+    this.Bezahlt = dataList[31]
+  }
+
   render () {
     return (
       <li>
-        <i>{this.props.details[0]}</i> <b>{this.props.details[5]}</b> {this.props.details[6]}
+        <i>{this.Konkurrenz}</i> <b>{this.Name}</b> {this.Vorname}
       </li>
     )
   }