Rewrite to use Bootstrap #23 and added JSXHint

.jshintrc

@@ -11,7 +11,9 @@
         "after"     : false,
         "beforeEach": false,
         "afterEach" : false,
-        "contain"   : false
+        "contain"   : false,
+        "React"     : false,
+        "reqwest"   : false
     },
 
     "bitwise"       : true,
@@ -24,7 +26,7 @@
     "immed"         : true,
     "indent"        : 4,
     "latedef"       : "nofunc",
-    "newcap"        : true,
+    "newcap"        : false,
     "noarg"         : true,
     "noempty"       : true,
     "nonbsp"        : true,

unleash-server/package.json

@@ -1,55 +1,55 @@
 {
-  "name": "unleash-server",
-  "description": "unleash your features",
-  "version": "0.0.1",
-  "keywords": [
-    "unleash",
-    "feature toggle",
-    "feature",
-    "toggle"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "ssh://git@github.com:finn-no/unleash.git"
-  },
-  "bugs": {
-    "url": "https://github.com/finn-no/unleash/issues"
-  },
-  "private": true,
-  "scripts": {
-    "start": "node server.js",
-    "start-dev": "NODE_ENV=local supervisor --ignore ./node_modules/,./public/js server.js",
-    "test": "jshint server.js lib public/scripts test && mocha test test/*",
-    "tdd": "mocha --watch test test/*",
-    "test-bamboo-ci": "mocha test test/*",
-    "db-create": "createdb unleash_${NODE_ENV:-dev}",
-    "db-drop": "dropdb unleash_${NODE_ENV:-dev}",
-    "db-migrate-up": "db-migrate --config config/database.json up",
-    "db-migrate-down": "db-migrate --config config/database.json down",
-    "db-setup": "npm run db-create; npm run db-migrate-up"
-  },
-  "dependencies": {
-    "bluebird": "2.2.2",
-    "body-parser": "1.4.3",
-    "db-migrate": "^0.7.1",
-    "errorhandler": "1.1.1",
-    "express": "4.9.8",
-    "express-validator": "2.6.0",
-    "ini": "1.3.0",
-    "log4js": "0.6.21",
-    "nconf": "0.6.9",
-    "pg": "^3.6.1",
-    "any-db": "2.1.0",
-    "any-db-pool": "2.1.0",
-    "any-db-postgres": "2.1.3"
-  },
-  "devDependencies": {
-    "chai": "1.9.1",
-    "jshint": "2.5.2",
-    "mocha": "1.20.1",
-    "supertest": "0.13.0",
-    "supervisor": "~0.6.0",
-    "xmlbuilder": "^2.4.4",
-    "mockery": "~1.4.0"
-  }
-}
+    "name": "unleash-server",
+    "description": "unleash your features",
+    "version": "0.0.1",
+    "keywords": [
+        "unleash",
+        "feature toggle",
+        "feature",
+        "toggle"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "ssh://git@github.com:finn-no/unleash.git"
+    },
+    "bugs": {
+        "url": "https://github.com/finn-no/unleash/issues"
+    },
+    "private": true,
+    "scripts": {
+        "start": "node server.js",
+        "start-dev": "NODE_ENV=local supervisor --ignore ./node_modules/,./public/js server.js",
+        "test": "jshint server.js lib test && jsxhint public/js/*.jsx && mocha test test/*",
+        "tdd": "mocha --watch test test/*",
+        "test-bamboo-ci": "mocha test test/*",
+        "db-create": "createdb unleash_${NODE_ENV:-dev}",
+        "db-drop": "dropdb unleash_${NODE_ENV:-dev}",
+        "db-migrate-up": "db-migrate --config config/database.json up",
+        "db-migrate-down": "db-migrate --config config/database.json down",
+        "db-setup": "npm run db-create; npm run db-migrate-up"
+    },
+    "dependencies": {
+        "bluebird": "2.2.2",
+        "body-parser": "1.4.3",
+        "db-migrate": "^0.7.1",
+        "errorhandler": "1.1.1",
+        "express": "4.9.8",
+        "express-validator": "2.6.0",
+        "ini": "1.3.0",
+        "log4js": "0.6.21",
+        "nconf": "0.6.9",
+        "pg": "^3.6.1",
+        "any-db": "2.1.0",
+        "any-db-postgres": "2.1.3"
+    },
+    "devDependencies": {
+        "chai": "1.9.1",
+        "jshint": "2.5.2",
+        "jsxhint": "0.4.15",
+        "mocha": "1.20.1",
+        "supertest": "0.13.0",
+        "supervisor": "~0.6.0",
+        "xmlbuilder": "^2.4.4",
+        "mockery": "1.4.0"
+    }
+}

unleash-server/public/css/unleash.css

@@ -1,4 +0,0 @@
-/* .container { */
-/*     padding: 0 2em; */
-/* } */
-

unleash-server/public/index.html

@@ -1,39 +1,69 @@
 <!DOCTYPE html>
-<html>
-  <head>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Unleash</title>
     <meta name="description" content="unleash">
 
-    <meta name="HandheldFriendly" content="True">
-    <meta name="MobileOptimized" content="320">
-    <meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1">
-
-    <title>unleash - admin</title>
-
-    <link rel="stylesheet" type="text/css" media="screen,projection,handheld,print" href="//finncdn.no/bb/css/so/5.5.18/so.css" />
-    <link rel="stylesheet" type="text/css" href="css/unleash.css" />
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
 
     <script src="//cdnjs.cloudflare.com/ajax/libs/react/0.11.2/react.min.js"></script>
     <script src="//fb.me/JSXTransformer-0.11.2.js"></script>
     <script src="//cdnjs.cloudflare.com/ajax/libs/reqwest/1.1.4/reqwest.js"></script>
-  </head>
-
-  <body>
-    <div class="topbar fixed">
-      <div class="container">
-        <div class="nav-level1 h4">
-          <a href="" class="homelink pln">
-            <h1 class="caption showbydefault hide-lt900">unleash admin</h1>
-          </a>
+</head>
+<body>
+    <nav class="navbar navbar-default navbar-static-top" role="navigation">
+        <div class="container">
+            <a class="navbar-brand" href="#">Unleash</a>
+            <ul class="nav navbar-nav">
+                <li><a href="#">New</a></li>
+            </ul>
         </div>
-      </div>
-    </div>
-
-    <div class="container r-mtm" style="padding-top:100px;">
-      <div class="page">
+    </nav>
+    <div class="container">
         <div id="content">Loading...</div>
-      </div>
     </div>
 
-    <script type="text/jsx" src="js/unleash.js"></script>
-  </body>
-</html>
+    <!--
+    This is the bootstrap form
+    <form class="form-horizontal">
+        <fieldset>
+
+
+            <legend>Add a new feature</legend>
+
+
+            <div class="control-group">
+                <label class="control-label" for="name">Name </label>
+                <div class="controls">
+                    <input id="name" name="name" type="text" placeholder="Superfeature" class="input-large" required="">
+                    <p class="help-block">Give the feature a name</p>
+                </div>
+            </div>
+
+            <div class="control-group">
+                <label class="control-label" for="description">Description</label>
+                <div class="controls">
+                    <input id="description" name="description" type="text" placeholder="It does this and that " class="input-large">
+                    <p class="help-block">Describe the feature</p>
+                </div>
+            </div>
+
+            <div class="control-group">
+                <label class="control-label" for="strategy">Strategy</label>
+                <div class="controls">
+                    <select id="strategy" name="strategy" class="input-large">
+                        <option>Default</option>
+                    </select>
+                </div>
+            </div>
+
+        </fieldset>
+    </form>
+
+-->
+    <script type="text/jsx" src="js/unleash.jsx"></script>
+</body>
+</html>

unleash-server/public/js/unleash.jsx

@@ -1,18 +1,85 @@
 /** @jsx React.DOM */
+/* jshint quotmark:false */
 
-//   FeatureList
-//     Feature
-//       - name
-//       - status
-//       - description
-//       - button-edit
-//       - button-delete
-//       - toggle-status
-//   FeatureForm
+//  FeatureListPage
+//      Meny
+//      FeatureList
+//          Feature
+//              - name
+//              - status
+//              - description
+//              - button-edit
+//              - button-delete
+//              - toggle-status
+//
+//  NewFeaturePage
+//      Meny
+//      NewFeatureForm
 
-//    StrategyList
-//      Strategy
-//    StrategyForm
+var Feature = React.createClass({
+    // TODO: validate props?
+    handleEnableChange: function(event) {
+        var feature = this.props.feature;
+        this.props.updateFeature({
+            name: feature.name,
+            field: 'enabled',
+            value: event.target.checked
+            });
+    },
+
+    render: function () {
+        return (
+            <div>
+              <div className='line'>
+                <div className='unit r-size1of3'>
+                  <div className='mod'>
+                    <div className='inner'>
+                       <div className='bd'>
+                         <p>{this.props.feature.name}</p>
+                         <p className='neutral'>{this.props.feature.description}</p>
+
+                       </div>
+                    </div>
+                  </div>
+                </div>
+
+                <div className='unit r-size1of3'>
+                  <div className='mod'>
+                    <div className='inner'>
+                       <div className='bd'>
+                         <p>
+                           <label>
+                              {this.props.feature.status}
+                              <input
+                                 type='checkbox'
+                                 checked={this.props.feature.enabled}
+                                 className='mll'
+                                 onChange={this.handleEnableChange}
+                              />
+                           </label>
+                         </p>
+                       </div>
+                    </div>
+                  </div>
+                </div>
+
+                <div className='unit r-size1of3'>
+                  <div className='mod'>
+                    <div className='inner'>
+                       <div className='bd'>
+                         <button className='pam mtl mll'>Edit</button>
+                         <button className='pam mtl mll'>Delete</button>
+                       </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <hr />
+            </div>
+        );
+    }
+});
 
 var FeatureList = React.createClass({
     getInitialState: function() {
@@ -46,7 +113,7 @@ var FeatureList = React.createClass({
         }).then(function() {
             this.setState({features: newFeatures});
         }.bind(this), function() {
-            alert("update failed");
+            window.alert('update failed');
         }.bind(this));
     },
 
@@ -58,90 +125,19 @@ var FeatureList = React.createClass({
         }.bind(this));
 
         return (
-            <div className="mod shadow">
-              <div className="inner">
-                <div className="bd">
-                  {featureNodes}
+            <div className='panel panel-primary'>
+                <div className='panel-heading'>
+                    <h3 className='panel-title'>Features</h3>
+                </div>
+                <div className='panel-body'>
+                    {featureNodes}
                 </div>
-              </div>
             </div>
         );
     }
 });
 
-var Feature = React.createClass({
-    // TODO: validate props?
-/*
-    handleStatusChange: function (feature, event) {
-        console.log(feature);
-        console.log(event);
-    },
-*/
-    handleEnableChange: function(event) {
-        var feature = this.props.feature;
-        this.props.updateFeature({
-            name: feature.name,
-            field: "enabled",
-            value: event.target.checked
-            });
-    },
-
-    render: function () {
-        return (
-            <div>
-              <div className="line">
-                <div className="unit r-size1of3">
-                  <div className="mod">
-                    <div className="inner">
-                       <div className="bd">
-                         <p>{this.props.feature.name}</p>
-                         <p className="neutral">{this.props.feature.description}</p>
-
-                       </div>
-                    </div>
-                  </div>
-                </div>
-
-                <div className="unit r-size1of3">
-                  <div className="mod">
-                    <div className="inner">
-                       <div className="bd">
-                         <p>
-                           <label>
-                              {this.props.feature.status}
-                              <input
-                                 type="checkbox"
-                                 checked={this.props.feature.enabled}
-                                 className="mll"
-                                 onChange={this.handleEnableChange}
-                              />
-                           </label>
-                         </p>
-                       </div>
-                    </div>
-                  </div>
-                </div>
-
-                <div className="unit r-size1of3">
-                  <div className="mod">
-                    <div className="inner">
-                       <div className="bd">
-                         <button className="pam mtl mll">Edit</button>
-                         <button className="pam mtl mll">Delete</button>
-                       </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <hr />
-            </div>
-        );
-    }
-});
-
-
 React.renderComponent(
-    FeatureList(null),
+    new FeatureList(null),
     document.getElementById('content')
 );

unleash-server/public/scripts/hello.js

@@ -1 +0,0 @@
-//hello world