localhots
/
empact
1
0
Fork 0
Code Releases Activity

Correct menu teams and info blocks everywhere

This commit is contained in:
Gregory Eremin 2015-03-10 16:58:12 +07:00
parent 5f5ee4125e
commit a794366109
2 changed files with 101 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

133
app/scripts/app.jsx
View File

@ -1,13 +1,66 @@
var Router = ReactRouter,
Link = Router.Link;
var Storage = {
set: function(category, key, value) {
window.localStorage.setItem(category +'-'+ key, JSON.stringify(value));
},
get: function(category, key) {
var val = window.localStorage.getItem(category +'-'+ key);
return val === null ? null : JSON.parse(val);
}
};
var App = React.createClass({
mixins: [Router.Navigation],
mixins: [Router.Navigation, Router.State],
orgsURL: "/api/orgs",
teamsURL: "/api/teams?org=",
getInitialState: function() {
return {
orgs: [],
org: null,
teams: [],
team: null
};
},
componentDidMount: function() {
this.loadOrgs();
this.loadTeams();
},
loadOrgs: function() {
$.get(this.orgsURL, function(res){
this.setState({orgs: res});
if (res !== null) {
for (var i = 0; i < res.length; i++) {
var org = res[i];
Storage.set('org', org.login, org);
}
}
}.bind(this));
},
loadTeams: function() {
$.get(this.teamsURL + this.getParams().org, function(res){
this.setState({teams: res})
if (res !== null) {
for (var i = 0; i < res.length; i++) {
var team = res[i];
Storage.set('team', team.name, team);
}
}
}.bind(this));
},
render: function(){
return (
<section className="app">
<Menu/>
<Router.RouteHandler/>
<Menu orgs={this.state.orgs} teams={this.state.teams} />
<Router.RouteHandler />
</section>
);
}
@ -15,26 +68,18 @@ var App = React.createClass({
var Menu = React.createClass({
mixins: [Router.State],
api_url: "/api/teams?org=",
getInitialState: function() {
return {teams: []};
},
componentDidMount: function() {
this.loadTeams();
},
loadTeams: function() {
$.get(this.api_url + this.getParams().org, function(res){
this.setState({teams: res})
}.bind(this));
},
render: function() {
var renderOrg = function(org) {
return (
<li key={'org-'+ org.login} className="nav org">
<Link to="org" params={{org: org.login}}>{org.login}</Link>
</li>
)
};
var renderTeam = function(team) {
return (
<li key={team.name} className="nav team">
<li key={'team-'+ team.name} className="nav team">
<Link to="team" params={{org: team.owner, team: team.name}}>{team.name}</Link>
</li>
)
@ -43,13 +88,12 @@ var Menu = React.createClass({
<section className="menu">
<ul>
<li key="empact" className="nav empact">
<Link to="org" params={{org: this.getParams().org}}>Empact</Link>
</li>
<li key="dash" className="nav dash">
<Link to="org" params={{org: this.getParams().org}}>{this.getParams().org}</Link>
<Link to="org" params={this.getParams()}>Empact</Link>
</li>
<li key="orgs-header" className="nav header">Organizations:</li>
{this.props.orgs.map(renderOrg)}
<li key="teams-header" className="nav header">Teams:</li>
{this.state.teams.map(renderTeam)}
{this.props.teams.map(renderTeam)}
</ul>
</section>
);
@ -59,16 +103,19 @@ var Menu = React.createClass({
var Org = React.createClass({
render: function(){
return (
<Router.RouteHandler/>
<Router.RouteHandler />
);
}
});
var OrgStats = React.createClass({
mixins: [Router.State],
render: function(){
var org = Storage.get('org', this.getParams().org);
return (
<section className="content">
<InfoBlock image={org.avatar_url} title={org.login} text={org.descr} />
<BarChart key={this.getParams().team} api="/api/stat/orgs/top"
params={this.getParams()} items={["repo", "team", "user"]} />
</section>
@ -78,6 +125,7 @@ var OrgStats = React.createClass({
var TeamStats = React.createClass({
mixins: [Router.State],
render: function(){
return (
<section className="content">
@ -85,7 +133,7 @@ var TeamStats = React.createClass({
image="https://media.licdn.com/mpr/mpr/p/8/005/058/14b/0088c48.jpg"
title={this.getParams().team}
text={"The most awesome team in "+ this.getParams().org} />
<BarChart key={"bar-chart"+ this.getParams().team} api="/api/stat/teams/top"
<BarChart key={'bar-chart-'+ this.getParams().team} api="/api/stat/teams/top"
params={this.getParams()} items={["repo", "user"]} />
</section>
);
@ -97,7 +145,8 @@ var UserStats = React.createClass({
render: function(){
return (
<section className="content">
<BarChart key={this.getParams().team} api="/api/stat/users/top"
<InfoBlock title={this.getParams().user} />
<BarChart key={'bar-chart-'+ this.getParams().user} api="/api/stat/users/top"
params={this.getParams()} items={["repo"]} />
</section>
);
@ -109,6 +158,7 @@ var RepoStats = React.createClass({
render: function(){
return (
<section className="content">
<InfoBlock title={this.getParams().repo} />
<BarChart key={this.getParams().team} api="/api/stat/repos/top"
params={this.getParams()} items={["user", "team"]} />
</section>
@ -124,6 +174,14 @@ var NotFound = React.createClass({
}
});
var SelectOrg = React.createClass({
render: function(){
return (
<section className="content">Please select organization from the menu!</section>
);
}
});
var InfoBlock = React.createClass({
render: function() {
var img = <div className="img" style={{backgroundImage: "url("+ this.props.image +")"}} />;
@ -138,16 +196,17 @@ var InfoBlock = React.createClass({
});
var routes = [
<Router.Route name="root" path="/app/" handler={App}>
<Router.Route name="org" path=":org" handler={Org}>
<Router.DefaultRoute handler={OrgStats} />
<Router.Route name="team" path="teams/:team" handler={TeamStats} />
<Router.Route name="user" path="users/:user" handler={UserStats} />
<Router.Route name="repo" path="repos/:repo" handler={RepoStats} />
</Router.Route>
<Router.NotFoundRoute handler={NotFound}/>
<Router.Route name="root" path="/app/" handler={App}>
<Router.DefaultRoute handler={SelectOrg} />
<Router.NotFoundRoute handler={NotFound} />
<Router.Route name="org" path=":org" handler={Org}>
<Router.DefaultRoute handler={OrgStats} />
<Router.Route name="team" path="teams/:team" handler={TeamStats} />
<Router.Route name="user" path="users/:user" handler={UserStats} />
<Router.Route name="repo" path="repos/:repo" handler={RepoStats} />
</Router.Route>
];
</Router.Route>
];
Router.run(routes, Router.HistoryLocation, function(Handler) {
React.render(<Handler/>, document.body);
React.render(<Handler />, document.body);
});

6
app/styles/app.css
View File

@ -8,6 +8,7 @@ section {
.menu {
width: 13em;
margin-top: 20px;
}
.menu ul {
margin: 0;
@ -28,8 +29,8 @@ li.nav {
}
.content {
margin-top: 15px;
width: calc(100% - 13em);
margin-top: 20px;
}
.content .left, .content .right {
float: left;
@ -52,6 +53,9 @@ li.nav {
}
.info-block h1 {
font-size: 32px;
line-height: 32px;
margin: 0;
font-weight: 400;
}