languages menu example English and Arabic

www/app/controllers/application.js

@@ -1,4 +1,6 @@
-import Ember from 'ember';
+
+import { computed } from '@ember/object';
+import $ from 'jquery';
 import config from '../config/environment';
 
 export default Ember.Controller.extend({
@@ -103,5 +105,23 @@ export default Ember.Controller.extend({
       var epochOffset = (60000 - (this.getWithDefault('height', 1) % 30000)) * 1000 * this.get('blockTime');
       return Date.now() + epochOffset;
     }
+  }),
+  languages: computed('model', {
+    get() {
+      return this.get('model.languages');
+    }
+  }),
+
+  selectedLanguage: computed({
+    get() {
+      var langs = this.get('languages');
+      var lang = $.cookie('lang');
+      for (var i = 0; i < langs.length; i++) {
+        if (langs[i].value == lang) {
+          return langs[i].name;
+        }
+      }
+      return lang;
+    }
   })
 });

www/app/index.html

@@ -8,7 +8,6 @@
   <title>ETC Mining Pool</title>
   <meta name="description" content="High profitability ETC mining pool" />
   <meta name="keywords" content="Ethereum, ethereum, Classic, classic, ETC, etc, pool, mining, cryptocurrency" />
-  <script src="https://cdn.polyfill.io/v1/polyfill.min.js?features=Intl.~locale.en"></script>
   {{content-for "head"}}
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"

www/app/routes/application.js

@@ -1,22 +1,88 @@
 import Ember from 'ember';
 import config from '../config/environment';
 
+function selectLocale(selected) {
+  // FIXME
+  let supported = ['en', 'ar-sa', 'en-us'];
+  const language = navigator.languages[0] || navigator.language || navigator.userLanguage;
+
+  let locale = selected;
+
+  if (locale == null) {
+    // default locale
+    locale = language;
+    if (supported.indexOf(locale) < 0) {
+      locale = locale.replace(/\-[a-zA-Z]*$/, '');
+    }
+  }
+  if (supported.indexOf(locale) >= 0) {
+    if (locale === 'en') {
+      locale = 'en-us';
+    }
+  } else {
+    locale = 'en-us';
+  }
+  return locale;
+}
+
+
 export default Ember.Route.extend({
   intl: Ember.inject.service(),
-
+  selectedLanguage: null,
+  languages: null,
   beforeModel() {
-    this.get('intl').setLocale('en-us');
+    let locale = this.get('selectedLanguage');
+    if (!locale) {
+      // read cookie
+      locale = Ember.$.cookie('lang');
+      // pick a locale
+      locale = selectLocale(locale);
+
+      this.get('intl').setLocale(locale);
+      Ember.$.cookie('lang', locale);
+      console.log('INFO: locale selected - ' + locale);
+      this.set('selectedLanguage', locale);
+    }
+    let intl = this.get('intl');
+    this.set('languages', [
+      { name: intl.t('lang.english'), value: 'en-us' },
+      { name: intl.t('lang.arabic'), value: 'ar-sa' }
+    ]);
+  },
+
+  actions: {
+    selectLanguage: function (lang) {
+      let selected = lang;
+      if (typeof selected === 'undefined') {
+        return true;
+      }
+      let locale = selectLocale(selected);
+      this.get('intl').setLocale(locale);
+      this.set('selectedLanguage', locale);
+      Ember.$.cookie('lang', locale);
+      let languages = this.get('languages');
+      for (var i = 0; i < languages.length; i++) {
+        if (languages[i].value == locale) {
+          Ember.$('#selectedLanguage').html(languages[i].name + '<b class="caret"></b>');
+          break;
+        }
+      }
+
+
+      return true;
+    }
   },
 
-	model: function() {
+  model: function () {
     var url = config.APP.ApiUrl + 'api/stats';
-    return Ember.$.getJSON(url).then(function(data) {
+    return Ember.$.getJSON(url).then(function (data) {
       return Ember.Object.create(data);
     });
   },
 
-  setupController: function(controller, model) {
+  setupController: function (controller, model) {
     this._super(controller, model);
     Ember.run.later(this, this.refresh, 5000);
+    model.languages = this.get('languages');
   }
 });

www/translations/ar-sa.yaml

@@ -0,0 +1,5 @@
+lang:
+  arabic: عربي
+  english: English
+menu:
+  home: الرئيسية

www/translations/en-us.yaml

@@ -1,4 +1,3 @@
-
 errors:
   header: Stats API Temporarily Down
   message: Usually it's just a temporal issue and mining is not affected.
@@ -25,6 +24,7 @@ menu:
   language: language
 
 lang:
+  arabic: عربي
   english: English
 
 home: