More redoing the front end application in backbone.js
authorSteve Sutton <steve@gaslightmedia.com>
Thu, 24 Aug 2017 20:55:15 +0000 (16:55 -0400)
committerSteve Sutton <steve@gaslightmedia.com>
Thu, 24 Aug 2017 20:55:15 +0000 (16:55 -0400)
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.

16 files changed:
js/collections/accounts.js [new file with mode: 0644]
js/collections/eventRegistrantList.js [deleted file]
js/collections/regClasses.js [new file with mode: 0644]
js/collections/regRates.js [new file with mode: 0644]
js/eventRegApp.js
js/models/account.js
js/models/classes.js [new file with mode: 0644]
js/models/eventReg.js [deleted file]
js/models/eventRegistrant.js [deleted file]
js/models/regClass.js [new file with mode: 0644]
js/models/regEvent.js [new file with mode: 0644]
js/models/regRate.js [new file with mode: 0644]
js/views/app.js
js/views/eventRegistrant.js
models/front/registrations/registration.php
views/front/registrations/registration.html

diff --git a/js/collections/accounts.js b/js/collections/accounts.js
new file mode 100644 (file)
index 0000000..ac320ee
--- /dev/null
@@ -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 (file)
index 9abd6a3..0000000
+++ /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 (file)
index 0000000..9481077
--- /dev/null
@@ -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 (file)
index 0000000..4be0177
--- /dev/null
@@ -0,0 +1,10 @@
+// js/collections/regRates.js
+
+var app = app || {};
+
+// Registration Rate Collection
+app.RegRates = Backbone.Collection.extend({
+    model: app.RegRate,
+
+    // localStorage
+});
index 0d9320e..672b552 100644 (file)
@@ -1,7 +1,7 @@
 // eventRegApp.js
 var app = app || {};
 
-app.EventRegistrants = new app.EventRegistrantList();
+app.EventRegistrants = new app.Accounts();
 
 jQuery(document).ready(function($){
 
index 3117d2b..51b0de1 100644 (file)
@@ -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 (file)
index 0000000..801da68
--- /dev/null
@@ -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 (file)
index 594139c..0000000
+++ /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 (file)
index d618b55..0000000
+++ /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 (file)
index 0000000..97ff460
--- /dev/null
@@ -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 (file)
index 0000000..fc9526d
--- /dev/null
@@ -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 (file)
index 0000000..6c8ba3f
--- /dev/null
@@ -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
+    },
+
+});
index f5656e3..b45603b 100644 (file)
@@ -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;
index b9cb0c0..6301790 100644 (file)
@@ -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',
index daeaaca..09fb96b 100644 (file)
     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(
 
         // 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(
index 547b526..2963159 100644 (file)
     <input class="password">
     <input type="submit" class="accountLogin" value="Login">
 </script>
+{/literal}
+{**********
 <script class="text/template" id="eventReg-account">
     <div class="eventReg-account-name"><%= fname %><%= lname %></div>
     <div class="eventReg-account-email"><%= email %></div>
 </script>
-{/literal}
+***********}
 <div class="glm-reg-event-list">
     {$event = $entry.reg_event}
     <div class="glm-reg-event-item clearfix">
     </div>
 
 </div>
+{* Bootstrap the models needed on page load *}
+{* Need to have eventRegistration model created *}
+{* And create the regClasses collection *}
+<script>
+jQuery(document).ready(function($){
+    var eventRegistration = new app.RegEvent;
+    eventRegistration.set( {$regEventJSON} );
+
+    var eventClasses = new app.RegClasses;
+    eventClasses.reset( {$regClassesJSON} );
+});
+</script>