Correct menu teams and info blocks everywhere
This commit is contained in:
parent
5f5ee4125e
commit
a794366109
@ -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);
|
||||
});
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user