From mboxrd@z Thu Jan  1 00:00:00 1970
Return-Path: <d.csapak@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 2C2BF6A21C
 for <pve-devel@pve.proxmox.com>; Tue, 11 Aug 2020 14:17:03 +0200 (CEST)
Received: from firstgate.proxmox.com (localhost [127.0.0.1])
 by firstgate.proxmox.com (Proxmox) with ESMTP id 20AFD1D23C
 for <pve-devel@pve.proxmox.com>; Tue, 11 Aug 2020 14:17:03 +0200 (CEST)
Received: from proxmox-new.maurer-it.com (proxmox-new.maurer-it.com
 [212.186.127.180])
 (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits)
 key-exchange X25519 server-signature RSA-PSS (2048 bits) server-digest SHA256)
 (No client certificate requested)
 by firstgate.proxmox.com (Proxmox) with ESMTPS id 9C1AD1D223
 for <pve-devel@pve.proxmox.com>; Tue, 11 Aug 2020 14:17:01 +0200 (CEST)
Received: from proxmox-new.maurer-it.com (localhost.localdomain [127.0.0.1])
 by proxmox-new.maurer-it.com (Proxmox) with ESMTP id 0868344587
 for <pve-devel@pve.proxmox.com>; Tue, 11 Aug 2020 14:05:52 +0200 (CEST)
To: pve-devel@pve.proxmox.com
References: <20200702124914.824124-1-o.bektas@proxmox.com>
 <20200702124914.824124-3-o.bektas@proxmox.com>
From: Dominik Csapak <d.csapak@proxmox.com>
Message-ID: <cb62cf46-4cfe-b666-9b3c-f27eb159d87d@proxmox.com>
Date: Tue, 11 Aug 2020 14:05:46 +0200
User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:80.0) Gecko/20100101
 Thunderbird/80.0
MIME-Version: 1.0
In-Reply-To: <20200702124914.824124-3-o.bektas@proxmox.com>
Content-Type: text/plain; charset=utf-8; format=flowed
Content-Language: en-US
Content-Transfer-Encoding: 7bit
X-SPAM-LEVEL: Spam detection results:  0
 AWL 0.647 Adjusted score from AWL reputation of From: address
 KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment
 NICE_REPLY_A           -0.001 Looks like a legit reply (A)
 RCVD_IN_DNSWL_MED        -2.3 Sender listed at https://www.dnswl.org/,
 medium trust
 SPF_HELO_NONE           0.001 SPF: HELO does not publish an SPF Record
 SPF_PASS               -0.001 SPF: sender matches SPF record
Subject: Re: [pve-devel] [PATCH widget-toolkit 2/4] add TimezonePanel for
 containers
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: Tue, 11 Aug 2020 12:17:03 -0000

aside from thomas comment about static declaration, i would like
to use a viewmodel controller style

this would make it much easier to use, e.g

you could have a viewmodel with

data: {
     tzmode: 'foo'
}
formulas: {
     tzIsSelect: function(get) {
         return get('tzmode') === 'select'
     }
}

and then you can bind the value directly (instead of using a change handler)

You have to use a 'radiogroup' in this case to be able to
two-way bind the value

{
     xtype: 'radiogroup',
     bind: {
        value: "{tzmode}",
     }
}

...

{
     xtype: 'combobox',
     ...
     bind: {
        disabled: '{!tzIsSelect}'
     }
}
etc.

this makes the code much more readable
(ofc maybe the radiogroup thing is too much effort,
that case a change handler for all radio buttons in
a controller should do the same trick; you can set a viewmodel value
manually as well)

also comments inline

On 7/2/20 2:49 PM, Oguz Bektas wrote:
> with 3 modes;
> - CT managed (no action)
> - match host (use same timezone as host)
> - select from list
> 
> also move 'UTC' to the top of the TimezoneStore for convenience
> 
> Signed-off-by: Oguz Bektas <o.bektas@proxmox.com>
> ---
> 
> v2->v3:
> * use radiofields
> 
> 
> 
>   src/Makefile               |  1 +
>   src/data/TimezoneStore.js  |  2 +-
>   src/panel/TimezonePanel.js | 91 ++++++++++++++++++++++++++++++++++++++
>   3 files changed, 93 insertions(+), 1 deletion(-)
>   create mode 100644 src/panel/TimezonePanel.js
> 
> diff --git a/src/Makefile b/src/Makefile
> index 12dda30..8bd576f 100644
> --- a/src/Makefile
> +++ b/src/Makefile
> @@ -41,6 +41,7 @@ JSSRC=					\
>   	panel/JournalView.js		\
>   	panel/RRDChart.js		\
>   	panel/GaugeWidget.js		\
> +	panel/TimezonePanel.js		\
>   	window/Edit.js			\
>   	window/PasswordEdit.js		\
>   	window/TaskViewer.js		\
> diff --git a/src/data/TimezoneStore.js b/src/data/TimezoneStore.js
> index a67ad8b..fcaca3e 100644
> --- a/src/data/TimezoneStore.js
> +++ b/src/data/TimezoneStore.js
> @@ -7,6 +7,7 @@ Ext.define('Proxmox.data.TimezoneStore', {
>       extend: 'Ext.data.Store',
>       model: 'Timezone',
>       data: [
> +	    ['UTC'],
>   	    ['Africa/Abidjan'],
>   	    ['Africa/Accra'],
>   	    ['Africa/Addis_Ababa'],
> @@ -414,6 +415,5 @@ Ext.define('Proxmox.data.TimezoneStore', {
>   	    ['Pacific/Tongatapu'],
>   	    ['Pacific/Wake'],
>   	    ['Pacific/Wallis'],
> -	    ['UTC'],
>   	],
>   });
> diff --git a/src/panel/TimezonePanel.js b/src/panel/TimezonePanel.js
> new file mode 100644
> index 0000000..25d6423
> --- /dev/null
> +++ b/src/panel/TimezonePanel.js
> @@ -0,0 +1,91 @@
> +Ext.define('PVE.panel.TimezonePanel', {
> +    extend: 'Proxmox.panel.InputPanel',
> +    alias: 'widget.PVETimezonePanel',
> +
> +    insideWizard: false,
> +
> +    setValues: function(values) {
> +	var me = this;
> +
> +	if (!values.timezone) {
> +	    delete values.tzmode;

should that not be values.tzmode = "__default__" ?

> +	} else if (values.timezone === 'host') {
> +	    values.tzmode = 'host';
> +	} else {
> +	    values.tzmode = 'select';
> +	}
> +	return me.callParent([values]);
> +    },
> +
> +    onGetValues: function(values) {
> +	var me = this;
> +
> +	var deletes = [];
> +	if (values.tzmode === '__default__') {
> +	    deletes.push('timezone');
> +	} else if (values.tzmode === 'host') {
> +	    values.timezone = 'host';
> +	}
> +
> +	delete values.tzmode;
> +
> +	if (deletes.length) {
> +	    values.delete = deletes.join(',');

i think you do not need the join here, simply using the array should be 
enough

also, you only have one field to delete, why dont you set it directly above:

if (values.tzmode === '__default__') {
   values.delete = 'timezone';
}

?


> +	}
> +
> +	return values;
> +    },
> +
> +
> +    initComponent: function() {
> +	var me = this;
> +
> +	var items = [];
> +	items.push({
> +		   xtype: 'radiofield',
> +		   name: 'tzmode',
> +		   inputValue: '__default__',
> +		   boxLabel: gettext('Container managed'),
> +		   checked: true,
> +	});
> +	items.push({
> +		   xtype: 'radiofield',
> +		   name: 'tzmode',
> +		   inputValue: 'host',
> +		   boxLabel: gettext('Use host settings'),
> +	});
> +	items.push({
> +		   xtype: 'radiofield',
> +		   name: 'tzmode',
> +		   inputValue: 'select',
> +		   boxLabel: gettext('Select a timezone'),
> +		   listeners: {
> +		       change: function(f, value) {
> +			   if (!this.rendered) {
> +			       return;
> +			   }
> +			   let timezoneSelect = me.down('field[name=timezone]');
> +			   timezoneSelect.setDisabled(!value);
> +		       },
> +		   },
> +	});
> +	items.push({
> +		   xtype: 'combobox',
> +		   itemId: 'tzlist',
> +		   fieldLabel: gettext('Time zone'),
> +		   disabled: true,
> +		   name: 'timezone',
> +		   queryMode: 'local',
> +		   store: Ext.create('Proxmox.data.TimezoneStore'),
> +		   displayField: 'zone',
> +		   editable: true,
> +		   anyMatch: true,
> +		   forceSelection: true,
> +		   allowBlank: false,
> +	});
> +
> +	me.items = items;
> +
> +	me.callParent();
> +    },
> +});
>