From a2507c4ba7c5738450b1050d8bc8c3cba093d397 Mon Sep 17 00:00:00 2001 From: Chuck Scott Date: Fri, 15 Sep 2017 16:06:21 -0400 Subject: [PATCH] More work on adding rates to classes (registration levels). Still some problems when clicking the "add" button after providing initial text for adding a rate or level. --- css/admin.css | 4 + gulpfile.js | 2 +- js/adminRegApp.js | 356 +++++++++++++++++- js/collections/admin/regRates.js | 3 +- js/models/admin/regClass.js | 2 +- js/models/admin/regRate.js | 6 +- js/views/admin/regClass.js | 69 ++-- js/views/admin/regRate.js | 84 +++++ .../admin/registrations/eventEditLevels.html | 37 +- 9 files changed, 530 insertions(+), 33 deletions(-) create mode 100644 js/views/admin/regRate.js diff --git a/css/admin.css b/css/admin.css index 788b7ea..01faa2a 100644 --- a/css/admin.css +++ b/css/admin.css @@ -50,3 +50,7 @@ .class-edit-form { display: none; } +.class-rate-container { + margin-top: 1em; + margin-left: 2em; +} diff --git a/gulpfile.js b/gulpfile.js index 4df9536..1db5c09 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -12,7 +12,7 @@ gulp.task('adminscripts', function(){ ]) .pipe(plumber()) .pipe(concat('adminRegApp.js')) - .pipe(uglify()) +// .pipe(uglify()) .pipe(jshint()) .pipe(gulp.dest('js/')); }); diff --git a/js/adminRegApp.js b/js/adminRegApp.js index d4a2dcf..09ce599 100644 --- a/js/adminRegApp.js +++ b/js/adminRegApp.js @@ -1 +1,355 @@ -app.Models.Admin.RegClass=Backbone.Model.extend({defaults:{id:null,reg_event:0,name:"",descr:""},initialize:function(){this.rates=new app.Collections.Admin.RegRates}}),app.Models.Admin.RegEvent=Backbone.Model.extend({defaults:{name:"regEvent",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(){this.classes=new app.Collections.Admin.RegClasses},setClasses:function(e){this.classes.reset(e)}}),app.Models.Admin.RegRate=Backbone.Model.extend({defaults:{reg_event:0,reg_class:"",name:"",start_days:0,end_days:0,base_rate:0,per_registrant:0,registrant_credits:0},initialize:function(){}}),app.Collections.Admin.RegClasses=Backbone.Collection.extend({model:app.Models.Admin.RegClass,localStorage:new Backbone.LocalStorage("Classes")}),app.Collections.Admin.RegRates=Backbone.Collection.extend({model:app.Models.Admin.RegRate}),Backbone.emulateJSON=!0,Backbone.emulateHTTP=!0,app.Views.Admin.EventEditLevels=Backbone.View.extend({el:"#regApp",initialize:function(){this.event=new app.Views.Admin.RegEvent({model:regEvent}),this.render()},render:function(){return this.$el.append(this.event.render().el),this},events:{}}),app.Views.Admin.RegClass=Backbone.View.extend({tagName:"div",className:"glm-reg-level",template:_.template(jQuery("#regClass-template").html()),initialize:function(){return this.listenTo(this.model,"change",this.render),this},events:{"click .class-edit":"editLevel","click .class-update":"update","click .class-add":"add","click .class-cancel":"cancel"},update:function(){console.log("update called");var e=this.$(".class-name").val().trim(),s=this.$(".class-descr").val().trim();this.model.save({name:e,descr:s}),this.$(".class-display-template").show(),this.$(".class-edit-template").hide(),glmSubmitRequired--},s:function(){console.log("add called");var e=this.$(".class-name").val().trim(),s=this.$(".class-descr").val().trim();this.model.set({name:e,descr:s}),this.model.get("parent").classes.create(this.model)},cancel:function(){console.log("cancel called"),this.remove()},editLevel:function(){console.log("editLevel called"),this.$(".class-display-template").hide(),this.$(".class-edit-template").show(),this.$(".class-name").focus(),glmSubmitRequired++},render:function(e){return this.$el.html(this.template(this.model.toJSON())),e&&(console.log("New level created"),this.$(".class-display-template").hide(),this.$(".class-edit-template").show(),this.$(".class-name").focus(),glmSubmitRequired++),this},addOne:function(e){if(console.log("addOne called"),e.isValid()){var s=new app.Views.Admin.RegClasses({model:e});this.$el.append(s.render().el)}},addAll:function(){jQuery(".glm-reg-level").html("")}}),app.Views.Admin.RegEvent=Backbone.View.extend({tagName:"div",className:"glm-reg-event-item clearfix",template:_.template(jQuery("#regEvent-template").html()),initialize:function(){this.listenTo(this.model,"change",this.render),this.listenTo(this.model.classes,"add",this.addOne),this.listenTo(this.model.classes,"create",this.addOne),this.listenTo(this.model.classes,"reset",this.addAll)},events:{"click #class-add":"addLevel"},addLevel:function(){console.log("addLevel Called");var e=new app.Models.Admin.RegClass({parent:this.model}),s=new app.Views.Admin.RegClass({model:e});this.$el.append(s.render(!0).el)},render:function(){this.$el.html(this.template(this.model.toJSON()));var e=regEvent.classes.map(function(e){return new app.Views.Admin.RegClass({model:e}).render().el});return this.$el.append(e),this}}); \ No newline at end of file +// js/models/regAdminClass.js + +// Admin Registration Class model +app.Models.Admin.RegClass = Backbone.Model.extend({ + + // Defaults + defaults: { + id: null, + parent: 0, + reg_event: 0, + name: '', + descr: '', + }, + + initialize: function(){ + this.rates = new app.Collections.Admin.RegRates; + }, + +}); + +// js/models/regAdminEvent.js + +// Event Reg model +app.Models.Admin.RegEvent = Backbone.Model.extend({ + + // Default regEvent values + defaults: { + name: 'regEvent', + 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 + this.classes = new app.Collections.Admin.RegClasses; + }, + + setClasses: function( regClasses ){ + this.classes.reset( regClasses ); + }, + +}); + +// js/models/regRate.js + +// Event Reg model + +app.Models.Admin.RegRate = Backbone.Model.extend({ + + // Default regRate values + defaults: { + id: null, + parent: 0, + 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(){ + localStorage: new Backbone.LocalStorage( 'Rates' ); + }, + +}); + +// js/collections/classes.js + +// Classes Collection +app.Collections.Admin.RegClasses = Backbone.Collection.extend({ + model: app.Models.Admin.RegClass, + + localStorage: new Backbone.LocalStorage( 'Classes' ), + +}); + +// js/collections/regRates.js + +// Registration Rate Collection +app.Collections.Admin.RegRates = Backbone.Collection.extend({ + model: app.Models.Admin.RegRate, + + localStorage: new Backbone.LocalStorage( 'Rates' ) + +}); + +// js/views/app.js +Backbone.emulateJSON = true; +Backbone.emulateHTTP = true; + +// Event Registrant List View +app.Views.Admin.EventEditLevels = Backbone.View.extend({ + + el: '#regApp', + + initialize: function(){ + this.event = new app.Views.Admin.RegEvent({ model: regEvent }); + this.render(); + }, + + render: function(){ + this.$el.append( this.event.render().el ); + return this; + }, + + events: { + }, + +}); + +// js/views/regClass.js + +app.Views.Admin.RegClass = Backbone.View.extend({ + tagName: 'div', + + className: 'glm-reg-level', + + template: _.template( jQuery('#regClass-template').html() ), + + initialize: function(){ + this.listenTo( this.model, 'change', this.render ); + return this; + }, + + events: { + 'click .class-edit': 'editLevel', + 'click .class-update': 'update', + 'click .class-add': 'add', + 'click .class-cancel': 'cancel', + 'click .class-delete-level': 'deleteLevel', + 'click .class-add-rate': 'addRate' + }, + + update: function(){ + console.log('update called'); + var cName = this.$('.class-name').val().trim(); + var cDescr = this.$('.class-descr').val().trim(); +// this.model.save({ name: cName, descr: cDescr }); + this.$('.class-display-template').show(); + this.$('.class-edit-template').hide(); + glmSubmitRequired--; + }, + + add: function(){ + console.log('add called'); + this.$('.class-display-template').show(); + this.$('.class-edit-template').hide(); + this.$('.class-update').hide(); + this.$('.class-add').hide(); + var cName = this.$('.class-name').val().trim(); + var cDescr = this.$('.class-descr').val().trim(); + this.model.set({ name: cName, descr: cDescr }); + // Add this new model to the collection. + var parentEvent = this.model.get( 'parent' ); // ???????? +// parentEvent.classes.create( this.model ); + }, + + deleteLevel: function(){ + if (this.newClass) { + alert('removing a new class. May have to avoid doing any ajax call if not updated yet.') + } + this.remove(); + alert('Need to check that this is actually removing from database..'); + }, + + cancel: function(){ + console.log('cancel called'); + this.remove(); + }, + + editLevel: function(){ + console.log('editLevel called'); + this.$('.class-display-template').hide(); + this.$('.class-edit-template').show(); + this.$('.class-name').focus(); + glmSubmitRequired++; + }, + + render: function(addFlag){ + this.$el.html( this.template( this.model.toJSON() ) ); + // If addFlag set then we know the call to this is to add a class and not to initialize existing classes + if (addFlag) { + console.log('New level created'); + this.$('.class-display-template').hide(); + this.$('.class-edit-template').show(); + this.$('.class-update').hide(); + this.$('.class-add').show(); + this.$('.class-name').focus(); + this.newClass = true; + glmSubmitRequired++; + } + return this; + }, + + addOne: function( item ){ + console.log('addOne called'); + if ( item.isValid() ) { + var view = new app.Views.Admin.RegClasses({ model: item }); + this.$el.append( view.render().el ); + } + }, + + addAll: function(){ + jQuery('.glm-reg-level').html(''); + }, + + addRate: function(){ + console.log( 'addRate Called'); + var regRate = new app.Models.Admin.RegRate({ parent: this.model }); + //this.model.classes.add( regClass ); + var view = new app.Views.Admin.RegRate({ model: regRate }); + // Place rates inside the class-rate-container of the parent class + var rateContainer = this.$('.class-rate-container'); + rateContainer.append(view.render(true).el); + } + +}); + +// js/views/adminRegEvent.js + +// Admin reg view +app.Views.Admin.RegEvent = Backbone.View.extend({ + + tagName: 'div', + + className: 'glm-reg-event-item clearfix', + + template: _.template( jQuery('#regEvent-template').html() ), + + // Called when the view is first created + initialize: function(){ + this.listenTo( this.model, 'change', this.render ); + this.listenTo( this.model.classes, 'add', this.addOne ); + this.listenTo( this.model.classes, 'create', this.addOne ); + this.listenTo( this.model.classes, 'reset', this.addAll ); + }, + + events: { + 'click #class-add': 'addLevel', + }, + + addLevel: function(){ + console.log( 'addLevel Called' ); + // create a new view and model and add it to classes and call render. + // Create the model for the view and add it to the collection + var regClass = new app.Models.Admin.RegClass({ parent: this.model }); + //this.model.classes.add( regClass ); + var view = new app.Views.Admin.RegClass({ model: regClass }); + this.$el.append(view.render(true).el); + }, + + render: function(){ + this.$el.html( this.template( this.model.toJSON() ) ); + var view = regEvent.classes.map(function(item){ + return (new app.Views.Admin.RegClass({ model: item })).render().el; + }); + this.$el.append(view); + return this; + }, + +}); + +// js/views/regClass.js + +app.Views.Admin.RegRate = Backbone.View.extend({ + tagName: 'div', + + className: 'glm-reg-rate', + + template: _.template( jQuery('#regRate-template').html() ), + + initialize: function(){ + this.listenTo( this.model, 'change', this.render ); + return this; + }, + + events: { + 'click .rate-edit': 'edit', + 'click .rate-update': 'update', + 'click .rate-add': 'add', + 'click .rate-cancel': 'cancel', + 'click .rate-delete': 'deleteRate' + }, + + edit: function() { + console.log('edit called'); + this.$('.rate-display-template').hide(); + this.$('.rate-edit-template').show(); + this.$('.rate-name').focus(); + glmSubmitRequired++; + }, + + update: function() { + console.log('update called'); + var cName = this.$('.rate-name').val().trim(); +// this.model.save({ name: cName }); + this.$('.rate-display-template').show(); + this.$('.rate-edit-template').hide(); + glmSubmitRequired--; + + }, + + cancel: function() { + console.log('cancel called'); + this.remove(); + }, + + add: function(){ + console.log('add called'); + this.$('.rate-display-template').show(); + this.$('.rate-edit-template').hide(); + this.$('.rate-update').hide(); + this.$('.rate-add').hide(); + var cName = this.$('.rate-name').val().trim(); + this.model.set({ name: cName }); + // Add this new model to the collection. + var parentRate = this.model.get( 'parent' ); // ???????? +// parentRate.classes.create( this.model ); + }, + + deleteRate: function() { + console.log('deleteRate called'); + if (this.newRate) { +console.log('Removing a new rate. May have to avoid doing any ajax call if not updated yet.') + } + this.remove(); +console.log('Need to check that this is actually removing from database..'); + }, + + render: function(addFlag){ + this.$el.html( this.template( this.model.toJSON() ) ); + // If addFlag set then we know the call to this is to add a class and not to initialize existing classes + if (addFlag) { + console.log('New rate created'); + this.$('.rate-display-template').hide(); + this.$('.rate-edit-template').show(); + this.$('.rate-update').hide(); + this.$('.rate-add').show(); + this.$('.rate-name').focus(); + this.newRate = true; + glmSubmitRequired++; + } + return this; + } + +}); diff --git a/js/collections/admin/regRates.js b/js/collections/admin/regRates.js index aaaf8e2..d192345 100644 --- a/js/collections/admin/regRates.js +++ b/js/collections/admin/regRates.js @@ -4,5 +4,6 @@ app.Collections.Admin.RegRates = Backbone.Collection.extend({ model: app.Models.Admin.RegRate, - // localStorage + localStorage: new Backbone.LocalStorage( 'Rates' ) + }); diff --git a/js/models/admin/regClass.js b/js/models/admin/regClass.js index b4685f5..1ba7314 100644 --- a/js/models/admin/regClass.js +++ b/js/models/admin/regClass.js @@ -6,7 +6,7 @@ app.Models.Admin.RegClass = Backbone.Model.extend({ // Defaults defaults: { id: null, -// parent: 0, + parent: 0, reg_event: 0, name: '', descr: '', diff --git a/js/models/admin/regRate.js b/js/models/admin/regRate.js index be92467..a431494 100644 --- a/js/models/admin/regRate.js +++ b/js/models/admin/regRate.js @@ -1,11 +1,13 @@ // js/models/regRate.js // Event Reg model - + app.Models.Admin.RegRate = Backbone.Model.extend({ // Default regRate values defaults: { + id: null, + parent: 0, reg_event: 0, reg_class: '', name: '', @@ -17,7 +19,7 @@ app.Models.Admin.RegRate = Backbone.Model.extend({ }, initialize: function(){ - // for setting up classes + localStorage: new Backbone.LocalStorage( 'Rates' ); }, }); diff --git a/js/views/admin/regClass.js b/js/views/admin/regClass.js index b6a4f86..0a71465 100644 --- a/js/views/admin/regClass.js +++ b/js/views/admin/regClass.js @@ -13,32 +13,46 @@ app.Views.Admin.RegClass = Backbone.View.extend({ }, events: { - 'click .class-edit': 'editLevel', - 'click .class-update': 'update', - 'click .class-add': 'add', - 'click .class-cancel': 'cancel', + 'click .class-edit': 'editLevel', + 'click .class-update': 'update', + 'click .class-add': 'add', + 'click .class-cancel': 'cancel', + 'click .class-delete-level': 'deleteLevel', + 'click .class-add-rate': 'addRate' }, update: function(){ console.log('update called'); var cName = this.$('.class-name').val().trim(); var cDescr = this.$('.class-descr').val().trim(); - this.model.save({ name: cName, descr: cDescr }); +// this.model.save({ name: cName, descr: cDescr }); this.$('.class-display-template').show(); this.$('.class-edit-template').hide(); glmSubmitRequired--; - },s + }, add: function(){ - console.log('add called'); + console.log('add called'); + this.$('.class-display-template').show(); + this.$('.class-edit-template').hide(); + this.$('.class-update').hide(); + this.$('.class-add').hide(); var cName = this.$('.class-name').val().trim(); var cDescr = this.$('.class-descr').val().trim(); this.model.set({ name: cName, descr: cDescr }); // Add this new model to the collection. - var parentEvent = this.model.get( 'parent' ); - parentEvent.classes.create( this.model ); + var parentEvent = this.model.get( 'parent' ); // ???????? +// parentEvent.classes.create( this.model ); }, + deleteLevel: function(){ + if (this.newClass) { + alert('removing a new class. May have to avoid doing any ajax call if not updated yet.') + } + this.remove(); + alert('Need to check that this is actually removing from database..'); + }, + cancel: function(){ console.log('cancel called'); this.remove(); @@ -46,28 +60,31 @@ app.Views.Admin.RegClass = Backbone.View.extend({ editLevel: function(){ console.log('editLevel called'); - this.$('.class-display-template').hide(); + this.$('.class-display-template').hide(); this.$('.class-edit-template').show(); this.$('.class-name').focus(); - glmSubmitRequired++; + glmSubmitRequired++; }, render: function(addFlag){ - this.$el.html( this.template( this.model.toJSON() ) ); - // If addFlag set then we know the call to this is to add a class and not to initialize existing classes - if (addFlag) { - console.log('New level created'); - this.$('.class-display-template').hide(); - this.$('.class-edit-template').show(); - this.$('.class-name').focus(); - glmSubmitRequired++; - } + this.$el.html( this.template( this.model.toJSON() ) ); + // If addFlag set then we know the call to this is to add a class and not to initialize existing classes + if (addFlag) { + console.log('New level created'); + this.$('.class-display-template').hide(); + this.$('.class-edit-template').show(); + this.$('.class-update').hide(); + this.$('.class-add').show(); + this.$('.class-name').focus(); + this.newClass = true; + glmSubmitRequired++; + } return this; }, addOne: function( item ){ console.log('addOne called'); - if ( item.isValid() ) { + if ( item.isValid() ) { var view = new app.Views.Admin.RegClasses({ model: item }); this.$el.append( view.render().el ); } @@ -76,5 +93,15 @@ app.Views.Admin.RegClass = Backbone.View.extend({ addAll: function(){ jQuery('.glm-reg-level').html(''); }, + + addRate: function(){ + console.log( 'addRate Called'); + var regRate = new app.Models.Admin.RegRate({ parent: this.model }); + //this.model.classes.add( regClass ); + var view = new app.Views.Admin.RegRate({ model: regRate }); + // Place rates inside the class-rate-container of the parent class + var rateContainer = this.$('.class-rate-container'); + rateContainer.append(view.render(true).el); + } }); diff --git a/js/views/admin/regRate.js b/js/views/admin/regRate.js new file mode 100644 index 0000000..b9a6798 --- /dev/null +++ b/js/views/admin/regRate.js @@ -0,0 +1,84 @@ +// js/views/regClass.js + +app.Views.Admin.RegRate = Backbone.View.extend({ + tagName: 'div', + + className: 'glm-reg-rate', + + template: _.template( jQuery('#regRate-template').html() ), + + initialize: function(){ + this.listenTo( this.model, 'change', this.render ); + return this; + }, + + events: { + 'click .rate-edit': 'edit', + 'click .rate-update': 'update', + 'click .rate-add': 'add', + 'click .rate-cancel': 'cancel', + 'click .rate-delete': 'deleteRate' + }, + + edit: function() { + console.log('edit called'); + this.$('.rate-display-template').hide(); + this.$('.rate-edit-template').show(); + this.$('.rate-name').focus(); + glmSubmitRequired++; + }, + + update: function() { + console.log('update called'); + var cName = this.$('.rate-name').val().trim(); +// this.model.save({ name: cName }); + this.$('.rate-display-template').show(); + this.$('.rate-edit-template').hide(); + glmSubmitRequired--; + + }, + + cancel: function() { + console.log('cancel called'); + this.remove(); + }, + + add: function(){ + console.log('add called'); + this.$('.rate-display-template').show(); + this.$('.rate-edit-template').hide(); + this.$('.rate-update').hide(); + this.$('.rate-add').hide(); + var cName = this.$('.rate-name').val().trim(); + this.model.set({ name: cName }); + // Add this new model to the collection. + var parentRate = this.model.get( 'parent' ); // ???????? +// parentRate.classes.create( this.model ); + }, + + deleteRate: function() { + console.log('deleteRate called'); + if (this.newRate) { +console.log('Removing a new rate. May have to avoid doing any ajax call if not updated yet.') + } + this.remove(); +console.log('Need to check that this is actually removing from database..'); + }, + + render: function(addFlag){ + this.$el.html( this.template( this.model.toJSON() ) ); + // If addFlag set then we know the call to this is to add a class and not to initialize existing classes + if (addFlag) { + console.log('New rate created'); + this.$('.rate-display-template').hide(); + this.$('.rate-edit-template').show(); + this.$('.rate-update').hide(); + this.$('.rate-add').show(); + this.$('.rate-name').focus(); + this.newRate = true; + glmSubmitRequired++; + } + return this; + } + +}); diff --git a/views/admin/registrations/eventEditLevels.html b/views/admin/registrations/eventEditLevels.html index 0849c3f..e56e774 100644 --- a/views/admin/registrations/eventEditLevels.html +++ b/views/admin/registrations/eventEditLevels.html @@ -40,7 +40,7 @@
Edit - Add Reg Rate + Add Reg Rate Delete Level
@@ -53,19 +53,44 @@
Update - Add Reg Rate + + Add Reg Rate Delete Level
- Level Name: + Level Name:
- Description: + Description: +
+
{/literal} @@ -97,7 +122,7 @@ regEvent.set( {$regEventJSON} ); new app.Views.Admin.EventEditLevels(); - // If submit is required and we're laving the page, alert the user + // If submit is required and we're laving the page, alert the user - Note, there is no way to change the pop-up message anymore. $(window).bind('beforeunload', function() { if (glmSubmitRequired) { return true; -- 2.17.1