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:
andsandv
Ivar Conradi Østhus
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,
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
"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/*",
|
||||
"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}",
|
||||
@ -40,16 +40,16 @@
|
||||
"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",
|
||||
"jsxhint": "0.4.15",
|
||||
"mocha": "1.20.1",
|
||||
"supertest": "0.13.0",
|
||||
"supervisor": "~0.6.0",
|
||||
"xmlbuilder": "^2.4.4",
|
||||
"mockery": "~1.4.0"
|
||||
"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">
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar navbar-default navbar-static-top" role="navigation">
|
||||
<div class="container">
|
||||
<div class="nav-level1 h4">
|
||||
<a href="" class="homelink pln">
|
||||
<h1 class="caption showbydefault hide-lt900">unleash admin</h1>
|
||||
</a>
|
||||
<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>
|
||||
|
||||
<!--
|
||||
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>
|
||||
|
||||
<script type="text/jsx" src="js/unleash.js"></script>
|
||||
</body>
|
||||
<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,5 +1,8 @@
|
||||
/** @jsx React.DOM */
|
||||
/* jshint quotmark:false */
|
||||
|
||||
// FeatureListPage
|
||||
// Meny
|
||||
// FeatureList
|
||||
// Feature
|
||||
// - name
|
||||
@ -8,11 +11,75 @@
|
||||
// - button-edit
|
||||
// - button-delete
|
||||
// - toggle-status
|
||||
// FeatureForm
|
||||
//
|
||||
// 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">
|
||||
<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