/** * Project  : AMDA-NG * Name : PlotZoomPlug.js * @plugin amdaPlotComp.PlotZoomPlug * @extends Ext.util.Observable * @ptype plotZoomPlugin * @brief Plot Zoom UI (View) * @author Benjamin * @version $Id: PlotZoomPlug.js ******************************************************************************** * FT Id : Date : Name - Description ******************************************************************************* * : */ Ext.define('amdaPlotComp.PlotZoomPlug', { extend: 'Ext.util.Observable', alias: 'plugin.plotZoomPlugin', requires: [ 'amdaPlotComp.plotFunction.ParamField', 'amdaPlotComp.plotFunction.FunctionType'], id: 'plot-zoom-plug', ttModuleId: 'timetab-win', catModuleId: 'catalog-win', win: null, form: null, zoomType: '', interactiveId: '', panelId: -1, linkedTTCatNode: null, /** * Un composant de 'PlotFunction' qui permet d'afficher le min samplig de chaque paramètre et le nombre de points théoriques entre un start time et stop time */ plotFunctionParamField: null, /** * Un composant de 'PlotFunction' qui permet à l'utilisateur de séléctionner le type de fonction à appliquer : FFT, SUM, ... */ plotFunctionType: null, constructor: function (config) { Ext.apply(this, config); this.callParent(arguments); }, onDestroy: function () { this.win = null; }, init: function (cmp) { this.hostCmp = cmp; }, /** * Set different parameters displayed on the current panel * @param {*} listParams_ parameters displayed on the current panel */ setParameters: function (listParams_) { this.listParams = listParams_; this.plotFunctionParamField = new amdaPlotComp.plotFunction.ParamField({ params: this.listParams }); this.plotFunctionType = new amdaPlotComp.plotFunction.FunctionType({}); }, setMinValue: function (min) { if (!this.form) return; if (this.zoomType == 'timeAxis') { this.form.getForm().findField('zoom-min-time').setValue(min); } else this.form.getForm().findField('zoom-min-float').setValue(min); }, setMaxValue: function (max) { if (!this.form) return; if (this.zoomType == 'timeAxis') { var minValue = this.form.getForm().findField('zoom-min-time').getValue(); if (minValue <= max) { this.form.getForm().findField('zoom-max-time').setValue(max); if (this.isPlotFunction) this.plotFunctionParamField.setValues(minValue, max); } else { this.form.getForm().findField('zoom-min-time').setValue(max); this.form.getForm().findField('zoom-max-time').setValue(minValue); if (this.isPlotFunction) this.plotFunctionParamField.setValues(max, minValue); } } else { var minValue = this.form.getForm().findField('zoom-min-float').getValue(); if (minValue <= max) this.form.getForm().findField('zoom-max-float').setValue(max); else { this.form.getForm().findField('zoom-min-float').setValue(max); this.form.getForm().findField('zoom-max-float').setValue(minValue); } } }, /** * add Interval to Time table **/ insertInterval: function () { if (this.zoomType != 'timeAxis') return; var start = this.form.getForm().findField('zoom-min-time').getValue(); var stop = this.form.getForm().findField('zoom-max-time').getValue(); var TTCatType = this.form.getForm().findField('ttcat-type').getValue(); var isCatalog = (TTCatType == 'catalog'); myDesktopApp.getLoadedModule(isCatalog ? this.catModuleId : this.ttModuleId, true, function (module) { var targetModuleUI = module.getUiContent(); if (targetModuleUI) targetModuleUI.addInterval(start, stop); }); }, /** * creation of the window */ show: function (interactiveId, zoomType, panelId, isPlotFunction_ = false) { this.isPlotFunction = isPlotFunction_; if (!this.win) { this.win = new Ext.Window({ id: 'plot-zoom-win-' + this.hostCmp.ownerCt.getId(), // Plot window ID width: 250, x: 0, y: 0, baseCls: 'x-panel', title: 'Zoom', constrain: true, collapsible: true, resizable: false, ghost: false, renderTo: this.hostCmp.ownerCt.body, items: this.getFormConfig(), listeners: { scope: this, beforeclose: function () { this.hostCmp.panelImage.stopZoom(); Ext.PluginManager.unregister(this); } }, getConstrainVector: function (constrainTo) { var me = this; if (me.constrain || me.constrainHeader) { constrainTo = constrainTo || (me.floatParent && me.floatParent.getTargetEl()) || me.container || me.el.getScopeParent(); return (me.constrainHeader ? me.header.el : me.el).getConstrainVector(constrainTo); } } }); this.win.on('destroy', this.onDestroy, this); Ext.PluginManager.register(this); } this.interactiveId = interactiveId; this.updateWinByType(zoomType, panelId); this.win.show(); this.win.setPosition(0, 0); }, close: function () { if (this.win == null) return; this.win.close(); }, updateWinByType: function (zoomType, panelId) { if (this.win == null) return; this.zoomType = zoomType; this.panelId = panelId; switch (zoomType) { case 'timeAxis': if (this.isPlotFunction) { const title = "Appliquer une Transformation"; this.win.setTitle(title + '-Panel Id: ' + panelId); } else { this.win.setTitle('Zoom on time axis & Interval selection - Panel Id : ' + panelId); } break; case 'y-left': this.win.setTitle('Zoom on Y Left axis - Panel Id : ' + panelId); break; case 'y-right': this.win.setTitle('Zoom on Y Right axis - Panel Id : ' + panelId); break; case 'xaxis_id': this.win.setTitle('Zoom on X axis - Panel Id : ' + panelId); break; } this.form.getForm().findField('zoom-min-time').setVisible(this.zoomType == 'timeAxis'); this.form.getForm().findField('zoom-max-time').setVisible(this.zoomType == 'timeAxis'); this.form.getForm().findField('zoom-min-float').setVisible(this.zoomType != 'timeAxis'); this.form.getForm().findField('zoom-max-float').setVisible(this.zoomType != 'timeAxis'); var ttCatNameField = this.form.getForm().findField('ttcat-name'); if (ttCatNameField) ttCatNameField.findParentByType('fieldset').setVisible(this.zoomType == 'timeAxis'); }, resetMinMaxValue: function () { if (this.zoomType == 'timeAxis') { this.form.getForm().findField('zoom-min-time').setValue(''); this.form.getForm().findField('zoom-max-time').setValue(''); } else { this.form.getForm().findField('zoom-min-float').setValue(null); this.form.getForm().findField('zoom-max-float').setValue(null); } this.hostCmp.panelImage.resetZoom(); }, setTimePlot: function () { var timeObj = new Object(); timeObj.start = this.form.getForm().findField('zoom-min-time').getValue(); timeObj.stop = this.form.getForm().findField('zoom-max-time').getValue(); var plotModule = myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.plot.id); plotModule.setTimeInterval(timeObj); }, /** * Main form */ getFormConfig: function () { var intervalFieldSet = { xtype: 'fieldset', title: 'Interval Selection', name: 'interval-selection-fieldset', collapsible: false, layout: { type: 'vbox', pack: 'start', align: 'stretch' }, items: [ { xtype: 'datefield', name: 'zoom-min-time', fieldLabel: 'Start Time', format: 'Y/m/d H:i:s.u', }, { xtype: 'datefield', name: 'zoom-max-time', fieldLabel: 'Stop Time', format: 'Y/m/d H:i:s.u' }, { xtype: 'numberfield', name: 'zoom-min-float', fieldLabel: 'Min Value' }, { xtype: 'numberfield', name: 'zoom-max-float', fieldLabel: 'Max Value' }, { xtype: 'button', width: 100, text: 'Reset', scope: this, handler: function () { this.resetMinMaxValue(); } }, { xtype: 'button', width: 100, text: 'Use in Time Selection', scope: this, handler: function () { this.setTimePlot(); } } ] }; var insertTypeStore = Ext.create('Ext.data.Store', { fields: ['key', 'name'], data: [ { "key": "timeTable", "name": "TimeTable" }, { "key": "catalog", "name": "Catalog" } ] }); var me = this; var insertTTFieldSet = { xtype: 'fieldset', title: 'Add in Time Table or Catalog', name: 'tt-insertion-fieldset', collapsible: false, layout: { type: 'vbox', pack: 'start', align: 'stretch' }, items: [ { xtype: 'combo', fieldLabel: 'Insert In', store: insertTypeStore, queryMode: 'local', displayField: 'name', valueField: 'key', editable: false, value: 'timeTable', name: 'ttcat-type' }, { xtype: 'textfield', fieldLabel: 'Name', name: 'ttcat-name', listeners: { render: function (o, op) { var field = this; var el = this.el; var dropTarget = Ext.create('Ext.dd.DropTarget', el, { ddGroup: 'explorerTree', notifyOver: function (ddSource, e, data) { var TTCatType = me.form.getForm().findField('ttcat-type').getValue(); if (data.records[0].data.leaf && (data.records[0].data.nodeType == TTCatType)) { this.valid = true; return this.dropAllowed; } this.valid = false; return this.dropNotAllowed; }, notifyDrop: function (ddSource, e, data) { if (!this.valid) return false; field.setValue(data.records[0].get('text')); return true; } }); } } }, { xtype: 'button', width: 100, text: 'Insert Interval', scope: this, handler: function () { var me = this; var TTCatType = this.form.getForm().findField('ttcat-type').getValue(); var TTCatName = this.form.getForm().findField('ttcat-name').getValue(); var isCatalog = (TTCatType == 'catalog'); myDesktopApp.getLoadedModule(isCatalog ? this.catModuleId : this.ttModuleId, true, function (module) { var targetModuleUI = module.getUiContent(); if (me.linkedTTCatNode && (me.linkedTTCatNode.get('text') == TTCatName) && (me.linkedTTCatNode.get('nodeType') == TTCatType)) { if (targetModuleUI) me.insertInterval(); else { me.linkedTTCatNode.editLeaf(function () { me.insertInterval(); }); } } else { var explorerTree = Ext.getCmp(amdaUI.ExplorerUI.RESRC_TAB.TREE_ID); var ttCatRootNode = explorerTree.getRootNode().findChild('id', isCatalog ? 'catalog-treeRootNode' : 'timeTable-treeRootNode', true); amdaModel.InteractiveNode.preloadNodes(ttCatRootNode, function () { var nodeWithSameName = null; if (TTCatName != '') nodeWithSameName = ttCatRootNode.findChild('text', TTCatName, true); if (nodeWithSameName !== null) me.linkedTTCatNode = nodeWithSameName; else { module.createLinkedNode(); module.getLinkedNode().set('text', TTCatName); me.linkedTTCatNode = module.getLinkedNode(); var obj = { name: TTCatName, fromPlugin: true }; if (isCatalog) { Ext.Msg.prompt('Define Parameters', 'Please enter parameters number for the new catalog:', function (btn, text) { if (btn == 'ok') { obj.nbParameters = parseInt(text, 10); if (isNaN(obj.nbParameters)) { obj.nbParameters = 1; } module.createObject(obj); me.linkedTTCatNode.editLeaf(function () { me.insertInterval(); }); } }); return; } else { module.createObject(obj); } } me.linkedTTCatNode.editLeaf(function () { me.insertInterval(); }); }); } }); } } ] }; this.form = new Ext.form.FormPanel({ frame: true, width: 255, layout: { type: 'vbox', pack: 'start', align: 'stretch' }, fieldDefaults: { labelWidth: 60 }, items: [ intervalFieldSet, //Ici on rajoute les composants associés à la fonctionnalité 'PlotFunction' me.isPlotFunction ? this.plotFunctionType : insertTTFieldSet, me.isPlotFunction ? this.plotFunctionParamField : null, ], fbar: [ { text: me.isPlotFunction ? "Apply" : 'Apply Zoom', width: 100, scope: this, handler: function () { if (this.zoomType == 'timeAxis') { var minZoom = Ext.Date.format(this.form.getForm().findField('zoom-min-time').getValue(), 'Y-m-d H:i:s.u'); var maxZoom = Ext.Date.format(this.form.getForm().findField('zoom-max-time').getValue(), 'Y-m-d H:i:s.u'); } else { var minZoom = this.form.getForm().findField('zoom-min-float').getValue(); var maxZoom = this.form.getForm().findField('zoom-max-float').getValue(); } if (!maxZoom || !minZoom || !this.form.getForm().isValid()) { myDesktopApp.warningMsg('Error in values definition'); return; } if (me.isPlotFunction) { const start_time = this.form.getForm().findField('zoom-min-time').getValue(); const stop_time = this.form.getForm().findField('zoom-max-time').getValue(); let request_to_send = {}; request_to_send = Object.assign({}, me.plotFunctionType.getValues(), me.plotFunctionParamField.getValues()); request_to_send = Object.assign({}, request_to_send, { 'action': 'plotFunction', 'interactiveId': this.interactiveId, 'panelId': this.panelId, 'starttime': start_time, 'stoptime': stop_time }); console.log(request_to_send); this.hostCmp.callInteractivePlot(request_to_send); } else { this.hostCmp.callInteractivePlot({ 'action': 'zoom', 'interactiveId': this.interactiveId, 'panelId': this.panelId, 'axeId': this.zoomType, 'min': minZoom, 'max': maxZoom }); } this.hostCmp.panelImage.resetZoom(); } }, { text: 'Undo Zoom', width: 100, scope: this, handler: function () { this.hostCmp.callInteractivePlot({ 'action': 'undozoom', 'interactiveId': this.interactiveId, 'panelId': this.panelId, 'axeId': this.zoomType }); this.hostCmp.panelImage.resetZoom(); } } ] }); this.plotFunctionType.setParent(this.form.getForm()); this.plotFunctionParamField.setParent(this.form.getForm()); return this.form; }, });