[pve-devel] [PATCH v2 widget-toolkit 3/5] add TimezonePanel for containers

[Thomas Lamprecht]

On 17.06.20 15:32, 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 at proxmox.com>
> ---
>
> v1->v2:
> no changes
>
>
>  src/Makefile               |  1 +
>  src/data/TimezoneStore.js  |  2 +-
>  src/panel/TimezonePanel.js | 73 ++++++++++++++++++++++++++++++++++++++
>  3 files changed, 75 insertions(+), 1 deletion(-)
>  create mode 100644 src/panel/TimezonePanel.js
>
> diff --git a/src/Makefile b/src/Makefile
> index 659e876..e1a31e8 100644
> --- a/src/Makefile
> +++ b/src/Makefile
> @@ -38,6 +38,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..5ebac65
> --- /dev/null
> +++ b/src/panel/TimezonePanel.js
> @@ -0,0 +1,73 @@
> +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;

can you even get values.tzmode from an outside caller?

> +	} else if (values.timezone === 'host') {
> +	    values.tzmode = 'host';

Don't you need to drop `values.timezone` here?

> +	} else {
> +	    values.tzmode = 'select';
> +	}
> +	return me.callParent([values]);
> +    },
> +
> +    onGetValues: function(values) {
> +	var me = this;
> +	var deletes = [];
> +	if (!values.tzmode) {
> +	    deletes.push('timezone');
> +	} else if (values.tzmode === 'host') {
> +	    values.timezone = 'host';
> +	}
> +	delete values.tzmode;
> +	if (deletes.length > 0) {
> +	    values.delete = deletes;
> +	}
> +
> +	return values;
> +    },
> +
> +    items: [
> +	{
> +	    xtype: 'proxmoxKVComboBox',
> +	    name: 'tzmode',
> +	    fieldLabel: gettext('Time zone mode'),
> +	    value: '__default__',
> +	    comboItems: [
> +		['__default__', 'CT managed'],
> +		['host', 'use host settings'],
> +		['select', 'choose from list'],

misses gettext usage. Maybe it /is/ nicer to have a radio button layout,
even if I said otherwise, similar to the VMs CD/DVD drive one.

* gettext('Guest Managed')
* gettext('Same as Host')
* gettext(''): <field>

For such a limited amount of 1st level choice this is nicer, as the user needs
a click less in any case they do not want the pre-selected one.

But not 100% sure, so maybe play around with it and see what is easier to use
from a user POV.

> +	    ],
> +	    listeners: {
> +		change: function(kvcombo, newValue, oldValue, eOpts) {
> +		    var combo = kvcombo.up('form').down('#tzlistcombo');

If, use `let timezoneField'. I want to avoid var if not required (which it really
shouldn't) and also like more telling variable names.

> +		    if (newValue === 'select') {
> +			combo.enable();
> +		    } else if (newValue !== 'select') {
> +			combo.disable();
> +		    }

if, why not just: timezoneField.setDisabled(newValue !== 'select');
reducing 5 to 1 line.

> +		},
> +	    },
> +	},
> +	{
> +	    xtype: 'combobox',
> +	    itemId: 'tzlistcombo',
> +	    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,
> +	},
> +    ],
> +});
>