From: Steve Sutton Date: Thu, 14 Sep 2017 20:45:44 +0000 (-0400) Subject: Front end work for backbone.js X-Git-Tag: v1.0.0^2~413 X-Git-Url: http://cvs2.gaslightmedia.com/gitweb/index.cgi?a=commitdiff_plain;h=4b714e30fc2996f822683d7951d5d737db0714f0;p=WP-Plugins%2Fglm-member-db-registrations.git 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 --- 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 --- 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 --- 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 --- 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 --- 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 --- 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 --- 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 '
$entry: ' . print_r( $entry, true ) . '
'; + $regEvent = $this->getEntry( $eventRegID ); + //echo '
$regEvent: ' . print_r( $regEvent, true ) . '
'; + $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 '
$event: ' . print_r( $event, true ) . '
'; 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 --- 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 --- a/views/front/registrations/registration.html +++ b/views/front/registrations/registration.html @@ -7,7 +7,7 @@
-

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.

+

<%= descr %>

Maximum Registrants: <%- attendee_max %>

@@ -22,6 +22,7 @@ + + +