]> git.proxmox.com Git - proxmox-widget-toolkit.git/blobdiff - src/Utils.js
language selector: increase only picker list view
[proxmox-widget-toolkit.git] / src / Utils.js
index 15baac396dcb01bc5802fac658a2f3c73c6841b3..34c348fde912cfd9de853d69c8d00db9174c4bbd 100644 (file)
@@ -62,35 +62,35 @@ utilities: {
     stateText: gettext('State'),
     groupText: gettext('Group'),
 
-    language_map: {
-       ar: 'Arabic',
-       ca: 'Catalan',
-       zh_CN: 'Chinese (Simplified)',
-       zh_TW: 'Chinese (Traditional)',
-       da: 'Danish',
-       nl: 'Dutch',
-       en: 'English',
-       eu: 'Euskera (Basque)',
-       fr: 'French',
-       de: 'German',
-       he: 'Hebrew',
-       it: 'Italian',
-       ja: 'Japanese',
-       kr: 'Korean',
-       nb: 'Norwegian (Bokmal)',
-       nn: 'Norwegian (Nynorsk)',
-       fa: 'Persian (Farsi)',
-       pl: 'Polish',
-       pt_BR: 'Portuguese (Brazil)',
-       ru: 'Russian',
-       sl: 'Slovenian',
-       es: 'Spanish',
-       sv: 'Swedish',
-       tr: 'Turkish',
+    language_map: { //language map is sorted alphabetically by iso 639-1
+       ar: `العربية - ${gettext("Arabic")}`,
+       ca: `Català - ${gettext("Catalan")}`,
+       da: `Dansk - ${gettext("Danish")}`,
+       de: `Deutsch - ${gettext("German")}`,
+       en: `English - ${gettext("English")}`,
+       es: `Español - ${gettext("Spanish")}`,
+       eu: `Euskera (Basque) - ${gettext("Euskera (Basque)")}`,
+       fa: `فارسی - ${gettext("Persian (Farsi)")}`,
+       fr: `Français - ${gettext("French")}`,
+       he: `עברית - ${gettext("Hebrew")}`,
+       it: `Italiano - ${gettext("Italian")}`,
+       ja: `日本語 - ${gettext("Japanese")}`,
+       kr: `한국어 - ${gettext("Korean")}`,
+       nb: `Bokmål - ${gettext("Norwegian (Bokmal)")}`,
+       nl: `Nederlands - ${gettext("Dutch")}`,
+       nn: `Nynorsk - ${gettext("Norwegian (Nynorsk)")}`,
+       pl: `Polski - ${gettext("Polish")}`,
+       pt_BR: `Português Brasileiro - ${gettext("Portuguese (Brazil)")}`,
+       ru: `Русский - ${gettext("Russian")}`,
+       sl: `Slovenščina - ${gettext("Slovenian")}`,
+       sv: `Svenska - ${gettext("Swedish")}`,
+       tr: `Türkçe - ${gettext("Turkish")}`,
+       zh_CN: `中文(简体)- ${gettext("Chinese (Simplified)")}`,
+       zh_TW: `中文(繁體)- ${gettext("Chinese (Traditional)")}`,
     },
 
     render_language: function(value) {
-       if (!value) {
+       if (!value || value === '__default__') {
            return Proxmox.Utils.defaultText + ' (English)';
        }
        let text = Proxmox.Utils.language_map[value];
@@ -100,6 +100,8 @@ utilities: {
        return value;
     },
 
+    renderEnabledIcon: enabled => `<i class="fa fa-${enabled ? 'check' : 'minus'}"></i>`,
+
     language_array: function() {
        let data = [['__default__', Proxmox.Utils.render_language('')]];
        Ext.Object.each(Proxmox.Utils.language_map, function(key, value) {
@@ -109,6 +111,31 @@ utilities: {
        return data;
     },
 
+    theme_map: {
+       crisp: 'Light theme',
+       "proxmox-dark": 'Proxmox Dark',
+    },
+
+    render_theme: function(value) {
+       if (!value || value === '__default__') {
+           return Proxmox.Utils.defaultText + ' (auto)';
+       }
+       let text = Proxmox.Utils.theme_map[value];
+       if (text) {
+           return text;
+       }
+       return value;
+    },
+
+    theme_array: function() {
+       let data = [['__default__', Proxmox.Utils.render_theme('')]];
+       Ext.Object.each(Proxmox.Utils.theme_map, function(key, value) {
+           data.push([key, Proxmox.Utils.render_theme(value)]);
+       });
+
+       return data;
+    },
+
     bond_mode_gettext_map: {
        '802.3ad': 'LACP (802.3ad)',
        'lacp-balance-slb': 'LACP (balance-slb)',
@@ -306,7 +333,8 @@ utilities: {
        if (Proxmox.LoggedOut) {
            return;
        }
-       Ext.util.Cookies.clear(Proxmox.Setup.auth_cookie_name);
+       // ExtJS clear is basically the same, but browser may complain if any cookie isn't "secure"
+       Ext.util.Cookies.set(Proxmox.Setup.auth_cookie_name, "", new Date(0), null, null, true);
        window.localStorage.removeItem("ProxmoxUser");
     },
 
@@ -395,16 +423,15 @@ utilities: {
        if (!result.success) {
            msg = gettext("Unknown error");
            if (result.message) {
-               msg = result.message;
+               msg = Ext.htmlEncode(result.message);
                if (result.status) {
-                   msg += ' (' + result.status + ')';
+                   msg += ` (${result.status})`;
                }
            }
            if (verbose && Ext.isObject(result.errors)) {
                msg += "<br>";
-               Ext.Object.each(result.errors, function(prop, desc) {
-                   msg += "<br><b>" + Ext.htmlEncode(prop) + "</b>: " +
-                       Ext.htmlEncode(desc);
+               Ext.Object.each(result.errors, (prop, desc) => {
+                   msg += `<br><b>${Ext.htmlEncode(prop)}</b>: ${Ext.htmlEncode(desc)}`;
                });
            }
        }
@@ -418,6 +445,10 @@ utilities: {
            waitMsg: gettext('Please wait...'),
        }, reqOpts);
 
+       // default to enable if user isn't handling the failure already explicitly
+       let autoErrorAlert = reqOpts.autoErrorAlert ??
+           (typeof reqOpts.failure !== 'function' && typeof reqOpts.callback !== 'function');
+
        if (!newopts.url.match(/^\/api2/)) {
            newopts.url = '/api2/extjs' + newopts.url;
        }
@@ -439,6 +470,9 @@ utilities: {
                        response.htmlStatus = Proxmox.Utils.extractRequestError(result, true);
                        Ext.callback(callbackFn, options.scope, [options, false, response]);
                        Ext.callback(failureFn, options.scope, [response, options]);
+                       if (autoErrorAlert) {
+                           Ext.Msg.alert(gettext('Error'), response.htmlStatus);
+                       }
                        return;
                    }
                    Ext.callback(callbackFn, options.scope, [options, true, response]);
@@ -568,7 +602,7 @@ utilities: {
            return;
        }
 
-       let items = container.query('>'); // direct childs
+       let items = container.query('>'); // direct children
        factor = Math.min(factor, items.length);
        container.oldFactor = factor;
 
@@ -1271,6 +1305,107 @@ utilities: {
            .map(val => val.charCodeAt(0)),
        );
     },
+
+    stringToRGB: function(string) {
+       let hash = 0;
+       if (!string) {
+           return hash;
+       }
+       string += 'prox'; // give short strings more variance
+       for (let i = 0; i < string.length; i++) {
+           hash = string.charCodeAt(i) + ((hash << 5) - hash);
+           hash = hash & hash; // to int
+       }
+
+       let alpha = 0.7; // make the color a bit brighter
+       let bg = 255; // assume white background
+
+       return [
+           (hash & 255) * alpha + bg * (1 - alpha),
+           ((hash >> 8) & 255) * alpha + bg * (1 - alpha),
+           ((hash >> 16) & 255) * alpha + bg * (1 - alpha),
+       ];
+    },
+
+    rgbToCss: function(rgb) {
+       return `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
+    },
+
+    rgbToHex: function(rgb) {
+       let r = Math.round(rgb[0]).toString(16);
+       let g = Math.round(rgb[1]).toString(16);
+       let b = Math.round(rgb[2]).toString(16);
+       return `${r}${g}${b}`;
+    },
+
+    hexToRGB: function(hex) {
+       if (!hex) {
+           return undefined;
+       }
+       if (hex.length === 7) {
+           hex = hex.slice(1);
+       }
+       let r = parseInt(hex.slice(0, 2), 16);
+       let g = parseInt(hex.slice(2, 4), 16);
+       let b = parseInt(hex.slice(4, 6), 16);
+       return [r, g, b];
+    },
+
+    // optimized & simplified SAPC function
+    // https://github.com/Myndex/SAPC-APCA
+    getTextContrastClass: function(rgb) {
+           const blkThrs = 0.022;
+           const blkClmp = 1.414;
+
+           // linearize & gamma correction
+           let r = (rgb[0] / 255) ** 2.4;
+           let g = (rgb[1] / 255) ** 2.4;
+           let b = (rgb[2] / 255) ** 2.4;
+
+           // relative luminance sRGB
+           let bg = r * 0.2126729 + g * 0.7151522 + b * 0.0721750;
+
+           // black clamp
+           bg = bg > blkThrs ? bg : bg + (blkThrs - bg) ** blkClmp;
+
+           // SAPC with white text
+           let contrastLight = bg ** 0.65 - 1;
+           // SAPC with black text
+           let contrastDark = bg ** 0.56 - 0.046134502;
+
+           if (Math.abs(contrastLight) >= Math.abs(contrastDark)) {
+               return 'light';
+           } else {
+               return 'dark';
+           }
+    },
+
+    getTagElement: function(string, color_overrides) {
+       let rgb = color_overrides?.[string] || Proxmox.Utils.stringToRGB(string);
+       let style = `background-color: ${Proxmox.Utils.rgbToCss(rgb)};`;
+       let cls;
+       if (rgb.length > 3) {
+           style += `color: ${Proxmox.Utils.rgbToCss([rgb[3], rgb[4], rgb[5]])}`;
+           cls = "proxmox-tag-dark";
+       } else {
+           let txtCls = Proxmox.Utils.getTextContrastClass(rgb);
+           cls = `proxmox-tag-${txtCls}`;
+       }
+       return `<span class="${cls}" style="${style}">${string}</span>`;
+    },
+
+    // Setting filename here when downloading from a remote url sometimes fails in chromium browsers
+    // because of a bug when using attribute download in conjunction with a self signed certificate.
+    // For more info see https://bugs.chromium.org/p/chromium/issues/detail?id=993362
+    downloadAsFile: function(source, fileName) {
+       let hiddenElement = document.createElement('a');
+       hiddenElement.href = source;
+       hiddenElement.target = '_blank';
+       if (fileName) {
+           hiddenElement.download = fileName;
+       }
+       hiddenElement.click();
+    },
 },
 
     singleton: true,
@@ -1314,6 +1449,8 @@ utilities: {
        me.DnsName_match = new RegExp("^" + DnsName_REGEXP + "$");
        me.DnsName_or_Wildcard_match = new RegExp("^(?:\\*\\.)?" + DnsName_REGEXP + "$");
 
+       me.CpuSet_match = /^[0-9]+(?:-[0-9]+)?(?:,[0-9]+(?:-[0-9]+)?)*$/;
+
        me.HostPort_match = new RegExp("^(" + IPV4_REGEXP + "|" + DnsName_REGEXP + ")(?::(\\d+))?$");
        me.HostPortBrackets_match = new RegExp("^\\[(" + IPV6_REGEXP + "|" + IPV4_REGEXP + "|" + DnsName_REGEXP + ")\\](?::(\\d+))?$");
        me.IP6_dotnotation_match = new RegExp("^(" + IPV6_REGEXP + ")(?:\\.(\\d+))?$");
@@ -1326,7 +1463,7 @@ Ext.define('Proxmox.Async', {
     singleton: true,
 
     // Returns a Promise resolving to the result of an `API2Request` or rejecting to the error
-    // repsonse on failure
+    // response on failure
     api2: function(reqOpts) {
        return new Promise((resolve, reject) => {
            delete reqOpts.callback; // not allowed in this api
@@ -1341,3 +1478,18 @@ Ext.define('Proxmox.Async', {
        return new Promise((resolve, _reject) => setTimeout(resolve, millis));
     },
 });
+
+Ext.override(Ext.data.Store, {
+    // If the store's proxy is changed while it is waiting for an AJAX
+    // response, `onProxyLoad` will still be called for the outdated response.
+    // To avoid displaying inconsistent information, only process responses
+    // belonging to the current proxy.
+    onProxyLoad: function(operation) {
+       let me = this;
+       if (operation.getProxy() === me.getProxy()) {
+           me.callParent(arguments);
+       } else {
+           console.log(`ignored outdated response: ${operation.getRequest().getUrl()}`);
+       }
+    },
+});