From: Steve Sutton Date: Sun, 17 Sep 2017 23:51:34 +0000 (-0400) Subject: Working on redo of sync functions for Accounts collection. X-Git-Tag: v1.0.0^2~409 X-Git-Url: http://cvs2.gaslightmedia.com/gitweb/index.cgi?a=commitdiff_plain;h=3de27b60b72a13b7d62224593b95bbb758ef69d1;p=WP-Plugins%2Fglm-member-db-registrations.git Working on redo of sync functions for Accounts collection. Creating function for syncing the collection to the localStorage. --- diff --git a/gulpfile.js b/gulpfile.js index 1db5c09..b3499ba 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -24,7 +24,7 @@ gulp.task('frontscripts', function(){ ]) .pipe(plumber()) .pipe(concat('frontRegApp.js')) - .pipe(uglify()) + //.pipe(uglify()) .pipe(jshint()) .pipe(gulp.dest('js/')); }); diff --git a/js/collections/front/accounts.js b/js/collections/front/accounts.js index 485cea1..64dbed9 100644 --- a/js/collections/front/accounts.js +++ b/js/collections/front/accounts.js @@ -4,15 +4,48 @@ app.Collections.Front.Accounts = Backbone.Collection.extend({ model: app.Models.Front.Account, - // initialize: function( id ){ - // this.id = id; - // }, + initialize: function( parent ){ + console.log( 'initialize called with ' + parent ); + this.parent = parent; + }, localStorage: new Backbone.LocalStorage( 'Accounts-' ), sync: function( method, model, options ){ + return; //console.log('sync called on collection. method: ' + method ); + //console.log( method ); + switch( method ){ + case 'create': + console.log('Create called on Accounts' + model); + break; + case 'read': + console.log('Read called on Accounts' + model); + break; + case 'update': + console.log('Update called on Accounts' + model); + break; + case 'delete': + console.log('Delete called on Accounts' + model); + break; + } + + }, + + create: function( model ){ + localStorage.setItem('Account-' + model.parent + '-'+ model.id, JSON.stringify( model ) ); + }, + fetch: function(){ + var newModels = []; + for ( var i = 0; i < localStorage.length; i++ ) { + var curItem = JSON.parse( localStorage.getItem( localStorage.key( i ) ) ); + if ( curItem.parent === this.parent ) { + // now add it to this collection + newModels.push( new app.Models.Front.Account( curItem ) ); + } + } + this.reset( newModels ); }, }); diff --git a/js/frontRegApp.js b/js/frontRegApp.js index c774e80..4cf81b2 100644 --- a/js/frontRegApp.js +++ b/js/frontRegApp.js @@ -1 +1,488 @@ -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){return void 0===e.email||""===e.email?"Need an email address!":0==/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/.test(e.email)?"Invalid Email Address":void 0}}),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:{id:0,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)},edit:function(){this.$el.addClass("editing"),this.$emailInput.focus()},close:function(){var e=this.$emailInput.val().trim();this.model.save({email:e},{validate:!0}),this.model.validationError&&(alert(this.model.validationError),this.render()),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 +// js/models/account.js + +// Event Registrant Model +app.Models.Front.Account = Backbone.Model.extend({ + + // Default registrant values + defaults: { + id: '', + email: '', + parent: '', + }, + + initialize: function(){ + this.on( 'invalid', function( model, error ){ + console.log( error ); + }); + }, + + validate: function( attribs, options ){ + if ( attribs.email === undefined || attribs.email === '' ) { + return 'Need an email address!'; + } + var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/; + if ( reg.test( attribs.email ) == false ) { + return 'Invalid Email Address'; + } + }, + +}); + +// js/models/accountDetail.js + +// Event Registrant Detail Model +app.Models.Front.AccountDetail = app.Models.Front.Account.extend({ + // Default registrant values + defaults: { + id: '', + fname: '', + lname: '', + org: '', + title: '', + addr1: '', + addr2: '', + city: '', + state: '', + zip: '', + country: '', + phone: '', + fax: '', + email_ok: false, + is_member: false, + date_created: '', + email: '', + parent: '', + } +}); + +// js/models/login.js + +// Login Model +app.Models.Front.Login = Backbone.Model.extend({ + + defaults: { + username: '', + password: '' + }, + + urlRoot: appLoginUrl, + + initialize: function(){ + this.on( 'invalid', function( model, error ){ + console.log( error ); + }); + }, + + validate: function( attribs, options ){ + if ( attribs.username === undefined || attribs.username === '' ){ + return 'Username required!'; + } + if ( attribs.password === undefined || attribs.password === '' ){ + return 'Password required!'; + } + }, + +}); + +// js/models/regClass.js + +// Registration Class Model +app.Models.Front.RegClass = Backbone.Model.extend({ + + // Defaults + defaults: { + id: 0, + 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( this.id ); + //this.accounts.fetch(); + }, + +}); + +// js/models/regEvent.js + +// Event Reg model +app.Models.Front.RegEvent = Backbone.Model.extend({ + + // Default regEvent values + 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(){ + // for setting up classes + this.classes = new app.Collections.Front.RegClasses; + }, + + setClasses: function( regClasses ){ + this.classes.reset( regClasses ); + }, + +}); + +// js/models/regRate.js + +// Event Reg model + +app.Models.Front.regRate = Backbone.Model.extend({ + + // Default regRate values + defaults: { + reg_event: 0, + reg_class: '', + name: '', + start_days: 0, + end_days: 0, + base_rate: 0.0, + per_registrant: 0.0, + registrant_credits: 0 + }, + + initialize: function(){ + // for setting up classes + }, + +}); + +// js/collections/accounts.js + +// Event Registrant collection +app.Collections.Front.Accounts = Backbone.Collection.extend({ + model: app.Models.Front.Account, + + initialize: function( parent ){ + console.log( 'initialize called with ' + parent ); + this.parent = parent; + }, + + localStorage: new Backbone.LocalStorage( 'Accounts-' ), + + sync: function( method, model, options ){ + return; + //console.log('sync called on collection. method: ' + method ); + //console.log( method ); + switch( method ){ + case 'create': + console.log('Create called on Accounts' + model); + break; + case 'read': + console.log('Read called on Accounts' + model); + break; + case 'update': + console.log('Update called on Accounts' + model); + break; + case 'delete': + console.log('Delete called on Accounts' + model); + break; + } + + }, + + create: function( model ){ + localStorage.setItem('Account-' + model.parent + '-'+ model.id, JSON.stringify( model ) ); + }, + + fetch: function(){ + var newModels = []; + for ( var i = 0; i < localStorage.length; i++ ) { + var curItem = JSON.parse( localStorage.getItem( localStorage.key( i ) ) ); + if ( curItem.parent === this.parent ) { + // now add it to this collection + newModels.push( new app.Models.Front.Account( curItem ) ); + } + } + this.reset( newModels ); + }, + +}); + + + +// js/collections/classes.js + +// Classes Collection +app.Collections.Front.RegClasses = Backbone.Collection.extend({ + model: app.Models.Front.RegClass, + +}); + +// js/collections/regRates.js + +// Registration Rate Collection +app.Collections.Front.RegRates = Backbone.Collection.extend({ + model: app.Models.Front.RegRate, + + // localStorage +}); + +// js/views/account.js + +// Event Registrant View +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(){ + this.listenTo( this.model, 'change', this.render ); + this.listenTo( this.model, 'destroy', this.remove ); + return this; + }, + + render: function(){ + this.$el.html( this.template( this.model.toJSON() ) ); + //this.$nameInput = this.$('.editName'); + this.$emailInput = this.$('.editEmail'); + return this; + }, + + deleteOne: function(){ + //console.log( this.model ); + var regClass = this.model.get('parent'); + console.log( regClass ); + this.model.destroy(); + //regClass.trigger('change'); + }, + + edit: function(){ + this.$el.addClass( 'editing' ); + this.$emailInput.focus(); + }, + + close: function(){ + var regemail = this.$emailInput.val().trim(); + + this.model.save({ email: regemail }, { validate: true }); + if ( this.model.validationError ) { + alert( this.model.validationError ); + this.render(); + } + + this.$el.removeClass('editing'); + }, + +}); + +// js/views/app.js +Backbone.emulateJSON = true; +Backbone.emulateHTTP = true; + +// Event Registrant List View +app.Views.Front.App = Backbone.View.extend({ + + el: '#regApp', + + initialize: function(){ + this.event = new app.Views.Front.RegEvent({ model: regEvent }); + this.render(); + }, + + render: function(){ + this.$el.append( this.event.render().el ); + return 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(); + }, + +}); + +// js/views/login.js + +// Login View +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(); + return; + }, + + loginToAccount: function(){ + // Send data to login ajax and verify user login + jQuery.ajax({ + url: ajaxUrl + }); + }, + + render: function(){ + this.$el.html( this.template( this.model.toJSON() ) ); + this.$userInput = jQuery('.login'); + this.$pwdInput = jQuery('.password'); + return this; + }, + +}); + +// js/views/regClass.js + +app.Views.Front.RegClass = Backbone.View.extend({ + tagName: 'div', + + className: 'glm-reg-level', + + template: _.template( jQuery('#regClass-template').html() ), + + initialize: function(){ + 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.listenTo( this.model, 'change', this.render ); + //this.listenTo( this.model, 'change:accounts', this.render ); + + this.model.accounts.fetch(); + return this; + }, + + events: { + 'click .addRegistrant': 'newEntry', + }, + + // For the new entry check the email from the server and see + // if there's already an account setup. + newEntry: function(){ + this.$newEmail = this.$('.addEmail'); + + if ( !this.$newEmail.val().trim() ) { + return; + } + // Check for this email address + jQuery.ajax({ + context: this, + url: ajaxUrl + '&glm_action=account&option=checkEmail', + dataType: 'json', + 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. + alert('Must be a valid email address!'); + } else if ( account.valid !== true ) { + alert( 'No account matched that email address!' ); + } else if ( account.id !== undefined && account.email !== undefined ) { + this.model.accounts.create({ + id: account.id, + email: account.email, + parent: this.model.id + }); + 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){ + console.log('Fail: ' + msg); + }); + }, + + 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.set({ reg_count: this.model.accounts.length }); + this.render(); + }, + + addOne: function( item ){ + if ( item.isValid() ) { + var view = new app.Views.Front.Account({ model: item }); + this.$el.append( view.render().el ); + } + }, + + addAll: function(){ + jQuery('.glm-reg-level').html(''); + //this.model.accounts.each( this.addOne, this ); + }, + +}); + +// js/views/regEvent.js + +// Reg Event View +app.Views.Front.RegEvent = Backbone.View.extend({ + + tagName: 'div', + + className: 'glm-reg-event-item clearfix', + + template: _.template( jQuery('#regEvent-template').html() ), + + // Called when the view is first created + initialize: function(){ + this.listenTo( this.model, 'change', this.render ); + }, + + render: function(){ + this.$el.html( this.template( this.model.toJSON() ) ); + var view = regEvent.classes.map(function(item){ + return (new app.Views.Front.RegClass({ model: item })).render().el; + }); + this.$el.append(view); + return this; + }, + +}); diff --git a/js/models/front/account.js b/js/models/front/account.js index 4faaa73..c0023ac 100644 --- a/js/models/front/account.js +++ b/js/models/front/account.js @@ -26,4 +26,9 @@ app.Models.Front.Account = Backbone.Model.extend({ } }, + delete: function( model ){ + console.log( 'Model delete called ' ); + console.log( model ); + }, + }); diff --git a/js/models/front/regClass.js b/js/models/front/regClass.js index 5b94ddc..f846fec 100644 --- a/js/models/front/regClass.js +++ b/js/models/front/regClass.js @@ -16,7 +16,7 @@ app.Models.Front.RegClass = Backbone.Model.extend({ }, initialize: function(){ - this.accounts = new app.Collections.Front.Accounts; + this.accounts = new app.Collections.Front.Accounts( this.id ); //this.accounts.fetch(); }, diff --git a/js/views/front/account.js b/js/views/front/account.js index 64e94ce..96049f8 100644 --- a/js/views/front/account.js +++ b/js/views/front/account.js @@ -31,7 +31,7 @@ app.Views.Front.Account = Backbone.View.extend({ //console.log( this.model ); var regClass = this.model.get('parent'); console.log( regClass ); - //this.model.destroy(); + this.model.destroy(); //regClass.trigger('change'); },