From: Steve Sutton Date: Fri, 25 Aug 2017 19:46:13 +0000 (-0400) Subject: Restructuring the js files. X-Git-Tag: v1.0.0^2~443 X-Git-Url: http://cvs2.gaslightmedia.com/gitweb/?a=commitdiff_plain;h=e711886cd09922103bc828f14c42250df3397944;p=WP-Plugins%2Fglm-member-db-registrations.git Restructuring the js files. I have the regEvent outputting it's model (bootstrapped) to the view. I have the regClass outputting it's model (bootstrapped) to it's view. I'm working on getting the Accounts to save to localStorage and keep one unique id for it's collection. --- diff --git a/js/collections/accounts.js b/js/collections/accounts.js index ac320ee..71e27b2 100644 --- a/js/collections/accounts.js +++ b/js/collections/accounts.js @@ -5,7 +5,17 @@ var app = app || {}; app.Accounts = Backbone.Collection.extend({ model: app.Account, - //localStorage: new Backbone.LocalStorage('RegistrantList') + localStorage: new Backbone.LocalStorage( 'Accounts_' + this.id ), + + // create: function( item ) { + // console.log( item ); + // localStorage.setItem( + // 'Account_' + item.colName, + // JSON.stringify( item ) + // ); + // return item.save(); + // }, + }); diff --git a/js/collections/eventRegList.js b/js/collections/eventRegList.js deleted file mode 100644 index c7d01d1..0000000 --- a/js/collections/eventRegList.js +++ /dev/null @@ -1,4 +0,0 @@ -// Event Reg List collection -var EventRegList = Backbone.Collection.extend({ - model: EventReg -}); diff --git a/js/collections/regClasses.js b/js/collections/regClasses.js index 9481077..483f86e 100644 --- a/js/collections/regClasses.js +++ b/js/collections/regClasses.js @@ -5,5 +5,4 @@ var app = app || {}; app.RegClasses = Backbone.Collection.extend({ model: app.RegClass, - }); diff --git a/js/eventRegApp.js b/js/eventRegApp.js deleted file mode 100644 index 672b552..0000000 --- a/js/eventRegApp.js +++ /dev/null @@ -1,10 +0,0 @@ -// eventRegApp.js -var app = app || {}; - -app.EventRegistrants = new app.Accounts(); - -jQuery(document).ready(function($){ - - new app.AppView(); - -}); diff --git a/js/models/account.js b/js/models/account.js index 51b0de1..d9d67b2 100644 --- a/js/models/account.js +++ b/js/models/account.js @@ -1,4 +1,4 @@ -// js/models/eventRegistrant.js +// js/models/account.js var app = app || {}; diff --git a/js/models/classes.js b/js/models/classes.js deleted file mode 100644 index 801da68..0000000 --- a/js/models/classes.js +++ /dev/null @@ -1,13 +0,0 @@ -// 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/regClass.js b/js/models/regClass.js index 97ff460..0ea9c3e 100644 --- a/js/models/regClass.js +++ b/js/models/regClass.js @@ -13,7 +13,10 @@ app.RegClass = Backbone.Model.extend({ }, initialize: function(){ - // for regRates + this.accounts = new app.Accounts; + + //localStorage = new Backbone.LocalStorage( 'Accounts_' + this.name ); }, + }); diff --git a/js/models/regEvent.js b/js/models/regEvent.js index fc9526d..c3e45dc 100644 --- a/js/models/regEvent.js +++ b/js/models/regEvent.js @@ -6,7 +6,7 @@ app.RegEvent = Backbone.Model.extend({ // Default regEvent values defaults: { - event: 0, + name: 'regEvent', event_name: '', event_code: '', notify_email: '', @@ -19,6 +19,11 @@ app.RegEvent = Backbone.Model.extend({ initialize: function(){ // for setting up classes + this.classes = new app.RegClasses; + }, + + setClasses: function( regClasses ){ + this.classes.reset( regClasses ); }, }); diff --git a/js/views/account.js b/js/views/account.js new file mode 100644 index 0000000..af48941 --- /dev/null +++ b/js/views/account.js @@ -0,0 +1,53 @@ +// js/views/account.js +var app = app || {}; + +// Event Registrant View +app.AccountView = Backbone.View.extend({ + tagName: 'div', + + className: 'glm-reg-level-registrant clearfix', + + template: _.template( $('#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(){ + this.model.destroy(); + }, + + edit: function(){ + this.$el.addClass( 'editing' ); + this.$nameInput.focus(); + }, + + close: function(){ + var regname = this.$nameInput.val().trim(); + var regemail = this.$emailInput.val().trim(); + + if ( regname && regemail ) { + this.model.save({ name: regname, email: regemail }); + } else { + this.clear(); // NEW + } + + this.$el.removeClass('editing'); + }, + +}); diff --git a/js/views/app.js b/js/views/app.js index b45603b..c75dd7a 100644 --- a/js/views/app.js +++ b/js/views/app.js @@ -4,61 +4,19 @@ var app = app || {}; // Event Registrant List View app.AppView = Backbone.View.extend({ - el: '.glm-reg-level', + el: '#regApp', initialize: function(){ - 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.event = new app.RegEventView({ model: app.regEvent }); + this.render(); }, - deleteOne: function( el ){ - console.log( el ); - console.log( 'deleteOne called on listView' ); + render: function(){ + this.$el.append( this.event.render().el ); + return this; }, events: { - 'click .addRegistrant': 'newEntry', - }, - - newEntry: function(){ - if ( !this.$newName.val().trim() || !this.$newEmail.val().trim() ) { - return; - } - var emailMatches = app.EventRegistrants.where({email: this.$newEmail.val().trim()}); - app.EventRegistrants.create( this.newAttributes() ); - this.$newName.val(''); - this.$newEmail.val(''); - }, - - newAttributes: function(){ - return { - name: this.$newName.val().trim(), - email: this.$newEmail.val().trim() - }; - }, - - addOne: function(item){ - if ( item.isValid() ) { - var view = new app.AccountView({ model: item }); - this.$el.append( view.render().el ); - } - }, - - addAll: function(){ - this.$('.glm-reg-level').html(''); - app.EventRegistrants.each(this.addOne, this); - }, - - render: function(){ - var eventRegistrantView = this.collection.map(function(item){ - return (new app.AccountView({ model: item })).render().el; - }); - this.$el.append(eventRegistrantView); - return this; }, }); diff --git a/js/views/eventList.js b/js/views/eventList.js deleted file mode 100644 index 8f82487..0000000 --- a/js/views/eventList.js +++ /dev/null @@ -1,25 +0,0 @@ -// Event List View -var EventListView = Backbone.View.extend({ - - el: '#eventapp', - - initialize: function(){ - this.collection.bind('add', this.onModelAdded, this); - this.render(); - }, - - - onModelAdded: function(item) { - var eventView = new eventView({model: item}); - this.$el.append( eventView.render().el); - }, - - render: function(){ - var eventView = this.collection.map(function(item){ - return (new EventRegView({model: item})).render().el; - }); - this.$el.append(eventView); - return this; - }, - -}); diff --git a/js/views/eventReg.js b/js/views/eventReg.js deleted file mode 100644 index d5e0791..0000000 --- a/js/views/eventReg.js +++ /dev/null @@ -1,21 +0,0 @@ -// Event Reg View - -var EventRegView = Backbone.View.extend({ - - tagName: 'div', - - className: 'glm-reg-event-item clearfix', - - eventRegTpl: _.template( $('#eventReg-template').html() ), - - // Called when the view is first created - initialize: function(){ - this.listenTo(this.model, 'change', this.render); - }, - - render: function(){ - this.$el.html( this.eventRegTpl( this.model.toJSON() ) ); - return this; - }, - -}); diff --git a/js/views/eventRegApp.js b/js/views/eventRegApp.js deleted file mode 100644 index 4e6c422..0000000 --- a/js/views/eventRegApp.js +++ /dev/null @@ -1,8 +0,0 @@ -// Overall **AppView** -var appView = Backbone.View.extend({ - el: '.glm-reg-level', - - initialize: function(){ - this.listenTo(); - }, -}); diff --git a/js/views/eventRegistrant.js b/js/views/eventRegistrant.js deleted file mode 100644 index 6301790..0000000 --- a/js/views/eventRegistrant.js +++ /dev/null @@ -1,53 +0,0 @@ -// js/views/eventRegistrant.js -var app = app || {}; - -// Event Registrant View -app.AccountView = Backbone.View.extend({ - tagName: 'div', - - className: 'glm-reg-level-registrant clearfix', - - eventRegistrantTpl: _.template( $('#eventRegistrant-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.eventRegistrantTpl( this.model.toJSON() ) ); - this.$nameInput = this.$('.editName'); - this.$emailInput = this.$('.editEmail'); - return this; - }, - - deleteOne: function(){ - this.model.destroy(); - }, - - edit: function(){ - this.$el.addClass( 'editing' ); - this.$nameInput.focus(); - }, - - close: function(){ - var regname = this.$nameInput.val().trim(); - var regemail = this.$emailInput.val().trim(); - - if ( regname && regemail ) { - this.model.save({ name: regname, email: regemail }); - } else { - this.clear(); // NEW - } - - this.$el.removeClass('editing'); - }, - -}); diff --git a/js/views/regClass.js b/js/views/regClass.js new file mode 100644 index 0000000..13fe622 --- /dev/null +++ b/js/views/regClass.js @@ -0,0 +1,55 @@ +// js/views/regClass.js +var app = app || {}; + +app.RegClassView = Backbone.View.extend({ + tagName: 'div', + + className: 'glm-reg-level', + + template: _.template( $('#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 ); + return this; + }, + + events: { + 'click .addRegistrant': 'newEntry', + }, + + newEntry: function(){ + this.$newName = this.$('.addName'); + this.$newEmail = this.$('.addEmail'); + + if ( !this.$newName.val().trim() || !this.$newEmail.val().trim() ) { + return; + } + // var emailMatches = this.model.accounts.where({email: this.$newEmail.val().trim()}); + this.model.accounts.create({ + name: this.$newName.val().trim(), + email: this.$newEmail.val().trim() + }); + this.$newName.val(''); + this.$newEmail.val(''); + }, + + render: function(){ + this.$el.html( this.template( this.model.toJSON() ) ); + return this; + }, + + addOne: function( item ){ + if ( item.isValid() ) { + var view = new app.AccountView({ model: item }); + this.$el.append( view.render().el ); + } + }, + + addAll: function(){ + this.$('.glm-reg-level').html(''); + this.model.classes.each( this.addOne, this ); + }, + +}); diff --git a/js/views/regEvent.js b/js/views/regEvent.js new file mode 100644 index 0000000..b5ec5d3 --- /dev/null +++ b/js/views/regEvent.js @@ -0,0 +1,28 @@ +// js/views/regEvent.js +var app = app || {}; + +// Reg Event View +app.RegEventView = Backbone.View.extend({ + + tagName: 'div', + + className: 'glm-reg-event-item clearfix', + + template: _.template( $('#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() ) ); + //console.log(app.regEvent.classes); + var view = app.regEvent.classes.map(function(item){ + return (new app.RegClassView({ model: item })).render().el; + }); + this.$el.append(view); + return this; + }, + +}); diff --git a/models/front/registrations/registration.php b/models/front/registrations/registration.php index 09fb96b..72eb924 100644 --- a/models/front/registrations/registration.php +++ b/models/front/registrations/registration.php @@ -39,17 +39,17 @@ { $scripts = array( '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', + 'regClasses' => 'js/collections/regClasses.js', 'regRates' => 'js/collections/regRates.js', - 'mybackboneapp' => 'js/eventRegApp.js', + 'registrantView'=> 'js/views/account.js', + 'regEventView' => 'js/views/regEvent.js', + 'regClassView' => 'js/views/regClass.js', + 'appView' => 'js/views/app.js', ); foreach ( $scripts as $scriptName => $scriptPath ) { wp_register_script( @@ -116,7 +116,7 @@ 'entry' => $regEventSample, 'thisJsUrl' => GLM_MEMBERS_REGISTRATIONS_PLUGIN_URL . '/js', 'regEventJSON' => json_encode( $regEventSample['reg_event'] ), - 'regClassesJSON' => json_encode( $regEventSample['reg_class'] ) + 'regClassesJSON' => json_encode( $regEventSample['reg_class'][1] ) ); // 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 2963159..164e15e 100644 --- a/views/front/registrations/registration.html +++ b/views/front/registrations/registration.html @@ -5,14 +5,24 @@
{* Underscore Templates for the Event Registration App *} {literal} - - + {/literal} -{********** - -***********} -
- {$event = $entry.reg_event} -
-

{$event.event_name}

-
- -
-

- description of event -

-
-
-

Pick your registration dates

- - -
- {$levels = $entry.reg_class} - {foreach $levels as $level} -
-

{$level.name}

-

{$level.descr}

-
- - - -
- -
- {/foreach} -
- -
-
-
+
{* Bootstrap the models needed on page load *} -{* Need to have eventRegistration model created *} -{* And create the regClasses collection *} +{* Need to have RegEvent model created *} +{* And create the RegClasses collection *}