index page working

This commit is contained in:
Radek Stepan 2014-10-10 20:13:40 -07:00
parent 79e3253e5a
commit e9d9f7e61d
20 changed files with 252 additions and 99 deletions

View File

@ -22,6 +22,7 @@
- [ ] can we get more than 1 notification at a time?
- [ ] save in memory only if no `localStorage`, warn about that
- [ ] what if milestone does not match our strategy?
- [ ] show a stack of errors from index page as notifications
###Bugs
@ -43,6 +44,7 @@
- [ ] focus on form fields style
- [ ] switch off `user-select` on buttons
- [ ] make async pages transition so that there is no "jumping" on the page
- [ ] index page alert tooltip
###Misc

View File

@ -502,7 +502,9 @@ ul li{display:inline-block}
#page #content #projects .sort{float:right;line-height:30px}
#page #content #projects table{width:100%;}
#page #content #projects table tr td{background:#fcfcfc;padding:20px 30px;border-bottom:1px solid #eaecf2;}
#page #content #projects table tr td .project{color:inherit}
#page #content #projects table tr td .project{color:inherit;}
#page #content #projects table tr td .project .error{cursor:help;color:#c1041c}
#page #content #projects table tr td a.project{font-weight:bold}
#page #content #projects table tr td .milestone .icon{font-size:10px;margin:0}
#page #content #projects table tr td .progress{width:200px;}
#page #content #projects table tr td .progress .percent,#page #content #projects table tr td .progress .due{color:#9399ad;font-size:13px}
@ -512,8 +514,8 @@ ul li{display:inline-block}
#page #content #projects table tr td .progress .bar.red{background:#c1041c}
#page #content #projects table tr td .progress .bar.green{background:#00b361}
#page #content #projects table tr td .progress .due.red{color:#c1041c;font-weight:bold}
#page #content #projects table tr td:first-child{color:#3e4457;font-weight:bold}
#page #content #projects table tr:nth-child(2) td{background:#fefefe}
#page #content #projects table tr td:first-child{color:#3e4457}
#page #content #projects table tr:nth-child(even) td{background:#fefefe}
#page #content #projects table tr:last-child td{border:0}
#page #content #projects table tr.done td{background:#ebf6f1;}
#page #content #projects table tr.done td .milestone,#page #content #projects table tr.done td .percent,#page #content #projects table tr.done td .due{color:#00b361}

View File

@ -95,7 +95,9 @@ ul li{display:inline-block}
#page #content #projects .sort{float:right;line-height:30px}
#page #content #projects table{width:100%;}
#page #content #projects table tr td{background:#fcfcfc;padding:20px 30px;border-bottom:1px solid #eaecf2;}
#page #content #projects table tr td .project{color:inherit}
#page #content #projects table tr td .project{color:inherit;}
#page #content #projects table tr td .project .error{cursor:help;color:#c1041c}
#page #content #projects table tr td a.project{font-weight:bold}
#page #content #projects table tr td .milestone .icon{font-size:10px;margin:0}
#page #content #projects table tr td .progress{width:200px;}
#page #content #projects table tr td .progress .percent,#page #content #projects table tr td .progress .due{color:#9399ad;font-size:13px}
@ -105,8 +107,8 @@ ul li{display:inline-block}
#page #content #projects table tr td .progress .bar.red{background:#c1041c}
#page #content #projects table tr td .progress .bar.green{background:#00b361}
#page #content #projects table tr td .progress .due.red{color:#c1041c;font-weight:bold}
#page #content #projects table tr td:first-child{color:#3e4457;font-weight:bold}
#page #content #projects table tr:nth-child(2) td{background:#fefefe}
#page #content #projects table tr td:first-child{color:#3e4457}
#page #content #projects table tr:nth-child(even) td{background:#fefefe}
#page #content #projects table tr:last-child td{border:0}
#page #content #projects table tr.done td{background:#ebf6f1;}
#page #content #projects table tr.done td .milestone,#page #content #projects table tr.done td .percent,#page #content #projects table tr.done td .due{color:#00b361}

Binary file not shown.

View File

@ -18,6 +18,7 @@
<glyph glyph-name="megaphone" unicode="&#xe809;" d="m0 413q0 66 36 111t89 45l289 0q63 0 119 45t96 125l2 0q58 111 150 111 102 0 160-131t59-307-59-306-160-131q-92 0-150 111l-2 0q-78 155-199 168-6-2-8-2l0-2q-6-2-10-7-2-2-2-4-4-6-4-12l0-221q0-8 16-26t16-36l0-32q0-25-19-43t-44-19l-125 0q-25 0-44 19t-18 43l0 282q0 25-19 44t-44 18q-53 0-89 45t-36 111z m63 0q0-40 18-67t44-27l219 0q-31 37-31 94t31 93l-219 0q-25 0-44-27t-18-66z m169-157q18-29 18-62l0-282 125 0 0 28-2 2-2 2q-27 33-27 62l0 219q0 16 6 31l-118 0z m112 157q0-40 18-67t44-27l8 0q86 0 162-63-13 74-13 157 0 80 13 156-76-63-162-63l-8 0q-25 0-44-27t-18-66z m281 0q0-47 6-94l88 0q25 0 44 27t18 67-18 66-44 27l-88 0q-6-47-6-93z m14-157q19-97 57-158t85-60q65 0 111 109t45 266-45 265-111 109q-47 0-85-60t-57-158l80 0q52 0 89-45t36-112-36-111-89-45l-80 0z" horiz-adv-x="1000" />
<glyph glyph-name="spin4" unicode="&#xe80a;" d="m498 850c-114 0-228-39-320-116l0 0c173 140 428 130 588-31 134-134 164-332 89-495-10-29-5-50 12-68 21-20 61-23 84 0 3 3 12 15 15 24 71 180 33 393-112 539-99 98-228 147-356 147z m-409-274c-14 0-29-5-39-16-3-3-13-15-15-24-71-180-34-393 112-539 185-185 479-195 676-31l0 0c-173-140-428-130-589 31-134 134-163 333-89 495 11 29 6 50-12 68-11 11-27 17-44 16z" horiz-adv-x="1001" />
<glyph glyph-name="spinner1" unicode="&#xe80b;" d="m469 614v204q129 0 237-61t169-170 62-237h-204q0 72-36 133t-95 96-133 35z" horiz-adv-x="937.5" />
<glyph glyph-name="attention" unicode="&#xe80c;" d="m957-24q10-16 0-34-10-16-30-16l-892 0q-18 0-28 16-13 18-2 34l446 782q8 18 30 18t30-18z m-420 50l0 100-110 0 0-100 110 0z m0 174l0 300-110 0 0-300 110 0z" horiz-adv-x="962" />
</font>
</defs>
</svg>

Before

Width:  |  Height:  |  Size: 5.5 KiB

After

Width:  |  Height:  |  Size: 5.7 KiB

Binary file not shown.

Binary file not shown.

View File

@ -39826,13 +39826,13 @@ Router.prototype.mount = function(routes, path) {
// header.mustache
root.require.register('burnchart/src/templates/header.js', function(exports, require, module) {
module.exports = ["<div id=\"head\">"," {{#with user}}"," {{#loaded}}"," <div class=\"right\" intro=\"fade\">"," {{#displayName}}"," {{displayName}} logged in"," {{else}}"," <a class=\"github\" on-click=\"!login\"><Icons icon=\"github\"/> Sign In</a>"," {{/displayName}}"," </div>"," {{/loaded}}"," {{/with}}",""," <a id=\"icon\" href=\"#\">"," <Icons icon=\"{{icon}}\"/>"," </a>",""," <div class=\"q\">"," <Icons icon=\"search\"/>"," <Icons icon=\"down-open\"/>"," <input type=\"text\" placeholder=\"Jump to...\">"," </div>",""," <ul>"," <li><a href=\"#new/project\" class=\"add\"><Icons icon=\"plus-circled\"/> Add a Project</a></li>"," <li><a href=\"#\" class=\"faq\">FAQ</a></li>"," <li><a href=\"#reset\">DB Reset</a></li>"," <li><a href=\"#notify\">Notify</a></li>"," </ul>","</div>"].join("\n");
module.exports = ["<div id=\"head\">"," {{#with user}}"," {{#loaded}}"," <div class=\"right\" intro=\"fade\">"," {{#displayName}}"," {{displayName}} logged in"," {{else}}"," <a class=\"github\" on-click=\"!login\"><Icons icon=\"github\"/> Sign In</a>"," {{/displayName}}"," </div>"," {{/loaded}}"," {{/with}}",""," <a id=\"icon\" href=\"#\">"," <Icons icon=\"{{icon}}\"/>"," </a>",""," <!--"," <div class=\"q\">"," <Icons icon=\"search\"/>"," <Icons icon=\"down-open\"/>"," <input type=\"text\" placeholder=\"Jump to...\">"," </div>"," -->",""," <ul>"," <li><a href=\"#new/project\" class=\"add\"><Icons icon=\"plus-circled\"/> Add a Project</a></li>"," <li><a href=\"#\" class=\"faq\">FAQ</a></li>"," <li><a href=\"#reset\">DB Reset</a></li>"," <li><a href=\"#notify\">Notify</a></li>"," </ul>","</div>"].join("\n");
});
// hero.mustache
root.require.register('burnchart/src/templates/hero.js', function(exports, require, module) {
module.exports = ["{{^projects.list}}"," <div id=\"hero\">"," <div class=\"content\">"," <Icons icon=\"address\"/>"," <h2>See your project progress</h2>"," <p>Not sure where to start? Just add a demo repo to see a chart. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>"," <div class=\"cta\">"," <a href=\"#new/project\" class=\"primary\"><Icons icon=\"plus-circled\"/> Add your project</a>"," <a href=\"#\" class=\"secondary\">Read the Guide</a>"," </div>"," </div>"," </div>","{{/projects.list}}"].join("\n");
module.exports = ["<div id=\"hero\">"," <div class=\"content\">"," <Icons icon=\"address\"/>"," <h2>See your project progress</h2>"," <p>Not sure where to start? Just add a demo repo to see a chart. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>"," <div class=\"cta\">"," <a href=\"#new/project\" class=\"primary\"><Icons icon=\"plus-circled\"/> Add your project</a>"," <a href=\"#\" class=\"secondary\">Read the Guide</a>"," </div>"," </div>","</div>"].join("\n");
});
// icons.mustache
@ -39862,7 +39862,7 @@ Router.prototype.mount = function(routes, path) {
// index.mustache
root.require.register('burnchart/src/templates/pages/index.js', function(exports, require, module) {
module.exports = ["<div id=\"content\" class=\"wrap\">"," <Hero/>"," <Projects/>","</div>"].join("\n");
module.exports = ["<div id=\"content\" class=\"wrap\">"," {{#if projects.list}}"," {{#ready}}"," <div intro=\"fade\">"," <Projects projects=\"{{projects}}\"/>"," </div>"," {{/ready}}"," {{else}}"," <Hero/>"," {{/if}}","</div>"].join("\n");
});
// new.mustache
@ -39874,13 +39874,13 @@ Router.prototype.mount = function(routes, path) {
// project.mustache
root.require.register('burnchart/src/templates/pages/project.js', function(exports, require, module) {
module.exports = ["<div intro=\"fade\">"," {{#ready}}"," <div id=\"title\">"," <div class=\"wrap\">"," <h2 class=\"title\">{{route.join('/')}}</h2>"," </div>"," </div>",""," <div id=\"content\" class=\"wrap\">"," <Milestones project=\"{{project}}\"/>"," </div>"," {{/ready}}","</div>"].join("\n");
module.exports = ["{{#ready}}"," <div intro=\"fade\">"," <div id=\"title\">"," <div class=\"wrap\">"," <h2 class=\"title\">{{route.join('/')}}</h2>"," </div>"," </div>",""," <div id=\"content\" class=\"wrap\">"," <Milestones project=\"{{project}}\"/>"," </div>"," </div>","{{/ready}}"].join("\n");
});
// projects.mustache
root.require.register('burnchart/src/templates/projects.js', function(exports, require, module) {
module.exports = ["{{#projects.list.length}}"," <div id=\"projects\">"," <div class=\"header\">"," <a href=\"#\" class=\"sort\"><Icons icon=\"sort-alphabet\"/> Sorted by priority</a>"," <h2>Projects</h2>"," </div>",""," <table>"," {{#projects.list}}"," {{#milestones}}"," <tr>"," <td class=\"repo\">"," <a class=\"project\" href=\"#{{owner}}/{{name}}\">{{owner}}/{{name}}</a>"," </td>"," <td>"," <a class=\"milestone\" href=\"#{{owner}}/{{name}}/{{number}}\">{{ title }}</a>"," </td>"," <td style=\"width:1%\">"," <div class=\"progress\">"," <span class=\"percent\">{{Math.floor(format.progress(closed_issues, open_issues))}}%</span>"," <span class=\"due\">{{{ format.due(due_on) }}}</span>"," <div class=\"outer bar\">"," <div class=\"inner bar {{format.onTime(this)}}\" style=\"width:{{format.progress(closed_issues, open_issues)}}%\"></div>"," </div>"," </div>"," </td>"," </tr>"," {{/milestones}}"," {{/projects.list}}"," </table>",""," <div class=\"footer\">"," <a href=\"#\"><Icons icon=\"cog\"/> Edit</a>"," </div>"," </div>","{{/projects.list.length}}","","<!--"," <tr>"," <td><a class=\"repo\" href=\"#\">radekstepan/disposable</a></td>"," <td><span class=\"milestone\">Milestone 1.0 <span class=\"icon down-open\"></span></td>"," <td>"," <div class=\"progress\">"," <span class=\"percent\">40%</span>"," <span class=\"due\">due on Friday</span>"," <div class=\"outer bar\">"," <div class=\"inner bar red\" style=\"width:40%\"></div>"," </div>"," </div>"," </td>"," </tr>"," <tr class=\"done\">"," <td><a class=\"repo\" href=\"#\">radekstepan/burnchart</a></td>"," <td><span class=\"milestone\">Beta Milestone <span class=\"icon down-open\"></span></a></td>"," <td>"," <div class=\"progress\">"," <span class=\"percent\">100%</span>"," <span class=\"due\">due tomorrow</span>"," <div class=\"outer bar\">"," <div class=\"inner bar green\" style=\"width:100%\"></div>"," </div>"," </div>"," </td>"," </tr>"," <tr>"," <td><a class=\"repo\" href=\"#\">intermine/intermine</a></td>"," <td><span class=\"milestone\">Emma Release 96 <span class=\"icon down-open\"></span></a></td>"," <td>"," <div class=\"progress\">"," <span class=\"percent\">27%</span>"," <span class=\"due\">due in 2 weeks</span>"," <div class=\"outer bar\">"," <div class=\"inner bar red\" style=\"width:27%\"></div>"," </div>"," </div>"," </td>"," </tr>"," <tr>"," <td><a class=\"repo\" href=\"#\">microsoft/windows</a></td>"," <td><span class=\"milestone\">RC 9 <span class=\"icon down-open\"></span></a></td>"," <td>"," <div class=\"progress\">"," <span class=\"percent\">90%</span>"," <span class=\"due red\">overdue by a month</span>"," <div class=\"outer bar\">"," <div class=\"inner bar red\" style=\"width:90%\"></div>"," </div>"," </div>"," </td>"," </tr>","-->"].join("\n");
module.exports = ["<div id=\"projects\">"," <div class=\"header\">"," <a href=\"#\" class=\"sort\"><Icons icon=\"sort-alphabet\"/> Sorted by priority</a>"," <h2>Projects</h2>"," </div>",""," <table>"," {{#projects.list}}"," {{#if error}}"," <tr>"," <td colspan=\"3\" class=\"repo\">"," <div class=\"project\">{{owner}}/{{name}} <span class=\"error\" title=\"{{error}}\"><Icons icon=\"attention\"/></span></div>"," </td>"," </tr>"," {{else}}"," {{#milestones}}"," <tr>"," <td class=\"repo\">"," <a class=\"project\" href=\"#{{owner}}/{{name}}\">{{owner}}/{{name}}</a>"," </td>"," <td>"," <a class=\"milestone\" href=\"#{{owner}}/{{name}}/{{number}}\">{{ title }}</a>"," </td>"," <td style=\"width:1%\">"," <div class=\"progress\">"," <span class=\"percent\">{{Math.floor(format.progress(issues.closed.size, issues.open.size))}}%</span>"," <span class=\"due\">{{{ format.due(due_on) }}}</span>"," <div class=\"outer bar\">"," <div class=\"inner bar {{format.onTime(number, due_on, created_at, issues.closed.size, issues.open.size)}}\" style=\"width:{{format.progress(issues.closed.size, issues.open.size)}}%\"></div>"," </div>"," </div>"," </td>"," </tr>"," {{/milestones}}"," {{/if}}"," {{/projects.list}}"," </table>",""," <div class=\"footer\">"," <a href=\"#\"><Icons icon=\"cog\"/> Edit</a>"," </div>","</div>","","<!--"," <tr>"," <td><a class=\"repo\" href=\"#\">radekstepan/disposable</a></td>"," <td><span class=\"milestone\">Milestone 1.0 <span class=\"icon down-open\"></span></td>"," <td>"," <div class=\"progress\">"," <span class=\"percent\">40%</span>"," <span class=\"due\">due on Friday</span>"," <div class=\"outer bar\">"," <div class=\"inner bar red\" style=\"width:40%\"></div>"," </div>"," </div>"," </td>"," </tr>"," <tr class=\"done\">"," <td><a class=\"repo\" href=\"#\">radekstepan/burnchart</a></td>"," <td><span class=\"milestone\">Beta Milestone <span class=\"icon down-open\"></span></a></td>"," <td>"," <div class=\"progress\">"," <span class=\"percent\">100%</span>"," <span class=\"due\">due tomorrow</span>"," <div class=\"outer bar\">"," <div class=\"inner bar green\" style=\"width:100%\"></div>"," </div>"," </div>"," </td>"," </tr>"," <tr>"," <td><a class=\"repo\" href=\"#\">intermine/intermine</a></td>"," <td><span class=\"milestone\">Emma Release 96 <span class=\"icon down-open\"></span></a></td>"," <td>"," <div class=\"progress\">"," <span class=\"percent\">27%</span>"," <span class=\"due\">due in 2 weeks</span>"," <div class=\"outer bar\">"," <div class=\"inner bar red\" style=\"width:27%\"></div>"," </div>"," </div>"," </td>"," </tr>"," <tr>"," <td><a class=\"repo\" href=\"#\">microsoft/windows</a></td>"," <td><span class=\"milestone\">RC 9 <span class=\"icon down-open\"></span></a></td>"," <td>"," <div class=\"progress\">"," <span class=\"percent\">90%</span>"," <span class=\"due red\">overdue by a month</span>"," <div class=\"outer bar\">"," <div class=\"inner bar red\" style=\"width:90%\"></div>"," </div>"," </div>"," </td>"," </tr>","-->"].join("\n");
});
// date.coffee
@ -40039,20 +40039,15 @@ Router.prototype.mount = function(routes, path) {
// hero.coffee
root.require.register('burnchart/src/views/hero.js', function(exports, require, module) {
var Icons, mediator, projects;
var Icons, mediator;
mediator = require('../modules/mediator');
projects = require('../models/projects');
Icons = require('./icons');
module.exports = Ractive.extend({
'name': 'views/hero',
'template': require('../templates/hero'),
'data': {
projects: projects
},
'components': {
Icons: Icons
},
@ -40080,7 +40075,8 @@ Router.prototype.mount = function(routes, path) {
'spin6': '\e808',
'megaphone': '\e809',
'spin4': '\e80a',
'spinner1': '\e80b'
'spinner1': '\e80b',
'attention': '\e80c'
};
module.exports = Ractive.extend({
@ -40247,13 +40243,21 @@ Router.prototype.mount = function(routes, path) {
// index.coffee
root.require.register('burnchart/src/views/pages/index.js', function(exports, require, module) {
var Hero, Projects, format;
var Hero, Projects, issues, mediator, milestones, projects, system;
Hero = require('../hero');
Projects = require('../projects');
format = require('../../utils/format');
projects = require('../../models/projects');
system = require('../../models/system');
milestones = require('../../modules/github/milestone');
issues = require('../../modules/github/issues');
mediator = require('../../modules/mediator');
module.exports = Ractive.extend({
'name': 'views/pages/index',
@ -40263,10 +40267,55 @@ Router.prototype.mount = function(routes, path) {
Projects: Projects
},
'data': {
format: format
'projects': projects,
'ready': false
},
'adapt': [Ractive.adaptors.Ractive],
onrender: function() {
return document.title = 'Burnchart: GitHub Burndown Chart as a Service';
var done,
_this = this;
document.title = 'Burnchart: GitHub Burndown Chart as a Service';
if (!projects.list.length) {
return this.set('ready', true);
}
done = system.async();
return async.map(projects.data.list, function(project, cb) {
if (project.milestones) {
return cb(null, project);
}
return milestones.fetchAll(project, function(error, list) {
if (error) {
return cb(null, _.extend(project, {
error: error
}));
}
return async.map(list, function(milestone, cb) {
return issues.fetchAll(_.extend(project, {
'milestone': milestone.number
}), function(err, obj) {
return cb(err, _.extend(milestone, {
'issues': obj
}));
});
}, function(error, list) {
delete project.milestone;
if (error) {
return cb(null, _.extend(project, {
error: error
}));
}
return cb(null, _.extend(project, {
'milestones': list
}));
});
});
}, function(err, data) {
done();
return _this.set({
'projects.list': data,
'ready': true
});
});
}
});
@ -40329,7 +40378,7 @@ Router.prototype.mount = function(routes, path) {
// project.coffee
root.require.register('burnchart/src/views/pages/project.js', function(exports, require, module) {
var Milestones, config, format, issues, mediator, milestones, projects, system;
var Milestones, issues, mediator, milestones, projects, system;
Milestones = require('../milestones');
@ -40337,16 +40386,12 @@ Router.prototype.mount = function(routes, path) {
system = require('../../models/system');
config = require('../../models/config');
milestones = require('../../modules/github/milestone');
issues = require('../../modules/github/issues');
mediator = require('../../modules/mediator');
format = require('../../utils/format');
module.exports = Ractive.extend({
'name': 'views/pages/project',
'template': require('../../templates/pages/project'),
@ -40411,11 +40456,11 @@ Router.prototype.mount = function(routes, path) {
// projects.coffee
root.require.register('burnchart/src/views/projects.js', function(exports, require, module) {
var Icons, mediator, projects;
var Icons, format, mediator;
mediator = require('../modules/mediator');
projects = require('../models/projects');
format = require('../utils/format');
Icons = require('./icons');
@ -40423,7 +40468,7 @@ Router.prototype.mount = function(routes, path) {
'name': 'views/projects',
'template': require('../templates/projects'),
'data': {
projects: projects
format: format
},
'components': {
Icons: Icons

View File

@ -778,13 +778,13 @@
// header.mustache
root.require.register('burnchart/src/templates/header.js', function(exports, require, module) {
module.exports = ["<div id=\"head\">"," {{#with user}}"," {{#loaded}}"," <div class=\"right\" intro=\"fade\">"," {{#displayName}}"," {{displayName}} logged in"," {{else}}"," <a class=\"github\" on-click=\"!login\"><Icons icon=\"github\"/> Sign In</a>"," {{/displayName}}"," </div>"," {{/loaded}}"," {{/with}}",""," <a id=\"icon\" href=\"#\">"," <Icons icon=\"{{icon}}\"/>"," </a>",""," <div class=\"q\">"," <Icons icon=\"search\"/>"," <Icons icon=\"down-open\"/>"," <input type=\"text\" placeholder=\"Jump to...\">"," </div>",""," <ul>"," <li><a href=\"#new/project\" class=\"add\"><Icons icon=\"plus-circled\"/> Add a Project</a></li>"," <li><a href=\"#\" class=\"faq\">FAQ</a></li>"," <li><a href=\"#reset\">DB Reset</a></li>"," <li><a href=\"#notify\">Notify</a></li>"," </ul>","</div>"].join("\n");
module.exports = ["<div id=\"head\">"," {{#with user}}"," {{#loaded}}"," <div class=\"right\" intro=\"fade\">"," {{#displayName}}"," {{displayName}} logged in"," {{else}}"," <a class=\"github\" on-click=\"!login\"><Icons icon=\"github\"/> Sign In</a>"," {{/displayName}}"," </div>"," {{/loaded}}"," {{/with}}",""," <a id=\"icon\" href=\"#\">"," <Icons icon=\"{{icon}}\"/>"," </a>",""," <!--"," <div class=\"q\">"," <Icons icon=\"search\"/>"," <Icons icon=\"down-open\"/>"," <input type=\"text\" placeholder=\"Jump to...\">"," </div>"," -->",""," <ul>"," <li><a href=\"#new/project\" class=\"add\"><Icons icon=\"plus-circled\"/> Add a Project</a></li>"," <li><a href=\"#\" class=\"faq\">FAQ</a></li>"," <li><a href=\"#reset\">DB Reset</a></li>"," <li><a href=\"#notify\">Notify</a></li>"," </ul>","</div>"].join("\n");
});
// hero.mustache
root.require.register('burnchart/src/templates/hero.js', function(exports, require, module) {
module.exports = ["{{^projects.list}}"," <div id=\"hero\">"," <div class=\"content\">"," <Icons icon=\"address\"/>"," <h2>See your project progress</h2>"," <p>Not sure where to start? Just add a demo repo to see a chart. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>"," <div class=\"cta\">"," <a href=\"#new/project\" class=\"primary\"><Icons icon=\"plus-circled\"/> Add your project</a>"," <a href=\"#\" class=\"secondary\">Read the Guide</a>"," </div>"," </div>"," </div>","{{/projects.list}}"].join("\n");
module.exports = ["<div id=\"hero\">"," <div class=\"content\">"," <Icons icon=\"address\"/>"," <h2>See your project progress</h2>"," <p>Not sure where to start? Just add a demo repo to see a chart. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>"," <div class=\"cta\">"," <a href=\"#new/project\" class=\"primary\"><Icons icon=\"plus-circled\"/> Add your project</a>"," <a href=\"#\" class=\"secondary\">Read the Guide</a>"," </div>"," </div>","</div>"].join("\n");
});
// icons.mustache
@ -814,7 +814,7 @@
// index.mustache
root.require.register('burnchart/src/templates/pages/index.js', function(exports, require, module) {
module.exports = ["<div id=\"content\" class=\"wrap\">"," <Hero/>"," <Projects/>","</div>"].join("\n");
module.exports = ["<div id=\"content\" class=\"wrap\">"," {{#if projects.list}}"," {{#ready}}"," <div intro=\"fade\">"," <Projects projects=\"{{projects}}\"/>"," </div>"," {{/ready}}"," {{else}}"," <Hero/>"," {{/if}}","</div>"].join("\n");
});
// new.mustache
@ -826,13 +826,13 @@
// project.mustache
root.require.register('burnchart/src/templates/pages/project.js', function(exports, require, module) {
module.exports = ["<div intro=\"fade\">"," {{#ready}}"," <div id=\"title\">"," <div class=\"wrap\">"," <h2 class=\"title\">{{route.join('/')}}</h2>"," </div>"," </div>",""," <div id=\"content\" class=\"wrap\">"," <Milestones project=\"{{project}}\"/>"," </div>"," {{/ready}}","</div>"].join("\n");
module.exports = ["{{#ready}}"," <div intro=\"fade\">"," <div id=\"title\">"," <div class=\"wrap\">"," <h2 class=\"title\">{{route.join('/')}}</h2>"," </div>"," </div>",""," <div id=\"content\" class=\"wrap\">"," <Milestones project=\"{{project}}\"/>"," </div>"," </div>","{{/ready}}"].join("\n");
});
// projects.mustache
root.require.register('burnchart/src/templates/projects.js', function(exports, require, module) {
module.exports = ["{{#projects.list.length}}"," <div id=\"projects\">"," <div class=\"header\">"," <a href=\"#\" class=\"sort\"><Icons icon=\"sort-alphabet\"/> Sorted by priority</a>"," <h2>Projects</h2>"," </div>",""," <table>"," {{#projects.list}}"," {{#milestones}}"," <tr>"," <td class=\"repo\">"," <a class=\"project\" href=\"#{{owner}}/{{name}}\">{{owner}}/{{name}}</a>"," </td>"," <td>"," <a class=\"milestone\" href=\"#{{owner}}/{{name}}/{{number}}\">{{ title }}</a>"," </td>"," <td style=\"width:1%\">"," <div class=\"progress\">"," <span class=\"percent\">{{Math.floor(format.progress(closed_issues, open_issues))}}%</span>"," <span class=\"due\">{{{ format.due(due_on) }}}</span>"," <div class=\"outer bar\">"," <div class=\"inner bar {{format.onTime(this)}}\" style=\"width:{{format.progress(closed_issues, open_issues)}}%\"></div>"," </div>"," </div>"," </td>"," </tr>"," {{/milestones}}"," {{/projects.list}}"," </table>",""," <div class=\"footer\">"," <a href=\"#\"><Icons icon=\"cog\"/> Edit</a>"," </div>"," </div>","{{/projects.list.length}}","","<!--"," <tr>"," <td><a class=\"repo\" href=\"#\">radekstepan/disposable</a></td>"," <td><span class=\"milestone\">Milestone 1.0 <span class=\"icon down-open\"></span></td>"," <td>"," <div class=\"progress\">"," <span class=\"percent\">40%</span>"," <span class=\"due\">due on Friday</span>"," <div class=\"outer bar\">"," <div class=\"inner bar red\" style=\"width:40%\"></div>"," </div>"," </div>"," </td>"," </tr>"," <tr class=\"done\">"," <td><a class=\"repo\" href=\"#\">radekstepan/burnchart</a></td>"," <td><span class=\"milestone\">Beta Milestone <span class=\"icon down-open\"></span></a></td>"," <td>"," <div class=\"progress\">"," <span class=\"percent\">100%</span>"," <span class=\"due\">due tomorrow</span>"," <div class=\"outer bar\">"," <div class=\"inner bar green\" style=\"width:100%\"></div>"," </div>"," </div>"," </td>"," </tr>"," <tr>"," <td><a class=\"repo\" href=\"#\">intermine/intermine</a></td>"," <td><span class=\"milestone\">Emma Release 96 <span class=\"icon down-open\"></span></a></td>"," <td>"," <div class=\"progress\">"," <span class=\"percent\">27%</span>"," <span class=\"due\">due in 2 weeks</span>"," <div class=\"outer bar\">"," <div class=\"inner bar red\" style=\"width:27%\"></div>"," </div>"," </div>"," </td>"," </tr>"," <tr>"," <td><a class=\"repo\" href=\"#\">microsoft/windows</a></td>"," <td><span class=\"milestone\">RC 9 <span class=\"icon down-open\"></span></a></td>"," <td>"," <div class=\"progress\">"," <span class=\"percent\">90%</span>"," <span class=\"due red\">overdue by a month</span>"," <div class=\"outer bar\">"," <div class=\"inner bar red\" style=\"width:90%\"></div>"," </div>"," </div>"," </td>"," </tr>","-->"].join("\n");
module.exports = ["<div id=\"projects\">"," <div class=\"header\">"," <a href=\"#\" class=\"sort\"><Icons icon=\"sort-alphabet\"/> Sorted by priority</a>"," <h2>Projects</h2>"," </div>",""," <table>"," {{#projects.list}}"," {{#if error}}"," <tr>"," <td colspan=\"3\" class=\"repo\">"," <div class=\"project\">{{owner}}/{{name}} <span class=\"error\" title=\"{{error}}\"><Icons icon=\"attention\"/></span></div>"," </td>"," </tr>"," {{else}}"," {{#milestones}}"," <tr>"," <td class=\"repo\">"," <a class=\"project\" href=\"#{{owner}}/{{name}}\">{{owner}}/{{name}}</a>"," </td>"," <td>"," <a class=\"milestone\" href=\"#{{owner}}/{{name}}/{{number}}\">{{ title }}</a>"," </td>"," <td style=\"width:1%\">"," <div class=\"progress\">"," <span class=\"percent\">{{Math.floor(format.progress(issues.closed.size, issues.open.size))}}%</span>"," <span class=\"due\">{{{ format.due(due_on) }}}</span>"," <div class=\"outer bar\">"," <div class=\"inner bar {{format.onTime(number, due_on, created_at, issues.closed.size, issues.open.size)}}\" style=\"width:{{format.progress(issues.closed.size, issues.open.size)}}%\"></div>"," </div>"," </div>"," </td>"," </tr>"," {{/milestones}}"," {{/if}}"," {{/projects.list}}"," </table>",""," <div class=\"footer\">"," <a href=\"#\"><Icons icon=\"cog\"/> Edit</a>"," </div>","</div>","","<!--"," <tr>"," <td><a class=\"repo\" href=\"#\">radekstepan/disposable</a></td>"," <td><span class=\"milestone\">Milestone 1.0 <span class=\"icon down-open\"></span></td>"," <td>"," <div class=\"progress\">"," <span class=\"percent\">40%</span>"," <span class=\"due\">due on Friday</span>"," <div class=\"outer bar\">"," <div class=\"inner bar red\" style=\"width:40%\"></div>"," </div>"," </div>"," </td>"," </tr>"," <tr class=\"done\">"," <td><a class=\"repo\" href=\"#\">radekstepan/burnchart</a></td>"," <td><span class=\"milestone\">Beta Milestone <span class=\"icon down-open\"></span></a></td>"," <td>"," <div class=\"progress\">"," <span class=\"percent\">100%</span>"," <span class=\"due\">due tomorrow</span>"," <div class=\"outer bar\">"," <div class=\"inner bar green\" style=\"width:100%\"></div>"," </div>"," </div>"," </td>"," </tr>"," <tr>"," <td><a class=\"repo\" href=\"#\">intermine/intermine</a></td>"," <td><span class=\"milestone\">Emma Release 96 <span class=\"icon down-open\"></span></a></td>"," <td>"," <div class=\"progress\">"," <span class=\"percent\">27%</span>"," <span class=\"due\">due in 2 weeks</span>"," <div class=\"outer bar\">"," <div class=\"inner bar red\" style=\"width:27%\"></div>"," </div>"," </div>"," </td>"," </tr>"," <tr>"," <td><a class=\"repo\" href=\"#\">microsoft/windows</a></td>"," <td><span class=\"milestone\">RC 9 <span class=\"icon down-open\"></span></a></td>"," <td>"," <div class=\"progress\">"," <span class=\"percent\">90%</span>"," <span class=\"due red\">overdue by a month</span>"," <div class=\"outer bar\">"," <div class=\"inner bar red\" style=\"width:90%\"></div>"," </div>"," </div>"," </td>"," </tr>","-->"].join("\n");
});
// date.coffee
@ -991,20 +991,15 @@
// hero.coffee
root.require.register('burnchart/src/views/hero.js', function(exports, require, module) {
var Icons, mediator, projects;
var Icons, mediator;
mediator = require('../modules/mediator');
projects = require('../models/projects');
Icons = require('./icons');
module.exports = Ractive.extend({
'name': 'views/hero',
'template': require('../templates/hero'),
'data': {
projects: projects
},
'components': {
Icons: Icons
},
@ -1032,7 +1027,8 @@
'spin6': '\e808',
'megaphone': '\e809',
'spin4': '\e80a',
'spinner1': '\e80b'
'spinner1': '\e80b',
'attention': '\e80c'
};
module.exports = Ractive.extend({
@ -1199,13 +1195,21 @@
// index.coffee
root.require.register('burnchart/src/views/pages/index.js', function(exports, require, module) {
var Hero, Projects, format;
var Hero, Projects, issues, mediator, milestones, projects, system;
Hero = require('../hero');
Projects = require('../projects');
format = require('../../utils/format');
projects = require('../../models/projects');
system = require('../../models/system');
milestones = require('../../modules/github/milestone');
issues = require('../../modules/github/issues');
mediator = require('../../modules/mediator');
module.exports = Ractive.extend({
'name': 'views/pages/index',
@ -1215,10 +1219,55 @@
Projects: Projects
},
'data': {
format: format
'projects': projects,
'ready': false
},
'adapt': [Ractive.adaptors.Ractive],
onrender: function() {
return document.title = 'Burnchart: GitHub Burndown Chart as a Service';
var done,
_this = this;
document.title = 'Burnchart: GitHub Burndown Chart as a Service';
if (!projects.list.length) {
return this.set('ready', true);
}
done = system.async();
return async.map(projects.data.list, function(project, cb) {
if (project.milestones) {
return cb(null, project);
}
return milestones.fetchAll(project, function(error, list) {
if (error) {
return cb(null, _.extend(project, {
error: error
}));
}
return async.map(list, function(milestone, cb) {
return issues.fetchAll(_.extend(project, {
'milestone': milestone.number
}), function(err, obj) {
return cb(err, _.extend(milestone, {
'issues': obj
}));
});
}, function(error, list) {
delete project.milestone;
if (error) {
return cb(null, _.extend(project, {
error: error
}));
}
return cb(null, _.extend(project, {
'milestones': list
}));
});
});
}, function(err, data) {
done();
return _this.set({
'projects.list': data,
'ready': true
});
});
}
});
@ -1281,7 +1330,7 @@
// project.coffee
root.require.register('burnchart/src/views/pages/project.js', function(exports, require, module) {
var Milestones, config, format, issues, mediator, milestones, projects, system;
var Milestones, issues, mediator, milestones, projects, system;
Milestones = require('../milestones');
@ -1289,16 +1338,12 @@
system = require('../../models/system');
config = require('../../models/config');
milestones = require('../../modules/github/milestone');
issues = require('../../modules/github/issues');
mediator = require('../../modules/mediator');
format = require('../../utils/format');
module.exports = Ractive.extend({
'name': 'views/pages/project',
'template': require('../../templates/pages/project'),
@ -1363,11 +1408,11 @@
// projects.coffee
root.require.register('burnchart/src/views/projects.js', function(exports, require, module) {
var Icons, mediator, projects;
var Icons, format, mediator;
mediator = require('../modules/mediator');
projects = require('../models/projects');
format = require('../utils/format');
Icons = require('./icons');
@ -1375,7 +1420,7 @@
'name': 'views/projects',
'template': require('../templates/projects'),
'data': {
projects: projects
format: format
},
'components': {
Icons: Icons

View File

@ -309,6 +309,13 @@ ul
.project
color: inherit
.error
cursor: help
color: $strong_color
a.project
font-weight: bold
.milestone
.icon
font-size: 10px
@ -346,9 +353,8 @@ ul
&:first-child
color: #3E4457
font-weight: bold
&:nth-child(2)
&:nth-child(even)
td
background: lighten(#FCFCFC, 60%)

View File

@ -15,11 +15,13 @@
<Icons icon="{{icon}}"/>
</a>
<!--
<div class="q">
<Icons icon="search"/>
<Icons icon="down-open"/>
<input type="text" placeholder="Jump to...">
</div>
-->
<ul>
<li><a href="#new/project" class="add"><Icons icon="plus-circled"/> Add a Project</a></li>

View File

@ -1,13 +1,11 @@
{{^projects.list}}
<div id="hero">
<div class="content">
<Icons icon="address"/>
<h2>See your project progress</h2>
<p>Not sure where to start? Just add a demo repo to see a chart. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
<div class="cta">
<a href="#new/project" class="primary"><Icons icon="plus-circled"/> Add your project</a>
<a href="#" class="secondary">Read the Guide</a>
</div>
<div id="hero">
<div class="content">
<Icons icon="address"/>
<h2>See your project progress</h2>
<p>Not sure where to start? Just add a demo repo to see a chart. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
<div class="cta">
<a href="#new/project" class="primary"><Icons icon="plus-circled"/> Add your project</a>
<a href="#" class="secondary">Read the Guide</a>
</div>
</div>
{{/projects.list}}
</div>

View File

@ -1,4 +1,11 @@
<div id="content" class="wrap">
<Hero/>
<Projects/>
{{#if projects.list}}
{{#ready}}
<div intro="fade">
<Projects projects="{{projects}}"/>
</div>
{{/ready}}
{{else}}
<Hero/>
{{/if}}
</div>

View File

@ -1,5 +1,5 @@
<div intro="fade">
{{#ready}}
{{#ready}}
<div intro="fade">
<div id="title">
<div class="wrap">
<h2 class="title">{{route.join('/')}}</h2>
@ -9,5 +9,5 @@
<div id="content" class="wrap">
<Milestones project="{{project}}"/>
</div>
{{/ready}}
</div>
</div>
{{/ready}}

View File

@ -1,12 +1,18 @@
{{#projects.list.length}}
<div id="projects">
<div class="header">
<a href="#" class="sort"><Icons icon="sort-alphabet"/> Sorted by priority</a>
<h2>Projects</h2>
</div>
<div id="projects">
<div class="header">
<a href="#" class="sort"><Icons icon="sort-alphabet"/> Sorted by priority</a>
<h2>Projects</h2>
</div>
<table>
{{#projects.list}}
<table>
{{#projects.list}}
{{#if error}}
<tr>
<td colspan="3" class="repo">
<div class="project">{{owner}}/{{name}} <span class="error" title="{{error}}"><Icons icon="attention"/></span></div>
</td>
</tr>
{{else}}
{{#milestones}}
<tr>
<td class="repo">
@ -17,23 +23,23 @@
</td>
<td style="width:1%">
<div class="progress">
<span class="percent">{{Math.floor(format.progress(closed_issues, open_issues))}}%</span>
<span class="percent">{{Math.floor(format.progress(issues.closed.size, issues.open.size))}}%</span>
<span class="due">{{{ format.due(due_on) }}}</span>
<div class="outer bar">
<div class="inner bar {{format.onTime(this)}}" style="width:{{format.progress(closed_issues, open_issues)}}%"></div>
<div class="inner bar {{format.onTime(number, due_on, created_at, issues.closed.size, issues.open.size)}}" style="width:{{format.progress(issues.closed.size, issues.open.size)}}%"></div>
</div>
</div>
</td>
</tr>
{{/milestones}}
{{/projects.list}}
</table>
{{/if}}
{{/projects.list}}
</table>
<div class="footer">
<a href="#"><Icons icon="cog"/> Edit</a>
</div>
<div class="footer">
<a href="#"><Icons icon="cog"/> Edit</a>
</div>
{{/projects.list.length}}
</div>
<!--
<tr>

View File

@ -1,5 +1,4 @@
mediator = require '../modules/mediator'
projects = require '../models/projects'
Icons = require './icons'
module.exports = Ractive.extend
@ -8,8 +7,6 @@ module.exports = Ractive.extend
'template': require '../templates/hero'
'data': { projects }
'components': { Icons }
'adapt': [ Ractive.adaptors.Ractive ]

View File

@ -14,6 +14,7 @@ codes =
'megaphone': '\e809'
'spin4': '\e80a'
'spinner1': '\e80b'
'attention': '\e80c'
module.exports = Ractive.extend

View File

@ -1,6 +1,12 @@
Hero = require '../hero'
Projects = require '../projects'
format = require '../../utils/format'
projects = require '../../models/projects'
system = require '../../models/system'
milestones = require '../../modules/github/milestone'
issues = require '../../modules/github/issues'
mediator = require '../../modules/mediator'
module.exports = Ractive.extend
@ -10,7 +16,42 @@ module.exports = Ractive.extend
'components': { Hero, Projects }
'data': { format }
'data':
'projects': projects
'ready': no
'adapt': [ Ractive.adaptors.Ractive ]
onrender: ->
document.title = 'Burnchart: GitHub Burndown Chart as a Service'
document.title = 'Burnchart: GitHub Burndown Chart as a Service'
# Quit if we have no projects.
return @set('ready', yes) unless projects.list.length
done = do system.async
async.map projects.data.list, (project, cb) ->
# Skip if we have milestones already.
return cb null, project if project.milestones
# Otherwise fetch them.
milestones.fetchAll project, (error, list) ->
# Save the error if project does not exist.
return cb null, _.extend project, { error } if error
# Now map in the issues.
async.map list, (milestone, cb) ->
issues.fetchAll _.extend(project, { 'milestone': milestone.number }), (err, obj) ->
cb err, _.extend milestone, { 'issues': obj }
, (error, list) ->
delete project.milestone # from fetchAll or do deep clone
# Save any errors.
return cb null, _.extend project, { error } if error
# Otherwise add the milestones.
cb null, _.extend project, { 'milestones': list }
, (err, data) =>
# TODO: Errors are saved on projects. Show them as a notification here too.
# Save the projects.
do done
@set
'projects.list': data
'ready': yes

View File

@ -2,11 +2,9 @@ Milestones = require '../milestones'
projects = require '../../models/projects'
system = require '../../models/system'
config = require '../../models/config'
milestones = require '../../modules/github/milestone'
issues = require '../../modules/github/issues'
mediator = require '../../modules/mediator'
format = require '../../utils/format'
module.exports = Ractive.extend

View File

@ -1,5 +1,5 @@
mediator = require '../modules/mediator'
projects = require '../models/projects'
format = require '../utils/format'
Icons = require './icons'
module.exports = Ractive.extend
@ -8,7 +8,7 @@ module.exports = Ractive.extend
'template': require '../templates/projects'
'data': { projects }
'data': { format }
'components': { Icons }