mirror of
				https://github.com/Unleash/unleash.git
				synced 2025-10-27 11:02:16 +01:00 
			
		
		
		
	Rewrite to use Bootstrap #23 and added JSXHint
This commit is contained in:
		
							parent
							
								
									ed418bc687
								
							
						
					
					
						commit
						02ee6471ee
					
				@ -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,
 | 
			
		||||
 | 
			
		||||
@ -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"
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
@ -1,4 +0,0 @@
 | 
			
		||||
/* .container { */
 | 
			
		||||
/*     padding: 0 2em; */
 | 
			
		||||
/* } */
 | 
			
		||||
 | 
			
		||||
@ -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>
 | 
			
		||||
    <!--
 | 
			
		||||
    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>
 | 
			
		||||
@ -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')
 | 
			
		||||
);
 | 
			
		||||
@ -1 +0,0 @@
 | 
			
		||||
//hello world
 | 
			
		||||
		Loading…
	
		Reference in New Issue
	
	Block a user