Update the regClass view to use fullCalendar.

Now will use the fullCalendar to select the times.

diff --git a/js/frontRegApp.js b/js/frontRegApp.js
index a3b3f04..afc01a3 100644 (file)
--- a/js/frontRegApp.js
+++ b/js/frontRegApp.js
@@ -167,6 +167,7 @@ app.Models.Front.RegEvent = Backbone.Model.extend({
                 if ( !hasRegTime ) {
                     foundClass.regTimes.create( foundRegTime[0] );
                     hasRegTime = foundClass.regTimes.findWhere({ id: foundRegTime[0].id });
+                    hasRegTime.set({ parent: foundClass });
                 }
                 // Add the registrant
                 var nRegTime = foundClass.regTimes.findWhere({id: hasRegTime.get('id')});
@@ -490,29 +491,28 @@ app.Views.Front.RegClass = Backbone.View.extend({
         // 'click .glm-add-new-account': 'addNewAccount',
         // 'click .add-new-registrant': 'addNew',
         // 'click .add-new-registrant-cancel': 'cancelAddNew',
-        'click .timeSelection': 'updateTimeSelection',
+        // 'click .timeSelection': 'updateTimeSelection',
         'click .fc-event-container': 'updateTimeSelection',
     },
 
     updateTimeSelection: function(e){
         console.log('updateTimeSelection called');
-        var timeId = e.currentTarget.value;
-        // console.log( timeId );
+        var timeId = this.$('.timeSelection').val().trim();
+        console.log( timeId );
         // Check to see if the time is already in the collection
         // If it is then do nothing
-        console.log(this.model.get('regTimes'));
+        console.log(this.model.regTimes);
 
         var findRegTime = this.model.regTimes.where({ id: timeId });
         console.log(findRegTime.length);
         if ( findRegTime.length == 0 ) {
             console.log('regTime not found, creating one.');
-            this.model.set({ selectedTime: parseInt( e.currentTarget.value ) });
+            this.model.set({ selectedTime: parseInt( timeId ) });
             // Add the RegTime model/view into this view
-            // console.log( e.currentTarget.value );
             // console.log( app.Times );
             var targetTime = null;
             for ( var i = 0; i < app.Times.length; i++ ) {
-                if ( app.Times[i].id == e.currentTarget.value ) {
+                if ( app.Times[i].id == timeId ) {
                     targetTime = app.Times[i];
                 }
             }
@@ -559,10 +559,7 @@ app.Views.Front.RegClass = Backbone.View.extend({
                 this.$('.glm-add-new-account').show();
             }
         }
-        if ( app.timeSpecific ) {
-            // Need to require that the user select the time before entering attendees.
-            this.setCalendar();
-        }
+        this.onRenderComplete();
         return this;
     },
 
@@ -579,17 +576,26 @@ app.Views.Front.RegClass = Backbone.View.extend({
                 name: time.name
             } );
         });
-        // console.log( timeParts );
         return timeParts;
     },
 
+    onRenderComplete: function() {
+        if (!$.contains(document.documentElement, this.el)) {
+            var that = this;
+            setTimeout(function(){
+                that.onRenderComplete();
+            }, 200);
+            return;
+        }
+        if ( app.timeSpecific ) {
+            this.setCalendar();
+        }
+        console.log('called onRenderComplete');
+    },
+
     setCalendar: function(){
         console.log( 'setting calendar' );
         var times = this.model.get( 'times' );
-        // console.log(times);
-        // console.log(app.Times);
-        // console.log(times);
-        // console.log('#eventCalendar-' + this.model.get('id'));
         $('#eventCalendar-' + this.model.get('id')).fullCalendar({
             events: function(start, end, timezone, callback) {
                 var events = [];
@@ -610,7 +616,7 @@ app.Views.Front.RegClass = Backbone.View.extend({
             eventClick: function( calEvent, jsEvent, view ){
                 $('.fc-event').css( 'background-color', '#3a67ad' );
                 $(this).css( 'background-color', 'red' );
-                // jQuery( '#add_reg-select-time' ).val( calEvent.reg_time );
+                jQuery( '.timeSelection' ).val( calEvent.reg_time );
                 // jQuery( '#add_reg-select-time-display' ).html( calEvent.start.format( 'L LT' ) );
             },
         });

diff --git a/js/models/front/regEvent.js b/js/models/front/regEvent.js
index 5dc68c5..a8c57cd 100644 (file)
--- a/js/models/front/regEvent.js
+++ b/js/models/front/regEvent.js
@@ -36,6 +36,7 @@ app.Models.Front.RegEvent = Backbone.Model.extend({
                 if ( !hasRegTime ) {
                     foundClass.regTimes.create( foundRegTime[0] );
                     hasRegTime = foundClass.regTimes.findWhere({ id: foundRegTime[0].id });
+                    hasRegTime.set({ parent: foundClass });
                 }
                 // Add the registrant
                 var nRegTime = foundClass.regTimes.findWhere({id: hasRegTime.get('id')});

diff --git a/js/views/front/regClass.js b/js/views/front/regClass.js
index 8d2766e..96990cc 100644 (file)
--- a/js/views/front/regClass.js
+++ b/js/views/front/regClass.js
@@ -24,29 +24,28 @@ app.Views.Front.RegClass = Backbone.View.extend({
         // 'click .glm-add-new-account': 'addNewAccount',
         // 'click .add-new-registrant': 'addNew',
         // 'click .add-new-registrant-cancel': 'cancelAddNew',
-        'click .timeSelection': 'updateTimeSelection',
+        // 'click .timeSelection': 'updateTimeSelection',
         'click .fc-event-container': 'updateTimeSelection',
     },
 
     updateTimeSelection: function(e){
         console.log('updateTimeSelection called');
-        var timeId = e.currentTarget.value;
-        // console.log( timeId );
+        var timeId = this.$('.timeSelection').val().trim();
+        console.log( timeId );
         // Check to see if the time is already in the collection
         // If it is then do nothing
-        console.log(this.model.get('regTimes'));
+        console.log(this.model.regTimes);
 
         var findRegTime = this.model.regTimes.where({ id: timeId });
         console.log(findRegTime.length);
         if ( findRegTime.length == 0 ) {
             console.log('regTime not found, creating one.');
-            this.model.set({ selectedTime: parseInt( e.currentTarget.value ) });
+            this.model.set({ selectedTime: parseInt( timeId ) });
             // Add the RegTime model/view into this view
-            // console.log( e.currentTarget.value );
             // console.log( app.Times );
             var targetTime = null;
             for ( var i = 0; i < app.Times.length; i++ ) {
-                if ( app.Times[i].id == e.currentTarget.value ) {
+                if ( app.Times[i].id == timeId ) {
                     targetTime = app.Times[i];
                 }
             }
@@ -93,10 +92,7 @@ app.Views.Front.RegClass = Backbone.View.extend({
                 this.$('.glm-add-new-account').show();
             }
         }
-        if ( app.timeSpecific ) {
-            // Need to require that the user select the time before entering attendees.
-            this.setCalendar();
-        }
+        this.onRenderComplete();
         return this;
     },
 
@@ -113,17 +109,26 @@ app.Views.Front.RegClass = Backbone.View.extend({
                 name: time.name
             } );
         });
-        // console.log( timeParts );
         return timeParts;
     },
 
+    onRenderComplete: function() {
+        if (!$.contains(document.documentElement, this.el)) {
+            var that = this;
+            setTimeout(function(){
+                that.onRenderComplete();
+            }, 200);
+            return;
+        }
+        if ( app.timeSpecific ) {
+            this.setCalendar();
+        }
+        console.log('called onRenderComplete');
+    },
+
     setCalendar: function(){
         console.log( 'setting calendar' );
         var times = this.model.get( 'times' );
-        // console.log(times);
-        // console.log(app.Times);
-        // console.log(times);
-        // console.log('#eventCalendar-' + this.model.get('id'));
         $('#eventCalendar-' + this.model.get('id')).fullCalendar({
             events: function(start, end, timezone, callback) {
                 var events = [];
@@ -144,7 +149,7 @@ app.Views.Front.RegClass = Backbone.View.extend({
             eventClick: function( calEvent, jsEvent, view ){
                 $('.fc-event').css( 'background-color', '#3a67ad' );
                 $(this).css( 'background-color', 'red' );
-                // jQuery( '#add_reg-select-time' ).val( calEvent.reg_time );
+                jQuery( '.timeSelection' ).val( calEvent.reg_time );
                 // jQuery( '#add_reg-select-time-display' ).html( calEvent.start.format( 'L LT' ) );
             },
         });

diff --git a/views/front/registrations/registration.html b/views/front/registrations/registration.html
index 4b8eb85..17f7ad5 100644 (file)
--- a/views/front/registrations/registration.html
+++ b/views/front/registrations/registration.html
@@ -62,23 +62,7 @@
                 <div class="glm-columns glm-small-12 glm-large-12"> Per Registrant: $<%= reg_rate_per_reg %> </div>
                 <div class="glm-columns glm-small-12 glm-large-12 glm-hidden">
                     <% if ( app.timeSpecific ) { %>
-                        <b>Select a time</b>
-                        <% var curSchedule = ''; %>
-                        <% _.each( this.getTimeArray(), function(time){ %>
-                            <% if ( curSchedule != time.name ) { %>
-                                <div>
-                                    <%= time.fromDate.toLocaleDateString('en-US') %>
-                                </div>
-                            <% } %>
-                            <% curSchedule = time.name; %>
-                            <label class="reg-time">
-                                <button class="tiny timeSelection" value="<%= time.id %>">
-                                    <%= time.fromDate.toLocaleTimeString('en-US', {hour: '2-digit', minute: '2-digit'}) %>
-                                    -
-                                    <%= time.toDate.toLocaleTimeString('en-US', {hour: '2-digit', minute: '2-digit'}) %>
-                                </button>
-                            </label>
-                        <% }); %>
+                        <input class="timeSelection" type="hidden" name="timeOption">
                     <% } else { %>
                         <% _.each( this.getTimeArray(), function(time){ %>
                             <input class="timeSelection" type="hidden" name="timeOption" value="<%= time.id %>">
@@ -97,7 +81,6 @@
             </div>
         </div>
         <div class="glm-columns glm-small-12 glm-large-6">
-            Calendar to goes here!
             <div id="eventCalendar-<%= id %>" style="width: 95%;"></div>
         </div>
     </div>
@@ -222,7 +205,7 @@
 <div class="glm-reg-event-list">
     <h1>{$terms.reg_term_registrations_name}</h1>
     {include file='front/registrations/header.html'}
-    
+
 {if $reg_bulletin}
     <div>
         {$reg_bulletin}