From: Steve Sutton <steve@gaslightmedia.com>
Date: Fri, 10 Nov 2017 22:02:55 +0000 (-0500)
Subject: WIP setup calendar for the time selection.
X-Git-Tag: v1.0.0^2~288
X-Git-Url: http://cvs2.gaslightmedia.com/gitweb/?a=commitdiff_plain;h=597a8366e21f558d981a6b90077337a2504ceae2;p=WP-Plugins%2Fglm-member-db-registrations.git

WIP setup calendar for the time selection.

hidding the other time selection right now.
---

diff --git a/js/frontRegApp.js b/js/frontRegApp.js
index 2fffb04..a3b3f04 100644
--- a/js/frontRegApp.js
+++ b/js/frontRegApp.js
@@ -104,7 +104,7 @@ app.Models.Front.RegClass = Backbone.Model.extend({
     },
 
     initialize: function(){
-        this.registrants = new app.Collections.Front.RegRequestRegistrants( [] );
+        // this.registrants = new app.Collections.Front.RegRequestRegistrants( [] );
         this.regTimes = new app.Collections.Front.RegTimes( [] );
     },
 
@@ -491,17 +491,25 @@ app.Views.Front.RegClass = Backbone.View.extend({
         // 'click .add-new-registrant': 'addNew',
         // 'click .add-new-registrant-cancel': 'cancelAddNew',
         'click .timeSelection': 'updateTimeSelection',
+        'click .fc-event-container': 'updateTimeSelection',
     },
 
     updateTimeSelection: function(e){
+        console.log('updateTimeSelection called');
+        var timeId = e.currentTarget.value;
+        // console.log( timeId );
         // Check to see if the time is already in the collection
         // If it is then do nothing
-        var findRegTime = this.model.regTimes.findWhere({ id: e.currentTarget.value });
-        if ( !findRegTime ) {
+        console.log(this.model.get('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 ) });
             // Add the RegTime model/view into this view
             // console.log( e.currentTarget.value );
-            console.log( app.Times );
+            // console.log( app.Times );
             var targetTime = null;
             for ( var i = 0; i < app.Times.length; i++ ) {
                 if ( app.Times[i].id == e.currentTarget.value ) {
@@ -517,7 +525,7 @@ app.Views.Front.RegClass = Backbone.View.extend({
     },
 
     render: function(){
-        this.model.set({ reg_count: this.model.registrants.length });
+        // this.model.set({ reg_count: this.model.registrants.length });
         this.$el.html( this.template( this.model.toJSON() ) );
         // Go through the RegTimes Collection and render those
         // var view = this.model.
@@ -535,9 +543,6 @@ app.Views.Front.RegClass = Backbone.View.extend({
         // var accountContainer = this.$('.reg-class-accounts');
         // accountContainer.append(view);
 
-        if ( app.timeSpecific ) {
-            // Need to require that the user select the time before entering attendees.
-        }
         if ( loginAccount === '' ) {
             this.$('.glm-add-account').hide();
         }
@@ -554,6 +559,10 @@ 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();
+        }
         return this;
     },
 
@@ -577,8 +586,11 @@ app.Views.Front.RegClass = Backbone.View.extend({
     setCalendar: function(){
         console.log( 'setting calendar' );
         var times = this.model.get( 'times' );
-        console.log(times);
-        $('#eventCalendar').fullCalendar({
+        // 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 = [];
                 _.each( times, function( time ){
@@ -598,8 +610,8 @@ 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( '#add_reg-select-time-display' ).html( calEvent.start.format( 'L LT' ) );
+                // jQuery( '#add_reg-select-time' ).val( calEvent.reg_time );
+                // jQuery( '#add_reg-select-time-display' ).html( calEvent.start.format( 'L LT' ) );
             },
         });
     },
diff --git a/js/models/front/regClass.js b/js/models/front/regClass.js
index 2ef5cc2..d7e0700 100644
--- a/js/models/front/regClass.js
+++ b/js/models/front/regClass.js
@@ -19,7 +19,7 @@ app.Models.Front.RegClass = Backbone.Model.extend({
     },
 
     initialize: function(){
-        this.registrants = new app.Collections.Front.RegRequestRegistrants( [] );
+        // this.registrants = new app.Collections.Front.RegRequestRegistrants( [] );
         this.regTimes = new app.Collections.Front.RegTimes( [] );
     },
 
diff --git a/js/views/front/regClass.js b/js/views/front/regClass.js
index 7a8bd04..8d2766e 100644
--- a/js/views/front/regClass.js
+++ b/js/views/front/regClass.js
@@ -25,17 +25,25 @@ app.Views.Front.RegClass = Backbone.View.extend({
         // 'click .add-new-registrant': 'addNew',
         // 'click .add-new-registrant-cancel': 'cancelAddNew',
         'click .timeSelection': 'updateTimeSelection',
+        'click .fc-event-container': 'updateTimeSelection',
     },
 
     updateTimeSelection: function(e){
+        console.log('updateTimeSelection called');
+        var timeId = e.currentTarget.value;
+        // console.log( timeId );
         // Check to see if the time is already in the collection
         // If it is then do nothing
-        var findRegTime = this.model.regTimes.findWhere({ id: e.currentTarget.value });
-        if ( !findRegTime ) {
+        console.log(this.model.get('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 ) });
             // Add the RegTime model/view into this view
             // console.log( e.currentTarget.value );
-            console.log( app.Times );
+            // console.log( app.Times );
             var targetTime = null;
             for ( var i = 0; i < app.Times.length; i++ ) {
                 if ( app.Times[i].id == e.currentTarget.value ) {
@@ -51,7 +59,7 @@ app.Views.Front.RegClass = Backbone.View.extend({
     },
 
     render: function(){
-        this.model.set({ reg_count: this.model.registrants.length });
+        // this.model.set({ reg_count: this.model.registrants.length });
         this.$el.html( this.template( this.model.toJSON() ) );
         // Go through the RegTimes Collection and render those
         // var view = this.model.
@@ -69,9 +77,6 @@ app.Views.Front.RegClass = Backbone.View.extend({
         // var accountContainer = this.$('.reg-class-accounts');
         // accountContainer.append(view);
 
-        if ( app.timeSpecific ) {
-            // Need to require that the user select the time before entering attendees.
-        }
         if ( loginAccount === '' ) {
             this.$('.glm-add-account').hide();
         }
@@ -88,6 +93,10 @@ 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();
+        }
         return this;
     },
 
@@ -111,8 +120,11 @@ app.Views.Front.RegClass = Backbone.View.extend({
     setCalendar: function(){
         console.log( 'setting calendar' );
         var times = this.model.get( 'times' );
-        console.log(times);
-        $('#eventCalendar').fullCalendar({
+        // 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 = [];
                 _.each( times, function( time ){
@@ -132,8 +144,8 @@ 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( '#add_reg-select-time-display' ).html( calEvent.start.format( 'L LT' ) );
+                // jQuery( '#add_reg-select-time' ).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 8399c67..4b8eb85 100644
--- a/views/front/registrations/registration.html
+++ b/views/front/registrations/registration.html
@@ -60,7 +60,7 @@
                 <div class="glm-columns glm-small-12 glm-large-12"> <%= reg_rate_name  %> </div>
                 <div class="glm-columns glm-small-12 glm-large-12"> Base Rate: $<%= reg_rate_base_price %> </div>
                 <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">
+                <div class="glm-columns glm-small-12 glm-large-12 glm-hidden">
                     <% if ( app.timeSpecific ) { %>
                         <b>Select a time</b>
                         <% var curSchedule = ''; %>
@@ -87,15 +87,19 @@
                 </div>
             </div>
         </div>
-        <div class="glm-columns glm-small-12 glm-large-12">
+        <div class="glm-columns glm-small-12 glm-large-6">
             <div class="reg-class-detail">
+                &nbsp;
                 <% if ( loggedIn ) { %>
                     <button class="glm-add-account tiny">Add Me</button>
                 <% } %>
-                <div class="reg-class-times">
-                </div>
+                <div class="reg-class-times"> </div>
             </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>
 </script>
 {/literal}
@@ -113,7 +117,7 @@
     {/literal}{if $regEvent.time_specific.value}
     {/if}{literal}
         <div class="glm-row">
-            <div class="glm-columns glm-small-12 glm-large-6">
+            <div class="glm-columns glm-small-12 glm-large-12">
                 <h4>{/literal}{$terms.reg_term_contact_information}{literal}</h4>
                 <div class="glm-row">
                     <div class="glm-columns glm-large-4 glm-small-12">First Name</div>