Update Add attendee forms and add loading graphic.

Adding loading graphic for when an attendee is added.
Remove the link for the address fields.
Adding title for the custom fields.

diff --git a/assets/ajax-loader.gif b/assets/ajax-loader.gif
new file mode 100644 (file)
index 0000000..7eca290
Binary files /dev/null and b/assets/ajax-loader.gif differ

diff --git a/css/front.css b/css/front.css
index 10cebde..b319bd6 100644 (file)
--- a/css/front.css
+++ b/css/front.css
@@ -165,7 +165,7 @@
     width: 24px;
     height: 24px;
     left: -5px;
-    
+
 }
 .glm-reg-terms-conditions{
     border: 1px solid darkgrey;
@@ -223,7 +223,7 @@ form#checkoutForm h5{
     letter-spacing: 1px;
     font-family: Arial;
     color: #1479b0;
-} 
+}
 
 
 .glm-reg-event-terms{
@@ -317,6 +317,7 @@ form#checkoutForm h5{
     text-transform: uppercase;
 }
 #glm-reg-detail {
+    position: relative;
     width: 100%;
     padding: 0;
     max-width: 64rem;
@@ -609,6 +610,11 @@ div.glm-reg-forgot h4 {
 /*}}} End Login Page */
 
 /*{{{ New Register Account Form */
+#loading-indicator {
+    position: absolute;
+    left: 30%;
+    top: 40%;
+}
 div.glm-reg-register {
     background-color: white;
     border: solid 1px black;
@@ -765,7 +771,7 @@ span.glm-error {
 }
 #accountHeader .glm-reg-header-btn:hover {
     text-decoration: none;
-    
+
 }
 #accountHeader #register {
     clear: both;
@@ -791,14 +797,14 @@ span.glm-error {
         float: none;
         margin: 10px auto;
         width: 250px;
-    }    
+    }
     #accountHeader-right .glm-reg-header-btn {
         float: none;
         margin: 10px auto;
         width: 250px;
     }
     #accountHeader .glm-reg-header-btn {
-        
+
     }
 }
 #accountHeader-right {
@@ -927,7 +933,7 @@ span.glm-error {
     margin-bottom: 10px !important;
 }/*
 @media(max-width: 1024px) {
-    
+
     #accountHeader {
         max-width: 300px;
     }
@@ -1046,7 +1052,7 @@ span.glm-error {
     .glm-reg-contact-container::before{
         left: 10px;
     }
-    
+
     .glm-reg-cost::before{
         left: 10px;
     }
@@ -1056,7 +1062,7 @@ span.glm-error {
     .glm-reg-image-container {
         text-align: left;
     }
-/*    
+/*
     #accountHeader #glm-header-reg-widget {
         width: 100%;
     }
@@ -1126,7 +1132,7 @@ span.glm-error {
       text-align: center;
       text-transform: uppercase;
       color: #7d7d7d;
-    
+
   }
   .progressbar li:before {
       width: 30px;
@@ -1142,7 +1148,7 @@ span.glm-error {
       background-color: white;
       position: relative;
       z-index: 1;
-     
+
   }
   .progressbar li:after {
       width: 100%;
@@ -1152,7 +1158,7 @@ span.glm-error {
       background-color: #7d7d7d;
       top: 15px;
       left: -50%;
-      
+
   }
   .progressbar li:first-child:after {
       content: none;
@@ -1209,7 +1215,7 @@ span.glm-error {
     font-weight: bold;
 }
 .glm-reg-cart-registrant .glm-reg-data {
-    
+
 }
 
 /* Checkout styles */
@@ -1260,4 +1266,4 @@ span.glm-error {
 /* for the login form title */
 #ui-id-1.ui-dialog-title {
     line-height: 1;
-}
\ No newline at end of file
+}

diff --git a/js/frontRegApp.js b/js/frontRegApp.js
index df631d5..48b384e 100644 (file)
--- a/js/frontRegApp.js
+++ b/js/frontRegApp.js
@@ -926,14 +926,11 @@ app.Views.Front.RegTime = Backbone.View.extend({
         var accountContainer = this.$('.reg-class-accounts');
         accountContainer.append(view);
         app.regEventLock = false;
-        // console.log( 'attendees_available', this.model.get('attendees_available') );
-        // this.model.set({attendees_available: this.model.get('attendees_available') - this.model.registrants.length });
-        // var available = this.model.get( 'attendees_available' );
-        // if ( available === 0 ) {
-        //     // hide add button
-        //     this.$('.glm-add-new-account').hide();
-        //     this.$('.glm-time-full').show();
-        // }
+        if ( this.model.registrants.length === 0 ) {
+            this.$('.reg-class-accounts-title').hide();
+        } else {
+            this.$('.reg-class-accounts-title').show();
+        }
         return this;
     },
 
@@ -1004,6 +1001,7 @@ app.Views.Front.RegTime = Backbone.View.extend({
         // to the collection.
         var customFieldData = this.$( 'form.attendee-cf-form-new' ).serialize();
 
+        this.$('#loading-' + this.model.get('id') ).show();
         var newRegistrant = this.model.registrants.create({
             option: 'add',
             reg_request: regRequest.id,
@@ -1029,9 +1027,13 @@ app.Views.Front.RegTime = Backbone.View.extend({
         app.regEventLock = false;
     },
 
+    successCallback: function( collection, repsonse ){
+        this.$('#loading-' + this.model.get('id') ).hide();
+    },
+
     errorCallback: function( collection, response ){
-        console.log( 'errorCallback Called' );
-        console.log( response );
+        // console.log( 'errorCallback Called' );
+        // console.log( response );
     },
 
     // cancel add new registrant
@@ -1044,7 +1046,7 @@ app.Views.Front.RegTime = Backbone.View.extend({
 
     // add a registrant to collection
     addOne: function( item ){
-        console.log( 'regTime: addOne called' );
+        // console.log( 'regTime: addOne called' );
         // console.log( item.get('id') );
         this.model.set({selectedTime: item.get('reg_time') })
         this.render();
@@ -1052,7 +1054,7 @@ app.Views.Front.RegTime = Backbone.View.extend({
 
     // delete a registrant in collection
     deleteOne: function( item ){
-        console.log( 'regTime: deleteOne called' );
+        // console.log( 'regTime: deleteOne called' );
         // this.render();
     },
 });

diff --git a/js/views/front/regTime.js b/js/views/front/regTime.js
index 675441e..1177352 100644 (file)
--- a/js/views/front/regTime.js
+++ b/js/views/front/regTime.js
@@ -36,14 +36,11 @@ app.Views.Front.RegTime = Backbone.View.extend({
         var accountContainer = this.$('.reg-class-accounts');
         accountContainer.append(view);
         app.regEventLock = false;
-        // console.log( 'attendees_available', this.model.get('attendees_available') );
-        // this.model.set({attendees_available: this.model.get('attendees_available') - this.model.registrants.length });
-        // var available = this.model.get( 'attendees_available' );
-        // if ( available === 0 ) {
-        //     // hide add button
-        //     this.$('.glm-add-new-account').hide();
-        //     this.$('.glm-time-full').show();
-        // }
+        if ( this.model.registrants.length === 0 ) {
+            this.$('.reg-class-accounts-title').hide();
+        } else {
+            this.$('.reg-class-accounts-title').show();
+        }
         return this;
     },
 
@@ -114,6 +111,7 @@ app.Views.Front.RegTime = Backbone.View.extend({
         // to the collection.
         var customFieldData = this.$( 'form.attendee-cf-form-new' ).serialize();
 
+        this.$('#loading-' + this.model.get('id') ).show();
         var newRegistrant = this.model.registrants.create({
             option: 'add',
             reg_request: regRequest.id,
@@ -139,9 +137,13 @@ app.Views.Front.RegTime = Backbone.View.extend({
         app.regEventLock = false;
     },
 
+    successCallback: function( collection, repsonse ){
+        this.$('#loading-' + this.model.get('id') ).hide();
+    },
+
     errorCallback: function( collection, response ){
-        console.log( 'errorCallback Called' );
-        console.log( response );
+        // console.log( 'errorCallback Called' );
+        // console.log( response );
     },
 
     // cancel add new registrant
@@ -154,7 +156,7 @@ app.Views.Front.RegTime = Backbone.View.extend({
 
     // add a registrant to collection
     addOne: function( item ){
-        console.log( 'regTime: addOne called' );
+        // console.log( 'regTime: addOne called' );
         // console.log( item.get('id') );
         this.model.set({selectedTime: item.get('reg_time') })
         this.render();
@@ -162,7 +164,7 @@ app.Views.Front.RegTime = Backbone.View.extend({
 
     // delete a registrant in collection
     deleteOne: function( item ){
-        console.log( 'regTime: deleteOne called' );
+        // console.log( 'regTime: deleteOne called' );
         // this.render();
     },
 });

diff --git a/models/front/registrations/registration.php b/models/front/registrations/registration.php
index d3fe1f7..2bfe122 100644 (file)
--- a/models/front/registrations/registration.php
+++ b/models/front/registrations/registration.php
@@ -369,6 +369,7 @@
             'reg_bulletin'      => $misc['reg_bulletin'],
             'states_list'       => $this->config['states'],
             'country_list'      => $this->config['countries'],
+            'pluginAssetsUrl'   => GLM_MEMBERS_REGISTRATIONS_PLUGIN_ASSETS_URL,
         );
 
         // echo "<pre>".print_r($templateData,1)."</pre>";

diff --git a/views/front/registrations/registration.html b/views/front/registrations/registration.html
index c78698b..ab92871 100644 (file)
--- a/views/front/registrations/registration.html
+++ b/views/front/registrations/registration.html
@@ -206,6 +206,10 @@
     <div class="reg-class-accounts">
         <span class="reg-class-accounts-title">List of {/literal}{$terms.reg_term_attendee_plur}{literal}</span>
     </div>
+    <img style="display:none;"
+    src="{/literal}{$pluginAssetsUrl}{literal}/ajax-loader.gif"
+    class="loading-indicator"
+    id="loading-<%= id %>">
 </script>
 {/literal}
 {* Template for registrant add form *}{literal}
@@ -219,6 +223,10 @@
                     <div class="columns small-12 text-right glm-reg-required">
                         * Required Fields
                     </div>
+                    <div class="columns small-12">&nbsp;</div>
+                </div>
+                <div class="row">
+                    <div class="columns small-12 text-right glm-reg-required">Email is required for notifications</div>
                 </div>
                 <div class="row">
                     <div class="columns large-4 small-12 text-right">Email&nbsp;Address</div>
@@ -232,15 +240,7 @@
                     <div class="columns large-4 small-12 text-right glm-reg-required">Last Name *</div>
                     <div class="columns large-8 small-12"><input class="add_reg_lname" value="<%- lname %>"></div>
                 </div>
-                <form class="attendee-cf-form-new">
-                    <div class="attendee-cf-new">
-                        {/literal}
-                            {$fid = "glm_reg_customfields_reg_event_attendee_$regEventId"}
-                            {apply_filters( 'glm-members-customfields-form-display', '', $fid )}
-                        {literal}
-                    </div>
-                </form>
-                <div>
+                <div class="row ereg-addr">
                     <a class="show-hide-address">Address (show/hide)</a>
                 </div>
                 <div class="row ereg-addr">
@@ -285,6 +285,17 @@
                         </select>
                     </div>
                 </div>
+                {/literal}{if apply_filters('glm-members-customfields-plugin-active', false)}{literal}
+                <h4>Additional Info Needed</h4>
+                <form class="attendee-cf-form-new">
+                    <div class="attendee-cf-new">
+                        {/literal}
+                            {$fid = "glm_reg_customfields_reg_event_attendee_$regEventId"}
+                            {apply_filters( 'glm-members-customfields-form-display', '', $fid )}
+                        {literal}
+                    </div>
+                </form>
+                {/literal}{/if}{literal}
                 {/literal}{if $regEvent.time_specific.value}
                     <input type="hidden" id="add_reg-select-time">
                 {/if}{literal}
@@ -311,6 +322,10 @@
                         <div class="columns small-12 text-right glm-reg-required">
                             * Required Fields
                         </div>
+                        <div class="columns small-12">&nbsp;</div>
+                    </div>
+                    <div class="row">
+                        <div class="columns small-12 text-right glm-reg-required">Email is required for notifications</div>
                     </div>
                     <div class="row">
                         <div class="columns large-4 small-12 text-right">Email&nbsp;Address</div>
@@ -324,8 +339,7 @@
                         <div class="columns large-4 small-12 text-right glm-reg-required">Last Name *</div>
                         <div class="columns large-8 small-12"><input class="reg_lname" value="<%- lname %>"></div>
                     </div>
-                    <form class="attendee-cf-form-<%= id %>"><div class="attendee-cf-<%= id %>"></div></form>
-                    <div>
+                    <div class="row ereg-addr">
                         <a class="show-hide-address">Address (show/hide)</a>
                     </div>
                     <div class="row ereg-addr">
@@ -370,6 +384,10 @@
                             </select>
                         </div>
                     </div>
+                    {/literal}{if apply_filters('glm-members-customfields-plugin-active', false)}{literal}
+                        <h4>Additional Info Needed</h4>
+                        <form class="attendee-cf-form-<%= id %>"><div class="attendee-cf-<%= id %>"></div></form>
+                    {/literal}{/if}{literal}
                 </div>
             {/literal}{if $regEvent.time_specific.value}
                 <div>
@@ -385,6 +403,7 @@
 </script>
 {/literal}
 <div id="glm-reg-detail">
+
     <h1>{$terms.reg_term_registrations_name}</h1>
     {apply_filters('glm_members_registrations_header', 'accountHeader')}
     <div class="row progress-row">