changed optics.

src/App.js

@@ -134,7 +134,7 @@ class App extends React.Component {
     worksheets['Calendar'] = worksheet
     this.setState({ worksheets })
 
-    if (worksheet[2].length < 8  | worksheet[2].length > 9) {
+    if (worksheet[2].length < 8 | worksheet[2].length > 9) {
       throw Error('Wrong file structure.')
     }
     const matches = worksheet.slice(2, worksheet.length).map((matchData) => new Match.MatchClass(matchData))
@@ -317,44 +317,51 @@ class App extends React.Component {
     return (
       <div className='container'>
         <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>
+          <fieldset>
+            <legend>Input Files</legend>
+            <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} />
+          </fieldset>
+          <fieldset><legend>Filter</legend>
+            <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='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='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>
+            <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.state.match.filtered.length}>Spielliste generieren</button>
-          <button onClick={this.generatePayTable} disabled={(!this.state.match.filtered.length | !this.state.player.filtered.length)}>Zahlliste generieren</button>
+            </select>
+          </fieldset>
+          <fieldset><legend>Output Files</legend>
+            <button onClick={this.generateSchedule} disabled={!this.state.match.filtered.length}>Spielliste generieren</button>
+            <button onClick={this.generatePayTable} disabled={(!this.state.match.filtered.length | !this.state.player.filtered.length)}>Zahlliste generieren</button>
+          </fieldset>
         </form>
         <PlayerList player={this.state.player} />
         <MatchList match={this.state.match} />

src/match/components/match-list.js

@@ -9,7 +9,17 @@ class MatchList extends React.Component {
     return (
       <div>
         <h2>Matches ({filtered.length}/{matches.length})</h2>
-        <table>
+        <table className='table table-bordered table-striped'>
+          <thead>
+            <tr>
+              <th>Ort</th>
+              <th>Datum</th>
+              <th>Zeit</th>
+              <th>Konkurrenz</th>
+              <th>Spieler 1</th>
+              <th>Spieler 2</th>
+            </tr>
+          </thead>
           <tbody>
             {filtered.map((match, key) =>
               <MatchDisp key={key} match={match} />

src/player/components/player-list.js

@@ -8,7 +8,7 @@ class PlayerList extends React.Component {
     return (
       <div>
         <h2>Spielerliste ({filtered.length})</h2>
-        <table>
+        <table className='table table-bordered table-striped'>
           <thead>
             <tr>
               <th><i>Konkurrenz</i></th>