From cb4763c17242067e654b0c3eb9400c8a9f66252c Mon Sep 17 00:00:00 2001
From: Jason Denney <jdenney@lgscout.com>
Date: Sat, 2 Nov 2013 19:38:31 -0400
Subject: [PATCH 1/7] So close, just a minor bug left to fix

Can't put a field container within a field container, need to flatten it out.
---
 .../javascripts/custom_netzke_helpers.js      | 290 ++++++++++++++++++
 app/components/bike_logs.rb                   |   2 +-
 2 files changed, 291 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/custom_netzke_helpers.js b/app/assets/javascripts/custom_netzke_helpers.js
index 912f2c9..e4655e1 100644
--- a/app/assets/javascripts/custom_netzke_helpers.js
+++ b/app/assets/javascripts/custom_netzke_helpers.js
@@ -3,6 +3,296 @@ Ext.Ajax.on('requestexception', function(conn, response, options) {
   if (response.status === 401) { window.location = '/users/sign_in'; }
 }, this);
 
+
+Ext.define('app.view.form.field.TimeField', {
+    extend:'Ext.form.FieldContainer',
+    mixins:{
+        field:'Ext.form.field.Field'
+    },
+    alias: 'widget.xampmtime',
+
+    layout: 'hbox',
+    format: 'H:i:s',
+    submitFormat: 'H:i:s',
+
+    hourField: null,
+    minuteField: null,
+    ampmField: null,
+
+    /* custom configs & callbacks */
+
+    getValue: function(v){
+        hour = this.hourField.getValue();
+        minute = this.minuteField.getValue();
+        ampm = this.ampmField.getValue();
+        value = Ext.Date.parse(hour + " " + minute + " " + ampm, 'g i A');
+        value = Ext.Date.format(value, this.submitFormat);
+        return value;
+    },
+
+    getSubmitValue: function(value){
+        /* override function getValue() */
+        return this.getValue(value);
+    },
+
+    setValue: function(value){
+      if (Ext.isString(value) || Ext.isDate(value) ){
+        var dt = null;
+
+        if( Ext.isString ) {
+          dt = new Date(value);
+        }else{
+          dt = value;
+        }
+
+        hour = Ext.Date.format(dt, 'g');
+        minute = Ext.Date.format(dt, 'i');
+        ampm = Ext.Date.format(dt, 'A');
+
+        this.hourField.setValue(hour);
+        this.minuteField.setRawValue(minute);
+        this.ampmField.setValue(ampm);
+      }
+
+        /* override function setValue() */
+    },
+
+    initComponent: function(){
+        /* further code on event initComponent */
+        var me = this
+        me.items = me.items || [];
+
+        me.hourField = Ext.create('Ext.form.field.Number', {
+     //           maxWidth: 20,
+                allowBlank: false,
+                allowOnlyWhitespace: false,
+                blankText: "Hour cannot be blank.",
+                allowDecimals: false,
+                maxValue: 12,
+                minValue: 1,
+                maxLength: 2,
+                enforceMaxLength: 2,
+                hideTrigger: true,
+                submitValue:false,
+                flex:1,
+                //fieldStyle:     "text-align:right;",
+                isFormField:false, //exclude from field query's
+            });
+        me.items.push(me.hourField);
+
+        me.colon = Ext.create('Ext.draw.Text', {
+                text: ':',
+                padding: '3 3 0 3'
+          });
+        me.items.push(me.colon);
+
+        me.minuteField = Ext.create('Ext.form.field.Number', {
+    //            maxWidth: 20,
+                allowBlank: false,
+                allowOnlyWhitespace: false,
+                blankText: "Minutes cannot be blank.",
+                allowDecimals: false,
+                maxValue: 59,
+                minValue: 0,
+                maxLength: 2,
+                enforceMaxLength: 2,
+                hideTrigger: true,
+                submitValue:false,
+                flex:1,
+                isFormField:false, //exclude from field query's
+            });
+        me.items.push(me.minuteField);
+
+
+        me.ampmField = Ext.create('Ext.form.ComboBox', {
+              //maxWidth: 25,
+              value: 'PM',
+              store: ['AM', 'PM'],
+              forceSelection: true,
+              flex:1,
+              editable: false
+          });
+
+        me.items.push(me.ampmField);
+
+        me.callParent();
+
+        // this dummy is necessary because Ext.Editor will not check whether an inputEl is present or not
+        this.inputEl = {
+            dom: document.createElement('div'),
+            swallowEvent:function(){}
+        };
+
+        me.initField();
+    },
+
+    focus:function(){
+        this.callParent(arguments);
+        this.hourField.focus();
+    },
+});
+
+
+
+
+Ext.define('Ext.ux.form.field.DateTime', {
+    extend:'Ext.form.FieldContainer',
+    mixins:{
+        field:'Ext.form.field.Field'
+    },
+    alias: 'widget.xdateampmtime',
+
+    //configurables
+
+    combineErrors: true,
+    msgTarget: 'under',
+    layout: 'hbox',
+    readOnly: false,
+
+    dateFormat: 'Y-m-d',
+    dateSubmitFormat: 'Y-m-d',
+    timeFormat: 'H:i:s',
+    timeSubmitFormat: 'H:i:s',
+    dateConfig:{},
+    timeConfig:{},
+
+
+    // properties
+
+    dateValue: null, // Holds the actual date
+
+    dateField: null,
+
+    timeField: null,
+
+    initComponent: function(){
+        var me = this
+            ,i = 0
+            ,key
+            ,tab;
+
+        me.items = me.items || [];
+
+        me.dateField = Ext.create('Ext.form.field.Date', Ext.apply({
+            format:me.dateFormat,
+            flex:1,
+            isFormField:false, //exclude from field query's
+            submitValue:false,
+            submitFormat: me.dateSubmitFormat,
+            readOnly: me.readOnly
+        }, me.dateConfig));
+        me.items.push(me.dateField);
+        
+
+        //me.timeField = Ext.create('Ext.form.field.Text', {width: 20});
+        me.timeField = Ext.create('app.view.form.field.TimeField');
+        me.items.push(me.timeField);
+
+        for (; i < me.items.length; i++) {
+            me.items[i].on('focus', Ext.bind(me.onItemFocus, me));
+            me.items[i].on('blur', Ext.bind(me.onItemBlur, me));
+            me.items[i].on('specialkey', function(field, event){
+                key = event.getKey();
+                tab = key == event.TAB;
+
+                if (tab && me.focussedItem == me.dateField) {
+                    event.stopEvent();
+                    me.timeField.focus();
+                    return;
+                }
+
+                me.fireEvent('specialkey', field, event);
+            });
+        }
+
+        me.callParent();
+
+        // this dummy is necessary because Ext.Editor will not check whether an inputEl is present or not
+        this.inputEl = {
+            dom: document.createElement('div'),
+            swallowEvent:function(){}
+        };
+
+        me.initField();
+    },
+
+    focus:function(){
+        this.callParent(arguments);
+        this.dateField.focus();
+    },
+
+    onItemFocus:function(item){
+        if (this.blurTask){
+            this.blurTask.cancel();
+        }
+        this.focussedItem = item;
+    },
+
+    onItemBlur:function(item, e){
+        var me = this;
+        if (item != me.focussedItem){ return; }
+        // 100ms to focus a new item that belongs to us, otherwise we will assume the user left the field
+        me.blurTask = new Ext.util.DelayedTask(function(){
+            me.fireEvent('blur', me, e);
+        });
+        me.blurTask.delay(100);
+    },
+
+    getValue: function(){
+        var value = null
+            ,date = this.dateField.getSubmitValue()
+            ,time = this.timeField.getSubmitValue()
+            ,format;
+        if (date){
+            if (time){
+                format = this.getFormat();
+                value = Ext.Date.parse(date + ' ' + time, format);
+            } else {
+                value = this.dateField.getValue();
+            }
+        }
+        return value;
+    },
+
+    getSubmitValue: function(){
+//        var value = this.getValue();
+//        return value ? Ext.Date.format(value, this.dateTimeFormat) : null;
+
+        var me = this
+            ,format = me.getFormat()
+            ,value = me.getValue();
+
+        return value ? Ext.Date.format(value, format) : null;
+    },
+
+    setValue: function(value){
+        if (Ext.isString(value)){
+            value = Ext.Date.parse(value, this.getFormat()); //this.dateTimeFormat
+            this.dateField.setValue(value);
+            this.timeField.setValue(value);
+        }
+    },
+
+    getFormat: function(){
+        value = (this.dateField.submitFormat || this.dateField.format) + " " + (this.timeField.submitFormat || this.timeField.format);
+        return value;
+    },
+
+    // Bug? A field-mixin submits the data from getValue, not getSubmitValue
+    getSubmitData: function(){
+        var me = this
+            ,data = null;
+
+        if (!me.disabled && me.submitValue && !me.isFileUpload()) {
+            data = {};
+            data[me.getName()] = '' + me.getSubmitValue();
+        }
+        return data;
+    }
+});
+
+
+
 Ext.define('Ext.ux.form.field.ColorCombo', {
     extend:'Ext.form.FieldContainer',
     mixins:{
diff --git a/app/components/bike_logs.rb b/app/components/bike_logs.rb
index 4d78aab..a616fe0 100644
--- a/app/components/bike_logs.rb
+++ b/app/components/bike_logs.rb
@@ -45,7 +45,7 @@ class BikeLogs < Netzke::Basepack::Grid
 
   def default_fields_for_forms
     [
-      { :name => :start_date},
+      { :name => :start_date, :xtype => 'xdateampmtime'},
       { :name => :description},
       #had to hack acts_as_loggable/log.rb to get this to work
       { :name => :bike_action__action, :field_label => 'Action', :min_chars => 1 }

From d983647e29137eca1ca82ee0e9e943047b2c6813 Mon Sep 17 00:00:00 2001
From: Jason Denney <jdenney@lgscout.com>
Date: Sun, 3 Nov 2013 07:12:56 -0500
Subject: [PATCH 2/7] Almost done, need to change minutes to textfield

---
 .../javascripts/custom_netzke_helpers.js      | 82 +++++++++++++++++--
 1 file changed, 74 insertions(+), 8 deletions(-)

diff --git a/app/assets/javascripts/custom_netzke_helpers.js b/app/assets/javascripts/custom_netzke_helpers.js
index e4655e1..0681c2a 100644
--- a/app/assets/javascripts/custom_netzke_helpers.js
+++ b/app/assets/javascripts/custom_netzke_helpers.js
@@ -163,7 +163,9 @@ Ext.define('Ext.ux.form.field.DateTime', {
 
     dateField: null,
 
-    timeField: null,
+    hourField: null,
+    minuteField: null,
+    ampmField: null,
 
     initComponent: function(){
         var me = this
@@ -182,11 +184,60 @@ Ext.define('Ext.ux.form.field.DateTime', {
             readOnly: me.readOnly
         }, me.dateConfig));
         me.items.push(me.dateField);
-        
 
-        //me.timeField = Ext.create('Ext.form.field.Text', {width: 20});
-        me.timeField = Ext.create('app.view.form.field.TimeField');
-        me.items.push(me.timeField);
+        me.hourField = Ext.create('Ext.form.field.Number', {
+                maxWidth: 20,
+                allowBlank: false,
+                allowOnlyWhitespace: false,
+                blankText: "Hour cannot be blank.",
+                allowDecimals: false,
+                maxValue: 12,
+                minValue: 1,
+                maxLength: 2,
+                enforceMaxLength: 2,
+                hideTrigger: true,
+                submitValue:false,
+                flex:1,
+                fieldStyle:     "text-align:right;",
+                isFormField:false, //exclude from field query's
+            });
+        me.items.push(me.hourField);
+
+        me.colon = Ext.create('Ext.draw.Text', {
+                text: ':',
+                padding: '3 3 0 3'
+          });
+        me.items.push(me.colon);
+
+        me.minuteField = Ext.create('Ext.form.field.Number', {
+                validateOnBlur: false,
+                maxWidth: 30,
+                allowBlank: false,
+                allowOnlyWhitespace: false,
+                blankText: "Minutes cannot be blank.",
+                allowDecimals: false,
+                maxValue: 59,
+                minValue: 0,
+                maxLength: 2,
+                enforceMaxLength: 2,
+                hideTrigger: true,
+                submitValue:false,
+                flex:1,
+                isFormField:false, //exclude from field query's
+            });
+        me.items.push(me.minuteField);
+
+
+        me.ampmField = Ext.create('Ext.form.ComboBox', {
+              maxWidth: 45,
+              value: 'PM',
+              store: ['AM', 'PM'],
+              forceSelection: true,
+              flex:1,
+              editable: false
+          });
+
+        me.items.push(me.ampmField);
 
         for (; i < me.items.length; i++) {
             me.items[i].on('focus', Ext.bind(me.onItemFocus, me));
@@ -241,8 +292,15 @@ Ext.define('Ext.ux.form.field.DateTime', {
     getValue: function(){
         var value = null
             ,date = this.dateField.getSubmitValue()
-            ,time = this.timeField.getSubmitValue()
+            ,time = null
             ,format;
+
+        hour = this.hourField.getValue();
+        minute = this.minuteField.getValue();
+        ampm = this.ampmField.getValue();
+        time = Ext.Date.parse(hour + " " + minute + " " + ampm, 'g i A');
+        time = Ext.Date.format(time, this.timeSubmitFormat);
+
         if (date){
             if (time){
                 format = this.getFormat();
@@ -267,14 +325,22 @@ Ext.define('Ext.ux.form.field.DateTime', {
 
     setValue: function(value){
         if (Ext.isString(value)){
+            dt = new Date(value);
             value = Ext.Date.parse(value, this.getFormat()); //this.dateTimeFormat
             this.dateField.setValue(value);
-            this.timeField.setValue(value);
+
+            hour = Ext.Date.format(dt, 'g');
+            minute = Ext.Date.format(dt, 'i');
+            ampm = Ext.Date.format(dt, 'A');
+
+            this.hourField.setValue(hour);
+            this.minuteField.setRawValue(minute);
+            this.ampmField.setValue(ampm);
         }
     },
 
     getFormat: function(){
-        value = (this.dateField.submitFormat || this.dateField.format) + " " + (this.timeField.submitFormat || this.timeField.format);
+        value = (this.dateField.submitFormat || this.dateField.format) + " " + (this.timeSubmitFormat || this.timeFormat);
         return value;
     },
 

From 25808eb27a524be485deab4a4961e4a10cc15aa5 Mon Sep 17 00:00:00 2001
From: Jason Denney <jdenney@lgscout.com>
Date: Sun, 3 Nov 2013 07:22:57 -0500
Subject: [PATCH 3/7] Boom! Meridian time component

---
 app/assets/javascripts/custom_netzke_helpers.js | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/custom_netzke_helpers.js b/app/assets/javascripts/custom_netzke_helpers.js
index 0681c2a..c1ba9bf 100644
--- a/app/assets/javascripts/custom_netzke_helpers.js
+++ b/app/assets/javascripts/custom_netzke_helpers.js
@@ -209,18 +209,14 @@ Ext.define('Ext.ux.form.field.DateTime', {
           });
         me.items.push(me.colon);
 
-        me.minuteField = Ext.create('Ext.form.field.Number', {
-                validateOnBlur: false,
+        me.minuteField = Ext.create('Ext.form.field.Text', {
                 maxWidth: 30,
                 allowBlank: false,
                 allowOnlyWhitespace: false,
                 blankText: "Minutes cannot be blank.",
-                allowDecimals: false,
-                maxValue: 59,
-                minValue: 0,
+                regex: /[012345]\d/,
                 maxLength: 2,
                 enforceMaxLength: 2,
-                hideTrigger: true,
                 submitValue:false,
                 flex:1,
                 isFormField:false, //exclude from field query's

From de338276c0ea8d7463fa9626912d562df36563b0 Mon Sep 17 00:00:00 2001
From: Jason Denney <jdenney@lgscout.com>
Date: Sun, 3 Nov 2013 08:40:37 -0500
Subject: [PATCH 4/7] Couldn't edit in columns, assign date correctly

---
 app/assets/javascripts/custom_netzke_helpers.js | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/custom_netzke_helpers.js b/app/assets/javascripts/custom_netzke_helpers.js
index c1ba9bf..cd5bd34 100644
--- a/app/assets/javascripts/custom_netzke_helpers.js
+++ b/app/assets/javascripts/custom_netzke_helpers.js
@@ -140,7 +140,7 @@ Ext.define('Ext.ux.form.field.DateTime', {
     mixins:{
         field:'Ext.form.field.Field'
     },
-    alias: 'widget.xdateampmtime',
+    alias: 'widget.xdatetime',
 
     //configurables
 
@@ -320,9 +320,15 @@ Ext.define('Ext.ux.form.field.DateTime', {
     },
 
     setValue: function(value){
-        if (Ext.isString(value)){
-            dt = new Date(value);
-            value = Ext.Date.parse(value, this.getFormat()); //this.dateTimeFormat
+        console.log("setValue: " + value);
+        if (Ext.isString(value) || Ext.isDate(value)){
+
+            if( Ext.isDate(value)){
+              dt = value;
+            }else{
+              dt = new Date(value);
+              value = Ext.Date.parse(value, this.getFormat()); //this.dateTimeFormat
+            }
             this.dateField.setValue(value);
 
             hour = Ext.Date.format(dt, 'g');

From 16cda6aa866d07473c8b2d891c00be00549e0626 Mon Sep 17 00:00:00 2001
From: Jason Denney <jdenney@lgscout.com>
Date: Sun, 3 Nov 2013 08:42:30 -0500
Subject: [PATCH 5/7] Remove unused code, add comment

---
 .../javascripts/custom_netzke_helpers.js      | 133 +-----------------
 1 file changed, 1 insertion(+), 132 deletions(-)

diff --git a/app/assets/javascripts/custom_netzke_helpers.js b/app/assets/javascripts/custom_netzke_helpers.js
index cd5bd34..22c27c1 100644
--- a/app/assets/javascripts/custom_netzke_helpers.js
+++ b/app/assets/javascripts/custom_netzke_helpers.js
@@ -3,138 +3,7 @@ Ext.Ajax.on('requestexception', function(conn, response, options) {
   if (response.status === 401) { window.location = '/users/sign_in'; }
 }, this);
 
-
-Ext.define('app.view.form.field.TimeField', {
-    extend:'Ext.form.FieldContainer',
-    mixins:{
-        field:'Ext.form.field.Field'
-    },
-    alias: 'widget.xampmtime',
-
-    layout: 'hbox',
-    format: 'H:i:s',
-    submitFormat: 'H:i:s',
-
-    hourField: null,
-    minuteField: null,
-    ampmField: null,
-
-    /* custom configs & callbacks */
-
-    getValue: function(v){
-        hour = this.hourField.getValue();
-        minute = this.minuteField.getValue();
-        ampm = this.ampmField.getValue();
-        value = Ext.Date.parse(hour + " " + minute + " " + ampm, 'g i A');
-        value = Ext.Date.format(value, this.submitFormat);
-        return value;
-    },
-
-    getSubmitValue: function(value){
-        /* override function getValue() */
-        return this.getValue(value);
-    },
-
-    setValue: function(value){
-      if (Ext.isString(value) || Ext.isDate(value) ){
-        var dt = null;
-
-        if( Ext.isString ) {
-          dt = new Date(value);
-        }else{
-          dt = value;
-        }
-
-        hour = Ext.Date.format(dt, 'g');
-        minute = Ext.Date.format(dt, 'i');
-        ampm = Ext.Date.format(dt, 'A');
-
-        this.hourField.setValue(hour);
-        this.minuteField.setRawValue(minute);
-        this.ampmField.setValue(ampm);
-      }
-
-        /* override function setValue() */
-    },
-
-    initComponent: function(){
-        /* further code on event initComponent */
-        var me = this
-        me.items = me.items || [];
-
-        me.hourField = Ext.create('Ext.form.field.Number', {
-     //           maxWidth: 20,
-                allowBlank: false,
-                allowOnlyWhitespace: false,
-                blankText: "Hour cannot be blank.",
-                allowDecimals: false,
-                maxValue: 12,
-                minValue: 1,
-                maxLength: 2,
-                enforceMaxLength: 2,
-                hideTrigger: true,
-                submitValue:false,
-                flex:1,
-                //fieldStyle:     "text-align:right;",
-                isFormField:false, //exclude from field query's
-            });
-        me.items.push(me.hourField);
-
-        me.colon = Ext.create('Ext.draw.Text', {
-                text: ':',
-                padding: '3 3 0 3'
-          });
-        me.items.push(me.colon);
-
-        me.minuteField = Ext.create('Ext.form.field.Number', {
-    //            maxWidth: 20,
-                allowBlank: false,
-                allowOnlyWhitespace: false,
-                blankText: "Minutes cannot be blank.",
-                allowDecimals: false,
-                maxValue: 59,
-                minValue: 0,
-                maxLength: 2,
-                enforceMaxLength: 2,
-                hideTrigger: true,
-                submitValue:false,
-                flex:1,
-                isFormField:false, //exclude from field query's
-            });
-        me.items.push(me.minuteField);
-
-
-        me.ampmField = Ext.create('Ext.form.ComboBox', {
-              //maxWidth: 25,
-              value: 'PM',
-              store: ['AM', 'PM'],
-              forceSelection: true,
-              flex:1,
-              editable: false
-          });
-
-        me.items.push(me.ampmField);
-
-        me.callParent();
-
-        // this dummy is necessary because Ext.Editor will not check whether an inputEl is present or not
-        this.inputEl = {
-            dom: document.createElement('div'),
-            swallowEvent:function(){}
-        };
-
-        me.initField();
-    },
-
-    focus:function(){
-        this.callParent(arguments);
-        this.hourField.focus();
-    },
-});
-
-
-
-
+//Override default netzke time entry field
 Ext.define('Ext.ux.form.field.DateTime', {
     extend:'Ext.form.FieldContainer',
     mixins:{

From 75f4a7980b8406b8918c03ad27bb25780deb74ed Mon Sep 17 00:00:00 2001
From: Jason Denney <jdenney@lgscout.com>
Date: Sun, 3 Nov 2013 08:45:10 -0500
Subject: [PATCH 6/7] Need end date to edit start date, fix type

---
 app/components/bike_logs.rb | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/bike_logs.rb b/app/components/bike_logs.rb
index a616fe0..15426c7 100644
--- a/app/components/bike_logs.rb
+++ b/app/components/bike_logs.rb
@@ -19,7 +19,7 @@ class BikeLogs < Netzke::Basepack::Grid
 
     c.columns = [
       { :name => :start_date, :format => "g:ia - D, M j - Y", :width => 165, :default_value => Time.now.to_formatted_s(:db)  },
-      { :name => :end_date, :hidden => true, :default_value => Time.now.to_formatted_s(:db) },
+      { :name => :end_date, :format => "g:ia - D, M j - Y", :width => 165, :default_value => Time.now.to_formatted_s(:db)  },
       :description,
       { :name => :bike_action__action, :text => 'Action', :default_value => ::ActsAsLoggable::BikeAction.first.id},
       { :name => :logged_by, :getter => lambda{ |rec|
@@ -45,7 +45,7 @@ class BikeLogs < Netzke::Basepack::Grid
 
   def default_fields_for_forms
     [
-      { :name => :start_date, :xtype => 'xdateampmtime'},
+      { :name => :start_date},
       { :name => :description},
       #had to hack acts_as_loggable/log.rb to get this to work
       { :name => :bike_action__action, :field_label => 'Action', :min_chars => 1 }

From 84ed8503d175ffb57c982b54942e35e20a34654e Mon Sep 17 00:00:00 2001
From: Jason Denney <jdenney@lgscout.com>
Date: Sun, 3 Nov 2013 08:46:30 -0500
Subject: [PATCH 7/7] Remove console.log

---
 app/assets/javascripts/custom_netzke_helpers.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/assets/javascripts/custom_netzke_helpers.js b/app/assets/javascripts/custom_netzke_helpers.js
index 22c27c1..bdb27c0 100644
--- a/app/assets/javascripts/custom_netzke_helpers.js
+++ b/app/assets/javascripts/custom_netzke_helpers.js
@@ -189,7 +189,6 @@ Ext.define('Ext.ux.form.field.DateTime', {
     },
 
     setValue: function(value){
-        console.log("setValue: " + value);
         if (Ext.isString(value) || Ext.isDate(value)){
 
             if( Ext.isDate(value)){