From 7f52e0caecdcb46d6037716d1aa01d66f2dbc93e Mon Sep 17 00:00:00 2001
From: Carmine D'Amico <carmine@cdamico.de>
Date: Wed, 25 May 2016 20:31:57 +0200
Subject: [PATCH 1/6] changed the way how to add a new team

---
 src/browser/settings.jsx | 40 +++++++++++++++++++++++++++++++++++++---
 1 file changed, 37 insertions(+), 3 deletions(-)

diff --git a/src/browser/settings.jsx b/src/browser/settings.jsx
index 74442c1d..d509ab3d 100644
--- a/src/browser/settings.jsx
+++ b/src/browser/settings.jsx
@@ -28,6 +28,11 @@ var SettingsPage = React.createClass({
     } catch (e) {
       config = settings.loadDefault();
     }
+
+    this.setState({
+      showAddTeamForm: false
+    });
+
     return config;
   },
   handleTeamsChange: function(teams) {
@@ -75,12 +80,28 @@ var SettingsPage = React.createClass({
       trayIconTheme: this.refs.trayIconTheme.getValue()
     });
   },
+  handleShowTeamForm: function() {
+    if (!this.state.showAddTeamForm) {
+      this.setState({
+        showAddTeamForm: true
+      });
+    } else {
+      this.setState({
+        showAddTeamForm: false
+      });
+    }
+  },
   render: function() {
     var teams_row = (
     <Row>
       <Col md={ 12 }>
-      <h2>Teams</h2>
-      <TeamList teams={ this.state.teams } onTeamsChange={ this.handleTeamsChange } />
+      <h2>
+        Teams
+        <Button className="pull-right" bsSize="small" onClick={ this.handleShowTeamForm }>
+          <Glyphicon glyph="plus" />
+        </Button>
+      </h2>
+      <TeamList teams={ this.state.teams } showAddTeamForm={ this.state.showAddTeamForm } onTeamsChange={ this.handleTeamsChange } />
       </Col>
     </Row>
     );
@@ -128,6 +149,11 @@ var SettingsPage = React.createClass({
 });
 
 var TeamList = React.createClass({
+  getInitialState: function() {
+    return {
+      showTeamListItemNew: false
+    };
+  },
   handleTeamRemove: function(index) {
     console.log(index);
     var teams = this.props.teams;
@@ -149,10 +175,18 @@ var TeamList = React.createClass({
         <TeamListItem index={ i } key={ "teamListItem" + i } name={ team.name } url={ team.url } onTeamRemove={ handleTeamRemove } />
         );
     });
+
+    var addTeamForm;
+    if (this.props.showAddTeamForm) {
+      addTeamForm = <TeamListItemNew onTeamAdd={ this.handleTeamAdd } />;
+    } else {
+      addTeamForm = '';
+    }
+
     return (
       <ListGroup class="teamList">
         { teamNodes }
-        <TeamListItemNew onTeamAdd={ this.handleTeamAdd } />
+        { addTeamForm }
       </ListGroup>
       );
   }

From 510f49a99b6840f8ffa0dd4dc499d6c85c99d621 Mon Sep 17 00:00:00 2001
From: Carmine D'Amico <carmine@cdamico.de>
Date: Wed, 25 May 2016 22:18:48 +0200
Subject: [PATCH 2/6] editing teams is possible now

---
 src/browser/settings.jsx | 83 ++++++++++++++++++++++++++++++++++------
 1 file changed, 71 insertions(+), 12 deletions(-)

diff --git a/src/browser/settings.jsx b/src/browser/settings.jsx
index d509ab3d..3c4595f3 100644
--- a/src/browser/settings.jsx
+++ b/src/browser/settings.jsx
@@ -39,8 +39,10 @@ var SettingsPage = React.createClass({
     this.setState({
       teams: teams
     });
+
+    this.handleSave(false);
   },
-  handleSave: function() {
+  handleSave: function(backToIndex) {
     var config = {
       teams: this.state.teams,
       hideMenuBar: this.state.hideMenuBar,
@@ -55,7 +57,10 @@ var SettingsPage = React.createClass({
       currentWindow.setAutoHideMenuBar(config.hideMenuBar);
       currentWindow.setMenuBarVisibility(!config.hideMenuBar);
     }
-    backToIndex();
+
+    if (typeof backToIndex == 'undefined' || backToIndex) {
+      backToIndex();
+    }
   },
   handleCancel: function() {
     backToIndex();
@@ -151,7 +156,12 @@ var SettingsPage = React.createClass({
 var TeamList = React.createClass({
   getInitialState: function() {
     return {
-      showTeamListItemNew: false
+      showTeamListItemNew: false,
+      team: {
+        url: '',
+        name: '',
+        index: false
+      }
     };
   },
   handleTeamRemove: function(index) {
@@ -162,23 +172,50 @@ var TeamList = React.createClass({
   },
   handleTeamAdd: function(team) {
     var teams = this.props.teams;
-    teams.push(team);
+
+    // check if team already exists and then change existing team or add new one
+    if (!team.index && teams[team.index]) {
+      teams[team.index].name = team.name;
+      teams[team.index].url = team.url;
+    } else {
+      teams.push(team);
+    }
+
+    this.setState({
+      showTeamListItemNew: false
+    });
+
     this.props.onTeamsChange(teams);
   },
+  handleTeamEditing: function(teamName, teamUrl, teamIndex) {
+    this.setState({
+      showTeamListItemNew: true,
+      team: {
+        url: teamUrl,
+        name: teamName,
+        index: teamIndex
+      }
+    })
+  },
   render: function() {
     var thisObj = this;
     var teamNodes = this.props.teams.map(function(team, i) {
       var handleTeamRemove = function() {
         thisObj.handleTeamRemove(i);
       };
+
+      var handleTeamEditing = function() {
+        thisObj.handleTeamEditing(team.name, team.url, i);
+      };
+
       return (
-        <TeamListItem index={ i } key={ "teamListItem" + i } name={ team.name } url={ team.url } onTeamRemove={ handleTeamRemove } />
+        <TeamListItem index={ i } key={ "teamListItem" + i } name={ team.name } url={ team.url } onTeamRemove={ handleTeamRemove } onTeamEditing={ handleTeamEditing } />
         );
     });
 
     var addTeamForm;
-    if (this.props.showAddTeamForm) {
-      addTeamForm = <TeamListItemNew onTeamAdd={ this.handleTeamAdd } />;
+    if (this.props.showAddTeamForm || this.state.showTeamListItemNew) {
+      addTeamForm = <TeamListItemNew onTeamAdd={ this.handleTeamAdd } teamIndex={ this.state.team.index } teamName={ this.state.team.name } teamUrl={ this.state.team.url } />;
     } else {
       addTeamForm = '';
     }
@@ -196,6 +233,9 @@ var TeamListItem = React.createClass({
   handleTeamRemove: function() {
     this.props.onTeamRemove();
   },
+  handleTeamEditing: function() {
+    this.props.onTeamEditing();
+  },
   render: function() {
     var style = {
       left: {
@@ -211,6 +251,10 @@ var TeamListItem = React.createClass({
           </p>
         </div>
         <div className="pull-right">
+          <Button bsSize="xsmall" onClick={ this.handleTeamEditing }>
+            <Glyphicon glyph="pencil" />
+          </Button>
+          { ' ' }
           <Button bsSize="xsmall" onClick={ this.handleTeamRemove }>
             <Glyphicon glyph="remove" />
           </Button>
@@ -223,8 +267,9 @@ var TeamListItem = React.createClass({
 var TeamListItemNew = React.createClass({
   getInitialState: function() {
     return {
-      name: '',
-      url: ''
+      name: this.props.teamName,
+      url: this.props.teamUrl,
+      index: this.props.teamIndex
     };
   },
   handleSubmit: function(e) {
@@ -232,7 +277,8 @@ var TeamListItemNew = React.createClass({
     e.preventDefault();
     this.props.onTeamAdd({
       name: this.state.name.trim(),
-      url: this.state.url.trim()
+      url: this.state.url.trim(),
+      index: this.state.index,
     });
     this.setState(this.getInitialState());
   },
@@ -249,9 +295,22 @@ var TeamListItemNew = React.createClass({
     });
   },
   shouldEnableAddButton: function() {
-    return (this.state.name.trim() !== '') && (this.state.url.trim() !== '');
+    return (this.state.name.trim() !== '' || this.props.teamName !== '') && (this.state.url.trim() !== '' || this.props.teamUrl !== '');
   },
   render: function() {
+
+    var existingTeam = false;
+    if (this.state.name !== '' && this.state.url !== '') {
+      existingTeam = true;
+    }
+
+    var btnAddText;
+    if (existingTeam) {
+      btnAddText = 'Save';
+    } else {
+      btnAddText = 'Add';
+    }
+
     return (
       <ListGroupItem>
         <form className="form-inline" onSubmit={ this.handleSubmit }>
@@ -267,7 +326,7 @@ var TeamListItemNew = React.createClass({
             <input type="url" className="form-control" id="inputTeamURL" placeholder="https://example.com/team" value={ this.state.url } onChange={ this.handleURLChange } />
           </div>
           { ' ' }
-          <Button type="submit" disabled={ !this.shouldEnableAddButton() }>Add</Button>
+          <Button type="submit" disabled={ !this.shouldEnableAddButton() }>{ btnAddText }</Button>
         </form>
       </ListGroupItem>
       );

From c0e5cbd9ef9d8a37e9b0fde67b377bc3dfa2da37 Mon Sep 17 00:00:00 2001
From: Carmine D'Amico <carmine@cdamico.de>
Date: Wed, 25 May 2016 22:28:47 +0200
Subject: [PATCH 3/6] run prettify on code

---
 src/browser/settings.jsx | 24 ++++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/browser/settings.jsx b/src/browser/settings.jsx
index 3c4595f3..928b9179 100644
--- a/src/browser/settings.jsx
+++ b/src/browser/settings.jsx
@@ -42,7 +42,7 @@ var SettingsPage = React.createClass({
 
     this.handleSave(false);
   },
-  handleSave: function(backToIndex) {
+  handleSave: function(toIndex) {
     var config = {
       teams: this.state.teams,
       hideMenuBar: this.state.hideMenuBar,
@@ -58,7 +58,7 @@ var SettingsPage = React.createClass({
       currentWindow.setMenuBarVisibility(!config.hideMenuBar);
     }
 
-    if (typeof backToIndex == 'undefined' || backToIndex) {
+    if (typeof toIndex == 'undefined' || toIndex) {
       backToIndex();
     }
   },
@@ -101,11 +101,11 @@ var SettingsPage = React.createClass({
     <Row>
       <Col md={ 12 }>
       <h2>
-        Teams
-        <Button className="pull-right" bsSize="small" onClick={ this.handleShowTeamForm }>
-          <Glyphicon glyph="plus" />
-        </Button>
-      </h2>
+                Teams
+                <Button className="pull-right" bsSize="small" onClick={ this.handleShowTeamForm }>
+                  <Glyphicon glyph="plus" />
+                </Button>
+              </h2>
       <TeamList teams={ this.state.teams } showAddTeamForm={ this.state.showAddTeamForm } onTeamsChange={ this.handleTeamsChange } />
       </Col>
     </Row>
@@ -209,7 +209,8 @@ var TeamList = React.createClass({
       };
 
       return (
-        <TeamListItem index={ i } key={ "teamListItem" + i } name={ team.name } url={ team.url } onTeamRemove={ handleTeamRemove } onTeamEditing={ handleTeamEditing } />
+        <TeamListItem index={ i } key={ "teamListItem" + i } name={ team.name } url={ team.url } onTeamRemove={ handleTeamRemove } onTeamEditing={ handleTeamEditing }
+        />
         );
     });
 
@@ -295,7 +296,8 @@ var TeamListItemNew = React.createClass({
     });
   },
   shouldEnableAddButton: function() {
-    return (this.state.name.trim() !== '' || this.props.teamName !== '') && (this.state.url.trim() !== '' || this.props.teamUrl !== '');
+    return (this.state.name.trim() !== '' || this.props.teamName !== '')
+      && (this.state.url.trim() !== '' || this.props.teamUrl !== '');
   },
   render: function() {
 
@@ -326,7 +328,9 @@ var TeamListItemNew = React.createClass({
             <input type="url" className="form-control" id="inputTeamURL" placeholder="https://example.com/team" value={ this.state.url } onChange={ this.handleURLChange } />
           </div>
           { ' ' }
-          <Button type="submit" disabled={ !this.shouldEnableAddButton() }>{ btnAddText }</Button>
+          <Button type="submit" disabled={ !this.shouldEnableAddButton() }>
+            { btnAddText }
+          </Button>
         </form>
       </ListGroupItem>
       );

From 712cff2680dda2631e6c3fc4873d8fcf5051b292 Mon Sep 17 00:00:00 2001
From: Carmine D'Amico <carmine@cdamico.de>
Date: Wed, 25 May 2016 23:19:36 +0200
Subject: [PATCH 4/6] changed jsx code to a better code style

---
 src/browser/settings.jsx | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/browser/settings.jsx b/src/browser/settings.jsx
index 928b9179..4c51fed0 100644
--- a/src/browser/settings.jsx
+++ b/src/browser/settings.jsx
@@ -97,15 +97,22 @@ var SettingsPage = React.createClass({
     }
   },
   render: function() {
+
+    var buttonStyle = {
+      marginTop: 20,
+    };
+
     var teams_row = (
     <Row>
+      <Col md={ 4 }>
+      <h2>Teams</h2>
+      </Col>
+      <Col md={ 8 }>
+      <Button className="pull-right" style={ buttonStyle } bsSize="small" onClick={ this.handleShowTeamForm }>
+        <Glyphicon glyph="plus" />
+      </Button>
+      </Col>
       <Col md={ 12 }>
-      <h2>
-                Teams
-                <Button className="pull-right" bsSize="small" onClick={ this.handleShowTeamForm }>
-                  <Glyphicon glyph="plus" />
-                </Button>
-              </h2>
       <TeamList teams={ this.state.teams } showAddTeamForm={ this.state.showAddTeamForm } onTeamsChange={ this.handleTeamsChange } />
       </Col>
     </Row>

From 186c520ab158c3f443c02811244c013a3e33cc4c Mon Sep 17 00:00:00 2001
From: Carmine D'Amico <carmine.damico@emp.de>
Date: Tue, 31 May 2016 15:27:14 +0200
Subject: [PATCH 5/6] BUGFIX: fixed a problem with state, when editing first a
 team and then add a new one

---
 src/browser/settings.jsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/browser/settings.jsx b/src/browser/settings.jsx
index 4c51fed0..b8593d27 100644
--- a/src/browser/settings.jsx
+++ b/src/browser/settings.jsx
@@ -189,7 +189,12 @@ var TeamList = React.createClass({
     }
 
     this.setState({
-      showTeamListItemNew: false
+      showTeamListItemNew: false,
+      team: {
+        url: '',
+        name: '',
+        index: false
+      }
     });
 
     this.props.onTeamsChange(teams);
@@ -288,7 +293,12 @@ var TeamListItemNew = React.createClass({
       url: this.state.url.trim(),
       index: this.state.index,
     });
-    this.setState(this.getInitialState());
+
+    this.setState({
+      name: '',
+      url: '',
+      index: ''
+    });
   },
   handleNameChange: function(e) {
     console.log('name');

From 9677607ae4014118264f2dc8373d202406fcd6bd Mon Sep 17 00:00:00 2001
From: Carmine D'Amico <carmine@cdamico.de>
Date: Fri, 3 Jun 2016 18:21:15 +0200
Subject: [PATCH 6/6] move "Add Team"-Button nearer to the "Teams" headline

---
 src/browser/settings.jsx | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/browser/settings.jsx b/src/browser/settings.jsx
index b8593d27..224d9601 100644
--- a/src/browser/settings.jsx
+++ b/src/browser/settings.jsx
@@ -99,19 +99,11 @@ var SettingsPage = React.createClass({
   render: function() {
 
     var buttonStyle = {
-      marginTop: 20,
+      marginTop: 20
     };
 
     var teams_row = (
     <Row>
-      <Col md={ 4 }>
-      <h2>Teams</h2>
-      </Col>
-      <Col md={ 8 }>
-      <Button className="pull-right" style={ buttonStyle } bsSize="small" onClick={ this.handleShowTeamForm }>
-        <Glyphicon glyph="plus" />
-      </Button>
-      </Col>
       <Col md={ 12 }>
       <TeamList teams={ this.state.teams } showAddTeamForm={ this.state.showAddTeamForm } onTeamsChange={ this.handleTeamsChange } />
       </Col>
@@ -146,6 +138,16 @@ var SettingsPage = React.createClass({
 
     return (
       <Grid className="settingsPage">
+        <Row>
+          <Col xs={ 4 } sm={ 1 } md={ 2 } lg={ 2 }>
+          <h2>Teams</h2>
+          </Col>
+          <Col xs={ 4 } sm={ 2 } md={ 1 } lg={ 1 } mdPull={ 1 }>
+          <Button className="pull-right" style={ buttonStyle } bsSize="small" onClick={ this.handleShowTeamForm }>
+            <Glyphicon glyph="plus" />
+          </Button>
+          </Col>
+        </Row>
         { teams_row }
         { options_row }
         <Row>