Team:WITS-CSIR SA/client/CalendarModel.js

From 2011.igem.org

Revision as of 09:47, 19 September 2011 by Nkruger (Talk | contribs)

/// <reference path="../../js/lib/backbone.js" /> /// <reference path="../../js/lib/underscore.js" /> /// <reference path="../../js/lib/jlayout.border.js" /> /// <reference path="../../js/lib/jquery-1.5.1.min.js" /> /// <reference path="../../js/lib/jquery-ui-1.8.14.custom.min.js" /> /// <reference path="../../js/lib/jQuery.BlockUI.js" /> /// <reference path="../../js/lib/jquery.fling.js" /> /// <reference path="../../js/lib/jquery.jlayout.js" /> /// <reference path="../../js/lib/jquery.sizes.js" /> /// <reference path="../../js/lib/modernizr-1.7.min.js" /> /// <reference path="../../js/lib/sammy-latest.min.js" /> /// <reference path="../../js/common.js" />

$(function () {

   var Day = Backbone.Model.extend({
       name: null,
       content: null
   });
   var Days = Backbone.Collection.extend({
       initialize: function (models, options) {
           this.opts = options;
       },
       hasContent: function () { return this.length > 0; }
   });
   var Week = Backbone.Model.extend({
       initialize: function () {
           this.days = new Days(null, { Week: this });
       },
       name: null,
       hasContent: function () { return this.days.hasContent(); }
   });
   var Weeks = Backbone.Collection.extend({
       initialize: function (models, options) {
           this.opts = options;
       },
       hasContent: function () {
           for (var i = 0; i < this.length; i++)
               if (this.models[i].hasContent()) { return true; }
           return false;
       }
   });
   var Month = Backbone.Model.extend({
       initialize: function () {
           this.weeks = new Weeks(null, { Month: this });
       },
       name: null,
       hasContent: function () {
           return this.weeks.hasContent();
       }
   });
   var Months = Backbone.Collection.extend({
       initialize: function (models, options) {
           this.opts = options;
       }
   });
   var Year = Backbone.Model.extend({
       initialize: function () {
           this.months = new Months(null, { Year: this });
           this.months.add(new Month({ name: 'February' }));
           this.months.add(new Month({ name: 'March' }));
           this.months.add(new Month({ name: 'April' }));
           this.months.add(new Month({ name: 'May' }));
           this.months.add(new Month({ name: 'June' }));
           this.months.add(new Month({ name: 'July' }));
           this.months.add(new Month({ name: 'August' }));
           this.months.add(new Month({ name: 'September' }));


       },
       year: null,
       getMonth: function (name) {
           var caller = this;
           var m = $.grep(caller.months.models, function (n, i) {
               return n.get('name').toLowerCase() == name.toLowerCase();
           });
           return m.length > 0 ? m[0] : null;
       },
       hasContent: function () { return this.months.hasContent(); }
   });
   var Calendar = Backbone.View.extend({
       el: $('div.calendar'),
       initialize: function () {
           this.year = new Year({ year: 2011 });
this.template = '' + ' ' + ' ' + ' ' + ' ' + '</table>'; }, render: function () { var html = _.template(this.template, this); this.el.html(html); var caller = this; $('div.month', this.el).tabs().hide(); $('ul.months input:button', this.el).unbind('click').bind('click', function () { var month = $(this).attr('data-month'); $('ul.months input:button', this.el).removeClass('ui-state-highlight'); $(this).addClass('ui-state-highlight'); $('div.month', caller.el).hide(); $('div.' + month, caller.el).slideDown(500); }); FormatButtons(); $('ul.months input:button', this.el).eq(0).click(); } }); $.fling('subscribe', 'ready', function () { var calendar = new Calendar(), week = null, month = null; month = calendar.year.getMonth('february'); week = new Week({ name: 'Week 2' }); week.days.add(new Day({ name: 'Monday', content: '

This is a test

' })); week.days.add(new Day({ name: 'Wednesday', content: '

This is a test

' })); week.days.add(new Day({ name: 'Friday', content: '

This is a test

' }));
       month.weeks.add(week);
       month = calendar.year.getMonth('march');
       week = new Week({ name: 'Week 2' });
week.days.add(new Day({ name: 'Monday', content: '

This is a test

' })); week.days.add(new Day({ name: 'Wednesday', content: '

This is a test

' })); week.days.add(new Day({ name: 'Friday', content: '

This is a test

' }));
       month.weeks.add(week);
       month = calendar.year.getMonth('april');
       week = new Week({ name: 'Week 2' });
week.days.add(new Day({ name: 'Wednesday', content: '

This is a test

' })); week.days.add(new Day({ name: 'Friday', content: '

This is a test

' }));
       month.weeks.add(week);
       month = calendar.year.getMonth('may');
       week = new Week({ name: 'Week 2' });
week.days.add(new Day({ name: 'Monday', content: '

This is a test

' })); week.days.add(new Day({ name: 'Friday', content: '

This is a test

' }));
       month.weeks.add(week);
       month = calendar.year.getMonth('june');
       week = new Week({ name: 'Week 4' });
week.days.add(new Day({ name: 'Saturday', content: '

Standard PCR of CheZ from genomic DNA

' }));
       month.weeks.add(week);
       month = calendar.year.getMonth('june');
       week = new Week({ name: 'Week 5' });
week.days.add(new Day({ name: 'Monday', content: '

CheZ extraction and purification(Did not work).

' })); week.days.add(new Day({ name: 'Tuesday', content: '

Gradient PCR of CheZ from genomic DNA

' + '

Digested lox66 and lo71. Ligated into the PSB1C3 backbone (Did not work)

' + '

Round one ThRS1-CheZ, ThRS2-CheZ, ThRS1-Venus and ThRS2-Venus standard PCR (ThRS1-Venus did not work)

' + '

Round one AtRS-cheZ standard PCR (Worked)

' + '

Round one AtRS-mRFP1 standard PCR (Did not work)

' + '

mRFP1 C-Fusion standard PCR (Did not work)

' + '

Venus C-Fusion PCR (Did not work)

'
       }));
       month.weeks.add(week);
       month = calendar.year.getMonth('july');
       week = new Week({ name: 'Week 1' });
week.days.add(new Day({ name: 'Monday', content: '

This is a test

' })); week.days.add(new Day({ name: 'Wednesday', content: '

This is a test

' }));
       month.weeks.add(week);
       month = calendar.year.getMonth('august');
       week = new Week({ name: 'Week 2' });
week.days.add(new Day({ name: 'Monday', content: '

This is a test

' })); week.days.add(new Day({ name: 'Wednesday', content: '

This is a test

' }));
       month.weeks.add(week);
       month = calendar.year.getMonth('september');
       week = new Week({ name: 'Week 2' });
week.days.add(new Day({ name: 'Monday', content: '

This is a test

' })); week.days.add(new Day({ name: 'Wednesday', content: '

This is a test

' }));
       month.weeks.add(week);
       calendar.render();
   });

});

' + '
    ' + ' <% _.forEach(year.months.models, function(month) { %>' + ' <% if(month.hasContent()){ %>' + '
  • <input type="button" data-month="<%= month.get(\'name\') %>" value="<%= month.get(\'name\') + \' \' + year.get(\'year\') %>" style="width:95%;" />
  • ' +
                               '               <% } %>' +
                               '               <% }); %>' +
    
    '
' + '
' +
                           '            <% _.forEach(year.months.models, function(month) { %>' +
                           '            <% if(month.hasContent()){ %>' +
                           '               <div class="month <%= month.get(\'name\') %>" id="<%= month.get(\'name\') + \'_\' + month.cid %>">' +
'
    ' + ' <% _.forEach(month.weeks.models, function(week) { %>' + '
  • <a href="#<%= month.get(\'name\') + \'_week_\' + week.cid %>"><%= week.get(\'name\') %></a>
  • ' +
                               '                   <% }); %>' +
    
    '
' +
                           '                   <% _.forEach(month.weeks.models, function(week) { %>' +
                           '                       <div id="<%= month.get(\'name\') + \'_week_\' + week.cid %>">' +
                           '                       <% _.forEach(week.days.models, function(day) { %>' +
'

<%= day.get(\'name\') %>

' +
                           '                           <%= day.get(\'content\') %>' +
                           '                       <% }); %>' +
                           '                       </div>' +
                           '                   <% }); %>' +
                           '               </div>' +
                           '            <% } %>' +
                           '            <% }); %>' +
'