From d7cdeedb00631ace62659ca2d0cff29e6b0fa2d5 Mon Sep 17 00:00:00 2001
From: Steve Sutton <steve@gaslightmedia.com>
Date: Fri, 15 Dec 2017 13:05:59 -0500
Subject: [PATCH] Pull in form custom fields in attendee form

Pulling in the custom fields into the add attendee form.
---
 js/frontRegApp.js                           | 39 +++++++++++++++++++--
 js/views/front/regClass.js                  |  2 ++
 js/views/front/regTime.js                   | 13 +++++--
 js/views/front/registrantForm.js            | 24 +++++++++++++
 views/front/registrations/registration.html | 28 +++++++--------
 5 files changed, 86 insertions(+), 20 deletions(-)

diff --git a/js/frontRegApp.js b/js/frontRegApp.js
index 6cff1e7..80aa485 100644
--- a/js/frontRegApp.js
+++ b/js/frontRegApp.js
@@ -561,7 +561,9 @@ app.Views.Front.RegClass = Backbone.View.extend({
         // Go through the RegTimes Collection and render those
         // var view = this.model.
         // this.model.regTimes.sort();
+        // var classId = this.model.id;
         var view = this.model.regTimes.map(function(item){
+            // item.parent = classId;
             return (new app.Views.Front.RegTime({ model: item })).render().el;
         });
         var timeContainer = this.$('.reg-class-times');
@@ -944,7 +946,11 @@ app.Views.Front.RegTime = Backbone.View.extend({
         if ( app.timeSpecific ) {
             this.newRegAccount = new app.Models.Front.RegRequestRegistrant({ reg_time: this.model.get( 'selectedTime' ) });
         } else {
-            this.newRegAccount = new app.Models.Front.RegRequestRegistrant();
+            // console.log(this.model);
+            this.newRegAccount = new app.Models.Front.RegRequestRegistrant({
+                reg_event: this.model.get('reg_event'),
+                reg_class: this.model.get('parent')
+            });
         }
         this.newRegAccountView = new app.Views.Front.RegistrantForm({model: this.newRegAccount});
         this.$el.append( this.newRegAccountView.render().el );
@@ -990,14 +996,14 @@ app.Views.Front.RegTime = Backbone.View.extend({
         if ( !parent ) {
             return;
         }
+
         if ( findByEmail.length === 0 ) {
-            this.model.registrants.create({
+            var newRegistrant = this.model.registrants.create({
                 option: 'add',
                 reg_request: regRequest.id,
                 reg_time: this.model.get( 'id' ),
                 reg_event: this.model.get( 'reg_event' ), // Todo: use correct reg_event
                 reg_class: this.model.get( 'parent' ).id, // Todo: use correct reg_class
-                // event_name: regEvent.get( 'event_name' ),
                 reg_rate: rateId,
                 email: email,
                 fname: fname,
@@ -1009,7 +1015,10 @@ app.Views.Front.RegTime = Backbone.View.extend({
                 zip: zip,
                 country: country,
             });
+            // console.log( newRegistrant );
         }
+
+        // return false;
         // this.newRegAccount.destroy();
         this.newRegAccountView.remove();
         app.regEventLock = false;
@@ -1061,9 +1070,33 @@ app.Views.Front.RegistrantForm = Backbone.View.extend({
     // render the view
     render: function(){
         this.$el.html( this.template( this.model.toJSON() ) );
+        // console.log( this.model.get('reg_event') );
+        this.setCustomFieldsForm();
         return this;
     },
 
+    setCustomFieldsForm: function(){
+        var formData = {
+            'action': 'glm_members_admin_ajax',
+            'glm_action': 'customFieldsFront',
+            'option': 'displayForm',
+            'fid': 'glm_reg_customfields_reg_event_attendee_' + this.model.get('reg_event'),
+            'recordId': '1',
+            'parentFormId': 'abc-123',
+            'formData': false
+        };
+        $.ajax({
+            type: 'POST',
+            url: ajaxUrl,
+            data: formData,
+            encode: true,
+            dataType: 'text'
+        })
+        .done( function( formHtml ) {
+            $('.attendee-cf').html( formHtml );
+        });
+    },
+
     // verify the email address
     verifyEmail: function(){
         var email = this.$('.add_reg_email').val().trim();
diff --git a/js/views/front/regClass.js b/js/views/front/regClass.js
index 5bfb2c4..b2d6ec6 100644
--- a/js/views/front/regClass.js
+++ b/js/views/front/regClass.js
@@ -70,7 +70,9 @@ app.Views.Front.RegClass = Backbone.View.extend({
         // Go through the RegTimes Collection and render those
         // var view = this.model.
         // this.model.regTimes.sort();
+        // var classId = this.model.id;
         var view = this.model.regTimes.map(function(item){
+            // item.parent = classId;
             return (new app.Views.Front.RegTime({ model: item })).render().el;
         });
         var timeContainer = this.$('.reg-class-times');
diff --git a/js/views/front/regTime.js b/js/views/front/regTime.js
index 609e0a0..ad3da57 100644
--- a/js/views/front/regTime.js
+++ b/js/views/front/regTime.js
@@ -47,7 +47,11 @@ app.Views.Front.RegTime = Backbone.View.extend({
         if ( app.timeSpecific ) {
             this.newRegAccount = new app.Models.Front.RegRequestRegistrant({ reg_time: this.model.get( 'selectedTime' ) });
         } else {
-            this.newRegAccount = new app.Models.Front.RegRequestRegistrant();
+            // console.log(this.model);
+            this.newRegAccount = new app.Models.Front.RegRequestRegistrant({
+                reg_event: this.model.get('reg_event'),
+                reg_class: this.model.get('parent')
+            });
         }
         this.newRegAccountView = new app.Views.Front.RegistrantForm({model: this.newRegAccount});
         this.$el.append( this.newRegAccountView.render().el );
@@ -93,14 +97,14 @@ app.Views.Front.RegTime = Backbone.View.extend({
         if ( !parent ) {
             return;
         }
+
         if ( findByEmail.length === 0 ) {
-            this.model.registrants.create({
+            var newRegistrant = this.model.registrants.create({
                 option: 'add',
                 reg_request: regRequest.id,
                 reg_time: this.model.get( 'id' ),
                 reg_event: this.model.get( 'reg_event' ), // Todo: use correct reg_event
                 reg_class: this.model.get( 'parent' ).id, // Todo: use correct reg_class
-                // event_name: regEvent.get( 'event_name' ),
                 reg_rate: rateId,
                 email: email,
                 fname: fname,
@@ -112,7 +116,10 @@ app.Views.Front.RegTime = Backbone.View.extend({
                 zip: zip,
                 country: country,
             });
+            // console.log( newRegistrant );
         }
+
+        // return false;
         // this.newRegAccount.destroy();
         this.newRegAccountView.remove();
         app.regEventLock = false;
diff --git a/js/views/front/registrantForm.js b/js/views/front/registrantForm.js
index 8a60544..3123822 100644
--- a/js/views/front/registrantForm.js
+++ b/js/views/front/registrantForm.js
@@ -24,9 +24,33 @@ app.Views.Front.RegistrantForm = Backbone.View.extend({
     // render the view
     render: function(){
         this.$el.html( this.template( this.model.toJSON() ) );
+        // console.log( this.model.get('reg_event') );
+        this.setCustomFieldsForm();
         return this;
     },
 
+    setCustomFieldsForm: function(){
+        var formData = {
+            'action': 'glm_members_admin_ajax',
+            'glm_action': 'customFieldsFront',
+            'option': 'displayForm',
+            'fid': 'glm_reg_customfields_reg_event_attendee_' + this.model.get('reg_event'),
+            'recordId': '1',
+            'parentFormId': 'abc-123',
+            'formData': false
+        };
+        $.ajax({
+            type: 'POST',
+            url: ajaxUrl,
+            data: formData,
+            encode: true,
+            dataType: 'text'
+        })
+        .done( function( formHtml ) {
+            $('.attendee-cf').html( formHtml );
+        });
+    },
+
     // verify the email address
     verifyEmail: function(){
         var email = this.$('.add_reg_email').val().trim();
diff --git a/views/front/registrations/registration.html b/views/front/registrations/registration.html
index b9e7cf7..3ff3e10 100644
--- a/views/front/registrations/registration.html
+++ b/views/front/registrations/registration.html
@@ -33,7 +33,7 @@ jQuery(document).ready(function($) {
         .done( function(formHtml) {
             $('#test-form-container').html(formHtml);
         });
-        
+
     });
 
 });
@@ -61,14 +61,14 @@ jQuery(document).ready(function($) {
             <h1 id="glm-reg-event-name"><%= event_name %></h1>
             <div class="row">
                 {/literal}
-              
+
                 {if $regEvent.image}
-                <div class="small-12 medium-6 large-4 columns glm-reg-image-container"> 
+                <div class="small-12 medium-6 large-4 columns glm-reg-image-container">
                     <img src="{$imgBaseUrl}/medium/{$regEvent.image}"/>
                 </div>
                 {/if}
                 <div class="small-12 medium-6 large-5 columns glm-reg-event-profile-details-container">
-                
+
                     <div class="row">
                         <div class="small-12 columns glm-reg-event-profile-details glm-reg-date"> {$regEvent.first_datetime.timestamp|date_format:"%A, %B %e, %Y"}</div>
 
@@ -78,7 +78,7 @@ jQuery(document).ready(function($) {
                              <div class="small-12 columns glm-reg-event-profile-details glm-reg-time"> {$regEvent.first_datetime.timestamp|date_format:"%l:%M %p"}</div>
                         {/if}
                         {if $regEvent.locations.name || $regEvent.locations.address}
-                            <div class="small-12 columns glm-reg-event-profile-details glm-reg-location"> 
+                            <div class="small-12 columns glm-reg-event-profile-details glm-reg-location">
                                 {$regEvent.locations.name}
                                 {if $regEvent.locations.address}
                                     <br>{$regEvent.locations.address}
@@ -148,7 +148,7 @@ jQuery(document).ready(function($) {
         <div class="columns small-12 glm-reg-class-container">
             <div class="row glm-reg-event-details">
                 <span class="columns small-12 large-3 glm-reg-level-title glm-reg-level-info"><%= name %></span>
-                
+
 <!--                <div class="columns small-12 large-2 glm-reg-level-info"> <%= reg_rate_name  %> </div>-->
                 <% if( reg_rate_base_price ){ %>
                     <div class="columns small-12 large-2 glm-reg-level-info"> Base Rate: $<%= reg_rate_base_price %> </div>
@@ -176,7 +176,7 @@ jQuery(document).ready(function($) {
             <div class="row reg-class-detail collapsed">
                 &nbsp;
                 <div class="reg-class-times"> </div>
-                
+
                 <% if ( app.timeSpecific ) { %>
                     <div class="glm-reg-warning show-for-medium-up">
 <!--                        Please select a Date / Time!
@@ -223,6 +223,7 @@ jQuery(document).ready(function($) {
                     <div class="columns large-4 small-12">Email Address</div>
                     <div class="columns large-8 small-12"><input class="add_reg_email" value="<%- email %>"></div>
                 </div>
+                <div class="attendee-cf"></div>
                 <div>
                     <a class="show-hide-address">Address (show/hide)</a>
                 </div>
@@ -377,7 +378,6 @@ var app = {
     },
     regEventLock: false,
     checkForEditLock: function(){
-        console.log(app.regEventLock);
         if ( app.regEventLock === true ) {
             alert('Please complete your other edit first.');
             return true;
@@ -410,14 +410,14 @@ jQuery(function($){
     regEvent.setClasses( {$regClassesJSON} );
     regEvent.setClassRegistrants( {$regJSON} );
     var glmApp = new app.Views.Front.App();
-    
+
     $("#glm-reg-detail-map-button").click(function() {
         var map_container   = "#glm-reg-map-container";
         var map             = "#glm-reg-map";
         var mapNewH         = 0;
         var mapOverflow     = 'hidden';
         var mapBtnTxt       = 'view map';
-        
+
         if ($(map_container).height() == 0) {
             mapNewH = 250;
             mapV = 'visible';
@@ -440,11 +440,11 @@ jQuery(function($){
         // Set default - Need to make this configurable
         var map = new google.maps.Map(document.getElementById('glm-reg-map'), {
             zoom: {$settings.maps_default_zoom},
-            center: eventlocation, 
+            center: eventlocation,
             disableDefaultUI: false,
             mapTypeId: google.maps.MapTypeId.MAP,
         });
-        
+
         // Create a marker for this event
         {if $regEvent.locations.lat !=0 && $regEvent.locations.lon != 0}
                 var marker = new google.maps.Marker({
@@ -467,11 +467,11 @@ jQuery(function($){
         return false;
     });
     var reg_class_detail = "#regApp .glm-reg-event-details";
-    
+
     $(reg_class_detail).click(function() {
         $(this).parent().children(".reg-class-detail").slideToggle("fast", "swing",  function() {});
         $(this).parent().children(".reg-class-detail").toggleClass("collapsed");
-        
+
     });
 });
 </script>
-- 
2.17.1