Frontend app directory structure
This commit is contained in:
parent
b0c75adab1
commit
55f1c718a7
|
|
@ -2,7 +2,9 @@ config.json
|
|||
config/*/*
|
||||
*.txt
|
||||
|
||||
app/.module-cache
|
||||
app/bower_components
|
||||
.module-cache
|
||||
bower_components
|
||||
|
||||
// Ignore compiled app for now
|
||||
app/app.js
|
||||
app/charts.js
|
||||
|
|
|
|||
|
|
@ -4,13 +4,13 @@
|
|||
<meta charset="utf8">
|
||||
<title>Empact</title>
|
||||
<link rel="stylesheet" href="/bower_components/normalize.css/normalize.css">
|
||||
<link rel="stylesheet" href="/app.css">
|
||||
<link rel="stylesheet" href="/styles/app.css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script src="/bower_components/react/react.js"></script>
|
||||
<script src="/bower_components/react-router/build/global/ReactRouter.js"></script>
|
||||
<script src="/bower_components/jquery/dist/jquery.js"></script>
|
||||
<script src="/colors.js"></script>
|
||||
<script src="/charts.js"></script>
|
||||
<script src="/app.js"></script>
|
||||
<script src="/scripts/colors.js"></script>
|
||||
<script src="/scripts/charts.js"></script>
|
||||
<script src="/scripts/app.js"></script>
|
||||
</html>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.2 KiB |
|
|
@ -0,0 +1,131 @@
|
|||
var Router = ReactRouter,
|
||||
Route = Router.Route,
|
||||
Link = Router.Link,
|
||||
RouteHandler = Router.RouteHandler,
|
||||
DefaultRoute = Router.DefaultRoute,
|
||||
NotFoundRoute = Router.NotFoundRoute;
|
||||
|
||||
var App = React.createClass({displayName: "App",
|
||||
mixins: [Router.Navigation],
|
||||
render: function(){
|
||||
return (
|
||||
React.createElement("section", {className: "app"},
|
||||
React.createElement(Menu, null),
|
||||
React.createElement(RouteHandler, null)
|
||||
)
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var Menu = React.createClass({displayName: "Menu",
|
||||
mixins: [Router.Navigation, 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 renderTeam = function(team) {
|
||||
return (
|
||||
React.createElement("li", {key: team.slug, className: "nav team"},
|
||||
React.createElement(Link, {to: "team", params: {org: team.owner, team: team.slug}}, team.name)
|
||||
)
|
||||
)
|
||||
};
|
||||
return (
|
||||
React.createElement("section", {className: "menu"},
|
||||
React.createElement("ul", null,
|
||||
React.createElement("li", {key: "empact", className: "nav empact"},
|
||||
React.createElement(Link, {to: "dashboard", params: {org: this.getParams().org}}, "Empact")
|
||||
),
|
||||
React.createElement("li", {key: "dash", className: "nav dash"},
|
||||
React.createElement(Link, {to: "dashboard", params: {org: this.getParams().org}}, "Dashboard")
|
||||
),
|
||||
React.createElement("li", {key: "teams-header", className: "nav header"}, "Teams:"),
|
||||
this.state.teams.map(renderTeam)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var Dashboard = React.createClass({displayName: "Dashboard",
|
||||
render: function(){
|
||||
return (
|
||||
React.createElement(RouteHandler, null)
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var OrgStats = React.createClass({displayName: "OrgStats",
|
||||
mixins: [Router.Navigation, Router.State],
|
||||
render: function(){
|
||||
return (
|
||||
React.createElement("section", {className: "content"}, "Org stats for ", this.getParams().org)
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var TeamStats = React.createClass({displayName: "TeamStats",
|
||||
mixins: [Router.Navigation, Router.State],
|
||||
render: function(){
|
||||
var url = "/api/stat/teams/top?org="+ this.getParams().org +"&from=1417878086&to=1425654067";
|
||||
return (
|
||||
React.createElement("section", {className: "content"},
|
||||
React.createElement("div", {className: "left"},
|
||||
React.createElement(BarChart, {url: url})
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var UserStats = React.createClass({displayName: "UserStats",
|
||||
render: function(){
|
||||
return (
|
||||
React.createElement("section", {className: "content"}, "User stats!")
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var RepoStats = React.createClass({displayName: "RepoStats",
|
||||
render: function(){
|
||||
return (
|
||||
React.createElement("section", {className: "content"}, "Repo Stats!")
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var NotFound = React.createClass({displayName: "NotFound",
|
||||
render: function(){
|
||||
return (
|
||||
React.createElement("section", {className: "content"}, "NOT FOUND :(")
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var routes = [
|
||||
React.createElement(Route, {name: "root", path: "/app/", handler: App},
|
||||
React.createElement(Route, {name: "dashboard", path: ":org", handler: Dashboard},
|
||||
React.createElement(DefaultRoute, {handler: OrgStats}),
|
||||
React.createElement(Route, {name: "team", path: "teams/:team", handler: TeamStats}),
|
||||
React.createElement(Route, {name: "user", path: "users/:user", handler: UserStats}),
|
||||
React.createElement(Route, {name: "repo", path: "repos/:repo", handler: RepoStats})
|
||||
),
|
||||
React.createElement(NotFoundRoute, {handler: NotFound})
|
||||
)
|
||||
];
|
||||
Router.run(routes, Router.HistoryLocation, function(Handler) {
|
||||
React.render(React.createElement(Handler, null), document.body);
|
||||
});
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
var BarChart = React.createClass({displayName: "BarChart",
|
||||
barHeight: 40,
|
||||
barMargin: 5,
|
||||
|
||||
getInitialState: function() {
|
||||
return {points: []};
|
||||
},
|
||||
|
||||
componentDidMount: function() {
|
||||
$.get(this.props.url, function(res){
|
||||
this.setState({points: res});
|
||||
}.bind(this))
|
||||
},
|
||||
|
||||
height: function() {
|
||||
if (this.state.points.length === 0) {
|
||||
return 0;
|
||||
} else {
|
||||
return this.y(this.state.points.length) - this.barMargin;
|
||||
}
|
||||
},
|
||||
|
||||
y: function(i) {
|
||||
return i*(this.barHeight + this.barMargin);
|
||||
},
|
||||
|
||||
render: function() {
|
||||
var renderPoint = function(point, i) {
|
||||
return (
|
||||
React.createElement("g", {key: point.item},
|
||||
React.createElement("rect", {
|
||||
fill: colorFor(point.item),
|
||||
width: point.value,
|
||||
height: this.barHeight,
|
||||
x: "0",
|
||||
y: this.y(i)}),
|
||||
React.createElement("text", {x: "20", y: this.y(i) + 25}, point.item + ": " + point.value)
|
||||
)
|
||||
);
|
||||
}.bind(this)
|
||||
return (
|
||||
React.createElement("svg", {className: "bar_chart", width: "100%", height: this.height()},
|
||||
this.state.points.map(renderPoint)
|
||||
)
|
||||
);
|
||||
}
|
||||
});
|
||||
Loading…
Reference in New Issue