Frontend app directory structure
This commit is contained in:
parent
b0c75adab1
commit
55f1c718a7
|
|
@ -2,7 +2,9 @@ config.json
|
||||||
config/*/*
|
config/*/*
|
||||||
*.txt
|
*.txt
|
||||||
|
|
||||||
app/.module-cache
|
.module-cache
|
||||||
app/bower_components
|
bower_components
|
||||||
|
|
||||||
// Ignore compiled app for now
|
// Ignore compiled app for now
|
||||||
app/app.js
|
app/app.js
|
||||||
|
app/charts.js
|
||||||
|
|
|
||||||
|
|
@ -4,13 +4,13 @@
|
||||||
<meta charset="utf8">
|
<meta charset="utf8">
|
||||||
<title>Empact</title>
|
<title>Empact</title>
|
||||||
<link rel="stylesheet" href="/bower_components/normalize.css/normalize.css">
|
<link rel="stylesheet" href="/bower_components/normalize.css/normalize.css">
|
||||||
<link rel="stylesheet" href="/app.css">
|
<link rel="stylesheet" href="/styles/app.css">
|
||||||
</head>
|
</head>
|
||||||
<body></body>
|
<body></body>
|
||||||
<script src="/bower_components/react/react.js"></script>
|
<script src="/bower_components/react/react.js"></script>
|
||||||
<script src="/bower_components/react-router/build/global/ReactRouter.js"></script>
|
<script src="/bower_components/react-router/build/global/ReactRouter.js"></script>
|
||||||
<script src="/bower_components/jquery/dist/jquery.js"></script>
|
<script src="/bower_components/jquery/dist/jquery.js"></script>
|
||||||
<script src="/colors.js"></script>
|
<script src="/scripts/colors.js"></script>
|
||||||
<script src="/charts.js"></script>
|
<script src="/scripts/charts.js"></script>
|
||||||
<script src="/app.js"></script>
|
<script src="/scripts/app.js"></script>
|
||||||
</html>
|
</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