IntervalUI.js 8.12 KB
/**
 * Project   : AMDA-NG
 * Name      : IntervalUI.js
 * @class 	 amdaUI.IntervalUI
 * @extends  Ext.container.Container
 * @brief    common component to select interval
 * @author 	 Benjamin
 * @version  $Id: IntervalUI.js 2077 2014-02-11 11:33:36Z elena $
 * @todo Validations 
 *****************************************************************************
 * FT Id     :   Date   : Name - Description
 ******************************************************************************
 */


Ext.define('amdaUI.IntervalUI', {
    extend: 'Ext.container.Container',
    
    alias: 'widget.intervalSelector',

    activeField : null,
    
	constructor: function(config) {
		this.init(config);
		this.callParent(arguments);
	},
    
	setInterval : function(startDate,stopDate)
	{
		// get the search form
        var form = this.findParentByType('form').getForm();
        // get start field
        var startField = form.findField('startDate');
        // get stop field
        var stopField = form.findField('stopDate');
        
        if (startField != null)
        	startField.setValue(startDate);
        
        if (stopField != null)
        	stopField.setValue(stopDate);
        
        this.updateDuration();
	},
	
	getStartTime : function()
	{
		// get the search form
        var form = this.findParentByType('form').getForm();
        // get start field
        var startField = form.findField('startDate');
        
        return startField.getValue();
	},
	
	getStopTime : function()
	{
		// get the search form
        var form = this.findParentByType('form').getForm();
        // get stop field
        var stopField = form.findField('stopDate');
        
        return stopField.getValue();		
	},
	
    updateDuration: function() {

        // get the search form
        var form = this.findParentByType('form').getForm();
        // get start value
        var start = form.findField('startDate').getValue();
        // get stop value
        var stop = form.findField('stopDate').getValue();
        // if duration computable
        if (stop != null && start != null) {

            // compute offset
            var zoneOffset = stop.getTimezoneOffset() - start.getTimezoneOffset();
            // compute duration
            var diff = stop - start - zoneOffset*60000;
            
            var durationDays = Math.floor(diff/86400000);
            // set all duration values
            form.findField('durationDay').setValue(Ext.String.leftPad(durationDays,4,'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'));
           
            if (durationDays > 9999) {                   
                form.findField('durationDay').markInvalid('Maximum interval is 9999 days!');
            }
            
        }

    },

    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
    },

    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);

    },
	
	onChangeStartField : function(field, newValue, oldValue)         
	{           
            if (field.isValid())  {
            // get the search form
                var form = this.findParentByType('form').getForm();
                // 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')  {
                    // launch the update of duration fields
                    this.updateDuration();
                }
        }	
	},
	
	onChangeStopField: function(field, newValue, oldValue){
        if (field.isValid() && oldValue != null  && this.activeField == 'stop')  {
            // launch the update of duration fields                              
            this.updateDuration();  
        }       
    },
	
	getDateField : function(fieldName,fieldText,fieldId,onChangeField)
	{
		return {
			layout: {type: 'hbox', align: 'middle'},
            items: [
                { 
                    xtype: 'datefield', name: fieldName, format: 'Y/m/d H:i:s',
                    enforceMaxLength : true,
                    maxLength: 19,
                    fieldLabel: fieldText, labelAlign: 'right', labelWidth: 60,
                    listeners: {
                        change: onChangeField,
                        focus: function(field) {
                            this.activeField = fieldId;
                        },
                        scope : this
                    } 
                } 
            ]       
        };
	},
	
	getStartField : function()
	{
		return this.getDateField('startDate','Start Time','start',this.onChangeStartField);
	},
	
	getStopField : function()
	{
		return this.getDateField('stopDate','Stop Time','stop',this.onChangeStopField);
	},
	
	getDurationField : function()
	{
            return {
            layout: {type: 'hbox', align: 'middle'},
            height: 45,
            defaults: { 
                xtype: 'textfield', labelAlign: 'top', width: 30, 
                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
                            this.updateStop();  
                        }       
                    },
                    focus: function(field) {
                        this.activeField = 'duration';                  
                    },  
                    scope : this
                } 
            },                           
            items:[
                { xtype: 'displayfield', labelWidth: 60, labelAlign: 'right', width: 60, fieldLabel: '<br>Duration'},
                { xtype: 'component', width: 5},
                { name: 'durationDay', fieldLabel: 'Days', width: 45, maxLength: 4},
                { xtype: 'component', width: 5},
                { name: 'durationHour', fieldLabel: 'Hrs'},
                { xtype: 'component', width: 5},
                { name: 'durationMin', fieldLabel: 'Mins'},  
                { xtype: 'component', width: 5},
                { name: 'durationSec', fieldLabel: 'Secs'}
            ]
        };
	},
	
    init : function(config) {
        
        var me = this;
        
        var myConf = {
                    border: false,
                    plain: true, 
                    flex: 1,
                    layout: 'anchor',
                    defaults: { height : 30, xtype : 'container'},

                    items: [
                            me.getStartField(),
                            me.getStopField(),
                            me.getDurationField()
                        ]
        };

        Ext.apply (this , Ext.apply (arguments, myConf));  
	}
});