From: Steve Sutton Date: Wed, 23 Aug 2017 19:48:59 +0000 (-0400) Subject: More backbone updates for front end X-Git-Tag: v1.0.0^2~451 X-Git-Url: http://cvs2.gaslightmedia.com/gitweb/?a=commitdiff_plain;h=369e0550ad9a4d028af43a098d42d1f74a68c078;p=WP-Plugins%2Fglm-member-db-registrations.git 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 --- 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 --- 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 --- 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 --- 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 --- 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 --- a/views/front/registrations/registration.html +++ b/views/front/registrations/registration.html @@ -10,6 +10,7 @@

- event description -