example with a nice theme, running GitHub API v3 through node

This commit is contained in:
Radek Stepan 2012-05-22 14:38:23 +01:00
parent 8479b6557f
commit aef0995d65
14 changed files with 804 additions and 32 deletions

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
node_modules/

View File

@ -1,31 +0,0 @@
fs = require "fs" # I/O
cs = require 'coffee-script' # take a guess
yaml = require 'js-yaml' # YAML to JS
# ANSI Terminal colors.
COLORS =
BOLD: '\u001b[0;1m'
RED: '\u001b[0;31m'
GREEN: '\u001b[0;32m'
BLUE: '\u001b[0;34m'
YELLOW: '\u001b[0;33m'
DEFAULT: '\u001b[0m'
# --------------------------------------------
# Compile.
task "compile", "compile .coffee to .js", (options) ->
console.log "#{COLORS.BOLD}Compiling#{COLORS.DEFAULT}"
js = cs.compile fs.readFileSync('burndown.coffee', "utf-8"), bare: "on"
write 'js/burndown.js', "(function() {\n#{js}\n}).call(this);"
# We are done.
console.log "#{COLORS.GREEN}Done#{COLORS.DEFAULT}"
# Append to existing file.
write = (path, text, mode = "w") ->
fs.open path, mode, 0o0666, (e, id) ->
if e then throw new Error(e)
fs.write id, text, null, "utf8"

39
app.coffee Normal file
View File

@ -0,0 +1,39 @@
http = require("http")
url = require("url")
qs = require("querystring")
github = require("octonode")
auth_url = github.auth.config(
client_id: "3ed6804c6a7159eefd96"
client_secret: "4e3cb5f3fa90d8d3e6ec1e1db4f5749c14b055b4"
).login([ "intermine", "InterMine" ])
http.createServer((req, res) ->
uri = url.parse(req.url)
# Redirect to github login.
if uri.pathname is "/"
res.writeHead 301,
"Content-Type": "text/plain"
Location: auth_url
res.end "Redirecting to " + auth_url
# Callback url from GitHub login.
else if uri.pathname is "/auth"
github.auth.login qs.parse(uri.query).code, (err, token) ->
console.log token
res.writeHead 200,
"Content-Type": "text/plain"
res.end ""
else
res.writeHead 200,
"Content-Type": "text/plain"
res.end ""
).listen 3000
console.log "Server started on 3000"

View File

@ -1 +0,0 @@
console.log "loader in da house!"

1
css/bootstrap.min.css vendored Normal file

File diff suppressed because one or more lines are too long

533
css/style.css Normal file
View File

@ -0,0 +1,533 @@
/*------------- FONTS --------------------------------------------------------------------------------- */
/* Generated by Font Squirrel (http://www.fontsquirrel.com)*/
@font-face {
font-family: 'OpenSansLight';
src: url('../font/OpenSans-Light-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'OpenSansRegular';
src: url('../font/OpenSans-Regular-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
body{
background-color:rgb(255,255,255);
background-image:url("../img/colbg.jpg");
background-repeat:repeat-x;
background-position:0px 40px;
overflow-y:auto;
}
body#landingBody{
background-position:0px 0px;
}
.navbar .brand i{
margin-top:5px;
}
.navbar .brand{
color:rgb(255,255,255);
-webkit-transition:color .2s ease-in-out;
cursor:pointer;
}
.navbar .brand:hover{
color:rgba(0,215,249,1);
}
.navbar .nav a:hover{
-webkit-transition:color .3s ease-in-out;
}
.navbar .navbar-inner{
box-shadow:none;
}
.navbar.blacktrans .navbar-inner{
background: -moz-linear-gradient(top, rgba(51,51,51,0.8) 0%, rgba(34,34,34,0.85) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(51,51,51,0.8)), color-stop(100%,rgba(34,34,34,0.85))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(51,51,51,0.8) 0%,rgba(34,34,34,0.85) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(51,51,51,0.8) 0%,rgba(34,34,34,0.85) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(51,51,51,0.8) 0%,rgba(34,34,34,0.85) 100%); /* IE10+ */
background: linear-gradient(top, rgba(51,51,51,0.8) 0%,rgba(34,34,34,0.85) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc333333', endColorstr='#d9222222',GradientType=0 ); /* IE6-9 */
}
.navbar.blue .navbar-inner{
background: -moz-linear-gradient(top, rgba(9,86,174,0.8) 0%, rgba(2,74,158,0.85) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(9,86,174,0.8)), color-stop(100%,rgba(2,74,158,0.85))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(9,86,174,0.8) 0%,rgba(2,74,158,0.85) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(9,86,174,0.8) 0%,rgba(2,74,158,0.85) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(9,86,174,0.8) 0%,rgba(2,74,158,0.85) 100%); /* IE10+ */
background: linear-gradient(top, rgba(9,86,174,0.8) 0%,rgba(2,74,158,0.85) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc0956ae', endColorstr='#d9024a9e',GradientType=0 ); /* IE6-9 */
}
.navbar.blue2 .navbar-inner{
background: #0956ae;
background: -moz-linear-gradient(top, #0956ae 0%, #024a9e 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0956ae), color-stop(100%,#024a9e));
background: -webkit-linear-gradient(top, #0956ae 0%,#024a9e 100%);
background: -o-linear-gradient(top, #0956ae 0%,#024a9e 100%);
background: -ms-linear-gradient(top, #0956ae 0%,#024a9e 100%);
background: linear-gradient(top, #0956ae 0%,#024a9e 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0956ae', endColorstr='#024a9e',GradientType=0 );
}
.navbar.blue .nav > li > a{
color:rgb(255,255,255);
opacity:0.8;
-webkit-transition:opacity .3s ease-in-out;
}
.navbar.blue .nav > li > a:hover{
opacity:1;
}
.navbar.blue .nav > .active > a{
opacity:1;
background-color:rgba(0,0,0,0.2);
}
.navbar-search {
position: relative;
margin-left:80px;
}
.navbar-search .search-query {
padding-left: 29px;
background-color:#4487D3;
border:1px #0059BE solid;
-webkit-transition:background .5s ease-in-out;
-moz-transition:background .5s ease-in-out;
-ms-transition:background .5s ease-in-out;
-o-transition:background .5s ease-in-out;
transition:background .5s ease-in-out;
}
.navbar-search .icon-search {
position: absolute;
top: 7px;
left: 11px;
background-image: url("../img/glyphicons-halflings-white.png");
}
.navbar-search .search-query:focus, .navbar-search .search-query.focused {
padding-left: 30px;
background-color:#FFFFFF;
text-shadow:none;
color:#333;
}
.search-query:focus + .icon-search {
background-image: url("../img/glyphicons-halflings.png");
}
.navbar .nav i{
margin-top:1px;
}
.navbar .nav:last-child i{
margin-top:2px;
}
.badge-nav{
top:4px;
background-color:#FFF;
color:#444;
-webkit-border-radius:1px;
-moz-border-radius:1px;
border-radius:1px;
text-shadow:none;
}
/*--------- SIDEBAR STYLES -------------*/
.sideBar{
padding-top:20px;
}
.sideBar ul{
list-style:none;
padding:0;margin:0;
}
.sideBar ul > li{
font-family:"OpenSansLight";
color:#222;
cursor:pointer;
font-size:16px;
margin-bottom:2px;
}
.sideBar ul >li figure{
margin:0;
padding:6px 14px 6px 14px;
opacity:0.7;
}
.sideBar ul > li figure:hover{
background-color:rgb(249,249,249);
opacity:1;
}
.sideBar ul > li.active figure:first-child{
color:rgba(0,175,219,1);
opacity:1;
}
.sideBar ul.subSide{
padding:5px 0px 5px 0px;
display:none;
}
.sideBar ul.subSide li{
font-size:15px;
line-height:17px;
margin-bottom:5px;
padding:4px 10px 5px 14px;
margin-left:10px;
}
.sideBar ul.subSide li:hover{
background-color:rgba(0,175,219,0.1);
}
.sideBar ul li i{
margin-top:4px;
}
.sideBar ul > li >figure .badge{
top:-2px;
position:relative;
font-family:"OpenSansRegular";
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
text-shadow:none;
}
.sideBottom{
position:fixed;
z-index:200;
bottom:0;left:20px;
width:183px;
height:auto;
min-height:30px;
background-color:rgb(255,255,255);
border-right:1px rgb(235,235,235) solid;
border-left:1px rgb(235,235,235) solid;
}
.sideBottom .headblue{
width:inherit;
height:30px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
text-shadow:none;
font-family:"OpenSansRegular";
}
.sideBottom .headblue i{
margin-top:2px;
}
.sideBottom #tasksSideList li{
padding:3px 10px 4px 3px;
font-size:12px;
margin:0;
border-bottom:1px rgb(235,235,235) solid;
}
.sideBottom #tasksSideList li a{
color:#222;
text-decoration:none;
}
.sideBottom #tasksSideList li:last-child{
border:none;
}
.sideBottom #tasksSideList li:hover{
background-color:rgb(245,245,245);
}
.sideBottom #tasksSideList li i{
margin-top:1px;
margin-right:4px;
}
/* ------ OTHER STYLES--------------- */
.borBox{
-webkit-box-sizing:border-box;
-ms-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
}
.pad40{
padding-top:40px;
}
hr{
margin:7px 0px;
}
.tooltip{
font-family:"OpenSansRegular";
}
.tooltip-inner{
padding:5px 8px;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
background-color:rgba(0,0,0,0.9);
}
.tooltip.bottom .tooltip-arrow{
border-bottom: 5px solid rgba(0,0,0,0.9);
}
.tooltip.top .tooltip-arrow{
border-top: 5px solid rgba(0,0,0,0.9);
}
.content{
padding:20px;
}
.btn-sharp{
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.sharp .btn:first-child{
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius:1px;
}
.sharp .btn:last-child{
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius:1px;
}
.btn-dashboard{
padding:20px;
height:100px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.tLeft{
text-align:left;
}
.tRight{
text-align:right;
}
.wellDark{
padding:8px 14px;
background-color:rgba(225,225,225,0.55);
border-radius:2px;
border:1px rgb(210,210,210) solid;
}
/* ------- THE COOLBOX --------------*/
.coolbox{
width:100%;
min-height:100%;
height:auto;
-webkit-box-sizing:border-box;
-ms-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
}
.coolbox .cooltitle{
width:100%;
height:35px;
padding-top:6px;
font-size:18px;
-webkit-border-radius:0px;
-moz-border-radius:0px;
border-radius:0px;
-webkit-box-sizing:border-box;
-ms-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
}
.coolbox .cooltitle i{
margin-top:4px;
}
.coolbox .coolcontent{
width:100%;
min-height:150px;
height:auto;
padding:20px 10px;
background-color:rgb(255,255,255);
border:1px rgb(225,225,225) solid;
border-top:none;
-webkit-box-sizing:border-box;
-ms-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
}
ul.horizontal li{
display:inline-block;
margin-right:5px;
margin-bottom:5px;
}
.control-group label{
float:left;
display:block;
text-align:left;
width:auto;
padding-top:7px;
margin-right:12px;
}
.control-group .control{
float:left;
display:block;
}
/*
::-webkit-scrollbar{width:7px;}
::-webkit-scrollbar-track{background-color:rgba(0,0,0,0.0);}
::-webkit-scrollbar-track:hover{background-color:rgba(0,0,0,0.05);}
::-webkit-scrollbar-thumb{background-color:rgba(0,175,219,0.4);}
::-webkit-scrollbar-thumb:hover{background-color:rgba(0,175,219,0.7);}
*/
.green{
background-color:rgba(0,175,219,1);
height:14px;
width:14px;
}
.mask{
-webkit-mask-image:url('../img/glyphicons-halflings.png');
-webkit-mask-position:0 0;
-webkit-mask-repeat:no-repeat;
}
input.sharp{
-webkit-border-radius:0px;
-moz-border-radius:0px;
border-radius:0px;
}
.btn.sharp{
-webkit-border-radius:0px;
-moz-border-radius:0px;
border-radius:0px;
}
/* ------ MESSAGES ----------*/
.message-item .message-people .pic{
width:48px;
height:48px;
background-image:url("http://placehold.it/48x48");
display:block;
float:left;
margin-right:8px;
}
.message-item .message-people .info{
display:block;
float:left;
margin-top:-3px;
}
.message-item .message-people .info .name{
color:#333;
}
.message-item:nth-child(2n){
background-color:rgb(248,248,248);
}
.message-item{
padding:10px 10px 0px 10px;
}
.message-item:hover{
background-color:rgb(244,244,244);
}
/* ------- TASKS --------*/
.tasks li a i{
padding-right:10px;
}
/*----- charts -----*/
#mouseDragChart,#timeChart,#bubbleChart,#pieChart,#barChart{
height:400px;
width:600px;
margin:auto;
}
.form.sharp input{
-webkit-border-radius:0px;
-moz-border-radius:0px;
border-radius:0px;
}
.form.sharp .btn{
-webkit-border-radius:0px;
-moz-border-radius:0px;
border-radius:0px;
}
.form.vertical input{
display:block;
clear:both;
}
.form.vertical h6{
margin-top:-5px;
margin-bottom:6px;
}
.form.vertical .btn,.form.vertical a{
display:block;
clear:both;
margin-top:0;
margin-bottom:20px;
}
.form.vertical .span4{
margin-left:0;
}
button.sp{
margin-bottom:20px;
clear:both;
}
.noFM{
margin-left:0 !important;
padding-left:0;
}

Binary file not shown.

Binary file not shown.

BIN
img/colbg.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

228
index.html Normal file
View File

@ -0,0 +1,228 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>GitHub Issues Burndown Chart</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/burndown.js"></script>
</head>
<body>
<header class="navbar blue blue2 navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<ul class="nav pull-left">
<li class="active"><a href="#"><i class="icon-white icon-fire"></i> Burn down</a></li>
</ul>
<ul class="nav pull-right">
<li><a href="#"><i class="icon-white icon-book"></i> Core InterMine Project</a></li>
</ul>
</div>
</div>
</header>
<section class="container-fluid pad40">
<section class="row-fluid">
<div class="span2 sideBar">
<br>
<ul>
<li class="active">
<figure>
<i class="icon-fire"></i> Burn down &nbsp;&nbsp;<span class="badge badge-warning">0.7</span>
</figure>
</li>
<li>
<figure>
<i class="icon-tasks"></i> Projects &nbsp;&nbsp;<span class="badge badge-info">4</span>
</figure>
</li>
</ul>
</div>
<section class="span10 content borBox"><div class="row-fluid">
<div class="page-header">
<h1>Burn down chart <small>to keep us on track</small></h1>
</div>
</div>
<br>
<div class="row-fluid">
<div class="span12">
<table class="table table-bordered">
<thead>
<tr><th>#</th>
<th>Date</th>
<th>Title</th>
<th>Description</th>
<th>Amount Due</th>
<th>Actions</th>
<th><input id="checkall" type="checkbox"></th>
</tr></thead>
<tbody>
<tr>
<td>1</td>
<td>4/3/12</td>
<td>Yammer-Design</td>
<td>Design new logo for Yammer.Inc</td>
<td>$450</td>
<td>
<div class="btn-group sharp" data-toggle="radio">
<button class="btn btn-mini btn-success"><i class="icon-white icon-shopping-cart"></i></button>
<button class="btn btn-mini btn-success"><i class="icon-white icon-pencil"></i></button>
<button class="btn btn-mini btn-success"><i class="icon-white icon-eye-open"></i></button>
</div>
</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>2</td>
<td>4/3/12</td>
<td>Yammer-Design</td>
<td>Design new logo for Yammer.Inc</td>
<td>$450</td>
<td>
<div class="btn-group sharp" data-toggle="radio">
<button class="btn btn-mini btn-success"><i class="icon-white icon-shopping-cart"></i></button>
<button class="btn btn-mini btn-success"><i class="icon-white icon-pencil"></i></button>
<button class="btn btn-mini btn-success"><i class="icon-white icon-eye-open"></i></button>
</div>
</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>3</td>
<td>4/3/12</td>
<td>Yammer-Design</td>
<td>Design new logo for Yammer.Inc</td>
<td>$450</td>
<td>
<div class="btn-group sharp" data-toggle="radio">
<button class="btn btn-mini btn-success"><i class="icon-white icon-shopping-cart"></i></button>
<button class="btn btn-mini btn-success"><i class="icon-white icon-pencil"></i></button>
<button class="btn btn-mini btn-success"><i class="icon-white icon-eye-open"></i></button>
</div>
</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>4</td>
<td>4/3/12</td>
<td>Yammer-Design</td>
<td>Design new logo for Yammer.Inc</td>
<td>$450</td>
<td>
<div class="btn-group sharp" data-toggle="radio">
<button class="btn btn-mini btn-success"><i class="icon-white icon-shopping-cart"></i></button>
<button class="btn btn-mini btn-success"><i class="icon-white icon-pencil"></i></button>
<button class="btn btn-mini btn-success"><i class="icon-white icon-eye-open"></i></button>
</div>
</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>5</td>
<td>4/3/12</td>
<td>Yammer-Design</td>
<td>Design new logo for Yammer.Inc</td>
<td>$450</td>
<td>
<div class="btn-group sharp" data-toggle="radio">
<button class="btn btn-mini btn-success"><i class="icon-white icon-shopping-cart"></i></button>
<button class="btn btn-mini btn-success"><i class="icon-white icon-pencil"></i></button>
<button class="btn btn-mini btn-success"><i class="icon-white icon-eye-open"></i></button>
</div>
</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>6</td>
<td>4/3/12</td>
<td>Yammer-Design</td>
<td>Design new logo for Yammer.Inc</td>
<td>$450</td>
<td>
<div class="btn-group sharp" data-toggle="radio">
<button class="btn btn-mini btn-success"><i class="icon-white icon-shopping-cart"></i></button>
<button class="btn btn-mini btn-success"><i class="icon-white icon-pencil"></i></button>
<button class="btn btn-mini btn-success"><i class="icon-white icon-eye-open"></i></button>
</div>
</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>7</td>
<td>4/3/12</td>
<td>Yammer-Design</td>
<td>Design new logo for Yammer.Inc</td>
<td>$450</td>
<td>
<div class="btn-group sharp" data-toggle="radio">
<button class="btn btn-mini btn-success"><i class="icon-white icon-shopping-cart"></i></button>
<button class="btn btn-mini btn-success"><i class="icon-white icon-pencil"></i></button>
<button class="btn btn-mini btn-success"><i class="icon-white icon-eye-open"></i></button>
</div>
</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>8</td>
<td>4/3/12</td>
<td>Yammer-Design</td>
<td>Design new logo for Yammer.Inc</td>
<td>$450</td>
<td>
<div class="btn-group sharp" data-toggle="radio">
<button class="btn btn-mini btn-success"><i class="icon-white icon-shopping-cart"></i></button>
<button class="btn btn-mini btn-success"><i class="icon-white icon-pencil"></i></button>
<button class="btn btn-mini btn-success"><i class="icon-white icon-eye-open"></i></button>
</div>
</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>9</td>
<td>4/3/12</td>
<td>Yammer-Design</td>
<td>Design new logo for Yammer.Inc</td>
<td>$450</td>
<td>
<div class="btn-group sharp" data-toggle="radio">
<button class="btn btn-mini btn-success"><i class="icon-white icon-shopping-cart"></i></button>
<button class="btn btn-mini btn-success"><i class="icon-white icon-pencil"></i></button>
<button class="btn btn-mini btn-success"><i class="icon-white icon-eye-open"></i></button>
</div>
</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>10</td>
<td>4/3/12</td>
<td>Yammer-Design</td>
<td>Design new logo for Yammer.Inc</td>
<td>$450</td>
<td>
<div class="btn-group sharp" data-toggle="radio">
<button class="btn btn-mini btn-success"><i class="icon-white icon-shopping-cart"></i></button>
<button class="btn btn-mini btn-success"><i class="icon-white icon-pencil"></i></button>
<button class="btn btn-mini btn-success"><i class="icon-white icon-eye-open"></i></button>
</div>
</td>
<td><input type="checkbox"></td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
</section>
</section>
</body>
</html>

View File

@ -5,5 +5,6 @@
, "dependencies": { , "dependencies": {
"coffee-script": "latest" "coffee-script": "latest"
, "js-yaml": "latest" , "js-yaml": "latest"
, "octonode": "latest"
} }
} }

1
webserver.sh Executable file
View File

@ -0,0 +1 @@
cat app.coffee | coffee -sc | node