From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from firstgate.proxmox.com (firstgate.proxmox.com [212.224.123.68]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (2048 bits)) (No client certificate requested) by lists.proxmox.com (Postfix) with ESMTPS id AA7A892E2B for ; Thu, 23 Mar 2023 15:43:03 +0100 (CET) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id D04682DAC7 for ; Thu, 23 Mar 2023 15:42:32 +0100 (CET) Received: from proxmox-new.maurer-it.com (proxmox-new.maurer-it.com [94.136.29.106]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (2048 bits)) (No client certificate requested) by firstgate.proxmox.com (Proxmox) with ESMTPS for ; Thu, 23 Mar 2023 15:42:30 +0100 (CET) Received: from proxmox-new.maurer-it.com (localhost.localdomain [127.0.0.1]) by proxmox-new.maurer-it.com (Proxmox) with ESMTP id 429C8465ED for ; Thu, 23 Mar 2023 15:42:28 +0100 (CET) From: Christian Ebner To: pve-devel@lists.proxmox.com Date: Thu, 23 Mar 2023 15:42:02 +0100 Message-Id: <20230323144205.1774772-3-c.ebner@proxmox.com> X-Mailer: git-send-email 2.30.2 In-Reply-To: <20230323144205.1774772-1-c.ebner@proxmox.com> References: <20230323144205.1774772-1-c.ebner@proxmox.com> MIME-Version: 1.0 Content-Transfer-Encoding: 8bit X-SPAM-LEVEL: Spam detection results: 0 AWL 0.031 Adjusted score from AWL reputation of From: address BAYES_00 -1.9 Bayes spam probability is 0 to 1% KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record SPF_PASS -0.001 SPF: sender matches SPF record Subject: [pve-devel] [PATCH widget-toolkit 2/3] DateTimeField: Extend and refactor to make field value bindable X-BeenThere: pve-devel@lists.proxmox.com X-Mailman-Version: 2.1.29 Precedence: list List-Id: Proxmox VE development discussion List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , X-List-Received-Date: Thu, 23 Mar 2023 14:43:03 -0000 Extends the date time field so that bindings are updated on value changes. Also adds a config to disable child components and avoid modification of current values by cloning the referenced object for min/max value calculation. Signed-off-by: Christian Ebner --- src/form/DateTimeField.js | 105 +++++++++++++++++++++++++++++--------- 1 file changed, 81 insertions(+), 24 deletions(-) diff --git a/src/form/DateTimeField.js b/src/form/DateTimeField.js index 87bb1ef..e12fc91 100644 --- a/src/form/DateTimeField.js +++ b/src/form/DateTimeField.js @@ -6,21 +6,34 @@ Ext.define('Proxmox.DateTimeField', { referenceHolder: true, - submitFormat: 'U', + config: { + submitFormat: 'U', + disabled: false, + }, - getValue: function() { + setValue: function(value) { let me = this; - let d = me.lookupReference('dateentry').getValue(); + me.setDate(value); + me.setTime(value); - if (d === undefined || d === null) { return null; } + // Notify all 'value' bindings of state change + me.publishState('value', value); + }, - let t = me.lookupReference('timeentry').getValue(); + getValue: function() { + let me = this; + let date = me.lookupReference('dateentry').getValue(); + + if (date === undefined || date === null) { return null; } - if (t === undefined || t === null) { return null; } + let time = me.lookupReference('timeentry').getValue(); - let offset = (t.getHours() * 3600 + t.getMinutes() * 60) * 1000; + if (time === undefined || time === null) { return null; } - return new Date(d.getTime() + offset); + date.setHours(time.getHours()); + date.setMinutes(time.getMinutes()); + date.setSeconds(time.getSeconds()); + return date; }, getSubmitValue: function() { @@ -31,6 +44,20 @@ Ext.define('Proxmox.DateTimeField', { return value ? Ext.Date.format(value, format) : null; }, + setDate: function(date) { + let me = this; + let dateEntry = me.lookupReference('dateentry'); + dateEntry.setValue(date); + dateEntry.publishState('value', date); + }, + + setTime: function(time) { + let me = this; + let timeEntry = me.lookupReference('timeentry'); + timeEntry.setValue(time); + timeEntry.publishState('value', time); + }, + items: [ { xtype: 'datefield', @@ -38,6 +65,17 @@ Ext.define('Proxmox.DateTimeField', { reference: 'dateentry', flex: 1, format: 'Y-m-d', + bind: { + disabled: '{disabled}', + }, + listeners: { + 'change': function(field, newValue, oldValue) { + let dateTimeField = field.up('fieldcontainer'); + dateTimeField.setDate(newValue); + let value = dateTimeField.getValue(); + dateTimeField.publishState('value', value); + }, + }, }, { xtype: 'timefield', @@ -46,6 +84,17 @@ Ext.define('Proxmox.DateTimeField', { width: 80, value: '00:00', increment: 60, + bind: { + disabled: '{disabled}', + }, + listeners: { + 'change': function(field, newValue, oldValue) { + let dateTimeField = field.up('fieldcontainer'); + dateTimeField.setTime(newValue); + let value = dateTimeField.getValue(); + dateTimeField.publishState('value', value); + }, + }, }, ], @@ -56,21 +105,23 @@ Ext.define('Proxmox.DateTimeField', { return; } - let minhours = value.getHours(); - let minminutes = value.getMinutes(); + // Clone to avoid modifying the referenced value + let clone = new Date(value); + let minhours = clone.getHours(); + let minminutes = clone.getMinutes(); let hours = current.getHours(); let minutes = current.getMinutes(); - value.setHours(0); - value.setMinutes(0); - value.setSeconds(0); + clone.setHours(0); + clone.setMinutes(0); + clone.setSeconds(0); current.setHours(0); current.setMinutes(0); current.setSeconds(0); let time = new Date(); - if (current-value > 0) { + if (current-clone > 0) { time.setHours(0); time.setMinutes(0); time.setSeconds(0); @@ -84,9 +135,9 @@ Ext.define('Proxmox.DateTimeField', { // current time is smaller than the time part of the new minimum // so we have to add 1 to the day if (minhours*60+minminutes > hours*60+minutes) { - value.setDate(value.getDate()+1); + clone.setDate(clone.getDate()+1); } - me.lookup('dateentry').setMinValue(value); + me.lookup('dateentry').setMinValue(clone); }, setMaxValue: function(value) { @@ -96,19 +147,25 @@ Ext.define('Proxmox.DateTimeField', { return; } - let maxhours = value.getHours(); - let maxminutes = value.getMinutes(); + // Clone to avoid modifying the referenced value + let clone = new Date(value); + let maxhours = clone.getHours(); + let maxminutes = clone.getMinutes(); let hours = current.getHours(); let minutes = current.getMinutes(); - value.setHours(0); - value.setMinutes(0); + clone.setHours(0); + clone.setMinutes(0); + clone.setSeconds(0); + clone.setMilliseconds(0); current.setHours(0); current.setMinutes(0); + current.setSeconds(0); + current.setMilliseconds(0); let time = new Date(); - if (value-current > 0) { + if (clone-current > 0) { time.setHours(23); time.setMinutes(59); time.setSeconds(59); @@ -118,13 +175,13 @@ Ext.define('Proxmox.DateTimeField', { } me.lookup('timeentry').setMaxValue(time); - // current time is biger than the time part of the new maximum + // current time is bigger than the time part of the new maximum // so we have to subtract 1 to the day if (maxhours*60+maxminutes < hours*60+minutes) { - value.setDate(value.getDate()-1); + clone.setDate(clone.getDate()-1); } - me.lookup('dateentry').setMaxValue(value); + me.lookup('dateentry').setMaxValue(clone); }, initComponent: function() { -- 2.30.2