More backbone updates for front end

Adding new registrant form inside the class level part. You can add
registrants and delete them and edit them.

diff --git a/css/front.css b/css/front.css
index db365ec..adb5ea6 100644 (file)
--- a/css/front.css
+++ b/css/front.css
@@ -77,21 +77,34 @@
     width: 100%;
     display: none;
 }
+.registrant-add {
+    width: 100%;
+    clear: both;
+}
 .editing .registrant-edit {
     display: block;
 }
 .editing .registrant-label {
     display: none;
 }
-.registrant-edit input[type='text'] {
+.registrant-edit input[type='text'],
+.registrant-add input[type='text']
+{
     width: 40% !important;
     float: left;
     margin-right: 1rem;
 }
-.registrant-edit input[type='submit'] {
+.registrant-edit input[type='submit'],
+.registrant-add input[type='submit'] {
     width: 10%;
     float: left;
     padding: .5rem .2rem;
     margin: 0;
     font-size: .75rem;
 }
+.glm-reg-level-registrant-delete {
+    float: right;
+}
+label.registrant-label {
+    width: 80%;
+}

diff --git a/js/eventRegApp.js b/js/eventRegApp.js
index 105ed08..0c26225 100644 (file)
--- a/js/eventRegApp.js
+++ b/js/eventRegApp.js
@@ -1,19 +1,14 @@
 // eventRegApp.js
 var app = app || {};
 
-jQuery(document).ready(function($){
+var registrant1 = new app.EventRegistrant({ 'name': 'Steve Sutton', 'email': 'steve@gaslightmedia.com' }),
+    registrant2 = new app.EventRegistrant({ 'name': 'Laury Garcia van Rooiken', 'email': 'laury@gaslightmedia.com' }),
+    registrant3 = new app.EventRegistrant({ 'name': 'Anthony Talarico', 'email': 'talarico@gaslightmedia.com' });
 
-    var registrant1 = new app.EventRegistrant({ 'name': 'Steve Sutton', 'email': 'steve@gaslightmedia.com' }),
-        registrant2 = new app.EventRegistrant({ 'name': 'Laury Garcia van Rooiken', 'email': 'laury@gaslightmedia.com' }),
-        registrant3 = new app.EventRegistrant({ 'name': 'Anthony Talarico', 'email': 'talarico@gaslightmedia.com' });
+app.EventRegistrants = new app.EventRegistrantList();
 
-    app.EventRegistrants = new app.EventRegistrantList( [
-        registrant1,
-        registrant2,
-        registrant3
-    ] );
+jQuery(document).ready(function($){
 
     new app.EventRegistrantListView();
 
-    console.log( app.EventRegistrants );
 });

diff --git a/js/models/eventRegistrant.js b/js/models/eventRegistrant.js
index 3fa061c..b6006f2 100644 (file)
--- a/js/models/eventRegistrant.js
+++ b/js/models/eventRegistrant.js
@@ -4,10 +4,26 @@ 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/views/eventRegistrant.js b/js/views/eventRegistrant.js
index e10fcb3..b9cb0c0 100644 (file)
--- a/js/views/eventRegistrant.js
+++ b/js/views/eventRegistrant.js
@@ -10,12 +10,14 @@ app.EventRegistrantView = Backbone.View.extend({
     eventRegistrantTpl: _.template( $('#eventRegistrant-template').html() ),
 
     events: {
-        'dblclick label': 'edit',
+        '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;
     },
 
@@ -26,6 +28,10 @@ app.EventRegistrantView = Backbone.View.extend({
         return this;
     },
 
+    deleteOne: function(){
+        this.model.destroy();
+    },
+
     edit: function(){
         this.$el.addClass( 'editing' );
         this.$nameInput.focus();

diff --git a/js/views/eventRegistrantList.js b/js/views/eventRegistrantList.js
index 0d20238..a355aee 100644 (file)
--- a/js/views/eventRegistrantList.js
+++ b/js/views/eventRegistrantList.js
@@ -7,6 +7,9 @@ app.EventRegistrantListView = Backbone.View.extend({
     el: '.glm-reg-level',
 
     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();
@@ -14,9 +17,38 @@ app.EventRegistrantListView = Backbone.View.extend({
         //this.render();
     },
 
+    deleteOne: function( el ){
+        console.log( el );
+        console.log( 'deleteOne called on listView' );
+        //app.EventRegistrants.fetch();
+    },
+
+    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){
-        var view = new app.EventRegistrantView({ model: item });
-        this.$el.append( view.render().el );
+        if ( item.isValid() ) {
+            var view = new app.EventRegistrantView({ model: item });
+            this.$el.append( view.render().el );
+        }
     },
 
     addAll: function(){

diff --git a/views/front/registrations/registration.html b/views/front/registrations/registration.html
index 66301cb..647c025 100644 (file)
--- a/views/front/registrations/registration.html
+++ b/views/front/registrations/registration.html
@@ -10,6 +10,7 @@
     <p> - event description - </p>
 </script>
 <script type="text/template" id="eventRegistrant-template">
+    <a class="glm-reg-level-registrant-delete">Delete</a>
     <label class="registrant-label">
         <span class="glm-reg-level-registrant-name"><%= name %></span>
         <span class="glm-reg-level-registrant-email"><%= email %></span>
@@ -40,7 +41,12 @@
             <div class="glm-reg-level">
                 <h3>{$level.name}</h3>
                 <p>{$level.descr}</p>
-                <span class="glm-reg-level-add-registrant">+</span>
+                <div class="registrant-add clearfix">
+                    <input type="text" class="addName" placeholder="Enter Name">
+                    <input type="text" class="addEmail" placeholder="Enter Email Address">
+                    <input type="submit" class="addRegistrant" value="Add">
+                </div>
+                <!-- <span class="glm-reg-level-add-registrant">+</span> -->
             </div>
             {/foreach}
             <div class="glm-reg-submit">