Front end work for backbone.js

Getting the view and model to update and render when the collection of
accounts get added to by the view for the regClass.

diff --git a/js/collections/front/accounts.js b/js/collections/front/accounts.js
index 5055e74..e4f4adc 100644 (file)
--- a/js/collections/front/accounts.js
+++ b/js/collections/front/accounts.js
@@ -7,7 +7,8 @@ app.Collections.Front.Accounts = Backbone.Collection.extend({
     localStorage: new Backbone.LocalStorage( 'Accounts' ),
 
     sync: function( method, model, options ){
-        console.log('sync called on collection. method: ' + method );
+        //console.log('sync called on collection. method: ' + method );
+
     },
 
 });

diff --git a/js/frontRegApp.js b/js/frontRegApp.js
index 2c314ce..470566f 100644 (file)
--- a/js/frontRegApp.js
+++ b/js/frontRegApp.js
@@ -1 +1 @@
-app.Models.Front.Account=Backbone.Model.extend({defaults:{id:"",email:"",parent:""},initialize:function(){this.on("invalid",function(e,t){console.log(t)})},validate:function(e,t){if(void 0===e.email||""===e.email)return"Need an email address!"}}),app.Models.Front.AccountDetail=app.Models.Front.Account.extend({defaults:{id:"",fname:"",lname:"",org:"",title:"",addr1:"",addr2:"",city:"",state:"",zip:"",country:"",phone:"",fax:"",email_ok:!1,is_member:!1,date_created:"",email:"",parent:""}}),app.Models.Front.Login=Backbone.Model.extend({defaults:{username:"",password:""},urlRoot:appLoginUrl,initialize:function(){this.on("invalid",function(e,t){console.log(t)})},validate:function(e,t){return void 0===e.username||""===e.username?"Username required!":void 0===e.password||""===e.password?"Password required!":void 0}}),app.Models.Front.RegClass=Backbone.Model.extend({defaults:{reg_event:0,name:"",descr:"",reg_rate_name:"",reg_rate_base_price:"",reg_rate_per_reg:"",reg_count:0},initialize:function(){this.accounts=new app.Collections.Front.Accounts}}),app.Models.Front.RegEvent=Backbone.Model.extend({defaults:{name:"regEvent",event_name:"",event_code:"",notify_email:"",attendees_max:0,attendees_max_per_reg:0,reg_hold_minutes:0,cart_hold_days:0,terms:""},initialize:function(){this.classes=new app.Collections.Front.RegClasses},setClasses:function(e){this.classes.reset(e)}}),app.Models.Front.regRate=Backbone.Model.extend({defaults:{reg_event:0,reg_class:"",name:"",start_days:0,end_days:0,base_rate:0,per_registrant:0,registrant_credits:0},initialize:function(){}}),app.Collections.Front.Accounts=Backbone.Collection.extend({model:app.Models.Front.Account,localStorage:new Backbone.LocalStorage("Accounts"),sync:function(e,t,n){console.log("sync called on collection. method: "+e)}}),app.Collections.Front.RegClasses=Backbone.Collection.extend({model:app.Models.Front.RegClass}),app.Collections.Front.RegRates=Backbone.Collection.extend({model:app.Models.Front.RegRate}),app.Views.Front.Account=Backbone.View.extend({tagName:"div",className:"glm-reg-level-registrant clearfix",template:_.template(jQuery("#account-template").html()),events:{"click label":"edit","click .glm-reg-level-registrant-delete":"deleteOne","click .saveRegistrant":"close"},initialize:function(){return this.listenTo(this.model,"change",this.render),this.listenTo(this.model,"destroy",this.remove),this},render:function(){return this.$el.html(this.template(this.model.toJSON())),this.$emailInput=this.$(".editEmail"),this},deleteOne:function(){this.model.destroy()},edit:function(){this.$el.addClass("editing"),this.$emailInput.focus()},close:function(){var e=this.$emailInput.val().trim();e?this.model.save({email:e}):this.clear(),this.$el.removeClass("editing")}}),Backbone.emulateJSON=!0,Backbone.emulateHTTP=!0,app.Views.Front.App=Backbone.View.extend({el:"#regApp",initialize:function(){this.event=new app.Views.Front.RegEvent({model:regEvent}),this.render()},render:function(){return this.$el.append(this.event.render().el),this},events:{"click #appLogin":"login"},login:function(){this.loginView=new app.Views.Front.Login({model:new app.Models.Front.Login}),this.$el.append(this.loginView.render().el),jQuery("#appLogin").hide()}}),app.Views.Front.Login=Backbone.View.extend({tagName:"div",className:"glm-reg-login",template:_.template(jQuery("#eventReg-account-login").html()),events:{"click .accountLogin":"loginToAccount","click #loginCancel":"closeLoginForm"},initialize:function(){return this},closeLoginForm:function(){this.remove(),jQuery("#appLogin").show()},loginToAccount:function(){jQuery.ajax({url:ajaxUrl})},render:function(){return this.$el.html(this.template(this.model.toJSON())),this.$userInput=jQuery(".login"),this.$pwdInput=jQuery(".password"),this}}),app.Views.Front.RegClass=Backbone.View.extend({tagName:"div",className:"glm-reg-level",template:_.template(jQuery("#regClass-template").html()),initialize:function(){return this.listenTo(this.model.accounts,"add",this.addOne),this.listenTo(this.model.accounts,"create",this.addOne),this.listenTo(this.model.accounts,"reset",this.addAll),this.listenTo(this.model,"change",this.updateCount),this},events:{"click .addRegistrant":"newEntry"},newEntry:function(){this.$newEmail=jQuery(".addEmail"),this.$newEmail.val().trim()&&jQuery.ajax({context:this,url:ajaxUrl+"&glm_action=account&option=checkEmail",dataType:"json",data:"email="+this.$newEmail.val().trim()}).done(function(e){!0!==e.validEmail?alert("Must be a valid email address!"):!0!==e.valid?alert("No account matched that email address!"):void 0!==e.id&&void 0!==e.email&&(this.model.accounts.create({id:e.id,email:e.email,parent:this.model.id}),this.model.trigger("change"),this.$newEmail.val(""))}).fail(function(e){console.log("Fail: "+e)})},render:function(){return this.$el.html(this.template(this.model.toJSON())),this},updateCount:function(){return this.model.reg_count=this.model.accounts.length,console.log("Updating Count: "+this.model.reg_count),this.render,this},addOne:function(e){if(e.isValid()){var t=new app.Views.Front.Account({model:e});this.$el.append(t.render().el)}},addAll:function(){jQuery(".glm-reg-level").html("")}}),app.Views.Front.RegEvent=Backbone.View.extend({tagName:"div",className:"glm-reg-event-item clearfix",template:_.template(jQuery("#regEvent-template").html()),initialize:function(){this.listenTo(this.model,"change",this.render)},render:function(){this.$el.html(this.template(this.model.toJSON()));var e=regEvent.classes.map(function(e){return new app.Views.Front.RegClass({model:e}).render().el});return this.$el.append(e),this}});
\ No newline at end of file
+app.Models.Front.Account=Backbone.Model.extend({defaults:{id:"",email:"",parent:""},initialize:function(){this.on("invalid",function(e,t){console.log(t)})},validate:function(e,t){if(void 0===e.email||""===e.email)return"Need an email address!"}}),app.Models.Front.AccountDetail=app.Models.Front.Account.extend({defaults:{id:"",fname:"",lname:"",org:"",title:"",addr1:"",addr2:"",city:"",state:"",zip:"",country:"",phone:"",fax:"",email_ok:!1,is_member:!1,date_created:"",email:"",parent:""}}),app.Models.Front.Login=Backbone.Model.extend({defaults:{username:"",password:""},urlRoot:appLoginUrl,initialize:function(){this.on("invalid",function(e,t){console.log(t)})},validate:function(e,t){return void 0===e.username||""===e.username?"Username required!":void 0===e.password||""===e.password?"Password required!":void 0}}),app.Models.Front.RegClass=Backbone.Model.extend({defaults:{reg_event:0,name:"",descr:"",reg_rate_name:"",reg_rate_base_price:"",reg_rate_per_reg:"",reg_count:0},initialize:function(){this.accounts=new app.Collections.Front.Accounts}}),app.Models.Front.RegEvent=Backbone.Model.extend({defaults:{name:"regEvent",event_name:"",event_code:"",descr:"",notify_email:"",attendees_max:0,attendees_max_per_reg:0,reg_hold_minutes:0,cart_hold_days:0,terms:""},initialize:function(){this.classes=new app.Collections.Front.RegClasses},setClasses:function(e){this.classes.reset(e)}}),app.Models.Front.regRate=Backbone.Model.extend({defaults:{reg_event:0,reg_class:"",name:"",start_days:0,end_days:0,base_rate:0,per_registrant:0,registrant_credits:0},initialize:function(){}}),app.Collections.Front.Accounts=Backbone.Collection.extend({model:app.Models.Front.Account,localStorage:new Backbone.LocalStorage("Accounts"),sync:function(e,t,n){}}),app.Collections.Front.RegClasses=Backbone.Collection.extend({model:app.Models.Front.RegClass}),app.Collections.Front.RegRates=Backbone.Collection.extend({model:app.Models.Front.RegRate}),app.Views.Front.Account=Backbone.View.extend({tagName:"div",className:"glm-reg-level-registrant clearfix",template:_.template(jQuery("#account-template").html()),events:{"click label":"edit","click .glm-reg-level-registrant-delete":"deleteOne","click .saveRegistrant":"close"},initialize:function(){return this.listenTo(this.model,"change",this.render),this.listenTo(this.model,"destroy",this.remove),this},render:function(){return this.$el.html(this.template(this.model.toJSON())),this.$emailInput=this.$(".editEmail"),this},deleteOne:function(){var e=this.model.get("parent");console.log(e),console.log(e.id),this.model.destroy()},edit:function(){this.$el.addClass("editing"),this.$emailInput.focus()},close:function(){var e=this.$emailInput.val().trim();e?this.model.save({email:e}):this.clear(),this.$el.removeClass("editing")}}),Backbone.emulateJSON=!0,Backbone.emulateHTTP=!0,app.Views.Front.App=Backbone.View.extend({el:"#regApp",initialize:function(){this.event=new app.Views.Front.RegEvent({model:regEvent}),this.render()},render:function(){return this.$el.append(this.event.render().el),this},events:{"click #appLogin":"login"},login:function(){this.loginView=new app.Views.Front.Login({model:new app.Models.Front.Login}),this.$el.append(this.loginView.render().el),jQuery("#appLogin").hide()}}),app.Views.Front.Login=Backbone.View.extend({tagName:"div",className:"glm-reg-login",template:_.template(jQuery("#eventReg-account-login").html()),events:{"click .accountLogin":"loginToAccount","click #loginCancel":"closeLoginForm"},initialize:function(){return this},closeLoginForm:function(){this.remove(),jQuery("#appLogin").show()},loginToAccount:function(){jQuery.ajax({url:ajaxUrl})},render:function(){return this.$el.html(this.template(this.model.toJSON())),this.$userInput=jQuery(".login"),this.$pwdInput=jQuery(".password"),this}}),app.Views.Front.RegClass=Backbone.View.extend({tagName:"div",className:"glm-reg-level",template:_.template(jQuery("#regClass-template").html()),initialize:function(){return this.listenTo(this.model.accounts,"add",this.addOne),this.listenTo(this.model.accounts,"create",this.addOne),this.listenTo(this.model.accounts,"reset",this.addAll),this.listenTo(this.model,"change",this.updateCount),this.model.accounts.fetch(),this},events:{"click .addRegistrant":"newEntry"},newEntry:function(){this.$newEmail=this.$(".addEmail"),this.$newEmail.val().trim()&&jQuery.ajax({context:this,url:ajaxUrl+"&glm_action=account&option=checkEmail",dataType:"json",data:"email="+this.$newEmail.val().trim()}).done(function(e){!0!==e.validEmail?alert("Must be a valid email address!"):!0!==e.valid?alert("No account matched that email address!"):void 0!==e.id&&void 0!==e.email?(this.model.accounts.create({id:e.id,email:e.email,parent:this.model.id}),this.model.trigger("change"),this.$newEmail.val("")):void 0!==e.email&&(this.model.accounts.create({email:e.email,parent:this.model.id}),this.model.trigger("change"),this.$newEmail.val(""))}).fail(function(e){console.log("Fail: "+e)})},render:function(){this.$el.html(this.template(this.model.toJSON()));var e=this.model.accounts.map(function(e){return new app.Views.Front.Account({model:e}).render().el});return this.$el.append(e),this},updateCount:function(){this.model.set({reg_count:this.model.accounts.length}),this.render()},addOne:function(e){if(e.isValid()){var t=new app.Views.Front.Account({model:e});this.$el.append(t.render().el)}},addAll:function(){jQuery(".glm-reg-level").html("")}}),app.Views.Front.RegEvent=Backbone.View.extend({tagName:"div",className:"glm-reg-event-item clearfix",template:_.template(jQuery("#regEvent-template").html()),initialize:function(){this.listenTo(this.model,"change",this.render)},render:function(){this.$el.html(this.template(this.model.toJSON()));var e=regEvent.classes.map(function(e){return new app.Views.Front.RegClass({model:e}).render().el});return this.$el.append(e),this}});
\ No newline at end of file

diff --git a/js/models/front/regEvent.js b/js/models/front/regEvent.js
index 6a6ed67..0799eda 100644 (file)
--- a/js/models/front/regEvent.js
+++ b/js/models/front/regEvent.js
@@ -8,6 +8,7 @@ app.Models.Front.RegEvent = Backbone.Model.extend({
         name: 'regEvent',
         event_name: '',
         event_code: '',
+        descr: '',
         notify_email: '',
         attendees_max: 0,
         attendees_max_per_reg: 0,

diff --git a/js/views/front/account.js b/js/views/front/account.js
index 6567c71..ebc19b0 100644 (file)
--- a/js/views/front/account.js
+++ b/js/views/front/account.js
@@ -28,7 +28,12 @@ app.Views.Front.Account = Backbone.View.extend({
     },
 
     deleteOne: function(){
+        //console.log( this.model );
+        var regClass = this.model.get('parent');
+        console.log( regClass );
+        console.log( regClass.id );
         this.model.destroy();
+        //regClass.trigger('change');
     },
 
     edit: function(){

diff --git a/js/views/front/regClass.js b/js/views/front/regClass.js
index d399bb7..d9bef8e 100644 (file)
--- a/js/views/front/regClass.js
+++ b/js/views/front/regClass.js
@@ -12,9 +12,10 @@ app.Views.Front.RegClass = Backbone.View.extend({
         this.listenTo( this.model.accounts, 'create', this.addOne );
         this.listenTo( this.model.accounts, 'reset', this.addAll );
         this.listenTo( this.model, 'change', this.updateCount );
+        //this.listenTo( this.model, 'change', this.render );
         //this.listenTo( this.model, 'change:accounts', this.render );
 
-        //this.model.accounts.fetch();
+        this.model.accounts.fetch();
         return this;
     },
 
@@ -25,7 +26,7 @@ app.Views.Front.RegClass = Backbone.View.extend({
     // For the new entry check the email from the server and see
     // if there's already an account setup.
     newEntry: function(){
-        this.$newEmail = jQuery('.addEmail');
+        this.$newEmail = this.$('.addEmail');
 
         if ( !this.$newEmail.val().trim() ) {
              return;
@@ -38,6 +39,7 @@ app.Views.Front.RegClass = Backbone.View.extend({
             data: 'email=' + this.$newEmail.val().trim()
         })
         .done(function(account){
+            //console.log(account);
             // Check for id and email
             if ( account.validEmail !== true ) {
                 // If not found then nothing was found for that email.
@@ -52,6 +54,13 @@ app.Views.Front.RegClass = Backbone.View.extend({
                 });
                 this.model.trigger('change');
                 this.$newEmail.val('');
+            } else if ( account.email !== undefined ) {
+                this.model.accounts.create({
+                    email: account.email,
+                    parent: this.model.id
+                });
+                this.model.trigger('change');
+                this.$newEmail.val('');
             }
         })
         .fail(function(msg){
@@ -61,14 +70,17 @@ app.Views.Front.RegClass = Backbone.View.extend({
 
     render: function(){
         this.$el.html( this.template( this.model.toJSON() ) );
+        // Need to see if this class has attendees and render them
+        var view = this.model.accounts.map(function(item){
+            return (new app.Views.Front.Account({ model: item })).render().el;
+        });
+        this.$el.append(view);
         return this;
     },
 
     updateCount: function(){
-        this.model.reg_count = this.model.accounts.length;
-        console.log( 'Updating Count: ' + this.model.reg_count );
-        this.render;
-        return this;
+        this.model.set({ reg_count: this.model.accounts.length });
+        this.render();
     },
 
     addOne: function( item ){

diff --git a/models/admin/ajax/account.php b/models/admin/ajax/account.php
index e8203ea..09bd803 100644 (file)
--- a/models/admin/ajax/account.php
+++ b/models/admin/ajax/account.php
@@ -91,6 +91,7 @@ class GlmMembersAdmin_ajax_account extends GLMDataRegistrationsAccount
      */
     public function modelAction( $actionData = false )
     {
+        static $accountId = 10;
         $return = false;
 
         $option = filter_var( ~_REQUEST['option'], FILTER_SANITIZE_STRING );
@@ -115,6 +116,7 @@ class GlmMembersAdmin_ajax_account extends GLMDataRegistrationsAccount
         case 'checkEmail':
             break;
         }
+
         if ( $email = filter_var( $_REQUEST['email'], FILTER_VALIDATE_EMAIL ) ) {
             $accountId = $this->wpdb->get_var(
                 $this->wpdb->prepare(
@@ -133,8 +135,10 @@ class GlmMembersAdmin_ajax_account extends GLMDataRegistrationsAccount
                 );
             } else {
                 $return = array(
-                    'valid'      => false,
+                    //'valid'      => false,
+                    'valid'      => true,
                     'validEmail' => true,
+                    'email'      => $email,
                 );
             }
         } else {

diff --git a/models/front/registrations/registration.php b/models/front/registrations/registration.php
index b8878ab..dfb231c 100644 (file)
--- a/models/front/registrations/registration.php
+++ b/models/front/registrations/registration.php
@@ -85,8 +85,21 @@
         switch ( $option ) {
         default:
             // Get the RegEvent entry
-            //$entry = $this->getEntry( $eventRegID );
-            //echo '<pre>$entry: ' . print_r( $entry, true ) . '</pre>';
+            $regEvent = $this->getEntry( $eventRegID );
+            //echo '<pre>$regEvent: ' . print_r( $regEvent, true ) . '</pre>';
+            $event = array(
+                'id'                   => $regEvent['id'],
+                'event'                => $regEvent['event'],
+                'event_name'           => $regEvent['event_name'],
+                'event_code'           => $regEvent['event_code'],
+                'descr'                => $regEvent['descr'],
+                'attendee_max'         => $regEvent['attendee_max'],
+                'attendee_max_per_reg' => $regEvent['attendee_max_per_reg'],
+                'reg_hold_minutes'     => $regEvent['reg_hold_minutes'],
+                'cart_hold_days'       => $regEvent['cart_hold_days'],
+                'terms'                => 'Sample terms and conditions',
+            );
+            //echo '<pre>$event: ' . print_r( $event, true ) . '</pre>';
 
             break;
 
@@ -116,7 +129,7 @@
         $templateData = array(
             'entry'          => $regEventSample,
             'thisJsUrl'      => GLM_MEMBERS_REGISTRATIONS_PLUGIN_URL . '/js',
-            'regEventJSON'   => json_encode( $regEventSample['reg_event'] ),
+            'regEventJSON'   => json_encode( $event ),
             'regClassesJSON' => $regClassJSON,
             'eventData'      => $eventData,
         );

diff --git a/package.json b/package.json
index 035daec..c8a5fa1 100644 (file)
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "gulp-concat": "^2.6.1",
     "gulp-jshint": "^2.0.4",
     "gulp-plumber": "^1.1.0",
+    "gulp-sourcemaps": "^2.6.1",
     "gulp-uglify": "^3.0.0",
     "jshint": "^2.9.5"
   }

diff --git a/views/front/registrations/registration.html b/views/front/registrations/registration.html
index 6423115..f105ce8 100644 (file)
--- a/views/front/registrations/registration.html
+++ b/views/front/registrations/registration.html
@@ -7,7 +7,7 @@
         <input type="text" placeholder="Enter Comp Code Here" />
     </div>
     <div>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p><%= descr %></p>
         <p>Maximum Registrants: <%- attendee_max %></p>
     </div>
 
@@ -22,6 +22,7 @@
         </div>
     </div>
 </script>
+
 <script type="text/template" id="account-template">
     <a class="glm-reg-level-registrant-delete">Delete</a>
     <label class="registrant-label">
@@ -32,19 +33,23 @@
         <input type="submit" class="saveRegistrant" value="Save">
     </div>
 </script>
+
 <script type="text/template" id="regClass-template">
-    <h3><%= name %> Count: <%= reg_count %></h3>
+    <h3><%= name %></h3>
     <p><%= descr %></p>
     <div>
         <div>Current Rate: <%= reg_rate_name %></div>
         <div>Base Price: $<%= reg_rate_base_price %></div>
         <div>Per Registrant: $<%= reg_rate_per_reg %></div>
+        <div>Total: <%= reg_count %></div>
+        <div>Total Price: <%= reg_rate_per_reg * reg_count %></div>
     </div>
     <div class="registrant-add clearfix">
         <input type="text" class="addEmail" placeholder="Enter Email Address">
         <input type="submit" class="addRegistrant" value="Add">
     </div>
 </script>
+
 <script type="text/template" id="eventReg-account-login">
     <h4>Login</h4>
     <a class="glm-reg-account-login" id="loginCancel">Close</a>