Finished enhancing the user log enter time form

app/components/user_logs_add_item.rb

@@ -10,9 +10,9 @@ class UserLogsAddItem < Netzke::Basepack::Form
     bike_id = current_user.bike.nil?  ? nil : current_user.bike.id
     c.items = [
       { :no_binding => true, :xtype => 'displayfield', :fieldLabel => "Log for:", :value => "#{current_user.to_s}"},
-      { :name => :start_date},
+      { :id => :user_logs_add_form_start, :name => :start_date},
-      { :id => :user_logs_add_form_hours, :no_binding => true, :name => :hours, :xtype => 'field', :fieldLabel => "Hours:" },
+      { :id => :user_logs_add_form_hours, :no_binding => true, :name => :hours, :xtype => 'field', :fieldLabel => "Hours:", :value => 0 },
-      { :id => :user_logs_add_form_end_date, :name => :end_date, :hidden => true },
+      { :id => :user_logs_add_form_end, :name => :end_date, :hidden => true },
       { :name => :description},
       #had to hack acts_as_loggable/log.rb to get this to work
       { :name => :user_action__action, :field_label => 'Action'},

app/components/user_logs_add_item/javascripts/init_component.js

@@ -5,15 +5,39 @@
 
     var panel = this;
     var theForm = this.getForm();
+    var startInput = Ext.getCmp('user_logs_add_form_start');
+    var hoursInput = Ext.getCmp('user_logs_add_form_hours');
+    var endInput = Ext.getCmp('user_logs_add_form_end');
+    var startdate = startInput.items.items[0];
+    var starttime = startInput.items.items[1];
+    var enddate = endInput.items.items[0];
+    var endtime = endInput.items.items[1];
 
-    console.log(theForm);
+    startdate.on('change', function(e){
+      var hours = hoursInput.getValue();
+      var startTime = starttime.getValue();
+      var calculatedEndTime = Ext.Date.add(new Date(startTime), Ext.Date.HOUR, parseInt(hours));
 
-    var hoursInput = Ext.getCmp('user_logs_add_form_hours');
+      endtime.setValue(calculatedEndTime);
+      enddate.setValue(calculatedEndTime);
+    });
 
-    console.log(hoursInput);
+    starttime.on('change', function(e){
+      var hours = hoursInput.getValue();
+      var startTime = starttime.getValue();
+      var calculatedEndTime = Ext.Date.add(new Date(startTime), Ext.Date.HOUR, parseInt(hours));
+
+      endtime.setValue(calculatedEndTime);
+      enddate.setValue(calculatedEndTime);
+    });
 
     hoursInput.on('change', function(e){
-      console.log('I am changing');
+      var hours = hoursInput.getValue();
+      var startTime = starttime.getValue();
+      var calculatedEndTime = Ext.Date.add(new Date(startTime), Ext.Date.HOUR, parseInt(hours));
+
+      endtime.setValue(calculatedEndTime);
+      enddate.setValue(calculatedEndTime);
     });
 
   }