From mboxrd@z Thu Jan 1 00:00:00 1970
Return-Path: <c.ebner@proxmox.com>
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 E51A490A2A
for <pve-devel@lists.proxmox.com>; Mon, 30 Jan 2023 10:08:13 +0100 (CET)
Received: from firstgate.proxmox.com (localhost [127.0.0.1])
by firstgate.proxmox.com (Proxmox) with ESMTP id C5FE1CCCC
for <pve-devel@lists.proxmox.com>; Mon, 30 Jan 2023 10:07:43 +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 <pve-devel@lists.proxmox.com>; Mon, 30 Jan 2023 10:07:42 +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 989EB451BF
for <pve-devel@lists.proxmox.com>; Mon, 30 Jan 2023 10:07:42 +0100 (CET)
From: Christian Ebner <c.ebner@proxmox.com>
To: pve-devel@lists.proxmox.com
Date: Mon, 30 Jan 2023 10:07:13 +0100
Message-Id: <20230130090715.349057-2-c.ebner@proxmox.com>
X-Mailer: git-send-email 2.30.2
In-Reply-To: <20230130090715.349057-1-c.ebner@proxmox.com>
References: <20230130090715.349057-1-c.ebner@proxmox.com>
MIME-Version: 1.0
Content-Transfer-Encoding: 8bit
X-SPAM-LEVEL: Spam detection results: 0
AWL -0.000 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] [RFC widget-toolkit 1/2] 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 <pve-devel.lists.proxmox.com>
List-Unsubscribe: <https://lists.proxmox.com/cgi-bin/mailman/options/pve-devel>,
<mailto:pve-devel-request@lists.proxmox.com?subject=unsubscribe>
List-Archive: <http://lists.proxmox.com/pipermail/pve-devel/>
List-Post: <mailto:pve-devel@lists.proxmox.com>
List-Help: <mailto:pve-devel-request@lists.proxmox.com?subject=help>
List-Subscribe: <https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel>,
<mailto:pve-devel-request@lists.proxmox.com?subject=subscribe>
X-List-Received-Date: Mon, 30 Jan 2023 09:08:13 -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 <c.ebner@proxmox.com>
---
src/form/DateTimeField.js | 104 +++++++++++++++++++++++++++++---------
1 file changed, 81 insertions(+), 23 deletions(-)
diff --git a/src/form/DateTimeField.js b/src/form/DateTimeField.js
index a061e15..fbf6b09 100644
--- a/src/form/DateTimeField.js
+++ b/src/form/DateTimeField.js
@@ -8,19 +8,33 @@ Ext.define('Proxmox.DateTimeField', {
submitFormat: 'U',
- getValue: function() {
+ config: {
+ disabled: false,
+ },
+
+ 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);
+ },
+
+ getValue: function() {
+ let me = this;
+ let date = me.lookupReference('dateentry').getValue();
- let t = me.lookupReference('timeentry').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 +45,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 +66,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 +85,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 +106,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 +136,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 +148,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 +176,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