paulodiogo/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Índices para os gráficos</title>
  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  <style>

  .centered{
    margin: 0 auto;
}

.bg-success, .bg-info {
    margin: 5px;
    padding: 10px;
}

.indice label.name-indice{
	line-height: 1;
    position: relative;
    top: 1px;
	 margin-bottom: 0;
    padding: 6px 12px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}


  </style>

</head>
<body>
<div class="centered container">
 <section id="todoapp" class="row ">
    <header id="header">
      <h1>Índices</h1>
      <input id="new-indice" class="form-control" placeholder="What needs to be done?">
	  <p class="help-block">EX.: PIB, SELIC, INFLAÇÃO...</p>
    </header>
    <section id="main">
      <div id="indice-list"></div>
    </section>
  </section>
  <div id="res"></div>
</div>


  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js" type="text/javascript"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js" type="text/javascript"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.0/backbone.localStorage-min.js" type="text/javascript"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.mask/0.9.0/jquery.mask.min.js" type="text/javascript"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/highcharts/4.0.1/highcharts.js" type="text/javascript"></script>
  <script type="text/template" id="item-template">
      <div class="indice <%- helperClass %>">
        <label class="name-indice"><%- name %></label>
		<span class="btn btn-link glyphicon glyphicon-usd valores"></span>
		<span class="btn btn-link glyphicon glyphicon-trash destroy"></span>
			<div class="row colapsable" style="display:none">
				<div class="row" style="margin:5px">
					<div class="col-xs-4">
						<input type="date" class="form-control new-mes" placeholder="Qual o mês?">
					</div>
					<div class="col-xs-4">
						<input class="form-control new-valor" placeholder="Qual o valor?">
					</div>
				</div>
				<div class="row"  style="margin:5px">
					<ul class="child col-md-12">
					</ul>
				</div>
			</div>
	  </div>
    </script>
	<script type="text/template" id="valor-item-template">
      <div class="valor col-md-2 <%- classHelper %>">
        <label><%- month != null ? month.formatedDate() : "" %></label>
		<label style="margin-left:15%"><%- value %>%</label>
		<span class="btn btn-link glyphicon glyphicon-trash pull-right"></span>
      </div>
    </script>

  <script type="text/javascript">
jQuery.fn.extend({
	valAsDate : function() {
		var value = this.val().split("/");
		return new Date(value[1], (value[0]) - 1);
	}
});
	String.prototype.formatedDate = function(){
		var newThis = this;
		if(!(typeof this.getMongh === 'function'))
			newThis = new Date(this);

		return (newThis.getMonth() + 1) + "/" + newThis.getFullYear();
	}

	Date.prototype.formatedDate = String.prototype.formatedDate;

	$(document).ready(function(){
		$('.new-mes').mask("00/0000", {placeholder: "MM/yyyy"});
		$('.new-valor').mask('000.000.000.000.000,00', {reverse: true});
	});


var app = {}; // create namespace for our app
app.Valor = Backbone.Model.extend({
	defaults : {
		month : new Date(),
		value : null
	}
});

var ValorList = Backbone.Collection.extend({
	model : app.Valor
});

app.Indice = Backbone.Model.extend({
	defaults : {
		id : null,
		name : '',
		values : null
	},
	parse : function(response) {
		this.values = new ValorList();
		this.values.reset(response.values);
		delete response.values;
		return response;
	}
});

app.IndiceList = Backbone.Collection.extend({
	model : app.Indice,
	localStorage: new Store("backbone-todo")
});

app.indiceList = new app.IndiceList();

app.ValorIndiceView = Backbone.View.extend({
	tagName : 'div',
	template : _.template($('#valor-item-template').html()),
	render : function() {
		this.$el.html(this.template(this.model.toJSON()));
		return this;
	}
});

app.IndiceView = Backbone.View.extend({
	tagName : 'div',
	template : _.template($('#item-template').html()),
	render : function() {
		this.$el.html(this.template(this.model.toJSON()));

		if (this.model.values) {
			this.model.values.each(function(value, key){
			value.set("classHelper", key % 2 ? "bg-success" : "bg-info");
			$(".child", this.el).append(new app.ValorIndiceView({model : value}).render().el)}, this);
		}

		return this;
	},
	initialize : function() {
		this.model.on('destroy', this.remove, this);

	},
	events : {
		'click .destroy' : 'destroy',
		'click .valores' : 'toggle',
		'keypress .new-valor' : 'addValor'
	},
	destroy : function() {
		this.model.destroy();
	},
	toggle : function() {
		this.$el.find(".colapsable").toggle();
	},
	addValor : function(e) {
		if(e.which===13){
			var newModel = new app.Valor({month : $(".new-mes", this.el).valAsDate(), value : $(".new-valor", this.el).val()});

			if(!this.model.values)
				this.model.fetch();

			this.model.values.push(newModel);
			this.model.save({values:this.model.values}, {
				success: function(model, response) {
				newModel.set("classHelper", model.get("values").length % 2 ? "bg-success" : "bg-info");
					$(".child", this.el).append(new app.ValorIndiceView({ model : newModel}).render().el);
					$(".new-mes", this.el).val('');
					$(".new-valor", this.el).val('');
					$(".new-mes", this.el).focus();
				},
				error: function(model, response) {
					console.log("ERRO");
				}
			});

		}
	}
});
app.AppView = Backbone.View.extend({
	el : '#todoapp',
	initialize : function() {
		this.input = this.$('#new-indice');
		app.indiceList.on('add', this.addOne, this);
		app.indiceList.on('reset', this.addAll, this);
		app.indiceList.fetch();
	},
	events : {
		'keypress #new-indice' : 'createTodoOnEnter'
	},
	createTodoOnEnter : function(e) {
		if (e.which !== 13 || !this.input.val().trim()) {
			return;
		}
		app.indiceList.create(this.newAttributes());
		this.input.val('');
	},
	addOne : function(todo) {
		todo.set("helperClass", app.indiceList.indexOf(todo) % 2 ? "bg-warning"  : "bg-danger");
		var view = new app.IndiceView({
			model : todo
		});
		$('#indice-list').append(view.render().el);
	},
	addAll : function() {
		this.$('#indice-list').html('');
		app.indiceList.each(this.addOne, this);
	},
	newAttributes : function() {
		return {
			name : this.input.val().trim()
		};
	}
});
app.appView = new app.AppView();


  </script>


</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Índices para os gráficos</title>
	<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
	<style>

	.centered{
	margin: 0 auto;
	}

	.bg-success, .bg-info {
	margin: 5px;
	padding: 10px;
	}

	.indice label.name-indice{
	line-height: 1;
	position: relative;
	top: 1px;
	margin-bottom: 0;
	padding: 6px 12px;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
	}


	</style>

	</head>
	<body>
	<div class="centered container">
	<section id="todoapp" class="row ">
	<header id="header">
	<h1>Índices</h1>
	<input id="new-indice" class="form-control" placeholder="What needs to be done?">
	<p class="help-block">EX.: PIB, SELIC, INFLAÇÃO...</p>
	</header>
	<section id="main">
	<div id="indice-list"></div>
	</section>
	</section>
	<div id="res"></div>
	</div>


	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js" type="text/javascript"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js" type="text/javascript"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.0/backbone.localStorage-min.js" type="text/javascript"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.mask/0.9.0/jquery.mask.min.js" type="text/javascript"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/highcharts/4.0.1/highcharts.js" type="text/javascript"></script>
	<script type="text/template" id="item-template">
	<div class="indice <%- helperClass %>">
	<label class="name-indice"><%- name %></label>
	<span class="btn btn-link glyphicon glyphicon-usd valores"></span>
	<span class="btn btn-link glyphicon glyphicon-trash destroy"></span>
	<div class="row colapsable" style="display:none">
	<div class="row" style="margin:5px">
	<div class="col-xs-4">
	<input type="date" class="form-control new-mes" placeholder="Qual o mês?">
	</div>
	<div class="col-xs-4">
	<input class="form-control new-valor" placeholder="Qual o valor?">
	</div>
	</div>
	<div class="row" style="margin:5px">
	<ul class="child col-md-12">
	</ul>
	</div>
	</div>
	</div>
	</script>
	<script type="text/template" id="valor-item-template">
	<div class="valor col-md-2 <%- classHelper %>">
	<label><%- month != null ? month.formatedDate() : "" %></label>
	<label style="margin-left:15%"><%- value %>%</label>
	<span class="btn btn-link glyphicon glyphicon-trash pull-right"></span>
	</div>
	</script>

	<script type="text/javascript">
	jQuery.fn.extend({
	valAsDate : function() {
	var value = this.val().split("/");
	return new Date(value[1], (value[0]) - 1);
	}
	});
	String.prototype.formatedDate = function(){
	var newThis = this;
	if(!(typeof this.getMongh === 'function'))
	newThis = new Date(this);

	return (newThis.getMonth() + 1) + "/" + newThis.getFullYear();
	}

	Date.prototype.formatedDate = String.prototype.formatedDate;

	$(document).ready(function(){
	$('.new-mes').mask("00/0000", {placeholder: "MM/yyyy"});
	$('.new-valor').mask('000.000.000.000.000,00', {reverse: true});
	});



	var app = {}; // create namespace for our app
	app.Valor = Backbone.Model.extend({
	defaults : {
	month : new Date(),
	value : null
	}
	});

	var ValorList = Backbone.Collection.extend({
	model : app.Valor
	});

	app.Indice = Backbone.Model.extend({
	defaults : {
	id : null,
	name : '',
	values : null
	},
	parse : function(response) {
	this.values = new ValorList();
	this.values.reset(response.values);
	delete response.values;
	return response;
	}
	});

	app.IndiceList = Backbone.Collection.extend({
	model : app.Indice,
	localStorage: new Store("backbone-todo")
	});

	app.indiceList = new app.IndiceList();

	app.ValorIndiceView = Backbone.View.extend({
	tagName : 'div',
	template : _.template($('#valor-item-template').html()),
	render : function() {
	this.$el.html(this.template(this.model.toJSON()));
	return this;
	}
	});

	app.IndiceView = Backbone.View.extend({
	tagName : 'div',
	template : _.template($('#item-template').html()),
	render : function() {
	this.$el.html(this.template(this.model.toJSON()));

	if (this.model.values) {
	this.model.values.each(function(value, key){
	value.set("classHelper", key % 2 ? "bg-success" : "bg-info");
	$(".child", this.el).append(new app.ValorIndiceView({model : value}).render().el)}, this);
	}

	return this;
	},
	initialize : function() {
	this.model.on('destroy', this.remove, this);

	},
	events : {
	'click .destroy' : 'destroy',
	'click .valores' : 'toggle',
	'keypress .new-valor' : 'addValor'
	},
	destroy : function() {
	this.model.destroy();
	},
	toggle : function() {
	this.$el.find(".colapsable").toggle();
	},
	addValor : function(e) {
	if(e.which===13){
	var newModel = new app.Valor({month : $(".new-mes", this.el).valAsDate(), value : $(".new-valor", this.el).val()});

	if(!this.model.values)
	this.model.fetch();

	this.model.values.push(newModel);
	this.model.save({values:this.model.values}, {
	success: function(model, response) {
	newModel.set("classHelper", model.get("values").length % 2 ? "bg-success" : "bg-info");
	$(".child", this.el).append(new app.ValorIndiceView({ model : newModel}).render().el);
	$(".new-mes", this.el).val('');
	$(".new-valor", this.el).val('');
	$(".new-mes", this.el).focus();
	},
	error: function(model, response) {
	console.log("ERRO");
	}
	});

	}
	}
	});
	app.AppView = Backbone.View.extend({
	el : '#todoapp',
	initialize : function() {
	this.input = this.$('#new-indice');
	app.indiceList.on('add', this.addOne, this);
	app.indiceList.on('reset', this.addAll, this);
	app.indiceList.fetch();
	},
	events : {
	'keypress #new-indice' : 'createTodoOnEnter'
	},
	createTodoOnEnter : function(e) {
	if (e.which !== 13 \|\| !this.input.val().trim()) {
	return;
	}
	app.indiceList.create(this.newAttributes());
	this.input.val('');
	},
	addOne : function(todo) {
	todo.set("helperClass", app.indiceList.indexOf(todo) % 2 ? "bg-warning" : "bg-danger");
	var view = new app.IndiceView({
	model : todo
	});
	$('#indice-list').append(view.render().el);
	},
	addAll : function() {
	this.$('#indice-list').html('');
	app.indiceList.each(this.addOne, this);
	},
	newAttributes : function() {
	return {
	name : this.input.val().trim()
	};
	}
	});
	app.appView = new app.AppView();


	</script>




	</body>
	</html>