PageRenderTime 22ms CodeModel.GetById 2ms app.highlight 16ms RepoModel.GetById 1ms app.codeStats 0ms

/js/app.js

https://bitbucket.org/chiefwhitecloud/runningman-ui
JavaScript | 331 lines | 247 code | 78 blank | 6 comment | 7 complexity | d85504da2f344587ac7fb95020dd0d9f MD5 | raw file
  1
  2window.Runner = Backbone.Model.extend();
  3window.Race = Backbone.Model.extend();
  4window.RunnerResult = Backbone.Model.extend();
  5window.RaceResult = Backbone.Model.extend();
  6
  7window.RunnerCollection = Backbone.Collection.extend({
  8    model: Runner,
  9    url:"../api/runners"
 10});
 11
 12window.RaceCollection = Backbone.Collection.extend({
 13	 initialize: function(models, options) {
 14		if (options)
 15    		this.id = options.id;
 16  	 },
 17    model: Race,
 18	 url: function() {
 19      return this.id ? "../api/event/" + this.id + "/races" : "../api/races";
 20    },
 21	 comparator: function(race){
 22		var date  = new Date(race.get("year"), (race.get("month") - 1), race.get("day"));
 23      return -date.getTime();
 24	 }
 25});
 26
 27window.RunnerResultsCollection = Backbone.Collection.extend({
 28	 initialize: function(models, options) {
 29    	this.id = options.id;
 30  	 },
 31    model: RunnerResult,
 32	 url: function() {
 33      return '../api/runner/' + this.id + '/results';
 34    },
 35 	comparator: function(result){
 36		var date  = new Date(result.get("race").year, (result.get("race").month - 1), result.get("race").day);
 37      return -date.getTime();
 38	}
 39});
 40
 41window.RaceResultsCollection = Backbone.Collection.extend({
 42	 initialize: function(models, options) {
 43    	this.id = options.id;
 44  	 },
 45    model: RaceResult,
 46	 url: function() {
 47      return '../api/race/' + this.id + '/results';
 48    }
 49});
 50 
 51// Views
 52window.RunnerListView = Backbone.View.extend({
 53 
 54    tagName:'ul',
 55 
 56    initialize:function () {
 57        this.model.bind("reset", this.render, this);
 58    },
 59 
 60    render:function (eventName) {
 61        _.each(this.model.models, function (runner) {
 62            $(this.el).append(new RunnerListItemView({model:runner}).render().el);
 63        }, this);
 64        return this;
 65    }
 66 
 67});
 68 
 69window.RunnerListItemView = Backbone.View.extend({
 70 
 71    tagName:"li",
 72 
 73    template:_.template($('#tpl-runner-list-item').html()),
 74 
 75    render:function (eventName) {
 76        $(this.el).html(this.template(this.model.toJSON()));
 77        return this;
 78    }
 79 
 80});
 81
 82
 83// Views
 84window.RaceListView = Backbone.View.extend({
 85 
 86    tagName:'div',
 87 
 88    initialize:function () {
 89        this.model.bind("reset", this.render, this);
 90    },
 91 
 92    render:function (eventName) {
 93			var year = null;
 94        _.each(this.model.models, function (race) {
 95			
 96				if (race.get("year") != year){
 97					year = race.get("year");
 98					$(this.el).append($('<div class="race-list-year">' + year +' </div>'));
 99				}
100			
101	    		race.set({ date: moment(new Date(race.get("year"), (race.get("month") - 1), race.get("day"))).format("MMM Do")});
102            $(this.el).append(new RaceListItemView({model:race}).render().el);
103        }, this);
104        return this;
105    }
106});
107 
108window.RaceListItemView = Backbone.View.extend({
109 
110    tagName:"div",
111 
112    template:_.template($('#tpl-race-list-item').html()),
113 
114    render:function (eventName) {
115		  $(this.el).addClass("race-list-item");
116        $(this.el).html(this.template(this.model.toJSON()));
117        return this;
118    }
119});
120
121
122window.RunnerResultsView = Backbone.View.extend({
123 
124	 tagName:"table", 
125
126    template:_.template($('#tpl-runner-results-list').html()),
127
128 	 initialize:function () {
129        this.model.bind("reset", this.render, this);
130    },
131 
132    render:function (eventName) {
133			$(this.el).html(this.template());
134         _.each(this.model.models, function (result) {
135				//this is used in the sort	
136				result.set({ date: new Date(result.get("race").year, (result.get("race").month - 1), result.get("race").day)});
137				result.set({ "raceTime": Helper.formatRaceTime(result.get("hours"), result.get("minutes"), result.get("seconds"))});
138				result.set({ "paceTime": Helper.formatRaceTime(0, result.get("paceminutes"), result.get("paceseconds"))});				
139				$(this.el).append(new RunnerResultsItemView({model:result}).render().el);
140        }, this);
141        return this;
142    }
143});
144
145window.RunnerResultsItemView = Backbone.View.extend({
146
147	 tagName:"tr", 
148
149    template:_.template($('#tpl-runner-results-list-item').html()),
150 
151    render:function (eventName) {
152        $(this.el).html(this.template(this.model.toJSON()));
153        return this;
154    }
155});
156
157
158window.RaceMainView = Backbone.View.extend({
159  initialize: function (eventInfoView, raceResultsView) {
160		$('#race-results').html(raceResultsView.render().el);
161		$('#event-info').html(eventInfoView.render().el);
162    	eventInfoView.on('yearChanged', raceResultsView.fetchRace, raceResultsView);
163  }
164});
165
166window.EventInfoView = Backbone.View.extend({
167
168  template:_.template($('#tpl-event-info').html()),
169
170  initialize:function () {
171    this.model.bind("reset", this.render, this);
172  },
173
174  events: {
175    "change select": "onYearChanged"
176  },
177
178  setRaceDate : function(race){
179    var date = moment(new Date(race.get("year"), (race.get("month") - 1), race.get("day"))).format("dddd, MMMM Do YYYY")
180    $($(this.el).find("div#race-date")[0]).html(date);
181  },
182
183  onYearChanged: function(e){
184    this.trigger('yearChanged', e.currentTarget.value);
185    var selRace = this.model.where({race_id:  parseInt(e.currentTarget.value)});
186    this.setRaceDate(selRace[0]);
187  },
188   
189  render:function (eventName) {
190    if (this.model.models.length > 0){
191    $(this.el).html(this.template(this.model.models[0].toJSON()));
192      var sel = $(this.el).find("select")[0];
193      _.each(this.model.models, function (race) {	
194        if (this.options.raceId == race.get("race_id")){
195	  this.setRaceDate(race);
196	  $(sel).append("<option value='" + race.get("race_id") + "' selected>" + race.get("year") + "</option>");
197	}
198	else{
199	  $(sel).append("<option value='" + race.get("race_id") + "'>" + race.get("year") + "</option>");
200	}
201      }, this);
202    }
203    return this;
204  }
205});
206
207
208window.RaceResultsView = Backbone.View.extend({
209 
210	 tagName: "div", 
211
212    template:_.template($('#tpl-race-results-list').html()),
213
214	 loadingtemplate: _.template($('#tpl-loading').html()),
215
216 	 initialize:function () {
217        this.model.bind("reset", this.render, this);
218    },
219
220    fetchRace: function (raceId) {
221		this.showLoader();
222      this.model.id = raceId;
223      this.model.fetch();
224    },
225 
226    render:function (eventName) {
227			if (this.model.models.length === 0){
228				this.showLoader();
229			}
230			else{
231				$(this.el).html(this.template());
232         	_.each(this.model.models, function (result) {	
233					result.set({ "raceTime": Helper.formatRaceTime(result.get("hours"), result.get("minutes"), result.get("seconds"))});
234					result.set({ "paceTime": Helper.formatRaceTime(0, result.get("paceminutes"), result.get("paceseconds"))});
235					$($(this.el).children()[0]).append(new RaceResultsItemView({model:result}).render().el);
236        		}, this);
237			}
238        	return this;
239    },
240
241	showLoader : function(){
242		$(this.el).html(this.loadingtemplate());
243	}
244});
245
246window.RaceResultsItemView = Backbone.View.extend({
247
248	 tagName:"tr", 
249
250    template:_.template($('#tpl-race-results-list-item').html()),
251 
252    render:function (eventName) {
253        $(this.el).html(this.template(this.model.toJSON()));
254        return this;
255    }
256});
257
258
259
260// Router
261var AppRouter = Backbone.Router.extend({
262 
263    routes:{
264        //"runners" : "runnerList",
265			"" : "home",		  
266			"races" : "raceList",
267		  "results/:id" : "runnerResults",
268		  "race/:eventid/:raceid" : "raceResults"
269    },
270
271		home: function(){
272			displayView("home");
273		},
274 
275    runnerList:function () {
276        this.runnerList = new RunnerCollection();
277        this.runnerListView = new RunnerListView({model:this.runnerList});
278        this.runnerList.fetch();
279        $('#runners').html(this.runnerListView.render().el);
280    },
281
282    raceList:function () {
283				displayView("races");
284        this.raceList = new RaceCollection();
285        this.raceListView = new RaceListView({model:this.raceList});
286        this.raceList.fetch();
287        $('#race-list').html(this.raceListView.render().el);
288    },
289
290	runnerResults: function(id) {
291		this.runnerResults = new RunnerResultsCollection([], {"id" : id});
292		this.runnerResultsView = new RunnerResultsView({model:this.runnerResults});
293		this.runnerResults.fetch();
294		$('#runners').html(this.runnerResultsView.render().el);
295  	},
296
297	raceResults: function(eventid, raceid) {
298		//list all the races for this event
299		displayView("event");
300		this.raceList = new RaceCollection([], {"id": eventid});
301		this.eventInfoView = new EventInfoView({model:this.raceList, raceId: raceid});
302		this.raceList.fetch();
303		
304		this.raceResults = new RaceResultsCollection([], {"id" : raceid});
305		this.raceResultsView = new RaceResultsView({model:this.raceResults});
306		this.raceResultsView.fetchRace(raceid);
307
308		this.raceMainView = new RaceMainView(this.eventInfoView, this.raceResultsView)
309
310  	}
311 
312});
313
314window.displayView = function(view){
315	var views = ["event", "races", "home"];
316
317	var getViewName = function(v){
318		return "#v-" + v;
319	}
320
321	_.each(views, function(v){
322		$(getViewName(v)).hide();
323	});
324
325	$(getViewName(view)).show();
326};
327 
328var app = new AppRouter();
329Backbone.history.start();
330
331