diff --git a/js/app/views/PlotComponents/intervalSelection/DateZoomIntervalSelection.js b/js/app/views/PlotComponents/intervalSelection/DateZoomIntervalSelection.js index 5f265f8..ac764d3 100644 --- a/js/app/views/PlotComponents/intervalSelection/DateZoomIntervalSelection.js +++ b/js/app/views/PlotComponents/intervalSelection/DateZoomIntervalSelection.js @@ -9,7 +9,7 @@ Ext.define('amdaPlotComp.intervalSelection.DateZoomIntervalSelection', { initComponent: function () { this.callParent(arguments); this.insertToTTCatlog = new amdaPlotComp.intervalSelection.InsertToTTCatlog({ parent: this }); - this.parent.add(this.insertToTTCatlog); + this.form.add(this.insertToTTCatlog); }, }); diff --git a/js/app/views/PlotComponents/intervalSelection/IntervalSelection.js b/js/app/views/PlotComponents/intervalSelection/IntervalSelection.js index 27eb0d2..c70442b 100644 --- a/js/app/views/PlotComponents/intervalSelection/IntervalSelection.js +++ b/js/app/views/PlotComponents/intervalSelection/IntervalSelection.js @@ -8,7 +8,7 @@ const LAYOUT_STYLE = { // Width of button const width = 100; -// Define the parent class +// Define the parent class for all classes to use time interval selection. Ext.define('amdaPlotComp.intervalSelection.IntervalSelection', { extend: 'Ext.window.Window', // This class extends from Ext.window.Window // Window configurations @@ -19,11 +19,12 @@ Ext.define('amdaPlotComp.intervalSelection.IntervalSelection', { resizable: false, // Prevents the window from being resizable ghost: false, // Disables "ghosting" (semi-transparent representation of the window body) when moving or resizing - parent: null, // Initialize parent to null - hostCmp: null, + form: null, // a panel which contains all components + hostCmp: null, // The host component from which this class is instantiated. interactiveId: '', panelId: -1, + // Attributes of this class config: { field1Type: 'datefield', // The xtype of field1. By default is datefield because we are working with time series. field1Label: 'Start Time', // The label of field1. @@ -41,9 +42,8 @@ Ext.define('amdaPlotComp.intervalSelection.IntervalSelection', { buttonUseTime: 'button-use-time', initComponent: function () { - const me = this; // Reference to this instance for use in event handlers - - this.parent = new Ext.form.FormPanel({ // Create a new FormPanel instance and assign it to parent + const self = this; // Reference to this instance for use in event handlers + this.form = new Ext.form.FormPanel({ // Create a new FormPanel instance and assign it to form frame: true, // Display a frame around the panel width: 255, // Set the width of the panel layout: LAYOUT_STYLE, // Set the layout style of the panel @@ -64,7 +64,7 @@ Ext.define('amdaPlotComp.intervalSelection.IntervalSelection', { listeners: { change: function (field, newValue) { if (newValue === null || newValue === undefined || newValue === '') return; - var field2 = me._getField2(); + var field2 = self._getField2(); // Check if field2 is not empty const value2 = field2.getValue(); if (value2 !== null && value2 !== undefined && value2 !== '') { @@ -87,7 +87,7 @@ Ext.define('amdaPlotComp.intervalSelection.IntervalSelection', { listeners: { change: function (field, newValue) { if (newValue === null || newValue === undefined || newValue === '') return; - var field1 = me._getField1(); + var field1 = self._getField1(); // Check if field1 is not empty const value1 = field1.getValue(); if (value1 !== null && value1 !== undefined && value1 !== '') { @@ -106,7 +106,7 @@ Ext.define('amdaPlotComp.intervalSelection.IntervalSelection', { text: 'Reset', width: width, handler: function () { - me.reset(); + self.reset(); } }, { @@ -114,7 +114,7 @@ Ext.define('amdaPlotComp.intervalSelection.IntervalSelection', { text: 'Use in Time Selection', itemId: this.buttonUseTime, handler: function () { - me._setTimeInterval(); + self._setTimeInterval(); } }] }], @@ -124,38 +124,67 @@ Ext.define('amdaPlotComp.intervalSelection.IntervalSelection', { width: width, text: this.buttonApply, handler: function () { - me._apply(); + self._apply(); } } ] }) Ext.apply(this, { - items: this.parent + items: this.form }); this.setTitle(this.title + " - Panel Id : " + this.panelId); this.callParent(arguments); }, + /** + * Resets the time interval selection in the host component. + * This function calls the resetZoom method on the panelImage of the host component, + * effectively resetting any zoom applied to the image. + */ _resetHostCmpSelection: function () { this.hostCmp.panelImage.resetZoom(); }, - _apply: function () { }, + /** + * Abstract method that must be implemented by subclasses. + * Throws an error if not overridden. + */ + _apply: function () { + throw new Error('_apply() method must be implemented by subclass'); + }, + /** + * Checks if the values of field1 and field2 are valid and if the form is valid. + * Returns true if any of these conditions are not met. + */ _notValidValues: function () { - return !this.getField1Value() || !this.getField2Value() || !this.parent.getForm().isValid(); + return !this.getField1Value() || !this.getField2Value() || !this.form.getForm().isValid(); }, + /** + * Retrieves the component associated with FIELD1_ITEM_ID in the form. + * Returns the component if found, null otherwise. + */ _getField1: function () { - return this.parent.down('#' + this.FIELD1_ITEM_ID); + return this.form.down('#' + this.FIELD1_ITEM_ID); }, + /** + * Retrieves the component associated with FIELD2_ITEM_ID in the form. + * Returns the component if found, null otherwise. + */ _getField2: function () { - return this.parent.down('#' + this.FIELD2_ITEM_ID); + return this.form.down('#' + this.FIELD2_ITEM_ID); }, + /** + * Sets the time interval of the plot based on the values of the fields. + * This method is triggered when the buttonUseTime is clicked. + * It creates a new time object with start, stop, and interactiveId properties, + * and then calls the setTimeInterval method on the plot module with this object. + */ _setTimeInterval: function () { const timeObj = new Object(); timeObj.start = this.getField1Value(); @@ -165,30 +194,52 @@ Ext.define('amdaPlotComp.intervalSelection.IntervalSelection', { plotModule.setTimeInterval(timeObj); }, + /** + * Hides the buttonUseTime when it's not needed. + * For example, when we call Zoom on y-left axis we should not see this button. + * It finds the button by its ID and then calls the hide method on it. + */ _removeUseTimeButton: function () { - const buttonToHide = this.parent.down('#' + this.buttonUseTime); + const buttonToHide = this.form.down('#' + this.buttonUseTime); buttonToHide.hide(); }, + /** + * Retrieves the value of field1 from the form. + */ getField1Value: function () { return this._getField1().getValue(); }, + /** + * Retrieves the value of field2 from the form. + */ getField2Value: function () { return this._getField2().getValue(); }, + /** + * Sets a new value for field1 in the form. + */ setField1Value: function (value) { this._getField1().setValue(value); }, + /** + * Sets a new value for field2 in the form. + */ setField2Value: function (value) { this._getField2().setValue(value); }, + /** + * Resets the values of fields and host component selection. + * It calls the reset method on field1 and field2, and then calls _resetHostCmpSelection. + */ reset: function () { this._getField1().reset(); this._getField2().reset(); this._resetHostCmpSelection(); } + }); diff --git a/js/app/views/PlotComponents/intervalSelection/PlotFunctionIntervalSelection.js b/js/app/views/PlotComponents/intervalSelection/PlotFunctionIntervalSelection.js index e452203..db3ffe8 100644 --- a/js/app/views/PlotComponents/intervalSelection/PlotFunctionIntervalSelection.js +++ b/js/app/views/PlotComponents/intervalSelection/PlotFunctionIntervalSelection.js @@ -8,7 +8,7 @@ Ext.define('amdaPlotComp.intervalSelection.PlotFunctionIntervalSelection', { initComponent: function () { this.callParent(arguments); this.plotFunctionType = new amdaPlotComp.plotFunction.FunctionType(); - this.parent.add(this.plotFunctionType); + this.form.add(this.plotFunctionType); }, _apply: function () { diff --git a/js/app/views/PlotComponents/intervalSelection/ZoomIntervalSelection.js b/js/app/views/PlotComponents/intervalSelection/ZoomIntervalSelection.js index e6ab073..9a7ed2d 100644 --- a/js/app/views/PlotComponents/intervalSelection/ZoomIntervalSelection.js +++ b/js/app/views/PlotComponents/intervalSelection/ZoomIntervalSelection.js @@ -5,14 +5,14 @@ Ext.define('amdaPlotComp.intervalSelection.ZoomIntervalSelection', { type: null, initComponent: function () { - const me = this; + const self = this; this.callParent(arguments); - this.parent.getDockedItems('toolbar[dock="bottom"]')[0].add({ + this.form.getDockedItems('toolbar[dock="bottom"]')[0].add({ xtype: 'button', width: width, text: 'Undo Zoom', handler: function () { - me._undoZoom(); + self._undoZoom(); } }); }, -- libgit2 0.21.2