[PATCH V3] [Wok 0/7] Multi-Culture Support Changes
From: Archana Singh <archus@linux.vnet.ibm.com> V3 patches for muti-culture support which includes formatting of date, time, datetime, number and addition dropdown to select locale in login page. Also handle the command modificationis suggested. Archana Singh (7): Multi-Culture Support - Add a separate drop down list for locale Multi-Culture support - Add methods to get and set locales in wok.lang.js Multi-Culture support - Add locale in format settings in wok.line-chart.js Multi-Culture support : Added support for converters in widget wok.list.js Multi-Culture support : Implement new drop down list for locale in wok.login.js Multi-Culture support : Modify util to include formatting based on locale Multi-Culture support : Added support to add converters to bootgrid ui/js/src/wok.lang.js | 16 +++++++++++++ ui/js/src/wok.line-chart.js | 3 ++- ui/js/src/wok.list.js | 12 +++++++++- ui/js/src/wok.login.js | 15 ++++++++++-- ui/js/src/wok.utils.js | 46 +++++++++++++++++++++++++++++++++++-- ui/js/wok.bootgrid.js | 8 ++++--- ui/js/wok.user-log.js | 8 +++---- ui/pages/login.html.tmpl | 56 ++++++++++++++++++++++++++++++++++----------- 8 files changed, 138 insertions(+), 26 deletions(-) -- 1.8.3.1
From: Archana Singh <archus@linux.vnet.ibm.com> This patch adds another drop down list for user locale selection. The list includes the 11 languages supported in UI plus a few extra languages for now (This will be extended later). Signed-off-by: Archana Singh <archus@linux.vnet.ibm.com> co-authored by: Pooja Kulkarni <pkulkark@linux.vnet.ibm.com> --- ui/pages/login.html.tmpl | 56 +++++++++++++++++++++++++++++++++++++----------- 1 file changed, 43 insertions(+), 13 deletions(-) diff --git a/ui/pages/login.html.tmpl b/ui/pages/login.html.tmpl index 411874b..52b81fd 100644 --- a/ui/pages/login.html.tmpl +++ b/ui/pages/login.html.tmpl @@ -119,19 +119,49 @@ <span id="logging" style="display: none;">$_("Logging in...")</span> </button> </div> - <select id="userLang" class="selectpicker col-md-12 col-lg-12"> - <option value="en_US">English (US)</option> - <option value="zh_CN">中文（简体）</option> - <option value="pt_BR">Português (Brasil)</option> - <option value="de_DE">Deutsch (Deutschland)</option> - <option value="es_ES">Español (España)</option> - <option value="fr_FR">Français (France)</option> - <option value="it_IT">Italiano (Italia)</option> - <option value="ja_JP">日本語 (日本)</option> - <option value="ko_KR">한국어 (대한민국)</option> - <option value="ru_RU">Русский (Россия)</option> - <option value="zh_TW">中文（繁體）</option> - </select> + <div class="form-group"> + <label for="userLang">$_("Language")</label> + <select id="userLang" class="selectpicker col-md-12 col-lg-12"> + <option value="en_US">English (US)</option> + <option value="zh_CN">中文（简体）</option> + <option value="pt_BR">Português (Brasil)</option> + <option value="de_DE">Deutsch (Deutschland)</option> + <option value="es_ES">Español (España)</option> + <option value="fr_FR">Français (France)</option> + <option value="it_IT">Italiano (Italia)</option> + <option value="ja_JP">日本語 (日本)</option> + <option value="ko_KR">한국어 (대한민국)</option> + <option value="ru_RU">Русский (Россия)</option> + <option value="zh_TW">中文（繁體）</option> + </select> + </div> + <div class="form-group"> + <label for="userLocale">$_("Locale")</label> + <select id="userLocale" class="selectpicker col-md-12 col-lg-12"> + <option value="af-NA">Afrikaans (Namibia)</option> + <option value="ar-DZ">Arabic (Algeria)</option> + <option value="az-AZ">Azerbaijani (Azerbaijan)</option> + <option value="en-US">English (US)</option> + <option value="hy-AM">Armenian (Armenia)</option> + <option value="hi-IN">Hindi (India)</option> + <option value="nl-BE">Dutch (Belgium)</option> + <option value="ms-MY">Malay (Malaysia)</option> + <option value="no-NO">Norwegian (Norway)</option> + <option value="sq-AL">Albanian (Albania)</option> + <option value="sv-SE">Swedish (Sweden)</option> + <option value="uz-UZ">Uzbek (Uzbekistan)</option> + <option value="zh-CN">中文（简体）</option> + <option value="pt-BR">Português (Brasil)</option> + <option value="de-DE">Deutsch (Deutschland)</option> + <option value="es-ES">Español (España)</option> + <option value="fr-FR">Français (France)</option> + <option value="it-IT">Italiano (Italia)</option> + <option value="ja-JP">日本語 (日本)</option> + <option value="ko-KR">한국어 (대한민국)</option> + <option value="ru-RU">Русский (Россия)</option> + <option value="zh-TW">中文（繁體）</option> + </select> + </div> </form> </div> <div class="row"> -- 1.8.3.1
From: Archana Singh <archus@linux.vnet.ibm.com> This patch adds getter and setter methods to 1) get locale the locale from cookies (if present) otherwise get it from bowser lang(if present) otherwise return as en-US 2) set locale Signed-off-by: Archana Singh <archus@linux.vnet.ibm.com> co-authored by: Pooja Kulkarni <pkulkark@linux.vnet.ibm.com> --- ui/js/src/wok.lang.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/ui/js/src/wok.lang.js b/ui/js/src/wok.lang.js index b3791e7..4e2065b 100644 --- a/ui/js/src/wok.lang.js +++ b/ui/js/src/wok.lang.js @@ -45,6 +45,22 @@ wok.lang = { $('html').prop('lang') || 'en_US'; }, + + /** + * Locale is determined by the following sequence: + * 1) Cookie setting; or if not set -> + * 2) HTML DOM lang attribute; or if not set -> + * 3) DEFAULT (en_US). + */ + get_locale: function() { + return wok.cookie.get('wokLocale') || + $('html').prop('lang') || + 'en-US'; + }, + + set_locale: function(selected_locale) { + wok.cookie.set('wokLocale', selected_locale, 365); + }, set: function(lang) { wok.cookie.set('wokLang', lang, 365); -- 1.8.3.1
From: Pooja Kulkarni <pkulkark@linux.vnet.ibm.com> co-authored by: Archana Singh <archus@linux.vnet.ibm.com> This patch includes the locale in format setting for line-chart widget. Signed-off-by: Pooja Kulkarni <pkulkark@linux.vnet.ibm.com> --- ui/js/src/wok.line-chart.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/ui/js/src/wok.line-chart.js b/ui/js/src/wok.line-chart.js index e0113f3..12744af 100644 --- a/ui/js/src/wok.line-chart.js +++ b/ui/js/src/wok.line-chart.js @@ -79,7 +79,8 @@ wok.widget.LineChart = function(params) { formatSettings = { base: series['base'], unit: series['unit'], - fixed: series['fixed'] + fixed: series['fixed'], + locale: series['locale'] }; } }); -- 1.8.3.1
From: Archana Singh <archus@linux.vnet.ibm.com> Added support to have converters in wok.list.js widget. To use widgets opts should have converters(list of converters should have to) and field which needs to use the defined converters it should have e.g. new wok.widget.List({ .. converters: { "date-locale-converter": { to: function(value) { var dte = new Date(value); var options = { year: 'numeric', month: 'long', day: 'numeric' }; return dte.toLocaleDateString(wok.lang.get_locale(), options); } }, "time-locale-converter": { to: function(time) { var dte = new Date((new Date(0)).toDateString()+' ' + time); return dte.toLocaleTimeString(wok.lang.get_locale()); } } } .. fields: [{ name: .. converters: "date-locale-converter" .. }], .. .. }); Signed-off-by: Archana Singh <archus@linux.vnet.ibm.com> --- ui/js/src/wok.list.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/ui/js/src/wok.list.js b/ui/js/src/wok.list.js index f40b2e2..3b3055e 100644 --- a/ui/js/src/wok.list.js +++ b/ui/js/src/wok.list.js @@ -111,6 +111,7 @@ wok.widget.List.prototype = (function() { var fillBody = function(container, fields) { var data = this.data; + var converters = this.opts.converters; var tbody = ($('ul', container).length && $('ul', container)) || $('<ul></ul>').appendTo(container); tbody.empty(); if (typeof data !== 'undefined' && data.length > 0) { @@ -123,6 +124,15 @@ wok.widget.List.prototype = (function() { var checkboxName = $('ul', container).parent().parent().parent().attr('id') + '-check' || $(container).parent().parent().parent().attr('id') + '-check'; $.each(fields, function(fi, field) { var value = getValue(field.name, row); + if(field.converter){ + var converter = field.converter; + if(converters[converter]){ + var to = converters[converter]['to']; + value = to(value); + }else{ + console.error('converter ' + converters[converter] + ' not defined'); + } + } if (field.type === 'status' && field.name === 'enabled') { styleClass = (value === true ? '' : ' disabled'); state = [ @@ -299,4 +309,4 @@ wok.widget.List.prototype = (function() { reload: reload, showMessage: showMessage }; -})(); \ No newline at end of file +})(); -- 1.8.3.1
From: Archana Singh <archus@linux.vnet.ibm.com> Sets select lang and locale selected in login page. Signed-off-by: Archana Singh <archus@linux.vnet.ibm.com> co-authored by: Pooja Kulkarni <pkulkark@linux.vnet.ibm.com> --- ui/js/src/wok.login.js | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/ui/js/src/wok.login.js b/ui/js/src/wok.login.js index f8eed3a..7423f81 100644 --- a/ui/js/src/wok.login.js +++ b/ui/js/src/wok.login.js @@ -22,14 +22,25 @@ wok.login_main = function() { var selectedLanguage = wok.lang.get(); $('#userLang').val(selectedLanguage); $('#userLang option[value="'+selectedLanguage+'"]').attr("selected", "selected"); - $('.filter-option').parent().attr('title',$('#userLang option[value="'+selectedLanguage+'"]').text()); - $('.filter-option').text($('#userLang option[value="'+selectedLanguage+'"]').text()); + $('.filter-option:first').parent().attr('title',$('#userLang option[value="'+selectedLanguage+'"]').text()); + $('.filter-option:first').text($('#userLang option[value="'+selectedLanguage+'"]').text()); + + var selectedLocale = wok.lang.get_locale(); + $('#userLocale').val(selectedLocale); + $('#userLocale option[value="'+selectedLocale+'"]').attr("selected", "selected"); + $('.filter-option:last').parent().attr('title',$('#userLocale option[value="'+selectedLocale+'"]').text()); + $('.filter-option:last').text($('#userLocale option[value="'+selectedLocale+'"]').text()); + $('#userLang').on('change', function() { wok.lang.set($(this).val()); location.reload(); }); + $('#userLocale').on('change', function() { + wok.lang.set_locale($(this).val()); + }); + var query = window.location.search; var error = /.*error=(.*?)(&|$)/g.exec(query); if (error && error[1] === "sessionTimeout") { -- 1.8.3.1
From: Archana Singh <archus@linux.vnet.ibm.com> 1) Modified format method format as per locale passed 2) Added converters and methods to format date,time,datetime as per locale Signed-off-by: Archana Singh <archus@linux.vnet.ibm.com> co-authored by: Pooja Kulkarni <pkulkark@linux.vnet.ibm.com> --- ui/js/src/wok.utils.js | 46 ++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 44 insertions(+), 2 deletions(-) diff --git a/ui/js/src/wok.utils.js b/ui/js/src/wok.utils.js index 214749a..65084c4 100644 --- a/ui/js/src/wok.utils.js +++ b/ui/js/src/wok.utils.js @@ -140,6 +140,7 @@ wok.changetoProperUnit = function(numOrg, digits, base) { return new Formatted(number, unit); } + var n_locale = settings['locale'] || null; var fixed = settings['fixed']; var unitMapping = unitBaseMapping[base]; @@ -153,11 +154,14 @@ wok.changetoProperUnit = function(numOrg, digits, base) { var formatted = number / startingValue; formatted = fixed ? formatted.toFixed(fixed) : formatted; - + formatted = n_locale ? Number(formatted).toLocaleString(n_locale) : Number(formatted).toLocaleString() return new Formatted(formatted, suffix + unit); } - return new Formatted(fixed ? number.toFixed(fixed) : number, unit); + formatted = fixed ? number.toFixed(fixed) : number; + /* format the formatted number as per settings's locale, if not present format it with default locale. */ + formatted_locale = n_locale ? Number(formatted).toLocaleString(n_locale) : Number(formatted).toLocaleString() + return new Formatted(formatted_locale, unit); }; wok.formatMeasurement = format; @@ -212,3 +216,41 @@ wok.notificationsLoop = function notificationsLoop() { } ); } + +wok.datetimeLocaleConverter = function datetimeLocaleConverter(datetime_string, locale){ + var dte = new Date(datetime_string.substr(0,10)+'T'+datetime_string.substr(11)); + var options = { year: 'numeric', month: 'long', day: 'numeric' }; + return dte.toLocaleString(locale, options); +} + + +wok.dateLocaleConverter = function dateLocaleConverter(date_string, locale){ + var dte = new Date(date_string); + var options = { year: 'numeric', month: 'long', day: 'numeric' }; + return dte.toLocaleDateString(locale, options); +} + + +wok.timeLocaleConverter = function timeLocaleConverter(time_string, locale){ + var dte = new Date((new Date(0)).toDateString()+' ' + time_string); + return dte.toLocaleTimeString(locale); +} + + +wok.dateTimeLocaleConverters = { + "date-locale-converter": { + to: function(date){ + return wok.dateLocaleConverter(date, wok.lang.get_locale()); + } + }, + "time-locale-converter": { + to: function(time){ + return wok.timeLocaleConverter(time, wok.lang.get_locale()); + } + }, + "datetime-locale-converter": { + to: function(datetime){ + return wok.datetimeLocaleConverter(datetime, wok.lang.get_locale()); + } + } + } -- 1.8.3.1
From: Archana Singh <archus@linux.vnet.ibm.com> Added support to have converters added as and when required in bootgrid Signed-off-by: Archana Singh <archus@linux.vnet.ibm.com> co-authored by: Pooja Kulkarni <pkulkark@linux.vnet.ibm.com> --- ui/js/wok.bootgrid.js | 8 +++++--- ui/js/wok.user-log.js | 8 ++++---- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/ui/js/wok.bootgrid.js b/ui/js/wok.bootgrid.js index 1312fe5..c4082dd 100644 --- a/ui/js/wok.bootgrid.js +++ b/ui/js/wok.bootgrid.js @@ -23,6 +23,7 @@ wok.createBootgrid = function(opts) { var fields = JSON.parse(opts['gridFields']); var selection = ('selection' in opts) ? opts['selection'] : true; var navigation = ('navigation' in opts) ? opts['navigation'] : 3; + var converters = ('converters' in opts) ? opts['converters'] : ''; var gridMessage = ('loadingMessage' in opts && opts['loadingMessage'].trim() && opts['loadingMessage'].length > 0) ? opts['loadingMessage'] : i18n['WOKSETT0011M']; var gridloadingHtml = ['<div id="' + gridId + '-loading" class="wok-list-mask">', @@ -49,7 +50,7 @@ wok.createBootgrid = function(opts) { for (var i = 0; i < fields.length; i++) { var columnHtml = [ - '<th data-type="', fields[i]["type"], '" data-column-id="', fields[i]["column-id"], '"', (fields[i].identifier) ? 'data-identifier="true"' : '', ("header-class" in fields[i]) ? 'data-header-css-class="gridHeader ' + fields[i]["header-class"] + '"' : 'gridHeader', ("data-class" in fields[i]) ? ' data-align="' + fields[i]["data-class"] + '"' + ' headerAlign="center"' : ' data-align="left" headerAlign="center"', ("formatter" in fields[i]) ? 'data-formatter=' + fields[i]["formatter"] : '', (fields[i].width) ? (' data-width="' + fields[i].width + '"') : '', + '<th data-type="', fields[i]["type"], '" data-column-id="', fields[i]["column-id"], '"', (fields[i].identifier) ? 'data-identifier="true"' : '', ("header-class" in fields[i]) ? 'data-header-css-class="gridHeader ' + fields[i]["header-class"] + '"' : 'gridHeader', ("data-class" in fields[i]) ? ' data-align="' + fields[i]["data-class"] + '"' + ' headerAlign="center"' : ' data-align="left" headerAlign="center"', ("formatter" in fields[i]) ? 'data-formatter=' + fields[i]["formatter"] : '', (fields[i].width) ? (' data-width="' + fields[i].width + '"') : '', ("converter" in fields[i]) ? 'data-converter=' + fields[i]["converter"] : '', '>', ("title" in fields[i]) ? fields[i]["title"] : fields[i]["column-id"], '</th>' ].join(''); @@ -72,8 +73,9 @@ wok.createBootgrid = function(opts) { }, "settings-user-log-message": function(column, row) { return '<span class="trim" data-toggle="tooltip" data-placement="auto bottom" title="'+row.message+'">' +row.message+ '</span> '; - } + }, }, + converters: converters, css: { iconDown: "fa fa-sort-desc", iconUp: "fa fa-sort-asc", @@ -138,4 +140,4 @@ wok.showBootgridData = function(opts) { wok.hideBootgridData = function(opts) { $("#" + opts['gridId'] + " tbody").hide(); -}; \ No newline at end of file +}; diff --git a/ui/js/wok.user-log.js b/ui/js/wok.user-log.js index 8c2b4a7..ad90687 100644 --- a/ui/js/wok.user-log.js +++ b/ui/js/wok.user-log.js @@ -88,13 +88,12 @@ wok.listUserLogConfig = function() { "title": i18n['WOKSETT0003M'] }, { "column-id": 'date', - "formatter": "settings-user-log-date", - "converter": 'string', + "converter": 'date-locale-converter', "order": 'desc', "title": i18n['WOKSETT0004M'] }, { "column-id": 'time', - "converter": 'string', + "converter": 'time-locale-converter', "order": 'desc', "title": i18n['WOKSETT0005M'] }, @@ -109,6 +108,7 @@ wok.listUserLogConfig = function() { ]; wok.opts_user_log['gridFields'] = JSON.stringify(gridFields); + wok.opts_user_log['converters'] = wok.dateTimeLocaleConverters; ulGrid = wok.createBootgrid(wok.opts_user_log); wok.hideBootgridLoading(wok.opts_user_log); @@ -243,4 +243,4 @@ wok.initUserLogWindow = function() { }); $('#form-advanced-search').submit(); }); -}; \ No newline at end of file +}; -- 1.8.3.1
Reviewed-by: Aline Manera <alinefm@linux.vnet.ibm.com> On 05/10/2016 05:58 PM, archus@linux.vnet.ibm.com wrote:
From: Archana Singh <archus@linux.vnet.ibm.com>
V3 patches for muti-culture support which includes formatting of date, time, datetime, number and addition dropdown to select locale in login page. Also handle the command modificationis suggested.
Archana Singh (7): Multi-Culture Support - Add a separate drop down list for locale Multi-Culture support - Add methods to get and set locales in wok.lang.js Multi-Culture support - Add locale in format settings in wok.line-chart.js Multi-Culture support : Added support for converters in widget wok.list.js Multi-Culture support : Implement new drop down list for locale in wok.login.js Multi-Culture support : Modify util to include formatting based on locale Multi-Culture support : Added support to add converters to bootgrid
ui/js/src/wok.lang.js | 16 +++++++++++++ ui/js/src/wok.line-chart.js | 3 ++- ui/js/src/wok.list.js | 12 +++++++++- ui/js/src/wok.login.js | 15 ++++++++++-- ui/js/src/wok.utils.js | 46 +++++++++++++++++++++++++++++++++++-- ui/js/wok.bootgrid.js | 8 ++++--- ui/js/wok.user-log.js | 8 +++---- ui/pages/login.html.tmpl | 56 ++++++++++++++++++++++++++++++++++----------- 8 files changed, 138 insertions(+), 26 deletions(-)
Reviewed-by: Chandra Shekhar Reddy Potula <chandra@linux.vnet.ibm.com> On 5/11/16 2:28 AM, archus@linux.vnet.ibm.com wrote:
From: Archana Singh <archus@linux.vnet.ibm.com>
V3 patches for muti-culture support which includes formatting of date, time, datetime, number and addition dropdown to select locale in login page. Also handle the command modificationis suggested.
Archana Singh (7): Multi-Culture Support - Add a separate drop down list for locale Multi-Culture support - Add methods to get and set locales in wok.lang.js Multi-Culture support - Add locale in format settings in wok.line-chart.js Multi-Culture support : Added support for converters in widget wok.list.js Multi-Culture support : Implement new drop down list for locale in wok.login.js Multi-Culture support : Modify util to include formatting based on locale Multi-Culture support : Added support to add converters to bootgrid
ui/js/src/wok.lang.js | 16 +++++++++++++ ui/js/src/wok.line-chart.js | 3 ++- ui/js/src/wok.list.js | 12 +++++++++- ui/js/src/wok.login.js | 15 ++++++++++-- ui/js/src/wok.utils.js | 46 +++++++++++++++++++++++++++++++++++-- ui/js/wok.bootgrid.js | 8 ++++--- ui/js/wok.user-log.js | 8 +++---- ui/pages/login.html.tmpl | 56 ++++++++++++++++++++++++++++++++++----------- 8 files changed, 138 insertions(+), 26 deletions(-)
participants (3)
-
Aline Manera -
archus＠linux.vnet.ibm.com -
Chandra Shekhar Reddy Potula