From: Steve Sutton Date: Thu, 24 Aug 2017 20:55:15 +0000 (-0400) Subject: More redoing the front end application in backbone.js X-Git-Tag: v1.0.0^2~444 X-Git-Url: http://cvs2.gaslightmedia.com/gitweb/?a=commitdiff_plain;h=97b3bbd416ab597dc2909b626a395917f0f10954;p=WP-Plugins%2Fglm-member-db-registrations.git More redoing the front end application in backbone.js I now have json data going into the view file and it sets up a model for RegEvent and collection of RegClasses. I'll need to work on setting up the view files for the main regEvent next and apply the collection also. It is possible with backbone.js to have nested collections and models. --- diff --git a/js/collections/accounts.js b/js/collections/accounts.js new file mode 100644 index 0000000..ac320ee --- /dev/null +++ b/js/collections/accounts.js @@ -0,0 +1,11 @@ +// js/collections/accounts.js +var app = app || {}; + +// Event Registrant collection +app.Accounts = Backbone.Collection.extend({ + model: app.Account, + + //localStorage: new Backbone.LocalStorage('RegistrantList') +}); + + diff --git a/js/collections/eventRegistrantList.js b/js/collections/eventRegistrantList.js deleted file mode 100644 index 9abd6a3..0000000 --- a/js/collections/eventRegistrantList.js +++ /dev/null @@ -1,11 +0,0 @@ -// js/collections/eventRegistrantList.js -var app = app || {}; - -// Event Registrant collection -app.EventRegistrantList = Backbone.Collection.extend({ - model: app.EventRegistrant, - - localStorage: new Backbone.LocalStorage('RegistrantList') -}); - - diff --git a/js/collections/regClasses.js b/js/collections/regClasses.js new file mode 100644 index 0000000..9481077 --- /dev/null +++ b/js/collections/regClasses.js @@ -0,0 +1,9 @@ +// js/collections/classes.js +var app = app || {}; + +// Classes Collection +app.RegClasses = Backbone.Collection.extend({ + model: app.RegClass, + + +}); diff --git a/js/collections/regRates.js b/js/collections/regRates.js new file mode 100644 index 0000000..4be0177 --- /dev/null +++ b/js/collections/regRates.js @@ -0,0 +1,10 @@ +// js/collections/regRates.js + +var app = app || {}; + +// Registration Rate Collection +app.RegRates = Backbone.Collection.extend({ + model: app.RegRate, + + // localStorage +}); diff --git a/js/eventRegApp.js b/js/eventRegApp.js index 0d9320e..672b552 100644 --- a/js/eventRegApp.js +++ b/js/eventRegApp.js @@ -1,7 +1,7 @@ // eventRegApp.js var app = app || {}; -app.EventRegistrants = new app.EventRegistrantList(); +app.EventRegistrants = new app.Accounts(); jQuery(document).ready(function($){ diff --git a/js/models/account.js b/js/models/account.js index 3117d2b..51b0de1 100644 --- a/js/models/account.js +++ b/js/models/account.js @@ -1,42 +1,29 @@ -// js/models/account.js +// js/models/eventRegistrant.js var app = app || {}; -// Account Model -app.account = Backbone.Model.extend({ +// Event Registrant Model +app.Account = Backbone.Model.extend({ - // Default account values + // Default registrant values defaults: { - active: true, - registered_by: 0, - fname: '', - lname: '', - org: '', - title: '', - addr1: '', - addr2: '', - city: '', - state: '', - zip: '', - phone: '', + name: '', email: '', }, initialize: function(){ - this.on('invalid', function( model, error ){ + this.on( 'invalid', function( model, error ){ console.log( error ); }); }, - validate: function(){ - if ( attribs.fname === undefined || attribs.fname === '' ) { - return 'First name empty!'; - } - if ( attribs.lname === undefined || attribs.lname === '' ) { - return 'Last name empty!'; + validate: function( attribs, options ){ + if ( attribs.name === undefined || attribs.name === '' ) { + return 'Need a name!'; } if ( attribs.email === undefined || attribs.email === '' ) { return 'Need an email address!'; } }, + }); diff --git a/js/models/classes.js b/js/models/classes.js new file mode 100644 index 0000000..801da68 --- /dev/null +++ b/js/models/classes.js @@ -0,0 +1,13 @@ +// js/models/classes.js +var app = app || {}; + +// Model to hold the collection of accounts for each RegClass +app.Classes = Backbone.Model.extend({ + + initialize: function(){ + this.accounts = new app.Accounts; + + localStorage: new Backbone.LocalStorage( 'Accounts_' + this.id ); + } + +}); diff --git a/js/models/eventReg.js b/js/models/eventReg.js deleted file mode 100644 index 594139c..0000000 --- a/js/models/eventReg.js +++ /dev/null @@ -1,9 +0,0 @@ -// Event Reg model - -var EventReg = Backbone.Model.extend({ - // Default todo attrubute values - defaults: { - event_name: '', - descr: '' - } -}); diff --git a/js/models/eventRegistrant.js b/js/models/eventRegistrant.js deleted file mode 100644 index d618b55..0000000 --- a/js/models/eventRegistrant.js +++ /dev/null @@ -1,29 +0,0 @@ -// js/models/eventRegistrant.js - -var app = app || {}; - -// Event Registrant Model -app.EventRegistrant = Backbone.Model.extend({ - - // Default registrant values - defaults: { - name: '', - email: '', - }, - - initialize: function(){ - this.on( 'invalid', function( model, error ){ - console.log( error ); - }); - }, - - validate: function( attribs, options ){ - if ( attribs.name === undefined || attribs.name === '' ) { - return 'Need a name!'; - } - if ( attribs.email === undefined || attribs.email === '' ) { - return 'Need an email address!'; - } - }, - -}); diff --git a/js/models/regClass.js b/js/models/regClass.js new file mode 100644 index 0000000..97ff460 --- /dev/null +++ b/js/models/regClass.js @@ -0,0 +1,19 @@ +// js/models/regClass.js + +var app = app || {}; + +// Registration Class Model +app.RegClass = Backbone.Model.extend({ + + // Defaults + defaults: { + reg_event: 0, + name: '', + descr: '' + }, + + initialize: function(){ + // for regRates + }, + +}); diff --git a/js/models/regEvent.js b/js/models/regEvent.js new file mode 100644 index 0000000..fc9526d --- /dev/null +++ b/js/models/regEvent.js @@ -0,0 +1,24 @@ +// js/models/regEvent.js +var app = app || {}; + +// Event Reg model +app.RegEvent = Backbone.Model.extend({ + + // Default regEvent values + defaults: { + event: 0, + 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(){ + // for setting up classes + }, + +}); diff --git a/js/models/regRate.js b/js/models/regRate.js new file mode 100644 index 0000000..6c8ba3f --- /dev/null +++ b/js/models/regRate.js @@ -0,0 +1,24 @@ +// js/models/regRate.js +var app = app || {}; + +// Event Reg model + +app.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 + }, + +}); diff --git a/js/views/app.js b/js/views/app.js index f5656e3..b45603b 100644 --- a/js/views/app.js +++ b/js/views/app.js @@ -10,9 +10,9 @@ app.AppView = Backbone.View.extend({ this.$newName = this.$('.addName'); this.$newEmail = this.$('.addEmail'); - this.listenTo( app.EventRegistrants, 'add', this.addOne ); - this.listenTo( app.EventRegistrants, 'reset', this.addAll ); - app.EventRegistrants.fetch(); + // this.listenTo( app.EventRegistrants, 'add', this.addOne ); + // this.listenTo( app.EventRegistrants, 'reset', this.addAll ); + // app.EventRegistrants.fetch(); }, deleteOne: function( el ){ @@ -43,7 +43,7 @@ app.AppView = Backbone.View.extend({ addOne: function(item){ if ( item.isValid() ) { - var view = new app.EventRegistrantView({ model: item }); + var view = new app.AccountView({ model: item }); this.$el.append( view.render().el ); } }, @@ -55,7 +55,7 @@ app.AppView = Backbone.View.extend({ render: function(){ var eventRegistrantView = this.collection.map(function(item){ - return (new app.EventRegistrantView({ model: item })).render().el; + return (new app.AccountView({ model: item })).render().el; }); this.$el.append(eventRegistrantView); return this; diff --git a/js/views/eventRegistrant.js b/js/views/eventRegistrant.js index b9cb0c0..6301790 100644 --- a/js/views/eventRegistrant.js +++ b/js/views/eventRegistrant.js @@ -2,7 +2,7 @@ var app = app || {}; // Event Registrant View -app.EventRegistrantView = Backbone.View.extend({ +app.AccountView = Backbone.View.extend({ tagName: 'div', className: 'glm-reg-level-registrant clearfix', diff --git a/models/front/registrations/registration.php b/models/front/registrations/registration.php index daeaaca..09fb96b 100644 --- a/models/front/registrations/registration.php +++ b/models/front/registrations/registration.php @@ -38,12 +38,18 @@ public function modelAction($actionData = false) { $scripts = array( - 'backbone-local' => 'js/lib/backbone.localStorage.min.js', - 'registrantView' => 'js/views/eventRegistrant.js', - 'appView' => 'js/views/app.js', - 'registrantModel' => 'js/models/eventRegistrant.js', - 'registrantList' => 'js/collections/eventRegistrantList.js', - 'mybackboneapp' => 'js/eventRegApp.js', + 'backbone-local'=> 'js/lib/backbone.localStorage.min.js', + 'registrantView'=> 'js/views/eventRegistrant.js', + 'appView' => 'js/views/app.js', + 'account' => 'js/models/account.js', + 'classes' => 'js/models/classes.js', + 'regClass' => 'js/models/regClass.js', + 'regEvent' => 'js/models/regEvent.js', + 'regRate' => 'js/models/regRate.js', + 'accounts' => 'js/collections/accounts.js', + 'regClasses' => 'js/collections/regClasses.js', + 'regRates' => 'js/collections/regRates.js', + 'mybackboneapp' => 'js/eventRegApp.js', ); foreach ( $scripts as $scriptName => $scriptPath ) { wp_register_script( @@ -107,8 +113,10 @@ // Compile template data $templateData = array( - 'entry' => $regEventSample, - 'thisJsUrl' => GLM_MEMBERS_REGISTRATIONS_PLUGIN_URL . '/js' + 'entry' => $regEventSample, + 'thisJsUrl' => GLM_MEMBERS_REGISTRATIONS_PLUGIN_URL . '/js', + 'regEventJSON' => json_encode( $regEventSample['reg_event'] ), + 'regClassesJSON' => json_encode( $regEventSample['reg_class'] ) ); // Return status, any suggested view, and any data to controller return array( diff --git a/views/front/registrations/registration.html b/views/front/registrations/registration.html index 547b526..2963159 100644 --- a/views/front/registrations/registration.html +++ b/views/front/registrations/registration.html @@ -29,11 +29,13 @@ +{/literal} +{********** -{/literal} +***********}
{$event = $entry.reg_event}
@@ -68,3 +70,15 @@
+{* Bootstrap the models needed on page load *} +{* Need to have eventRegistration model created *} +{* And create the regClasses collection *} +