fix and improve intervalUI

Nathanael Jourdane
1 parent 26c3b7b1
Showing 2 changed files with 47 additions and 43 deletions Show diff stats
js/app/views/EpnTapUI.js
js/app/views/IntervalUI.js
@@ -525,8 +525,7 @@ Ext.define(&#39;amdaUI.EpnTapUI&#39;, {
 	createTimeSelector: function() {
 		return {
 			xtype: 'intervalSelector',
-			id: 'epnTapTimeSelector',
-			durationLimit: 99999
+			id: 'epnTapTimeSelector'
 		};
 	},
  
@@ -113,7 +113,6 @@ Ext.define(&#39;amdaUI.IntervalUI&#39;, {
         var stop = this.getStopTime();
         // if duration computable
         if (stop != null && start != null) {
-
             // compute offset
             var zoneOffset = stop.getTimezoneOffset() - start.getTimezoneOffset();
             // compute duration
@@ -121,43 +120,43 @@ Ext.define(&#39;amdaUI.IntervalUI&#39;, {
  
             var durationDays = Math.floor(diff/86400000);
             // set all duration values
-            form.findField('durationDay').setValue(Ext.String.leftPad(durationDays, ('' + this.durationLimit).length, '0'));
-            form.findField('durationHour').setValue(Ext.String.leftPad(Math.floor(diff/3600000 % 24),2,'0'));
-            form.findField('durationMin').setValue(Ext.String.leftPad(Math.floor(diff/60000 % 60),2,'0'));
-            form.findField('durationSec').setValue(Ext.String.leftPad(Math.floor(diff/1000 % 60),2,'0'));
+            form.findField('durationDay').setValue(durationDays);
+            form.findField('durationHour').setValue(Math.floor(diff/3600000 % 24));
+            form.findField('durationMin').setValue(Math.floor(diff/60000 % 60));
+            form.findField('durationSec').setValue(Math.floor(diff/1000 % 60));
  
             if (durationDays > this.durationLimit) {
                 form.findField('durationDay').markInvalid('Maximum interval is ' + this.durationLimit + ' days!');
             }
+        } else {
+            form.findField('durationDay').setValue('');
+            form.findField('durationHour').setValue('');
+            form.findField('durationMin').setValue('');
+            form.findField('durationSec').setValue('');
         }
-
     },
  
     isValidDuration: function(){
-        // get the time form
         var form = this.findParentByType('form').getForm();
-        // get global validation status for duration fields
         return (
-                form.findField('durationDay').isValid() && form.findField('durationHour').isValid()
-                && form.findField('durationMin').isValid() && form.findField('durationSec').isValid()
-        );// return true if all duration fields are Valid false otherwise
+                form.findField('durationDay').isValid() &&
+                form.findField('durationHour').isValid() &&
+                form.findField('durationMin').isValid() &&
+                form.findField('durationSec').isValid()
+        );
     },
  
     updateStop: function() {
-        // get the time form
         var form = this.findParentByType('form').getForm();
-        // get duration value
-        var duration =  parseInt(form.findField('durationDay').getValue(),10)*86400 +
-        parseInt(form.findField('durationHour').getValue(),10)*3600 +
-        parseInt(form.findField('durationMin').getValue(),10)*60  +
-        parseInt(form.findField('durationSec').getValue(),10);
-        // get start value
         var start = form.findField('startDate').getValue();
-        // compute stop value
-        var stop = Ext.Date.add(start,Ext.Date.SECOND,duration);
-        // set stop value into form
-        form.findField('stopDate').setValue(stop);
  
+        var d = form.findField('durationDay').getValue();
+        var h = form.findField('durationHour').getValue();
+        var m = form.findField('durationMin').getValue();
+        var s = form.findField('durationSec').getValue();
+        var duration = (d?d:0)*86400 + (h?h:0)*3600 + (m?m:0)*60 + (s?s:0)
+
+        form.findField('stopDate').setValue(Ext.Date.add(start, Ext.Date.SECOND, duration));
     },
  
 	onChangeStartField : function(field, newValue, oldValue)
@@ -168,7 +167,7 @@ Ext.define(&#39;amdaUI.IntervalUI&#39;, {
                 // set to the stop datefield the newValue as minValue
                 form.findField('stopDate').setMinValue(newValue);
                 // if it's a user modification
-                if (oldValue != null && this.activeField == 'start')  {
+                if (this.activeField == 'start')  {
                     // launch the update of duration fields
                     this.updateDuration();
                 }
@@ -176,7 +175,7 @@ Ext.define(&#39;amdaUI.IntervalUI&#39;, {
 	},
  
 	onChangeStopField: function(field, newValue, oldValue){
-        if (field.isValid() && oldValue != null  && this.activeField == 'stop')  {
+        if (field.isValid() && this.activeField == 'stop') {
             // launch the update of duration fields
             this.updateDuration();
         }
@@ -191,6 +190,7 @@ Ext.define(&#39;amdaUI.IntervalUI&#39;, {
 					xtype: 'datefield',
 					name: fieldName,
 					emptyText: 'YYYY/MM/DD hh:mm:ss',
+					tip: 'Date formated as YYYY/MM/DD hh:mm:ss',
 					format: 'Y/m/d H:i:s',
 					enforceMaxLength: true,
 					maxLength: 19,
@@ -202,6 +202,9 @@ Ext.define(&#39;amdaUI.IntervalUI&#39;, {
                         focus: function(field) {
                             this.activeField = fieldId;
                         },
+                        render: function(c) {
+                            Ext.create('Ext.tip.ToolTip', { target: c.getEl(), html: c.tip });
+                        },
                         scope : this
                     }
                 }
@@ -225,17 +228,22 @@ Ext.define(&#39;amdaUI.IntervalUI&#39;, {
             layout: {type: 'hbox', align: 'middle'},
             margin: 0,
             defaults: {
-                xtype: 'textfield',
+                xtype: 'numberfield',
+                minValue: 0,
+                maxLength: 2,
+                enforceMaxLength: true,
+                decimalPrecision: 0,
+                allowExponential: false,
+                autoStripChars: true,
+                hideTrigger: true,
                 labelAlign: 'left',
-                width: 35,
+                width: 32,
                 margin: '0 5 0 0',
-                allowBlank: false, maxLength:2, enforceMaxLength : true,
-                hideTrigger: true,
-                regex: /^[0-9]([0-9])*$/i,
                 listeners: {
-                    change: function(field, newValue, oldValue){
-                        if (this.isValidDuration() && oldValue != null && this.activeField == 'duration')  {
-                            // launch the update of stop datefield
+                    change: function(field, newValue, oldValue) {
+                        var form = this.findParentByType('form').getForm();
+                        var start = form.findField('startDate').getValue();
+                        if (this.isValidDuration() && start!=null && this.activeField == 'duration')  {
                             this.updateStop();
                         }
                     },
@@ -243,25 +251,22 @@ Ext.define(&#39;amdaUI.IntervalUI&#39;, {
                         this.activeField = 'duration';
                     },
                     render: function(c) {
-                        Ext.create('Ext.tip.ToolTip', {
-                            target: c.getEl(),
-                            html: c.tip
-                        });
+                        Ext.create('Ext.tip.ToolTip', { target: c.getEl(), html: c.tip });
                     },
                     scope : this
                 }
             },
             items:[
-                { name: 'durationDay', tip: 'Days', fieldLabel: 'Duration', labelWidth: 60, emptyText: 'Days', width: 100, maxLength: ('' + this.durationLimit).length},
-                { name: 'durationHour', tip: 'Hours', emptyText: 'Hrs'},
-                { name: 'durationMin', tip: 'Minutes', emptyText: 'Mins'},
-                { name: 'durationSec', tip: 'Seconds', emptyText: 'Secs'}
+                { name: 'durationDay',  emptyText: 'Days', tip: 'Days',    maxValue: 36500, maxLength: 5, fieldLabel: 'Duration', labelWidth: 60, width: 110, },
+                { name: 'durationHour', emptyText: 'Hrs',  tip: 'Hours',   maxValue: 23},
+                { name: 'durationMin',  emptyText: 'Mins', tip: 'Minutes', maxValue: 59},
+                { name: 'durationSec',  emptyText: 'Secs', tip: 'Seconds', maxValue: 59}
             ]
         };
 	},
  
     init : function(config) {
-		this.durationLimit = config.durationLimit == null ? 9999 : config.durationLimit; // Set duration limit to 9999 by default
+        this.durationLimit = config.durationLimit == null ? 36500 : config.durationLimit; // Set duration limit to 100 years by default
  
         var me = this;