diff --git a/.gitignore b/.gitignore index c7d9f6e..7cb8484 100644 --- a/.gitignore +++ b/.gitignore @@ -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 diff --git a/app/app.html b/app/app.html index 40eb829..ba591b6 100644 --- a/app/app.html +++ b/app/app.html @@ -4,13 +4,13 @@ Empact - + - - - + + + diff --git a/app/github_mark_120.png b/app/images/github_mark_120.png similarity index 100% rename from app/github_mark_120.png rename to app/images/github_mark_120.png diff --git a/app/scripts/app.js b/app/scripts/app.js new file mode 100644 index 0000000..60107a3 --- /dev/null +++ b/app/scripts/app.js @@ -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); +}); diff --git a/app/app.jsx b/app/scripts/app.jsx similarity index 100% rename from app/app.jsx rename to app/scripts/app.jsx diff --git a/app/scripts/charts.js b/app/scripts/charts.js new file mode 100644 index 0000000..691a588 --- /dev/null +++ b/app/scripts/charts.js @@ -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) + ) + ); + } +}); diff --git a/app/charts.jsx b/app/scripts/charts.jsx similarity index 100% rename from app/charts.jsx rename to app/scripts/charts.jsx diff --git a/app/colors.js b/app/scripts/colors.js similarity index 100% rename from app/colors.js rename to app/scripts/colors.js diff --git a/app/hello.js b/app/scripts/hello.js similarity index 100% rename from app/hello.js rename to app/scripts/hello.js diff --git a/app/app.css b/app/styles/app.css similarity index 100% rename from app/app.css rename to app/styles/app.css diff --git a/app/hello.css b/app/styles/hello.css similarity index 100% rename from app/hello.css rename to app/styles/hello.css