Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-28 00:06:53 +01:00
Code Issues Projects Releases Wiki Activity

Add React + a few components

Browse Source
This commit is contained in:
Jari Bakken 2014-10-21 18:57:05 +02:00
parent 7419e06986
commit 44ed6a9162
4 changed files with 127 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
unleash-server/package.json
View File

@ -18,7 +18,7 @@
"private": true,
"scripts": {
"start": "node server.js",
"start-dev": "NODE_ENV=local supervisor --ignore ./node_modules/ 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/*",

4
unleash-server/public/css/unleash.css
View File

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

17
unleash-server/public/index.html
View File

@ -11,6 +11,10 @@
<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" />
<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>
@ -26,19 +30,10 @@
<div class="container r-mtm" style="padding-top:100px;">
<div class="page">
<div class="mod shadow">
<div class="inner">
<div class="bd">
<div class="line r-margin">
<div class="unit size1of2 t3">
</div>
</div>
</div>
</div>
</div>
<div id="content">Loading...</div>
</div>
</div>
<script src="js/unleash.js"></script>
<script type="text/jsx" src="js/unleash.js"></script>
</body>
</html>

116
unleash-server/public/js/unleash.js
View File

@ -0,0 +1,116 @@
/** @jsx React.DOM */
// FeatureList
// Feature
// - name
// - status
// - description
// - button-edit
// - button-delete
// - toggle-status
// FeatureForm
// StrategyList
// Strategy
// StrategyForm
var FeatureList = React.createClass({
getInitialState: function() {
return {
features: []
};
},
componentDidMount: function () {
reqwest("/features").then(this.setFeatures);
},
render: function () {
var featureNodes = this.state.features.map(function (feature) {
return (
<Feature feature={feature} />
);
});
return (
<div className="mod shadow">
<div className="inner">
<div className="bd">
{featureNodes}
</div>
</div>
</div>
);
},
setFeatures: function (data) {
this.setState({features: data.features});
}
});
var Feature = React.createClass({
// TODO: validate props?
handleStatusChange: function (event) {
console.log(event);
},
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.status === 'on'}
className="mll"
onChange={this.handleStatusChange}
/>
</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),
document.getElementById('content')
);