From cdf5bb54e8f44f1c82398d9cda4f8f8dbb36303e Mon Sep 17 00:00:00 2001
From: andsandv <anders.olsen.sandvik@finn.no>
Date: Fri, 24 Oct 2014 10:31:36 +0200
Subject: [PATCH] #13 you can now enable features

---
 unleash-server/public/js/unleash.jsx | 68 +++++++++++++++++++++-------
 1 file changed, 52 insertions(+), 16 deletions(-)

diff --git a/unleash-server/public/js/unleash.jsx b/unleash-server/public/js/unleash.jsx
index c88cd8d44e..2545049c69 100644
--- a/unleash-server/public/js/unleash.jsx
+++ b/unleash-server/public/js/unleash.jsx
@@ -19,9 +19,22 @@ var UnsavedFeature = React.createClass({
 });
 
 var SavedFeature = React.createClass({
+
+    onChange: function(event) {
+        this.props.onChange({
+            name: this.props.feature.name,
+            field: 'enabled',
+            value: event.target.checked
+        });
+    },
+
     render: function() {
         return (
-            <div>{this.props.feature.name}</div>
+            <div>
+                <span title='{this.props.feature.description}'>{this.props.feature.name}</span>
+                <span>{this.props.feature.strategy}</span>
+                <input type='checkbox' checked={this.props.feature.enabled} onChange={this.onChange} />
+            </div>
         );
     }
 });
@@ -32,16 +45,16 @@ var FeatureList = React.createClass({
 
         this.props.unsavedFeatures.forEach(function(feature) {
             featureNodes.push(<UnsavedFeature feature={feature} onSubmit={this.props.onFeatureSubmit} />);
-        });
+        }.bind(this));
 
         this.props.savedFeatures.forEach(function(feature) {
             featureNodes.push(
-                <SavedFeature 
-                  key={feature.name} 
-                  feature={feature} 
-                  onChange={this.props.onFeatureChange} />
+                <SavedFeature
+                  key={feature.name}
+                  feature={feature}
+                  onChange={this.props.onFeatureChanged} />
             );
-        });
+        }.bind(this));
 
         return (<div>{featureNodes}</div>);
     }
@@ -55,7 +68,7 @@ var Unleash = React.createClass({
 
     componentDidMount: function () {
         this.loadFeaturesFromServer();
-        setInterval(this.loadFeaturesFromServer, this.props.pollInterval);
+        // setInterval(this.loadFeaturesFromServer, this.props.pollInterval);
     },
 
     loadFeaturesFromServer: function () {
@@ -67,12 +80,28 @@ var Unleash = React.createClass({
     },
 
     handleError: function (error) {
-        // TODO: ErrorComponent
+        // TODO: ErrorComponent could use <div class="alert alert-warning" role="alert">...</div>
         window.alert(error);
     },
 
     updateFeature: function (changeRequest) {
-        console.log(changeRequest);
+        var newFeatures = this.state.savedFeatures;
+        newFeatures.forEach(function(f){
+            if(f.name === changeRequest.name) {
+                f[changeRequest.field] = changeRequest.value;
+            }
+        });
+
+        this.setState({features: newFeatures});
+
+        reqwest({
+            url: 'features/' + changeRequest.name,
+            method: 'patch',
+            type: 'json',
+            contentType: 'application/json',
+            data: JSON.stringify(changeRequest)
+        }).then(function() {
+        }, this.handleError.bind(this));
     },
 
     createFeature: function (feature) {
@@ -82,12 +111,19 @@ var Unleash = React.createClass({
     render: function() {
         return (
             <div>
-              <Menu />
-              <FeatureList
-                unsavedFeatures={this.state.unsavedFeatures}
-                savedFeatures={this.state.savedFeatures}
-                onFeatureChanged={this.updateFeature}
-                onFeatureSubmit={this.createFeature} />
+                <Menu />
+                <div className='panel panel-primary'>
+                    <div className='panel-heading'>
+                        <h3 className='panel-title'>Features</h3>
+                    </div>
+                    <div className='panel-body'>
+                        <FeatureList
+                            unsavedFeatures={this.state.unsavedFeatures}
+                            savedFeatures={this.state.savedFeatures}
+                            onFeatureChanged={this.updateFeature}
+                            onFeatureSubmit={this.createFeature} />
+                    </div>
+                </div>
             </div>
         );
     }