* Re: [pve-devel] [PATCH widget-toolkit 2/4] add TimezonePanel for containers
[not found] ` <20200702124914.824124-3-o.bektas@proxmox.com>
@ 2020-08-11 12:05 ` Dominik Csapak
0 siblings, 0 replies; 2+ messages in thread
From: Dominik Csapak @ 2020-08-11 12:05 UTC (permalink / raw)
To: pve-devel
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();
> + },
> +});
>
^ permalink raw reply [flat|nested] 2+ messages in thread