all lists on lists.proxmox.com
 help / color / mirror / Atom feed
From: Dominik Csapak <d.csapak@proxmox.com>
To: pmg-devel@lists.proxmox.com
Subject: [pmg-devel] [PATCH pmg-gui 3/3] add Settings window
Date: Tue, 13 Jul 2021 12:26:59 +0200	[thread overview]
Message-ID: <20210713102659.3004291-3-d.csapak@proxmox.com> (raw)
In-Reply-To: <20210713102659.3004291-1-d.csapak@proxmox.com>

copied from pbs and changed PBS to PMG

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 js/MainView.js |   5 +
 js/Makefile    |   1 +
 js/Settings.js | 293 +++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 299 insertions(+)
 create mode 100644 js/Settings.js

diff --git a/js/MainView.js b/js/MainView.js
index 4c4f28c..311b8c7 100644
--- a/js/MainView.js
+++ b/js/MainView.js
@@ -203,6 +203,11 @@ Ext.define('PMG.MainView', {
 		    margin: '0 5 0 0',
 		    iconCls: 'fa fa-user',
 		    menu: [
+			{
+			    iconCls: 'fa fa-gear',
+			    text: gettext('My Settings'),
+			    handler: () => Ext.create('PMG.window.Settings').show(),
+			},
 			{
 			    iconCls: 'fa fa-language',
 			    text: gettext('Language'),
diff --git a/js/Makefile b/js/Makefile
index 43d3ad8..165436b 100644
--- a/js/Makefile
+++ b/js/Makefile
@@ -92,6 +92,7 @@ JSSRC=							\
 	HourlyMailDistribution.js			\
 	SpamContextMenu.js				\
 	Certificates.js					\
+	Settings.js					\
 	Application.js
 
 OnlineHelpInfo.js: /usr/bin/asciidoc-pmg
diff --git a/js/Settings.js b/js/Settings.js
new file mode 100644
index 0000000..4e9fe8d
--- /dev/null
+++ b/js/Settings.js
@@ -0,0 +1,293 @@
+Ext.define('PMG.window.Settings', {
+    extend: 'Ext.window.Window',
+
+    width: '800px',
+    title: gettext('My Settings'),
+    iconCls: 'fa fa-gear',
+    modal: true,
+    bodyPadding: 10,
+    resizable: false,
+
+    buttons: [
+	'->',
+	{
+	    text: gettext('Close'),
+	    handler: function() {
+		this.up('window').close();
+	    },
+	},
+    ],
+
+    layout: 'hbox',
+
+    controller: {
+	xclass: 'Ext.app.ViewController',
+
+	init: function(view) {
+	    let me = this;
+	    let sp = Ext.state.Manager.getProvider();
+
+	    let username = sp.get('login-username') || Proxmox.Utils.noneText;
+	    me.lookupReference('savedUserName').setValue(Ext.String.htmlEncode(username));
+
+	    let summarycolumns = sp.get('summarycolumns', 'auto');
+	    me.lookup('summarycolumns').setValue(summarycolumns);
+
+	    let settings = ['fontSize', 'fontFamily', 'letterSpacing', 'lineHeight'];
+	    settings.forEach(function(setting) {
+		let val = localStorage.getItem('pve-xterm-' + setting);
+		if (val !== undefined && val !== null) {
+		    let field = me.lookup(setting);
+		    field.setValue(val);
+		    field.resetOriginalValue();
+		}
+	    });
+	},
+
+	set_button_status: function() {
+	    let me = this;
+
+	    let form = me.lookup('xtermform');
+	    let valid = form.isValid();
+	    let dirty = form.isDirty();
+
+	    let hasvalues = false;
+	    let values = form.getValues();
+	    Ext.Object.eachValue(values, function(value) {
+		if (value) {
+		    hasvalues = true;
+		    return false;
+		}
+		return true;
+	    });
+
+	    me.lookup('xtermsave').setDisabled(!dirty || !valid);
+	    me.lookup('xtermreset').setDisabled(!hasvalues);
+	},
+
+	control: {
+	    '#xtermjs form': {
+		dirtychange: 'set_button_status',
+		validitychange: 'set_button_status',
+	    },
+	    '#xtermjs button': {
+		click: function(button) {
+		    let me = this;
+		    let settings = ['fontSize', 'fontFamily', 'letterSpacing', 'lineHeight'];
+		    settings.forEach(function(setting) {
+			let field = me.lookup(setting);
+			if (button.reference === 'xtermsave') {
+			    let value = field.getValue();
+			    if (value) {
+				localStorage.setItem('pve-xterm-' + setting, value);
+			    } else {
+				localStorage.removeItem('pve-xterm-' + setting);
+			    }
+			} else if (button.reference === 'xtermreset') {
+			    field.setValue(undefined);
+			    localStorage.removeItem('pve-xterm-' + setting);
+			}
+			field.resetOriginalValue();
+		    });
+		    me.set_button_status();
+		},
+	    },
+	    'button[name=reset]': {
+		click: function() {
+		    let blacklist = ['login-username'];
+		    let sp = Ext.state.Manager.getProvider();
+		    for (const state of Object.values(sp.state)) {
+			if (blacklist.indexOf(state) !== -1) {
+			    continue;
+			}
+
+			sp.clear(state);
+		    }
+
+		    window.location.reload();
+		},
+	    },
+	    'button[name=clear-username]': {
+		click: function() {
+		    let me = this;
+		    let usernamefield = me.lookupReference('savedUserName');
+		    let sp = Ext.state.Manager.getProvider();
+
+		    usernamefield.setValue(Proxmox.Utils.noneText);
+		    sp.clear('login-username');
+		},
+	    },
+	    'field[reference=summarycolumns]': {
+		change: function(el, newValue) {
+		    var sp = Ext.state.Manager.getProvider();
+		    sp.set('summarycolumns', newValue);
+		},
+	    },
+	},
+    },
+
+    items: [{
+	xtype: 'fieldset',
+	flex: 1,
+	title: gettext('Webinterface Settings'),
+	margin: '5',
+	layout: {
+	    type: 'vbox',
+	    align: 'left',
+	},
+	defaults: {
+	    width: '100%',
+	    margin: '0 0 10 0',
+	},
+	items: [
+	    {
+		xtype: 'container',
+		layout: 'hbox',
+		items: [
+		    {
+			xtype: 'displayfield',
+			fieldLabel: gettext('Saved User Name') + ':',
+			labelWidth: 150,
+			stateId: 'login-username',
+			reference: 'savedUserName',
+			flex: 1,
+			value: '',
+		    },
+		    {
+			xtype: 'button',
+			cls: 'x-btn-default-toolbar-small proxmox-inline-button',
+			text: gettext('Reset'),
+			name: 'clear-username',
+		    },
+		],
+	    },
+	    {
+		xtype: 'box',
+		autoEl: { tag: 'hr' },
+	    },
+	    {
+		xtype: 'container',
+		layout: 'hbox',
+		items: [
+		    {
+			xtype: 'displayfield',
+			fieldLabel: gettext('Layout') + ':',
+			flex: 1,
+		    },
+		    {
+			xtype: 'button',
+			cls: 'x-btn-default-toolbar-small proxmox-inline-button',
+			text: gettext('Reset'),
+			tooltip: gettext('Reset all layout changes (for example, column widths)'),
+			name: 'reset',
+		    },
+		],
+	    },
+	    {
+		xtype: 'box',
+		autoEl: { tag: 'hr' },
+	    },
+	    {
+		xtype: 'proxmoxKVComboBox',
+		fieldLabel: gettext('Summary/Dashboard columns') + ':',
+		labelWidth: 150,
+		stateId: 'summarycolumns',
+		reference: 'summarycolumns',
+		comboItems: [
+		    ['auto', 'auto'],
+		    ['1', '1'],
+		    ['2', '2'],
+		    ['3', '3'],
+		],
+	    },
+	],
+    },
+    {
+	xtype: 'container',
+	layout: 'vbox',
+	flex: 1,
+	margin: '5',
+	defaults: {
+	    width: '100%',
+	    // right margin ensures that the right border of the fieldsets
+	    // is shown
+	    margin: '0 2 10 0',
+	},
+	items: [
+	    {
+		xtype: 'fieldset',
+		itemId: 'xtermjs',
+		title: gettext('xterm.js Settings'),
+		items: [{
+		    xtype: 'form',
+		    reference: 'xtermform',
+		    border: false,
+		    layout: {
+			type: 'vbox',
+			algin: 'left',
+		    },
+		    defaults: {
+			width: '100%',
+			margin: '0 0 10 0',
+		    },
+		    items: [
+			{
+			    xtype: 'textfield',
+			    name: 'fontFamily',
+			    reference: 'fontFamily',
+			    emptyText: Proxmox.Utils.defaultText,
+			    fieldLabel: gettext('Font-Family'),
+			},
+			{
+			    xtype: 'proxmoxintegerfield',
+			    emptyText: Proxmox.Utils.defaultText,
+			    name: 'fontSize',
+			    reference: 'fontSize',
+			    minValue: 1,
+			    fieldLabel: gettext('Font-Size'),
+			},
+			{
+			    xtype: 'numberfield',
+			    name: 'letterSpacing',
+			    reference: 'letterSpacing',
+			    emptyText: Proxmox.Utils.defaultText,
+			    fieldLabel: gettext('Letter Spacing'),
+			},
+			{
+			    xtype: 'numberfield',
+			    name: 'lineHeight',
+			    minValue: 0.1,
+			    reference: 'lineHeight',
+			    emptyText: Proxmox.Utils.defaultText,
+			    fieldLabel: gettext('Line Height'),
+			},
+			{
+			    xtype: 'container',
+			    layout: {
+				type: 'hbox',
+				pack: 'end',
+			    },
+			    defaults: {
+				margin: '0 0 0 5',
+			    },
+			    items: [
+				{
+				    xtype: 'button',
+				    reference: 'xtermreset',
+				    disabled: true,
+				    text: gettext('Reset'),
+				},
+				{
+				    xtype: 'button',
+				    reference: 'xtermsave',
+				    disabled: true,
+				    text: gettext('Save'),
+				},
+			    ],
+			},
+		    ],
+		}],
+	    },
+	],
+    }],
+});
-- 
2.30.2





  parent reply	other threads:[~2021-07-13 10:27 UTC|newest]

Thread overview: 4+ messages / expand[flat|nested]  mbox.gz  Atom feed  top
2021-07-13 10:26 [pmg-devel] [PATCH pmg-gui 1/3] LoginView: add save username checkbox Dominik Csapak
2021-07-13 10:26 ` [pmg-devel] [PATCH pmg-gui 2/3] ServerStatus: update column width on state change Dominik Csapak
2021-07-13 10:26 ` Dominik Csapak [this message]
2021-07-13 12:31 ` [pmg-devel] applied-series: [PATCH pmg-gui 1/3] LoginView: add save username checkbox Thomas Lamprecht

Reply instructions:

You may reply publicly to this message via plain-text email
using any one of the following methods:

* Save the following mbox file, import it into your mail client,
  and reply-to-all from there: mbox

  Avoid top-posting and favor interleaved quoting:
  https://en.wikipedia.org/wiki/Posting_style#Interleaved_style

* Reply using the --to, --cc, and --in-reply-to
  switches of git-send-email(1):

  git send-email \
    --in-reply-to=20210713102659.3004291-3-d.csapak@proxmox.com \
    --to=d.csapak@proxmox.com \
    --cc=pmg-devel@lists.proxmox.com \
    /path/to/YOUR_REPLY

  https://kernel.org/pub/software/scm/git/docs/git-send-email.html

* If your mail client supports setting the In-Reply-To header
  via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line before the message body.
This is an external index of several public inboxes,
see mirroring instructions on how to clone and mirror
all data and code used by this external index.
Service provided by Proxmox Server Solutions GmbH | Privacy | Legal