coupons.js

var app = app || {};
$(document).ready(function(){
	var couponTemplate = Handlebars.compile($('#coupon-template').html());
	var couponDetailTemplate = Handlebars.compile($('#couponDetail-template').html());

//-----Models
                                           
  var Coupon = Backbone.Model.extend({});

//------Collections 

	var CouponCollection = Backbone.Collection.extend({
		model: Coupon,
		url: 'http://localhost:3000/api/coupons.json'
	});

	var coupons = new CouponCollection();
	app.coupons = coupons;
	coupons.fetch();

//------Views                 
                                    
	var CouponView = Backbone.View.extend({
		events: {

		},

		tagName: 'li',
		template: couponTemplate,

		initialize: function(options) {
			_.bindAll(this, 'render');
			this.model.on('change', this.render);
			$(this.el).attr('id', "offer" + this.model.get('offer_id'));
			$(this.el).attr('data-offer-id', this.model.get('offer_id'));
			$(this.el).attr('data-coupon-id', this.model.get('id'));
			$(this.el).attr('class', "list-style coupon item" + this.model.get('id'));
		},
		render: function() {
			$(this.el).empty().append(this.template(this.model.toJSON()));
			return this;
		}
	});

	var CouponCollectionView = Backbone.View.extend({
		tagName: 'ul',
		className: 'list',
		events: {
			'click .button': 'claimCoupon',
			'click li': 'showDetails',
		},
		initialize: function(options) {
			this.collection.on('add remove', this.render, this);

		},
		render: function() {
			$(this.el).empty();

			this.collection.each(function(coupon){
				$(this.el).append(new CouponView({model: coupon}).render().el)
			}, this);
			return this;
		},
		claimCoupon: function(event){
			console.log(event);
			var $target = $(event.currentTarget);
			var targetID = $target.parent().attr('data-coupon-id');
			var offrID = $target.parent().attr('data-offer-id');

			$.ajax({
				url: "http://localhost:3000/api/offers/" + offrID +"/coupons/" + targetID+ "/use",
				type: 'POST'
				//success: function()....
			})
		},
		showDetails: function(event){
			var $target = $(event.currentTarget);
			var targetID = $target.attr('data-coupon-id');
			this.coupon = coupons.get(targetID);
			var selfCoupon = this.coupon;
			$(".item" + targetID).toggle(
				function(){
					$(".item" + targetID).append(new CouponDetailView({model: selfCoupon}).render().el);
				},
				function(){
					$('.list-divider').hide();
				});
			}
		});

	var CouponDetailView = Backbone.View.extend({
		tagName: 'li',
		className: 'list-divider',
		template: couponDetailTemplate,
		events: {

		},
		initialize: function(options) {
			_.bindAll(this, 'render');
			this.model.on('change', this.render);

		},
		render: function() {
			console.log(this.el);
			$(this.el).append(this.template(this.model.toJSON()));
			return this;
		}
	});
	app.CouponView = CouponView;
	app.CouponCollectionView = CouponCollectionView;
	app.CouponDetailView = CouponDetailView;

//--------------------------------------------------

	// var coupons = new CouponCollection();
	// $.getJSON('http://localhost:3000/api/coupons.json', function(response){
	// 	coupons = new CouponCollection(response);
	// 	app.coupons = coupons;
	// });

	var redeemers = null;
	$.getJSON('http://localhost:3000/api/coupons.json?state=used', function(response){
		redeemers = new CouponCollection(response);
		app.redeemers = redeemers;
	});
});

offers.js

var app = app || {};
$(document).ready(function(){
	var offerTemplate = Handlebars.compile($('#offer-template').html());
	var offerDetailTemplate = Handlebars.compile($('#offerDetail-template').html());

//------Models
                                           
  var Offer = Backbone.Model.extend({});

//------Collections 

	var OfferCollection = Backbone.Collection.extend({
		model: Offer
	});

//------Views                 
                                    
	var OfferView = Backbone.View.extend({
		events: {
	
		},
		
		tagName: 'li',
		className: 'list-style',
		template: offerTemplate,

		initialize: function(options) {
			_.bindAll(this, 'render');
			this.model.on('change', this.render);
			$(this.el).attr('id', "offer" + this.model.get('id'));
			$(this.el).attr('data-offer-id', this.model.get('id'));
			
		},
		render: function() {
			$(this.el)
				.empty()
				.append(
					this.template(
						this.model.toJSON()
						)
					);
			return this;

		}
	});

	var OfferCollectionView = Backbone.View.extend({
		tagName: 'ul',
		className: 'list',
		events: {
			'click .button': 'claimOffer',
			'click li': 'showDetails',
		},
		initialize: function(options) {
			this.collection.on('add remove', this.render, this);

		},
		render: function() {
			$(this.el).empty();

			this.collection.each(function(offer){
				$(this.el)
					.append(
						new OfferView({model: offer})
							.render()
							.el
					)
			}, this);
			return this;
		},
		claimOffer: function(event){
			console.log(event);
			var $target = $(event.currentTarget);
			var targetID = $target.parent().attr('data-offer-id');

			$.ajax({
				url: "http://localhost:3000/api/offers/" + targetID + "/coupons",
				type: 'POST'
			})
		},
		showDetails: function(event){
			var $target = $(event.currentTarget);
			var targetID = $target.attr('data-offer-id');
			this.offer = offers.get(targetID);
			var selfOffer = this.offer;
			$('#offer' + targetID).toggle(
				function(){
					$('#offer' + targetID).append(new OfferDetailView({model: selfOffer}).render().el);
				}, 
				function(){
					$('.list-divider').hide();
				});
		}
	});

	var OfferDetailView = Backbone.View.extend({
		tagName: 'li',
		className: 'list-divider',
		template: offerDetailTemplate,
		events: {
			
		},
		initialize: function(options) {
			_.bindAll(this, 'render');
			this.model.on('change', this.render);

		},
		render: function() {
			console.log(this.model);
			console.log(this.template);
			console.log(this.el);
			$(this.el).append(this.template(this.model.toJSON()));
			return this;
		}
	});

//------Router
                                                   
	var OfferRouter = Backbone.Router.extend({
		routes: {
			"": "index",
			"wallet": "coupons",
			"redeem": "redeemersView"
		},
		initialize: function(options) {
			this.offerList = offers;
			this.couponList = app.coupons;
			this.redeemerList = app.redeemers;
			// this.usedList = this.couponList.filter(function(coupon){
			// 	return coupon.state === 'used';
			// });
		},
		
		index: function() {
			this.offerCollectionView = new OfferCollectionView({collection: this.offerList});
			//$('#offer-list').empty().append(this.offerCollectionView.render().el);

		},
		
		coupons: function(){
			this.couponCollectionView = new app.CouponCollectionView({collection: this.couponList});
			$('#content').empty().append(this.couponCollectionView.render().el);
		},
		redeemersView: function(){
			this.couponCollectionView = new app.CouponCollectionView({collection: this.redeemerList});
			$('#content').empty().append(this.couponCollectionView.render().el);
		}
	});

//--------------------------------------------------

	var offers = null;
	$.getJSON('http://localhost:3000/api/offers.json', function(response){
		offers = new OfferCollection(response);
		$('#content').append(new OfferCollectionView({collection: offers}).render().el);
		var offerRouter = new OfferRouter();
		Backbone.history.start();
	});

});