<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<link rel="stylesheet" href="<: $c.req.uri_for('/css/bootstrap.min.css') :>">
<style type='text/css'>
body {
background-color: #fff;
position: relative;
}
section {
padding-top: 60px;
}
section > .row {
margin-bottom: 10px;
}
.ngraph {
white-space:nowrap;
margin-bottom: 3px;
}
.footer {
background-color: #eee;
min-width: 940px;
padding: 30px 0;
text-shadow: 0 1px 0 #fff;
border-top: 1px solid #e5e5e5;
-webkit-box-shadow: inset 0 5px 15px rgba(0,0,0,.025);
-moz-box-shadow: inset 0 5px 15px rgba(0,0,0,.025);
/* box-shadow: inset 0 5px 15px rgba(0,0,0,.025);
*/}
.footer p {
color: #555;
}
.modal form {
margin: 0 0;
}
.table-order-pointer, .table-order-remove {
cursor: pointer;
}
.table-order-pointer:hover, .table-order-remove:hover {
color: #999;
}
</style>
<title>GrowthForecast</title>
</head>
<body>
<div class="topbar">
<div class="topbar-inner">
<div class="container">
<a class="brand" href="<: $c.req.uri_for('/') :>">GrowthForecast</a>
<ul class="nav">
<li><a href="<: $c.req.uri_for('/') :>">Home</a></li>
<li><a href="<: $c.req.uri_for('/docs') :>">Docs</a></li>
</ul>
</div>
</div>
</div>
<div class="container">
<section>
<div class="page-header">
: block page_header -> { }
</div>
<div class="row">
<div class="span16">
: block content -> { }
</div>
</div>
</section>
</div>
<footer class="footer">
<div class="container">
<p class="pull-right"><a href="#">Back to top</a></p>
</div>
</footer>
<script type="text/javascript" src="<: $c.req.uri_for('/js/jquery-1.5.2.min.js') :>"></script>
<script type="text/javascript" src="<: $c.req.uri_for('/js/bootstrap-modal.js') :>"></script>
<script type="text/javascript" src="<: $c.req.uri_for('/js/bootstrap-alerts.js') :>"></script>
<script type="text/javascript">
$(function(){
$('form.hxrpost').each(setHxrpost);
$('button.hxr_confirm_button').each(setHxrConfirmBtn);
$('#add-new-row').click(add_new_row);
$('form#complex-form').each(setTablePreview);
$('input.color_pallet').each(setColorPallets);
});
function setHxrpost() {
var myform = this;
$(myform).first().prepend('<div class="alert-message error hide">System Error!</div>');
$(myform).submit(function(){
$(myform).find('.alert-message').hide();
$(myform).find('.validator-message').detach();
$(myform).find('.clearfix').removeClass('error');
$.ajax({
type: 'POST',
url: myform.action,
data: $(myform).serialize(),
success: function(data) {
$(myform).find('.alert-message').hide();
if ( data.error == 0 ) {
location.href = data.location;
}
else {
$.each(data.messages, function (param,message) {
var helpblock = $('<span class="validator-message help-block"></span>');
helpblock.text(message);
$(myform).find('[name="'+param+'"]').parents('div.input').first().append(helpblock);
$(myform).find('[name="'+param+'"]').parents('div.clearfix').first().addClass('error');
if ( param.match(/-2$/) ) {
$(myform).find('[name="path-add"]').parents('div.input').first().append(helpblock);
$(myform).find('[name="path-add"]').parents('div.clearfix').first().addClass('error');
}
});
}
},
error: function() {
$(myform).find('.alert-message').show();
}
});
return false;
});
};
function setHxrConfirmBtn() {
var mybtn = this;
var modal = $('<div class="modal fade">'+
'<form method="post" action="#">'+
'<div class="modal-header"><h3>confirm</h3></div>'+
'<div class="modal-body"><div class="alert-message error hide">System Error!</div><p>confirm</p></div>'+
'<div class="modal-footer"><input type="submit" class="btn danger" value="confirm" /></div>'+
'</form></div>');
modal.find('h3').text($(mybtn).text());
modal.find('input[type=submit]').attr('value',$(mybtn).text());
modal.find('.modal-body > p').text( $(mybtn).data('confirm') );
modal.find('form').submit(function(){
$.ajax({
type: 'POST',
url: $(mybtn).data('uri'),
data: modal.find('form').serialize(),
success: function(data) {
modal.find('.alert-message').hide();
if ( data.error == 0 ) {
location.href = data.location;
}
},
error: function() {
modal.find('.alert-message').show();
}
});
return false;
});
$(mybtn).click(function(){
modal.modal({
show: true,
backdrop: true,
keyboard: true,
});
return false;
});
};
function add_new_row() {
var path = $('#path-add').val();
var type = $('#type-add').val();
var gmode = $('#gmode-add').val();
var stack = $('#stack-add').val();
var tr = $('<tr></tr>');
tr.append('<td><span class="table-order-pointer table-order-up">⬆</span><span class="table-order-pointer table-order-down">⬇</span></td>');
tr.append('<td style="text-align:left">'+$('#type-add option:selected').html()+'<input type="hidden" name="type-2" value="'+type+'" /></td>');
tr.append('<td>'+$('#path-add option:selected').html()+'<input type="hidden" name="path-2" value="'+path+'" /></td>');
tr.append('<td style="text-align:center">'+$('#gmode-add option:selected').html()+'<input type="hidden" name="gmode-2" value="'+gmode+'" /></td>');
tr.append('<td style="text-align:center">'+$('#stack-add option:selected').html()+'<input type="hidden" name="stack-2" value="'+stack+'" /></td>');
tr.append('<td style="text-align:center"><span class="table-order-remove">✖</span></td>')
tr.appendTo($('table#add-data-tbl'));
$('#add-data-tbl').find('tr:last').addClass('can-table-order');
$('#add-data-tbl').find('span.table-order-up:last').click(table_order_up);
$('#add-data-tbl').find('span.table-order-down:last').click(table_order_down);
$('#add-data-tbl').find('span.table-order-remove:last').click(table_order_remove);
var myform = $('#path-add').parents('form').first();
setTimeout(function(){preview_complex_graph(myform)},10);
return false;
}
function table_order_up() {
var btn = this;
var mytr = $(this).parents('tr.can-table-order').first();
if ( mytr ) {
var prevtr = mytr.prev('tr.can-table-order');
mytr.insertBefore(prevtr);
}
var myform = $(this).parents('form').first();
setTimeout(function(){preview_complex_graph(myform)},10);
return false;
};
function table_order_down() {
var btn = this;
var mytr = $(this).parents('tr.can-table-order').first();
if ( mytr ) {
var nexttr = mytr.next('tr.can-table-order');
mytr.insertAfter(nexttr);
}
var myform = $(this).parents('form').first();
setTimeout(function(){preview_complex_graph(myform)},0);
return false;
};
function table_order_remove() {
var btn = this;
var mytr = $(this).parents('tr.can-table-order').first();
var myform = $(this).parents('form').first();
setTimeout(function(){preview_complex_graph(myform)},10);
mytr.detach();
};
function preview_complex_graph(myform) {
var uri = myform.find('select[name="type-1"]').val() + ':' + myform.find('select[name="path-1"]').val() + ':' + myform.find('select[name="gmode-1"]').val() + ':0';
var num = myform.find('input[name=type-2]').length;
for (var i=0; i < num; i++ ) {
uri += ':'
+ myform.find('input[name="type-2"]').eq(i).val() + ':'
+ myform.find('input[name="path-2"]').eq(i).val() + ':'
+ myform.find('input[name="gmode-2"]').eq(i).val() + ':'
+ myform.find('input[name="stack-2"]').eq(i).val();
}
var base = $('ul.nav:first > li:first > a').attr('href');
var img = $('<img />');
img.attr('src',base + 'graph/' + uri + '?sumup=' + myform.find('select[name="sumup"]').val());
$('#preview-graph').children('img').detach();
img.appendTo($('#preview-graph'));
};
function setTablePreview() {
$('.table-order-up').click(table_order_up);
$('.table-order-down').click(table_order_down);
$('.table-order-remove').click(table_order_remove);
$('#complex-form select[name="sumup"]').change(function(){
setTimeout(function(){ preview_complex_graph($('#complex-form')) },10);
});
$('#complex-form select[name$="-1"]').change(function(){
setTimeout(function(){ preview_complex_graph($('#complex-form')) },10);
});
preview_complex_graph($('#complex-form'));
}
function setColorPallets() {
var input = $(this);
var preview = $('<input type="text" style="width:20px" readonly="readonly" />');
input.before(preview);
preview.css('background-color',input.val());
input.change(function(){
preview.css('background-color',input.val());
});
var colors = ["#cccccc","#cccc77","#cccc11","#cc77cc","#cc7777","#cc7711","#cc11cc","#cc1177","#cc1111","#77cccc","#77cc77","#77cc11","#7777cc","#777777","#777711","#7711cc","#771177","#771111","#11cccc","#11cc77","#11cc11","#1177cc","#117777","#117711","#1111cc","#111177","#111111"];
var pallet = $('<div class="hide" style="border:solid 1px #000;width:154px;padding:1px;background-color:#222;position:absolute"></div>');
pallet.append('<div style="margin:1px;display:inline-block;width:20px;height:20px;cursor:pointer;color:#eee;text-align:center;">✖</div>');
pallet.children().first().click(function(){
pallet.toggle();
});
$.map(colors, function (code,idx) {
var piece = $('<div style="margin:1px;display:inline-block;'
+ 'width:20px;height:20px;cursor:pointer"> </div>');
piece.css('background-color',code);
piece.click(function(){
input.val(code);
input.change();
pallet.toggle();
});
pallet.append(piece);
});
input.after(pallet);
input.click(function(){
var pos = $(this).position();
var width = $(this).outerWidth(true);
pallet.css('top',pos.top);
pallet.css('left',pos.left+width);
pallet.toggle();
});
}
</script>
</body>
</html>