Create a base component for interval selection.

Menouar AZIB
1 parent d7558ac5
Showing 3 changed files with 164 additions and 1 deletions Show diff stats
js/app/views/PlotComponents/PlotZoomPlug.js
js/app/views/PlotComponents/intervalSelection/DateIntervalSelection.js
js/app/views/PlotComponents/intervalSelection/IntervalSelection.js
@@ -17,7 +17,7 @@
 Ext.define('amdaPlotComp.PlotZoomPlug', {
   extend: 'Ext.util.Observable',
   alias: 'plugin.plotZoomPlugin',
-  requires: [
+  requires: ['amdaPlotComp.intervalSelection.IntervalSelection',
     'amdaPlotComp.plotFunction.ParamField', 'amdaPlotComp.plotFunction.FunctionType', 'amdaPlotComp.plotFunction.CreatePlot'],
  
   //id: 'plot-zoom-plug',
@@ -30,6 +30,7 @@ Ext.define(&#39;amdaPlotComp.PlotZoomPlug&#39;, {
   zoomType: '',
   interactiveId: '',
   panelId: -1,
+  myChildWindow: null,
  
   linkedTTCatNode: null,
   /**
@@ -69,6 +70,8 @@ Ext.define(&#39;amdaPlotComp.PlotZoomPlug&#39;, {
     if (!this.form)
       return;
  
+    this.myChildWindow.setField1Value(min);
+
     if (this.zoomType == 'timeAxis') {
       this.form.getForm().findField('zoom-min-time').setValue(min);
  
@@ -81,6 +84,8 @@ Ext.define(&#39;amdaPlotComp.PlotZoomPlug&#39;, {
     if (!this.form)
       return;
  
+      this.myChildWindow.setField2Value(max);
+
     if (this.zoomType == 'timeAxis') {
       var minValue = this.form.getForm().findField('zoom-min-time').getValue();
       if (minValue <= max) {
@@ -130,6 +135,11 @@ Ext.define(&#39;amdaPlotComp.PlotZoomPlug&#39;, {
    *  creation of the window
    */
   show: function (interactiveId, zoomType, panelId, isPlotFunction_ = false) {
+     this.myChildWindow = Ext.create('amdaPlotComp.intervalSelection.DateIntervalSelection');
+    // Show the window
+    this.myChildWindow.show();
+    this.myChildWindow.setPosition(100, 100);
+   
     this.isPlotFunction = isPlotFunction_;
     if (this.win) { this.close() };
       this.win = new Ext.Window({
@@ -0,0 +1,30 @@
+Ext.define('amdaPlotComp.intervalSelection.DateIntervalSelection', {
+    extend: 'amdaPlotComp.intervalSelection.IntervalSelection', // This class extends from amdaPlotComp.intervalSelection.IntervalSelection
+
+    field1Type: 'datefield',
+    field1Label: 'Start Time',
+    field1Format: 'Y/m/d H:i:s.u',
+    field2Type: 'datefield',
+    field2Label: 'Stop Time',
+    field2Format: 'Y/m/d H:i:s.u',
+
+    /*
+    setField1Value: function (value) {
+        var field2Value = this.getField2Value();
+        value = new Date(value);
+        field2Value = new Date(field2Value);
+        if (value > field2Value) {
+            value = field2Value;
+        }
+        this.parent.down('#' + FIELD1_ITEM_ID).setValue(value);
+    },
+
+    setField2Value: function (value) {
+        value = new Date(value);
+        field1Value = new Date(field1Value);
+        if (value < field1Value) {
+            value = field1Value;
+        }
+        this.parent.down('#' + FIELD2_ITEM_ID).setValue(value);
+    }*/
+});
@@ -0,0 +1,123 @@
+// Define the itemIds as constants
+// These will be used to reference the fields later in the code
+var FIELD1_ITEM_ID = 'field1';
+var FIELD2_ITEM_ID = 'field2';
+
+// Define a constant for the layout style of the form
+const LAYOUT_STYLE = {
+    type: 'vbox', // vertical box layout
+    pack: 'start', // controls the vertical alignment of child items
+    align: 'stretch' // each child item is stretched to fill the width of the container
+};
+
+// Define the parent class
+Ext.define('amdaPlotComp.intervalSelection.IntervalSelection', {
+    extend: 'Ext.window.Window', // This class extends from Ext.window.Window
+    // Window configurations
+    x: 0, y: 0, // The initial position of the window
+    title: 'Interval Selection', // The title of the window
+    constrain: true, // Constrains the window to within the boundaries of its containing element
+    collapsible: true, // Allows the window to be collapsed
+    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
+
+    config: {
+        field1Type: 'numberfield', // The xtype of field1. By default is numberfield.
+        field1Label: 'Min Value', // The label of field1.
+        field1Format: null,
+        field2Type: 'numberfield', // The xtype of field2. By default is numberfield.
+        field2Label: 'Max Value', // The label of field2.
+        field2Format: null
+    },
+
+    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
+            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
+            fieldDefaults: {
+                labelWidth: 60 // Set default label width for fields in this panel
+            },
+            items: [{
+                xtype: 'fieldset', // Create a new FieldSet to group related fields together
+                title: 'Interval Selection',
+                name: 'interval-selection-fieldset',
+                collapsible: false,
+                layout: LAYOUT_STYLE,
+                items: [{
+                    xtype: this.field1Type,
+                    fieldLabel: this.field1Label,
+                    itemId: FIELD1_ITEM_ID,
+                    format: this.field1Format
+                },
+                {
+                    xtype: this.field2Type,
+                    fieldLabel: this.field2Label,
+                    itemId: FIELD2_ITEM_ID,
+                    format: this.field2Format,
+                    listeners: {
+                        change: function (field, newValue) {
+                            var field1 = me._getField1();
+                            // Check if field1 is not empty
+                            const value1 = field1.getValue();
+                            if (value1 !== null && value1 !== undefined && value1 !== '') {
+                                if (newValue < value1) {
+                                    // Update both field1 and field2 to the new value
+                                    field1.setValue(newValue);
+                                    field.setValue(value1);
+                                }
+                            }
+                        }
+                    }
+                }, {
+                    xtype: 'button',
+                    text: 'Reset',
+                    handler: function () {
+                        me._getField1().reset();
+                        me._getField2().reset();
+                    }
+                }, {
+                    xtype: 'button',
+                    text: 'Use in Time Selection',
+                    handler: function () {
+                        alert('Button 2 clicked');
+                    }
+                }]
+            }]
+        })
+
+        Ext.apply(this, {
+            items: this.parent
+        });
+
+        this.callParent(arguments);
+    },
+
+    _getField1: function () {
+        return this.parent.down('#' + FIELD1_ITEM_ID);
+    },
+
+    _getField2: function () {
+        return this.parent.down('#' + FIELD2_ITEM_ID);
+    },
+
+    getField1Value: function () {
+        return this._getField1().getValue();
+    },
+
+    getField2Value: function () {
+        return this._getField2().getValue();
+    },
+
+    setField1Value: function (value) {
+        this._getField1().setValue(value);
+    },
+
+    setField2Value: function (value) {
+        this._getField2().setValue(value);
+    }
+});