source: ether_2012/web/visualization/visu_plateform-script.jsp @ 319

<script type="text/javascript">
var InterfaceVisualization = Class.create({
        
    initialize: function( jsonPlateforms )
    {
        // Values
        this.parent  = $("txt");
        this.superParent = $("pageContent"); // need to resize in function of containerParameters
        this.generalContainerPlateforms = $("generalContainerPlateforms");
        this.generalContainerParameters = $("generalContainerParameters");
        this.generalContainerCalendar = $("generalContainerCalendar");
        this.jsonPlateforms = jsonPlateforms || null;
                this.selectedPlateform = false;
                this.selectedParameter = false;
                this.beginDate = false;
                this.endDate = false;
                this.notice = Dom.getContainer("notice");

                /** *********** CONTAINERS *********** **/
        // Create container for plateforms
        this.containerPlateforms = Dom.getContainer("containerPlateforms");
                this.containerParameters = Dom.getContainer("containerParameters");
                this.containerButtons = Dom.getContainer("containerButtons");
                
                /** *********** LOADING *********** **/
        // Create loading object for plateforms
        var param = new Object();
        param.id = "loadingForPlateforms";
        param.parent = this.containerPlateforms;
        this.loadingPlateforms = new Loading(param);
        this.loadingPlateforms.display();

        // Create loading object for parameters
        var param = new Object();
        param.id = "loadingForParameters";
        param.parent = this.containerParameters;
        this.loadingParameters = new Loading(param);
        this.loadingParameters.display();        

                /** *********** BUTTONS *********** **/
        this.visualizeButton = new Button({value:interfaceTexts["data.visualization.button.visualize"], parent:this.containerButtons, id:"button_visualize", onClick:this.onClickVisualize.bind(this)});
        this.visualizeButton.disable();
        this.downloadButton = new Button({value:interfaceTexts["data.visualization.button.download"], parent:this.containerButtons, id:"button_download", onClick:this.onClickDownload.bind(this)});
        this.downloadButton.disable();
        
        this.createCalendar();
        this.displayPlateforms();
    },
    
    // REQUESTS ********************************************************
        requestParametersByPlateform: function()
    {
        if(this.selectedPlateform)
                        new Ajax.Request("visualization?methodName=searchParametersByPlateform&id=" + this.selectedPlateform.getId(),
                {
                    onSuccess:this.handleParametersBySelectedPlateform.bind(this)
                });
    },

        requestValuesByPlateformByParameterByPeriod: function()
    {
        if(this.selectedPlateform)
                        new Ajax.Request("visualization?methodName=searchDatasByPlateformByParameterByPeriod" +
                                        "&plateformId=" + this.selectedPlateform.getId() + 
                                        "&parameterId=" + this.selectedParameter.getId() +
                                        "&dateBegin=" + this.beginDate +
                                        "&dateEnd=" + this.endDate,
                {
                    onSuccess:this.handleValuesByPlateformByParameterByPeriod.bind(this)
                });
    },

    // HANDLES ********************************************************
    handleParametersBySelectedPlateform: function( result )
    {
        this.jsonParameters = result.responseText.evalJSON().parameters;
        this.displayParameters();
    },
    
    handleValuesByPlateformByParameterByPeriod: function( result )
    {
//              this.notice.style.visibility = "hidden";        

        this.jsonValues = result.responseText.evalJSON().values;
        alert("values : "+this.jsonValues.size());
    },

    // DISPLAYS ********************************************************
    createCalendar: function()
    {
            // Embedded Calendar
                this.calendar = Calendar.setup(
        {
                dateField: 'embeddedDateField',
            endDateField: 'embeddedEndDateField',
            parentElement: 'embeddedCalendar',
            clickToDateField: true,
            selectHandler: this.onClickCalendar.bind(this)
                })
    },
    
    displayPlateforms: function()
    {
        this.plateforms = new ListPlatforms(this.jsonPlateforms, new Object());

        this.plateforms.addOpenListener(this.onSelectPlateform.bind(this));
        this.loadingPlateforms.hide();
        this.plateforms.displayWithPairImpair(this.containerPlateforms, "NoPlateform", interfaceTexts["data.visualization.noPlateform"]);
                        
        // Select the first plateform by default
        if( this.jsonPlateforms && this.jsonPlateforms[0] )
        {
            var plateformToSelect = this.plateforms.getItemById(this.jsonPlateforms[0].id);
            this.onSelectPlateform(plateformToSelect.divItem);
            this.selectedPlateform = plateformToSelect.divItem;            
        }
    },

    displayParameters: function()
    {
        this.parameters = new ListParameters(this.jsonParameters, new Object());
        
                this.parameters.addOpenListener(this.onSelectParameter.bind(this));
        this.loadingParameters.hide();
        this.parameters.displayWithPairImpair(this.containerParameters, "NoParameter", interfaceTexts["data.visualization.noParameter"]);
        
        this.resizeContainers();
    },
    
    // EVENTS ********************************************************
    onSelectPlateform: function( objPlateform )
    {
        if( this.selectedPlateform && objPlateform.getId() == this.selectedPlateform.getId() )
            return;

        // Unselect old plateform
        if( this.selectedPlateform )
                this.selectedPlateform.unselect();

        this.selectedPlateform = objPlateform;
        this.selectedPlateform.select();

        // Unselect old parameter
        if( this.selectedParameter )
                this.selectedParameter = false;
        
                this.requestParametersByPlateform();        
                this.testAllFields();
    },
    
    onSelectParameter: function( objParameter )
    {
        if( this.selectedParameter && objParameter.getId() == this.selectedParameter.getId() )
            return;

        // Unselect old parameter
        if( this.selectedParameter )
                this.selectedParameter.unselect();

        this.selectedParameter = objParameter;
        this.selectedParameter.select();
        this.testAllFields();
    },
    
    onClickCalendar: function(calendar)
    {
                if (!calendar.dateField) return false

                if(calendar.clickToDateField)
                {
                        Element.update(calendar.dateField, calendar.date.print(calendar.dateFormat))
                        this.beginDate = calendar.date.print(calendar.dateFormat);
                } else {
                        Element.update(calendar.endDateField, calendar.date.print(calendar.dateFormat))
                        this.endDate = calendar.date.print(calendar.dateFormat);
                }
                calendar.setClickToDateField(!calendar.clickToDateField);
                this.testCalendarPeriod(calendar.dateField.innerHTML,calendar.endDateField.innerHTML);

                // Call the close handler, if necessary
                if (calendar.shouldClose) calendar.callCloseHandler()
    },

    onClickVisualize: function()
    {
        this.displayLoading();
                this.requestValuesByPlateformByParameterByPeriod();
    },

    onClickDownload: function()
    {
        if(this.testAllFields())
                alert("ok");
        else
                alert("non ok");
    },

    // OTHERS ********************************************************
    resizeContainers: function()
    {
        var titleSize = 85;
                var parentHeight = this.superParent.offsetHeight - titleSize;
        var containerPlateformsHeight = this.generalContainerParameters.offsetHeight;
        var containerParametersHeight = this.generalContainerParameters.offsetHeight;
                
        var containerPlateforms = this.containerPlateforms.offsetHeight;
        var containerParameters = this.containerParameters.offsetHeight;
        var containerCalendarHeight = this.generalContainerCalendar.offsetHeight;
        
        var maxHeight = Math.max(containerPlateforms, containerParameters, containerCalendarHeight);

        
        if(maxHeight > parentHeight)
        {
                this.superParent.style.height = maxHeight + 110 + "px";
                this.generalContainerPlateforms.style.height = maxHeight + 10 + "px";
                this.generalContainerParameters.style.height = maxHeight + 10 + "px";
        } else if(maxHeight == containerCalendarHeight) {
                this.superParent.style.height = containerCalendarHeight + titleSize + 25 + "px";
                this.generalContainerPlateforms.style.height = containerCalendarHeight + "px";
                this.generalContainerParameters.style.height = containerCalendarHeight + "px";
        }
    },
    
        testCalendarPeriod: function(beginDate, endDate)
        {       
                if(!beginDate || !endDate)
                        return false;

                var matchFormat = /^(\d{4})-(\d{2})-(\d{2})$/i;
                var testBeginDate = beginDate.match(matchFormat);
                var testEndDate = endDate.match(matchFormat);
                if(!testEndDate || !testEndDate)
                        return;

                this.resizeContainers();

                var datesOk = beginDate <= endDate; 
                if(!datesOk)
                        this.displayNotice();
                else
                        this.hideNotice();
                
                if(!datesOk || !this.selectedPlateform || !this.selectedParameter){
                        this.visualizeButton.disable();
                        this.downloadButton.disable();
                        return false;
                } else {
                        this.visualizeButton.enable();
                this.downloadButton.enable();
                return true;
                }
        },
        
        testAllFields: function()
        {
                if(!this.selectedPlateform || !this.selectedParameter || !this.beginDate || !this.endDate)
                {
                        this.visualizeButton.disable();
                        this.downloadButton.disable();
                }

                return this.testCalendarPeriod(this.beginDate, this.endDate);
        },
        
        displayNotice: function()
        {
                this.notice.innerHTML = "&nbsp";
        this.notice.removeClassName("loading");
                this.notice.addClassName("error");
                this.notice.innerHTML = interfaceTexts["data.visualization.Unvalid_Period"];
                this.notice.style.visibility = "visible";
        },
        
        hideNotice: function()
        {
                this.notice.innerHTML = "&nbsp";
                this.notice.style.visibility = "hidden";
        },
        
        displayLoading: function()
        {
                this.notice.innerHTML = "&nbsp";
        this.notice.removeClassName("error");
                this.notice.style.visibility = "visible";       
        this.notice.addClassName("loading");
        var image = new Element('img', {src: 'resources/icons/loading_datas.gif'});
        this.notice.appendChild(image);
        },
        
        hideLoading: function()
        {
                this.notice.innerHTML = "&nbsp";
        }
});

</script>